/* ── Шрифты: self-hosted ──────────────────────────────
   Google Fonts убраны: подключение к fonts.googleapis.com передаёт IP
   посетителя за пределы РФ, а это трансграничная передача персональных
   данных со всеми последствиями по 152-ФЗ. Файлы лежат в fonts/. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/golos-text-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/golos-text-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/golos-text-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/golos-text-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/golos-text-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/golos-text-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/golos-text-cyrillic-800-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/golos-text-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Токены живут в tokens.css и подключаются раньше этого файла.
   Здесь — база и общие компоненты; собственных значений цвета, размера
   и времени этот файл не заводит (ТЗ §20, TECH-02). */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px);scroll-padding-bottom:96px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.45}
/* публичная проза дышит свободнее рабочих строк (§10.3) */
.prose,.sub,.gate-list span,footer{line-height:1.55}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
/* якорные переходы: заголовок блока не прячется под липким хедером */
[id]{scroll-margin-top:calc(var(--hh) + 28px)}
.mono{font-family:var(--mono);font-size:14px;color:var(--text2);letter-spacing:.02em}
.btn{display:inline-block;background:var(--indigo);color:#fff;border:none;padding:11px 22px;
  font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.2;cursor:pointer}
.btn:hover{background:var(--accent-d)}
.btn-ghost{display:inline-block;border:1px solid var(--ink);padding:10px 21px;font-weight:500;
  font-size:15px;line-height:1.2;background:transparent;color:var(--ink);cursor:pointer}
@media(max-width:767px){.btn,.btn-ghost{padding-top:13px;padding-bottom:13px}}
.btn-ghost:hover{background:var(--ink);color:#fff}
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;height:var(--hh);padding:0 var(--gutter)}
.logo svg{display:block;height:18px;fill:var(--ink)}
.menu{display:flex;gap:22px}
.menu a{font-size:14px;font-weight:500;padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover{border-bottom-color:var(--ink)}
/* Текущий раздел: цвет плюс подчёркивание — одного подчёркивания на длинной
   строке меню не хватает, глаз его не ловит. */
.menu a.on{color:var(--indigo);border-bottom-color:var(--indigo);font-weight:600}
.mobile-menu a.on{color:var(--indigo)}
.nav .grow{flex:1}
.phone{font-family:var(--mono);font-size:14px}
.burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}
.mobile-menu{display:none;position:fixed;inset:var(--hh) 0 0 0;background:#fff;z-index:79;padding:6vw}
.mobile-menu a{display:block;font-size:26px;font-weight:800;padding:13px 0;border-bottom:1px solid var(--line)}
footer{background:#fff;border-top:1px solid var(--line);padding:9vh var(--gutter) 5vh;margin-top:10vh}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot a{display:block;color:var(--text2);font-size:15px;padding:4px 0}
.foot a:hover{color:var(--ink)}
.foot h4{font-size:14px;font-weight:600;margin-bottom:12px}
.req{font-size:14px;color:var(--greige);margin-top:16px;line-height:1.8}
.lock{display:flex;align-items:center;gap:16px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.lock .sep{width:1px;height:24px;background:var(--line)}
.lock span{font-weight:500;font-size:15.5px}
.crumbs{padding:18px var(--gutter) 0;font-size:14px;color:var(--text2)}
.crumbs a:hover{color:var(--ink)}
.page-head{padding:3vh var(--gutter) 3.4vh}
.page-head h1{font-size:clamp(24px,3.2vw,40px);font-weight:800;letter-spacing:-0.01em;line-height:1.05}
.page-head .sub{color:var(--text2);font-size:17px;margin-top:12px;max-width:520px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 11px;background:#fff}
.chip i{width:13px;height:13px;display:block}
.chip span{font-family:var(--mono);font-size:12.5px;line-height:1.4}
/* ── Адаптив шапки ──────────────────────────────────
   Меню из 5 пунктов занимает ~436px, логотип ~184px, плюс поиск и три иконки.
   Ниже 1024px это физически не помещается — переходим на бургер.
   Гэпы и логотип уменьшаются ступенями, иначе шапка расталкивает страницу
   и весь документ начинает горизонтально скроллиться. */
.logo img,.logo svg{height:18px;width:auto}
@media(max-width:1200px){ .nav{gap:16px} .menu{gap:16px} .gsbar .kbd{display:none} }
@media(max-width:1023px){
  .menu,.nav .phone,.nav .btn-ghost{display:none}
  /* зона нажатия бургера — 40px, но показывает его только ширина экрана:
     на сенсорном ноутбуке меню остаётся обычным */
  .burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;flex:none;margin-left:auto}
  .nav{gap:16px}
}
@media(max-width:767px){
  :root{--hh:56px}
  .nav{gap:10px}
  .logo img,.logo svg{height:16px}
  /* поиск сжимается до иконки — предсказуемая ширина вместо резинового flex */
  .gsbar{flex:none;width:38px;margin:0;padding:9px 0;justify-content:center}
  .gsbar .ph,.gsbar .kbd{display:none}
  /* В шапке телефона помещаются четыре зоны по 40px: логотип, поиск, лист
     заявок и меню. Избранное и кабинет уезжают в меню — иначе контролы
     сжимаются до неудобных 20px или шапка расталкивает страницу. */
  #favhic,.nav .hic[href="account.html"]{display:none}
  .foot{grid-template-columns:1fr}
}
@media(max-width:359px){
  .nav{gap:8px}
  .logo img,.logo svg{height:15px}
}

/* ── Сердечко избранного ────────────────────────────────
   Одна деталь на каталог и карточку изделия. Всегда видно, без белой
   подложки: на фото читается за счёт мягкой светлой тени. Наведение и
   отмеченное состояние — алый из палитры (#C8442E). */
.favheart{background:none;border:none;padding:6px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;line-height:0;-webkit-tap-highlight-color:transparent}
.favheart svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.8));
  transition:fill .22s ease,stroke .22s ease,transform .18s cubic-bezier(.2,.7,.3,1.6)}
.favheart:hover svg,.favheart:focus-visible svg{stroke:#C8442E;fill:#C8442E}
.favheart.on svg{stroke:#C8442E;fill:#C8442E}
.favheart:active svg{transform:scale(.86)}
/* короткий отскок только в момент нажатия — класс снимается через 360 мс,
   иначе анимация повторялась бы при каждой перерисовке каталога */
.favheart.pop svg{animation:favPop .36s cubic-bezier(.2,.7,.3,1.7)}
@keyframes favPop{0%{transform:scale(.72)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  .favheart svg{transition:none}
  .favheart.pop svg{animation:none}
}

/* ── Зоны нажатия на сенсорных экранах ──────────────────
   Палец попадает уверенно примерно от 40px по короткой стороне.
   Иконки шапки, свотчи цветов и текстовые кнопки-ссылки по умолчанию
   мельче — расширяем область нажатия, не трогая внешний размер элемента. */
/* Селекторы с `body` — чтобы перебить размеры, заданные в стилях самих страниц:
   они подключаются после shared.css и при равной специфичности выигрывают. */
@media(hover:none),(max-width:767px){
  body .hic{width:40px;height:40px;flex:none}
  body .gsbar{width:40px;min-width:40px;min-height:40px;flex:none}
  body .favheart{width:40px;height:40px}
  body .logo{display:inline-flex;align-items:center;min-height:40px;flex:none}
  body .foot a{padding:9px 0}
  /* свотчи цвета и материала — в карточке, в фильтрах и в листе заявок */
  body .swl button,body .dsw button,body .mcedit .sws button{width:40px;height:40px}
  /* текстовые кнопки-действия: «изменить», «дублировать», «Хочу так же», оценка ответа */
  body .cedit,body .wlink,body .fbb,body .qdel,body .szf button,body .rowacts button,
  body .danger button,body .hact button,body .tbtn,body .sort,body .drawer .dh button,
  body .drawer .df .clear,body .consult-pop .cx,body .arr{
    min-height:40px;display:inline-flex;align-items:center
  }
  body .sort{padding:0 4px}
  /* чекбоксы согласий: квадратик крупнее, нажатие ловит всю строку */
  body .agree input[type=checkbox],body label.agree input[type=checkbox],
  body label > input[type=checkbox]{width:18px;height:18px;flex:none}
  /* чипы каналов связи и текстовые действия в правой колонке карточки */
  body .chan{min-height:40px;display:inline-flex;align-items:center}
  body .side button{min-height:40px;display:inline-flex;align-items:center}
  /* бегущая строка: строки в ней кликабельные, расширяем область нажатия */
  body .ticker a{padding:12px 0}
}
/* строка согласия кликается целиком — по подписи, а не только по квадратику */
label.agree{display:flex;gap:9px;align-items:flex-start;cursor:pointer}

/* ── Анимационный слой ─────────────────────────────
   Принципы: только transform/opacity, движение объясняет структуру,
   reveal при скролле, нативный parallax через scroll-timeline с фолбэком. */

/* появление блоков при скролле (класс вешает shared.js) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .8s cubic-bezier(.2,.65,.2,1);transition-delay:var(--rvd,0s)}
.rv.vis{opacity:1;transform:none}

/* подчёркивание меню — выезжает слева */
.menu a{position:relative;border-bottom:none}
.menu a:hover,.menu a.on{border-bottom-color:transparent}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.65,.2,1)}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1)}

/* микро-движение контролов */
.btn,.btn-ghost,.opt,.chan,.fchip,.dchip{transition:background .22s,color .22s,border-color .22s,transform .12s}
.btn:active,.btn-ghost:active{transform:scale(.98)}

/* нативный параллакс фото в сплитах и hero-блоках (Chrome/Safari), без него — статично */
@supports (animation-timeline: view()){
  .split .ph img,.case-hero img,.phero img,.chero img{animation:wg-par linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes wg-par{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .menu a::after{transition:none}
  .split .ph img,.case-hero img,.phero img,.chero img{animation:none !important}
}

/* ── Поиск: строка по центру хедера ── */
/* строка-«впадина»: тот же цвет, что у хедера, глубина — только внутренней тенью */
.gsbar{flex:3 1 0;max-width:520px;min-width:172px;margin:0 16px;display:flex;align-items:center;gap:8px;border:none;border-radius:20px;background:transparent;box-shadow:inset 0 1.5px 4px rgba(30,30,30,.13),inset 0 5px 14px rgba(30,30,30,.05);padding:9px 15px;cursor:text;font-family:var(--sans);font-size:14px;color:var(--text2);text-align:left;transition:box-shadow .25s,color .2s}
.gsbar:hover,.gsbar:focus-visible{box-shadow:inset 0 2px 5px rgba(30,30,30,.18),inset 0 6px 16px rgba(30,30,30,.07);color:var(--ink)}
.gsbar svg{width:14px;height:14px;flex:none}
.gsbar .ph{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsbar .kbd{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;line-height:1;color:var(--greige);border:1px solid var(--line);border-radius:7px;padding:3px 6px;background:transparent}
@media(max-width:900px){.gsbar{margin:0 8px;padding:8px 12px;border-radius:18px}.gsbar .ph{font-size:12px}.gsbar .kbd{display:none}}

/* ── Поисковый оверлей ── */
#gsov{position:fixed;inset:0;background:rgba(255,255,255,.98);z-index:120;display:flex;justify-content:center;opacity:0;transition:opacity .25s}
#gsov.on{opacity:1}
.gs-in{width:min(1020px,94vw);padding:8vh 0 5vh;display:flex;flex-direction:column;transform:translateY(16px);transition:transform .35s cubic-bezier(.2,.65,.2,1)}
#gsov.on .gs-in{transform:none}
.gs-top{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:12px;flex:none}
.gs-top svg{width:22px;height:22px;flex:none;color:var(--text2)}
#gsi{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--sans);font-size:clamp(18px,2.08vw,24px);color:var(--ink)}
#gsi::placeholder{color:var(--greige)}
.gs-x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text2);flex:none}
.gs-body{display:grid;grid-template-columns:280px 1fr;gap:5vw;margin-top:34px;overflow:auto;align-items:start}
.gs-cap{font-family:var(--mono);font-size:12.5px;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
.gs-hot{display:flex;flex-wrap:wrap;gap:8px}
.gs-chip{border:1px solid var(--line);background:var(--surface);padding:8px 13px;font-size:14px;cursor:pointer;font-family:var(--sans);opacity:0;animation:gsIn .5s cubic-bezier(.2,.65,.2,1) forwards;transition:border-color .2s,background .2s}
.gs-chip:hover{border-color:var(--ink);background:#fff}
.gs-secs a{display:block;padding:9px 0;font-size:15.5px;font-weight:500;border-bottom:1px solid var(--line)}
.gs-secs a:hover{color:var(--indigo)}
.gs-hint{color:var(--text2);font-size:15px;max-width:400px}
.gs-res{display:flex;flex-direction:column;gap:2px;min-height:200px}
.gs-item{display:flex;gap:14px;align-items:center;padding:10px 12px;border:1px solid transparent;opacity:0;animation:gsIn .4s cubic-bezier(.2,.65,.2,1) forwards}
.gs-item:hover{border-color:var(--line);background:var(--surface)}
.gs-th{width:52px;height:64px;background:var(--surface);flex:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gs-th img{width:100%;height:100%;object-fit:cover}
.gs-th svg{position:absolute;inset:0;margin:auto;width:56%;height:66%}
.gs-tx{min-width:0}
.gs-item b{font-size:15.5px;font-weight:600;display:block}
.gs-item i{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--text2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes gsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:800px){.gs-body{grid-template-columns:1fr;gap:26px}.gs-in{padding-top:4vh}.gs-side{order:2}}
@media (prefers-reduced-motion: reduce){.gs-chip,.gs-item{animation:none;opacity:1}}

.hic{position:relative;display:flex;align-items:center;justify-content:center;width:31px;height:31px;color:var(--ink)}
.hic svg{width:19px;height:19px}
.hic:hover{color:var(--indigo)}
.hbadge{position:absolute;top:-2px;right:-4px;background:var(--indigo);color:#fff;font-family:var(--mono);font-size:11.5px;min-width:15px;height:15px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 3px}

/* ── Варианты расчёта в нескольких материалах ───────────────────────────
   Одна позиция — один тираж, но несколько материалов на расчёт.
   Живёт в карточке товара и в листе заявок, разметка общая (WG.varBoxHtml). */
.vbox{margin-top:14px}
.vlbl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:500;margin-bottom:8px}
/* «?» — круг 20px с невидимой зоной нажатия 40px через ::after: держим и лёгкий
   вид рядом с текстом, и палец. Размеры задаются жёстко, иначе общее правило
   `body .side button{min-height:40px}` растягивает круг в эллипс. */
.vlbl .vq{width:20px;height:20px;min-width:20px;min-height:20px;flex:none;border:1px solid var(--line);
  background:none;border-radius:50%;font-family:var(--mono);font-size:13px;line-height:1;color:var(--text2);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;position:relative}
.vlbl .vq::after{content:'';position:absolute;inset:-10px}
.vlbl .vq:hover,.vlbl .vq[aria-expanded=true]{border-color:var(--indigo);color:var(--indigo)}
.vlbl .vcnt{font-family:var(--mono);font-size:13.5px;color:var(--text2);font-weight:400}
.vhint{display:none;border-left:2px solid var(--indigo);background:var(--surface);padding:10px 13px;
  font-size:13.5px;line-height:1.5;color:var(--text2);margin-bottom:10px}
.vhint.on{display:block;animation:vfade .22s ease-out}
.vhint b{color:var(--ink)}
@keyframes vfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* выпадающий список материалов */
.vdd{position:relative}
.vdd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:1px solid var(--line);background:#fff;padding:11px 14px;font-family:var(--sans);font-size:14px;
  color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s}
.vdd-btn:hover{border-color:var(--ink)}
.vdd.open .vdd-btn{border-color:var(--ink)}
.vcar{width:8px;height:8px;flex:none;border-right:1.5px solid var(--text2);border-bottom:1.5px solid var(--text2);
  transform:rotate(45deg);margin-top:-4px;transition:transform .22s}
.vdd.open .vcar{transform:rotate(-135deg);margin-top:2px}
.vdd-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:#fff;
  border:1px solid var(--ink);max-height:288px;overflow-y:auto;box-shadow:0 10px 28px rgba(30,30,30,.13)}
.vdd.open .vdd-menu{display:block;animation:vdrop .18s ease-out}
@keyframes vdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vdd-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;
  border:none;border-bottom:1px solid var(--line);padding:11px 14px;font-family:var(--sans);font-size:14px;
  text-align:left;cursor:pointer;color:var(--ink);transition:background .15s}
.vdd-opt:last-child{border-bottom:none}
.vdd-opt:hover:not(:disabled){background:var(--surface)}
.vdd-opt.on{background:var(--surface)}
.vdd-opt.off{color:var(--greige);cursor:not-allowed;background:#FBFAF8}
.vdd-nm{display:block;font-weight:500;min-width:0}
.vdd-nm em{display:block;font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--text2);
  font-weight:400;margin-top:2px}
.vdd-opt.off .vdd-nm em{color:var(--greige)}
.vdd-st{flex:none;font-family:var(--mono);font-size:12.5px;color:var(--text2)}
.vdd-opt.on .vdd-st{color:var(--indigo)}
.vdd-opt.off .vdd-st{color:var(--greige)}
/* выбранные материалы чипами — видны и со свёрнутым списком */
.vchips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:9px}
.vchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ink);background:none;
  padding:7px 11px;font-family:var(--sans);font-size:13.5px;cursor:default;color:var(--ink);
  animation:vfade .2s ease-out}
.vchip .vx{background:none;border:none;padding:0 0 0 2px;font-size:15px;line-height:1;color:var(--text2);
  cursor:pointer;font-family:var(--sans)}
.vchip .vx:hover{color:#90353D}
/* строка варианта в кабинете — артикул, а не отдельный тираж */
.vart{display:flex;gap:9px;align-items:baseline;font-size:13.5px;padding:5px 0 5px 13px;
  border-left:2px solid var(--line);color:var(--text2)}
.vart b{color:var(--ink);font-weight:500}
.vart .vno{font-family:var(--mono);font-size:13px;flex:none}
@media(hover:none),(max-width:767px){
  body .vchip,body .vdd-btn,body .vdd-opt{min-height:44px}
  body .vlbl .vq,body .side .vlbl .vq{width:20px;height:20px;min-width:20px;min-height:20px}
  body .vchip .vx{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .vhint.on,.vdd.open .vdd-menu,.vchip{animation:none}
  .vcar{transition:none}
}

/* ══ Выпадающая панель каталога в шапке ═════════════════════════════════
   Слои и виды изделий переехали сюда со страницы каталога: там они занимали
   первый экран и отодвигали сам товар. Панель абсолютная — она не влияет на
   поток и не двигает страницу при появлении. */
/* ВАЖНО: у header нельзя менять position — он sticky (а на главной fixed),
   и любое переопределение ломает залипание шапки: она уезжает вверх, а липкая
   панель фильтров каталога встаёт на её место и закрывает товар. Отдельная
   обёртка панели не нужна: sticky и fixed уже создают контекст для absolute. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:78;background:#fff;pointer-events:none;
  border-bottom:1px solid var(--line);box-shadow:0 14px 34px rgba(30,30,30,.10);
  padding:18px var(--gutter) 16px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.7,.3,1),visibility .2s}
.mega.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2vw;max-width:1240px;margin:0 auto}
/* Заголовки всех колонок в одном формате: название слева, счётчик справа —
   так они стоят на одной линии и колонки не разъезжаются по высоте. */
.mega-col .mh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13.5px;font-weight:600;padding-bottom:7px;margin-bottom:6px;
  border-bottom:1px solid var(--line);color:var(--ink)}
.mega-col .mh i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--greige);font-weight:400}
a.mh:hover{color:var(--indigo);border-bottom-color:var(--indigo)}
.mega-links{display:grid;gap:1px}
.mega-links a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:4px 0;font-size:12.5px;color:var(--text2);transition:color .18s}
.mega-links a:hover{color:var(--ink)}
.mega-links a i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--greige)}
.mega-soon .mh{color:var(--greige);cursor:default}
.mega-note{grid-column:1/-1;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--greige)}
@media(max-width:1140px){.mega-in{grid-template-columns:repeat(3,1fr);gap:3vw}.mega-col.mega-acc{display:none}}
/* ниже 1024px меню уходит в бургер — панель там не нужна */
@media(max-width:1023px){.mega{display:none}}
@media(prefers-reduced-motion:reduce){.mega{transition:none}}