/* =============================================================
   TOP BANNER — информационная полоса в самом верху (внутри header)
   ============================================================= */
.top-banner{
  width:100%;
  background:linear-gradient(135deg,#2d1f3d 0%,#1a1225 100%);
  color:#e8dff5;
  text-align:center;
  padding:8px var(--gut);
  font-size:clamp(12px,.35vw + 11px,15px);
  line-height:1.4;
  letter-spacing:.02em;
  overflow-wrap:break-word;
  word-break:break-word;
}
.top-banner__text{margin:0;max-width:var(--wrap);margin-inline:auto}
body.has-banner .hero{padding-top:calc(clamp(88px,11vh,132px) + 38px)}

/* =============================================================
   MUHADIS — «лунный свет сквозь дым»
   Один источник света на всю страницу: знак бренда.
   Палитра: тёплый угольный + серебро тоном (без синего и фиолета).
   ============================================================= */

:root{
  /* поверхности — тёплый нейтральный чёрный, НЕ сине-серый */
  --surface:#0C0B0B;
  --surface-2:#0F0E0E;
  --raised:#141414;
  --raised-2:#191918;

  /* чернила */
  --ink:#ECEBE7;
  --ink-2:#B6B5AF;   /* 9.1:1  — основной текст */
  --muted:#9E9D97;   /* 6.4:1  — вторичный */
  --dim:#8B8A84;     /* 4.8:1  — подписи и мелкий юридический */
  --hair:rgba(236,235,231,.20);  /* только декор: точки, номера шагов */

  /* серебро — тональный акцент, не насыщенный цвет */
  --silver:#D9DBD6;
  --silver-2:#AFB1AC;

  --edge:rgba(236,235,231,.085);
  --edge-2:rgba(236,235,231,.14);

  /* ОДИН типографический голос. Знак бренда — единственный дисплейный элемент.
     Купите кириллический дисплейный шрифт — подключите его ровно здесь. */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font);

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
  --r:14px;

  /* лунный срез — единственная bespoke-геометрия страницы */
  --lr:300px; --lx:142px; --ly:142px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* [hidden] обязано скрывать, даже если у элемента задан display.
   Без этого баннер cookie и подобное «прячутся», оставаясь на экране. */
[hidden]{display:none!important}

html{ -webkit-text-size-adjust:100%; }
/* scroll-behavior handled per-element in JS */

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:300;line-height:1.14;letter-spacing:-.015em;font-family:var(--font-display)}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.nowrap{white-space:nowrap}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--gut);top:-100px;z-index:100;background:var(--raised-2);
  color:var(--ink);padding:12px 18px;border-radius:10px;transition:top .18s var(--ease)}
.skip:focus{top:14px}

:focus-visible{outline:2px solid var(--silver);outline-offset:3px;border-radius:6px}

/* ── лунный срез: дуга лимба вместо скруглённого угла ───────────── */
.lunar{
  -webkit-mask-image:radial-gradient(circle var(--lr) at calc(100% + var(--lx)) calc(0px - var(--ly)),
    transparent 0 calc(var(--lr) - 1px), #000 var(--lr));
          mask-image:radial-gradient(circle var(--lr) at calc(100% + var(--lx)) calc(0px - var(--ly)),
    transparent 0 calc(var(--lr) - 1px), #000 var(--lr));
}

/* =============================================================
   АТМОСФЕРА
   ============================================================= */
/* атмосфера уходит на отрицательный слой, а main НЕ получает z-index:
   так первый экран остаётся общим слоем с небом, и чёрный фон ролика
   гасится об него режимом screen, а не садится тёмным прямоугольником */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;will-change:transform}

/* свет приходит из-за верхнего края кадра — не нимб вокруг предмета */
.sky__glow{
  position:absolute;left:50%;top:0;width:170vmax;height:132vh;transform:translate(-50%,-34%);
  background:
    radial-gradient(58% 46% at 47% 40%, rgba(226,228,223,.11) 0%, rgba(226,228,223,.055) 38%,
      rgba(226,228,223,.018) 62%, rgba(226,228,223,0) 78%);
  opacity:var(--glowFade,1);
}

/* серебро с альфой запечено в саму текстуру — маска из grayscale-webp
   читается как alpha=1 и не маскирует ничего, это проверено в браузере */
.sky__smoke{
  position:absolute;left:-8%;right:-8%;top:-12vh;height:126vh;
  background-repeat:repeat;background-position:0 0;
  will-change:transform;
}
.sky__smoke--far{
  background-image:url(assets/smoke-a.webp);background-size:196vw auto;opacity:.30;
}
.sky__smoke--mid{
  background-image:url(assets/smoke-b.webp);background-size:152vw auto;opacity:.20;
}
.sky__smoke--near{
  background-image:url(assets/smoke-a.webp);background-size:120vw auto;opacity:.12;
}

/* свет гаснет по мере удаления от луны — направленный спад, не кольцо-нимб */
.sky__veil{
  position:absolute;inset:0;
  background:radial-gradient(148% 104% at 50% -14%,
    rgba(12,11,11,0) 0%, rgba(12,11,11,.10) 26%, rgba(12,11,11,.34) 52%,
    rgba(12,11,11,.56) 76%, rgba(12,11,11,.68) 100%);
}

/* зерно на подложке — против полос, всегда ПОД контентом */
.sky__grain{position:absolute;inset:0;background:url(assets/grain.webp) repeat;
  background-size:128px 128px;opacity:.030}

main{position:relative}
.nav,.foot{position:relative;z-index:1}

/* =============================================================
   НАВИГАЦИЯ — собранная капсула, не строка ссылок по краям
   ============================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:14px var(--gut) 0;
  transition:padding .3s var(--ease)}
.nav__inner{
  width:min(100%,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:10px 12px 10px 14px;border-radius:100px;
  background:rgba(16,16,17,0);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.nav.is-stuck .nav__inner{
  background:rgba(17,17,18,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 rgba(236,235,231,.07) inset, 0 6px 20px -14px rgba(0,0,0,.9);
}
.nav__brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;
  padding:5px 4px;margin:-5px -4px}
.nav__moon{width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.nav__name{font-size:15px;letter-spacing:.30em;padding-left:.30em;color:var(--ink);font-weight:400}
.nav__links{display:flex;gap:clamp(14px,1.8vw,26px);margin-left:auto;font-size:15px}
.nav__links a{color:var(--ink-2);text-decoration:none;padding:6px 2px;
  transition:color .22s var(--ease)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--ink)}

.nav__cart{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:15px;color:var(--ink);cursor:pointer;
  background:rgba(236,235,231,.055);border:0;padding:9px 17px;border-radius:100px;
  transition:background .22s var(--ease),color .22s var(--ease)}
.nav__cart:hover{background:rgba(236,235,231,.11)}
.nav__count{font-variant-numeric:tabular-nums;color:var(--silver);min-width:1ch;text-align:center}
.nav__count[data-empty="true"]{color:var(--dim)}

.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:13px 6px;
  flex-direction:column;gap:5px;width:44px;min-height:44px;justify-content:center}
.nav__burger-line{display:block;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav__burger-line:first-child{width:20px;margin-left:auto}
.nav__burger-line:last-child{width:13px;margin-left:auto}
.nav[data-menu="open"] .nav__burger-line:first-child{transform:translateY(3.5px) rotate(45deg);width:20px}
.nav[data-menu="open"] .nav__burger-line:last-child{transform:translateY(-3px) rotate(-45deg);width:20px}

.nav__mobile{display:none;flex-direction:column;gap:2px;
  width:min(100%,var(--wrap));margin:8px auto 0;padding:10px;
  background:rgba(17,17,18,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:20px}
.nav__mobile a{padding:13px 16px;text-decoration:none;color:var(--ink-2);border-radius:12px}
.nav__mobile a:hover{background:rgba(236,235,231,.05);color:var(--ink)}

/* =============================================================
   ДЕЙСТВИЕ — одна кнопка, без пары «залитая + контурная»
   ============================================================= */
.act{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-size:16px;line-height:1;color:#0C0C0D;text-decoration:none;cursor:pointer;
  background:linear-gradient(178deg,#EFF0EC 0%,#D2D4CF 100%);
  border:0;border-radius:100px;padding:16px 30px;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
  transition:background .24s var(--ease),box-shadow .24s var(--ease),color .24s var(--ease);
}
.act:hover,.act:focus-visible{background:linear-gradient(178deg,#FFFFFF 0%,#E2E4DF 100%)}
.act:active{background:linear-gradient(178deg,#DFE1DC 0%,#C4C6C1 100%)}
.act--lg{padding:18px 34px;font-size:17px}
.act--sm{padding:11px 20px;font-size:15px}
.act--full{width:100%}
.act--quiet{background:rgba(236,235,231,.06);color:var(--ink);box-shadow:none}
.act--quiet:hover,.act--quiet:focus-visible{background:rgba(236,235,231,.12)}

/* =============================================================
   HERO — первый экран как композиция, а не стопка
   ============================================================= */
.has-cookie .hero{padding-bottom:calc(clamp(34px,5vh,58px) + 128px)}
@media (max-width:700px){.has-cookie .hero{padding-bottom:calc(clamp(34px,5vh,58px) + 168px)}}
.hero{
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;row-gap:clamp(26px,5vh,64px);
  padding:clamp(88px,11vh,132px) var(--gut) clamp(30px,4.4vh,54px);
  width:min(100%,calc(var(--wrap) + var(--gut)*2));margin-inline:auto;
}
/* ── знак бренда ────────────────────────────────────────────────
   Одна картинка с прозрачным фоном. Никаких режимов смешивания:
   на телефонах они у видео работают через раз и оставляют чёрную
   подложку. Размер ведёт высота экрана: луна и MUHADIS обязаны
   помещаться в первый экран целиком, вместе с шапкой и подписью. */
/* overflow-x:clip — страховка от прокрутки вбок: на узком телефоне знак
   и его подсветка чуть шире колонки контента. По вертикали ничего не
   режется, свечение сверху и снизу остаётся целым. */
.logo{display:flex;align-items:center;justify-content:center;
  overflow-x:clip;overflow-y:visible}
.logo__title{margin:0;line-height:0;display:block;position:relative}
/* Тёмный омут под знаком. Нужен на случай, когда браузер не применил
   режим смешивания к видео (так делают отдельные сборки Safari и Android:
   видео выводится своим слоем). Тогда чёрный кадр ложится не на светлое
   лунное свечение, а на чёрное пятно, и рамки вокруг знака нет.
   Там, где смешивание работает, слой не виден вовсе: screen поверх
   чёрного ничего не меняет.
   Размер задан от самого знака (inset в процентах), а не от ширины окна:
   иначе на телефоне слой вылезал за экран и появлялась прокрутка вбок. */
.logo__title::before{
  content:"";position:absolute;inset:-7%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,
    #000 0%, #000 56%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.45) 86%, rgba(0,0,0,0) 100%);
}
.logo__title > .logo__img{position:relative;z-index:1}
.logo__img{
  display:block;margin-inline:auto;
  width:min(86vw, 58svh, 600px);
  height:auto;aspect-ratio:1 / 1;
  object-fit:cover;
  background:transparent;border:0;outline:0;

  /* Кадр ролика квадратный и чёрный, а фон страницы под первым экраном
     светлее — сверху лунное свечение. Без обработки квадрат читается
     тёмной плашкой. Два независимых средства, чтобы он исчез:

     1. screen — чёрное в этом режиме не даёт ничего, то есть просто
        пропадает, а светится только сам знак. Это и есть главный приём.
     2. мягкая маска по краям — работает всегда, даже если браузер
        режим смешивания не поддержал: тогда граница не пропадает
        совсем, но перестаёт быть резкой линией. */
  mix-blend-mode:screen;
  -webkit-mask-image:
     linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
     linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:
     linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
     linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* Если человек попросил систему убрать анимацию — ролик замирает,
   остаётся неподвижный кадр. Останавливает его скрипт, здесь только
   страховка от плавных переходов. */
@media (prefers-reduced-motion:reduce){
  .logo__img{transition:none!important}
}

/* подпись к кадру: заявление бренда и одна кнопка, по сетке контента.
   Прописные — просьба бренда: первая буква не должна отличаться от остальных.
   Регистр задан стилем, в разметке текст обычный — так его правильно
   читают поисковик и экранный диктор. */
.hero__caption{display:grid;justify-items:center;gap:clamp(18px,2.6vh,26px);text-align:center}
.hero__utp{max-width:41ch;color:var(--ink-2);text-align:center;
  font-size:clamp(15px,.68vw + 12.5px,21px);
  line-height:1.44;text-transform:uppercase;letter-spacing:.028em}
.hero__caption .act{justify-self:center}

/* =============================================================
   ОБЩЕЕ ДЛЯ СЕКЦИЙ
   ============================================================= */
section{padding-block:clamp(74px,11vh,138px)}
.sec-h{font-size:clamp(28px,3.4vw,46px)}
/* заголовок целиком капителью: первая буква не выше остальных */
.sec-h--caps{letter-spacing:.06em;font-size:clamp(25px,3vw,40px)}
.sec-note{margin-top:16px;max-width:56ch;color:var(--muted);font-size:16px}
.sec-note--tight{margin-top:clamp(26px,4vh,42px);font-size:15px;color:var(--dim)}
.disclaimer{margin-top:clamp(30px,4.5vh,48px);max-width:74ch;color:var(--dim);font-size:14px;
  line-height:1.6}

/* появление: контент виден ВСЕГДА, класс навешивается скриптом
   и снимается по таймеру-страховке даже если наблюдатель не сработал */
.js-anim .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-anim .reveal.is-in{opacity:1;transform:none}

/* =============================================================
   О БРЕНДЕ
   ============================================================= */
.brand__grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,56px)}
.brand__stmt{font-size:clamp(23px,2.6vw,35px);max-width:26ch}
.brand__body{max-width:60ch;color:var(--ink-2);display:grid;gap:18px}
.facts{border-top:1px solid var(--edge);padding-top:6px}
.facts__row{display:grid;grid-template-columns:minmax(120px,15ch) 1fr;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--edge)}
.facts__row dt{color:var(--dim);font-size:15px}
.facts__row dd{margin:0;color:var(--ink);font-size:15px}

@media (min-width:900px){
  .brand__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-areas:"lead body" "facts facts";column-gap:clamp(40px,6vw,90px)}
  .brand__lead{grid-area:lead}
  .brand__body{grid-area:body}
  .facts{grid-area:facts;margin-top:clamp(10px,2vw,26px)}
  .facts__row{grid-template-columns:minmax(160px,22ch) 1fr}
}

/* =============================================================
   РАЗДЕЛЫ КАТАЛОГА — список на самой странице, без второй коробки.
   Метка раздела — тот же лунный срез, что режет углы панелей,
   только размером с буквицу: открытый раздел освещён, готовящийся — тень.
   ============================================================= */
.cats{
  margin-top:clamp(26px,4vh,40px);
  display:grid;gap:0 clamp(26px,4vw,64px);
  border-top:1px solid var(--edge);
}
@media (min-width:820px){ .cats{grid-template-columns:1fr 1fr} }

.cat{
  appearance:none;-webkit-appearance:none;
  border:0;border-bottom:1px solid var(--edge);border-radius:0;
  background:none;font:inherit;color:inherit;text-align:left;width:100%;
  padding:15px 2px;
  display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;
}
button.cat{cursor:pointer}

/* лунная метка: серебряный диск, срезанный той же дугой лимба */
.cat__mark{
  flex:0 0 auto;align-self:center;
  width:16px;height:16px;border-radius:50%;background:var(--silver-2);
  --lr:10px;--lx:-1px;--ly:-1px;
  transition:background .3s var(--ease);
}
.cat__name{flex:1 1 12ch;color:var(--ink-2);font-size:16px;overflow-wrap:anywhere;
  transition:color .25s var(--ease)}
.cat__meta{flex:0 0 auto;color:var(--dim);font-size:13.5px;font-variant-numeric:tabular-nums}

button.cat:hover .cat__name,button.cat:focus-visible .cat__name{color:var(--ink)}
button.cat:hover .cat__mark{background:var(--silver)}
.cat[aria-pressed="true"] .cat__name{color:var(--silver)}
.cat[aria-pressed="true"] .cat__mark{background:var(--silver)}

/* раздел без товаров — не кнопка: тень луны, клика не обещает */
.cat--soon .cat__mark{background:none;box-shadow:inset 0 0 0 1px var(--hair)}
.cat--soon .cat__name{color:var(--muted)}

.cats__note{grid-column:1/-1;margin-top:16px;color:var(--dim);font-size:14px}

.vitrine__state{
  margin-top:24px;color:var(--muted);font-size:15px;
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
}
.cat__reset{
  appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;
  font:inherit;font-size:15px;color:var(--silver);cursor:pointer;
  border-bottom:1px solid var(--edge-2);
}
.cat__reset:hover{border-bottom-color:var(--silver)}

/* ── Категории — карточки с картинками (grid) ────────────────── */
.cats--grid{
  margin-top:clamp(26px,4vh,40px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  border-top:none;
}
@media (min-width:640px){ .cats--grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1040px){ .cats--grid{grid-template-columns:repeat(4,1fr)} }

.cat-card{
  display:flex;flex-direction:column;align-items:center;text-decoration:none;
  padding:12px;padding-top:18px;
  border-radius:0 12px 12px 12px;
  background:var(--raised);border:1px solid var(--edge);
  cursor:pointer;transition:border-color .2s var(--ease),transform .2s var(--ease);
  position:relative;
}
.cat-card::before{
  content:'';position:absolute;top:-6px;left:0;
  width:40%;height:6px;
  background:var(--raised);border:1px solid var(--edge);
  border-bottom:none;border-radius:8px 8px 0 0;
}
.cat-card:hover{border-color:var(--silver-2);transform:translateY(-2px)}
.cat-card--active{border-color:var(--silver);box-shadow:0 0 0 1px var(--silver)}
/* Раздел без товаров. Раньше вся карточка гасилась прозрачностью —
   и чёрная обложка вылезала серой, будто у неё другой фон. Теперь
   обложка остаётся такой же густо-чёрной, как у остальных, а состояние
   читается по подписи «скоро» и по приглушённому названию. */
.cat-card--empty{cursor:default}
.cat-card--empty:hover{transform:none;border-color:var(--edge)}
.cat-card--empty .cat-card__name{color:var(--muted)}
.cat-card--empty .cat-card__meta{color:var(--dim);font-style:italic}

.cat-card__img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  background:var(--raised-2);
}
.cat-card__img--placeholder{
  width:100%;aspect-ratio:1/1;border-radius:10px;
  background:var(--raised-2);
}

.cat-card__name{
  margin-top:10px;font-size:14px;font-weight:600;color:var(--ink-2);
  text-align:center;line-height:1.35;overflow-wrap:anywhere;
}
.cat-card__meta{
  margin-top:4px;font-size:12.5px;color:var(--dim);
  font-variant-numeric:tabular-nums;
}

/* =============================================================
   ВИТРИНА — строки на одной сетке, карточки товара целиком
   ============================================================= */
.vitrine{margin-top:clamp(34px,5vh,56px);display:grid;gap:clamp(14px,2vw,20px)}

.item{
  content-visibility:auto;
  contain-intrinsic-size:auto 300px;
  position:relative;
  background:linear-gradient(168deg,#242425 0%,#1C1C1D 38%,#151516 72%,#121213 100%);
  filter:drop-shadow(0 -1px 0 rgba(236,235,231,.13));
  border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  padding-right:clamp(24px,3vw,34px);
  display:grid;gap:clamp(18px,3vw,34px);
  grid-template-columns:1fr;
  --lr:180px;--lx:120px;--ly:120px;
}
/* Карточка товара идёт целиком, как её нарисовал бренд: не режем и не
   вписываем в круг. Только скругление угла и тонкая рамка, чтобы белое
   поле карточки не сталкивалось с угольным фоном встык. */
.item__figure{position:relative;display:flex;align-items:flex-start;justify-content:center}
.item__img{
  width:100%;height:auto;max-width:340px;display:block;
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(236,235,231,.10), 0 18px 40px -26px rgba(0,0,0,.95);
}
.item__name{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.01em}
.item__meta{margin-top:9px;color:var(--dim);font-size:14.5px}
.item__desc{margin-top:14px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:58ch}
.item__tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 22px;
  color:var(--muted);font-size:14px}
.item__tags li{position:relative}
.item__tags li + li::before{content:"";position:absolute;left:-12px;top:.62em;
  width:3px;height:3px;border-radius:50%;background:var(--hair)}
.item__buy{display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.item__price{font-size:clamp(22px,2.2vw,28px);font-weight:300;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.item__added{color:var(--silver-2);font-size:14px;min-height:1.2em}

@media (min-width:760px){
  .item{grid-template-columns:clamp(190px,22vw,290px) minmax(0,1fr) minmax(190px,auto);align-items:stretch}
  .item__buy{align-items:flex-end;min-width:170px}
  .item__body{padding-top:clamp(4px,1vw,10px)}
}
@media (max-width:759px){
  .item{--lr:140px;--lx:92px;--ly:92px}
  .item__buy{flex-direction:row;align-items:center;justify-content:space-between;
    border-top:1px solid var(--edge);padding-top:18px}
}

.vitrine-fallback{margin-top:30px;display:grid;gap:10px;color:var(--ink-2)}

/* =============================================================
   КАТЕГОРИИ — заголовки групп в витрине
   ============================================================= */
.cat-group{
  list-style:none;
  padding:clamp(20px,3vw,32px) 0 0;
  margin:clamp(8px,1.5vw,16px) 0 0;
  border-top:1px solid var(--edge);
  display:flex;align-items:baseline;gap:14px;
  flex-wrap:wrap;
}

/* ── Табы категорий: скрыть всё по умолчанию, показать .is-visible ── */
.vitrine[data-tab-active="true"] .cat-group,
.vitrine[data-tab-active="true"] .item,
.vitrine[data-tab-active="true"] .cat-empty-notice{display:none}
.vitrine[data-tab-active="true"] .cat-group.is-visible{display:flex}
.vitrine[data-tab-active="true"] .item.is-visible{display:grid}
.vitrine[data-tab-active="true"] .cat-empty-notice.is-visible{display:flex}

.cat-empty-notice{
  list-style:none;
  padding:clamp(28px, 4vw, 42px) 20px;
  text-align:center;
  background:rgba(255, 255, 255, 0.03);
  border:1px dashed var(--edge);
  border-radius:var(--r);
  color:var(--dim);
  font-size:15.5px;
  margin:10px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cat-group:first-child{border-top:0;margin-top:0;padding-top:0}
.cat-group__title{
  font-size:clamp(18px,2vw,24px);font-weight:400;letter-spacing:-.01em;
  color:var(--ink);
}
.cat-group__count{
  font-size:13px;color:var(--dim);
  background:var(--edge);padding:3px 10px;border-radius:20px;
}

/* =============================================================
   ГАЛЕРЕЯ ТОВАРОВ — Главное фото + миниатюры + стрелки + свайп
   ============================================================= */
.item__gallery{
  width:100%;
  max-width:340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.item__gallery-viewport{
  position:relative;
  width:100%;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(236,235,231,.10), 0 18px 40px -26px rgba(0,0,0,.95);
  background:#171718;
  touch-action:pan-y pinch-zoom;
  user-select:none;
  -webkit-user-select:none;
}

.item__gallery-main{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
  border-radius:10px;
  box-shadow:none;
  transition:opacity .18s ease-out;
}

/* Полупрозрачные стрелки листания */
.item__gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(20,20,22,.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  z-index:3;
  opacity:0;
  transition:opacity .22s var(--ease), background .2s, transform .15s, border-color .2s;
}

.item__gallery-nav svg{
  width:18px;
  height:18px;
  stroke:currentColor;
}

.item__gallery-nav:hover{
  background:rgba(20,20,22,.92);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-50%) scale(1.06);
}

.item__gallery-nav:active{
  transform:translateY(-50%) scale(0.94);
}

.item__gallery-nav--prev{ left:8px; }
.item__gallery-nav--next{ right:8px; }

/* На десктопе стрелки появляются при наведении на изображение */
.item__gallery-viewport:hover .item__gallery-nav{
  opacity:1;
}

/* Миниатюры (превью) */
.item__gallery-thumbs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  overflow-x:auto;
  padding:2px 4px 6px;
  scrollbar-width:none;
}
.item__gallery-thumbs::-webkit-scrollbar{ display:none; }

.item__gallery-thumb{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:8px;
  overflow:hidden;
  border:1.5px solid rgba(255,255,255,.12);
  background:#1a1a1b;
  padding:0;
  cursor:pointer;
  opacity:0.55;
  transition:opacity .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.item__gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.item__gallery-thumb:hover{
  opacity:0.9;
  border-color:rgba(255,255,255,.4);
  transform:translateY(-1px);
}

.item__gallery-thumb.is-active{
  opacity:1;
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.45), 0 3px 10px rgba(0,0,0,.6);
  transform:translateY(-1px);
}

/* =============================================================
   СЕЛЕКТОР ОБЪЁМОВ
   ============================================================= */
.item__variant-select{
  display:inline-block;
  margin-top:8px;
  margin-bottom:2px;
  padding:6px 32px 6px 12px;
  background-color:var(--surface-2);
  color:var(--ink);
  border:1px solid var(--edge);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 6px;
  max-width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.item__variant-select option{
  background:#1c1c1d;
  color:#fff;
}
.item__variant-select:hover{
  border-color:var(--silver-2);
}
.item__variant-select:focus{
  outline:none;
  border-color:var(--silver-2);
  box-shadow:0 0 0 2px rgba(236,235,231,.12);
}

/* Мобильная адаптация галереи */
@media (max-width:759px){
  .item__figure{ width:100%; }
  .item__gallery{ max-width:100%; }
  .item__gallery-nav{ opacity:0.88; width:34px; height:34px; } /* На смартфонах стрелки видны */
  .item__gallery-thumb{ width:42px; height:42px; flex:0 0 42px; }
}


/* =============================================================
   ДОКАЗАТЕЛЬСТВА
   ============================================================= */
.proof__wrap{display:grid;gap:clamp(30px,4vw,56px)}
.proof__side{max-width:40ch}
@media (min-width:1040px){ .proof__side{position:sticky;top:120px} }
.proof__lead{margin-top:18px;color:var(--muted);font-size:16px}
@media (min-width:1040px){
  .proof__wrap{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}
  .proof__wrap > .doc-card{grid-column:1 / -1}     /* документу нужна вся ширина */
}
.proof__grid{display:grid;gap:1px;background:var(--edge);border-block:1px solid var(--edge)}
@media (min-width:700px){.proof__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.proof__grid{grid-template-columns:1fr 1fr}}
.proof__item{background:#151516;padding:clamp(24px,3vw,34px) clamp(20px,2.4vw,30px)}
.proof__item{display:grid;align-content:start}
.proof__item h3{font-size:18px;font-weight:400;letter-spacing:-.005em;
  min-height:calc(2 * 18px * 1.14)}
.proof__item p{margin-top:11px;color:var(--muted);font-size:15px;line-height:1.6}

/* =============================================================
   ОТЗЫВЫ — скриншоты сообщений, как они пришли.
   Раскладка «кладкой» (CSS columns): скриншоты разной высоты
   укладываются вплотную, без пустот под короткими.
   ============================================================= */
.reviews__hint{margin-top:14px;color:var(--dim);font-size:14.5px}

/* ── карусель отзывов ────────────────────────────────────────────
   На странице виден один отзыв, остальные листаются стрелками.
   Первым идёт самый короткий — он читается за секунду и не занимает
   пол-экрана.

   Пока скрипт не отработал, класса revs--js нет: отзывы просто идут
   друг под другом, как обычный список. Так страница остаётся целой
   и без JavaScript, и в те доли секунды, пока он грузится. */
.revs{margin-top:clamp(22px,3.4vh,34px);
  width:min(100%,720px);margin-inline:auto}
.revs__stage{display:grid;gap:clamp(16px,2.4vw,24px)}
.revs__slide{margin:0}

/* Скриншот переписки — всегда обрывок: сверху и снизу его режет край
   кадра. Рамка вокруг такого обрывка только подчёркивает обрез, поэтому
   карточки нет вовсе: снимок лежит прямо на фоне страницы и растворяется
   в нём краями.

   Слоёв два, и оба — один и тот же файл:
     .revs__haze — размытая копия, гаснет у самого края;
     .revs__shot — чёткий снимок поверх, гаснет чуть раньше.
   Из-за этого у края чёткое изображение уступает место размытому,
   а размытое — фону страницы. Получается мягкий переход без линии.

   Полосы растворения заданы в пикселях, а не в процентах: снимки разной
   высоты, и от процентов у длинных съедало бы заметно больше текста. */
.revs__zoom{
  display:block;position:relative;isolation:isolate;
  background:transparent;border:none;box-shadow:none;
  transition:transform .22s var(--ease),filter .22s var(--ease);
}
.revs__zoom:hover{transform:translateY(-2px);filter:brightness(1.06)}
.revs__zoom:focus-visible{outline:2px solid var(--silver);outline-offset:6px;
  border-radius:12px}

.revs__haze,
.revs__shot{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* размытая копия — точно под чётким снимком, кадр в кадр */
.revs__haze{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:0;
  filter:blur(13px);
  -webkit-mask-image:
     linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%),
     linear-gradient(to right,  transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%);
          mask-image:
     linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%),
     linear-gradient(to right,  transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%);
}
/* чёткий снимок поверх */
.revs__shot{
  position:relative;z-index:1;
  width:100%;height:auto;display:block;
  -webkit-mask-image:
     linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%),
     linear-gradient(to right,  transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image:
     linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%),
     linear-gradient(to right,  transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
/* на телефоне снимок мельче — полосы растворения тоже уже,
   иначе они съедят слишком большую долю кадра */
@media (max-width:620px){
  .revs__shot{
    -webkit-mask-image:
       linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
       linear-gradient(to right,  transparent 0, #000 15px, #000 calc(100% - 15px), transparent 100%);
            mask-image:
       linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
       linear-gradient(to right,  transparent 0, #000 15px, #000 calc(100% - 15px), transparent 100%);
  }
  .revs__haze{filter:blur(9px)}
}

/* ── режим карусели ── */
.revs--js .revs__stage{
  display:block;position:relative;gap:0;
  height:var(--revs-h,320px);
  transition:height .45s var(--ease);
}
.revs--js .revs__slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .40s var(--ease);
}
.revs--js .revs__slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
}
.revs--js .revs__zoom{height:100%}
.revs--js .revs__shot{height:100%;object-fit:contain}

/* ── стрелки и точки ── */
.revs__nav{
  margin-top:clamp(16px,2.4vh,22px);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vw,22px);
}
.revs__arrow{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(236,235,231,.05);border:1px solid var(--edge);
  color:var(--ink-2);font:inherit;
  transition:color .22s var(--ease),border-color .22s var(--ease),
             background-color .22s var(--ease);
}
.revs__arrow:hover{color:var(--ink);border-color:var(--silver-2);
  background:rgba(236,235,231,.10)}
.revs__arrow:focus-visible{outline:2px solid var(--silver);outline-offset:3px}
/* сама стрелка — уголок из двух линий, без шрифтовых символов:
   они по-разному выглядят на разных системах */
.revs__arrow span{
  width:9px;height:9px;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
}
.revs__arrow[data-dir="-1"] span{transform:rotate(45deg) translate(1px,-1px)}
.revs__arrow[data-dir="1"]  span{transform:rotate(-135deg) translate(1px,-1px)}

.revs__dots{display:flex;align-items:center;gap:2px}
/* Сама точка — 8 пикселей, но кнопка вокруг неё 26×26: в восемь
   пикселей пальцем не попасть. Видимый размер задаёт ::before. */
.revs__dot{
  width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;
  display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.revs__dot::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--hair);
  transition:background-color .22s var(--ease),transform .22s var(--ease);
}
.revs__dot:hover::before{background:var(--silver-2)}
.revs__dot.is-on::before{background:var(--silver);transform:scale(1.35)}
.revs__dot:focus-visible{outline:2px solid var(--silver);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){
  .revs--js .revs__stage,
  .revs--js .revs__slide{transition:none}
}


/* =============================================================
   КОНСУЛЬТАЦИЯ
   ============================================================= */
.contact__grid{display:grid;gap:clamp(34px,5vw,72px)}
@media (min-width:900px){.contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start}}
.contact__lead{margin-top:18px;color:var(--ink-2);max-width:44ch}
.contact__direct{margin-top:clamp(26px,4vh,38px);border-top:1px solid var(--edge)}
.contact__direct li{display:grid;grid-template-columns:minmax(96px,11ch) 1fr;gap:14px;
  padding:9px 0;align-items:center;border-bottom:1px solid var(--edge);font-size:15.5px}
.contact__direct span{color:var(--dim)}
.contact__direct a{color:var(--ink);text-decoration:none;display:inline-block;padding:6px 0 5px;
  transition:color .22s var(--ease)}
.contact__direct a:hover{color:var(--silver)}

.form{background:linear-gradient(168deg,#242425 0%,#1C1C1D 40%,#141415 100%);
  filter:drop-shadow(0 -1px 0 rgba(236,235,231,.13));
  border-radius:var(--r);padding:clamp(26px,3.2vw,40px);display:grid;gap:20px;
  --lr:180px;--lx:120px;--ly:120px}
.form > .act{margin-top:4px;justify-self:start}
.field{display:grid;gap:8px}
.field label{font-size:14.5px;color:var(--muted)}
.field input[type=text],.field textarea{
  font:inherit;font-size:16px;color:var(--ink);background:rgba(236,235,231,.045);
  border:1px solid var(--edge);border-radius:10px;padding:13px 15px;width:100%;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--silver-2);
  background:rgba(236,235,231,.07)}
.field textarea{resize:vertical;min-height:110px;line-height:1.5}
.field--check{grid-template-columns:auto 1fr;align-items:start;gap:12px;margin-top:2px}
/* галочка не меньше 24 px: иначе в неё трудно попасть пальцем */
.field--check input{width:24px;height:24px;margin-top:1px;accent-color:#D2D4CF;flex:0 0 auto;
  cursor:pointer}
.field--check label{font-size:14px;color:var(--muted);line-height:1.55}
.field--check .err{grid-column:1 / -1}
.field--check a{color:var(--ink-2)}
.err{color:#E4B7A8;font-size:13.5px}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:#8E5F50}
.form__note{color:var(--silver-2);font-size:14.5px;min-height:1.2em}

/* =============================================================
   ПОДВАЛ
   ============================================================= */
/* подвал встаёт на собственный, чуть более глубокий пол — единственный
   намеренный цветовой шаг на странице, и он мягкий, без жёсткого шва */
.foot{padding-top:clamp(64px,9vh,110px);
  background-image:linear-gradient(180deg,rgba(8,8,9,0) 0%,rgba(8,8,9,.9) 26%,#080809 62%);
  background-color:transparent}
.foot__grid{display:grid;gap:clamp(30px,4vw,44px)}
@media (min-width:640px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.foot__grid{grid-template-columns:repeat(4,1fr)}}
.foot__h{font-size:14px;color:var(--dim);font-weight:400;letter-spacing:0}
.foot__col > *+*{margin-top:14px}
.foot__p{color:var(--ink-2);font-size:15px;line-height:1.6}
.foot__p--dim{color:var(--dim);font-size:14px}
.foot__list{display:grid;gap:2px}
.foot__list a{color:var(--ink-2);text-decoration:none;font-size:15px;
  display:inline-block;padding:7px 0;
  transition:color .22s var(--ease)}
.foot__list a:hover{color:var(--ink)}
.foot__legal{margin-top:clamp(38px,5vh,56px);padding-top:26px;border-top:1px solid var(--edge);
  color:var(--dim);font-size:13.5px;line-height:1.6;max-width:none}
.foot__legal a{color:var(--muted)}

/* оверсайз-знак прижат к нижней кромке, поверх подложки, без зазора снизу */
.foot__sign{position:relative;margin-top:clamp(40px,6vh,72px);padding:0 var(--gut);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.foot__copy{color:var(--dim);font-size:13.5px}
.foot__payments{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 12px;
  opacity:0.65;
  pointer-events:none;
  user-select:none;
  margin:2px 0 4px;
}
.foot__pay-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  padding:4px 8px;
}
.foot__pay-badge svg{
  height:16px;
  width:auto;
  display:block;
}
.foot__word{width:min(100% - 8px,1080px);height:auto;opacity:.5;
  margin-bottom:calc(-1 * clamp(10px,2.2vw,30px))}

/* =============================================================
   КОРЗИНА
   ============================================================= */
.cart{
  position:fixed;inset:0 0 0 auto;margin:0;width:min(100%,470px);max-width:100%;height:100%;
  max-height:100%;border:0;padding:0;color:var(--ink);
  background:linear-gradient(196deg,#1D1D1E 0%,#151516 46%,#111112 100%);
  box-shadow:inset 1px 0 0 rgba(236,235,231,.07);
  flex-direction:column;
  --lr:120px;--lx:70px;--ly:70px;
  transform:translateX(100%);transition:transform .42s var(--ease),overlay .42s allow-discrete,
    display .42s allow-discrete;
  -webkit-mask-image:radial-gradient(circle var(--lr) at calc(0px - var(--lx)) calc(0px - var(--ly)),
    transparent 0 calc(var(--lr) - 1px), #000 var(--lr));
          mask-image:radial-gradient(circle var(--lr) at calc(0px - var(--lx)) calc(0px - var(--ly)),
    transparent 0 calc(var(--lr) - 1px), #000 var(--lr));
}
.cart[open]{display:flex;transform:translateX(0)}
@starting-style{.cart[open]{transform:translateX(100%)}}
.cart::backdrop{background:rgba(6,6,7,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* заголовок опущен ниже лунного среза: на высоте 24px дуга съедала слева 87px
   и от «Корзина» оставалось «зина». Проверено зумом в браузере. */
.cart__head{display:flex;align-items:center;justify-content:space-between;
  padding:52px 24px 16px 26px;flex:0 0 auto}
.cart__head h2{font-size:22px}
.cart__close{width:42px;height:42px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:50%;background:rgba(236,235,231,.055);color:var(--ink);
  transition:background .22s var(--ease)}
.cart__close:hover{background:rgba(236,235,231,.12)}
.cart__close svg{width:19px;height:19px;display:block}

.cart__body{flex:1 1 auto;overflow-y:auto;padding:4px 26px 20px;
  overscroll-behavior:contain}
.cart__empty{color:var(--muted);font-size:15.5px;padding:26px 0}

.line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--edge)}
.line__img{width:56px;height:76px;object-fit:contain;object-position:bottom}
.line__name{font-size:15.5px;line-height:1.35}
.line__vol{margin-top:4px;color:var(--dim);font-size:13.5px}
.line__right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.line__sum{font-size:15.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.qty{display:flex;align-items:center;gap:2px;background:rgba(236,235,231,.05);border-radius:100px}
.qty button{width:31px;height:31px;display:grid;place-items:center;border:0;cursor:pointer;
  background:none;color:var(--ink-2);border-radius:50%;font:inherit;font-size:16px;line-height:1;
  transition:background .2s var(--ease),color .2s var(--ease)}
.qty button:hover{background:rgba(236,235,231,.1);color:var(--ink)}
.qty output{min-width:22px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.line__del{border:0;background:none;color:var(--dim);cursor:pointer;font:inherit;font-size:13px;
  padding:2px 0;transition:color .2s var(--ease)}
.line__del:hover{color:var(--ink-2)}

.cart__foot{flex:0 0 auto;padding:20px 26px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--edge);background:#141415;display:grid;gap:14px}
.cart__total{display:flex;align-items:baseline;justify-content:space-between;font-size:16px}
.cart__total b{font-size:22px;font-weight:300;font-variant-numeric:tabular-nums}
.cart__note{color:var(--dim);font-size:13px;line-height:1.55}
.cart__note a{color:var(--muted)}

/* =============================================================
   COOKIE
   ============================================================= */
.cookie{position:fixed;right:var(--gut);bottom:16px;z-index:50;
  width:min(100% - var(--gut)*2,430px);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:16px 18px;border-radius:16px;background:rgba(20,20,21,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(236,235,231,.07) inset}
.cookie p{flex:1 1 200px;color:var(--ink-2);font-size:14px;line-height:1.55}
.cookie a{color:var(--ink)}

@media (max-width:767px){
  .sky{display:none}
  .nav,.nav *{transition:none!important}
  .nav.is-stuck .nav__inner{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(17,17,18,.95)}
  .nav__mobile{backdrop-filter:none;-webkit-backdrop-filter:none}
  .item,.form{filter:none;box-shadow:0 0 0 1px rgba(236,235,231,.13)}
  .lunar{-webkit-mask-image:none;mask-image:none;border-radius:var(--r)}
  .reveal{transition:none!important}
  .hero{min-height:100vh;min-height:100dvh}
}

/* =============================================================
   МОБИЛЬНОЕ
   ============================================================= */
/* низкие экраны в ландшафте: знак ужимается, первый экран остаётся целым */
@media (max-height:700px){
  .logo__img{width:min(74vw, 52svh, 600px)}
  .hero{padding-top:clamp(70px,9vh,104px)}
}

/* на телефоне ролик может вырасти по ширине — высоты хватает */
@media (max-width:700px){
  .logo__img{width:min(92vw, 56svh, 420px)}
}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__cart{margin-left:auto}
  .nav[data-menu="open"] .nav__mobile{display:flex}
  .hero__caption{grid-template-columns:1fr;align-items:center;gap:22px;text-align:center}
  .hero__utp{max-width:none}
}
/* горизонтальный экран и низкий: знак и подпись становятся рядом,
   иначе первый экран не помещается по высоте */
@media (orientation:landscape) and (max-height:560px){
  .hero{
    grid-template-rows:1fr;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:clamp(20px,4vw,52px);
    padding-top:clamp(52px,12vh,80px);
    padding-bottom:clamp(18px,4vh,34px);
  }
  .logo__img{width:min(40vw,72svh,320px)}
  .has-cookie .hero{padding-bottom:clamp(18px,4vh,34px)}
}

/* очень узкие телефоны: шапка перестаёт помещаться в строку —
   ужимаем отступы и само слово MUHADIS, ничего не пряча */
@media (max-width:374px){
  :root{--gut:16px}
  .nav__inner{gap:8px;padding:8px 8px 8px 10px}
  .nav__name{font-size:11px;letter-spacing:.16em;padding-left:.16em}
  .nav__moon{width:26px;height:26px}
  .nav__brand{gap:8px}
  .nav__cart{padding:8px 12px;font-size:13px;gap:7px}
  .nav__burger{width:40px;padding:12px 4px}
}

@media (max-width:520px){
  .cookie{left:var(--gut);right:var(--gut);width:auto}
  body{font-size:16px}
  .nav{padding-top:10px}
  .nav__name{font-size:13px;letter-spacing:.26em;padding-left:.26em}
  .nav__cart{padding:9px 14px;font-size:14px}
  .foot__word{opacity:.42}
}

/* =============================================================
   ДОСТУПНОСТЬ / БЕЗ АНИМАЦИИ
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-anim .reveal{opacity:1!important;transform:none!important}
  .sky__smoke{transform:none!important}
  .cart{transform:none}
}

/* печать: страница остаётся читаемой */
@media print{
  .sky,.nav,.cookie,.cart{display:none!important}
  body{background:#fff;color:#000}
}

/* =============================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ
   ============================================================= */
body.is-doc .nav__inner{
  background:rgba(17,17,18,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 rgba(236,235,231,.07) inset, 0 6px 20px -14px rgba(0,0,0,.9);
}
.nav__cart--link{text-decoration:none;white-space:nowrap}

.doc{padding-top:clamp(120px,17vh,180px);padding-bottom:clamp(74px,11vh,130px)}
.doc__grid{display:grid;gap:clamp(34px,5vw,72px)}
@media (min-width:960px){
  .doc__grid{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);align-items:start}
  .doc__side{position:sticky;top:clamp(96px,13vh,124px)}
}
.doc__h1{font-size:clamp(28px,3.3vw,44px);max-width:16ch}
.doc__lead{margin-top:18px;color:var(--muted);font-size:16px;max-width:38ch}
.doc__rev{margin-top:14px;color:var(--dim);font-size:14px}

.doc__toc{margin-top:clamp(26px,4vh,40px);border-top:1px solid var(--edge)}
.doc__toc-h{font-size:13.5px;font-weight:400;color:var(--dim);margin:18px 0 6px;letter-spacing:0}
.doc__toc ol{display:grid}
.doc__toc a{display:block;padding:8px 0;color:var(--ink-2);
  text-decoration:none;font-size:15px;transition:color .22s var(--ease)}
.doc__toc a:hover{color:var(--ink)}

.doc__body{max-width:74ch;color:var(--ink-2);font-size:16.5px;line-height:1.72}
.doc__body > p{margin-top:14px}
.doc__body > p:first-child{margin-top:0}
.doc__body h2{margin-top:clamp(38px,5vh,56px);font-size:clamp(19px,1.7vw,23px);color:var(--ink);
  scroll-margin-top:clamp(100px,14vh,140px)}
.doc__body h2 + p,.doc__body h2 + ul,.doc__body h2 + ol,.doc__body h2 + dl{margin-top:16px}
.doc__body b{color:var(--ink);font-weight:600}
.doc__body a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--edge-2);
  transition:border-color .22s var(--ease)}
.doc__body a:hover{border-color:var(--silver)}

.doc__ul,.doc__ol{margin-top:14px;display:grid;gap:9px}
.doc__ul li{position:relative;padding-left:24px}
.doc__ul li::before{content:"";position:absolute;left:4px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--hair)}
.doc__ol{counter-reset:n}
.doc__ol li{counter-increment:n;position:relative;padding-left:34px}
.doc__ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.1em;
  color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}

.doc__dl{margin-top:16px;border-top:1px solid var(--edge)}
.doc__dl > div{display:grid;gap:6px;padding:15px 0;border-bottom:1px solid var(--edge)}
@media (min-width:620px){
  .doc__dl > div{grid-template-columns:minmax(150px,20ch) 1fr;gap:20px}
}
.doc__dl dt{color:var(--dim);font-size:15px}
.doc__dl dd{margin:0;color:var(--ink);font-size:15.5px}

/* итог страницы возврата — здесь же живёт лунный срез */
.doc__callout{
  background:linear-gradient(168deg,#242425 0%,#1C1C1D 42%,#151516 100%);
  filter:drop-shadow(0 -1px 0 rgba(236,235,231,.13));
  border-radius:var(--r);padding:clamp(22px,2.8vw,32px);display:grid;gap:12px;
  --lr:180px;--lx:120px;--ly:120px;
  -webkit-mask-image:radial-gradient(circle var(--lr) at calc(100% + var(--lx)) calc(0px - var(--ly)),
    transparent 0 calc(var(--lr) - 1px), #000 var(--lr));
          mask-image:radial-gradient(circle var(--lr) at calc(100% + var(--lx)) calc(0px - var(--ly)),
    transparent 0 calc(var(--lr) - 1px), #000 var(--lr));
}
.doc__callout p{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:52ch}
.doc__callout p:first-child{color:var(--ink)}

.doc__h3{margin-top:clamp(28px,3.6vh,40px);font-size:17px;font-weight:400;color:var(--ink);
  letter-spacing:0}
.doc__warn{margin-top:14px;padding:16px 18px;border-radius:12px;
  background:rgba(236,235,231,.045);color:var(--ink-2);font-size:15.5px;line-height:1.6}
.doc__src{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.7}
.doc__src a{color:var(--ink-2)}

/* «Подробнее» — кнопка, а не строчка-ссылка: за ней спрятано всё
   описание товара, поэтому её должно быть видно с первого взгляда. */
.item__more{margin-top:16px}
.item__summary{cursor:pointer;color:var(--ink-2);font-size:14.5px;list-style:none;
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;
  border:1px solid var(--edge);background:rgba(236,235,231,.04);
  transition:color .22s var(--ease),border-color .22s var(--ease),
             background-color .22s var(--ease)}
.item__summary::-webkit-details-marker{display:none}
.item__summary::after{content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.item__more[open] .item__summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.item__summary:hover{color:var(--ink);border-color:var(--silver-2);
  background:rgba(236,235,231,.08)}
.item__summary:focus-visible{outline:2px solid var(--silver-2);outline-offset:3px}
.item__more-body{margin-top:2px}
/* внутри «Подробнее» первый абзац не отбивается дважды */
.item__more-body > .item__desc:first-child{margin-top:14px}
.item__facts{margin-top:16px;display:grid;gap:6px}
.item__facts > div{display:grid;grid-template-columns:minmax(96px,13ch) 1fr;gap:12px;
  font-size:14px;line-height:1.55;padding:7px 0;border-bottom:1px solid var(--edge)}
.item__facts > div:last-child{border-bottom:0}
.item__facts dt{color:var(--dim)}
.item__facts dd{margin:0;color:var(--muted)}
.item__desc p,
.item__facts dd p{margin:0 0 6px 0}
.item__desc p:last-child,
.item__facts dd p:last-child{margin-bottom:0}
.item__desc strong,
.item__facts dd strong{font-weight:600;color:var(--ink)}
.item__desc ul,
.item__facts dd ul{margin:4px 0 8px 18px;padding:0;list-style:disc}
.item__desc ol,
.item__facts dd ol{margin:4px 0 8px 18px;padding:0;list-style:decimal}
.item__desc li,
.item__facts dd li{margin-bottom:2px}
.item__set-contents{margin-top:14px;padding:12px 16px;background:rgba(236,235,231,.05);border:1px solid var(--edge);border-radius:10px}
.item__set-title{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.04em;margin-bottom:8px;text-transform:uppercase}
.item__set-body{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.item__set-body p{margin:0 0 6px 0}
.item__set-body p:last-child{margin-bottom:0}
.item__set-body strong{font-weight:600;color:var(--ink)}
.item__set-body ul{margin:4px 0 8px 18px;padding:0;list-style:disc}
.item__set-body ol{margin:4px 0 8px 18px;padding:0;list-style:decimal}
.item__set-body li{margin-bottom:2px}

.item__link{color:inherit;text-decoration:none;display:inline-block;
  padding:6px 0;margin:-6px 0;                 /* цель касания >=32px, вид не меняется */
  transition:color .22s var(--ease)}
.item__link:hover{color:var(--silver)}
.item{scroll-margin-top:clamp(90px,13vh,120px)}

/* =============================================================
   ДОКУМЕНТЫ — настоящая бумага, а не иконка в плитке
   ============================================================= */
.doc-card{
  margin:clamp(28px,4vh,40px) 0 0;
  background:linear-gradient(168deg,#242425 0%,#1C1C1D 42%,#151516 100%);
  filter:drop-shadow(0 -1px 0 rgba(236,235,231,.13));
  border-radius:var(--r);padding:clamp(20px,2.4vw,26px);
  display:grid;gap:clamp(18px,2.4vw,24px);
  --lr:180px;--lx:120px;--ly:120px;
}
@media (min-width:560px){
  .doc-card{grid-template-columns:minmax(150px,208px) minmax(0,1fr);align-items:start;
    padding:clamp(22px,2.6vw,30px)}
}
@media (min-width:900px){ .doc-card__facts > div{grid-template-columns:minmax(120px,17ch) 1fr} }
.doc-card__zoom{display:block;border-radius:5px;transition:opacity .22s var(--ease)}
.doc-card__zoom:hover{opacity:.86}
.doc-card img{
  width:100%;height:auto;border-radius:5px;
  /* бумага светлая: сажаем её на поверхность узкой направленной тенью, без ореола */
  box-shadow:0 2px 5px -2px rgba(0,0,0,.85);
}
.doc-card figcaption{min-width:0;max-width:60ch}
.doc-card b{display:block;font-weight:400;font-size:16px;color:var(--ink);line-height:1.35}
.doc-card__facts{margin-top:14px;display:grid;gap:2px}
.doc-card__facts > div{display:grid;grid-template-columns:minmax(104px,14ch) minmax(0,1fr);gap:16px;
  padding:7px 0;border-bottom:1px solid var(--edge);font-size:14px;line-height:1.5}
.doc-card__facts > div:last-child{border-bottom:0}
.doc-card__facts dt{color:var(--dim)}
.doc-card__facts dd{margin:0;color:var(--ink-2)}
.doc-card__note{margin-top:14px;color:var(--dim);font-size:13.5px;line-height:1.55}

/* =============================================================
   ПЕРЕНОС ДЛИННЫХ СЛОВ
   Через админ-панель может прийти длинное название или состав
   без пробелов. Без этого такой текст выталкивает колонку
   и в корзине появляется горизонтальная прокрутка.
   ============================================================= */
.line__name,.line__vol,.item__name,.item__link,.item__desc,.item__meta,
.item__facts dd,.item__tags li,.doc-card__facts dd,.doc-card b,
.cart__note,.item__price,.line__sum{overflow-wrap:anywhere}
.line > div,.item__body,.item__buy,.cart__body,
.item__facts > div,.doc-card__facts > div{min-width:0}

/* =============================================================
   ОФОРМЛЕНИЕ ЗАКАЗА — второй экран корзины
   Заказ собирается на сайте: имя, телефон, почта для чека, адрес.
   Когда подключится ЮKassa, форма отправляется на сервер, а не в чат.
   ============================================================= */
.checkout{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.checkout[hidden]{display:none!important}
.checkout__back{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  margin:20px 26px 6px;padding:8px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14.5px;color:var(--muted);align-self:flex-start;
  transition:color .22s var(--ease)}
.checkout__back:hover{color:var(--ink)}
.checkout__back svg{display:block}
.checkout__scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:8px 26px 22px;display:grid;gap:16px}
.checkout__foot{padding:18px 26px calc(22px + env(safe-area-inset-bottom));
  display:grid;gap:12px}
.checkout .field label{font-size:14px}
.checkout .field input[type=text],.checkout .field input[type=tel],
.checkout .field input[type=email],.checkout .field textarea,.checkout select{
  font:inherit;font-size:16px;color:var(--ink);background:rgba(236,235,231,.045);
  border:1px solid var(--edge);border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.checkout select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.checkout .field input:focus,.checkout .field textarea:focus,.checkout select:focus{
  outline:none;border-color:var(--silver-2);background:rgba(236,235,231,.07)}
.checkout textarea{resize:vertical;line-height:1.5}
.hint{color:var(--dim);font-size:13px;line-height:1.45}
.opt{color:var(--dim);font-size:12.5px}

.cart__free{color:var(--silver-2);font-size:13.5px;line-height:1.5;font-variant-numeric:tabular-nums}
.cart__free:empty{display:none}

/* ── Способы доставки: 3 крупные кнопки-табы ────────────────── */
.delivery-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.delivery-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:12px 6px;
  background:rgba(236,235,231,.045);
  border:1.5px solid var(--edge-2);
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;text-align:center;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease);
  font:inherit;user-select:none;min-height:58px;
}
.delivery-tab:hover{
  border-color:var(--silver-2);
  background:rgba(236,235,231,.08);
  color:var(--ink);
}
.delivery-tab.is-active,
.delivery-tab.active,
.delivery-tab.selected{
  background:rgba(236,235,231,.12);
  border-color:var(--ink);
  color:var(--ink);
  box-shadow:0 0 0 1px var(--ink),0 3px 12px rgba(0,0,0,.3);
}
.delivery-tab__title{font-weight:600;font-size:13.5px;line-height:1.25;white-space:nowrap}
.delivery-tab__sub{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;transition:color .18s var(--ease)}
.delivery-tab.is-active .delivery-tab__sub,
.delivery-tab.active .delivery-tab__sub,
.delivery-tab.selected .delivery-tab__sub{color:var(--silver);font-weight:600}

@media(max-width:380px){
  .delivery-tab{padding:10px 4px;min-height:54px}
  .delivery-tab__title{font-size:12px}
  .delivery-tab__sub{font-size:11px}
}

/* ── Способы оплаты: 2 крупные кнопки-табы ────────────────── */
.payment-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.payment-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 8px;
  background:rgba(236,235,231,.045);
  border:1.5px solid var(--edge-2);
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;text-align:center;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease);
  font:inherit;user-select:none;min-height:58px;
}
.payment-tab:hover{
  border-color:var(--silver-2);
  background:rgba(236,235,231,.08);
  color:var(--ink);
}
.payment-tab.is-active,
.payment-tab.active,
.payment-tab.selected{
  background:rgba(236,235,231,.12);
  border-color:var(--ink);
  color:var(--ink);
  box-shadow:0 0 0 1px var(--ink),0 3px 12px rgba(0,0,0,.3);
}
.payment-tab__title{font-weight:600;font-size:13px;line-height:1.25;text-align:center}
.payment-tab__sub{font-size:11.5px;color:var(--dim);line-height:1.2;text-align:center;transition:color .18s var(--ease)}
.payment-tab.is-active .payment-tab__sub,
.payment-tab.active .payment-tab__sub,
.payment-tab.selected .payment-tab__sub{color:var(--silver);font-weight:500}

@media(max-width:440px){
  .payment-tabs{grid-template-columns:1fr;gap:6px}
  .payment-tab{padding:9px 12px;min-height:50px;text-align:left;align-items:flex-start}
  .payment-tab__title{text-align:left}
  .payment-tab__sub{text-align:left}
}

.delivery-options{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.delivery-hint{color:var(--dim);font-size:13.5px;line-height:1.4;margin:0}
.delivery-opt{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--silver-2);border-radius:10px;
  cursor:pointer;transition:border-color .15s,background .15s}
.delivery-opt:hover{border-color:var(--silver)}
.delivery-opt input[type="radio"]{
  -webkit-appearance:none;appearance:none;
  flex-shrink:0;width:20px;height:20px;margin:0;
  background:#fff;border:2px solid var(--silver-2);border-radius:50%;
  cursor:pointer;position:relative;
  transition:border-color .15s var(--ease)}
.delivery-opt input[type="radio"]::before{
  content:'';position:absolute;top:50%;left:50%;
  width:10px;height:10px;border-radius:50%;
  background:#000;transform:translate(-50%,-50%) scale(0);
  transition:transform .15s var(--ease)}
.delivery-opt input[type="radio"]:checked{border-color:var(--ink)}
.delivery-opt input[type="radio"]:checked::before{transform:translate(-50%,-50%) scale(1)}
.delivery-opt__info{flex:1;display:flex;flex-direction:column;gap:2px}
.delivery-opt__name{font-weight:600;font-size:14.5px;line-height:1.3}
.delivery-opt__tariff{color:var(--dim);font-size:12.5px;line-height:1.3}
.delivery-opt__right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.delivery-opt__price{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.delivery-opt__days{color:var(--dim);font-size:12px;white-space:nowrap}
.cart__total--sum{border-top:1px solid var(--silver-2);padding-top:8px;margin-top:4px}
.cart__total--sum b{font-size:18px}

.pvz-field-wrap {
  position: relative;
  width: 100%;
}

#pvz-suggestions-dropdown,
.pvz-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  z-index: 10000;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75);
  padding: 4px 0;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

#pvz-suggestions-dropdown[hidden],
.pvz-suggestions-dropdown[hidden] {
  display: none !important;
}

.pvz-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
  text-align: left;
}

.pvz-suggestion-item:last-child {
  border-bottom: none;
}

.pvz-suggestion-item:hover,
.pvz-suggestion-item:focus {
  background: #2a2a2a;
}

.pvz-suggestion-item__main {
  font-size: 13.5px;
  font-weight: 500;
  color: #ECEBE7;
  line-height: 1.35;
}

.pvz-suggestion-item__sub {
  font-size: 12px;
  color: #8B8A84;
  line-height: 1.3;
}

.pvz-suggestion-item__code {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: rgba(236, 235, 231, 0.12);
  color: #D9DBD6;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 6px;
  font-family: monospace;
}

/* ── PVZ Searchable Dropdown в корзине ────────────────────── */
.pvz-wrap {
  position: relative;
  width: 100%;
}
.pvz-input-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.pvz-input {
  width: 100%;
  padding: 12px 38px 12px 14px !important;
  background-color: #151516 !important;
  color: var(--ink) !important;
  border: 1px solid var(--edge) !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  transition: border-color .2s, box-shadow .2s;
}
.pvz-input:focus {
  outline: none;
  border-color: var(--silver-2) !important;
  box-shadow: 0 0 0 2px rgba(236,235,231,.12) !important;
}
.pvz-chevron-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.pvz-chevron-btn:hover {
  color: var(--ink);
  background: rgba(255,255,255,.08);
}
.pvz-status-line {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 5px;
  min-height: 16px;
}
.pvz-status-line.success { color: #34d399; }
.pvz-status-line.empty { color: #fbbf24; }

.pvz-dropdown-box {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1c1c1d;
  border: 1px solid rgba(236,235,231,.18);
  border-radius: 12px;
  max-height: 230px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.pvz-dropdown-box::-webkit-scrollbar {
  width: 6px;
}
.pvz-dropdown-box::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 3px;
}

.pvz-item {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(236,235,231,.07);
  cursor: pointer;
  transition: background .12s;
  text-align: left;
}
.pvz-item:last-child {
  border-bottom: none;
}
.pvz-item:hover, .pvz-item.is-selected {
  background: rgba(255,255,255,.08);
}
.pvz-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.pvz-item-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvz-item-code {
  font-size: 11.5px;
  font-family: monospace;
  font-weight: 600;
  background: rgba(236,235,231,.12);
  color: var(--silver-2);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pvz-item-addr {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.35;
}
.pvz-empty {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.4;
}

@media(prefers-color-scheme:light){
  .delivery-opt{border-color:#d4d2cb}
  .delivery-opt:hover{border-color:#a8a59c}
  .pvz-input{color:#1a1a1a !important;background-color:#f5f4f0 !important;border-color:#d4d2cb !important}
  .pvz-dropdown-box{background:#fdfdfc;border-color:#d4d2cb;box-shadow:0 12px 30px rgba(0,0,0,.15)}
  .pvz-item{border-bottom-color:#e5e4de}
  .pvz-item:hover, .pvz-item.is-selected{background:#f0efe9}
  .pvz-item-name{color:#1a1a1a}
  .pvz-item-code{background:#e8e7e0;color:#333}
  .pvz-item-addr{color:#555}
}

/* ── Кнопка выбора ПВЗ на карте ────────────────────────────── */
.delivery-map-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 6px 0 2px;
  margin-top: 6px;
  color: #a0a0a0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(160, 160, 160, 0.4);
  text-underline-offset: 3px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
  align-self: flex-start;
  text-align: left;
}
.delivery-map-btn:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

dialog.delivery-map-modal,
.delivery-map-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transform: translateZ(0);
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}
dialog.delivery-map-modal[open],
dialog.delivery-map-modal.is-open,
.delivery-map-modal.is-open {
  display: flex !important;
}
dialog.delivery-map-modal::backdrop {
  background: rgba(6, 6, 7, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.delivery-map-container {
  position: relative;
  width: min(92vw, 920px);
  height: min(88vh, 700px);
  height: min(88dvh, 700px);
  max-width: 920px;
  max-height: 700px;
  background: #18181a;
  border: 1px solid var(--edge-2);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  transform: translateZ(0);
  will-change: transform;
}
@media (max-width: 768px) {
  .delivery-map-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
}
.delivery-map-header {
  padding: 12px 18px;
  background: #141415;
  border-bottom: 1px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.delivery-map-header__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.delivery-map-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.delivery-map-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(236, 235, 231, 0.08);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.delivery-map-close:hover {
  background: rgba(236, 235, 231, 0.18);
  color: var(--ink);
}
.delivery-map-search-row {
  padding: 10px 14px;
  background: #18181a;
  border-bottom: 1px solid var(--edge);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.delivery-map-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 140px;
  display: flex;
  align-items: center;
}
.delivery-map-search-icon {
  position: absolute;
  left: 12px;
  color: var(--dim);
  pointer-events: none;
}
.delivery-map-input {
  width: 100%;
  background: rgba(236, 235, 231, 0.05);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 8px 34px 8px 34px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: all .2s var(--ease);
}
.delivery-map-input:focus {
  background: rgba(236, 235, 231, 0.09);
  border-color: var(--silver-2);
}
.delivery-map-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}
.delivery-map-clear:hover {
  color: var(--ink);
}
.delivery-map-geo-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(236, 235, 231, 0.06);
  border: 1px solid var(--edge);
  border-radius: 10px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s var(--ease);
}
.delivery-map-geo-btn svg {
  flex-shrink: 0;
}
.delivery-map-geo-btn span {
  display: inline !important;
  white-space: nowrap;
}
.delivery-map-geo-btn:hover {
  background: rgba(236, 235, 231, 0.12);
  color: var(--ink);
  border-color: var(--silver-2);
}
.delivery-map-wrapper {
  position: relative;
  flex: 1;
  min-height: 250px;
  background: #111112;
  transform: translateZ(0);
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}
.delivery-map-canvas {
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  will-change: transform;
}
.delivery-map-loading {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 18, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  z-index: 1000;
  backdrop-filter: blur(3px);
}
.delivery-map-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(236, 235, 231, 0.2);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: mapSpin .6s linear infinite;
}
@keyframes mapSpin {
  to { transform: rotate(360deg); }
}
.user-location-marker-container {
  background: transparent !important;
  border: none !important;
}
.user-location-marker {
  position: relative;
  width: 18px;
  height: 18px;
  background: #3b82f6;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.9);
  pointer-events: none;
}
.user-location-marker::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.4);
  animation: userGeoPulse 2s infinite ease-out;
}
@keyframes userGeoPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.0); opacity: 0; }
}
.delivery-map-drawer {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 1001;
  background: rgba(28, 28, 30, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: drawerSlideUp .2s ease-out;
}
.delivery-map-drawer__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.delivery-map-drawer__close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}
@keyframes drawerSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 580px) {
  .delivery-map-drawer {
    flex-direction: column;
    align-items: stretch;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 12px 14px;
  }
}
.delivery-map-drawer__content {
  flex: 1;
  min-width: 0;
}
.delivery-map-drawer__type {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}
.delivery-map-badge-brand {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  letter-spacing: .02em !important;
  display: inline-flex !important;
  align-items: center !important;
}
.delivery-map-badge-brand--cdek {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
.delivery-map-badge-brand--yandex {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
.delivery-map-badge-brand--pochta {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
}
.delivery-map-badge-type {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: .02em !important;
}
.delivery-map-badge-type--postamat,
.delivery-map-badge-type--partner_pvz {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid #10b981 !important;
  color: #34d399 !important;
}
.delivery-map-badge-type--ops {
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid #3b82f6 !important;
  color: #60a5fa !important;
}
.delivery-map-badge-type--pvz {
  background: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid #f59e0b !important;
  color: #fbbf24 !important;
}
.delivery-map-drawer__title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.delivery-map-drawer__schedule {
  font-size: 13px !important;
  color: #e2e8f0 !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.delivery-map-drawer__code {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  font-family: monospace !important;
}
.delivery-map-drawer__btn {
  flex-shrink: 0;
  white-space: nowrap;
}


/* Юридические ссылки в чекбоксах и формах */
.legal-link {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2.5px;
  transition: color .2s var(--ease);
}
.legal-link:hover {
  color: var(--ink);
}