/* styles.css */
:root{
  --bg: #0b0c0f;
  --bg2:#101218;
  --stone:#14151b;
  --card:#12131a;
  --line: rgba(255,255,255,.10);
  --text:#e9e9ea;
  --muted: rgba(233,233,234,.72);
  --gold:#d6b46a;
  --gold2:#b58c3b;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --r: 18px;
  --r2: 26px;
  --font: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "Cormorant Garamond", serif;
}

*{box-sizing:border-box}
html{height:100%;background: var(--bg);}
body{
	overflow-x: hidden;
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
radial-gradient(900px 500px at 15% 10%, rgba(214,180,106,.10), transparent 60%),
    radial-gradient(700px 400px at 85% 20%, rgba(180,140,90,.08), transparent 65%),
    linear-gradient(
      180deg,
      #1a1410 0%,
      #0f0d0b 45%,
      #07070a 100%
    ) !important;
}

a{color:inherit; text-decoration:none}
.container{width:min(1200px, 92vw); margin:0 auto}

.dot{display:inline-block; width:6px; height:6px; border-radius:999px; background:rgba(214,180,106,.6); margin:0 10px}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.fineprint{font-size:12px; color:rgba(233,233,234,.62); line-height:1.4}

.topstrip{
  background:linear-gradient(90deg, rgba(214,180,106,.18), rgba(214,180,106,.06));
  border-bottom:1px solid rgba(214,180,106,.25);
}
.topstrip__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0;
  font-size:13px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px;
  border:1px solid rgba(214,180,106,.35);
  border-radius:999px;
  background:rgba(0,0,0,.25);
}
.link-muted{color:rgba(233,233,234,.75)}
.link-muted:hover{color:var(--text)}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(9,10,14,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:12px 0;
}

.brand__text{display:none;}

/* плавные анимации */
.header,
.brand__logo,
.nav a,
.headinfo__k,
.headinfo__v,
.header__bottom{
  transition: all .22s ease;
}


/* режим "уменьшенный" */
.header.is-compact .brand__logo{
  width:40px;
  height:40px;
}



.headinfo__item{
  transition:
    opacity .25s ease,
    max-height .25s ease,
    transform .25s ease;
  overflow: hidden;
}

/* 1 и 3 — плавно скрыть */
.header.is-compact .headinfo__item:nth-child(1),
.header.is-compact .headinfo__item:nth-child(3){
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  transform: translateY(-4px);
}

/* 2 — уменьшить высоту */
.header.is-compact .headinfo__item:nth-child(2){
  max-height: 35px; 
    padding: 0; 
}




.header.is-compact .headinfo__item .headinfo__k{display:none;}


.header.is-compact .brand__text{display:block;min-width: 200px;}


.header.is-compact .header__top{
  padding-top: 6px;
  padding-bottom: 6px;
}

.header.is-compact .headinfo__k{
   font-size:0.9vw;
}

.header.is-compact .headinfo__v{
  font-size:0.9vw;
  line-height: 16px;
}

.header.is-compact .nav a{
  font-size:12px;
  padding:6px 9px;
}

/* чуть сжать нижнюю строку меню */
.header.is-compact .header__bottom{
  margin-top: 8px;
  padding-top: 8px;
}

/* можно слегка уменьшить высоту всей шапки визуально */
.header.is-compact{
  background: rgba(9,10,14,.88);
}




/* ===== Desktop dropdown in header ===== */
.navDrop{ position:relative; display:inline-flex; align-items:center; }

.navDrop__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:transparent;
  color:rgba(233,233,234,.9);
  cursor:pointer;
}
.navDrop__btn:hover{ border-color: rgba(214,180,106,.35); }

.navDrop__chev{ opacity:.75; font-size:12px; }

.navDrop__menu{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width: 260px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(9,10,14,.96);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display:none;
  z-index:80;
}
.navDrop__menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:rgba(233,233,234,.86);
}
.navDrop__menu a:hover{
  background: rgba(214,180,106,.10);
  color: rgba(233,233,234,.96);
}
.navDrop__sep{
  height:1px;
  background: rgba(255,255,255,.08);
  margin:8px 0;
}

.navDrop.is-open .navDrop__menu{ display:block; }
.navDrop.is-open .navDrop__btn{ border-color: rgba(214,180,106,.45); }

/* hover open on desktop (приятно) */
@media (min-width: 1021px){
  .navDrop:hover .navDrop__menu{ display:block; }
}

/* ===== Mobile dropdown (accordion) ===== */
.mnavDrop{ display:grid; gap:8px; }
.mnavDrop__btn{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(233,233,234,.92);
  cursor:pointer;
}
.mnavDrop__menu{
  display:grid;
  gap:6px;
  padding: 6px 6px 2px;
}
.mnavDrop__menu a{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}










.brand{display:flex; align-items:center; gap:12px;min-width:auto; }
.brand__logo{width:114px; height:114px; object-fit:contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.brand__name{font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.2px}
.brand__tag{font-size:12px; color:rgba(233,233,234,.72)}

.nav{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.nav a{
  font-size:13px;
  color:rgba(233,233,234,.78);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav a:hover{
  color:var(--text);
  border-color:rgba(214,180,106,.25);
  background:rgba(214,180,106,.06);
}

.header__cta{display:flex; align-items:center; gap:14px}
.geo{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(0,0,0,.25)}
.geo__row{display:flex; gap:10px; align-items:flex-start}
.geo__pin{opacity:.9}
.geo__title{font-size:12px; color:rgba(233,233,234,.9); font-weight:600}
.geo__text{font-size:11px; color:rgba(233,233,234,.65)}

.contacts-mini{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.phone{font-weight:700; letter-spacing:.2px}
.worktime{font-size:11px; color:rgba(233,233,234,.65)}

/* Buttons */
.btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(214,180,106,.35)}
.btn:active{transform: translateY(0)}
.btn--full{width:100%}
.btn--gold{
  border-color: rgba(214,180,106,.55);
  background: linear-gradient(180deg, rgba(214,180,106,.22), rgba(181,140,59,.12));
  box-shadow: 0 12px 30px rgba(214,180,106,.12);
}
.btn--gold:hover{background: #ff8c00;}
.btn--ghost{
  background:rgba(255,255,255,.02);
}

.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  cursor:pointer;
}
.burger span{display:block; height:2px; background:rgba(233,233,234,.8); margin:7px 10px; border-radius:999px}

/* Mobile nav */
.mnav{
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(9,10,14,.85);
}
.mnav__inner{
  display:grid;
  gap:10px;
  padding:14px 0 18px;
}
.mnav a{
	display: block;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
}

/* Hero */
.hero{
  position:relative;
  padding:34px 0 32px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:-20px;
  background:
    radial-gradient(900px 500px at 18% 18%, rgba(214,180,106,.16), transparent 60%),
    radial-gradient(1000px 520px at 75% 10%, rgba(214,180,106,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.55;
  pointer-events:none;
}

.hero__inner{position:relative; display:flex; gap:18px; align-items:start}

.kicker{
  display:inline-flex;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(214,180,106,.9);
  margin-bottom:10px;
}

.h1{
  font-family:var(--serif);
  font-size:46px;
  line-height:1.02;
  margin:0 0 12px;
}
.h2{
  font-family:var(--serif);
  font-size:36px;
  line-height:1.08;
  margin:0;
}
.lead{font-size:16px; color:rgba(233,233,234,.78); line-height:1.6; margin:0 0 16px}
.checklist{list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px}
.checklist li{
  padding-left:28px;
  position:relative;
  color:rgba(233,233,234,.8);
}
.checklist li:before{
  content:"✓";
  position:absolute; left:0; top:0;
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid rgba(214,180,106,.35);
  color:rgba(214,180,106,.95);
  background: rgba(214,180,106,.08);
}

.hero__actions{display:flex; flex-wrap:wrap; gap:10px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(214,180,106,.55);
  border-radius: var(--r2);
  padding:18px;
  box-shadow: var(--shadow);
}
.card--glass{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.card--dark{
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
}
.card__title{
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  margin:0 0 8px;
}
.card__subtitle{color:rgba(233,233,234,.72); font-size:13px; line-height:1.5; margin-bottom:12px}

.form{display:grid; gap:10px}
.field{display:grid; gap:6px}
.field span{font-size:12px; color:rgba(233,233,234,.7)}
.field input,.field textarea,.field select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color: rgba(214,180,106,.45);
  box-shadow: 0 0 0 3px rgba(214,180,106,.08);
}
.form__status{font-size:12px; color:rgba(214,180,106,.95); min-height:16px}

.trust{margin-top:12px; display:grid; gap:8px}
.trust__item{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.22)}
.trust__icon{opacity:.9}
.trust__note{font-size:11px; color:rgba(233,233,234,.58); margin-top:4px}

/* Slider */
.slider{position:relative}
.slider__track{display:flex; transition: transform .55s ease; will-change: transform}
.slide{min-width:100%}
.slider__controls{margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.iconbtn{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:rgba(233,233,234,.85);
  cursor:pointer;
  font-size:22px;
}
.iconbtn:hover{border-color: rgba(214,180,106,.35)}
.dots{display:flex; gap:8px; align-items:center; justify-content:center; flex:1}
.dotbtn{
  width:8px; height:8px; border-radius:999px;
  border:1px solid rgba(214,180,106,.35);
  background:rgba(214,180,106,.10);
  cursor:pointer;
}
.dotbtn[aria-current="true"]{
  width:26px;
  background:rgba(214,180,106,.35);
}

/* Sections */
.section{padding:54px 0}
.section--accent{
  background:
    linear-gradient(180deg, rgba(214,180,106,.08), transparent 55%),
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  border-top:1px solid rgba(214,180,106,.14);
  border-bottom:1px solid rgba(214,180,106,.14);
}
.section--stone{
  background:
    radial-gradient(1200px 600px at 50% -40%, rgba(214,180,106,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section__head{display:grid; gap:10px; margin-bottom:18px}
.text{color:rgba(233,233,234,.78); line-height:1.7; margin:0}

.grid{display:grid; gap:14px}
.grid--2{grid-template-columns: 1fr 1fr}
.grid--3{grid-template-columns: repeat(3, 1fr)}

.cards{display:grid; gap:14px}
.cards--3{grid-template-columns: repeat(3, 1fr)}

.stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom:12px}
.stat{padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.22)}
.stat__num{font-family:var(--serif); font-size:28px; font-weight:700; color:rgba(214,180,106,.95)}
.stat__txt{font-size:12px; color:rgba(233,233,234,.72)}

.ph{
  border-radius:18px;
  border:1px dashed rgba(214,180,106,.35);
  background:rgba(0,0,0,.22);
  color:rgba(233,233,234,.65);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.ph--wide{height:400px}
.ph--map{height:320px}

/* Carousel (About) */
.carousel{position:relative}
.carousel__track{display:flex; transition: transform .55s ease}
.carousel__track > *{min-width:100%}
.carousel__controls{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px}

/* Offer */
/* ===== SUPER OFFER (как на картинке) ===== */
.super{
  position:relative;
  padding:56px 0;
  overflow:hidden;
  border-top:1px solid rgba(214,180,106,.14);
  border-bottom:1px solid rgba(214,180,106,.14);
}

/* фон */
.super__bg{
  position:absolute; inset:0;
  background-image: url("./img/super/super-bg.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
}

.super__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 35%, rgba(214,180,106,.22), transparent 62%),
    radial-gradient(1100px 520px at 85% 20%, rgba(214,180,106,.12), transparent 65%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 52%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.72) 100%);
}

.super__container{position:relative; z-index:1}

.super__frame{
  position:relative;
  border-radius: 26px;
  padding: 22px 22px 18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(10,11,16,.55), rgba(6,6,9,.65));
  box-shadow: 0 25px 70px rgba(0,0,0,.55);
  overflow:hidden;
}

/* декоративная верхняя линия как в макете */
.super__frame:before{
  content:"";
  position:absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(214,180,106,.55), transparent);
  opacity:.55;
}

/* табличка "Супероффер" */
.super__label{
  position:absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 18px;
  border-radius: 10px;
  border:1px solid rgba(214,180,106,.55);
  background: linear-gradient(180deg, rgba(10,10,12,.88), rgba(0,0,0,.55));
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.super__label span{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: rgba(233,233,234,.95);
  letter-spacing:.02em;
}

/* сетка */
.super__grid{
  display:grid;
  grid-template-columns: 1.05fr 1.35fr 1.05fr;
  gap: 18px;
  align-items: center;
  padding-top: 38px; /* чтобы не налезать на табличку */
}

/* монумент слева */
.super__left{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding-left: 6px;
}
.super__monument{
  width: min(360px, 100%);
  height: auto;
  display:block;
  filter: drop-shadow(0 22px 48px rgba(0,0,0,.65));
}

/* центр */
.super__center{padding: 0 6px}

.super__title{
  margin:0;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.05;
  color: rgba(233,233,234,.95);
  text-shadow: 0 10px 30px rgba(0,0,0,.65);
}

.super__price{
  margin-top: 10px;
  display:flex;
  align-items: baseline;
  gap: 14px;
}
.super__priceFrom{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 36px;
  color: rgba(214,180,106,.95);
  text-shadow: 0 10px 28px rgba(0,0,0,.65);
}
.super__priceVal{
  font-family: var(--serif);
  font-weight: 800;
  font-size: 64px;
  letter-spacing: .02em;
  color: rgba(214,180,106,.98);
  text-shadow: 0 12px 32px rgba(0,0,0,.75);
}

/* буллеты по центру */
.super__bullets{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:grid;
  gap: 12px;
  max-width: 520px;
}
.super__bullets li{
  position:relative;
  padding-left: 34px;
  color: rgba(233,233,234,.85);
  font-size: 20px;
  line-height: 1.35;
  text-shadow: 0 10px 20px rgba(0,0,0,.55);
}
.super__bullets li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width: 24px;
  height: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(214,180,106,.5);
  background: rgba(214,180,106,.12);
  color: rgba(214,180,106,.98);
  box-shadow: 0 10px 22px rgba(0,0,0,.5);
}

/* справа карточка */
.super__right{
  display:flex;
  justify-content:flex-end;
}

.super__card{
  width: min(360px, 100%);
  border-radius: 14px;
  padding: 16px 16px 12px;
  border: 1px solid rgba(214,180,106,.35);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28));
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  position:relative;
}

/* имитация рамки/орнамента */
.super__card:before{
  content:"";
  position:absolute; inset:10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

.super__cardTitle{
  font-family: var(--serif);
  font-weight: 800;
  font-size: 28px;
  color: rgba(233,233,234,.95);
  margin-bottom: 12px;
  text-align:center;
}

.super__list{
  display:grid;
  gap: 10px;
}

.super__row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(233,233,234,.88);
  font-size: 18px;
}

.super__check{
  color: rgba(214,180,106,.98);
  font-weight: 900;
}
.super__note{
  color: rgba(214,180,106,.9);
  font-weight: 700;
  font-size: 16px;
  align-self:center;
}

.super__fine{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(214,180,106,.85);
  text-align:right;
}

/* нижние кнопки */
.super__actions{
  display:flex;
  gap: 16px;
  justify-content:center;
  margin-top: 16px;
  padding-bottom: 6px;
}

.superBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 320px;
  padding: 14px 18px;
  border-radius: 14px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 24px;
  letter-spacing:.02em;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  transition: transform .12s ease, filter .2s ease, border-color .2s ease;
}
.superBtn:hover{transform: translateY(-1px)}
.superBtn:active{transform: translateY(0)}

.superBtn--gold{
  color:#1b1202;
  border-color: rgba(214,180,106,.75);
  background:
    linear-gradient(180deg, rgba(214,180,106,.95), rgba(181,140,59,.92));
  box-shadow: 0 16px 42px rgba(214,180,106,.18);
}
.superBtn--dark{
  color: rgba(233,233,234,.92);
  border-color: rgba(214,180,106,.35);
  background:
    linear-gradient(180deg, rgba(18,19,26,.65), rgba(0,0,0,.45));
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

/* адаптив */
@media (max-width: 1100px){
  .super__grid{grid-template-columns: 1fr; padding-top: 54px}
  .super__left{justify-content:center}
  .super__right{justify-content:center}
  .super__title{font-size:38px; text-align:center}
  .super__price{justify-content:center}
  .super__bullets{margin-left:auto; margin-right:auto}
  .super__actions{flex-wrap:wrap}
  .superBtn{min-width: min(360px, 92vw)}
}

@media (max-width: 640px){
  .super__title{font-size:32px}
  .super__priceVal{font-size:52px}
  .super__bullets li{font-size:18px}
}

/* Table */
.tablecard{padding:0}
.tablewrap{overflow:auto}
.table{width:100%; border-collapse:collapse; min-width:760px}
.table th, .table td{padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; font-size:13px}
.table th{color:rgba(233,233,234,.75); background:rgba(0,0,0,.22); position:sticky; top:0}
.note{padding:14px 16px; color:rgba(233,233,234,.68); font-size:12px}

/* Promo */
.card--promo{position:relative; overflow:hidden}
.promo__top{display:grid; gap:8px; margin-bottom:10px}
.promo__img img{width:100%;height:250px; background-size:cover;}
.promo__badge{
	position:absolute;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(214,180,106,.45);
  background:rgba(214,180,106,.10);
  color:rgba(214,180,106,.95);
  font-size:12px;
  letter-spacing:.04em;
}
.promo__title{font-family:var(--serif); font-size:20px; font-weight:700}

/* Catalog */
.catalog{display:grid; grid-template-columns: .78fr 1.22fr; gap:14px; align-items:start}
.filters__title{font-family:var(--serif); font-size:22px; font-weight:700; margin-bottom:10px}
.filters__grid{display:grid; gap:10px}
.filters__hint{margin-top:10px; font-size:12px; color:rgba(233,233,234,.62)}
.products__bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.product{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.14));
  overflow:hidden;
  box-shadow: var(--shadow);
}
.product__img{
  height:200px;
  background:
    radial-gradient(400px 160px at 30% 20%, rgba(214,180,106,.18), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:flex; align-items:center; justify-content:center;
  color:rgba(233,233,234,.62);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.product__img img{height: 100%;
    width: auto;background-size:cover;}
.product__body{padding:14px}
.product__title{font-family:var(--serif); font-size:20px; font-weight:700; margin:0 0 6px}
.product__meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.pill{
  font-size:11px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:rgba(233,233,234,.7);
}
.price{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.price__val{font-weight:800; letter-spacing:.2px}
.product__actions{display:flex; gap:10px; margin-top:12px}

/* Addresses list */
.addr{margin:0; padding-left:18px; color:rgba(233,233,234,.78); line-height:1.7}
.addr li{margin:6px 0}

/* FAQ */
.faq details{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  border-radius:18px;
  padding:12px 14px;
  margin:10px 0;
}
.faq summary{
  cursor:pointer;
  font-family:var(--serif);
  font-size:20px;
  font-weight:700;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq__content{margin-top:10px; color:rgba(233,233,234,.78); line-height:1.7}

/* Footer */
.footer{
  position:relative;
  padding:54px 0 24px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer__bg{
  position:absolute; inset:-20px;
  background:
    radial-gradient(900px 500px at 20% 40%, rgba(214,180,106,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(214,180,106,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.80));
  pointer-events:none;
}
.footer__inner{position:relative}
.footer__grid{display:grid; grid-template-columns: 1.2fr .7fr .9fr 1fr; gap:14px; align-items:start}
.footer__brand{ gap:10px; align-items:center; margin-bottom:12px}
.footer__brand img{width:250px; }
.footer__name{font-family:var(--serif); font-size:22px; font-weight:700}
.footer__tag{font-size:12px; color:rgba(233,233,234,.68)}

.footer__box{margin-top:10px; padding:14px; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.25)}
.footer__boxTitle{font-family:var(--serif); font-size:20px; font-weight:700; margin-bottom:8px}
.footer__contacts{display:grid; gap:6px; margin-bottom:10px}

.footer__colTitle{font-family:var(--serif); font-size:20px; font-weight:700; margin-bottom:10px}
.footer__links{display:grid; gap:8px}
.footer__links a{color:rgba(233,233,234,.78)}
.footer__links a:hover{color:var(--text)}

.requisites{display:grid; gap:10px; color:rgba(233,233,234,.78); font-size:12px; line-height:1.5}
.req{padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.22)}
.req__k{color:rgba(233,233,234,.62); font-size:11px; margin-bottom:6px}

.footer__bottom {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: #ccc;
}
/* Modal */
.modal{position:fixed; inset:0; z-index:60}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.65)}
.modal__panel{
  position:relative;
  width:min(520px, 92vw);
  margin: 8vh auto;
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,19,26,.92), rgba(9,10,14,.92));
  box-shadow: var(--shadow);
  padding:18px;
}
.modal__close{
  position:absolute; top:12px; right:12px;
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:rgba(233,233,234,.9);
  cursor:pointer;
  font-size:22px;
}
.modal__title{font-family:var(--serif); font-size:26px; font-weight:700}
.modal__subtitle{color:rgba(233,233,234,.72); margin:6px 0 12px}

/* Responsive */
@media (max-width: 1020px){
  .nav{display:none}
  .burger{display:block}
  .geo{display:none}
  .hero__inner{grid-template-columns: 1fr}
  .catalog{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr 1fr}
  .cards--3{grid-template-columns: 1fr}
  .offer{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .h1{font-size:36px}
  .h2{font-size:30px}
  .grid--2{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr}
  .contacts-mini{align-items:flex-start}
}




/* HEADER layout */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(9,10,14,.78);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header .container{padding:12px 0}

.header__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}

.headinfo{
  display:flex; align-items:center; gap:14px;
}
.headinfo__item{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
  min-width:160px;
}
.headinfo__k{font-size:13px; color:rgba(233,233,234,.62); margin-bottom:4px}
.headinfo__v{font-size: 14px;
    color: rgba(233,233,234,.88);
    font-weight: 600;
    line-height: 20px;}
.headinfo__link:hover{color:var(--gold)}

.header__bottom{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.nav{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}

.burger{display:none}


/* HERO with background images */
.hero--fullscreen{
  position:relative;
  padding:0;
  display:block;
}

.heroMedia{
  position:relative;
  overflow:hidden;
}

.heroMedia__track{
  display:flex;
  height:100%;
  transition: transform .65s ease;
  will-change: transform;
}

.heroMedia__slide{
  min-width:100%;
  min-height: calc(80vh - 100px);
  display:flex;
  align-items:center;
  position:relative;
  background-image: var(--bg);
  background-size: cover;
  background-position:center;
}

.heroMedia__overlay{
  position:absolute; inset:0;
  /* затемнение + золото по краям */
  background:
    radial-gradient(900px 500px at 20% 25%, rgba(214,180,106,.18), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(214,180,106,.12), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.70) 100%);
}

.heroMedia__content{
  position:relative;
  padding: 25px;
  max-width: 780px;
  border-radius:20px;
  background:rgb(0,0,0,0.7);
}

.heroMedia__controls{
  position:absolute;
  left:0; right:0;
  bottom: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}
.heroMedia__controls .iconbtn,
.heroMedia__controls .dots{
  pointer-events:auto;
}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom: 14px;
  transform:translateX(-50%);
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(214,180,106,.28);
  background:rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center;
  color:rgba(214,180,106,.92);
  z-index:3;
}

@media (max-width: 1020px){
  .hero--fullscreen,
  .heroMedia,
  .heroMedia__slide{min-height: calc(100vh - 96px)}
  .heroMedia__content{padding: 44px 10px 76px; max-width: 92vw}
}

@media (max-width: 640px){
  .heroMedia__overlay{
    background:
      radial-gradient(700px 420px at 30% 20%, rgba(214,180,106,.16), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.80));
  }
}


/* THUMB SLIDER (About) — главное не вылезает */
.thumbslider{
  display:grid;
  gap:12px;
      position: relative;
}

.thumbslider__viewport{
  border-radius:18px;
  overflow:hidden; /* важно: ничего не вылезает */
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}

.thumbslider__track{
  display:flex;
  transition: transform .55s ease;
  will-change: transform;
}
.thumbslider__slide{min-width:100%}

.thumbslider__thumbs{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}

.thumb{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:rgba(233,233,234,.75);
  cursor:pointer;
}
.thumb[aria-current="true"]{
  border-color: rgba(214,180,106,.55);
  background: rgba(214,180,106,.10);
  color: rgba(233,233,234,.92);
}
.thumb span{font-size:12px; font-weight:600}

.thumbslider__nav {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 10; /* Убедитесь, что это не слишком высокое значение */
}

.thumbslider__thumbs {
  position: relative;
  z-index: 20; /* Выше, чем навигация */
}

.thumb {
  position: relative;
  z-index: 30;
}
/* responsive */
@media (max-width: 1020px){
  .headinfo__item{display:none}
  .burger{display:block}
  .nav{display:none}
  .mnav{margin-top:10px}
}

@media (max-width: 640px){
  .hero--fullscreen{min-height: calc(100vh - 96px)}
  .thumbslider__thumbs{grid-template-columns: repeat(2, 1fr)}
}



.section__head--row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.best__actions{display:flex; gap:10px; flex-wrap:wrap}
.best__hint{margin-top:12px}

/* Full width carousel */
.carouselFull{
  position:relative;
  margin-top:16px;
}

.carouselFull__viewport{
  overflow:hidden;
  width:100%;
}

.carouselFull__track{
  display:flex;
  gap:14px;
  padding: 0 calc((100vw - min(1200px, 92vw)) / 2); /* выравнивание как container */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* мы будем скроллить через transform (JS), но оставим на всякий */
}

.carouselFull__slide{
  flex: 0 0 auto;
  width: min(360px, 86vw); /* карточка */
  scroll-snap-align: start;
}

/* стрелки поверх */
.carouselFull__arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:5;
  opacity:.95;
}
.carouselFull__arrow--left{ left: 10px; }
.carouselFull__arrow--right{ right: 10px; }

/* затемнения краёв (чтобы было "дорого") */
.carouselFull::before,
.carouselFull::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 64px;
  z-index:4;
  pointer-events:none;
}
.carouselFull::before{
  left:0;
  background: linear-gradient(90deg, rgba(7,7,10,.95), rgba(7,7,10,0));
}
.carouselFull::after{
  right:0;
  background: linear-gradient(270deg, rgba(7,7,10,.95), rgba(7,7,10,0));
}

/* курсор "grab" при перетаскивании */
.carouselFull__viewport{ cursor: grab; }
.carouselFull__viewport.is-dragging{ cursor: grabbing; }

/* адаптив */
@media (max-width: 640px){
  .section__head--row{align-items:flex-start; flex-direction:column}
  .carouselFull__arrow--left{ left: 6px; }
  .carouselFull__arrow--right{ right: 6px; }
  .carouselFull__slide{ width: 84vw; }
  .carouselFull::before, .carouselFull::after{ width: 34px; }
}

/* ===== CALC: horizontal background ===== */
.section--calc-bg{
  position: relative;
  overflow: hidden;
  padding: 80px 0; /* можно подрегулировать */
}

/* фоновое изображение */
.section--calc-bg::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("./images/calc-bg-wide.jpg"); /* ← ОДНА картинка */
  background-repeat: no-repeat;
  background-position: center center;

  /* КЛЮЧЕВОЕ */
  background-size: 100% auto; /* растягиваем ТОЛЬКО по ширине */

  z-index: 0;
}

/* затемнение для текста */
.section--calc-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.55) 50%,
    rgba(0,0,0,.70) 100%
  );
  z-index: 1;
}

/* контент поверх */
.section--calc-bg > .container{
  position: relative;
  z-index: 2;
}


@media (min-width: 1600px){
  .section--calc-bg::before{
    background-size: 1600px auto;
  }
}






/* Category hero */
.categoryHero{padding:42px 0}
.crumbs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  color:rgba(233,233,234,.72);
  font-size:13px;
  margin-bottom:14px;
}
.crumbs a{color:rgba(233,233,234,.78)}
.crumbs a:hover{color:var(--text)}
.categoryHero__grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap:14px;
  align-items:start;
}
.categoryHero__title{margin:0}
.categoryHero__text{margin:10px 0 12px; line-height:1.6}
.categoryHero__badges{display:flex; gap:8px; flex-wrap:wrap}
.categoryHero__cta{height:max-content}

/* Pagination */
.pagination{
  margin-top:16px;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

@media (max-width: 1020px){
  .categoryHero__grid{grid-template-columns:1fr}
}

/* ===== Scroll Reveal ===== */
.reveal{
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}

/* направления */
.reveal.from-left{
  transform: translateX(-80px);
}
.reveal.from-right{
  transform: translateX(80px);
}
.reveal.from-bottom{
  transform: translateY(60px);
}

/* активное состояние */
.reveal.is-visible{
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* небольшая задержка (по желанию) */
.reveal.delay-1{ transition-delay: .15s; }
.reveal.delay-2{ transition-delay: .3s; }
.reveal.delay-3{ transition-delay: .45s; }

/* уважение к accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal{
    transition: none;
    opacity: 1;
    transform: none;
  }
}


.pag { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pag__btn { padding:8px 12px; border:1px solid #ddd; background:#fff; border-radius:10px; cursor:pointer; }
.pag__btn.is-active { border-color:#b38a2f; font-weight:700; }
.pag__btn:disabled { opacity:.5; cursor:default; }
.pag__dots { padding:0 6px; opacity:.6; }

/* ===== Cookie bar ===== */
.cookie{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:120;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.cookie__inner{
  max-width:1100px;
  width:100%;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,14,.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  pointer-events:auto;
}

.cookie__text{
  color:rgba(233,233,234,.85);
  font-size:13px;
  line-height:1.5;
}

.cookie__text a{
  color:rgba(214,180,106,.95);
  text-decoration:underline;
}

.cookie__actions{
  display:flex;
  gap:10px;
  flex-shrink:0;
}

@media (max-width: 720px){
  .cookie__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .cookie__actions{
    width:100%;
  }
  .cookie__actions .btn{
    flex:1;
  }
}
.cookie[hidden] { 
  display: none !important;
}



/* Subcategories tiles (3 per row) */
.subcats{
  margin: 14px 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.subcat{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  display: grid;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease;
}

.subcat:hover{
  transform: translateY(-2px);
  border-color: rgba(214,180,106,.40);
}

.subcat__img{
  position: relative;
  height: 140px;
  overflow: hidden;
}
.subcat__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05);
  transform: scale(1.02);
}

.subcat__img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.70) 100%);
}

.subcat__body{
  padding: 12px 12px 14px;
}

.subcat__title{
  color: rgba(233,233,234,.95);
  font-weight: 800;
  letter-spacing: .2px;
}

.subcat__meta{
  margin-top: 4px;
  color: rgba(233,233,234,.70);
  font-size: 12px;
  line-height: 1.35;
}

/* responsive */
@media (max-width: 1020px){
  .subcats{ grid-template-columns: repeat(2, 1fr); }
  .subcat__img{ height: 132px; }
}
@media (max-width: 560px){
  .subcats{ grid-template-columns: 1fr; }
  .subcat__img{ height: 160px; }
}


/* ===== Double range price (FIXED) ===== */
/* ===== Double range price (thumb only) ===== */

.priceRange{
  display: grid;
  gap: 10px;
}

.priceRange__vals{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* контейнер слайдера */
.priceRange__slider{
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
}

/* трек */
.priceRange__track{
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  z-index: 1;

  pointer-events: none; /* ❗ трек не кликается */
}

/* выделенный диапазон */
.priceRange__fill{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: rgba(214,180,106,.35);
  pointer-events: none; /* ❗ заливка не кликается */
}

/* оба range лежат поверх трека */
.priceRange__input{
  position: absolute;
bottom:8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;

  /* ❗ запрещаем клики по самой полосе range */
  pointer-events: none;
}

/* разный z-index по умолчанию (можно менять из JS при совпадении значений) */
.priceRange__input[data-price-from]{ z-index: 3; }
.priceRange__input[data-price-to]{   z-index: 4; }

/* ===== WebKit (Chrome/Safari/Edge) ===== */

/* сама дорожка у input (прячем, тк рисуем свою) */
.priceRange__input::-webkit-slider-runnable-track{
  height: 8px;
  background: transparent;
}

/* thumb — единственное место, где разрешены клики */
.priceRange__input::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  background: rgba(214,180,106,.95);
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);

  cursor: pointer;

  /* ✅ кликается/тянется только thumb */
  pointer-events: auto;

  /* ✅ мобилки */
  touch-action: none;
}

/* ===== Firefox ===== */

.priceRange__input::-moz-range-track{
  height: 8px;
  background: transparent;
}

.priceRange__input::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(214,180,106,.95);
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);

  cursor: pointer;

  pointer-events: auto;
}

/* убрать обводку focus, оставить аккуратный вид */
.priceRange__input:focus{
  outline: none;
}
.priceRange__input:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 4px rgba(214,180,106,.18), 0 8px 18px rgba(0,0,0,.35);
}
.priceRange__input:focus::-moz-range-thumb{
  box-shadow: 0 0 0 4px rgba(214,180,106,.18), 0 8px 18px rgba(0,0,0,.35);
}

/*geo triger*/
/* Tabs */
.tabs__bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.tabs__btn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(233,233,234,.92);
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}
.tabs__btn.is-active{
  border-color:rgba(214,180,106,.6);
  background:rgba(214,180,106,.14);
}
.tab[hidden]{ display:none !important; }
.tab{ animation: tabFade .25s ease; }
@keyframes tabFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* Text full width */
.shopInfo{ display:grid; gap:10px; margin-bottom:16px; }
.shopInfo__row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.shopInfo__k{ color: rgba(233,233,234,.65); font-size:12px; }
.shopInfo__v{ color: rgba(233,233,234,.92); font-size:13px; line-height:1.55; }
.shopInfo__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }

/* Media 30/70 */
.shopMedia{
  display:grid;
  grid-template-columns: .3fr .7fr;
  gap:14px;
  align-items:stretch;
}
.shopMedia__img img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:16px;
  display:block;
}
.mapBox{
  margin-top:10px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  height:320px;
}
.mapBox iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

@media (max-width: 1020px){
  .shopInfo__row{ grid-template-columns: 1fr; }
  .shopMedia{ grid-template-columns: 1fr; }
  .shopMedia__img img{ height:220px; }
  .mapBox{ height:280px; }
}

/* ===== category template (server) ===== */
.filters__block{ margin-top:14px }
.filters__group{ margin-top:14px }
.filters__subtitle{ font-weight:800; margin-bottom:8px }

.filters__checks{ display:grid; gap:8px }
.check{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none }
.check input{ accent-color: #d6b46a; }
.check__box{
  width:14px; height:14px; border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  display:inline-block;
}
.check__label{ color: rgba(233,233,234,.88); font-size:13px }

.products__tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.pagination__list{
  display:flex; gap:8px; justify-content:center; padding:0; margin:16px 0 0;
  list-style:none;
}

/* cat tree: используем твой {{{cats_html}}} но стилизуем */
.catTree__list{ list-style:none; padding-left:0; margin:0; }
.catTree__list li{ margin:8px 0; }
.catTree__list a{ color: rgba(233,233,234,.92); text-decoration:none; }
.catTree__list a:hover{ color: rgba(214,180,106,.92); }


.thumb img{width:100%;}
.ph--wide img{width:100%;}
















/* ================================
   HEADER INFO — компактно с иконками
   ================================ */

/* Верхняя строка хедера */
.header__top{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:16px;
}

/* Правая зона с карточками */
.headinfo{
  gap:20px;                           /* управляемый отступ */
  align-items:center;
  white-space:nowrap;                 /* ничего не переносим */
}

/* Карточка */
.headinfo__item{
  padding:12px 14px;
  min-width:auto;
  max-width:none;
  background:rgba(255,255,255,.03);
  border-radius:12px;
}


.headinfo__v,
.headinfo__link{
  white-space:nowrap;
}


/* Заголовок карточки + иконка */
.headinfo__k{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  opacity:.85;
  margin-bottom:6px;
}

/* Общие параметры иконки */
.headinfo__k::before{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  opacity:.9;
}

/* 📍 Адреса */
.headinfo__item:nth-child(1) .headinfo__k::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8c08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-4.5 7-11a7 7 0 0 0-14 0c0 6.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3C/svg%3E");
}

/* ☎ Телефоны */
.headinfo__item:nth-child(2) .headinfo__k::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8c08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3 5.2 2 2 0 0 1 5 3h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 3a2 2 0 0 1-.5 2.1L9 11a16 16 0 0 0 4 4l1.2-1.1a2 2 0 0 1 2.1-.5c1 .3 2 .5 3 .6A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");
}

/* 🕒 Время */
.headinfo__item:nth-child(3) .headinfo__k::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8c08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Контент карточек */
.headinfo__v{
	text-overflow:ellipsis;
  font-size:13px;
  line-height:1.35;
  opacity:.9;
}

/* Телефоны — в одну строку */
.headinfo__item:nth-child(2) .headinfo__v{
  white-space:nowrap;
}

/* Кнопка */
.headinfo .btn{
  white-space:nowrap;
  height:44px;
  padding:0 22px;
}

/* ================================
   Адаптация под ноуты и Mac
   ================================ */

@media (max-width:1360px){
  .headinfo{
    grid-template-columns:repeat(2, minmax(240px, 1fr)) auto;
  }
}

@media (max-width:1180px){
  .headinfo{
    grid-template-columns:1fr;
  }
  .headinfo .btn{
    justify-self:flex-start;
    margin-top:8px;
  }
}




/*антимигание мак*/
@supports (-webkit-touch-callout: none) {
  .header{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(9,10,14,.92); /* чуть плотнее вместо blur */
  }
}

.slider__track,
.carousel__track,
.thumbslider__track,
.heroMedia__track {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}




.topar{
position: fixed;
    bottom: 50px;
    border-radius: 30px;
    right: 20px;
    background: rgb(0,0,0,0.5);
    padding: 10px;
	display: none;
}












@media (max-width: 560px){


body{
width:100vw;
overflow-x: hidden;
}

.mtm{margin-top:25px;}

.brand__logo {
    width: 54px;
    height: 54px;
}

.brand {
    gap: 8px;
    min-width:80px;
}


.card {
    padding: 18px 6px;
}


.topstrip,.brand__text{display:none;}


.header.is-compact .brand__text{display:none;}


.section {
padding: 10px 0; 
}

.reveal {
    opacity: 1;
}

.footer__grid {
    display: block;
}


.subcat__img{ height: 160px; }


.topar{
    bottom: 150px;
}


.footer__bottom {
font-size:12px;
}



}