/* AlkorTactical — дизайн-система (production refinement).
   Industrial engineering × defense technology × premium European e-commerce.

   Цвет здесь — информационная система, а не украшение. Доля поверхностей:
   ~65–70 % светлое (bg / white), ~20–25 % graphite, ~5–8 % stone, ~2–3 % orange.
   Orange используется ТОЛЬКО для главного conversion action на экране.
   Зелёного в визуальной идентичности нет: статусы, verified, active state,
   checkbox и selection работают на graphite / navy / neutral. */

/* ── Шрифты ───────────────────────────────────────────────────────────────
   Manrope и IBM Plex Mono лежат на своём сервере (SIL Open Font License,
   тексты лицензий — assets/fonts/OFL-*.txt): без обращений к Google Fonts,
   с font-display: swap. Наборы: кириллица, латиница и latin-ext (знак ₽). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/manrope-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/manrope-latin-wght-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-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: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-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: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-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; }

/* ПАЛИТРА ЗАФИКСИРОВАНА (23.09.2026).
   Эти значения — основа айдентики. Новые цвета в файле не появляются:
   всё, что ниже в CSS, ссылается только на токены :root.
   Эталон и проверка контраста — tools/check-palette.mjs
   (`node tools/check-palette.mjs --list`); сборка dist/ падает, если
   палитра разошлась с эталоном. Менять цвет — только по решению
   владельца и сразу в обоих местах. */
:root {
  /* ── Поверхности ────────────────────────────────────────────────────── */
  --bg:          #EEF0EF;   /* нейтрально-серый фон страницы, заметно отличимый от белых карточек */
  --stone:       #E5E8E7;   /* вторичная нейтрально-серая поверхность */
  --surface:     #FFFFFF;   /* белые карточки и секции */
  --photo-bg:    #E8EBEA;   /* нейтрально-серая подложка фотографий (photo protocol) */

  /* ── Graphite / navy ────────────────────────────────────────────────── */
  --ink:         #111820;   /* primary dark */
  --ink-2:       #202A34;   /* secondary dark */
  --ink-3:       #2C3742;   /* поверхности внутри тёмных секций */
  --status:      #24313C;   /* точка статуса «в наличии» */

  /* ── Текст ──────────────────────────────────────────────────────────── */
  --text:        #111820;   /* primary text */
  --text-2:      #66625C;   /* secondary text: ≥ 4.5:1 на --bg, --stone и белом */
  --muted:       #6F6B65;   /* muted text: 4.7:1 на --bg, 5.3:1 на белом; на --stone не использовать для текста мельче 18px */
  --on-dark:     #FFFFFF;
  --on-dark-2:   #C7CBD0;   /* вторичный текст на тёмном */
  --on-dark-3:   #9AA0A7;   /* muted на тёмном */

  /* ── Линии ──────────────────────────────────────────────────────────── */
  --line:        #DDD7CE;
  --line-soft:   #E9E4DB;
  --line-dark:   #2A333D;
  --line-strong: #8A8379;   /* границы полей и контролов: ≥ 3:1 на белом, --bg и --stone */

  /* ── Conversion accent ──────────────────────────────────────────────── */
  --accent:      #D6782B;
  --accent-hover:#C46822;
  --accent-soft: #F6EADD;   /* подложка бейджей и подсказок, без насыщенности */
  --accent-text: #9A4B13;   /* акцентный текст на --accent-soft и светлых фонах: 5.2:1 */
  --accent-press:#B55F1E;   /* нажатая оранжевая кнопка */
  --accent-line: #E5CDB2;   /* рамка предупреждения на --accent-soft */
  --accent-wash: #FDF7F1;   /* фон поля с ошибкой */
  --focus:       #A65518;   /* кольцо фокуса на светлом: 4.3–5.3:1; на тёмном — --accent */

  /* ── Служебные оттенки (производные, не новые цвета) ────────────────── */
  --row-alt:     #FBF9F6;   /* чередование строк в таблице характеристик */
  --shine:       #F3EFE8;   /* блик скелетона загрузки */
  --line-dark-2: #3B4652;   /* граница тёмного контрола при наведении */
  /* Фирменные цвета площадок — только для их значков в «Новостях и видео». */
  --brand-vk:    #0077FF;
  --brand-tg:    #229ED9;
  --brand-dzen:  #000000;

  /* ── Геометрия и движение ───────────────────────────────────────────── */
  --r-card: 12px;
  --r-btn: 10px;
  --r-sm: 8px;
  --t-fast: 150ms;
  --t: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --shadow-1: 0 2px 10px rgba(17, 24, 32, 0.05);
  --shadow-2: 0 10px 28px rgba(17, 24, 32, 0.09);
  --shadow-3: 0 24px 60px rgba(17, 24, 32, 0.22);

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --hd-h: 116px;            /* полная высота шапки: бар + вторичная навигация */
  --hd-sticky-h: 66px;      /* компактная шапка после скролла */
}

/* Тёмная тема использует ту же зафиксированную палитру: меняются роли уже
   существующих токенов, а не добавляется второй несвязанный набор цветов. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink);
  --stone: var(--ink-2);
  --surface: var(--ink-3);
  --photo-bg: var(--ink-2);
  --text: var(--on-dark);
  --text-2: var(--on-dark-2);
  --muted: var(--on-dark-3);
  --line: var(--line-dark-2);
  --line-soft: var(--line-dark);
  --line-strong: var(--on-dark-3);
  --row-alt: var(--ink-2);
  --shine: var(--ink-3);
  --focus: var(--accent);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-sticky-h) + 68px); }

body {
  margin: 0;
  padding-top: var(--hd-full, 122px);   /* место под фиксированную шапку */
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text); text-decoration: none; transition: color var(--t-fast) var(--ease); }
img { max-width: 100%; }
button, input, select, textarea { font-family: var(--sans); }

/* ── Единый accessible focus ────────────────────────────────────────────
   :focus-visible, а не :focus — клик мышью не должен рисовать рамку.
   Это же правило снимает «случайные чёрные рамки» вокруг строк и карточек. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* На тёмных поверхностях тёмно-оранжевое кольцо теряется — там --accent (4.6–5.6:1). */
.band-dark :focus-visible, .band-dark-2 :focus-visible, .on-dark :focus-visible,
.hd :focus-visible, .ft :focus-visible, .lightbox :focus-visible { outline-color: var(--accent); }

/* Ссылка «Перейти к содержимому»: видна только при фокусе с клавиатуры. */
.skip-link {
  position: fixed; left: 12px; top: -200px; z-index: 1000;
  background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: 15px;
  padding: 12px 18px; border-radius: var(--r-btn);
}
.skip-link:focus, .skip-link:focus-visible { top: 10px; outline: 2px solid var(--accent); outline-offset: 2px; color: var(--on-dark); }
#main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ── Раскладка ──────────────────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.flex-1 { flex: 1; }

/* ── Типографика ────────────────────────────────────────────────────────
   Manrope — весь UI. IBM Plex Mono — только SKU, section index, specs,
   модели, бейджи и метрики; длинный текст моноширинным не набирается. */
h1, h2, h3, h4, .hd-pane-title, .ft-title { font-family: var(--sans); margin: 0; letter-spacing: -0.018em; }
.h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; font-weight: 700; }
h1.page { font-size: clamp(27px, 3.2vw, 42px); line-height: 1.1; font-weight: 700; }
.h2, h2.sec { font-size: clamp(27px, 2.9vw, 38px); line-height: 1.14; font-weight: 700; }
.h3 { font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -0.012em; }
.body { font-size: 16.5px; line-height: 1.6; }
.body-2 { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.meta { font-size: 13px; color: var(--text-2); }
.tech {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
p { margin: 0 0 14px; }
.lead { font-size: 17px; line-height: 1.6; color: var(--text-2); }

/* ── Section index system ───────────────────────────────────────────────
   01 / ТОП ПРОДАЖ — часть визуальной идентичности, поэтому расстояния
   между номером, слэшем и названием заданы жёстко и одинаково везде. */
.sec-index {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.sec-index b { color: var(--ink); font-weight: 600; }
.sec-index s { text-decoration: none; color: var(--line); }
.band-dark .sec-index, .band-dark-2 .sec-index, .on-dark .sec-index { color: var(--on-dark-3); }
.band-dark .sec-index b, .band-dark-2 .sec-index b, .on-dark .sec-index b { color: var(--on-dark); }
.band-dark .sec-index s, .band-dark-2 .sec-index s, .on-dark .sec-index s { color: rgba(255, 255, 255, 0.25); }

.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}

/* ── Ритм поверхностей ──────────────────────────────────────────────────
   Секции чередуются, чтобы страница читалась как последовательность глав. */
.band { padding: 88px 0; }
.band-tight { padding: 52px 0; }
.band-light, .band-white, .band-stone { background-color: var(--bg); }
.band-light, .band-white, .band-stone {
  /* Единый «технический холст»: крупный масштаб вместо мелкой плитки.
     fixed сохраняет рисунок непрерывным при переходе между секциями. */
  background-image:
    radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.76) 0, rgba(255, 255, 255, 0) 34rem),
    repeating-radial-gradient(circle at 86% 16%, transparent 0 118px, rgba(32, 42, 52, 0.045) 119px 120px, transparent 121px 238px),
    linear-gradient(108deg, transparent 0 68%, rgba(32, 42, 52, 0.034) 68% 68.08%, transparent 68.08% 100%);
  background-attachment: fixed;
  background-size: auto;
}
/* Тёмный контекст сам задаёт светлый текст: иначе заголовки внутри
   .on-dark без .band-dark наследуют тёмный цвет страницы и пропадают. */
.on-dark { color: var(--on-dark); }
.band-dark   { background: var(--ink); color: var(--on-dark); }
.band-dark-2 { background: var(--ink-2); color: var(--on-dark); }
.brand-pattern {
  background-color: var(--ink-2);
  background-image:
    linear-gradient(110deg, rgba(17, 24, 32, 0.38), rgba(32, 42, 52, 0.18)),
    url('../../img/ui/dark-tech-pattern-v1.webp');
  background-size: auto, 560px 560px;
  background-position: center, center 38%;
  background-blend-mode: normal;
}
.band-dark h2, .band-dark-2 h2, .band-dark h3, .band-dark-2 h3 { color: var(--on-dark); }
.band-dark a, .band-dark-2 a { color: var(--on-dark); }
/* Ссылка-кнопка primary на тёмном: текст остаётся графитовым (5.6:1 на оранжевом). */
.band-dark a.btn-primary, .band-dark-2 a.btn-primary, .on-dark a.btn-primary { color: var(--ink); }

/* ── CTA system ─────────────────────────────────────────────────────────
   Ровно три уровня действия плюс текстовое действие без контейнера.
   Оранжевая кнопка на экране одна — главная конверсия. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1.5px solid transparent; border-radius: var(--r-btn); cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1;
  padding: 15px 26px; min-height: 48px; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* PRIMARY — единственное главное действие. Рамка на тон темнее заливки:
   на светлом фоне граница кнопки читается с контрастом ≥ 3:1. */
.btn-primary { background: var(--accent); color: var(--ink); border-color: var(--accent-hover); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--focus); color: var(--ink); }
.btn-primary:active { background: var(--accent-press); }
.band-dark .btn-primary, .band-dark-2 .btn-primary, .on-dark .btn-primary { border-color: var(--accent); }

/* SECONDARY */
.btn-secondary { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--on-dark); }

/* TERTIARY */
.btn-tertiary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-tertiary:hover { background: var(--ink); color: var(--on-dark); }
.btn-tertiary:active { background: var(--ink-2); color: var(--on-dark); }

/* ON-DARK — третий уровень на графитовых поверхностях. Отдельный класс
   .btn-inverse для любых тёмных блоков; внутри .band-dark / .band-dark-2 /
   .on-dark обычный .btn-tertiary автоматически получает те же стили.
   Белая рамка 0.6 на #202A34 — 5.5:1, текст — 14.6:1; не второй оранжевый CTA. */
.btn-inverse,
.band-dark .btn-tertiary, .band-dark-2 .btn-tertiary, .on-dark .btn-tertiary {
  background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, 0.6);
}
.btn-inverse:hover,
.band-dark .btn-tertiary:hover, .band-dark-2 .btn-tertiary:hover, .on-dark .btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.12); border-color: var(--on-dark); color: var(--on-dark);
}
.btn-inverse:active,
.band-dark .btn-tertiary:active, .band-dark-2 .btn-tertiary:active, .on-dark .btn-tertiary:active {
  background: rgba(255, 255, 255, 0.2); color: var(--on-dark);
}
.btn-inverse:disabled,
.band-dark .btn-tertiary:disabled, .band-dark-2 .btn-tertiary:disabled, .on-dark .btn-tertiary:disabled {
  opacity: 1; color: var(--on-dark-3); border-color: rgba(255, 255, 255, 0.28); background: transparent;
}

/* Служебная кнопка на светлом: тише третьего уровня, для «Показать ещё» */
.btn-quiet { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }

.btn-sm { padding: 10px 18px; min-height: 40px; font-size: 14px; }
.btn-lg { padding: 18px 32px; min-height: 56px; font-size: 16px; }
.btn-block { width: 100%; }

/* TEXT ACTION — «Все товары →». Без контейнера, без оранжевого. */
.act {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  background: none; border: none; padding: 0; cursor: pointer;
}
.act i { font-style: normal; transition: transform var(--t-fast) var(--ease); }
.act:hover { color: var(--ink); }
.act:hover i { transform: translateX(3px); }
.act-sm { font-size: 14px; }
.act-quiet { color: var(--text-2); font-weight: 600; }
.act-quiet:hover { color: var(--ink); }
.band-dark .act, .band-dark-2 .act, .on-dark .act { color: var(--on-dark); }
.on-dark .act-quiet { color: var(--on-dark-2); }

/* Ссылка в тексте — контролируемое подчёркивание */
.link {
  color: var(--text); border-bottom: 1px solid var(--line);
  transition: border-color var(--t-fast) var(--ease);
}
.link:hover { border-color: var(--ink); color: var(--text); }

/* ── Иконочные кнопки ───────────────────────────────────────────────────
   44×44 — минимальная зона нажатия. Tooltip на hover и focus. */
.icon-btn {
  width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn.on { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }

.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--on-dark); font-family: var(--sans);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 7px 9px; border-radius: 6px; pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast) var(--ease); z-index: 120;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }

/* ── Поля форм и их состояния ───────────────────────────────────────────── */
.field {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); height: 48px; padding: 0 14px;
  font-family: var(--sans); font-size: 15px; background: var(--surface);
  color: var(--text); width: 100%;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field::placeholder { color: var(--muted); }
.field:hover { border-color: var(--ink-2); }
.field:focus { border-color: var(--ink); }
.field.filled { background: var(--surface); }
.field:disabled { background: var(--stone); color: var(--text-2); border-style: dashed; cursor: not-allowed; }
/* Ошибка не только цветом: двойная рамка + текст с пиктограммой под полем. */
.field[aria-invalid="true"] { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); background: var(--accent-wash); }
textarea.field { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field-row { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field-err { font-size: 12.5px; color: var(--accent-text); font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.consent-field { margin-top:4px; }
.consent-label { display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-size:12.5px;line-height:1.5;color:var(--text-2);cursor:pointer; }
.consent-label input { width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink); }
.consent-label a,.consent-offer a { color:var(--text);text-decoration:underline;text-underline-offset:2px; }
.consent-label a:hover,.consent-offer a:hover { text-decoration-thickness:2px; }
.consent-label input[aria-invalid="true"] { outline:2px solid var(--accent-text);outline-offset:2px; }
.consent-error { margin:7px 0 0 28px;font-size:12.5px;font-weight:700;color:var(--accent-text); }
.consent-offer { margin:7px 0 0 28px;font-size:12px;line-height:1.45;color:var(--text-2); }
.field-err::before {
  content: "!"; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-text); color: var(--surface); font-size: 11px; line-height: 15px; text-align: center;
}

/* Чекбоксы и радио — graphite, не зелёные и не системные синие */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* ── Шапка ──────────────────────────────────────────────────────────────
   Одна доминанта — поиск. Логотип читается как ALKOR TACTICAL,
   телефон текстом, действия — единые outline-иконки. */
/* Шапка зафиксирована и не участвует в потоке страницы. Раньше она была
   sticky: при переходе в компактный режим становилась ниже на ~55 px,
   контент подпрыгивал, браузер компенсировал это сдвигом прокрутки, а
   обработчик принимал сдвиг за движение вверх и разворачивал шапку обратно —
   она дёргалась между двумя состояниями. Место под шапку держит отступ
   у body, его высоту выставляет layout.js (--hd-full). */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(17, 24, 32, 0.18), rgba(17, 24, 32, 0.18)),
    url('../../img/ui/dark-tech-pattern-v1.webp');
  background-size: auto, 460px 460px;
  background-position: center, center 26%;
  background-blend-mode: normal;
}
.hd-bar {
  max-width: 1280px; margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; gap: 16px; position: relative;
  transition: padding var(--t) var(--ease);
}
.hd-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--on-dark); }
.hd-logo:hover { color: var(--on-dark); }
.hd-logo .seal { width: 42px; height: 42px; flex-shrink: 0; transition: width var(--t) var(--ease), height var(--t) var(--ease); }
.hd-logo .wordmark { display: flex; flex-direction: column; line-height: 1; }
.hd-logo .wordmark b {
  font-size: 19px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  transition: font-size var(--t) var(--ease);
}
.hd-logo .wordmark small {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--on-dark-3); margin-top: 5px; text-transform: uppercase;
}

.hd-cat {
  display: inline-flex; align-items: center; gap: 10px; background: transparent;
  color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  height: 48px; padding: 0 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hd-cat:hover { background: var(--ink-2); border-color: var(--line-dark-2); }
.hd-cat[aria-expanded="true"] { background: var(--surface); color: var(--ink); border-color: var(--surface); }

.hd-searchwrap { flex: 1 1 380px; min-width: 0; position: relative; }
.hd-search {
  display: flex; align-items: center; background: var(--surface); border-radius: var(--r-sm);
  height: 48px; padding: 0 5px 0 16px; gap: 10px; min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hd-search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.hd-search input {
  flex: 1; min-width: 0; width: 100%; height: 100%; border: none; background: transparent; outline: none;
  font-size: 15px; color: var(--text);
}
.hd-search input::placeholder { color: var(--muted); }
.hd-search button {
  background: var(--ink); color: var(--on-dark); border: none; border-radius: 6px;
  height: 40px; padding: 0 20px; font-size: 14.5px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: background var(--t-fast) var(--ease);
}
.hd-search button:hover { background: var(--ink-2); }

.hd-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hd-phone { display: flex; flex-direction: column; line-height: 1.15; color: var(--on-dark); }
.hd-phone b { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hd-phone small { font-size: 11px; color: var(--on-dark-3); margin-top: 3px; }
.hd-phone:hover { color: var(--on-dark); }
.hd-phone:hover b { text-decoration: underline; text-underline-offset: 3px; }

.hd-ico {
  width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line-dark);
  border-radius: var(--r-sm); background: transparent; color: var(--on-dark);
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hd-ico:hover { background: var(--ink-2); border-color: var(--line-dark-2); color: var(--on-dark); }
.hd-pref { cursor: pointer; }
.hd-ico.cart { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.hd-ico.cart:hover { background: var(--stone); color: var(--ink); border-color: var(--stone); }
.hd-badge {
  position: absolute; top: -6px; right: -6px; background: var(--accent); color: var(--ink);
  font-family: var(--mono); font-size: 10px; font-weight: 600; border-radius: 999px;
  min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid var(--ink);
}

/* Мега-меню */
.hd-drop {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--surface);
  border-radius: 0 0 14px 14px; box-shadow: var(--shadow-3);
  padding: 28px; display: flex; gap: 36px; z-index: 60; flex-wrap: wrap;
  max-height: 74vh; overflow: auto; color: var(--text);
}
.hd-menugrid { flex: 3 1 560px; display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 0 28px; min-width: 0; }
.hd-secs { list-style: none; margin: 0; padding: 0 20px 0 0; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.hd-sec {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-2); min-height: 40px;
}
.hd-sec i { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-weight: 500; }
.hd-sec.on, .hd-sec:hover { background: var(--bg); color: var(--ink); }
.hd-sec.on { box-shadow: inset 3px 0 0 var(--ink); }
.hd-panes { min-width: 0; }
.hd-pane { display: none; }
.hd-pane.on { display: block; }
.hd-menugrid .hd-pane-title { font-size: 17px; font-weight: 700; margin: 4px 0 14px; }
.hd-pane-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px 16px; }
.hd-menugrid .lnk {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 11px;
  font-size: 14px; color: var(--text-2); padding: 7px; min-height: 66px;
  align-items: center; border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hd-menugrid .lnk:hover { color: var(--text); background: var(--bg); border-color: var(--line); }
.hd-catthumb {
  position: relative; display: block; width: 52px; height: 52px; overflow: hidden;
  border-radius: 7px; border: 1px solid var(--line-soft); background: var(--photo-bg);
}
.hd-catname { min-width: 0; line-height: 1.35; font-weight: 600; }
.hd-catcount {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  white-space: nowrap; align-self: center;
}
.hd-menugrid .lnk.is-empty { color: var(--text-2); }
.hd-menugrid .lnk.is-empty .hd-catcount { font-family: var(--sans); font-size: 12px; }
@media (max-width: 860px) {
  /* Телефон: без левой колонки — все разделы списком со своими подразделами. */
  .hd-menugrid { grid-template-columns: minmax(0, 1fr); }
  .hd-secs { display: none; }
  .hd-pane { display: block; padding-bottom: 18px; }
  .hd-menugrid .hd-pane-title { font-size: 15.5px; margin: 0 0 6px; }
  .hd-pane-list { grid-template-columns: minmax(0, 1fr); }
  .hd-menugrid .lnk { grid-template-columns: 46px minmax(0, 1fr) auto; min-height: 60px; }
  .hd-catthumb { width: 46px; height: 46px; }
}
.hd-quick {
  flex: 1 1 220px; background: var(--stone); border-radius: var(--r-card); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; align-self: flex-start;
}
.hd-quick .t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.hd-quick a.q {
  display: block; margin: -5px -8px; padding: 9px 8px;
  border-radius: 7px; font-size: 14px; font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.hd-quick a.q:hover,
.hd-quick a.q:focus-visible {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(17, 24, 32, 0.06);
}

/* Smart search */
.hd-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface);
  border-radius: 12px; box-shadow: var(--shadow-3); padding: 18px; z-index: 60;
  max-height: 72vh; overflow: auto;
}
.hd-suggest .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 10px;
}
.hd-suggest .lbl + .lbl, .hd-suggest .grp + .grp { margin-top: 16px; }
.hd-sg { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-sm); color: var(--text); }
.hd-sg:hover, .hd-sg.on { background: var(--bg); color: var(--text); }
.hd-sg .pic {
  width: 44px; height: 44px; border-radius: 7px; overflow: hidden; position: relative;
  background: var(--photo-bg); border: 1px solid var(--line); flex-shrink: 0;
}
.hd-sg .nm { flex: 1; min-width: 0; }
.hd-sg .nm b { display: block; font-size: 14px; font-weight: 600; }
.hd-sg .nm i { display: block; font-size: 12.5px; color: var(--text-2); font-style: normal; margin-top: 2px; }
.hd-sg .pr { font-family: var(--mono); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hd-chips a {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 600;
  transition: border-color var(--t-fast) var(--ease);
}
.hd-chips a:hover { border-color: var(--ink); color: var(--text); }
.hd-suggest .foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}

/* Вторичная навигация */
.hd-nav {
  background: var(--surface); border-bottom: 1px solid var(--line);
  max-height: 64px; overflow: hidden;
  transition: max-height var(--t) var(--ease), opacity var(--t) var(--ease),
              visibility 0s linear 0s;
}
.hd-nav .wrap { display: flex; gap: 30px; min-height: 48px; align-items: center; flex-wrap: wrap; }
/* Ссылки набирают высоту за счёт вертикального поля: цель нажатия ≥ 24 px. */
.hd-nav a { font-size: 14px; font-weight: 600; color: var(--text-2); padding: 13px 0; }
.hd-nav a:hover { color: var(--text); }
.hd-nav a.strong { font-weight: 700; color: var(--text); }

/* Компактный sticky-режим: вторичная навигация уезжает, бар сжимается */
/* Компактный режим меняет ТОЛЬКО высоту: логотип, каталог, поиск, телефон
   и иконки остаются на своих местах и своего размера. Любое изменение
   ширины заставляло бы поиск прыгать при каждом переключении.
   Бар: 48 px контролов + 2 × 9 px = 66 px (протокол: 64–68 px). */
.hd.compact .hd-bar { padding-top: 9px; padding-bottom: 9px; }
.hd.compact .hd-logo .wordmark small { opacity: 0; }
.hd.compact .hd-nav {
  max-height: 0; opacity: 0; border-bottom-width: 0; visibility: hidden;
  /* скрытые ссылки не должны ловить фокус с клавиатуры */
  transition: max-height var(--t) var(--ease), opacity var(--t) var(--ease),
              visibility 0s linear var(--t);
}

.hd-bottomnav { display: none; }
.hd-bottomnav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--text-2); min-width: 52px; min-height: 44px; flex: 1 1 auto;
  justify-content: center; position: relative;
}
.hd-bottomnav a.on { color: var(--ink); font-weight: 700; }

/* ── Подвал ─────────────────────────────────────────────────────────────
   Служебные страницы живут здесь, а не во вторичной навигации. */
.ft {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(17, 24, 32, 0.24), rgba(17, 24, 32, 0.24)),
    url('../../img/ui/dark-tech-pattern-v1.webp');
  background-size: auto, 620px 620px;
  background-position: center, center top;
  background-blend-mode: normal;
  color: var(--on-dark-2);
}
.ft-top {
  max-width: 1280px; margin: 0 auto; padding: 72px 24px 0;
  display: grid; grid-template-columns: minmax(250px, 1.35fr) repeat(4, minmax(150px, 1fr)); gap: 32px;
}
.ft-brand { min-width: 250px; }
.ft-brand .lock { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--on-dark); }
.ft-brand .lock .seal { width: 74px; height: 74px; flex-shrink: 0; }
.ft-brand .lock > span { min-width: 0; }
.ft-brand .lock b { font-size: 22px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; display: block; }
.ft-brand .lock small {
  display: block; margin-top: 7px; white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--on-dark-3); text-transform: uppercase;
}
.ft-brand p { font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; max-width: 290px; color: var(--on-dark-2); }
.ft .ft-title {
  font-family: var(--sans); font-size: 14px; font-weight: 800; color: var(--on-dark);
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 18px;
}
.ft-col { display: flex; flex-direction: column; gap: 12px; }
.ft-col a, .ft a { font-size: 14.5px; color: var(--on-dark-2); }
.ft-col a:hover, .ft a:hover { color: var(--on-dark); }
.ft-contact { font-family: var(--mono); font-size: 16px; color: var(--on-dark); }
.ft-contacts { display:flex;flex-direction:column;align-items:flex-start;gap:5px; }
.ft-mail { display:block;font-size:13.5px !important;overflow-wrap:anywhere; }
.ft-addr { font-size: 13.5px; margin-top: 14px; line-height: 1.6; color: var(--on-dark-2); }
.ft-socials { display:flex;align-items:center;gap:5px;flex-wrap:nowrap;margin-top:18px;overflow-x:auto;padding:2px 0 7px;scrollbar-width:none; }
.ft-socials::-webkit-scrollbar { display:none; }
.ft-socials a { flex:0 0 auto; }
.ft-socials a {
  min-width:32px;height:34px;padding:0 6px;border:1px solid var(--line-dark-2);border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.035);
  color:var(--on-dark);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.ft-socials a:hover { background:var(--ink-3);border-color:var(--on-dark-3);transform:translateY(-2px); }
.ft-socials span { font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:0; }
.ft-legal-links { display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end; }
.ft-legal-links a { font-size:13.5px;color:var(--on-dark-2); }
.ft-legal-links a:hover { color:var(--on-dark); }
.ft-legal-links span { color:var(--line-dark-2); }
.ft-bottom {
  max-width: 1280px; margin: 56px auto 0; padding: 26px 24px;
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--on-dark-2);
}

/* ── Плавающие контакты и возврат наверх ────────────────────────────────
   Панель всегда остаётся у правого края, но не перекрывает мобильную
   навигацию. Подписи появляются при наведении и фокусе с клавиатуры. */
.float-actions {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: 24px; z-index: 130;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.float-action {
  width: 50px; height: 50px; padding: 0; border: 1px solid var(--line-dark-2);
  border-radius: 50%; background: var(--ink); color: var(--on-dark);
  box-shadow: var(--shadow-2); cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.float-action:hover { transform: translateY(-2px); background: var(--ink-2); border-color: var(--on-dark-3); box-shadow: var(--shadow-3); color: var(--on-dark); }
.float-action:active { transform: translateY(0); }
.float-action:focus-visible { border-radius: 50%; }
.float-action-max { background: var(--accent); border-color: var(--accent); }
.float-action-max:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.float-action-top { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.float-action-top:hover { background: var(--stone); color: var(--text); border-color: var(--text-2); }
.float-action > span {
  position: absolute; right: 61px; top: 50%; transform: translate(8px, -50%);
  background: var(--ink); color: var(--on-dark); border: 1px solid var(--line-dark-2);
  border-radius: var(--r-sm); padding: 8px 11px; box-shadow: var(--shadow-2);
  font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.float-action:hover > span, .float-action:focus-visible > span {
  opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s;
}
@media (max-width: 860px) {
  .float-actions { right: max(14px, env(safe-area-inset-right)); bottom: calc(82px + env(safe-area-inset-bottom)); gap: 8px; }
  .float-action { width: 46px; height: 46px; }
  .float-action > span { display: none; }
}
@media (forced-colors: active) {
  .float-action { border: 2px solid ButtonText; forced-color-adjust: auto; }
}

/* ── Badge system ───────────────────────────────────────────────────────
   Один вид: тёплая светлая подложка + тёмный текст. Цветов не плодим. */
.badge {
  font-family: var(--mono); font-size: 11px; font-weight: 600; border-radius: 4px;
  padding: 4px 8px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--stone); color: var(--ink-2); white-space: nowrap;
}
.badge-accent { background: var(--accent-soft); color: var(--accent-text); }
.badge-dark { background: var(--ink); color: var(--on-dark); }
.badge-line { background: transparent; border: 1px solid var(--line-strong); color: var(--text-2); }

/* ── Photo protocol ─────────────────────────────────────────────────────
   Подложка задаётся интерфейсом, не хранится внутри файла. Объект занимает
   68–78 % площади, поэтому поле у contain — 11 %. */
.img-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--photo-bg); border-radius: inherit;
}
.img-slot img {
  width: 100%; height: 100%; object-fit: contain; display: block; padding: 11%;
  transition: transform var(--t) var(--ease);
}
.img-slot.tight img { padding: 7%; }
/* Файлы, прошедшие tools/normalize-photos.mjs, уже содержат поле и тень —
   интерфейс своё поле не добавляет. Пока скрипт не отработал, поле нужно. */
[data-photos="normalized"] .img-slot img { padding: 2%; }
[data-photos="normalized"] .img-slot.tight img { padding: 0; }
.img-slot.cover img { object-fit: cover; padding: 0; }
.img-slot .stub {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 10px; text-align: center; font-family: var(--mono); font-size: 11px;
  line-height: 1.35; color: var(--muted); background: var(--photo-bg); border-radius: inherit;
}
/* Фоновые фото тёмных секций: снимки приходят от разных производителей,
   поэтому насыщенность приглушаем, чтобы они не тянули в свою гамму. */
.band-photo { filter: saturate(0.35) brightness(0.9); }

/* ── ProductCard — единый компонент ─────────────────────────────────────
   Порядок: бейдж → фото → бренд+SKU → название → характеристики → spacer →
   цена → программа → наличие → действия. Сетка держит одинаковую высоту
   и выравнивает нижние действия по одной горизонтали. */
.card {
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-card);
  padding: 16px; display: flex; flex-direction: column; gap: 9px; height: 100%;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card:hover .img-slot img { transform: scale(1.015); }
.band-white .card { background: var(--surface); }
.band-stone .card, .band-stone .kit { background: var(--surface); }

.card .badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 21px; }
.card .ph { display: block; aspect-ratio: 1 / 1; position: relative; border-radius: var(--r-sm); overflow: hidden; }
.card .ident {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); display: flex; gap: 7px; align-items: baseline; min-width: 0; font-weight: 500;
}
.card .ident b { color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .ident span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .ident s { text-decoration: none; color: var(--line); }
.card .nm {
  font-size: 15px; font-weight: 700; line-height: 1.34; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(3 * 1.34 * 15px);
}
.card .nm:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.card .spacer { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.card .price { font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.card .program { font-size: 12.5px; color: var(--text-2); line-height: 1.4; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.card .program b { font-family: var(--mono); font-weight: 600; color: var(--ink-2); }
.card .stock { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; gap: 7px; align-items: baseline; white-space: nowrap; }
/* Срок отправки — вторичная информация: в сетке карточек он переносился
   на 2–3 строки и сдвигал кнопки. Показываем его в карточке товара. */
.card .stock em { display: none; }
.card .stock.off { color: var(--text-2); }
.card .cta { display: flex; gap: 8px; margin-top: 10px; }
.card .cta .buy { flex: 1; min-height: 44px; padding: 12px 14px; font-size: 14.5px; }

/* Точка статуса — graphite, не зелёная */
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--status);
  display: inline-block; flex-shrink: 0; transform: translateY(-1px);
}
.dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* Компактный вариант — те же поля, меньше плотность */
.card-compact { padding: 12px; gap: 7px; }
.card-compact .nm { font-size: 14px; -webkit-line-clamp: 2; min-height: calc(2 * 1.34 * 14px); }
.card-compact .price { font-size: 18px; }
.card-compact .chips, .card-compact .program { display: none; }

/* Chips характеристик */
.chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; }
.chip {
  font-family: var(--mono); font-size: 11.5px; background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: 5px; padding: 4px 8px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* В карточках характеристики — справочные: тише и максимум две строки,
   чтобы высота карточек в ряду не прыгала. */
.card:not(.card-compact) .chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 50px; overflow: hidden; align-content: flex-start; min-height: 22px; }
.card .chip { font-size: 11px; color: var(--text-2); background: transparent; padding: 3px 7px; }
.band-white .chip { background: var(--surface); }

/* ── Сетки ──────────────────────────────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.g6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .g6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.info-card { background: var(--surface); border-radius: var(--r-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.info-card span { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.info-dl { margin: 0; display: grid; gap: 0; max-width: 720px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.info-dl > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); }
.info-dl > div:last-child { border-bottom: none; }
.info-dl dt { font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.info-dl dd { margin: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.info-dl a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 620px) { .info-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Лента «Новое поступление»: плотные карточки, одна кнопка без иконок. */
.g6 .card { padding: 12px; gap: 7px; }
.g6 .card .cta .icon-btn { display: none; }
.g6 .card .price { font-size: 17px; }
.g6 .card .nm { font-size: 14px; }
.why-list { display: flex; flex-direction: column; gap: 12px; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Хлебные крошки ─────────────────────────────────────────────────────── */
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); font-weight: 600; }

/* ── Карточки «Что нужно решить?» ───────────────────────────────────────
   Signature block проекта. Пиктограммы контрастнее, но остаются graphite. */
.task-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px; display: flex; flex-direction: column; gap: 10px; position: relative;
  height: 100%; overflow: hidden; isolation: isolate;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.task-card::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--task-bg); background-size: cover; background-position: center;
  transform: scale(1.01); transition: transform 500ms var(--ease), filter var(--t) var(--ease);
}
.task-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.96) 46%, rgba(255,255,255,0.78) 68%, rgba(255,255,255,0.18) 100%);
}
.task-card > * { z-index: 1; }
.task-vehicle  { --task-bg: url('../../img/tasks/task-vehicle-v1.webp'); }
.task-facility { --task-bg: url('../../img/tasks/task-facility-v1.webp'); }
.task-uav      { --task-bg: url('../../img/tasks/task-uav-v1.webp'); }
.task-armor    { --task-bg: url('../../img/tasks/task-armor-v1.webp'); }
.task-signal   { --task-bg: url('../../img/tasks/task-signal-v1.webp'); }
.task-supply   { --task-bg: url('../../img/tasks/task-supply-v1.webp'); }
.task-card:hover { border-color: var(--ink); box-shadow: var(--shadow-2); transform: translateY(-2px); color: var(--text); }
.task-card:hover::before { transform: scale(1.045); filter: saturate(1.04); }
.task-card .num {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--ink); text-transform: uppercase;
}
.task-card .num i { font-style: normal; color: var(--muted); font-weight: 400; }
.task-card .ttl { font-size: 17.5px; font-weight: 700; line-height: 1.3; max-width: 76%; }
.task-card .sub { font-size: 14px; color: var(--text-2); line-height: 1.5; max-width: 72%; }
.task-card .go { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: auto; padding-top: 8px; display: inline-flex; gap: 7px; }
.task-card .go i { font-style: normal; transition: transform var(--t-fast) var(--ease); }
.task-card:hover .go i { transform: translateX(3px); }

/* На графитовой секции светлые фотокарточки читаются как самостоятельные
   интерактивные объекты и больше не растворяются в фоне страницы. */
.home-tasks .task-card {
  color: var(--ink); border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 28px rgba(17, 24, 32, 0.18);
}
.home-tasks .task-card:hover {
  color: var(--ink); border-color: var(--on-dark-3);
  box-shadow: 0 16px 34px rgba(17, 24, 32, 0.28);
}

/* ── Категории ──────────────────────────────────────────────────────────── */
.cat-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.cat-card .pic { display: block; aspect-ratio: 4 / 3; position: relative; }
.cat-card .body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px; }
.cat-card .t { font-size: 16.5px; font-weight: 700; }
.cat-card .s { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.cat-card .cat-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 6px; }
.cat-card .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cat-card .go { font-family: var(--mono); font-size: 13px; color: var(--ink); transition: transform var(--t-fast) var(--ease); display: inline-block; }
.cat-card:hover .go { transform: translateX(3px); }

/* ── Комплекты ──────────────────────────────────────────────────────────── */
.kit { background: var(--surface); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.kit-head { min-height: 58px; }
.kit-visual {
  position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--line-soft);
  background: var(--photo-bg);
}
.kit-visual .img-slot { position: absolute; inset: 0; }
.kit-visual img { padding: 0; object-fit: cover; transition: transform 320ms var(--ease); }
.kit-visual:hover img { transform: scale(1.025); }
.kit-items { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.kit-items a { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--ink-2); min-height: 30px; padding: 3px 0; }
.kit-items .kn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-items .kp { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.kit-items a:hover { color: var(--text); }
.kit-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kit-foot .new { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.kit-foot .lbl { font-size: 13px; color: var(--text-2); flex: 1 1 140px; }

/* ── Световые главы главной ────────────────────────────────────────────
   Секции остаются частью одной тёплой палитры, но получают разную глубину.
   Карточка всегда отделена от полотна минимум двумя признаками: тоном,
   линией или мягкой тенью. */
.home-top {
  border-block: 1px solid var(--line-soft);
}
.home-promo { padding: 0; background: var(--ink); }
.home-promo + .home-top { padding-top: 56px; }
.home-promo-card {
  min-height: 260px; border-block: 1px solid var(--line-dark);
  position: relative; overflow: hidden; isolation: isolate; background: var(--ink);
}
.home-promo-card > img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; filter: saturate(0.82) contrast(1.02);
}
.home-promo-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(17, 24, 32, 0.98) 0%, rgba(17, 24, 32, 0.91) 36%, rgba(17, 24, 32, 0.40) 64%, rgba(17, 24, 32, 0.10) 100%);
}
.home-promo-frame { min-height: 260px; display: flex; align-items: center; position: relative; z-index: 2; }
.home-promo-content {
  width: min(900px, 76%); padding-block: 30px; position: relative;
  display: grid; grid-template-columns: minmax(320px, 1fr) auto;
  grid-template-rows: auto auto auto; column-gap: 56px; align-items: center;
  color: var(--on-dark);
}
.home-promo-content > .mono { grid-column:1;grid-row:1;color: var(--on-dark-3); font-size: 11px; letter-spacing: 0.15em; }
.home-promo-content h2 {
  grid-column:1;grid-row:2;
  color: var(--on-dark); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.12;
  letter-spacing: -0.018em; margin: 10px 0 16px;
}
.home-promo-copy { grid-column:1;grid-row:3;margin:0;color:var(--on-dark-2);font-size:13.5px;line-height:1.5; }
.home-promo-copy span { display:block; }
.home-promo-copy span + span { margin-top:3px; }
.home-promo-cta { grid-column:2;grid-row:2;min-width:380px;min-height:54px;padding:16px 28px;font-size:16px; }
@media (max-width: 760px) {
  .home-promo { padding-top: 0; }
  .home-promo + .home-top { padding-top: 44px; }
  .home-promo-card { min-height: 390px; }
  .home-promo-card > img { object-position: 68% center; }
  .home-promo-shade { background: linear-gradient(180deg, rgba(17, 24, 32, 0.78), rgba(17, 24, 32, 0.97)); }
  .home-promo-frame { min-height: 390px; align-items: flex-end; }
  .home-promo-content { width:100%;padding-block:26px;display:grid;grid-template-columns:1fr;grid-template-rows:auto;column-gap:0; }
  .home-promo-content > .mono,.home-promo-content h2,.home-promo-copy,.home-promo-cta { grid-column:1;grid-row:auto; }
  .home-promo-cta { width:100%;min-width:0;margin-top:18px; }
}
.home-top .card {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--line);
  box-shadow: 0 6px 22px rgba(17, 24, 32, 0.065);
}
.home-top .card .ph { border: 1px solid var(--line-soft); }

.home-cats {
  border-block: 1px solid var(--line);
}
.home-cats .cat-card {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: 0 10px 28px rgba(17, 24, 32, 0.11);
}
.home-cats .cat-card:hover {
  border-color: var(--ink-3);
  box-shadow: 0 16px 38px rgba(17, 24, 32, 0.15);
}
.home-cats .cat-card .pic {
  background: var(--photo-bg);
  border-bottom: 1px solid var(--line);
}

.home-fresh {
  background-color: var(--ink-2);
  background-image:
    linear-gradient(110deg, rgba(17, 24, 32, 0.52), rgba(32, 42, 52, 0.34)),
    url('../../img/ui/dark-tech-pattern-v1.webp');
  background-size: auto, 520px 520px;
  background-position: center, center 38%;
  border-block: 1px solid var(--line-dark-2);
  color: var(--on-dark);
}
.home-fresh h2,
.home-fresh .sec-index b,
.home-fresh .act { color: var(--on-dark); }
.home-fresh .sec-index { color: var(--on-dark-3); }
.home-fresh .sec-index s { color: var(--line-dark-2); }
.home-fresh .card {
  background: var(--row-alt);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(17, 24, 32, 0.18);
  backdrop-filter: blur(3px);
}
.home-fresh .card .nm { color: var(--ink); }
.home-fresh .card:hover {
  background: var(--surface);
  border-color: var(--on-dark-3);
  box-shadow: 0 14px 34px rgba(17, 24, 32, 0.28);
}
.home-fresh .card .ph { border: 1px solid var(--line-soft); }

.home-kits {
  border-block: 1px solid var(--line);
}
.home-kits .kit {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: 0 7px 24px rgba(17, 24, 32, 0.06);
}
.home-kits .kit-items {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(238, 240, 239, 0.52);
}

/* ── Бренды партнёров: бесшовная лента под hero ────────────────────────
   Две равные группы движутся на половину общей ширины. Наведение мыши или
   переход к логотипу с клавиатуры останавливает ленту. */
.brand-marquee {
  width: 100%; overflow: hidden; background: var(--surface);
  border-block: 1px solid var(--line-soft);
}
.brand-marquee-track {
  display: flex; width: max-content; will-change: transform;
  animation: brand-marquee-move 34s linear infinite;
}
.brand-marquee:hover .brand-marquee-track,
.brand-marquee:focus-within .brand-marquee-track { animation-play-state: paused; }
.brand-marquee-group {
  display: flex; align-items: center; flex-shrink: 0;
  gap: clamp(56px, 6vw, 116px);
  padding: 27px clamp(34px, 4.5vw, 86px);
}
.brand-marquee-group a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 132px; height: 25px; color: var(--ink-2);
  opacity: 0.62;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.brand-marquee-group a:hover,
.brand-marquee-group a:focus-visible { opacity: 1; color: var(--ink-2); transform: translateY(-1px); }
.brand-marquee-group svg { height: 100%; width: auto; display: block; fill: currentColor; }
@keyframes brand-marquee-move {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee { overflow-x: auto; }
  .brand-marquee-track { animation: none; transform: none; }
  .brand-marquee-group[aria-hidden="true"] { display: none; }
}

/* ── База знаний ────────────────────────────────────────────────────────── */
.kb-card { padding: 0; overflow: hidden; gap: 0; }
.kb-card .pic { display: block; aspect-ratio: 16 / 10; position: relative; }
.kb-card .body { display: flex; flex-direction: column; gap: 9px; padding: 20px; }
.kb-card .t { font-size: 17px; font-weight: 700; line-height: 1.35; }
.kb-card .m { display: flex; gap: 8px; align-items: baseline; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* Редакционные блоки главной: тёмная карточка о компании, медиа и Telegram. */
.home-about-card { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-dark-2);border-radius:16px;overflow:hidden;background:var(--ink-2); }
.home-about-copy { padding:clamp(30px,4vw,58px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center; }
.home-about-copy > .mono { color:var(--on-dark-3);font-size:11px;letter-spacing:.14em;margin-bottom:18px; }
.home-about-copy .home-about-title { font-family:var(--sans);font-weight:700;color:var(--on-dark);max-width:none;font-size:clamp(27px,2.65vw,39px);line-height:1.12;letter-spacing:-.025em;margin:0 0 22px; }
.home-about-copy .home-about-title span { display:block;white-space:nowrap; }
.home-about-copy p { color:var(--on-dark-2);font-size:15.5px;line-height:1.7;margin:0 0 14px;max-width:620px; }
.home-about-copy .btn { margin-top:14px; }
.home-about-visual { margin:0;min-height:480px; }
.home-about-visual img { width:100%;height:100%;object-fit:cover;display:block; }
.home-about-benefits { grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-dark-2); }
.home-about-benefit { display:grid;grid-template-columns:38px 1fr;gap:15px;padding:24px clamp(24px,3vw,40px);border-bottom:1px solid var(--line-dark-2); }
.home-about-benefit:nth-child(odd) { border-right:1px solid var(--line-dark-2); }
.home-about-benefit:nth-last-child(-n+2) { border-bottom:0; }
.home-about-benefit > .mono { color:var(--accent);font-size:11px;letter-spacing:.1em;padding-top:3px; }
.home-about-benefit strong { display:block;color:var(--on-dark);font-size:15.5px;margin-bottom:5px; }
.home-about-benefit p { color:var(--on-dark-2);font-size:13.5px;line-height:1.55;margin:0; }
.home-editorial-lead { color:var(--text-2);margin:9px 0 0;max-width:650px;line-height:1.55; }
.home-blog-placeholder { display:grid;grid-template-columns:130px minmax(250px,.8fr) minmax(300px,1.2fr) 28px;align-items:center;gap:24px;padding:28px 30px;border:1px solid var(--line);border-radius:14px;background:var(--surface); }
.home-blog-placeholder > .mono { font-size:11px;letter-spacing:.14em;color:var(--muted); }
.home-blog-placeholder strong { font-size:19px; }
.home-blog-placeholder > span:not(.mono) { color:var(--text-2);font-size:14px;line-height:1.55; }
.home-blog-placeholder i { font-style:normal;font-size:24px; }
.home-media-head { margin-bottom:24px; }
.home-media-head p { margin:9px 0 0;color:var(--text-2);line-height:1.55; }
.home-media-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px; }
.home-media-card { min-width:0;display:flex;flex-direction:column;padding:20px;border:1px solid var(--line-dark-2);border-radius:14px;background:var(--ink-2);color:var(--on-dark);box-shadow:0 8px 24px rgba(17,24,32,.08);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); }
.home-media-card:hover { color:var(--on-dark);transform:translateY(-3px);border-color:rgba(255,255,255,.23);box-shadow:0 16px 34px rgba(17,24,32,.16); }
.home-media-card:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.home-media-meta { display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--on-dark-3); }
.home-media-card > strong { min-height:4.1em;margin:15px 0 18px;font-size:16px;line-height:1.36; }
.home-media-cover { aspect-ratio:16/10;position:relative;display:block;overflow:hidden;margin-top:auto;border-radius:9px;background:var(--ink); }
.home-media-cover img { width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .45s var(--ease); }
.home-media-card:hover .home-media-cover img { transform:scale(1.035); }
.home-media-play { position:absolute;inset:50% auto auto 50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(17,24,32,.74);color:var(--on-dark);backdrop-filter:blur(5px); }
.home-media-open { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:12.5px;color:var(--on-dark-2); }
.home-media-open i { font-style:normal;font-size:16px;color:var(--accent); }
.home-telegram { padding-bottom:clamp(24px,3vw,40px);background:var(--stone); }
.home-telegram-card { min-height:300px;position:relative;overflow:hidden;background:var(--ink); }
.home-telegram-card > img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;opacity:.46; }
.home-telegram-shade { position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,24,32,.98) 0%,rgba(17,24,32,.82) 53%,rgba(17,24,32,.6) 100%); }
.home-telegram-frame { min-height:300px;position:relative;z-index:1;display:grid;grid-template-columns:64px minmax(280px,1fr) auto;align-items:center;gap:28px;color:var(--on-dark); }
.home-telegram-icon { width:62px;height:62px;border:1px solid var(--line-dark-2);border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center; }
.home-telegram-copy > .mono { display:block;color:var(--on-dark-3);font-size:11px;letter-spacing:.14em;margin-bottom:12px; }
.home-telegram-copy h2 { font-size:clamp(27px,3vw,40px);line-height:1.1;margin:0 0 12px; }
.home-telegram-copy p { color:var(--on-dark-2);margin:0;line-height:1.55; }
@media (max-width:860px) {
  .home-about-card { grid-template-columns:1fr; }
  .home-about-visual { min-height:320px;order:-1; }
  .home-about-copy .home-about-title span { white-space:normal; }
  .home-about-benefits { grid-template-columns:1fr; }
  .home-about-benefit:nth-child(odd) { border-right:0; }
  .home-about-benefit:nth-last-child(2) { border-bottom:1px solid var(--line-dark-2); }
  .home-blog-placeholder { grid-template-columns:1fr;gap:14px; }
  .home-blog-placeholder i { display:none; }
  .home-telegram-frame { grid-template-columns:52px 1fr;padding-block:34px; }
  .home-telegram-icon { width:52px;height:52px; }
  .home-telegram-frame .btn { grid-column:1/-1;width:100%; }
}
@media (max-width:1180px) {
  .home-media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-media-card > strong { min-height:2.75em; }
}
@media (max-width:620px) {
  .home-media-head { align-items:flex-start; }
  .home-media-grid { display:flex;gap:12px;margin-inline:calc(var(--page-pad) * -1);padding-inline:var(--page-pad);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--page-pad);scrollbar-width:none; }
  .home-media-grid::-webkit-scrollbar { display:none; }
  .home-media-card { flex:0 0 min(84vw,340px);padding:16px;scroll-snap-align:start; }
  .home-media-card > strong { min-height:4.1em;margin-block:13px 16px;font-size:15px; }
  .home-telegram { padding-bottom:20px; }
}
.blog-hero .page,.legal-hero .page { margin:12px 0 16px; }
.blog-list { min-height:360px; }
.blog-empty { padding:clamp(28px,5vw,64px);border:1px solid var(--line);border-radius:16px;background:var(--surface);max-width:820px; }
.blog-empty > .mono { color:var(--muted);font-size:11px;letter-spacing:.14em; }
.blog-empty h2 { font-size:clamp(24px,3vw,34px);margin:14px 0 12px; }
.blog-empty p { color:var(--text-2);line-height:1.65;margin:0 0 24px; }
.blog-list-card { padding:28px 0;border-bottom:1px solid var(--line); }
.blog-list-card > .mono,.blog-list-card footer { font-size:11px;color:var(--muted);letter-spacing:.1em; }
.blog-list-card h2 { font-size:26px;margin:10px 0; }
.blog-list-card p { color:var(--text-2);line-height:1.6; }
.legal-copy { max-width:920px;font-size:15.5px;line-height:1.75; }
.legal-copy h2 { font-size:clamp(22px,2.5vw,30px);margin:46px 0 14px; }
.legal-copy h2:first-child { margin-top:0; }
.legal-copy h3 { font-size:18px;margin:28px 0 10px; }
.legal-copy p { margin:0 0 14px; }
.legal-copy ol { padding-left:24px;margin:0; }
.legal-copy li { padding-left:8px;margin-bottom:18px; }
.legal-details { margin-top:18px; }

/* ── Плавающая панель сравнения ─────────────────────────────────────────── */
.cmp-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 150;
  background: var(--ink); color: var(--on-dark); border-radius: 12px;
  box-shadow: var(--shadow-3);
  padding: 12px 14px 12px 20px; display: flex; align-items: center; gap: 16px; max-width: 92vw;
}
.cmp-bar span { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cmp-bar button.clear { border: none; background: transparent; color: var(--on-dark-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.cmp-bar button.clear:hover { color: var(--on-dark); }

.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 12px);
  background: var(--ink); color: var(--on-dark); border-radius: 10px; padding: 13px 20px;
  font-size: 14px; font-weight: 600; z-index: 300; opacity: 0;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  pointer-events: none; max-width: 90vw;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── Состояния: loading / skeleton / empty / error / success ─────────────── */
.empty {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 56px 24px; text-align: center;
}
.empty .t { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.empty .s { font-size: 14.5px; color: var(--text-2); margin-bottom: 24px; line-height: 1.55; }
.empty .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.sk { background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
.sk-line, .sk-box {
  background: linear-gradient(90deg, var(--stone) 0%, var(--shine) 50%, var(--stone) 100%);
  background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: 5px;
}
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-card { background: var(--surface); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sk-card .sk-box { aspect-ratio: 1/1; border-radius: var(--r-sm); }
.sk-card .sk-line { height: 12px; }
.sk-card .sk-line.w60 { width: 60%; }
.sk-card .sk-line.w40 { width: 40%; }
.sk-card .sk-line.tall { height: 22px; width: 50%; }

.notice {
  border-radius: var(--r-sm); padding: 12px 16px; font-size: 13.5px; line-height: 1.5;
  background: var(--stone); color: var(--ink-2); border: 1px solid var(--line);
}
.notice-warn { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.notice-info { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.notice a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.state-success { text-align: center; padding: 28px 0; }
.state-success .ic {
  width: 56px; height: 56px; border-radius: 50%; background: var(--stone); color: var(--ink);
  font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.state-success .num { font-family: var(--mono); font-size: 13px; color: var(--text-2); margin-top: 10px; }

/* ── Модальное окно ─────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(17, 24, 32, 0.55);
}
.modal-box {
  background: var(--surface); border-radius: 14px; max-width: 560px; width: 100%;
  max-height: 86vh; overflow: auto; padding: 28px; box-shadow: var(--shadow-3);
}
.modal-box h3 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.modal-box .close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--text-2);
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.modal-list { display: flex; flex-direction: column; gap: 14px; }
.modal-list .row { display: flex; gap: 14px; }
.modal-list .row .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); width: 128px; flex-shrink: 0; padding-top: 2px; }
.modal-list .row .v { font-size: 14.5px; line-height: 1.55; }

/* ── Документы ──────────────────────────────────────────────────────────── */
.doc-row {
  display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: 15px 18px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.doc-row:hover { border-color: var(--line); box-shadow: var(--shadow-1); color: var(--text); }
.doc-row .ic {
  width: 38px; height: 46px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-2);
}
.doc-row .t { font-size: 14.5px; font-weight: 700; display: block; }
.doc-row .m { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 3px; display: block; }
.doc-row .go { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.band-light .doc-row { background: var(--surface); }

/* ── Каталог ────────────────────────────────────────────────────────────── */
.ct-head { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 26px; }
.ct-head .lead { max-width: 640px; margin: 12px 0 0; font-size: 15.5px; }
.ct-helper {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 260px;
}
.ct-helper .t { font-size: 14.5px; font-weight: 700; }

.ct-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.ct-tab {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.ct-tab i { font-family: var(--mono); font-style: normal; font-size: 11.5px; color: var(--muted); }
.ct-tab:hover { border-color: var(--ink); }
.ct-tab.on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 700; }
.ct-tab.on i { color: var(--on-dark-3); }

.ct-side { width: 272px; flex-shrink: 0; position: sticky; top: calc(var(--hd-now, var(--hd-sticky-h)) + 16px); align-self: flex-start; transition: top var(--t) var(--ease); }
.ct-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; display: flex; flex-direction: column; gap: 20px;
  max-height: calc(100vh - var(--hd-now, var(--hd-sticky-h)) - 40px); overflow: auto;
}
.ct-block + .ct-block { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.ct-blocktitle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; display: flex; justify-content: space-between; gap: 8px;
}
.ct-opts { display: flex; flex-direction: column; gap: 9px; }
.ct-opts.scroll { max-height: 216px; overflow: auto; padding-right: 4px; }
.ct-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; min-height: 24px; }
.ct-opt input { width: 16px; height: 16px; flex-shrink: 0; }
.ct-opt span { flex: 1; }
.ct-opt i { font-family: var(--mono); font-style: normal; font-size: 11.5px; color: var(--muted); }
.ct-opt.dim { color: var(--muted); }

.ct-active { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ct-pill {
  display: inline-flex; align-items: center; gap: 8px; background: var(--stone);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 8px 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.ct-pill:hover { border-color: var(--ink); }
.ct-pill b { font-weight: 600; }
.ct-pill em { font-style: normal; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 3px; }

.ct-apply { display: none; }
.ct-filterbtn {
  display: none; align-items: center; gap: 8px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--r-sm); min-height: 44px; padding: 0 16px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.ct-filterbtn b { font-family: var(--mono); background: var(--ink); color: var(--on-dark); border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.ct-mobonly { display: none; }
.ct-sort {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer;
}
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ct-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* ── Страница товара ────────────────────────────────────────────────────── */
.pd-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: start; }
.pd-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* Галерея: подложку задаёт интерфейс, товар внутри — contain */
.pd-main {
  position: relative; aspect-ratio: 4 / 3.2; background: var(--photo-bg);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: zoom-in;
}
.pd-mainbtn {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: zoom-in; display: block; border-radius: 14px;
}
.pd-mainbtn > span { position: absolute; inset: 0; display: block; }
.pd-mainbtn:focus-visible { outline-offset: -4px; }
.pd-main .zoom {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line); border-radius: var(--r-sm); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; color: var(--ink); pointer-events: none;
}
.pd-galhint { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.pd-ident {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 6px;
}
.pd-ident b { color: var(--ink-2); font-weight: 600; }
.pd-title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; margin: 0 0 18px; letter-spacing: -0.018em; line-height: 1.22; overflow-wrap: anywhere; }
dl.spec-grid, dl.pd-specs { margin-top: 0; }
.spec-tile dt, .spec-tile dd, .pd-specs dt, .pd-specs dd { margin: 0; }
.pd-fresh { margin: -12px 0 18px; }
.pd-note { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.pd-kit { padding-left: 20px; margin: 0; }
.pd-docs { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.pd-reviews { display: grid; gap: 14px; max-width: 820px; }
.rv-card { background: var(--surface); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.rv-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.rv-card footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.rv-card footer a { font-size: 12px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.rv-stars { letter-spacing: 2px; font-size: 13px; }

/* Нижняя часть карточки: контент + компактная липкая колонка помощи
   на широких экранах. Покупку она не дублирует — цена и кнопка уже
   есть в локальной навигации. */
.pd-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.pd-aside { display: none; }
@media (min-width: 1240px) {
  .pd-lower { grid-template-columns: minmax(0, 1fr) 280px; }
  .pd-aside { display: block; padding-top: 40px; }
  .pd-aside-in {
    position: sticky; top: calc(var(--hd-now, var(--hd-sticky-h)) + 84px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 20px; display: flex; flex-direction: column; gap: 8px;
  }
  .pd-aside .t { font-size: 16px; font-weight: 700; }
  .pd-aside p { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 4px; }
  .pd-aside .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .pd-aside .ph { font-size: 16px; font-weight: 600; }
  .pd-aside .meta { line-height: 1.45; }
  .pd-aside .sep { border-top: 1px solid var(--line-soft); margin: 8px 0; }
}
.pd-marks { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; gap: 6px; }
.pd-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.pd-thumb {
  aspect-ratio: 1 / 1; position: relative; background: var(--photo-bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; cursor: pointer; padding: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.pd-thumb:hover { border-color: var(--muted); }
.pd-thumb.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.lightbox {
  position: fixed; inset: 0; z-index: 500; background: rgba(17, 24, 32, 0.94);
  display: flex; flex-direction: column;
}
.lightbox .stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 72px; min-height: 0; }
.lightbox .stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06);
  color: var(--on-dark); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox .nav.prev { left: 16px; }
.lightbox .nav.next { right: 16px; }
.lightbox .close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--on-dark); cursor: pointer; z-index: 2; }
.lightbox .strip { display: flex; gap: 8px; justify-content: center; padding: 14px; flex-wrap: wrap; }
.lightbox .strip button { width: 56px; height: 56px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); padding: 4px; cursor: pointer; }
.lightbox .strip button.on { border-color: var(--accent); }
.lightbox .strip img { width: 100%; height: 100%; object-fit: contain; }
.lightbox .counter { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; font-family: var(--mono); font-size: 12px; color: var(--on-dark-3); }

/* Key specs — стандартизированные плитки */
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.spec-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; min-width: 0;
}
.spec-tile .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; }
.spec-tile .v { font-size: 14px; font-weight: 700; margin-top: 5px; display: block; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }

.pd-price { font-family: var(--mono); font-size: 38px; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
.pd-program { font-size: 14px; color: var(--text-2); margin: 10px 0 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.pd-program b { font-family: var(--mono); color: var(--ink-2); font-weight: 600; }
.pd-program .why {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  font-size: 11px; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; line-height: 1; padding: 0;
}
.pd-stock { font-size: 14.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 20px; display: flex; gap: 8px; align-items: baseline; }
.pd-stock em { font-style: normal; font-weight: 500; color: var(--text-2); }

.pd-buybox { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.pd-buyrow { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-buyrow .btn { flex: 1 1 180px; }
.pd-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-btn); height: 52px; flex-shrink: 0; }
.pd-qty button { width: 44px; height: 100%; border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--text-2); }
.pd-qty button:hover { color: var(--ink); }
.pd-qty span { width: 40px; text-align: center; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.pd-trust { border-top: 1px solid var(--line-soft); padding: 14px 0 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pd-trust li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.pd-trust .mono { color: var(--muted); }

.pd-b2b {
  background: var(--ink-2); border-radius: var(--r-card); padding: 18px 22px; margin-top: 14px;
  display: flex; align-items: center; gap: 16px; color: var(--on-dark); flex-wrap: wrap;
}

/* Локальная навигация карточки */
.pd-localnav {
  position: sticky; top: var(--hd-now, var(--hd-sticky-h)); z-index: 80; background: var(--bg);
  transition: top var(--t) var(--ease);
  border-bottom: 1px solid var(--line); margin-top: 56px;
}
.pd-localnav .in { display: flex; align-items: stretch; gap: 4px; min-height: 60px; }
/* overflow-y: hidden — иначе ссылки с margin-bottom:-1px дают вертикальную
   прокрутку, и Windows рисует у цены стрелки скроллбара. Горизонтальная
   прокрутка остаётся: Tab по ссылкам сам докручивает активную в видимую
   область. Полосу прячем — ряд читается как вкладки, а не как контейнер. */
.pd-localnav .tabs {
  display: flex; align-items: flex-end; gap: 2px; flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
.pd-localnav .tabs::-webkit-scrollbar { display: none; }
.pd-localnav a {
  padding: 12px 16px; font-size: 14.5px; font-weight: 600; color: var(--text-2);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pd-localnav a:hover { color: var(--text); }
.pd-localnav a.on { color: var(--ink); border-bottom-color: var(--ink); }
.pd-localnav .buy { display: flex; align-items: center; align-self: center; gap: 14px; flex-shrink: 0; padding-left: 16px; }
.pd-localnav .buy .p { font-family: var(--mono); font-size: 17px; font-weight: 600; white-space: nowrap; }

.pd-sec { padding: 40px 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: calc(var(--hd-sticky-h) + 60px); }
.pd-sec:last-of-type { border-bottom: none; }
.pd-sec h2 { font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.pd-body { max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.pd-body h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; color: var(--text); }
.pd-body ul { margin: 0 0 14px; padding-left: 20px; }
.pd-body li { margin-bottom: 6px; }

.pd-specs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; max-width: 820px; }
.pd-specs .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); }
.pd-specs .row:last-child { border-bottom: none; }
.pd-specs .row:nth-child(odd) { background: var(--row-alt); }
.pd-specs .k { font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.pd-specs .v { font-size: 14px; font-weight: 600; text-align: right; }

.pd-compat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pd-faq { max-width: 820px; }
.pd-faq details { border-bottom: 1px solid var(--line-soft); }
.pd-faq summary { font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; padding: 12px 0; }
.pd-faq details[open] p { padding-bottom: 14px; }
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after { content: '+'; font-family: var(--mono); color: var(--muted); }
.pd-faq details[open] summary::after { content: '−'; }
.pd-faq p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Мобильная панель покупки */
.pd-mobbuy { display: none; }

/* ── Сравнение ──────────────────────────────────────────────────────────── */
/* Таблица прокручивается внутри себя — тогда строка с названиями остаётся
   на виду и по горизонтали, и по вертикали. */
.cmp-wrap {
  overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
}
.cmp-inner { min-width: fit-content; }
.cmp-row { display: grid; border-bottom: 1px solid var(--line-soft); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row.sticky-top { position: sticky; top: 0; z-index: 20; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.cmp-head { position: sticky; left: 0; background: var(--surface); padding: 20px; z-index: 1; }
.cmp-cell { padding: 14px 20px; font-size: 14px; border-left: 1px solid var(--line-soft); }
.cmp-label { padding: 14px 20px; font-size: 13px; font-weight: 700; color: var(--text-2); position: sticky; left: 0; background: inherit; z-index: 1; }
.cmp-row.diff { background: var(--stone); }
.cmp-row.diff .cmp-cell { font-weight: 700; }
.cmp-row.diff .cmp-label { background: var(--stone); }
.cmp-prod { padding: 20px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line-soft); background: var(--surface); }
.cmp-prod .pic { height: 130px; position: relative; }

/* ── Оформление заказа ──────────────────────────────────────────────────── */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.co-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.co-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.co-h { font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.co-radio { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-btn); padding: 14px 16px; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.co-radio:hover { border-color: var(--ink-2); }
.co-radio.on { border-color: var(--ink); background: var(--stone); }
.co-radio input { width: 16px; height: 16px; }
.co-radio b { display: block; font-size: 14.5px; font-weight: 700; }
.co-radio small { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.co-line { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.co-line .pic { width: 64px; height: 64px; position: relative; flex-shrink: 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.co-sum { display: flex; justify-content: space-between; font-size: 14px; }
.co-toggle { display: flex; background: var(--bg); border-radius: var(--r-sm); padding: 3px; }
.co-toggle button { border: none; border-radius: 6px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; background: transparent; color: var(--text-2); min-height: 38px; }
.co-toggle button.on { background: var(--ink); color: var(--on-dark); }
.co-aside { position: sticky; top: calc(var(--hd-now, var(--hd-sticky-h)) + 16px); transition: top var(--t) var(--ease); }

/* ── B2B ────────────────────────────────────────────────────────────────── */
.bb-hero-band { position:relative;overflow:hidden;background-color:var(--ink);background-image:linear-gradient(90deg,rgba(17,24,32,.98) 0%,rgba(17,24,32,.9) 48%,rgba(17,24,32,.72) 100%),url('../../img/hero/generated/hero-reb-v2.webp');background-size:cover;background-position:center; }
.bb-hero { position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:start; }
.bb-hero-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:24px;border-top:1px solid var(--line-dark); }
.bb-hero-stat { min-height:92px;padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(17,24,32,.46);backdrop-filter:blur(5px); }
.bb-hero-stat .mono { font-size:17px;font-weight:600;line-height:1.2; }
.bb-hero-stat span { display:block;font-size:11.5px;color:var(--on-dark-2);line-height:1.4;margin-top:6px; }
.bb-supply-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.bb-supply-card { min-height:270px;padding:28px; }
.bb-supply-grid.tone-cards .bb-supply-card::after,
html[data-theme="dark"] .bb-supply-grid.tone-cards .bb-supply-card::after {
  background:linear-gradient(90deg,rgba(var(--tc-rgb),.99) 0%,rgba(var(--tc-rgb),.97) 42%,rgba(var(--tc-rgb),.78) 60%,rgba(var(--tc-rgb),.12) 100%);
}
.bb-supply-card .ttl { max-width:58%;font-size:22px; }
.bb-supply-card .sub { max-width:58%;font-size:14.5px;line-height:1.55; }
.bb-supply-foot { display:flex;align-items:center;gap:14px;margin-top:auto;max-width:72%;padding-top:18px;font-size:12px; }
.bb-supply-foot b { padding:6px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;white-space:nowrap; }
.bb-supply-foot > span { display:inline-flex;align-items:center;gap:7px;font-weight:700; }
.bb-supply-foot i { font-style:normal;transition:transform var(--t-fast) var(--ease); }
.bb-supply-card:hover .bb-supply-foot i { transform:translateX(3px); }
.bb-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dropzone {
  border: 1.5px dashed var(--line); border-radius: var(--r-card); padding: 28px 20px;
  text-align: center; cursor: pointer; background: var(--bg);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dropzone:hover, .dropzone.over { border-color: var(--ink); background: var(--stone); }
.dropzone.filled { border-style: solid; border-color: var(--line); background: var(--surface); text-align: left; }
.dropzone .t { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.dropzone .s { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dropzone .files { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; text-align: left; }
.dropzone .file { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 6px; padding: 8px 10px; }
.dropzone .bar { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.dropzone .bar i { display: block; height: 100%; background: var(--ink); width: 100%; }

.bb-case { background: var(--surface); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.bb-case .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bb-case .rows { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.bb-case .rows div { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.45; }
.bb-case .rows b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); width: 96px; flex-shrink: 0; font-weight: 500; padding-top: 2px; }

.bb-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.bb-step { position: relative; min-height: 220px; padding: 24px; background: rgba(255,255,255,.88); border: 1px solid var(--line); }
.bb-step:first-child { border-radius: var(--r-card) 0 0 var(--r-card); }
.bb-step:last-child { border-radius: 0 var(--r-card) var(--r-card) 0; }
.bb-step + .bb-step { border-left: 0; }
.bb-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.bb-step-head span { display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--on-dark);font-weight:600; }
.bb-step-head i { height: 1px; flex: 1; background: repeating-linear-gradient(90deg,var(--line-strong) 0 8px,transparent 8px 13px); }
.bb-step h3 { font-size: 17px; margin-bottom: 10px; }
.bb-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.bb-docs { border-block: 1px solid var(--line); }
.bb-docs-card { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;padding:38px;background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1); }
.bb-docs-card p { max-width: 760px; margin: 14px 0 0; color: var(--text-2); line-height: 1.65; }
.bb-doc-list { gap:14px;margin-top:18px; }

.account-grid { display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start; }
.account-nav,.account-panel { background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:var(--r-card); }
.account-nav { padding:18px;position:sticky;top:calc(var(--hd-now, var(--hd-sticky-h)) + 18px); }
.account-nav a { display:flex;justify-content:space-between;padding:12px 10px;border-bottom:1px solid var(--line-soft);font-weight:650;font-size:14px; }
.account-panel { padding:28px; }
.account-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0; }
.account-stat { padding:18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg); }
.account-stat b { display:block;font-family:var(--mono);font-size:24px;margin-bottom:4px; }
.account-form { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.account-form .wide { grid-column:1/-1; }
.account-lead { padding:14px 0;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:16px; }

.company-hero-band { background-color:var(--ink);background-image:linear-gradient(90deg,rgba(17,24,32,.97) 0%,rgba(17,24,32,.82) 60%,rgba(17,24,32,.58) 100%),url('../../img/banners/org-equipment-promo-v1.webp');background-size:cover;background-position:center; }
.company-hero { display:grid;grid-template-columns:1fr;gap:42px;align-items:center; }
.company-hero > div:first-child { max-width:900px; }
.company-facts { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.company-fact { border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);padding:20px 22px;background:rgba(17,24,32,.62);backdrop-filter:blur(6px); }
.company-fact b { display:block;color:var(--on-dark);font-family:var(--mono);font-size:17px;margin-bottom:7px; }
.company-fact p { margin:0;color:var(--on-dark-2);font-size:13px;line-height:1.5; }
.company-cards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.company-task-card { min-height:250px;padding:28px; }
.company-task-card .ttl { font-size:20px;max-width:70%; }
.company-task-card .sub { max-width:68%; }
.company-start-card { position:relative;overflow:hidden;background-image:linear-gradient(90deg,rgba(17,24,32,.97) 0%,rgba(17,24,32,.82) 62%,rgba(17,24,32,.68) 100%),url('../../img/hero/generated/hero-optics-v2.webp');background-size:cover;background-position:center 48%;border-color:var(--line-dark-2);box-shadow:var(--shadow-2); }
.company-start-card h2 { color:var(--on-dark); }
.company-start-card p { color:var(--on-dark-2); }

@media (max-width: 980px) {
  .ft-top { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ft-brand { grid-column:1/-1; }
  .bb-process { grid-template-columns:1fr 1fr;gap:12px; }
  .bb-step,.bb-step:first-child,.bb-step:last-child { border:1px solid var(--line);border-radius:var(--r-card); }
  .account-grid,.company-hero { grid-template-columns:1fr; }
  .account-nav { position:static; }
  .company-cards { grid-template-columns:1fr 1fr; }
  .company-facts { grid-template-columns:1fr 1fr; }
  .bb-hero-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
  .bb-supply-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 620px) {
  .bb-process,.account-stats,.account-form,.company-facts,.company-cards { grid-template-columns:1fr; }
  .bb-docs-card { grid-template-columns:1fr;padding:24px;gap:24px; }
  .account-form .wide { grid-column:auto; }
  .bb-supply-card { min-height:260px;padding:22px; }
  .bb-supply-card .ttl { max-width:78%;font-size:19px; }
  .bb-supply-card .sub { max-width:78%;font-size:13.5px; }
  .bb-supply-foot { max-width:100%;flex-wrap:wrap; }
}

/* ── Главная: hero и B2B-блок ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hm-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .hm-b2b { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
}
@media (max-width: 620px) {
  .hm-herotiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* ── Тёмная тема: точечные состояния компонентов ──────────────────────────
   Компоненты, где светлая версия намеренно использует полупрозрачный белый
   или жёсткий --ink, получают читаемый эквивалент на графитовой поверхности. */
html[data-theme="dark"] .hd-cat[aria-expanded="true"],
html[data-theme="dark"] .hd-ico.cart,
html[data-theme="dark"] .hd-ico.cart:hover { color: var(--on-dark); border-color: var(--line-dark-2); }
html[data-theme="dark"] .hd-quick a.q:hover,
html[data-theme="dark"] .hd-quick a.q:focus-visible { color: var(--on-dark); }
html[data-theme="dark"] .btn-tertiary { color: var(--on-dark); border-color: var(--on-dark-3); }
html[data-theme="dark"] .btn-tertiary:hover { background: var(--on-dark); color: var(--ink); }
html[data-theme="dark"] .act,
html[data-theme="dark"] .act:hover,
html[data-theme="dark"] .act-quiet:hover,
html[data-theme="dark"] .cat-card .go,
html[data-theme="dark"] .task-card .num,
html[data-theme="dark"] .task-card .go { color: var(--on-dark); }
html[data-theme="dark"] .icon-btn { color: var(--on-dark); }
html[data-theme="dark"] .icon-btn:hover { color: var(--on-dark); border-color: var(--on-dark-3); }
html[data-theme="dark"] .task-card::after {
  background: linear-gradient(90deg, rgba(17,24,32,0.98) 0%, rgba(17,24,32,0.95) 46%, rgba(17,24,32,0.76) 68%, rgba(17,24,32,0.24) 100%);
}
html[data-theme="dark"] .task-card:hover { border-color: var(--on-dark-3); color: var(--on-dark); }
html[data-theme="dark"] .home-top,
html[data-theme="dark"] .home-fresh,
html[data-theme="dark"] .home-kits { background-image: none; }
html[data-theme="dark"] .band-light,
html[data-theme="dark"] .band-white,
html[data-theme="dark"] .band-stone,
html[data-theme="dark"] .home-cats { background-image:none;background-color:var(--bg); }
html[data-theme="dark"] .home-top .card,
html[data-theme="dark"] .home-fresh .card,
html[data-theme="dark"] .home-fresh .card:hover,
html[data-theme="dark"] .home-kits .kit { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .home-fresh .card .nm,
html[data-theme="dark"] .card .stock,
html[data-theme="dark"] .card .program b { color: var(--on-dark); }
html[data-theme="dark"] .home-kits .kit-items { background: var(--ink-2); }
html[data-theme="dark"] .brand-marquee-group a,
html[data-theme="dark"] .brand-marquee-group a:hover,
html[data-theme="dark"] .brand-marquee-group a:focus-visible { color: var(--on-dark-2); }
html[data-theme="dark"] .band-dark .on-light,
html[data-theme="dark"] .band-dark-2 .on-light { color: var(--text); }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) and (min-width: 861px) {
  .hd-phone, .hd-actions .hd-ico:not(.hd-pref):not(.cart) { display: none; }
}
@media (max-width: 1180px) {
  .g5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band { padding: 64px 0; }
  .bb-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .pd-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pd-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-aside { position: static; }
  .ct-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ct-tabs::-webkit-scrollbar { display: none; }
  .ct-tab { white-space: nowrap; flex-shrink: 0; }
  .ct-filterbtn { display: inline-flex; }
  .ct-mobonly { display: flex; }
  /* Фильтры — фуллскрин-лист снизу */
  .ct-side {
    display: none; position: fixed; inset: 0; z-index: 200; width: auto; padding: 0;
    height: 100vh; height: 100dvh;
    background: rgba(17, 24, 32, 0.5);
  }
  .ct-side.open { display: block; }
  .ct-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; height: auto;
    border-radius: 16px 16px 0 0; border: none; padding-bottom: 88px;
  }
  .ct-apply {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-toolbar { position: sticky; top: var(--hd-now, var(--hd-sticky-h)); transition: top var(--t) var(--ease); z-index: 70; background: var(--bg); padding: 10px 0; margin: 0 0 12px; }
}
@media (max-width: 860px) {
  :root { --hd-sticky-h: 126px; }
  .g2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hd-hidem { display: none !important; }
  /* Мобильная шапка: логотип и корзина, ниже — каталог и поиск.
     Остальные действия живут в нижней навигации. */
  .hd-bar {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-rows: auto 46px; gap: 10px; padding: 10px 16px;
  }
  .hd-logo { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
  .hd-actions { grid-column: 3; grid-row: 1; gap: 8px; }
  .hd-actions .hd-ico:not(.cart) { display: none; }
  .hd-actions .hd-ico.hd-pref { display: flex; width: 38px; height: 38px; }
  .hd-actions .hd-ico.cart { display: none; }
  .hd-cat { grid-column: 1; grid-row: 2; width: 46px; padding: 0; justify-content: center; height: 46px; }
  .hd-cat span { display: none; }
  /* Базис маленький, иначе собственная ширина поля ввода уводит поиск на
     отдельную строку и шапка становится трёхэтажной. */
  .hd-searchwrap { grid-column: 2 / 4; grid-row: 2; min-width: 0; }
  .hd-search { height: 46px; }
  .hd-search button { padding: 0 14px; }
  .hd-drop { left: 0; right: 0; border-radius: 0; max-height: calc(100vh - 126px); }
  .hd-nav { display: none; }
  .hd.compact .hd-bar { padding: 8px 16px; }
  .hd-logo .wordmark small { display: none; }
  .hd-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface);
    border-top: 1px solid var(--line); z-index: 95;
    display: flex; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .hd-bottom-spacer { height: 68px; }
  .toast { bottom: 120px; }
  .band { padding: 52px 0; }
  .cmp-bar { bottom: 84px; }
  .pd-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pd-localnav .buy { display: none; }
  /* Мобильная панель покупки поверх нижней навигации */
  .pd-mobbuy {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    align-items: center; gap: 14px;
  }
  .pd-mobbuy .p { font-family: var(--mono); font-size: 18px; font-weight: 600; white-space: nowrap; }
  .pd-mobbuy .btn { flex: 1; }
  body.has-mobbuy .hd-bottomnav { display: none; }
}
@media (max-width: 620px) {
  .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .g5, .ct-grid, .pd-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { padding: 44px 0; }
  .band-tight { padding: 36px 0; }
  .co-2, .bb-2 { grid-template-columns: minmax(0, 1fr); }
  .pd-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Узкий экран: количество и «В корзину» первой строкой, сравнение и
     избранное — второй, иначе ряд не помещается. */
  .pd-buyrow .btn { flex: 1 1 100%; order: 2; }
  .pd-buyrow .icon-btn { order: 3; }
  .brand-marquee-group { gap: 44px; padding: 22px 28px; }
  .brand-marquee-group a { min-width: 108px; height: 22px; }
  .modal-box { padding: 22px; }
  .modal-list .row { flex-direction: column; gap: 4px; }
  .modal-list .row .k { width: auto; }
  .lightbox .stage { padding: 16px; }
  .lightbox .nav { width: 44px; height: 44px; }
}
@media (max-width: 400px) {
  .g5, .ct-grid, .pd-g4 { grid-template-columns: minmax(0, 1fr); }
  .wrap, .wrap-narrow { padding: 0 16px; }
  .hd-bar { padding: 12px 16px; }
  .hd-logo { gap: 7px; min-width: 0; }
  .hd-logo .seal { width: 34px; height: 34px; }
  .hd-logo .wordmark b { font-size: 14px; letter-spacing: 0.065em; white-space: nowrap; }
  .hd-actions { gap: 5px; }
  .hd-actions .hd-ico.hd-pref { width: 34px; height: 34px; }
}

/* ── Режим высокой контрастности Windows ─────────────────────────────────
   Система подменяет цвета — оставляем читаемыми границы кнопок, бейджей,
   карточек и кольцо фокуса, которые у нас держатся на фоне и тенях. */
@media (forced-colors: active) {
  .btn, .icon-btn, .hd-ico, .ct-tab, .chip, .badge, .field, .card, .doc-row,
  .pd-buybox, .pd-b2b, .spec-tile, .kit, .task-card, .pd-thumb, .info-card, .rv-card { border: 1px solid CanvasText; }
  .btn-primary { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  :focus-visible { outline: 3px solid Highlight !important; }
  .dot { background: CanvasText; forced-color-adjust: none; }
  .pd-localnav a.on, .ct-tab.on { text-decoration: underline; text-decoration-thickness: 2px; }
  .skip-link { border: 2px solid CanvasText; }
  .img-slot .stub { color: CanvasText; }
}

/* Пререндер собранного сайта: факты страницы в HTML до запуска скриптов. */
.pre-cats, .pre-list { margin: 16px 0 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.pre-cats a, .pre-list a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.pre-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 24px; }

/* Сенсорные экраны: текстовые действия получают зону касания 44 px по высоте,
   визуально ничего не меняется. */
@media (pointer: coarse) {
  .act, .pd-localnav a, .ft-col a, .crumbs a { min-height: 44px; display: inline-flex; align-items: center; }
  .ft-col { gap: 0 !important; }
}

/* Белая карточка внутри тёмной секции (формы КП): возвращаем светлую схему. */
.band-dark .on-light a, .band-dark-2 .on-light a, .on-dark .on-light a,
.band-dark .on-light .act, .band-dark-2 .on-light .act, .on-dark .on-light .act { color: var(--ink); }
.band-dark .on-light .act-quiet, .band-dark-2 .on-light .act-quiet, .on-dark .on-light .act-quiet { color: var(--text-2); }
.band-dark .on-light a.btn-primary, .on-dark .on-light a.btn-primary { color: var(--ink); }
.on-dark .on-light :focus-visible, .band-dark-2 .on-light :focus-visible, .band-dark .on-light :focus-visible { outline-color: var(--focus); }
.band-stone .sec-index { color: var(--text-2); }

/* Сетки товаров и категорий на телефоне — две колонки, как в каталоге:
   одна карточка на экран делала главную втрое длиннее. */
@media (max-width: 620px) {
  .g4.g-2m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .g-2m .card { padding: 10px; }
  .g-2m .card .cta .icon-btn { display: none; }
  .g-2m .card .price { font-size: 17px; }
  .g-2m .card .nm { font-size: 14px; }
  .g-2m .card .chips, .g-2m .card .program { display: none; }
}
@media (max-width: 340px) { .g4.g-2m { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .g-2m .cat-card .body { padding: 12px; } .g-2m .cat-card .t { font-size: 14.5px; } .g-2m .cat-card .s { display: none; } }

/* ── Hero-карусель ─────────────────────────────────────────────────────────
   Слайды лежат в одной ячейке сетки (grid-area 1/1): высота — по самому
   высокому, переключение без сдвига вёрстки. Смена — плавное появление. */
.hc { position: relative; isolation: isolate; background: var(--ink); color: var(--on-dark); overflow: hidden; }
.hc-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; opacity: 0.84; filter: saturate(0.78) brightness(0.78);
  transition: opacity 260ms var(--ease);
}
.hc.is-changing .hc-bg { opacity: 0; }
.hc-bg-link { position: absolute; inset: 0; z-index: 1; }
.hc-bg-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; border-radius: 0; }
.hc-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(96deg, rgba(22,26,29,0.98) 0%, rgba(22,26,29,0.94) 38%, rgba(22,26,29,0.55) 62%, rgba(22,26,29,0.16) 100%);
}
.hc-wrap { position: relative; z-index: 3; padding-top: 64px; padding-bottom: 52px; pointer-events: none; }
.hc-wrap a, .hc-wrap button { pointer-events: auto; }
.hc-track { display: grid; opacity: 1; transition: opacity 260ms var(--ease); }
.hc.is-changing .hc-track { opacity: 0; }
.hc-slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
}
.hc-slide.on { opacity: 1; visibility: visible; }
.hm-hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; min-height: 100%; }
.hc-over { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hc-over > span:first-child { width: 28px; height: 1px; background: var(--accent); display: inline-block; }
.hc-over .mono { font-size: 12px; letter-spacing: 0.16em; color: var(--on-dark-2); }
.hc-title { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; font-weight: 700; margin: 0 0 20px; letter-spacing: -0.022em; color: var(--on-dark); }
.hc-title-b2b { font-size: clamp(28px, 4vw, 50px); }
.hc-title-b2b span { display: block; white-space: nowrap; }
.hc-lead { font-size: 17px; line-height: 1.6; color: var(--on-dark-2); margin: 0 0 32px; max-width: 560px; }
.hc-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hc-cta-pair .btn { width: 260px; }
.hm-herotiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-tile { position: relative; display: block; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; overflow: hidden; background: rgba(17,24,32,0.5); }
.hc-tile .pic { display: block; aspect-ratio: 4 / 3; position: relative; }
.hc-tile .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 11px 13px; color: var(--on-dark); }
.hc-tile .cap b { font-size: 13.5px; }
.hc-tile .cap i { font-style: normal; font-size: 10px; letter-spacing: 0.14em; color: var(--on-dark-3); }
.hc-photo, .hc-banner {
  position: relative; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14); background: var(--photo-bg);
}
.hc-banner { aspect-ratio: 5 / 2; background: var(--ink-2); }
.hc-controls { display: flex; align-items: center; gap: 10px; margin-top: 36px; }
.hc-btn {
  width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.3);
  background: transparent; color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hc-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--on-dark); }
.hc-pause { margin-left: 6px; }
.hc-dots { display: flex; gap: 2px; }
.hc-dot { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.hc-dot span { display: block; width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.35); transition: background var(--t) var(--ease), width var(--t) var(--ease); }
.hc-dot:hover span { background: rgba(255,255,255,0.7); }
.hc-dot.on span { background: var(--accent); width: 36px; }
.hc-trust { margin-top: 36px; }
.hc-trustcard { background: rgba(32,42,52,0.7); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 20px 22px; }
.hc-trustcard .t { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.hc-trustcard .s { font-size: 13px; color: var(--on-dark-2); line-height: 1.5; }
@media (max-width: 1024px) {
  .hm-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hc-photo { aspect-ratio: 16 / 9; max-height: 280px; }
}
@media (max-width: 620px) {
  .hc-shade { background: rgba(22,26,29,0.84); }
  .hc-wrap { padding-top: 36px; padding-bottom: 36px; }
  .hc-photo { display: none; }
  .hc-controls { margin-top: 24px; }
  .hc-dot { width: 32px; }
  .hc-dot span { width: 18px; }
  .hc-dot.on span { width: 26px; }
}
@media (forced-colors: active) { .hc-dot.on span { background: Highlight; forced-color-adjust: none; } .hc-dot span { background: CanvasText; } }
@media (max-width: 620px) { .hc .hm-herotiles { display: none; } }
/* Кнопка в карточке не выталкивает иконки за край на узких колонках. */
.card .cta .buy { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; }

/* Компактная мобильная витрина: шапка → баннеры → бренды → промо → товары. */
.hd-mobile, .hd-mobile-links, .hd-group-summary { display: none; }
.hd-catalog-nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.hd-catalog-nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.hd-catalog-nav a { color: var(--text); font-size: 13px; font-weight: 700; padding-block: 16px; }
.hd-catalog-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hd-catalog-nav .hd-cat { background: var(--ink); color: var(--on-dark); height: 44px; }
@media (min-width: 861px) {
  .hd-bar { position: static; }
  .hd-drop { left: max(0px, calc((100% - 1280px) / 2)); right: max(0px, calc((100% - 1280px) / 2)); max-height: calc(100dvh - 200px); }
  .hd-service-nav .wrap { min-height: 36px; justify-content: flex-start; }
  .hd-service-nav a { padding-block: 7px; font-size: 13px; }
  .hd-service-nav .hd-service-phone { margin-left: auto; white-space: nowrap; font-family: var(--mono); font-weight: 600; color: var(--text); }
  .hd-service-nav .hd-service-mail { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin-left: -18px; color: var(--text); }
  .hd-service-nav, .hd.compact .hd-service-nav { max-height: none; opacity: 1; visibility: visible; }
  .hd-menugrid { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
  .hd-secs { display: flex; }
  .hd-pane { display: none; }
  .hd-pane.on { display: block; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .hd-catalog-nav .wrap { gap: 16px; }
  .hd-catalog-nav a { font-size: 11px; }
}
.customer-links { display: grid; gap: 8px; margin-top: 20px; }
.customer-links a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px; background: var(--stone); border-radius: var(--r-sm); }
@media (max-width: 860px) {
  .hd-catalog-nav { display: none; }
  .hd-drop { padding: 12px 16px; gap: 16px; }
  .hd-menugrid { flex-basis: 100%; display: block; }
  .hd-pane { display: block; padding: 0; border-bottom: 1px solid var(--line); }
  .hd-group-summary { display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
  .hd-group-summary::-webkit-details-marker { display: none; }
  .hd-group-summary > svg { transition: transform var(--t) var(--ease); }
  .hd-pane[open] > .hd-group-summary > svg { transform: rotate(180deg); }
  .hd-menugrid .hd-pane-title { padding: 8px 0 8px 12px; font-size: 14px; }
  .hd-pane-list { padding: 0 0 12px 12px; }
  :root { --hd-sticky-h: 64px; }
  body { padding-top: var(--hd-full, 64px); }
  .hd-bar, .hd.compact .hd-bar {
    grid-template-columns: 44px 48px minmax(0, 1fr); grid-template-rows: auto;
    gap: 4px; padding: 6px 12px; min-height: 64px;
  }
  .hd-cat { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border: 0; }
  .hd-logo { grid-column: 2; grid-row: 1; min-width: 0; }
  .hd-logo .seal { width: 48px; height: 48px; }
  .hd-logo .wordmark { display: none; }
  .hd-actions { grid-column: 3; grid-row: 1; justify-content: flex-end; gap: 0; }
  .hd-actions .hd-ico.hd-pref { display: none; }
  .hd-actions .hd-ico.hd-mobile, .hd-actions .hd-ico.cart {
    display: inline-flex; width: 44px; height: 44px; border: 0;
    background: transparent; color: var(--on-dark); padding: 0;
  }
  .hd-actions .hd-ico svg, .hd-cat svg { width: 22px; height: 22px; }
  .hd-searchwrap { display: none; grid-column: 1 / -1; grid-row: 2; padding: 6px 0; }
  .hd.search-open .hd-searchwrap { display: block; }
  .hd-search input { font-size: 16px; }
  .hd-drop { top: 100%; max-height: calc(100dvh - 76px); overflow-y: auto; }
  .hd-mobile-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px; gap: 4px 12px; border-bottom: 1px solid var(--line); }
  .hd-mobile-links a { padding: 10px 0; font-size: 14px; }
  .hd-suggest { max-height: calc(100dvh - 140px); overflow-y: auto; }

  .hc-wrap { padding: 24px 20px 12px; }
  .hc .hm-hero { display: block; min-height: 270px; }
  .hc-text { max-width: 540px; }
  .hc-title, .hc-title-b2b { font-size: clamp(25px, 5.6vw, 34px); line-height: 1.12; margin-bottom: 12px; }
  .hc-title-b2b span { white-space: normal; }
  .hc-over { margin-bottom: 12px; gap: 8px; }
  .hc-over .mono { font-size: 10px; letter-spacing: 0.08em; }
  .hc-over > span:first-child { width: 16px; flex-shrink: 0; }
  .hc-lead { font-size: 14px; line-height: 1.45; margin-bottom: 18px; max-width: 38ch; }
  .hc-cta { gap: 8px; }
  .hc-cta-pair { flex-wrap: nowrap; }
  .hc-cta-pair .btn { width: auto; flex:1 1 0; }
  .hc-cta .btn { min-height: 44px; font-size: 13px; padding: 10px 12px; }
  .hc-bg { object-position: 66% center; opacity: 1; filter: none; }
  .hc-shade { background: linear-gradient(90deg, rgba(17,24,32,0.94), rgba(17,24,32,0.74) 55%, rgba(17,24,32,0.3)); }
  .hc-controls { margin-top: 8px; gap: 4px; justify-content: center; }
  .hc-dot { width: 32px; height: 44px; }
  .hc-dot span, .hc-dot.on span { width: 7px; height: 7px; border-radius: 50%; }
  .hc-btn { border: 0; }
  .hc-trust { display: none; }
  .brand-marquee-group { padding: 20px 24px; gap: 32px; }
  .brand-marquee-group a { min-width: 96px; height: 22px; }

  .home-promo-card, .home-promo-frame { min-height: 240px; }
  .home-promo-frame { align-items: center; padding-inline: 20px; }
  .home-promo-content { padding-block: 22px; width: 100%; }
  .home-promo-content h2 { font-size: clamp(23px, 5vw, 30px); line-height: 1.15; }
  .home-promo-content > .mono { font-size: 10px; }
  .home-promo-copy { font-size:14px;max-width:36ch; }
  .home-promo-card > img { object-position: 70% center; }
  .home-promo-shade { background: linear-gradient(90deg, rgba(17,24,32,0.94), rgba(17,24,32,0.64)); }

  .home-top .wrap, .home-fresh .wrap { padding-inline: 16px; min-width: 0; }
  .home-top .sec-head, .home-fresh .sec-head { align-items: flex-start; gap: 14px; flex-wrap: wrap; }
  .home-top [data-toptabs] { gap: 6px !important; }
  .home-top .ct-tab { padding: 10px 12px; min-height: 44px; font-size: 13px; }
  .home-top .mobile-product-rail, .home-fresh .mobile-product-rail {
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: clamp(220px, 72vw, 280px); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; margin-inline: -16px; padding: 3px 16px 16px;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--stone);
  }
  .mobile-product-rail > .card { min-width: 0; scroll-snap-align: start; padding: 14px; }
  .mobile-product-rail .card .nm { font-size: 14px; }
  .mobile-product-rail .card .cta .buy { min-height: 44px; }
  .home-tasks .sec-head, .home-cats .sec-head, .home-kits .sec-head { flex-wrap: wrap; gap: 16px; }
}

/* ══ Главная, доработки 29.09 ══════════════════════════════════════════ */

/* Hero: заголовок разбит на строки в home.js (lines / titleLines).
   Каждая строка — отдельный блок без переноса; колонка текста шире,
   чтобы три строки первого баннера и две строки баннера для организаций
   помещались без обрыва. */
.hc .hm-hero { grid-template-columns: minmax(0, 1fr); }
/* Трек карусели не должен раздуваться по самому широкому слайду: иначе на
   телефоне кнопки и подписи уходили за правый край экрана. */
.hc-track { grid-template-columns: minmax(0, 1fr); }
.hc-title-lines span { display: block; white-space: nowrap; }
.hc-title-b2b.hc-title-lines { font-size: clamp(28px, 3.7vw, 50px); }
/* Подпись, которой задано «в одну строку»: на широком экране не
   ограничиваем ширину и не переносим; на телефоне переносится как обычно. */
@media (min-width: 861px) { .hc-lead-1line { max-width: none; white-space: nowrap; } }

/* 01 · Популярное: горизонтальная лента на всех вкладках. На широком
   экране видно четыре карточки, остальные — прокруткой, стрелками,
   колесом с Shift или свайпом. */
.home-top-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rail-wrap { position: relative; }
/* Стрелки ленты — круглые, по вертикали по центру карточек, слева и справа.
   На широком экране висят в поле страницы, на узком — поверх крайних карточек. */
.rail-btn {
  position: absolute; top: calc(50% - 9px); z-index: 2; transform: translateY(-50%);
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface);
  color: var(--ink); cursor: pointer; box-shadow: var(--shadow-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-prev { left: -18px; }
.rail-next { right: -18px; }
.rail-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.rail-btn:disabled { opacity: 0; pointer-events: none; }
.rail-btn[hidden] { display: none; }
@media (min-width: 1380px) { .rail-prev { left: -74px; } .rail-next { right: -74px; } }
.product-rail {
  display: grid; grid-auto-flow: column; gap: 20px;
  grid-auto-columns: calc((100% - 3 * 20px) / 4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px 4px 18px; margin: -4px -4px 0; scroll-padding-inline: 4px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.product-rail > * { min-width: 0; scroll-snap-align: start; }
@media (max-width: 1180px) { .product-rail { grid-auto-columns: calc((100% - 2 * 20px) / 3); } }

/* 02 · Подбор по задаче: шахматный порядок — светлая карточка, затем
   графитовая. Тон задаётся переменными, раскладка шахматки зависит от
   числа колонок (3 → чётные, 2 → 2-я и 3-я в каждой четвёрке, 1 → чётные). */
.home-tasks {
  --tA-rgb: 255, 255, 255; --tA-fg: var(--ink); --tA-sub: var(--text-2); --tA-i: var(--muted);
  --tB-rgb: 17, 24, 32; --tB-fg: var(--on-dark); --tB-sub: var(--on-dark-2); --tB-i: var(--on-dark-3);
}
html[data-theme="dark"] .home-tasks {
  --tA-rgb: 17, 24, 32; --tA-fg: var(--on-dark); --tA-sub: var(--on-dark-2); --tA-i: var(--on-dark-3);
  --tB-rgb: 44, 55, 66;
}
.home-tasks .task-card {
  --tc-rgb: var(--tA-rgb); --tc-fg: var(--tA-fg); --tc-sub: var(--tA-sub); --tc-i: var(--tA-i);
  color: var(--tc-fg);
}
.home-tasks .task-card:hover { color: var(--tc-fg); }
.home-tasks .task-card::after,
html[data-theme="dark"] .home-tasks .task-card::after {
  background: linear-gradient(90deg, rgba(var(--tc-rgb), 0.98) 0%, rgba(var(--tc-rgb), 0.95) 46%,
    rgba(var(--tc-rgb), 0.74) 68%, rgba(var(--tc-rgb), 0.16) 100%);
}
.home-tasks .task-card .num,
.home-tasks .task-card .go,
html[data-theme="dark"] .home-tasks .task-card .num,
html[data-theme="dark"] .home-tasks .task-card .go { color: var(--tc-fg); }
.home-tasks .task-card .num i { color: var(--tc-i); }
.home-tasks .task-card .sub { color: var(--tc-sub); }
@media (min-width: 1025px) {
  .home-tasks .task-chess > .task-card:nth-child(even) {
    --tc-rgb: var(--tB-rgb); --tc-fg: var(--tB-fg); --tc-sub: var(--tB-sub); --tc-i: var(--tB-i);
    background: var(--ink); border-color: var(--line-dark-2);
  }
}
@media (min-width: 621px) and (max-width: 1024px) {
  .home-tasks .task-chess > .task-card:nth-child(4n+2),
  .home-tasks .task-chess > .task-card:nth-child(4n+3) {
    --tc-rgb: var(--tB-rgb); --tc-fg: var(--tB-fg); --tc-sub: var(--tB-sub); --tc-i: var(--tB-i);
    background: var(--ink); border-color: var(--line-dark-2);
  }
}
@media (max-width: 620px) {
  .home-tasks .task-chess > .task-card:nth-child(even) {
    --tc-rgb: var(--tB-rgb); --tc-fg: var(--tB-fg); --tc-sub: var(--tB-sub); --tc-i: var(--tB-i);
    background: var(--ink); border-color: var(--line-dark-2);
  }
}

/* 03 · Каталог: число позиций и стрелка — заметная нижняя строка карточки. */
.home-cats .cat-card .s { margin-bottom: 12px; }
.home-cats .cat-card .cat-meta {
  align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.home-cats .cat-card .n {
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0;
}
.home-cats .cat-card .go {
  width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ink); color: var(--on-dark);
  font-family: var(--sans); font-size: 17px; line-height: 1;
  transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.home-cats .cat-card:hover .go { background: var(--accent); color: var(--ink); }
html[data-theme="dark"] .home-cats .cat-card .go { background: var(--on-dark); color: var(--ink); }
html[data-theme="dark"] .home-cats .cat-card:hover .go { background: var(--accent); }
@media (max-width: 620px) {
  .home-cats .cat-card .s { margin-bottom: 8px; }
  .home-cats .cat-card .cat-meta { padding-top: 10px; }
  .home-cats .cat-card .n { font-size: 13.5px; }
  .home-cats .cat-card .go { width: 30px; height: 30px; font-size: 15px; }
}

/* 09 · Новости и видео: VK, Telegram, Дзен. Знаки площадок монохромные,
   как и знаки брендов в ui.js: палитра не расширяется. */
.home-media-head { align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.home-media-channels { display: flex; gap: 8px; flex-wrap: wrap; }
.home-media-channel {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px 8px 9px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.home-media-channel:hover { border-color: var(--ink); color: var(--text); }
.home-media-channel i { font-style: normal; color: var(--accent-text); }
.home-media-badge {
  width: 25px; height: 25px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: var(--ink); color: var(--on-dark);
  font: 800 9.5px/1 var(--sans); letter-spacing: -0.03em;
}
.home-media-badge svg { width: 14px; height: 14px; }
/* Значки площадок — в фирменных цветах и в карточках, и в кнопках каналов. */
.home-media-badge.is-vk,
.home-media-card .home-media-badge.is-vk { background: var(--brand-vk); color: var(--on-dark); }
.home-media-badge.is-tg,
.home-media-card .home-media-badge.is-tg { background: var(--brand-tg); color: var(--on-dark); }
.home-media-badge.is-dzen,
.home-media-card .home-media-badge.is-dzen { background: var(--brand-dzen); color: var(--on-dark); }
.home-media-badge.is-tg svg { margin-left: -1px; }
/* Чёрный знак Дзена на графитовой карточке и в тёмной теме — с тонкой рамкой. */
.home-media-card:not(.is-dzen) .home-media-badge.is-dzen,
html[data-theme="dark"] .home-media-badge.is-dzen { box-shadow: inset 0 0 0 1px var(--line-dark-2); }
.home-media-src { color: var(--on-dark-2); text-transform: uppercase; }
.home-media-meta time::before { content: '·'; margin-right: 9px; color: var(--on-dark-3); }
.home-media-card > strong { margin-bottom: 14px; }
.home-media-lead { font-size: 14px; line-height: 1.55; color: var(--on-dark-2); margin: -2px 0 18px; }
.home-media-card.is-tg,
.home-media-card.is-dzen { min-height: 250px; }
.home-media-card.is-tg .home-media-open,
.home-media-card.is-dzen .home-media-open { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-dark-2); }
.home-media-card.is-tg > strong,
.home-media-card.is-dzen > strong { min-height: 0; font-size: 17px; }
/* Дзен — светлая карточка канала: отличается от постов и завершает ряд. */
.home-media-card.is-dzen { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.home-media-card.is-dzen .home-media-meta time::before { color: var(--muted); }
.home-media-card.is-dzen .home-media-meta { color: var(--muted); }
.home-media-card.is-dzen:hover { color: var(--text); border-color: var(--ink); }
.home-media-card.is-dzen .home-media-src { color: var(--text); }
.home-media-card.is-dzen .home-media-lead,
.home-media-card.is-dzen .home-media-open { color: var(--text-2); }
.home-media-card.is-dzen .home-media-open { border-top-color: var(--line); }
.home-media-card.is-dzen .home-media-open i { color: var(--accent-text); }
/* Крупный знак площадки в пустой части карточки статьи без анонса. */
.home-media-card.is-dzen { position: relative; overflow: hidden; }
.home-media-mark {
  position: absolute; right: -18px; bottom: 44px; width: 132px; height: 132px;
  color: var(--stone); pointer-events: none;
}
.home-media-mark svg { width: 100%; height: 100%; }
.home-media-card.is-dzen > :not(.home-media-mark) { position: relative; }
/* Текстовая карточка с обложкой: анонс в две строки, подвал как у VK. */
.home-media-card.has-cover .home-media-lead {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px;
}
.home-media-card.has-cover .home-media-open { margin-top: 16px; padding-top: 0; border-top: 0; }
.home-media-card.is-dzen.has-cover .home-media-cover { background: var(--stone); }
@media (max-width: 860px) { .home-media-mark { width: 96px; height: 96px; bottom: 40px; } }

@media (max-width: 860px) {
  /* Кегль по длине самой длинной строки (--hc-ch ставит home.js). */
  .hc-title-lines, .hc-title-b2b.hc-title-lines {
    font-size: clamp(18px, calc((100vw - 48px) / (var(--hc-ch, 24) * 0.56)), 34px);
  }
  .hc-title-lines span, .hc-title-b2b.hc-title-lines span { white-space: nowrap; }

  /* На узком экране «Популярное» показывает одну карточку:
     без тяжёлого blur, боковых карточек и стрелок. Навигация — свайпом. */
  .home-top .sec-head > .sec { flex: 1 0 100%; }
  .home-top-tools { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .home-top-tools::-webkit-scrollbar { display: none; }
  .home-top [data-toptabs] { width: max-content; flex-wrap: nowrap !important; }

  .rail-btn { display: none; }
  .home-fresh .product-rail {
    grid-auto-columns: clamp(220px, 72vw, 280px); gap: 12px;
    scroll-padding-inline: 16px; margin-inline: -16px; padding: 3px 16px 16px;
  }
  .product-rail > .card { padding: 14px; }
  .product-rail .card .nm { font-size: 14px; }
  .product-rail .card .cta .buy { min-height: 44px; }

  .home-media-head { align-items: flex-start; }
  .home-media-card.is-tg, .home-media-card.is-dzen { min-height: 0; }
}
@media (max-width: 480px) {
  /* Пара кнопок hero делит ширину поровну; длинная подпись переносится
     внутри кнопки, а не выталкивает соседнюю за край экрана. */
  .hc-cta-pair .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
}

@media (max-width: 620px) {
  /* Комплекты не растягивают главную: одна карточка видна целиком,
     край следующей подсказывает горизонтальный свайп. */
  .home-kits .kit-grid {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: -24px; padding: 4px 24px 18px;
    scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none;
  }
  .home-kits .kit-grid::-webkit-scrollbar { display: none; }
  .home-kits .kit { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; }
}

/* ── Свои блоки главной из админки ────────────────────────────────────── */
.home-custom-text .sec { margin-bottom: 18px; }
.home-custom-body { max-width: 780px; display: flex; flex-direction: column; gap: 14px; }
.home-custom-body p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.home-custom-text.on-dark .home-custom-body p { color: var(--on-dark-2); }
.home-custom-cta { margin-top: 26px; }
@media (max-width: 620px) { .home-custom-body p { font-size: 15.5px; } }

/* Нижняя лента брендов прилегает к блоку Telegram так же, как верхняя —
   к hero: отступ, отделявший Telegram от подвала, здесь не нужен. */
.home-telegram:has(+ .brand-marquee-bottom) { padding-bottom: 0; }

/* Telegram-блок: кнопка «Подписаться» сразу после текста, а не у правого края. */
@media (min-width: 861px) {
  .home-telegram-frame { grid-template-columns: 64px auto auto; justify-content: start; column-gap: 28px; }
  .home-telegram-frame .btn { margin-left: clamp(24px, 4vw, 72px); }
}

/* ══ Внутренние страницы, доработки 29.09 ═══════════════════════════════ */

/* Каталог: блок помощи с подбором — графитовая карточка с оранжевой
   кнопкой. Единственное оранжевое действие на странице каталога. */
.ct-helper.on-dark {
  background: var(--ink); border-color: var(--ink); color: var(--on-dark);
  padding: 20px 22px; gap: 12px; min-width: 300px; max-width: 420px;
  box-shadow: var(--shadow-2); position: relative; overflow: hidden;
}
.ct-helper.on-dark::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent);
}
.ct-helper-head { display: flex; align-items: center; gap: 12px; }
.ct-helper-ico {
  width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--ink-3); color: var(--accent);
}
.ct-helper-ico svg { width: 18px; height: 18px; }
.ct-helper.on-dark .t { font-size: 16px; color: var(--on-dark); }
.ct-helper.on-dark .s { font-size: 13.5px; line-height: 1.5; color: var(--on-dark-2); }
.ct-helper.on-dark .btn { width: 100%; }
.ct-helper-phone { font-size: 13px; color: var(--on-dark-3); text-align: center; }
.ct-helper-phone b { color: var(--on-dark); font-weight: 600; }
.ct-helper-phone:hover b { text-decoration: underline; }
@media (max-width: 620px) { .ct-helper.on-dark { min-width: 0; max-width: none; width: 100%; } }

/* Тон карточек-задач вне главной: .tone-cards + .all-dark (все графитовые)
   или .chess-2 (шахматка для сетки в две колонки, на телефоне — через одну). */
.tone-cards {
  --tA-rgb: 255, 255, 255; --tA-fg: var(--ink); --tA-sub: var(--text-2); --tA-i: var(--muted);
  --tB-rgb: 17, 24, 32; --tB-fg: var(--on-dark); --tB-sub: var(--on-dark-2); --tB-i: var(--on-dark-3);
}
html[data-theme="dark"] .tone-cards {
  --tA-rgb: 17, 24, 32; --tA-fg: var(--on-dark); --tA-sub: var(--on-dark-2); --tA-i: var(--on-dark-3);
  --tB-rgb: 44, 55, 66;
}
.tone-cards .task-card {
  --tc-rgb: var(--tA-rgb); --tc-fg: var(--tA-fg); --tc-sub: var(--tA-sub); --tc-i: var(--tA-i);
  color: var(--tc-fg);
}
.tone-cards .task-card:hover { color: var(--tc-fg); }
.tone-cards .task-card::after,
html[data-theme="dark"] .tone-cards .task-card::after {
  background: linear-gradient(90deg, rgba(var(--tc-rgb), 0.98) 0%, rgba(var(--tc-rgb), 0.95) 46%,
    rgba(var(--tc-rgb), 0.74) 68%, rgba(var(--tc-rgb), 0.16) 100%);
}
.tone-cards .task-card .num, .tone-cards .task-card .go, .tone-cards .task-card .ttl,
html[data-theme="dark"] .tone-cards .task-card .num,
html[data-theme="dark"] .tone-cards .task-card .go { color: var(--tc-fg); }
.tone-cards .task-card .num i { color: var(--tc-i); }
.tone-cards .task-card .sub { color: var(--tc-sub); }
.tone-cards.all-dark .task-card {
  --tc-rgb: var(--tB-rgb); --tc-fg: var(--tB-fg); --tc-sub: var(--tB-sub); --tc-i: var(--tB-i);
  background: var(--ink); border-color: var(--line-dark-2);
}
.tone-cards.all-dark .task-card:hover { border-color: var(--on-dark-3); }
@media (min-width: 621px) {
  .tone-cards.chess-2 > .task-card:nth-child(4n+2),
  .tone-cards.chess-2 > .task-card:nth-child(4n+3) {
    --tc-rgb: var(--tB-rgb); --tc-fg: var(--tB-fg); --tc-sub: var(--tB-sub); --tc-i: var(--tB-i);
    background: var(--ink); border-color: var(--line-dark-2);
  }
}
@media (max-width: 620px) {
  .tone-cards.chess-2 > .task-card:nth-child(even) {
    --tc-rgb: var(--tB-rgb); --tc-fg: var(--tB-fg); --tc-sub: var(--tB-sub); --tc-i: var(--tB-i);
    background: var(--ink); border-color: var(--line-dark-2);
  }
}

/* Юридические страницы: меньше пустоты между шапкой и первым пунктом,
   текст выровнен по левому краю шапки. */
.legal-hero { padding-bottom: 30px; }
.legal-hero + .band { padding-top: 36px; }
.legal-copy { max-width: 1180px; }
.legal-copy > * { max-width: 920px; }
@media (max-width: 620px) { .legal-hero { padding-bottom: 22px; } .legal-hero + .band { padding-top: 26px; } }

/* B2B: «Документы» и «Обсудить задачу» — широкие баннеры как блок Telegram. */
.bb-banner .home-telegram-card, .bb-banner .home-telegram-frame { min-height: 340px; }
.bb-banner .home-telegram-copy .sec-index { margin-bottom: 12px; }
.bb-banner .home-telegram-copy h2 { color: var(--on-dark); }
.bb-banner .home-telegram-copy p { max-width: 560px; }
.bb-banner .home-telegram-card > img { opacity: .62; object-position: 70% 28%; }
/* «Документы» — прежняя карточка в ширину контента, графитовая, с фото
   справа (как «Начать работу» на странице «Для компаний»). */
.bb-docs-photo {
  position: relative; overflow: hidden; border-color: var(--line-dark-2); box-shadow: var(--shadow-2);
  background-color: var(--ink);
  background-image: linear-gradient(90deg, rgba(17,24,32,1) 0%, rgba(17,24,32,.94) 36%, rgba(17,24,32,.3) 56%, rgba(17,24,32,.55) 72%, rgba(17,24,32,1) 83.5%),
    url('../../img/banners/warrior-docs-v1.webp');
  background-repeat: no-repeat; background-size: 100% 100%, 58% auto; background-position: 0 0, 62% 22%;
}
/* Текст не заходит на фигуру, кнопка справа от неё. */
@media (min-width: 861px) { .bb-docs-photo p { max-width: 540px; } }
.bb-docs-photo h2 { color: var(--on-dark); }
.bb-docs-photo p { color: var(--on-dark-2); }
@media (max-width: 860px) {
  .bb-docs-photo { background-image: linear-gradient(rgba(17,24,32,.86), rgba(17,24,32,.86)), url('../../img/banners/warrior-docs-v1.webp'); background-size: 100% 100%, cover; background-position: 0 0, center 20%; }
}
.bb-banner-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media (min-width: 861px) {
  .bb-banner-actions { margin-left: clamp(24px, 4vw, 72px); }
  .home-telegram-frame .bb-banner-actions .btn { margin-left: 0; }
}
.bb-banner-actions .btn { align-self: stretch; text-align: center; }
.bb-banner-phone { align-self: center; line-height: 1.5; letter-spacing: .04em; }
.bb-banner-phone { font-size: 17px; color: var(--on-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.bb-banner-phone:hover { color: var(--on-dark); border-bottom-color: var(--on-dark); }
@media (max-width: 860px) {
  .bb-banner .home-telegram-card, .bb-banner .home-telegram-frame { min-height: 0; }
  .bb-banner-actions { grid-column: 1 / -1; width: 100%; }
  .bb-banner-actions .btn { width: 100%; }
}
/* «Для компаний» на телефоне: длинная кнопка в hero больше не распирает
   колонку — страница не прокручивается вбок. */
.company-hero { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) { .company-hero .btn-lg { white-space: normal; text-align: center; width: 100%; } }
/* Мобильный отступ сверху и снизу у баннеров в стиле Telegram: общее
   правило .wrap { padding: 0 16px } ниже по файлу обнуляло padding-block. */
@media (max-width: 860px) {
  .home-telegram .wrap.home-telegram-frame { padding-block: 34px; }
}

/* B2B «Как работаем»: при наведении на шаг кружок с номером становится
   оранжевым, пунктир к следующему шагу — тоже. */
.bb-step-head span { transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.bb-step-head i { transition: opacity var(--t) var(--ease); }
.bb-step:hover .bb-step-head span { background: var(--accent); color: var(--ink); transform: scale(1.06); }
.bb-step:hover .bb-step-head i { background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 13px); }
@media (prefers-reduced-motion: reduce) { .bb-step:hover .bb-step-head span { transform: none; } }

/* ══ Популярное: карусель-«веер» (29.09) ══════════════════════════════════
   Карточки стоят стопкой в центре сцены; сдвиг, масштаб и затемнение
   задаются переменными --d (позиция относительно активной, со знаком)
   и --a (модуль, не больше 3), которые ставит home.js. */
.cf { position: relative; margin-top: 8px; --cf-w: 380px; --cf-h: 580px; --cf-step: 250px; --cf-pull: 90px; }
/* --cf-step — сдвиг соседней карточки; --cf-pull — насколько дальние (±2)
   подтягиваются ближе, чтобы веер оставался плотным. */
.cf-stage {
  position: relative; height: calc(var(--cf-h) + 20px); outline: none;
  touch-action: pan-y;
}
.cf-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--r-card); }
.cf-card {
  position: absolute; top: 10px; left: 50%; width: var(--cf-w); height: var(--cf-h);
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border-radius: 6px; border: 1px solid var(--line-dark-2);
  background: radial-gradient(120% 80% at 50% 62%, var(--ink-3) 0%, var(--ink) 70%);
  color: var(--on-dark); cursor: pointer;
  box-shadow: 0 24px 60px rgba(17, 24, 32, calc(0.34 - var(--a) * 0.06));
  transform: translateX(calc(-50% + var(--d) * var(--cf-step) - var(--s) * max(0, var(--a) - 1) * var(--cf-pull))) scale(calc(1 - var(--a) * 0.14));
  /* Размытие лишь подчёркивает глубину: соседние (±1) — 0.6 px,
     крайние (±2) — 2.4 px (квадрат расстояния). */
  filter: brightness(calc(1 - var(--a) * 0.2)) blur(calc(var(--a) * var(--a) * 0.6px));
  transition: transform 520ms var(--ease), filter 520ms var(--ease), opacity 420ms var(--ease), box-shadow 520ms var(--ease);
}
.cf-card.far { opacity: 0; pointer-events: none; }
.cf-card.on { cursor: default; }
.cf-media { position: absolute; inset: 0; z-index: -1; display: block; }
.cf-media .img-slot { background: transparent; }
.cf-media .img-slot .stub { background: transparent; color: var(--on-dark-3); }
.cf-media .img-slot img { padding: 18% 8% 20%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); }
/* Активная: фото в верхней части под ценой, ниже — характеристики и кнопки. */
.cf-card.on .cf-media .img-slot img { padding: 26% 3% 66%; }
.cf-top { display: flex; justify-content: space-between; gap: 14px; padding: 18px 18px 0; }
.cf-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.35; color: var(--on-dark);
}
.cf-name:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.cf-price { margin-top: 6px; font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--on-dark); }
.cf-idx { flex-shrink: 0; font-size: 12px; color: var(--on-dark-2); letter-spacing: 0.04em; }
.cf-spec, .cf-actions { opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); pointer-events: none; }
.cf-card.on .cf-spec, .cf-card.on .cf-actions { opacity: 1; transform: none; pointer-events: auto; transition-delay: 180ms; }
.cf-spec {
  margin: auto 16px 12px; display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-dark-2); background: rgba(17, 24, 32, 0.78); backdrop-filter: blur(4px);
}
.cf-spec-h, .cf-spec-accent { grid-column: 1 / -1; }
.cf-spec-h {
  padding: 12px 14px; border-bottom: 1px solid var(--line-dark-2);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.cf-spec > div:not(.cf-spec-h) { display: flex; flex-direction: column; gap: 3px; padding: 8px 14px; border-bottom: 1px solid var(--line-dark); min-width: 0; }
.cf-spec > div:not(.cf-spec-h):not(.cf-spec-accent):nth-child(odd) { border-left: 1px solid var(--line-dark); }
.cf-spec > div:last-child { border-bottom: 0; }
.cf-spec-accent { flex-direction: row !important; justify-content: space-between; align-items: baseline; }
.cf-spec dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-3); flex-shrink: 0; }
.cf-spec dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--on-dark); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-spec-accent dt, .cf-spec-accent dd { color: var(--accent); font-weight: 600; }
.cf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; }
.cf-more, .cf-buy {
  min-height: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 16px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 2px; cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.cf-more i, .cf-buy i { font-style: normal; font-size: 16px; }
.cf-more { border: 1px solid var(--on-dark-3); color: var(--on-dark); background: rgba(17, 24, 32, 0.6); }
.cf-more i { color: var(--accent); }
.cf-more:hover { color: var(--on-dark); border-color: var(--on-dark); }
.cf-buy { border: 1px solid var(--accent); background: var(--accent); color: var(--ink); }
.cf-buy:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Графитовые стрелки не конкурируют с оранжевой CTA; hover — белый. */
.cf-btn {
  position: absolute; top: calc(var(--cf-h) / 2 + 10px); z-index: 20; transform: translateY(-50%);
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--on-dark);
  box-shadow: var(--shadow-2); cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.cf-prev { left: 0; }
.cf-next { right: 0; }
.cf-btn svg { width: 22px; height: 22px; }
.cf-btn:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.cf-btn:active { background: var(--stone); }
.cf-count { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--text-2); letter-spacing: 0.06em; }
html[data-theme="dark"] .cf-count { color: var(--on-dark-2); }
@media (max-width: 1180px) { .cf { --cf-step: 205px; --cf-pull: 75px; } }
@media (max-width: 860px) {
  .cf { --cf-w: min(340px, calc(100vw - 48px)); --cf-h: 560px; }
  .cf-btn { display: none; }
  .cf-card {
    transform: translateX(-50%) scale(0.985); filter: none; opacity: 0;
    visibility: hidden; pointer-events: none;
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .cf-card.on {
    transform: translateX(-50%) scale(1); filter: none; opacity: 1;
    visibility: visible; pointer-events: auto;
  }
}
@media (max-width: 480px) {
  .cf { --cf-h: 540px; }
}
@media (prefers-reduced-motion: reduce) { .cf-card, .cf-spec, .cf-actions { transition: none; } }

/* Новое поступление: лента со стрелками, 5 компактных карточек в ряд. */
/* 4 карточки в ряд (на ≤1180 — 3), полоса прокрутки скрыта: листают
   стрелки, колесо с Shift и свайп. overflow-y: hidden убирает лишнюю
   вертикальную прокрутку, которую давали тени и подъём карточки. */
.product-rail-compact {
  gap: 20px; grid-auto-columns: calc((100% - 3 * 20px) / 4);
  overflow-y: hidden; padding-bottom: 14px; scrollbar-width: none;
}
.product-rail-compact::-webkit-scrollbar { display: none; }
@media (max-width: 1180px) { .product-rail-compact { grid-auto-columns: calc((100% - 2 * 20px) / 3); } }
.product-rail-compact .card .nm { font-size: 15.5px; }
.product-rail-compact .card .price { font-size: 21px; }
/* Стрелки ленты новинок видны всегда: на краю лента перелистывается по кругу. */
.home-fresh .rail-btn:disabled, .home-fresh .rail-btn[hidden] { display: inline-flex; opacity: 1; pointer-events: auto; }
.home-fresh .rail-btn { border-color: var(--on-dark-3); }
.home-fresh .sec-head h2 { color: var(--on-dark); }
/* Дальние карточки веера уходят за край — страница вбок не прокручивается. */
.home-top { overflow-x: clip; }
/* Тёмная тема: активная вкладка (графитовая) сливалась с фоном страницы. */
html[data-theme="dark"] .ct-tab.on { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }

/* Новое поступление: стрелки повторяют графитовую схему «Популярного». */
.home-fresh .rail-btn { background: var(--ink); border-color: var(--on-dark-3); color: var(--on-dark); }
.home-fresh .rail-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.home-fresh .rail-btn:active { background: var(--stone); }
.home-fresh .card { border-radius: 6px; }
.home-fresh .card .ph { border-radius: 4px; }

/* Популярное: вкладки с тем же скруглением 6 px, что у карточек карусели
   и ленты новинок, вместо «таблеток». */
.home-top [data-toptabs] .ct-tab { border-radius: 6px; }

/* Покупатель: количество, уведомления и контакты. */
.card .cta [data-card-cart] { flex: 1; min-width: 0; }
.card .cta [data-card-cart] > .btn { width: 100%; padding-inline: 8px; }
.card-quantity { display:flex; align-items:center; justify-content:space-between; min-height:44px; border:1px solid var(--line); border-radius:6px; }
.card-quantity button { width:40px; min-height:42px; border:0; background:transparent; color:inherit; font-size:22px; cursor:pointer; }
.card-quantity span { font-family:var(--mono); font-weight:600; }
.home-kits .kit.kit-personal { background:var(--stone); border:1px solid var(--accent); }
html[data-theme="dark"] .home-kits .kit.kit-personal { border-color:var(--accent); }
.kit-personal .kit-visual { flex:1 0 260px; min-height:260px; aspect-ratio:auto; }
.kit-personal .kit-visual .img-slot img { padding:0; object-position:center 30%; }
.kit-personal .kit-service { min-height:30px; padding:3px 0; font-size:14px; font-weight:600; color:var(--text); }
.kit > .btn { margin-top:18px; width:100%; white-space:normal; }
.kit.kit-personal > .btn { margin-top:18px; }
.contacts-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:36px; margin:32px 0 48px; }
.contacts-map { width:100%; height:420px; border:0; border-radius:12px; background:var(--stone); }
.favorite-notice { position:fixed; right:24px; bottom:24px; z-index:180; width:min(410px,calc(100vw - 32px)); padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); box-shadow:0 12px 40px #0003; }
.favorite-notice p { margin:8px 0 16px; font-size:14px; line-height:1.5; }
.favorite-notice .close { float:right; border:0; background:transparent; color:inherit; font-size:22px; cursor:pointer; }
.ft-socials a[data-social] { color:var(--on-dark); border:0; }
.ft-socials a[data-social="VK"] { background:var(--brand-vk); }
.ft-socials a[data-social="TG"] { background:var(--brand-tg); }
.ft-socials a[data-social="Дзен"] { background:var(--brand-dzen); box-shadow:inset 0 0 0 1px var(--on-dark-3); }
.ft-socials a[data-social="YouTube"] { background:#ff0033; }
.ft-socials a[data-social="RUTUBE"] { background:#182944; box-shadow:inset 0 -3px #ed143b; }
.ft-socials a[data-social="MAX"] { background:linear-gradient(135deg,#168bff,#7c3aed); }
@media(max-width:700px) {
  .contacts-grid { grid-template-columns:1fr; gap:24px; }
  .contacts-map { height:340px; }
  .favorite-notice { right:16px; bottom:16px; }
}
@media(max-width:620px) {
  .home-kits .kit-grid { margin-inline:0; padding-inline:0; scroll-padding-inline:0; }
}
.cf-actions [data-card-cart] { min-width:0; }
.cf-actions [data-card-cart] > .btn { width:100%; min-height:44px; padding-inline:8px; font-size:12px; }
.account-grid > *, .account-panel { min-width:0; }
.account-panel { overflow-wrap:anywhere; }
.account-panel .btn { max-width:100%; white-space:normal; }
.social-icon { display:block; width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.ft-socials a[data-social] { width:36px; height:36px; padding:0; }
.ft-socials a[data-social="VK"], .ft-socials a[data-social="RUTUBE"],
.ft-socials a[data-social="YouTube"], .ft-socials a[data-social="Дзен"] { background:transparent; box-shadow:none; }
.ft-socials .social-icon { width:36px; height:36px; }
.ft-socials a[data-social="MAX"] { padding:7px; }
.ft-socials .social-icon-max { width:22px; height:22px; filter:brightness(0) invert(1); }
.home-media-badge .social-icon { width:100%; height:100%; }
.home-media-mark .social-icon { width:64px; height:64px; }
.float-action-max .social-icon { width:26px; height:26px; }
.ft-socials a[data-social="ОК"], .ft-socials a[data-social="TG"] { background:transparent; }
.float-action-telegram .social-icon { width:32px; height:32px; border-radius:50%; }
.home-telegram-icon .social-icon { width:40px; height:40px; }
.ft-social-row { max-width:1280px; margin:48px auto 0; padding:0 24px 22px; }
.ft-social-row .ft-socials { margin:0; }
.ft-social-row + .ft-bottom { margin-top:0; }
.co-aside > button[type="submit"], [data-kit-form] > button[type="submit"] { margin-top:20px; }
[data-kit-form] .field-row + .field-row { margin-top:12px; }
.home-kits .kit-personal .kit-items { background:var(--surface); border-color:var(--line-strong); }
html[data-theme="dark"] .home-kits .kit-personal .kit-items { background:var(--ink-3); }
.cf-actions [data-card-cart] > .btn {
  min-height:50px; border-radius:2px; border:1px solid var(--accent);
  background:var(--accent); color:var(--ink); font-family:var(--mono);
  font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.cf-actions [data-card-cart] > .btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.cf-actions .card-quantity { min-height:50px; border-color:var(--on-dark-3); color:var(--on-dark); border-radius:2px; }
#related { scroll-margin-top:180px; }
[data-login] > button { margin-top:20px; }
[data-login-message]:not(:empty) { margin-top:14px; }
.contacts-page h2.h3 { margin-bottom:20px; }
.contacts-route-toggle { margin-top:24px; }
.contacts-route-hint { margin:12px 0 0; line-height:1.5; }
.contacts-route { margin-top:24px; }
.contacts-route .field-row { margin-bottom:16px; }
.contacts-route > .btn { margin-top:4px; max-width:100%; white-space:normal; }
#route-status:not(:empty) { margin:16px 0 0; line-height:1.5; }
.contacts-grid > * { min-width:0; }
.ft-top > * { min-width:0; }
.ft .ft-title, .ft-col a { overflow-wrap:anywhere; }
@media(max-width:620px) {
  .ft .ft-title { font-size:12px; letter-spacing:.06em; }
  .ft-brand .lock small { white-space:normal; }
}

/* ── Акция: старая цена, варианты товара, связанные товары ─────────────
   Добавлено вместе с метками и вариантами из админки (10.2026). */
.price-old { font-size: .62em; font-weight: 500; color: var(--muted); text-decoration: line-through; margin-left: 8px; white-space: nowrap; letter-spacing: 0; }
.pd-price .price-old { font-size: .5em; }
.pd-saleto { font-size: 13px; color: var(--accent-text); margin: 6px 0 0; }
.pd-variants { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 20px; }
.pd-axis { border: 0; margin: 0; padding: 0; min-width: 0; }
.pd-axis legend { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; padding: 0; }
.pd-axis legend b { font-family: var(--sans, inherit); letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 600; margin-left: 6px; font-size: 13.5px; }
.pd-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-opt { position: relative; }
.pd-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pd-opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line, #DDD7CE); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pd-opt input:checked + span { border-color: var(--ink, #111820); box-shadow: inset 0 0 0 1px var(--ink, #111820); }
.pd-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-opt.na span { color: var(--muted); border-style: dashed; }
.pd-opt input:disabled + span { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.pd-notify { margin: -8px 0 18px; }
.pd-notify-form { display: flex; flex-direction: column; gap: 12px; }
.pd-notify-form input[type="tel"], .pd-notify-form input[type="email"] { width: 100%; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.pd-tags .chip { text-decoration: none; }
.pd-tags .chip:hover { border-color: var(--ink); }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.article-cover { margin: 0 0 24px; }
.article-cover img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* ── Отзывы на главной: лента карточек ─────────────────────────────────── */
.rv-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-rating-value { font-size: 22px; font-weight: 600; color: var(--ink); }
.rv-rating-meta { font-size: 12.5px; color: var(--muted); }
.rv-stars { color: #D6782B; letter-spacing: .08em; font-size: 14px; line-height: 1; white-space: nowrap; }
.rv-rail {
  display: grid; grid-auto-flow: column; gap: 20px; align-items: start;
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px 4px 18px; margin: -4px -4px 0; scroll-padding-inline: 4px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rv-rail > * { min-width: 0; scroll-snap-align: start; }
.home-reviews .rv-card { border: 1px solid var(--line-soft); min-height: 100%; }
.home-reviews .rv-rail .rv-card { height: 100%; }
.rv-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rv-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: 16px;
}
.rv-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-who .mono { font-size: 12px; color: var(--muted); }
.rv-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.rv-card.is-open .rv-text { -webkit-line-clamp: unset; display: block; }
.rv-more {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.rv-more:hover { color: #C46822; }
.rv-more[hidden] { display: none; }
.home-reviews .rv-card footer { margin-top: auto; justify-content: flex-end; }
@media (max-width: 1180px) { .rv-rail { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 760px) {
  .rv-rail { grid-auto-columns: min(86%, 340px); gap: 12px; margin-inline: calc(var(--page-pad) * -1); padding-inline: var(--page-pad); scroll-padding-inline: var(--page-pad); }
  .home-reviews .sec-head { flex-wrap: wrap; gap: 14px; }
}

/* Карточка отзыва целиком ведёт на первоисточник: ссылка-подпись растянута
   на всю карточку, кнопка «Читать полностью» лежит поверх неё. */
.rv-card-link { position: relative; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.rv-card-link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.rv-card-link .rv-src::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.rv-card-link .rv-more { position: relative; z-index: 2; }
.rv-card-link:focus-within { outline: 2px solid #D6782B; outline-offset: 2px; }
.rv-card-link .rv-src:focus-visible { outline: none; }
.home-reviews .rv-card footer .rv-src {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.home-reviews .rv-card footer .rv-src i { font-style: normal; font-size: 14px; transition: transform var(--t) var(--ease); }
.home-reviews .rv-card-link:hover footer .rv-src { color: #C46822; }
.rv-card-link:hover .rv-src i { transform: translate(2px, -2px); }

/* ── Карточка: предпросмотр фото и быстрый просмотр ─────────────────────── */
.card .ph-wrap { position: relative; }
.ph-dots {
  position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; gap: 4px;
  opacity: 0; transition: opacity var(--t) var(--ease); pointer-events: none;
}
.ph-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(17, 24, 32, .18); }
.ph-dots i.on { background: #D6782B; }
.card:hover .ph-dots { opacity: 1; }
.qv-btn {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 6px); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-2); opacity: 0;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.qv-btn svg { width: 16px; height: 16px; flex: none; }
.card:hover .qv-btn, .qv-btn:focus-visible { opacity: 1; transform: translate(-50%, 0); }
.qv-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.card-compact .qv-btn span { display: none; }
.card-compact .qv-btn { width: 36px; padding: 0; justify-content: center; }
/* Тач-экраны: наведения нет — кнопка всегда видна, компактная, в углу фото */
@media (hover: none) {
  .qv-btn { left: auto; right: 8px; bottom: 8px; transform: none; opacity: 1; width: 36px; padding: 0; justify-content: center; }
  .qv-btn span { display: none; }
  .card:hover .qv-btn { transform: none; }
}

.qv-modal .modal-box { max-width: 960px; }
.qv-modal .modal-head h3 { padding-right: 44px; font-size: 20px; line-height: 1.3; }
.qv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.qv-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qv-main { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; background: var(--photo-bg, #ECE8E0); }
.qv-main .img-slot { position: absolute; inset: 0; }
.qv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2);
}
.qv-nav svg { width: 18px; height: 18px; }
.qv-nav:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.qv-prev { left: 10px; } .qv-next { right: 10px; }
.qv-nav[hidden] { display: none; }
.qv-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.qv-thumbs button {
  flex: 0 0 64px; height: 64px; padding: 0; border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--photo-bg, #ECE8E0); cursor: pointer; overflow: hidden; position: relative;
}
.qv-thumbs button .img-slot { position: absolute; inset: 0; }
.qv-thumbs button.on { border: 2px solid #D6782B; }
.qv-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qv-ident { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qv-ident b { color: var(--text-2); }
.qv-info .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.qv-info .badges:empty { display: none; }
.qv-price { font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.qv-program { font-size: 13.5px; color: var(--text-2); }
.qv-program b { font-family: var(--mono); color: var(--ink-2); }
.qv-info .stock { font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; gap: 7px; align-items: baseline; }
.qv-specs { margin: 4px 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
.qv-specs:empty { display: none; }
.qv-specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.qv-specs dt { color: var(--muted); }
.qv-specs dd { margin: 0; color: var(--ink); font-weight: 500; }
.qv-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.qv-cta .buy { min-height: 46px; padding-inline: 26px; }
@media (max-width: 760px) {
  .qv { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .qv-modal.modal { padding: 12px; }
  .qv-modal .modal-box { max-height: 92vh; }
  .qv-price { font-size: 24px; }
}

/* ══ Правки по ТЗ SEO (09.10.2026) ═════════════════════════════════════ */

/* п. 13, 19–21 — текущая страница в меню: не ссылка, а выделенный пункт;
   родительский раздел подсвечен. */
.hd-nav .is-current, .hd-catalog-nav .is-current {
  font-size: 14px; font-weight: 700; color: var(--text); padding: 13px 0;
  box-shadow: inset 0 -2px 0 var(--accent); cursor: default;
}
.hd-catalog-nav .is-current { font-size: 13px; padding-block: 16px; }
.hd-catalog-nav a.is-parent, .hd-nav a.is-parent { box-shadow: inset 0 -2px 0 var(--line-strong); }
.hd-pane .is-current, .hd-pane-list .is-current, .hd-mobile-links .is-current, .hd-quick .is-current { color: var(--text); font-weight: 700; cursor: default; }
.hd-pane-list .is-current { background: var(--accent-soft); border-radius: var(--r-sm); }
.hd-secs .is-current { cursor: default; }
span.hd-logo.is-current { cursor: default; }
.hd-bottomnav .is-current { color: var(--text); }
.ft-col .is-current, .ft-legal-links .is-current {
  font-size: 14.5px; color: var(--on-dark); font-weight: 700; cursor: default;
  padding-left: 10px; box-shadow: inset 2px 0 0 var(--accent);
}
.ft-legal-links .is-current { padding-left: 0; box-shadow: inset 0 -2px 0 var(--accent); font-size: inherit; }
.ft-col a.is-parent { color: var(--on-dark); }
.ft-brand a.lock { text-decoration: none; }
.ft-brand a.lock:hover b { color: var(--accent); }
.ft-brand span.lock { cursor: default; }

/* п. 14, 17–18 — мессенджеры и обратный звонок в шапке и подвале */
.hd-msg { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.hd-msg .social-icon { width: 22px; height: 22px; }
.hd-msg-max { background: linear-gradient(135deg, #168bff, #7c3aed); }
.hd-msg-max .social-icon { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.hd-msg:hover { transform: translateY(-1px); }
.hd-callback {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hd-callback svg { width: 15px; height: 15px; }
.hd-callback:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.hd-callback:focus-visible, .ft-callback:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 861px) {
  .hd-service-nav .hd-msg { margin-left: -20px; }
  .hd-service-nav .hd-msg:first-of-type { margin-left: -14px; }
  .hd-service-nav .hd-callback { margin-left: -6px; }
}
.hd-mobile-contact { display: none; }
@media (max-width: 860px) {
  .hd-mobile-contact { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .hd-mobile-contact .btn { flex: 1 1 auto; }
}
.ft-callback { margin-top: 12px; gap: 8px; }
.ft-callback svg { width: 16px; height: 16px; }

/* п. 22 — ссылки в текстах заметны: подчёркнуты и выделены цветом */
:is(.pd-body, .legal-copy, .article-body, .rich-text, .info-text) a:not(.btn):not(.act):not(.chip),
main p.lead a:not(.btn):not(.act) {
  color: var(--accent-text); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:is(.pd-body, .legal-copy, .article-body, .rich-text, .info-text) a:not(.btn):not(.act):not(.chip):hover,
main p.lead a:not(.btn):not(.act):hover { color: var(--text); text-decoration-thickness: 2px; }
html[data-theme="dark"] :is(.pd-body, .legal-copy, .article-body, .rich-text, .info-text) a:not(.btn):not(.act):not(.chip),
html[data-theme="dark"] main p.lead a:not(.btn):not(.act) { color: var(--accent); }

/* п. 23 — маркированные и нумерованные списки в текстах */
:is(.pd-body, .legal-copy, .article-body, .rich-text, .info-text) ul:not([class]) { list-style: none; margin: 0 0 16px; padding: 0; }
:is(.pd-body, .legal-copy, .article-body, .rich-text, .info-text) ul:not([class]) > li { position: relative; padding-left: 24px; margin-bottom: 8px; }
:is(.pd-body, .legal-copy, .article-body, .rich-text, .info-text) ul:not([class]) > li::before {
  content: ''; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
:is(.pd-body, .article-body, .rich-text, .info-text) ol:not([class]) { list-style: none; counter-reset: li; margin: 0 0 16px; padding: 0; }
:is(.pd-body, .article-body, .rich-text, .info-text) ol:not([class]) > li { counter-increment: li; position: relative; padding-left: 32px; margin-bottom: 8px; }
:is(.pd-body, .article-body, .rich-text, .info-text) ol:not([class]) > li::before {
  content: counter(li) '.'; position: absolute; left: 0; top: 0; min-width: 24px;
  font-family: var(--mono); font-weight: 600; color: var(--accent-text);
}
html[data-theme="dark"] :is(.pd-body, .article-body, .rich-text, .info-text) ol:not([class]) > li::before { color: var(--accent); }
.legal-copy ol:not([class]) > li::marker { font-family: var(--mono); font-weight: 600; color: var(--accent-text); }
:is(.pd-body, .legal-copy, .article-body) li > :is(ul, ol) { margin: 8px 0 0; }

/* п. 25 — «Цена» перед суммой в превью и карточке товара */
.price-lbl {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: var(--muted); margin-right: 4px; vertical-align: .18em;
}
.pd-price .price-lbl { font-size: 15px; vertical-align: .55em; margin-right: 6px; }

/* п. 24 — сообщение об использовании cookie */
.cookie-note {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 18px;
  background: var(--ink); color: var(--on-dark-2); border-radius: var(--r-card); box-shadow: var(--shadow-2);
  font-size: 13.5px; line-height: 1.5;
}
.cookie-note p { margin: 0; }
.cookie-note a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }
.cookie-note .btn { flex: none; }
@media (max-width: 860px) {
  .cookie-note { left: 10px; right: 10px; bottom: 72px; gap: 12px; padding: 12px 12px 12px 14px; font-size: 12.5px; line-height: 1.45; }
  .cookie-note .btn { min-height: 36px; padding: 8px 14px; }
}
.hd-mobile-links .is-current { padding: 10px 0; font-size: 14px; }

/* п. 7 — страница 404 с шапкой и подвалом */
.nf { padding-block: clamp(48px, 8vw, 96px); }
.nf-wrap { display: grid; gap: 40px; align-items: center; }
.nf-wrap.nf-has-img { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.nf-pic img { width: 100%; height: auto; border-radius: var(--r-card); display: block; }
.nf-text { max-width: 620px; }
.nf-text .page { margin: 10px 0 14px; }
.nf-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 760px) { .nf-wrap.nf-has-img { grid-template-columns: minmax(0, 1fr); } }
.cookie-note { border: 1px solid var(--line-dark-2); }

/* 404 с баннером: картинка во всю ширину между шапкой и подвалом,
   фон по краям — в тон картинки. */
.nf-banner { background: #0d0f11; line-height: 0; }
.nf-banner-link { display: block; width: 100%; }
.nf-banner-link img { display: block; width: 100%; height: auto; }
.nf-banner-link:focus { outline: none; }
.nf-banner-link:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

/* 404: без шапки — картинка занимает весь первый экран. Шапка остаётся
   в разметке (ссылки для робота), но не показывается; подвал — ниже. */
body[data-page="404"] .hd, body[data-page="404"] .hd-bottomnav, body[data-page="404"] .skip-link { display: none !important; }
body[data-page="404"] { padding-top: 0 !important; }
body[data-page="404"] .nf-banner-link img { height: 100vh; height: 100dvh; object-fit: contain; background: #0d0f11; }
@media (min-aspect-ratio: 16/10) {
  body[data-page="404"] .nf-banner-link img { object-fit: cover; object-position: 50% 55%; }
}

/* SEO-текст подраздела под списком товаров (поле «SEO-текст» в админке) */
.ct-seo { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line-soft); }
.ct-seo-body { max-width: 920px; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.ct-seo-body > :first-child { margin-top: 0; }
.ct-seo-body h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; color: var(--text); margin: 36px 0 14px; letter-spacing: -0.015em; }
.ct-seo-body h3 { font-size: 19px; color: var(--text); margin: 26px 0 10px; }
.ct-seo-body p { margin: 0 0 14px; }
.ct-seo-body b, .ct-seo-body strong { color: var(--text); font-weight: 700; }
.ct-seo-body img { max-width: 100%; height: auto; border-radius: 10px; }
.ct-seo-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.ct-seo-body th, .ct-seo-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }

/* 21.10.2026 — шапка: рейтинг Яндекса, тёмные иконки почты/TG/MAX одного размера, оранжевый «Обратный звонок»;
   уведомление о копировании почты; оригинальная иконка MAX в плавающих кнопках */
/* Бейдж Яндекса — iframe 150×50 без своего скругления: обрезаем его рамкой
   высотой строки поиска (48 px) и тем же радиусом. */
.hd-yrating { flex: none; display: block; height: 48px; width: 150px; border-radius: var(--r-sm); overflow: hidden; line-height: 0; align-self: center; }
.hd-yrating iframe { display: block; width: 150px; height: 50px; border: 0; margin-top: -1px; }
@media (max-width: 1279px) { .hd-yrating { display: none; } }
.hd-service-nav a.hd-service-mail { width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; border-radius: 50%; background: #111820; color: #fff; }
.hd-service-nav a.hd-service-mail svg { width: 17px; height: 17px; }
.hd-service-nav a.hd-service-mail:hover { background: var(--accent); color: var(--ink); }
.hd-service-nav .hd-msg-tg { background: url("../../img/icons/tg-black.svg") center / 100% no-repeat; }
.hd-service-nav .hd-msg-tg .social-icon { opacity: 0; }
.hd-service-nav .hd-msg-max { background: none; }
.hd-service-nav .hd-msg-max .social-icon { width: 30px; height: 30px; filter: none; }
html[data-theme="dark"] .hd-service-nav .hd-msg-tg, html[data-theme="dark"] .hd-service-nav .hd-msg-max { filter: invert(1); }
html[data-theme="dark"] .hd-service-nav a.hd-service-mail { background: #fff; color: #111820; }
.hd-callback { background: var(--accent); border-color: var(--accent-hover); color: var(--ink); }
.hd-callback:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink); }
.toast.toast-top { top: 118px; bottom: auto; transform: translate(-50%, -12px); background: var(--accent); color: var(--ink); box-shadow: 0 10px 30px rgba(17, 24, 32, .25); }
.toast.toast-top.on { transform: translate(-50%, 0); }
.float-action.float-action-max, .float-action.float-action-max:hover { background: url("../../img/icons/max-color.svg") center / 100% no-repeat; border-color: transparent; }
.float-action-max .social-icon { opacity: 0; }


/* Цена для СВОих (вариант A, 21.10.2026) */
.svo {
  width: fit-content; max-width: 100%;
  display: grid; justify-items: start; gap: 6px;
  background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 12px;
  padding: 12px 20px 14px 16px;
}
.svo-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-soft); border-radius: 6px; padding: 4px 8px; line-height: 1.2;
}
.svo-p { font-family: var(--mono); font-size: 38px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; }
.svo-p small { font-size: .47em; font-weight: 700; color: var(--text-2); letter-spacing: 0; margin-right: 2px; }
.svo-p b { font-weight: inherit; }
.svo .svo-terms { margin-top: 2px; }
.pd-info .svo, .pd-price-reg { margin-bottom: 0; }
.pd-price.pd-price-reg { font-size: 22px; margin: 12px 0 16px; letter-spacing: -0.015em; }
.pd-price.pd-price-reg .price-lbl { font-size: 14px; vertical-align: .2em; color: var(--text-2); font-weight: 500; }
.pd-price.pd-price-reg .price-old { font-size: .62em; }

/* карточка в сетке и быстрый просмотр */
.card .svo { width: auto; align-self: stretch; padding: 9px 12px 10px; border-radius: 10px; gap: 4px; }
.card .svo-tag { font-size: 9.5px; padding: 3px 7px; }
.card .svo-p { font-size: 21px; }
.card .price.price-reg { font-size: 15px; font-weight: 600; margin-top: 2px; }
.card .price.price-reg .price-lbl { font-size: 12.5px; font-weight: 500; color: var(--text-2); vertical-align: .08em; }
.card-compact .svo { padding: 7px 10px 8px; }
.card-compact .svo-tag { font-size: 9px; letter-spacing: .08em; }
.card-compact .svo-p, .g6 .card .svo-p, .g-2m .card .svo-p { font-size: 18px; }
.card-compact .price.price-reg, .g6 .card .price.price-reg, .g-2m .card .price.price-reg { font-size: 13.5px; }
.qv-info .svo-p { font-size: 28px; }
.qv-price.price-reg { font-size: 18px; }
.qv-price.price-reg .price-lbl { color: var(--text-2); font-weight: 500; }

/* липкая панель и мобильная кнопка */
.pd-localnav .buy .p small, .pd-mobbuy .p small {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--accent-text);
  letter-spacing: 0; line-height: 1.1; white-space: nowrap;
}
.pd-localnav .buy .p, .pd-mobbuy .p { line-height: 1.15; }

html[data-theme="dark"] .svo { background: var(--ink-2); border-color: var(--line-dark-2); }
html[data-theme="dark"] .svo-p { color: var(--on-dark); }
html[data-theme="dark"] .svo-tag { background: var(--ink-3); color: var(--accent); }
html[data-theme="dark"] .pd-localnav .buy .p small, html[data-theme="dark"] .pd-mobbuy .p small { color: var(--accent); }
@media (max-width: 620px) { .svo-p { font-size: 32px; } .card .svo-p { font-size: 18px; } }

/* ══ Мобильные правки 22.10 ════════════════════════════════════════════════ */

/* Карточка товара: на узкой карточке (2 колонки на телефоне, 3–4 на
   планшете) «В корзину» занимает всю строку, избранное и сравнение — ниже,
   поровну. Ширину знает сам ряд действий (container query), поэтому правило
   работает в любой сетке и ленте без привязки к ширине экрана. */
.card .cta { flex-wrap: wrap; container-type: inline-size; }
@container (max-width: 215px) {
  .card .cta [data-card-cart], .card .cta > .buy { flex: 1 0 100%; }
  .card .cta .icon-btn { flex: 1 1 0; width: auto; }
  .card .cta [data-card-cart] > .btn, .card .cta > .buy { padding-inline: 10px; text-overflow: clip; }
}

/* Популярное / Акции / Советуем: на телефоне видна одна карточка, поэтому
   стрелки показываем поверх фото, у краёв карточки. */
@media (max-width: 860px) {
  .cf-btn {
    display: inline-flex; width: 42px; height: 42px;
    top: calc(10px + var(--cf-h) * 0.37);
    background: rgba(17, 24, 32, 0.78); border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
  }
  .cf-btn svg { width: 18px; height: 18px; }
  .cf-prev { left: max(0px, calc(50% - var(--cf-w) / 2 - 14px)); }
  .cf-next { right: max(0px, calc(50% - var(--cf-w) / 2 - 14px)); }
  .cf-btn:hover { background: var(--ink); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.5); }
  .cf-count { font-size: 12.5px; font-weight: 600; color: var(--text); }
}

/* Готовые решения: на телефоне карточка не шире экрана (раньше длинные
   названия позиций раздували её до 540–620 px), край следующей виден,
   под лентой — стрелки и точки. */
.kit-nav { display: none; }
@media (max-width: 620px) {
  .home-kits .kit-grid { scroll-behavior: smooth; }
  .home-kits .kit { flex: 0 0 calc(100% - 40px); min-width: 0; max-width: 360px; padding: 18px; }
  .home-kits .kit-visual { max-width: 100%; }
  .home-kits .kit-grid:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
  .kit-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
  .kit-nav-btn {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--on-dark); cursor: pointer;
  }
  .kit-nav-btn svg { width: 18px; height: 18px; }
  .kit-nav-btn:disabled { background: transparent; color: var(--text-3, #8B8780); border-color: var(--line); cursor: default; }
  .kit-dots { display: flex; gap: 8px; }
  .kit-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width var(--t) var(--ease), background var(--t) var(--ease); }
  .kit-dots i.on { width: 22px; border-radius: 4px; background: var(--accent); }
}

/* ══ SEO-заготовка до отрисовки (22.10) ═══════════════════════════════════
   В HTML лежит упрощённая версия страницы (.prerender) — для поисковиков.
   Модуль страницы заменяет её целиком; до этого момента заготовку не
   показываем, чтобы не мелькал «голый» список товаров. Если JS не сработал,
   заготовка проявится сама через 4 с. SEO-текст раздела под <main> прячем
   до тех пор, пока в <main> ещё лежит заготовка. */
.prerender,
main:has(> .prerender) ~ .ct-seo { animation: prerender-reveal 0s 4s both; }
@keyframes prerender-reveal { from { opacity: 0; } to { opacity: 1; } }

/* ── Тёмная тема: текст, прибитый к --ink / --ink-2, и светлые подложки ──
   (2026-10-22) В светлой теме эти правила ничего не меняют. Аудит контраста
   по всем страницам в тёмной теме — порог 4.5:1 для текста. */
html[data-theme="dark"] .sec-index b,
html[data-theme="dark"] .pd-localnav a.on,
html[data-theme="dark"] .tabs a.on,
html[data-theme="dark"] .card .price,
html[data-theme="dark"] .qv-price,
html[data-theme="dark"] .svo-p,
html[data-theme="dark"] .rv-more,
html[data-theme="dark"] .rv-rating-value,
html[data-theme="dark"] .home-reviews .rv-card footer .rv-src,
html[data-theme="dark"] .qv-specs dd,
html[data-theme="dark"] .doc-row .go,
html[data-theme="dark"] .pd-qty button:hover,
html[data-theme="dark"] .hd-sec.on,
html[data-theme="dark"] .hd-sec:hover,
html[data-theme="dark"] .hd-bottomnav a.on,
html[data-theme="dark"] .link,
html[data-theme="dark"] .consent-label a,
html[data-theme="dark"] .consent-offer a,
html[data-theme="dark"] .band-dark .on-light a:not(.btn-primary):not(.btn),
html[data-theme="dark"] .band-dark-2 .on-light a:not(.btn-primary):not(.btn),
html[data-theme="dark"] .on-dark .on-light a:not(.btn-primary):not(.btn),
html[data-theme="dark"] .band-dark .on-light .act,
html[data-theme="dark"] .band-dark-2 .on-light .act,
html[data-theme="dark"] .on-dark .on-light .act { color: var(--on-dark); }
html[data-theme="dark"] .pd-localnav a.on { border-bottom-color: var(--on-dark); }

html[data-theme="dark"] .pd-body,
html[data-theme="dark"] .pd-faq p,
html[data-theme="dark"] .pd-trust li,
html[data-theme="dark"] .pd-stock,
html[data-theme="dark"] .pd-ident b,
html[data-theme="dark"] .pd-program b,
html[data-theme="dark"] .qv-program b,
html[data-theme="dark"] .qv-info .stock,
html[data-theme="dark"] .rv-card p,
html[data-theme="dark"] .kit-items a,
html[data-theme="dark"] .hd-sec,
html[data-theme="dark"] .doc-row .mono { color: var(--on-dark-2); }
html[data-theme="dark"] .kit-items a:hover,
html[data-theme="dark"] .kit-items a:hover .kn { color: var(--on-dark); }

html[data-theme="dark"] .sec-index s,
html[data-theme="dark"] .home-fresh .sec-index s { color: var(--on-dark-3); }
html[data-theme="dark"] .ct-tab.on i { color: var(--ink-3); }

/* Полупрозрачно-белые подложки (шаги «Как работаем», личный кабинет). */
html[data-theme="dark"] .bb-step,
html[data-theme="dark"] .account-nav,
html[data-theme="dark"] .account-panel { background: var(--surface); }
html[data-theme="dark"] .qv-btn { color: var(--on-dark); }
html[data-theme="dark"] .qv-btn:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
html[data-theme="dark"] .notice:not(.notice-warn) { color: var(--on-dark-2); }
html[data-theme="dark"] .svo-tag { background: var(--ink); }
html[data-theme="dark"] { --status: var(--on-dark-2); }