/* ==========================================================================
   styles.css — header-dark, hero-bento, stats-bento, модификаторы .btn--bento*.
   Общие классы base.css не переопределяются.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Палитра варианта
   -------------------------------------------------------------------------- */

body[data-variant="3"] {
  --rrs-accent: #ff5b5d;
  --rrs-accent-hover: #ff8082;
  --rrs-accent-soft: rgba(255, 91, 93, .12);
  --rrs-accent-soft-strong: rgba(255, 91, 93, .14);
  --rrs-accent-border: rgba(255, 91, 93, .4);
  --rrs-accent-shadow: rgba(255, 91, 93, .26);
  --rrs-accent-glow: rgba(255, 91, 93, .5);
  --rrs-accent-glow-core: rgba(255, 91, 93, .85);
  --rrs-accent-glow-wide: rgba(255, 91, 93, .3);
  --rrs-accent-transparent: rgba(255, 91, 93, 0);
  /* Пара к акценту: подпись на нём только графитовая (5.4:1),
     белая дала бы 3.0:1. */
  --rrs-accent-ink: var(--v3-page);

  --v3-page: #201f1b;
  --v3-page-tint: #262520;
  --v3-cell: #2b2a26;
  --v3-cell-hi: #33322c;
  --v3-header-bg: rgba(32, 31, 27, .94);
  --v3-scroll-thumb: #4a4842;
  --v3-scroll-thumb-hover: #5f5c54;
  --v3-line: rgba(247, 245, 242, .1);
  --v3-line-strong: rgba(247, 245, 242, .22);
  --v3-ink: #f4f1ec;
  --v3-ink-muted: #b3ada4;
  --v3-ink-dim: #9c968c;

  --v3-radius: 10px;
  --v3-gap: 20px;
  --v3-cell-pad: 20px;
  --v3-header-h: 60px;

  /* Модалка в цветах варианта. Сигнал ошибки янтарный, а не красный:
     акцент сам красный, и красная подсветка перестаёт быть сигналом. */
  --rrs-modal-surface: var(--v3-cell);
  --rrs-modal-border: var(--v3-line-strong);
  --rrs-modal-ink: var(--v3-ink);
  --rrs-modal-ink-muted: var(--v3-ink-muted);
  --rrs-modal-field-bg: #1b1a16;
  --rrs-modal-field-border: rgba(247, 245, 242, .42);
  --rrs-modal-field-ink: var(--v3-ink);
  --rrs-modal-placeholder: var(--v3-ink-dim);
  --rrs-modal-focus-ring: rgba(255, 91, 93, .28);
  --rrs-modal-wash: rgba(247, 245, 242, .1);
  --rrs-modal-danger: #ffb454;
  --rrs-modal-danger-ring: rgba(255, 180, 84, .22);
  --rrs-modal-scrim: rgba(14, 13, 11, .74);
  --rrs-modal-shadow: 0 24px 64px rgba(0, 0, 0, .58);
  --v3-logo-h: 36px;

  background-color: var(--v3-page);
  color: var(--v3-ink);
  scrollbar-color: var(--v3-scroll-thumb) var(--v3-page);
  scrollbar-width: thin;
}

body[data-variant="3"]::selection,
body[data-variant="3"] ::selection {
  background-color: var(--rrs-accent);
  color: var(--v3-page);
}

body[data-variant="3"]::-webkit-scrollbar,
body[data-variant="3"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body[data-variant="3"]::-webkit-scrollbar-track,
body[data-variant="3"] ::-webkit-scrollbar-track {
  background-color: var(--v3-page);
}

body[data-variant="3"]::-webkit-scrollbar-thumb,
body[data-variant="3"] ::-webkit-scrollbar-thumb {
  border: 2px solid var(--v3-page);
  border-radius: 999px;
  background-color: var(--v3-scroll-thumb);
}

body[data-variant="3"]::-webkit-scrollbar-thumb:hover,
body[data-variant="3"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--v3-scroll-thumb-hover);
}

body[data-variant="3"] :focus-visible {
  outline-color: var(--rrs-accent);
}

/* --------------------------------------------------------------------------
   2. Модификаторы общих кнопок
   -------------------------------------------------------------------------- */

.btn--bento {
  font-weight: 700;
}

.btn--bento .btn__icon {
  background-color: rgba(32, 31, 27, .16);
}

.btn--bento:hover {
  background-color: var(--rrs-accent-hover);
  box-shadow: 0 10px 26px var(--rrs-accent-shadow);
}

.btn--bento-ghost {
  border-color: var(--v3-line-strong);
  color: var(--v3-ink);
}

.btn--bento-ghost .btn__icon {
  background-color: rgba(247, 245, 242, .1);
}

.btn--bento-ghost:hover {
  border-color: var(--v3-ink);
  background-color: var(--v3-ink);
  color: var(--v3-page);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.btn--bento-ghost:hover .btn__icon {
  background-color: rgba(32, 31, 27, .12);
}

/* --------------------------------------------------------------------------
   3. Шапка
   -------------------------------------------------------------------------- */

.header-dark {
  position: sticky;
  top: 0;
  z-index: var(--rrs-z-header);
  border-bottom: 1px solid var(--v3-line);
  background-color: var(--v3-header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Светлая тема следует холодной бело-голубой палитре референса:
   белые поверхности, глубокий синий акцент и почти чёрный текст. Атрибут ставится в <head>,
   поэтому при возврате на сайт тёмная тема не мелькает перед светлой. */
html[data-theme="light"] body[data-variant="3"] {
  --rrs-accent: #143b5a;
  --rrs-accent-hover: #0d2f49;
  --rrs-accent-ink: #fff;
  --rrs-accent-soft: rgba(20, 59, 90, .1);
  --rrs-accent-soft-strong: rgba(20, 59, 90, .14);
  --rrs-accent-border: rgba(20, 59, 90, .34);
  --rrs-accent-shadow: rgba(20, 59, 90, .2);
  --rrs-accent-glow: rgba(20, 59, 90, .24);
  --rrs-accent-glow-core: rgba(20, 59, 90, .48);
  --rrs-accent-glow-wide: rgba(20, 59, 90, .18);
  --rrs-accent-transparent: rgba(20, 59, 90, 0);

  --v3-page: #fdfefe;
  --v3-page-tint: #eef6fa;
  --v3-cell: #fff;
  --v3-cell-hi: #f1f6f9;
  --v3-header-bg: rgba(255, 255, 255, .96);
  --v3-scroll-thumb: #a7bbc8;
  --v3-scroll-thumb-hover: #718a9c;
  --v3-line: rgba(20, 59, 90, .12);
  --v3-line-strong: rgba(20, 59, 90, .24);
  --v3-ink: #090e14;
  --v3-ink-muted: #4e626f;
  --v3-ink-dim: #5f7482;

  --rrs-modal-surface: #fff;
  --rrs-modal-border: var(--v3-line-strong);
  --rrs-modal-ink: var(--v3-ink);
  --rrs-modal-ink-muted: var(--v3-ink-muted);
  --rrs-modal-field-bg: #f7fafc;
  --rrs-modal-field-border: rgba(20, 59, 90, .24);
  --rrs-modal-field-ink: var(--v3-ink);
  --rrs-modal-placeholder: #5f7482;
  --rrs-modal-focus-ring: rgba(20, 59, 90, .18);
  --rrs-modal-wash: #eef6fa;
  --rrs-modal-danger: #b42318;
  --rrs-modal-danger-ring: rgba(180, 35, 24, .15);
  --rrs-modal-scrim: rgba(7, 20, 31, .44);
  --rrs-modal-shadow: 0 24px 64px rgba(20, 59, 90, .16);

  background-color: var(--v3-page);
  color: var(--v3-ink);
}

html[data-theme="light"] {
  color-scheme: light;
}

html:not([data-theme="light"]) {
  color-scheme: dark;
}

body[data-variant="3"],
.header-dark,
.home-section,
.home-card,
.header-dark__nav,
.modal__dialog {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--rrs-dur);
  transition-timing-function: var(--rrs-ease);
}

.header-dark__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rrs-space-2);
  /* Высота жёсткая, не min-height: из этого токена hero вычитает свой экран. */
  height: var(--v3-header-h);
}

/* --- логотип ------------------------------------------------------------
   Размер задаёт высота --v3-logo-h, ширину выводит aspect-ratio 633/304. */

.header-dark__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header-dark__logo-img {
  height: var(--v3-logo-h);
  aspect-ratio: 633 / 304;
}

.header-dark__logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
  transition: filter var(--rrs-dur) var(--rrs-ease);
}

.header-dark__logo:hover .header-dark__logo-img img {
  filter: drop-shadow(0 3px 12px var(--rrs-accent-glow));
}

.header-dark__contacts {
  display: flex;
  align-items: center;
  gap: var(--rrs-space-2);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--v3-line-strong);
  border-radius: var(--rrs-radius-pill);
  background-color: var(--v3-cell);
  color: var(--v3-ink);
  font: inherit;
  font-size: var(--rrs-fs-small);
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--rrs-dur) var(--rrs-ease),
    border-color var(--rrs-dur) var(--rrs-ease),
    background-color var(--rrs-dur) var(--rrs-ease),
    transform var(--rrs-dur) var(--rrs-ease);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--rrs-accent);
  color: var(--rrs-accent);
}

.theme-toggle:active {
  transform: scale(.96);
}

.theme-toggle__icon {
  position: relative;
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
}

.theme-toggle__icon svg,
.theme-toggle__icon [data-lucide] {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.theme-toggle__moon,
html[data-theme="light"] .theme-toggle__sun {
  display: none;
}

html[data-theme="light"] .theme-toggle__moon {
  display: block;
}

.theme-toggle--header {
  display: none;
  width: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  padding: 0;
  background-color: transparent;
}

.theme-toggle--menu {
  width: 100%;
  justify-content: flex-start;
  min-height: 48px;
  padding-inline: 18px;
}

.header-dark__address--row {
  display: flex;
  align-items: center;
}

.header-dark__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--rrs-accent-border);
  border-radius: 50%;
  color: var(--rrs-accent);
  transition: border-color var(--rrs-dur) var(--rrs-ease),
              background-color var(--rrs-dur) var(--rrs-ease),
              color var(--rrs-dur) var(--rrs-ease);
}

.header-dark__call:hover {
  border-color: var(--rrs-accent);
  background-color: var(--rrs-accent-soft-strong);
  color: var(--rrs-accent-hover);
}

.header-dark__call svg {
  width: 17px;
  height: 17px;
}

.header-dark__phone {
  color: var(--rrs-accent);
  font-size: var(--rrs-fs-small);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.header-dark__phone:hover {
  color: var(--rrs-accent-hover);
}

.header-dark__phone--nav {
  font-size: 20px;
}

.header-dark__messengers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-dark__messenger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--v3-line);
  border-radius: 50%;
  color: var(--rrs-accent);
  transition: border-color var(--rrs-dur) var(--rrs-ease),
              background-color var(--rrs-dur) var(--rrs-ease),
              color var(--rrs-dur) var(--rrs-ease);
}

.header-dark__messenger:hover {
  border-color: var(--rrs-accent);
  background-color: var(--rrs-accent-soft);
  color: var(--rrs-accent);
}

.header-dark__messenger svg {
  width: 17px;
  height: 17px;
}

.header-dark__cta {
  display: none;
}

/* --- мобильное меню --------------------------------------------------- */

.header-dark__nav {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--rrs-z-nav);
  width: 100%;
  height: calc(100svh - var(--v3-header-h));
  overflow-y: auto;
  padding: var(--rrs-space-3) var(--rrs-container-pad) var(--rrs-space-4);
  border-bottom: 1px solid var(--v3-line);
  background-color: var(--v3-page);
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Progressive enhancement: без JS навигация открыта и все ссылки доступны,
   а инертный burger скрыт. Класс ставится в <head> до загрузки CSS, поэтому
   JS-режим сохраняет закрытую панель без вспышки открытого меню. */
.header-dark__burger {
  display: none;
}

@media (max-width: 899px) {
  .js .header-dark__burger {
    display: inline-flex;
  }

  .js .header-dark__nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--rrs-dur) var(--rrs-ease),
                transform var(--rrs-dur) var(--rrs-ease),
                visibility 0s linear var(--rrs-dur);
  }

  .js .header-dark__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--rrs-dur) var(--rrs-ease),
                transform var(--rrs-dur) var(--rrs-ease),
                visibility 0s linear 0s;
  }
}

/* --- меню: структура под wp_nav_menu() ----------------------------------
   Правила цепляются за структуру «<li>, а внутри него <ul>», а не за классы.
   Кнопку раскрытия вставляет js/main.js; без JS подменю просто раскрыто. */

.header-dark__menu {
  display: grid;
  counter-reset: v3-nav;
}

/* Вторая строка объявлена всегда: створка анимируется 0fr → 1fr,
   через display плавности не бывает. */
.header-dark__menu > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  border-bottom: 1px solid var(--v3-line);
}

/* Селектор по классу, не по тегу: текущая страница — это <span
   class="header-dark__link header-dark__link--static">, а не <a>, и тег-
   селектор его не находил вовсе — пункт падал на unstyled-размер шрифта
   и выглядел крупнее соседей. */
.header-dark__menu .header-dark__link {
  display: flex;
  align-items: baseline;
  gap: var(--rrs-space-2);
  min-width: 0;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 600;
  transition: color var(--rrs-dur) var(--rrs-ease),
              padding-left var(--rrs-dur) var(--rrs-ease);
}

.header-dark__menu .header-dark__link:not(.header-dark__link--static):hover,
.header-dark__menu .header-dark__link:not(.header-dark__link--static):focus-visible {
  color: var(--rrs-accent);
}

/* Нумерация пунктов — счётчиком, в разметке её нет. */
.header-dark__menu > li > a::before {
  counter-increment: v3-nav;
  content: counter(v3-nav, decimal-leading-zero);
  color: var(--v3-ink-dim);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--rrs-ls-label);
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.header-dark__menu a:hover {
  padding-left: 6px;
  color: var(--rrs-accent);
}

.header-dark__menu > li > a:hover::before {
  color: var(--rrs-accent);
}

/* Текущий пункт: aria-current в разметке и current-menu-item от WordPress. */
.header-dark__menu [aria-current="page"],
.header-dark__menu .current-menu-item > a {
  color: var(--rrs-accent);
}

.header-dark__menu > li > [aria-current="page"]::before,
.header-dark__menu > li.current-menu-item > a::before {
  color: var(--rrs-accent);
}

/* --- подменю (мобильная створка) ---------------------------------------- */

/* Потомковый селектор (без >), а не дочерний: скрипт может вставить
   .header-dark__submenu-panel между <li> и <ul> — без JS <ul> прямой
   потомок и попадает сюда так же. */
.header-dark__menu li ul {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  padding-left: calc(var(--rrs-space-2) + 18px);
}

.header-dark__menu li ul > li + li {
  border-top: 1px solid var(--v3-line);
}

.header-dark__menu li ul .header-dark__sublink {
  display: block;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
}

/* Исключение, а не гонка специфичности — см. комментарий у .header-dark__link
   в десктопной секции ниже: та же причина, то же решение. li/ul в этом
   селекторе дают больше веса, чем у [aria-current="page"], и без :not()
   текущий пункт подменю перекрашивался бы обратно в приглушённый. Правило
   общее для обеих ширин: десктопный блок свой color не переопределяет. */
.header-dark__menu li ul .header-dark__sublink:not(.header-dark__sublink--static) {
  color: var(--v3-ink-muted);
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.header-dark__menu li ul .header-dark__sublink:not(.header-dark__sublink--static):hover,
.header-dark__menu li ul .header-dark__sublink:not(.header-dark__sublink--static):focus-visible {
  color: var(--rrs-accent);
}

/* Кнопку и data-submenu на родителе ставит скрипт: свёрнутое состояние
   существует только там, где есть чем разворачивать. */
.header-dark__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* цель нажатия 44×44 при иконке 18px; margin возвращает край, не площадь */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--v3-ink-dim);
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.header-dark__toggle:hover {
  color: var(--rrs-accent);
}

.header-dark__toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--rrs-dur) var(--rrs-ease);
}

.header-dark__menu > li[data-submenu-open] > .header-dark__toggle svg {
  transform: rotate(180deg);
}

/* Створка — тот же приём, что у .faq__answer/.faq__answer-inner: grid-rows
   0fr→1fr на ОТДЕЛЬНОЙ обёртке, а не на самом <li>. Раньше анимация висела
   на <li>, у которого уже есть свой grid для строки [ссылка | кнопка] —
   два независимых назначения grid-template-rows на одном узле ломались на
   части мобильных браузеров. Обёртку .header-dark__submenu-panel вставляет
   скрипт вокруг <ul> — без JS <ul> остаётся прямым потомком <li> и полностью
   видим (base-правило .header-dark__menu li ul выше). */
.header-dark__menu > li[data-submenu] > .header-dark__submenu-panel {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 0fr;
  min-width: 0;
  transition: grid-template-rows 340ms var(--rrs-ease);
}

/* Потомок створки — не всегда <ul>: у «Каталога» это .mega-menu (мега-панель,
   одна разметка и на мобильном, и на десктопе — раскладкой управляет только
   CSS в @media ниже). Селектор "> *" годится для обоих случаев без дублей. */
.header-dark__menu > li[data-submenu] > .header-dark__submenu-panel > * {
  min-height: 0;
  visibility: hidden;
  /* visibility ждёт конца анимации: иначе пункты исчезают раньше створки */
  transition: visibility 0s linear 340ms;
}

/* overflow: hidden нужен ВСЕМ потомкам створки, включая .mega-menu: без него
   содержимое каталога не обрезалось нарастающей 0fr→1fr строкой, а
   рисовалось поверх неё сразу целиком — открытие выглядело как мгновенный
   скачок вместо разворачивания. .mega-menu это переопределяет себе обратно
   ниже (ей нужен свой скролл, а не clip) более специфичным селектором. */
.header-dark__menu > li[data-submenu] > .header-dark__submenu-panel > * {
  overflow: hidden;
}

.header-dark__menu > li[data-submenu][data-submenu-open] > .header-dark__submenu-panel {
  grid-template-rows: 1fr;
}

.header-dark__menu > li[data-submenu][data-submenu-open] > .header-dark__submenu-panel > * {
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .header-dark__menu > li[data-submenu] > .header-dark__submenu-panel > * {
    transition-delay: 0s;
  }
}

/* --- мега-меню «Каталог» -------------------------------------------------
   Разметка одна на обе ширины (сайдбар с категориями + панели групп),
   адаптирует её только CSS: на мобильном .mega-menu лежит в нормальном
   потоке внутри створки-аккордеона (см. правила выше), на десктопе —
   всплывающая панель, см. @media (min-width: 900px) ниже. */
/* На мобильном .mega-menu__sidebar разворачивается в контекст самого
   .mega-menu (display: contents — без своей коробки, но и без потери
   children из разметки), чтобы промо-карточка могла встать ПОСЛЕ панелей
   товаров через order — иначе её место намертво фиксировано рядом с
   категориями. На десктопе sidebar снова обычный flex-блок (см. @media
   ниже) — там колонка и так уже в нужном месте, order не нужен. */
/* max-height + свой overflow-y: auto на мобильном — без них створка
   анимировала grid-template-rows до ~4800px (вся высота каталога), и
   раскрытие на бюджетном телефоне заметно дёргалось: браузер пересчитывает
   layout такой высоты на каждом кадре 340мс-перехода. Тот же приём, что уже
   стоит у десктопной версии ниже (@media), только без position: fixed —
   на мобильном панель остаётся в потоке, её просто ограничивает высота. */
/* margin-inline компенсирует боковой padding .header-dark__nav — на
   мобильном вся панель каталога растягивается до самых краёв экрана
   (раньше только .mega-menu__categories это делала сама себе, двигая
   свои края внутри ещё инсетной .mega-menu). Группы/заголовок/промо
   держат отступ от края уже своим padding-inline, а не margin контейнера. */
.mega-menu {
  display: flex;
  flex-direction: column;
  max-height: 70svh;
  margin-inline: calc(-1 * var(--rrs-container-pad));
}

/* Без JS .mega-menu остаётся прямым grid-потомком пункта «Каталог».
   Выносим её во вторую строку на всю ширину: иначе auto-placement ставит
   огромную панель рядом со ссылкой и сжимает видимый текст до 0px. */
.header-dark__item--mega:not([data-submenu]) > .mega-menu {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Цепочка на один класс специфичнее правила overflow: hidden у
   .header-dark__submenu-panel > * (см. выше по файлу) — .mega-menu
   добавляет свой класс к тем же трём. Снимает обрезку и на мобильном,
   и на десктопе: ей нужен свой скролл, а не clip. */
.header-dark__menu > li[data-submenu] > .header-dark__submenu-panel > .mega-menu {
  overflow-y: auto;
}

.mega-menu__sidebar {
  display: contents;
}

/* Края уже выравнивает margin-inline у .mega-menu (см. выше) — здесь только
   свой padding держит кнопки на месте. nowrap + overflow-x: auto — четыре
   кнопки должны стоять в один ряд, а не переноситься; на очень узких
   экранах, если всё равно не влезут, ряд просто проскроллится
   горизонтально, а не сломает раскладку переносом. */
.mega-menu__categories {
  order: 1;
  display: flex;
  flex-wrap: nowrap;
  /* flex-shrink: 0 — .mega-menu это колоночный flex с max-height: 70svh;
     когда контент активной панели (список длиннее у одних категорий, чем
     у других) не помещается, браузер по умолчанию пропорционально сжимает
     ВСЕ flex-элементы колонки, включая эту панель вкладок — её высота и
     padding визуально «плавали» при переключении категорий. Переполнение
     обязана гасить прокрутка .mega-menu (overflow-y: auto), а не сжатие
     этого блока: его высота должна оставаться постоянной. */
  flex-shrink: 0;
  /* align-items: center — не только выравнивание: без него в скроллящемся
     (overflow-x: auto) nowrap-ряду с align-items по умолчанию (stretch)
     Chromium ужимает высоту кнопок-flex-элементов до одной line-height,
     игнорируя их padding (кнопка «сплющивалась» до 16px вместо 35px,
     текст обрезался). Явный center/flex-start в этой комбинации — рабочий
     обход, кнопкам всё равно нужен их собственный размер, а не stretch. */
  align-items: center;
  gap: 4px;
  /* min-width: 0 — без него flex-элемент не сжимается меньше ширины своего
     содержимого (4 некомпрессируемые кнопки), overflow-x: auto не включался
     бы вовсе, а сам блок раздувался шире экрана. Тот же приём, что уже
     решал похожую историю с <select> в калькуляторе (см. CLAUDE.md). */
  min-width: 0;
  padding: var(--rrs-space-4) var(--rrs-space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
  background-color: var(--v3-cell);
}

.mega-menu__category {
  flex: none;
  padding: 7px 10px;
  border: 1px solid var(--v3-line);
  border-radius: var(--rrs-radius-pill);
  background: none;
  color: var(--v3-ink-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rrs-dur) var(--rrs-ease),
              color var(--rrs-dur) var(--rrs-ease),
              border-color var(--rrs-dur) var(--rrs-ease);
}

.mega-menu__category:hover {
  color: var(--v3-ink);
}

.mega-menu__category[aria-selected="true"] {
  border-color: var(--rrs-accent);
  background-color: var(--rrs-accent);
  color: var(--rrs-accent-ink);
}

/* На мобильном карточка скрыта целиком — список категорий и товаров и так
   длинный, а место для заявки есть в «шапке»-меню (кнопки «Бесплатный
   замер»/«Заказать звонок») и в самой форме #request ниже по странице.
   На десктопе карточка возвращается (см. @media ниже). */
.mega-menu__promo {
  display: none;
}

.mega-menu__promo-img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--rrs-radius-sharp);
}

.mega-menu__promo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-menu__promo-title {
  font-family: var(--rrs-font-heading);
  font-size: 15px;
  font-weight: 700;
}

.mega-menu__promo-text {
  color: var(--v3-ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.mega-menu__promo .btn {
  margin-top: 4px;
}

/* На мобильном панель раскрыта в "contents" — строка поиска живёт внутри
   .mega-menu__panels/.mega-menu__panel, но должна встать ПЕРЕД категориями
   (визуально в самом верху меню). Без contents она осталась бы внутри
   обычного блочного потока панелей, ниже категорий — order тут работать
   не может, т.к. элементы не являются прямыми flex-элементами .mega-menu.
   display: contents убирает собственную коробку .mega-menu__panels и
   активной .mega-menu__panel (скрытые остаются display: none через
   [hidden] — :not() не даёт тут конфликта), и input/заголовок/группы
   становятся обычными flex-элементами .mega-menu, с которыми order уже
   работает. На десктопе оба contents сняты (см. @media ниже). */
.mega-menu__panels {
  display: contents;
  min-width: 0;
}

.mega-menu__panel:not([hidden]) {
  display: contents;
}

.mega-menu__title {
  order: 2;
  /* flex-shrink: 0 — та же причина, что у .mega-menu__categories выше:
     переполнение колонки обязана гасить прокрутка .mega-menu, а не сжатие
     заголовка. */
  flex-shrink: 0;
  /* На десктопе этот отступ сверху даёт padding самого .mega-menu__panels
     (@media ниже) — на мобильном контейнер разворачивается в display:
     contents и своего padding не имеет, поэтому заголовку нужен margin-top
     явно, иначе он вплотную касается низа категорий. */
  margin-top: var(--rrs-space-3);
  margin-bottom: var(--rrs-space-3);
  padding-inline: var(--rrs-space-3);
  font-family: var(--rrs-font-heading);
  font-size: 20px;
  font-weight: 700;
}

/* На мобильном JS физически переносит этот узел в начало .header-dark__nav,
   перед <ul> (initMenu() → placeMegaSearch()) — одно и то же поле, а не
   дубль: выше по дереву, чем сам пункт «Каталог». На десктопе JS возвращает
   его обратно внутрь .mega-menu__panels (см. @media ниже и placeMegaSearch
   в js/main.js). Стили ниже подходят для обоих положений без правок. */
.mega-menu__search {
  order: 0;
  position: relative;
  /* Без верхнего отступа: .header-dark__nav уже даёт padding-top
     var(--rrs-space-3) сверху, второй такой же отступ margin-ом
     только удваивал пустоту над строкой поиска. */
  margin: 0 var(--rrs-space-3);
}

.mega-menu__search-input {
  width: 100%;
  padding: 9px 36px 9px 14px;
  border: 1px solid var(--v3-line);
  border-radius: var(--rrs-radius-pill);
  background-color: var(--v3-cell);
  color: var(--v3-ink);
  font: inherit;
  font-size: 13px;
}

.mega-menu__search-input::placeholder {
  color: var(--v3-ink-dim);
}

/* Поле — заготовка под поиск по каталогу, бэкенда ещё нет (disabled),
   как и у остальных форм на сайте без подключения. */
.mega-menu__search-input:disabled {
  cursor: not-allowed;
}

.mega-menu__search svg,
.mega-menu__search [data-lucide] {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 15px;
  height: 15px;
  color: var(--v3-ink-dim);
  transform: translateY(-50%);
  pointer-events: none;
}

.mega-menu__groups {
  order: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rrs-space-3);
  padding-inline: var(--rrs-space-3);
  padding-bottom: var(--rrs-space-3);
}

.mega-menu__group-title {
  margin-bottom: 8px;
  color: var(--v3-ink-dim);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--rrs-ls-label);
  text-transform: uppercase;
}

.mega-menu__group-list {
  display: grid;
  gap: 8px;
}

.mega-menu__link {
  display: block;
  padding: 4px 0;
  color: var(--v3-ink-muted);
  font-size: 15px;
  line-height: 1.4;
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.mega-menu__link:hover {
  color: var(--rrs-accent);
}

.mega-menu__group-all {
  display: inline-block;
  margin-top: 8px;
  color: var(--rrs-accent);
  font-size: 14px;
  font-weight: 600;
}

/* "Ещё N" — пункты .mega-menu__link-extra скрыты, пока список не раскрыт. */
.mega-menu__group-list:not([data-expanded]) .mega-menu__link-extra {
  display: none;
}

.mega-menu__group-list[data-expanded] .mega-menu__group-toggle {
  display: none;
}

.mega-menu__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--v3-ink-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.mega-menu__more:hover {
  color: var(--rrs-accent);
}

.mega-menu__more svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.header-dark__nav-foot {
  display: grid;
  gap: var(--rrs-space-2);
  margin-top: var(--rrs-space-3);
}

.header-dark__address {
  font-style: normal;
}

.header-dark__burger {
  color: var(--v3-ink);
}

.header-dark__burger:hover {
  background-color: rgba(247, 245, 242, .08);
}

/* Подложка под открытым выпадающим меню — тот же приём блюра, что у
   .modal__overlay, но светлее: там сценарий «заблокировать страницу»,
   здесь — «чуть отделить» открытую панель от контента позади. initMenu()
   включает .is-open на любом верхнеуровневом раскрытии, не только у
   «Каталога» — так правило остаётся общим для меню, а не частным случаем. */
/* height: 100vh вместо inset(…0) снизу: у .header-dark есть собственный
   backdrop-filter (блюр шапки), а это делает его containing block для
   position: fixed потомков — bottom: 0 считался бы от низа 76-пиксельной
   шапки, а не от низа экрана, и подложка схлопывалась в нулевую высоту.
   vh в размере от containing block не зависит, top — зависит, но шапка
   всегда приклеена к y:0, так что с ним проблем нет. */
.header-dark__scrim {
  position: fixed;
  top: var(--v3-header-h);
  right: 0;
  left: 0;
  height: 100vh;
  z-index: calc(var(--rrs-z-nav) - 1);
  background-color: rgba(10, 9, 8, .6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--rrs-dur) var(--rrs-ease),
              visibility 0s linear var(--rrs-dur);
}

.header-dark__scrim.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--rrs-dur) var(--rrs-ease),
              visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   4. Hero — bento-сетка
   -------------------------------------------------------------------------- */

.hero-bento {
  display: flex;
  align-items: center;
  /* Именно min-height: на узком экране ячейки складываются в колонку
     и занимают больше — обрезать их нельзя. */
  min-height: 560px;
  padding-block: var(--rrs-space-3);
  background-color: var(--v3-page);
}

.hero-bento__container {
  width: 100%;
}

.hero-bento__grid {
  display: grid;
  gap: var(--v3-gap);
}

/* Мобильный порядок задан order, а не переносом узлов; фокусируемых
   элементов вне .hero-bento__intro нет, обход не расходится с видимым. */
.hero-bento__intro { order: 1; }
.hero-bento__stats { order: 2; }
.hero-bento__media { order: 3; }

.hero-bento__cell {
  position: relative;
  padding: var(--v3-cell-pad);
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  background-color: var(--v3-cell);
  animation: v3-rise var(--rrs-dur-slow) var(--rrs-ease) both;
}

@keyframes v3-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-bento__intro { animation-delay: .04s; }
.stats-bento__item:nth-child(1) { animation-delay: .1s; }
.stats-bento__item:nth-child(2) { animation-delay: .14s; }
.stats-bento__item:nth-child(3) { animation-delay: .18s; }
.stats-bento__item:nth-child(4) { animation-delay: .22s; }
.hero-bento__media { animation-delay: .16s; }

/* --- ячейка заголовка -------------------------------------------------- */

.hero-bento__intro {
  display: flex;
  flex-direction: column;
  gap: var(--rrs-space-2);
}

.hero-bento__label {
  color: var(--v3-ink-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--rrs-ls-label);
  text-transform: uppercase;
}

/* Лестница кегля H1 монотонна по ширине и не зависит от высоты окна:
   ≤359px — 23px, до 559px — 25→32px, до 899px — 32→36px, с 900px — 38→46px. */
.hero-bento__title {
  max-width: 20ch;
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.hero-bento__title {
  margin-bottom: var(--rrs-space-1);
}

.hero-bento__lead {
  max-width: 46ch;
  color: var(--v3-ink-muted);
  font-size: var(--rrs-fs-body);
  line-height: 1.55;
}

.hero-bento__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rrs-space-2);
  margin-top: auto;
  padding-top: var(--rrs-space-3);
}

.hero-bento__meta {
  display: grid;
  gap: var(--rrs-space-2);
  /* margin-top складывается с промежутком колонки (--rrs-space-2) до 24px */
  margin-top: var(--rrs-space-1);
  padding-top: var(--rrs-space-3);
  border-top: 1px solid var(--v3-line);
}

.hero-bento__scenarios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rrs-space-1);
}

.hero-bento__meta-title {
  color: var(--v3-ink-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--rrs-ls-label);
  text-transform: uppercase;
}

.hero-bento__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-bento__chip {
  padding: 4px 12px;
  border: 1px solid var(--v3-line);
  border-radius: var(--rrs-radius-pill);
  background-color: var(--v3-cell-hi);
  color: var(--v3-ink-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}


/* --- показатели --------------------------------------------------------- */

.stats-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v3-gap);
}

.stats-bento__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
}

.stats-bento__icon {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--rrs-accent);
}

.stats-bento__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.stats-bento__value {
  font-family: var(--rrs-font-heading);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.stats-bento__label {
  color: var(--v3-ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

/* --- ячейка с фотографией ------------------------------------------------ */

/* overflow: hidden тут нельзя — срежет кольцо свечения по границе ячейки.
   min-width/min-height: 0 заменяют то, что он давал неявно: без них
   min-width: auto держит колонку шире экрана на 320px. */
.hero-bento__media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
}

.hero-bento__img {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--v3-cell-hi);
  aspect-ratio: 16 / 10;
}

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

.hero-bento__caption {
  padding: 0 6px 4px;
  color: var(--v3-ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   5. Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .header-dark__phone {
    display: none;
  }
}

@media (min-width: 480px) {
  .header-dark__call {
    display: none;
  }
}

@media (min-width: 560px) {
  body[data-variant="3"] {
    --v3-cell-pad: 24px;
  }

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

  .hero-bento__lead {
    font-size: var(--rrs-fs-body-lg);
  }
}

@media (min-width: 760px) {

  .hero-bento__img {
    aspect-ratio: 21 / 9;
  }
}

/* 900px — значение --rrs-bp-nav из base.css: @media не читает var(),
   поэтому число продублировано здесь и менять его нужно в обоих местах. */
@media (min-width: 900px) {
  body[data-variant="3"] {
    --v3-header-h: 76px;
    --v3-logo-h: 54px;
  }

  .hero-bento {
    padding: 24px 0 32px 0;
  }

  .header-dark__burger {
    display: none;
  }

  .theme-toggle--header {
    display: inline-flex;
  }

  /* На десктопе створки-аккордеона нет — выпадение держат :hover/:focus-within
     и data-submenu-open через opacity/transform, без grid-rows. display:
     contents убирает панель из коробочной модели совсем, чтобы <ul> вёл себя
     так, будто остался прямым потомком <li>: тот же предок для position:
     absolute и нулевой риск конфликта специфичности с мобильными правилами
     выше. Селектор повторяет цепочку мобильного правила (а не просто
     .header-dark__submenu-panel) — иначе проигрывает ему по специфичности
     независимо от @media, и display: grid остаётся на десктопе. */
  .header-dark__menu > li[data-submenu] > .header-dark__submenu-panel {
    display: contents;
  }

  /* на 900px строка шапки самая тесная: всё обязано уместиться без переносов */
  .header-dark__row,
  .header-dark__contacts {
    gap: 12px;
  }

  .header-dark__messengers {
    gap: 4px;
  }

  .header-dark__messenger {
    width: 30px;
    height: 30px;
  }

  .header-dark__nav {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0;
    border-bottom: 0;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  /* Одна строка без переноса: высота шапки — токен, и расти ей нельзя. */
  .header-dark__menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 30px;
    min-width: 0;
  }

  /* Пункт во всю высоту строки: иначе между ним и подменю остаётся щель,
     на которой курсор теряет наведение. */
  .header-dark__menu > li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 0;
  }

  /* У «Каталога» высота <li> — вся строка шапки, не высота строки текста
     ссылки. Без этого между нижним краем <li> и верхом .mega-menu (у неё
     top: var(--v3-header-h), а не top: 100% от самого <li>) оставался
     зазор «ничьей» земли: курсор проходил через него по пути от ссылки
     к панели, ловил mouseleave и панель закрывалась раньше, чем курсор
     успевал до неё доехать. */
  .header-dark__item--mega {
    height: var(--v3-header-h);
  }

  .header-dark__menu .header-dark__link {
    display: block;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* Приглушённый цвет — только для обычных пунктов. Текущий пункт исключён
     явно, а не перебит специфичностью: у него и так уже есть
     [aria-current="page"] { color: var(--rrs-accent) } ниже в базовой
     секции, и гонка специфичности между двумя правилами с одинаковым
     числом классов решалась бы порядком объявления — хрупко и неочевидно
     при следующей правке. */
  .header-dark__menu .header-dark__link:not(.header-dark__link--static) {
    color: var(--v3-ink-muted);
  }

  .header-dark__menu > li > a::before {
    content: none;
  }

  .header-dark__menu a:hover {
    padding-left: 0;
    color: var(--v3-ink);
  }

  /* current-menu-parent — имя класса WordPress, в разметке оно такое же. */
  .header-dark__menu > li.current-menu-parent > a {
    color: var(--v3-ink);
  }

  /* Потомковый селектор: со скриптом между <li> и <ul> стоит
     .header-dark__submenu-panel (позиционирование ul это не меняет — он
     ищет ближайшего position-предка, а не прямого родителя, и панель сама
     static). Без скрипта <ul> остаётся прямым потомком и подпадает сюда же. */
  .header-dark__menu li ul {
    position: absolute;
    top: 100%;
    left: -14px;
    z-index: var(--rrs-z-nav);
    display: grid;
    min-width: 236px;
    max-width: calc(100vw - 2 * var(--rrs-container-pad));
    min-height: 0;
    padding: 8px 14px;
    border: 1px solid var(--v3-line-strong);
    border-radius: var(--rrs-radius-sharp);
    background-color: var(--v3-page);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    overflow: visible;
    /* Без скрипта слой прячется прозрачностью, а не visibility: иначе
       потомки выпадают из табуляции и :focus-within нечем вызвать. */
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--rrs-dur) var(--rrs-ease),
                transform var(--rrs-dur) var(--rrs-ease);
  }

  /* Со скриптом раскрытием управляет кнопка, и слой убирается из табуляции. */
  .header-dark__menu li[data-submenu] ul {
    visibility: hidden;
    transition: opacity var(--rrs-dur) var(--rrs-ease),
                transform var(--rrs-dur) var(--rrs-ease),
                visibility 0s linear var(--rrs-dur);
  }

  .header-dark__menu li ul > li + li {
    border-top: 0;
  }

  .header-dark__menu li ul .header-dark__sublink {
    padding: 7px 0;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Два непересекающихся пути: без скрипта открывает :hover/:focus-within,
     со скриптом — только атрибут (иначе focus-within спорит с Esc). */
  .header-dark__menu li:not([data-submenu]):hover ul,
  .header-dark__menu li:not([data-submenu]):focus-within ul,
  .header-dark__menu li[data-submenu][data-submenu-open] ul {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--rrs-dur) var(--rrs-ease),
                transform var(--rrs-dur) var(--rrs-ease),
                visibility 0s linear 0s;
  }

  .header-dark__toggle {
    width: 24px;
    height: 24px;
    margin-right: 0;
    margin-left: 2px;
  }

  .header-dark__toggle svg {
    width: 14px;
    height: 14px;
  }

  .header-dark__nav-foot {
    display: none;
  }

  /* --- мега-меню «Каталог», десктоп --------------------------------------
     Разметка одна и та же (см. мобильную базу выше) — здесь только то, что
     меняется на широком экране: сайдбар встаёт слева колонкой, а не сверху
     блоком, панель становится всплывающей картой вместо обычного потока. */
  .header-dark__item--mega .mega-menu {
    /* position: fixed + left: 50% центрирует панель по вьюпорту, а не по
       триггеру: пункт «Каталог» стоит не первым в строке меню, и якорение
       от самого <li> уводило панель вправо за край экрана. */
    position: fixed;
    top: var(--v3-header-h);
    left: 50%;
    z-index: var(--rrs-z-nav);
    display: grid;
    grid-template-columns: 220px 1fr;
    /* Сбрасывает мобильный margin-inline (full-bleed) — на position: fixed
       он сдвинул бы центрированную translateX(-50%)-панель в сторону. */
    margin-inline: 0;
    width: min(1180px, calc(100vw - 2 * var(--rrs-container-pad)));
    max-height: calc(100vh - var(--v3-header-h) - 24px);
    overflow-y: auto;
    border: 1px solid var(--v3-line-strong);
    border-radius: var(--rrs-radius-sharp);
    background-color: var(--v3-page);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity var(--rrs-dur) var(--rrs-ease),
                transform var(--rrs-dur) var(--rrs-ease),
                visibility 0s linear var(--rrs-dur);
  }

  .header-dark__item--mega[data-submenu-open] .mega-menu {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--rrs-dur) var(--rrs-ease),
                transform var(--rrs-dur) var(--rrs-ease),
                visibility 0s linear 0s;
  }

  /* Сайдбар растянут на всю высоту грида (высоту самой длинной панели —
     у «Продукция» 23 группы, ощутимо выше экрана), а не свой компактный
     размер: иначе промо-карточке некуда «прижиматься» к низу. Прижаты
     по отдельности: категории — к верху (position: sticky; top), промо —
     к низу (position: sticky; bottom) того же сайдбара. Так оба блока
     остаются на виду при любой прокрутке длинного списка групп, и ни один
     не пропадает, пока не долистаешь до конца. */
  .mega-menu__sidebar {
    display: flex;
    flex-direction: column;
    padding: var(--rrs-space-3);
    border-right: 1px solid var(--v3-line);
    background-color: var(--v3-cell);
  }

  /* На десктопе карточку сайдбара рисует .mega-menu__sidebar целиком —
     мобильные padding/border-bottom/background у категорий (нужны там,
     чтобы отделить блок после display: contents на сайдбаре) здесь лишние. */
  .mega-menu__categories {
    position: sticky;
    top: var(--rrs-space-3);
    order: initial;
    display: grid;
    flex-wrap: initial;
    gap: 2px;
    margin-inline: 0;
    padding: 0;
    margin-bottom: var(--rrs-space-3);
    overflow-x: visible;
    border-top: 0;
    border-bottom: 0;
    background: none;
  }

  .mega-menu__category {
    padding: 8px 14px;
    font-size: 13px;
    white-space: normal;
    border-color: transparent;
    background: none;
    text-align: left;
  }

  .mega-menu__category:hover {
    background-color: var(--v3-cell-hi);
  }

  .mega-menu__category[aria-selected="true"] {
    border-color: transparent;
    background-color: var(--v3-cell-hi);
    color: var(--rrs-accent);
  }

  .mega-menu__promo {
    position: sticky;
    bottom: var(--rrs-space-3);
    display: grid;
    gap: 6px;
    order: initial;
    margin: 0;
    margin-top: auto;
    padding: var(--rrs-space-2);
    border: 1px solid var(--v3-line);
    border-radius: var(--rrs-radius-sharp);
    background-color: var(--v3-page);
  }

  /* Снимаем мобильный contents-трюк: на десктопе .mega-menu__panels снова
     обычный блок с паддингом, активная панель — обычный блок внутри него.
     Поле поиска общее на все 4 категории (раньше дублировалось в каждой —
     одно и то же disabled-поле четыре раза), поэтому держится не в потоке
     заголовка/групп, а отдельным слоем сверху справа над панелью. */
  .mega-menu__panels {
    display: block;
    position: relative;
    padding: var(--rrs-space-3);
  }

  .mega-menu__panel:not([hidden]) {
    display: block;
  }

  .mega-menu__title {
    order: initial;
    margin-top: 0;
    margin-bottom: var(--rrs-space-3);
    padding-inline: 0;
    /* Резерв под поле поиска (220px + отступ) — заголовок блочный и тянется
       на всю ширину панели независимо от длины текста; без запаса длинное
       название категории могло бы залезть под поиск. */
    padding-right: calc(220px + var(--rrs-space-3));
  }

  .mega-menu__groups {
    order: initial;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .mega-menu__search {
    display: block;
    position: absolute;
    top: var(--rrs-space-3);
    right: var(--rrs-space-3);
    order: initial;
    width: 220px;
    margin: 0;
  }

  .mega-menu__groups {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--rrs-space-3) var(--rrs-space-2);
  }

  /* Укрупнённые мобильные размеры (см. базу выше) возвращаются к исходным
     компактным — на широкой панели с колонками групп крупный текст не
     нужен, там плотность важнее читаемости на расстоянии. */
  .mega-menu__group-title {
    font-size: 11px;
  }

  .mega-menu__group-list {
    gap: 2px;
  }

  .mega-menu__link {
    font-size: 13px;
  }

  .mega-menu__group-all {
    font-size: 12px;
  }

  .hero-bento__title {
    font-size: clamp(38px, 1.6vw + 15px, 46px);
  }

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

  /* порядок задают явные grid-column/grid-row ниже */
  .hero-bento__intro,
  .hero-bento__stats,
  .hero-bento__media {
    order: 0;
  }

  .hero-bento__intro {
    grid-column: 1 / 8;
    grid-row: 1;
  }

  .hero-bento__stats {
    grid-column: 1 / 8;
    grid-row: 2;
  }

  .hero-bento__media {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
  }

  /* flex: 1 1 0 + min-height: 0 отвязывают ячейку от пропорции файла:
     без них высоту первого экрана начинает диктовать сама фотография. */
  .hero-bento__media {
    min-height: 0;
  }

  .hero-bento__img {
    flex: 1 1 0;
    aspect-ratio: auto;
    min-height: 0;
  }

  .stats-bento__item {
    padding: 16px;
  }
}

/* Узкий десктоп: меню уже развёрнуто, но колонок на всё не хватает. */
@media (min-width: 900px) and (max-width: 1179px) {
  body[data-variant="3"] {
    --v3-cell-pad: 18px;
  }


  .header-dark__messenger {
    width: 28px;
    height: 28px;
  }

  .header-dark__messenger svg {
    width: 15px;
    height: 15px;
  }

  .header-dark__phone {
    font-size: 13.5px;
  }

  .hero-bento__intro,
  .hero-bento__stats {
    grid-column: 1 / 9;
  }

  .hero-bento__media {
    grid-column: 9 / 13;
  }

  .hero-bento__intro {
    gap: 10px;
  }

  .hero-bento__lead {
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.5;
  }

  .btn--bento,
  .btn--bento-ghost {
    padding: 12px 18px;
  }

  .hero-bento__meta {
    padding-top: 10px;
  }

  .hero-bento__chip {
    padding: 2px 9px;
    font-size: 11.5px;
  }

  .stats-bento__label {
    font-size: 11.5px;
  }
}

@media (min-width: 1180px) {
  body[data-variant="3"] {
    --v3-cell-pad: 28px;
  }

  .header-dark__row,
  .header-dark__contacts {
    gap: var(--rrs-space-2);
  }

  .header-dark__menu {
    gap: 40px;
  }

  .header-dark__menu > li > a {
    font-size: 13px;
  }

  .header-dark__messengers {
    gap: 6px;
  }

  .header-dark__messenger {
    width: 34px;
    height: 34px;
  }

  .header-dark__phone {
    font-size: 16px;
  }

  .stats-bento__item {
    padding: 20px;
  }
}

/* Кнопка в шапке только с 1320px: на 1280px строка уже впритык. */
@media (min-width: 1320px) {
  .header-dark__cta {
    display: inline-flex;
    white-space: nowrap;
  }

  /* Высота вровень с .header-dark__cta--ghost (44px) — без переопределения
     «Бесплатный замер» был выше за счёт паддинга .btn (14px 22px) из
     base.css, и рядом с «Заказать звонок» выглядел непропорционально
     крупным. Другие .btn--bento (hero и т.д.) не задеты — селектор
     исключает именно ghost-вариант этого же класса. */
  .header-dark__cta:not(.header-dark__cta--ghost) {
    height: 44px;
    padding: 0 20px;
  }
}

@media (min-width: 1600px) {
  .hero-bento__lead {
    font-size: 19px;
  }
}

/* Низкое окно десктопа — порог из набора base.css. */
@media (min-width: 900px) and (max-height: 1000px) {
  body[data-variant="3"] {
    --v3-cell-pad: 20px;
  }

  .hero-bento__lead {
    font-size: 15px;
    line-height: 1.5;
  }

  .stats-bento__icon svg {
    width: 18px;
    height: 18px;
  }

  .hero-bento__chip {
    padding: 2px 9px;
    font-size: 11.5px;
  }

}

/* Очень низкое окно десктопа — второй порог из набора base.css */
@media (min-width: 900px) and (max-height: 820px) {
  body[data-variant="3"] {
    --v3-header-h: 64px;
    --v3-logo-h: 46px;
  }

  .stats-bento__label {
    font-size: 11.5px;
  }

  .hero-bento__lead {
    max-width: 60ch;
    font-size: 14px;
  }

}

/* Ноутбук 1366×768 и 1280×720. Ужимаются поля и кнопки; кегль H1 не трогать —
   иначе лестница заголовка перестаёт быть монотонной по ширине. */
@media (min-width: 900px) and (max-height: 780px) {
  .hero-bento__lead {
    font-size: 13.5px;
    line-height: 1.4;
  }

  .btn--bento,
  .btn--bento-ghost {
    padding: 10px 16px;
  }

  .stats-bento__value {
    font-size: 22px;
  }

  .stats-bento__icon {
    margin-bottom: 0;
  }

  .stats-bento__icon svg {
    width: 16px;
    height: 16px;
  }

  .hero-bento__chip {
    padding: 1px 8px;
  }

  .btn--bento,
  .btn--bento-ghost {
    padding: 9px 15px;
  }
}

@media (max-width: 559px) {
  body[data-variant="3"] {
    --v3-cell-pad: 14px;
  }

  .header-dark__row {
    gap: 8px;
  }

  .header-dark__contacts {
    gap: 8px;
  }

  .header-dark__messenger,
  .header-dark__call {
    width: 30px;
    height: 30px;
  }

  .header-dark__messenger svg,
  .header-dark__call svg {
    width: 15px;
    height: 15px;
  }

  .header-dark__burger {
    width: 40px;
    height: 40px;
  }

  .hero-bento__intro {
    gap: 6px;
  }

  .hero-bento__label {
    font-size: 11px;
    line-height: 1.3;
  }

  .hero-bento__title {
    font-size: clamp(25px, 7vw, 32px);
    line-height: 1.04;
  }

  .hero-bento__lead {
    font-size: 14px;
    line-height: 1.45;
  }

  .btn--bento,
  .btn--bento-ghost {
    padding: 9px 15px;
  }

  .btn--bento .btn__icon,
  .btn--bento-ghost .btn__icon {
    width: 22px;
    height: 22px;
  }

  .hero-bento__actions {
    padding-top: 0;
  }

  .hero-bento__actions .btn {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  /* display: contents ниже распускает обе группы в один поток-обтекание */
  .hero-bento__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding-top: 8px;
  }

  .hero-bento__meta .hero-bento__scenarios,
  .hero-bento__meta .hero-bento__chips {
    display: contents;
  }

  .hero-bento__meta-title {
    font-size: 11px;
    line-height: 1.25;
  }

  /* Сценарии идут строкой через разделитель, а не пилюлями: вдвое ниже. */
  .hero-bento__scenarios {
    gap: 0 6px;
  }

  .hero-bento__scenarios .hero-bento__chip {
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 11.5px;
    line-height: 1.5;
  }

  .hero-bento__scenarios .hero-bento__chip:not(:last-child)::after {
    content: ' ·';
    color: var(--v3-ink-dim);
  }



  .stats-bento__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0 9px;
    padding: 8px 10px;
  }

  .stats-bento__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-top: 2px;
    margin-bottom: 0;
  }

  .stats-bento__value {
    font-size: 18px;
  }

  .stats-bento__label {
    font-size: 11.5px;
    line-height: 1.25;
  }

  .hero-bento__lead {
    font-size: 13.5px;
  }
}

/* Самые узкие устройства (320px). */
@media (max-width: 359px) {
  body[data-variant="3"] {
    --v3-cell-pad: 12px;
    --v3-logo-h: 32px;
  }

  .header-dark__contacts {
    gap: 6px;
  }

  .header-dark__messengers {
    gap: 3px;
  }

  .header-dark__messenger,
  .header-dark__call {
    width: 28px;
    height: 28px;
  }

  .header-dark__burger {
    width: 36px;
    height: 36px;
  }

  .hero-bento__title {
    font-size: 23px;
    line-height: 1.05;
  }

  .hero-bento__lead {
    font-size: 13px;
    line-height: 1.4;
  }

  .btn--bento,
  .btn--bento-ghost {
    padding: 9px 13px;
    font-size: 13px;
  }

  .hero-bento__meta-title,
  .hero-bento__scenarios .hero-bento__chip {
    font-size: 10.5px;
  }

  .stats-bento__value {
    font-size: 17px;
  }

  .stats-bento__label {
    font-size: 11px;
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-variant="3"],
  .header-dark,
  .home-section,
  .home-card,
  .header-dark__nav,
  .modal__dialog,
  .theme-toggle {
    transition-duration: .01ms;
  }
}

/* --------------------------------------------------------------------------
   6. Свечение контуров ячеек от курсора (js/glow.js)
   Кольцо в 1px: градиент по всей площади, маска оставляет от него рамку.
   Координаты центра пишет glow.js; анимируется только opacity, reflow нет.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-glow-cell] {
    /* До JS центр пятна лежит заведомо вне ячейки — контур как без скрипта */
    --v3-glow-x: -50vw;
    --v3-glow-y: -50vh;
  }

  [data-glow-cell]::after {
    content: "";
    position: absolute;
    z-index: 1;
    /* -1px, а не 0: слой считается от padding-бокса, и при inset: 0 рядом
       с настоящей рамкой появляется вторая линия. */
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background-image:
      radial-gradient(circle 120px at var(--v3-glow-x) var(--v3-glow-y),
        var(--rrs-accent-glow-core), var(--rrs-accent-transparent) 100%),
      radial-gradient(circle 460px at var(--v3-glow-x) var(--v3-glow-y),
        var(--rrs-accent-glow-wide), var(--rrs-accent-transparent) 100%);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--rrs-dur-slow) var(--rrs-ease);
  }

  /* data-glow ставит glow.js, пока курсор внутри сетки. */
  [data-glow-grid][data-glow="on"] [data-glow-cell]::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-glow-cell]::after {
    display: none;
  }
}