:root{
  --bg:#050507;
  --bg2:#09090c;
  --panel:#111118;
  --panel2:#16161d;
  --panel3:#1d1d25;
  --text:#f8f4ec;
  --muted:rgba(248,244,236,.76);
  --muted2:rgba(248,244,236,.56);
  --gold:#d8b36c;
  --gold2:#f1d79f;
  --gold3:#b88c40;
  --line:rgba(255,255,255,.08);
  --line2:rgba(216,179,108,.22);
  --shadow:0 26px 90px rgba(0,0,0,.44);
  --shadow-soft:0 14px 44px rgba(0,0,0,.26);
  --shadow-card:0 18px 50px rgba(0,0,0,.34);
  --radius:28px;
  --radius2:22px;
  --radius3:16px;
  --max:1320px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--gold2);
  background:
    radial-gradient(circle at 16% 10%, rgba(216,179,108,.14), transparent 18%),
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.05), transparent 14%),
    radial-gradient(circle at 80% 88%, rgba(216,179,108,.08), transparent 18%),
    linear-gradient(180deg,var(--bg),var(--bg2) 55%,#070709);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.18;
  mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

button:hover{
  transform:translateY(-1px);
}

button:active{
  transform:translateY(0);
}

:focus-visible{
  outline:2px solid rgba(216,179,108,.72);
  outline-offset:3px;
}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 16px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(5,5,7,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.header-row{
  min-height:82px;
  display:flex;
  align-items:center;
  gap:16px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:180px;
}

.logo-mark{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--gold),#f5deb0);
  color:#111;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 14px 34px rgba(216,179,108,.22);
}

.logo-text strong{
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:11px;
}

.logo-text small{
  display:block;
  margin-top:2px;
  color:var(--muted2);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1;
  padding:0 6px;
}

.nav a,
.drop-btn,
.lang-switch,
.cart-link,
.menu-btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  line-height:1;
}

.nav a:hover,
.drop-btn:hover,
.lang-switch:hover,
.cart-link:hover,
.menu-btn:hover{
  color:var(--gold2);
  border-color:rgba(216,179,108,.28);
  background:rgba(255,255,255,.02);
}

.nav a.is-active{
  background:rgba(216,179,108,.10);
  border-color:rgba(216,179,108,.30);
  color:var(--gold2);
}

.nav-drop{
  position:relative;
}

.nav-drop::after{
  content:'';
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px; /* перекрывает зазор */
}

.drop-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:240px;
  padding:10px;
  background:rgba(12,12,16,.98);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.nav-drop:hover .drop-menu{
  display:block;
}

.drop-menu a{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  color:var(--muted);
}

.drop-menu a:hover{
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.menu-btn{
  display:none;
}

.cart-link,
.lang-switch{
  border-color:rgba(255,255,255,.08);
}

main{
  min-height:60vh;
}

.section{
  padding:20px 0 56px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:18px;
}

.section-head h2,
.page-title{
  font-size:clamp(26px,3vw,34px);
  letter-spacing:-.03em;
  line-height:1.06;
  margin:0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(216,179,108,.24);
  background:rgba(216,179,108,.08);
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
}

.small{
  color:var(--muted2);
  font-size:13px;
}

.muted{
  color:var(--muted);
}

.lead{
  color:var(--muted);
  line-height:1.82;
  font-size:17px;
}

.card{
  background:linear-gradient(180deg, rgba(21,21,28,.96), rgba(13,13,16,.98));
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow-soft);
}

.page-box{
  padding:24px;
}

.page-box p{
  color:var(--muted);
  line-height:1.8;
  margin:0;
}

/* HERO */

.hero-home{
  position:relative;
  min-height:calc(100vh - 82px);
  overflow:hidden;
  display:flex;
  align-items:center;
}

.hero-home__bg{
  position:absolute;
  inset:0;
}

.hero-home__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-home__overlay{
  position:absolute;
  inset:0;
  
}

.hero-home__inner{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content: flex-start;
  min-height:calc(100vh - 82px);
  padding-bottom:72px;
  padding-left: 40px;
}

.hero-home__btn{
  min-width:240px;
  min-height:58px;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

/* BUTTONS */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  padding:14px 20px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
}

.btn-gold{
  background:linear-gradient(135deg,var(--gold),#f4ddb1);
  color:#111;
  box-shadow:0 14px 32px rgba(216,179,108,.18);
}

.btn-gold:hover{
  box-shadow:0 18px 40px rgba(216,179,108,.24);
}

.btn-dark{
  background:rgba(255,255,255,.05);
  color:var(--text);
  border:1px solid var(--line);
}

.btn-dark:hover{
  border-color:rgba(216,179,108,.28);
}

.btn-sm{
  padding:11px 16px;
  font-size:14px;
}

/* GRID */

.grid{
  display:grid;
  gap:16px;
}

.categories-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.products-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}

/* CATEGORY */

.category{
  padding:20px;
  min-height:132px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:24px;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.category:hover{
  transform:translateY(-2px);
  border-color:rgba(216,179,108,.26);
  background:rgba(255,255,255,.04);
}

.category b{
  display:block;
  font-size:18px;
  margin-bottom:8px;
}

.category span{
  display:block;
  color:var(--muted2);
  line-height:1.6;
  font-size:14px;
}

/* PRODUCT */

.product-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(23,23,29,.98), rgba(13,13,17,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
  min-height:100%;
}

.product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(216,179,108,.30);
  box-shadow:var(--shadow-card);
}

.product-media{
  position:relative;
  display:block;
  flex:0 0 auto;
  padding:12px 12px 0;
}

.product-media__frame{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  max-height:360px;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.05);
}

.product-media__frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:12px;
  transition:transform .36s ease;
}

.product-card:hover .product-media__frame img{
  transform:scale(1.03);
}

.product-badges{
  position:absolute;
  top:22px;
  left:22px;
  right:22px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  pointer-events:none;
  z-index:2;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(14,14,18,.72);
  backdrop-filter:blur(10px);
  font-size:11px;
  line-height:1;
  color:var(--muted);
}

.badge--accent{
  background:linear-gradient(135deg, rgba(216,179,108,.95), rgba(244,221,177,.95));
  color:#111;
  border-color:transparent;
  font-weight:800;
}

.badge--soft{
  border-color:rgba(216,179,108,.22);
  color:var(--gold2);
}

.product-content{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:10px;
  padding:16px 16px 15px;
}

.product-brand{
  font-size:11px;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--gold2);
}

.product-title{
  font-size:17px;
  font-weight:850;
  line-height:1.26;
  letter-spacing:-.02em;
}

.product-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.product-meta__label{
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--muted2);
}

.product-meta__value{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  font-size:12px;
  line-height:1;
}

.product-bottom{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}

.price{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  margin-top:5px;
}

.old{
  font-size:13px;
  color:rgba(247,243,235,.38);
  text-decoration:line-through;
}

.stock{
  margin-top:6px;
  font-size:12px;
  color:#78e0a2;
}

.stock.is-out{
  color:#f2a6a6;
}

/* FOOTER */

.site-footer{
  border-top:1px solid var(--line);
  background:rgba(7,7,9,.94);
}

.footer-grid{
  padding:10px 0;
  display:grid;
  grid-template-columns:1.2fr repeat(3,.8fr);
  gap:18px;
  text-align:right;
}

.footer-logo{
  font-size:14px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:900;
}

.footer-grid h4{
  margin:0 0 12px;
}

.footer-grid a,
.footer-grid span,
.footer-grid p{
  display:block;
  color:var(--muted);
  margin:0 0 8px;
}

/* EFFECTS */

input::placeholder,
textarea::placeholder{
  color:rgba(247,243,235,.36);
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    rgba(216,179,108,.34),
    rgba(216,179,108,.16)
  );
  border-radius:999px;
}

::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.product-card,
.category,
.page-box{
  animation:fadeUp .55s ease both;
}

.product-card:nth-child(2){
  animation-delay:.05s;
}

.product-card:nth-child(3){
  animation-delay:.10s;
}

.category:nth-child(2){
  animation-delay:.05s;
}

.category:nth-child(3){
  animation-delay:.10s;
}

.category:nth-child(4){
  animation-delay:.15s;
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}

@media (max-width:1180px){
  .footer-grid,
  .categories-grid,
  .products-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:860px){
  .footer-grid,
  .categories-grid,
  .products-grid{
    grid-template-columns:1fr;
  }

  .products-grid{
    gap:14px;
  }

  .hero-home{
    min-height:78vh;
  }

  .hero-home__inner{
    min-height:78vh;
    padding-bottom:46px;
  }
}

@media (max-width:760px){
  .header-row{
    position:relative;
    min-height:76px;
    gap:10px;
  }

  .menu-btn{
    display:inline-flex;
  }

  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:14px 16px 18px;
    background:rgba(5,5,7,.98);
    border-bottom:1px solid var(--line);
  }

  .nav.open{
    display:flex;
  }

  .nav a,
  .drop-btn{
    display:block;
    width:100%;
    text-align:left;
  }

  .nav-drop:hover .drop-menu{
    display:none;
  }

  .drop-menu{
    position:static;
    display:block;
    border:none;
    background:transparent;
    box-shadow:none;
    padding:0;
    margin-top:8px;
  }

  .logo{
    min-width:auto;
  }

  .hero-home{
    min-height:68vh;
  }

  .hero-home__inner{
    min-height:68vh;
    padding-bottom:34px;
  }

  .hero-home__btn{
    width:100%;
    max-width:320px;
    min-height:54px;
    font-size:14px;
  }

  .product-content{
    padding:15px 14px 14px;
  }

  .price{
    font-size:20px;
  }

  .product-title{
    font-size:16px;
  }
 
 .text-page{
  padding: 34px 0 72px;
}

.text-page__inner{
  max-width: 820px;
  margin: 0 auto;
}

.text-page__header{
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(216,179,108,.18);
}

.text-page__lead{
  margin-top: 16px;
}

.text-page p{
  color: var(--muted);
  line-height: 1.9;
  margin: 0 0 16px;
  font-size: 16px;
}

.text-page h3{
  margin: 28px 0 12px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--gold2);
}

.text-page__line{
  padding: 8px 0;
}

.text-page__form{
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.text-page input,
.text-page select,
.text-page textarea{
  width: 100%;
  background: rgba(255,255,255,.03);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.text-page input:focus,
.text-page select:focus,
.text-page textarea:focus{
  outline: none;
  border-color: rgba(216,179,108,.45);
  box-shadow: 0 0 0 3px rgba(216,179,108,.08);
  background: rgba(255,255,255,.04);
}

.text-page ::placeholder{
  color: rgba(247,243,235,.36);
}


}

.footer-messengers{
    display: inline-flex;
    gap:25px;
    margin-top:12px;
}

.messenger-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.2s ease;
}

.messenger-btn svg{
    width:35px;
    height:35px;
}



.messenger-btn:hover{
    transform:translateY(-2px);
    opacity:.9;
}

.notice {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.4;
}

.notice--important {
  background: #fff5f5;
  border-left: 4px solid #e53935;
  color: #b71c1c;
}