/* ==========================================================================
   AROLT v2 · фундамент · assets/v2/foundation.css
   Спецификация: docs/DESIGN-V2.md (разделы 2-8). Стиль - кит «Мягкий современный»
   (design-kit/styles/soft.css) в зелёной гамме боевого сайта, плюс фото товара на
   миллиметровке и таблица характеристик из «Инженерного», гигантский логотип в подвале
   из «Индустриального тёмного».

   Файл подключён после S1, внешних CSS и S2, его :root побеждает прежние значения.
   Правила пишутся с префиксом #v2 (id на <html>): сила (1,1,0) и выше перебивает
   контекстные правила первой версии. Полосы (home/catalog/solutions/info/checkout.css)
   подключены позже и пишут селекторы с id своего вида.
   ========================================================================== */

/* ==========================================================================
   1. Токены (раздел 2.2)
   ========================================================================== */
:root {
  /* Поверхности (правка 37 от 08.10): страница белая, тёплый кремовый холст ушёл.
     Блоки стоят на поверхностях: белая страница и светлые секции во всю ширину окна
     (.v2-alt) с волосяной линией по границе; карточки - белые с тонкой рамкой-кольцом. */
  --canvas: #FFFFFF;        /* фон страницы */
  --section: #EFF3EE;       /* светлая секция (.v2-alt), мобильное меню */
  --surface: #FFFFFF;       /* карточки, панели, окна */
  --field: #F1F4F0;         /* поля, окна фото, подложки на белом */
  --hairline: #E2E7E1;      /* волосяная линия, рамка карточки */
  /* Плитка категорий A5 (docs/IMAGES-CODEX.md, 4.1 и 10.1): пятно света под прозрачной картинкой
     изделия, заметно серее --field. Фон рисует сайт, в файле картинки его нет (раздел 25) */
  --a5-c: #F5F7F4;
  --a5-e: #DDE2DC;
  --a5-tile: radial-gradient(72% 70% at 50% 46%, var(--a5-c) 0%, var(--a5-e) 100%);
  --line-strong: #CDD5CC;   /* рамка вторичной кнопки, поле при наведении */
  --control: #858D86;

  /* Текст: светлота soft, оттенок зелёный */
  --ink: #161E17;
  --ink-2: #3C473E;
  --muted: #5A655B;
  --hint: #656F66;

  /* Зелёный AROLT */
  --brand: #2C6033;
  --brand-hover: #214A27;
  --brand-press: #1B381E;
  --brand-tint: #DDEBDB;
  --brand-tint-2: #CFE3CC;
  --brand-on-dark: #A3CC92;
  --band: #112D1A;
  --band-2: #183220;
  --on-band: #BACEBA;
  --footer: #0D2414;

  /* Чертёж на фото товара */
  --paper: #F0F1ED;
  --grid-minor: #E1E5DE;
  --grid-major: #CFD6CC;
  --dim-ink: var(--brand);

  /* Статусы */
  --danger: #B42318;  --danger-bg: #FDF0EE;
  --warn: #9A6200;    --warn-bg: #FBF4E6;

  /* Радиусы */
  --r: 20px;
  --inset: 8px;
  --r-in: calc(var(--r) - var(--inset));
  --r-pill: 999px;
  --r-check: 6px;

  /* Тени. --shadow - карточка стоит на поверхности: кольцо-рамка 1px и короткая контактная тень
     (не «парит» на широкой мягкой тени). --shadow-pop - всплывающие слои над страницей. */
  --shadow: 0 0 0 1px var(--hairline), 0 1px 2px rgb(22 30 23 / .04), 0 4px 12px -6px rgb(22 30 23 / .08);
  --shadow-pop: 0 0 0 1px rgb(22 30 23 / .05), 0 2px 6px rgb(22 30 23 / .06), 0 24px 56px -20px rgb(22 30 23 / .32);
  --shadow-header: 0 1px 0 var(--hairline), 0 12px 28px -18px rgb(22 30 23 / .32);

  /* Шрифты: Onest 400/500/600, IBM Plex Mono 400/500 - оба с кириллицей, ₸ и № */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 500;
  --fs-display: clamp(40px, 5vw, 72px);
  --fs-h1: clamp(32px, 3.4vw, 48px);
  --fs-h2: clamp(28px, 3vw, 44px);
  --fs-h3: clamp(20px, 1.6vw, 22px);
  --fs-lead: clamp(17px, 1.3vw, 19px);
  --fs-body: 16px; --fs-ui: 15px; --fs-sm: 14px; --fs-meta: 13px; --fs-micro: 12px;

  /* Ритм и сетка. Одна ширина контента на весь сайт (правка 2 от 08.10): шапка, контент, тёмные
     полосы, лид-полосы и подвал - от левого края логотипа до правого края «Заказать звонок».
     Ширину блока задаёт только width: var(--wrap) (или .container); 100% - ширина родителя,
     поэтому полоса прокрутки окна края не сдвигает. */
  --container: 1360px;
  --gutter: clamp(16px, 3.6vw, 56px);
  --wrap: min(var(--container), 100% - 2 * var(--gutter));
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));  /* для fixed-слоёв */
  --band-pad: clamp(24px, 4.4vw, 64px);   /* внутренний отступ тёмной полосы, лид-полосы, подвала */
  --alt-y: calc(var(--block) / 2);         /* светлая секция выходит за свой блок на столько сверху и снизу */
  /* Водяной знак лид-полосы: свой квадрат справа, полоса оставляет под него место (--lead-pad-end),
     поэтому ни форма, ни кнопки на знак не заходят. Высота - не больше высоты полосы минус 48px */
  --mark-box: clamp(150px, 17vw, 260px);
  --mark-size: min(var(--mark-box), calc(100% - 48px));
  --mark-right: var(--band-pad);
  --lead-pad-y: clamp(32px, 4.4vw, 64px);
  --lead-pad-end: calc(var(--band-pad) + var(--mark-box) + clamp(24px, 3vw, 48px));
  --mark-top-m: 16px; --mark-size-m: 176px;    /* на телефоне - в правом верхнем углу, целиком */
  --block: clamp(72px, 8vw, 120px);
  --head-gap: clamp(24px, 2.6vw, 40px);
  --gap: clamp(12px, 1.2vw, 16px);
  --band-y: clamp(56px, 6vw, 96px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --speed: 200ms;

  /* Размеры элементов управления */
  --btn-h: 52px; --btn-h-sm: 44px; --btn-px: 26px; --btn-px-sm: 20px;
  --ctl-h: 52px; --ctl-h-sm: 44px;
  --circ: 44px;  --circ-sm: 40px;

  /* Старые имена v1 → система v2 */
  --line: var(--hairline);
  --ink-3: var(--muted);
  --surface-2: var(--field);
  --brand-deep: var(--brand-hover);
  --brand-soft: var(--brand-tint);
  --bg: var(--canvas);
  --panel: var(--surface);
  --steel: var(--field);
  --graphite: var(--ink);
  --amber: var(--brand);
  --amber-soft: var(--brand-tint);
  --dark: var(--band);
  --on-dark: #FFFFFF;
  --on-dark-2: var(--on-band);
  --on-dark-line: rgb(255 255 255 / .14);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --r-lg: var(--r);
  --r-md: var(--r-in);
  --r-sm: var(--r-in);
  --r-full: var(--r-pill);
  --shadow-strong: var(--shadow-pop);
  --page-title: var(--fs-h1); --page-title-lh: 1.06;
  --page-lead: var(--fs-lead); --page-lead-lh: 1.5;
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px; --edge: 16px; --mobile-edge: 16px; --mobile-header-height: 64px;
    --gap: 12px; --block: 72px; --band-y: 48px; --band-pad: 20px;
    --fs-display: clamp(34px, 10.4vw, 46px); --fs-h1: 30px; --fs-h2: 28px; --fs-h3: 20px; --fs-lead: 17px;
  }
}

/* ==========================================================================
   2. База (разделы 3, 5.16, 8)
   ========================================================================== */
#v2 body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.55 var(--font);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#v2 body::before { content: none; display: none; }

/* Капс и положительная разрядка первой версии уходят целиком (раздел 11.1).
   Сила (1,0,0) выше любых классовых правил v1; у заголовков фундамента и полос - своя разрядка. */
#v2 *, #v2 *::before, #v2 *::after { text-transform: none; letter-spacing: inherit; }

#v2 ::selection { background: var(--brand-tint); color: var(--ink); }
#v2 :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Размеры заголовков - базой (0,0,1): контекстные размеры первой версии остаются, пока полоса
   не переведёт свой вид на шкалу; разрядка - с силой #v2, иначе её снимет сброс выше.
   Без text-wrap: balance / pretty у заголовков и текста: строки идут на всю ширину блока (правка 33),
   висячие предлоги и тире держит bindHangingWords. balance остаётся только у подписей внутри кнопок и опций */
:where(#v2) :is(h1, h2, h3, h4, h5, h6) { font-weight: 500; }
:where(#v2) h1 { font-size: var(--fs-h1); line-height: 1.06; }
:where(#v2) h2 { font-size: var(--fs-h2); line-height: 1.08; }
:where(#v2) h3 { font-size: var(--fs-h3); line-height: 1.25; }
#v2 h1, #v2 h2 { letter-spacing: -0.03em; }
#v2 h3 { letter-spacing: -0.015em; }
#v2 h4, #v2 h5, #v2 h6 { letter-spacing: -0.01em; }
:where(#v2) .lead { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }

#v2 .container { width: var(--wrap); margin-inline: auto; }
#v2 .view { padding: clamp(16px, 2vw, 28px) 0 0; }
/* Прямой заход не на главную: главная (в разметке она активна) не раскладывается до первого
   setView - её картинки первого экрана не грузятся. Класс ставит скрипт arolt-boot-view в <head> */
#v2.is-boot-inner main:not([data-server-view]) #view-home-d { display: none; }
/* Разметку собрал сервер (admin/lib/PageBody.php): экран адреса виден сразу, в той же раскладке, что нарисует сайт. Пока сайт
   не запустился, не видно только того, чего у него на экране нет: товаров за «Показать ещё» и комплектаций (is-boot-extras). Панель фильтров -
   без раскладки строк, её пересчитает сайт. Адрес с параметрами экрана (?material=…, ?scenario=…; метки utm и gclid не в счёт) сайт показывает по-другому, поэтому
   экран ждёт его, как раньше. Без JavaScript класса нет и видно всё */
#v2.is-boot-extras [data-server-extra] { display: none; }
#v2.is-boot-inner #view-category .filter { visibility: hidden; }
#v2.is-boot-inner.is-boot-query main > .view { display: none; }
@media (max-width: 760px) {
  #v2.is-boot-extras [data-server-extra-phone] { display: none; }
  /* В разметке «Показано 20», на телефоне сайт покажет 10 */
  #v2.is-boot-extras #view-tenders .tf__more { visibility: hidden; }
}
/* Скрипты сайта не загрузились (AROLT_BOOT_FAILED): карточки видны все, а кнопки и счётчики «Показать ещё» не работают */
#v2.is-boot-failed :is([data-catalog-more], [data-catalog-shown], .news-more, .tf__more) { display: none; }
/* Корзина и запрос КП: позиции лежат в браузере и появятся со скриптом, а пустой список с «0 позиций» неверен и потом прыгает */
#v2.is-boot-inner :is(#view-quote, #view-kp) .panel { visibility: hidden; }
/* Форма отправлена раньше скриптов сайта (arolt-form-guard) */
#v2 .form-wait { margin: 12px 0 0; color: inherit; font-size: 14px; line-height: 1.4; }
/* Новости до 1040: разделы и архив стоят над списком, а в разметке идут после него. Страница приходит частями, и список,
   показанный раньше них, потом съезжал вниз (CLS 0.17) */
@media (max-width: 1040px) {
  #v2.is-boot-inner #view-news .news-main { visibility: hidden; }
}
/* <main> всегда не ниже окна под шапкой, подвал - за нижним краем окна. Пока экран не выбран, <main>
   пуст, и подвал рисовался сразу под шапкой, а роутер потом сдвигал его вниз (CLS 0.57-0.75); временный
   min-height на время загрузки снимался вместе с классом, и на коротких экранах (404, пустой поиск,
   вход в кабинет) подвал прыгал вверх (CLS до 0.5). Постоянная высота - сдвига нет ни до, ни после.
   Без запасного значения --hd-h (его ставит скрипт в конце body) высота - целое окно, тоже за краем */
#v2 main { min-height: calc(100vh - var(--hd-h, 0px)); min-height: calc(100svh - var(--hd-h, 0px)); }
@media (max-width: 760px) {
  #v2 .view.is-active { padding: 24px 0 0; }
}

/* Первые экраны больше не растягиваются во всю ширину окна: стоят в контейнере (8, п. 5) */
#v2 #view-delivery, #v2 #view-privacy, #v2 #view-offer, #v2 #view-contacts,
#v2 #view-zhk, #v2 #view-tenders, #v2 #view-mvo, #v2 #view-business-selection { padding-top: clamp(16px, 2vw, 28px); }
#v2 .contacts-hero, #v2 .legal-hero, #v2 .bs-hero, #v2 .sol-hero {
  --bleed-inset: clamp(20px, 3vw, 48px);
  width: auto; max-width: none; margin-left: 0; margin-right: 0;
}
#v2 .bs-hero__inner, #v2 .sol-hero__content { max-width: none; margin-left: 0; margin-right: 0; }

/* Иконки: только контур 1.6 (5.16) */
#v2 .btn svg, #v2 .icon-btn svg, #v2 .search svg, #v2 .v2-ic {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#v2 .v2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#v2 .v2-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Фото товаров с почти белым фоном доводятся до белого, иначе под multiply виден прямоугольник (5.8) */
#v2 img[src*="/catalog/products/"]:not([src*="kontejnernaya-ploshhadka"]) { filter: brightness(1.04) contrast(1.03); }

/* ==========================================================================
   3. Кнопки (5.1)
   ========================================================================== */
/* display не задаётся: у первой версии кнопки прячутся правилами вида
   .delivery-address.is-calc-off [data-dlv-calc] { display: none } и [data-catalog-more][hidden] */
#v2 .btn {
  align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); height: auto; padding: 0 var(--btn-px);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); box-shadow: none; transform: none;
  font: 500 16px/1.2 var(--font); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
/* Без nowrap (в ките он есть): длинные подписи первой версии («Выставить удаленный счет на Kaspi»)
   должны переноситься в узкой колонке на телефоне, иначе колонка распирает страницу */
#v2 .btn:hover { transform: none; box-shadow: none; }
#v2 .btn svg { width: 18px; height: 18px; flex: none; }
#v2 .btn--sm, #v2 .v2-btn--sm { min-height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: 15px; }

#v2 .btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
#v2 .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
#v2 .btn--primary:active { background: var(--brand-press); border-color: var(--brand-press); }

#v2 .btn--outline, #v2 .btn--ghost, #v2 .hd-btn-ghost {
  background: transparent; border-color: var(--line-strong); color: var(--ink);
}
/* Наведение: на белой странице и в карточках - подложка --field, на светлой секции - белая */
#v2 .btn--outline:hover, #v2 .btn--ghost:hover, #v2 .hd-btn-ghost:hover { background: var(--field); border-color: var(--line-strong); color: var(--ink); }
#v2 :is(.v2-alt, .v2-on-canvas) :is(.btn--outline, .btn--ghost, .hd-btn-ghost):hover { background: var(--surface); border-color: var(--line-strong); }
#v2 .btn--outline:active, #v2 .btn--ghost:active { background: var(--hairline); }

#v2 .btn--amber, #v2 .btn--soft { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-hover); box-shadow: none; }
#v2 .btn--amber:hover, #v2 .btn--soft:hover,
#v2 .btn--amber:active, #v2 .btn--soft:active { background: var(--brand-tint-2); border-color: var(--brand-tint-2); color: var(--brand-hover); }

#v2 .btn:disabled, #v2 .btn.is-disabled, #v2 .btn[aria-disabled="true"] {
  background: var(--hairline); border-color: transparent; color: var(--hint);
  cursor: not-allowed; opacity: 1; transform: none; box-shadow: none;
}
#v2 .btn:disabled svg, #v2 .btn.is-disabled svg { opacity: 1; }
#v2 .btn[aria-busy="true"] { cursor: progress; opacity: .7; }

/* Кнопка-ссылка: текстовое действие со стрелкой */
#v2 .v2-link, #v2 .sol-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: color var(--speed) var(--ease);
}
#v2 .v2-link svg, #v2 .sol-link svg { width: 18px; height: 18px; transition: transform var(--speed) var(--ease); }
#v2 .v2-link:hover, #v2 .sol-link:hover { color: var(--brand-hover); }
#v2 .v2-link:hover svg, #v2 .sol-link:hover svg { transform: translateX(3px); }

/* Кнопки на тёмном: полоса и подвал */
#v2 :is(.v2-band, .site-footer) .btn--primary { background: #fff; border-color: #fff; color: var(--band); }
#v2 :is(.v2-band, .site-footer) .btn--primary:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--band); }
#v2 :is(.v2-band, .site-footer) :is(.btn--outline, .btn--ghost, .hd-btn-ghost) { background: transparent; border-color: rgb(255 255 255 / .4); color: #fff; }
#v2 :is(.v2-band, .site-footer) :is(.btn--outline, .btn--ghost, .hd-btn-ghost):hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .4); }
#v2 :is(.v2-band, .site-footer) :focus-visible { outline-color: var(--brand-on-dark); }
#v2 :is(.v2-band, .site-footer) :is(.v2-link, .sol-link) { color: var(--brand-on-dark); }

@media (max-width: 760px) {
  #v2 .btn { min-height: var(--btn-h); }
  #v2 .btn--sm, #v2 .v2-btn--sm { min-height: var(--btn-h-sm); }
}

/* ==========================================================================
   4. Круглые кнопки-иконки и кружки (5.2)
   ========================================================================== */
#v2 .v2-circ, #v2 .icon-btn {
  position: relative; place-items: center; flex: none;
  width: var(--circ); height: var(--circ); padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--field); color: var(--ink); box-shadow: none; transform: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .v2-alt :is(.v2-circ, .icon-btn):not(:hover):not(.v2-circ--accent):not(.v2-circ--tint) { background: var(--surface); }
#v2 .v2-circ:hover, #v2 .icon-btn:hover { background: var(--brand); color: #fff; transform: none; box-shadow: none; border-color: transparent; }
#v2 .v2-circ svg, #v2 .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

#v2 .v2-dot {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand);
}
#v2 .v2-dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#v2 .v2-dot--tint, #v2 :is(.v2-card, .panel) .v2-dot { background: var(--brand-tint); }
@media (max-width: 760px) { #v2 .v2-dot { width: 40px; height: 40px; } }

/* ==========================================================================
   5. Поля ввода и селекты (5.3)
   ========================================================================== */
/* Сила (1,0,0): наведение, фокус и ошибка ниже - (1,1,0), контекстные правила фундамента - (1,1,1) */
#v2 :where(input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"],
        input[type="password"], input[type="url"], input[type="date"], input:not([type]), select) {
  width: 100%; min-height: var(--ctl-h); height: var(--ctl-h);
  padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background-color: var(--field); color: var(--ink);
  font: 400 16px/1.2 var(--font);
  box-shadow: none; outline: 0;
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
#v2 :where(select) {
  appearance: none; -webkit-appearance: none;
  padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A655B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 18px 18px;
}
#v2 :where(textarea) {
  width: 100%; min-height: 128px; height: auto;
  padding: 16px 22px;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--field); color: var(--ink);
  font: 400 16px/1.5 var(--font);
  resize: vertical; box-shadow: none; outline: 0;
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
#v2 :where(input, textarea)::placeholder { color: var(--hint); opacity: 1; font-weight: 400; }
#v2 :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):hover { border-color: var(--line-strong); }
#v2 :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus {
  background-color: var(--surface); border-color: var(--brand); box-shadow: none; outline: 0;
}
/* На светлой секции поле белое (на белой странице и в белой карточке - --field, как выше) */
#v2 :is(.v2-alt, .v2-on-canvas) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background-color: var(--surface); }

/* Ошибка - после наведения и фокуса: красная рамка видна и в поле с фокусом */
#v2 :where(input, select, textarea):is([aria-invalid="true"], .is-invalid),
#v2 .quote-popup .field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: none; }
#v2 .lead-error, #v2 .v2-error { margin: 0; color: var(--danger); font-size: 13px; line-height: 1.4; font-weight: 400; }

/* Подпись и подсказка поля */
#v2 .field { gap: 8px; min-width: 0; }
#v2 .field > label, #v2 .v2-label {
  padding-left: 4px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.3;
}
/* Ошибка под полем - с того же отступа, что подпись над ним */
#v2 .field > .v2-error { padding-left: 4px; }

@media (max-width: 760px) {
  #v2 :where(input, select, textarea) { font-size: 16px; }
}

/* Поиск: капсула с иконкой, поле внутри прозрачное */
#v2 .search {
  align-items: center; gap: 10px;
  min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--field); color: var(--muted); box-shadow: none;
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
#v2 .search:hover { border-color: var(--line-strong); }
#v2 .search:focus-within { border-color: var(--brand); box-shadow: none; background: var(--surface); }
#v2 .search .search__icon { width: auto; flex: none; display: grid; place-items: center; color: var(--muted); }
#v2 .search .search__icon svg { width: 18px; height: 18px; }
#v2 .search input,
#v2 .search input:hover,
#v2 .search input:focus {
  flex: 1; width: 100%; min-width: 0; min-height: 0; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--ink); font-size: 15px; font-weight: 400;
}
#v2 .search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ==========================================================================
   6. Счётчик количества (5.4)
   ========================================================================== */
#v2 .qty {
  display: inline-flex; align-items: center; flex: none;
  height: 52px; padding: 4px; gap: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--field); overflow: visible;
}
#v2 .qty button {
  display: grid; place-items: center;
  width: 44px; height: 44px; min-height: 0; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font: 500 20px/1 var(--font);
  transition: background-color var(--speed) var(--ease);
}
#v2 .qty button:hover { background: var(--surface); }
#v2 .qty input,
#v2 .qty input:hover,
#v2 .qty input:focus {
  width: 40px; min-width: 0; min-height: 0; height: 44px; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  text-align: center; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums;
}
/* Фокус с клавиатуры на поле количества - то же зелёное кольцо, что у остальных элементов */
#v2 .qty input:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
#v2 .qty--sm, #v2 .quote-table .qty { height: 44px; }
#v2 .qty--sm button, #v2 .quote-table .qty button { width: 36px; height: 36px; }
#v2 .qty--sm input, #v2 .quote-table .qty input { height: 36px; }

/* ==========================================================================
   7. Чекбокс, радио, ползунок, файл (5.5)
   ========================================================================== */
#v2 input[type="checkbox"], #v2 input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--control); background: var(--surface);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
#v2 input[type="checkbox"] { border-radius: var(--r-check); }
#v2 input[type="radio"] { border-radius: 50%; }
#v2 input[type="checkbox"]:checked {
  border-color: var(--brand);
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
#v2 input[type="radio"]:checked { border: 6px solid var(--brand); background: var(--surface); }
#v2 input[type="checkbox"]:focus-visible, #v2 input[type="radio"]:focus-visible { outline: 0; box-shadow: var(--focus); }
#v2 input[type="checkbox"]:disabled, #v2 input[type="radio"]:disabled { border-color: var(--line-strong); background-color: var(--field); cursor: not-allowed; }

#v2 .check { align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; color: var(--ink); font-size: 15px; }
#v2 .check label { display: flex; align-items: center; gap: 12px; flex: 1; min-height: 36px; cursor: pointer; color: var(--ink); font-size: 15px; font-weight: 400; }
#v2 .check input { width: 20px; height: 20px; }
#v2 .check span:last-child { color: var(--muted); font-size: 13px; }
#v2 .check.is-blocked { opacity: 1; }
#v2 .check.is-blocked label, #v2 .check.is-blocked span:last-child { color: var(--hint); }

/* Заполнение дорожки - через --fill, если его ставит JS; первая версия его не ставит - дорожка без заполнения */
#v2 input[type="range"] {
  --fill: 0%;
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 20px; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: pointer; accent-color: var(--brand);
}
#v2 input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand) 0 var(--fill), var(--line-strong) var(--fill) 100%);
}
#v2 input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: var(--line-strong); }
#v2 input[type="range"]::-moz-range-progress { height: 4px; border-radius: var(--r-pill); background: var(--brand); }
#v2 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow);
}
#v2 input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
#v2 input[type="range"]:focus-visible { outline: 0; }
#v2 input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
/* .check-list, .range-head, .range-scale - только в фильтре каталога, стили в catalog.css */

#v2 .qf-file {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: var(--r);
  background: var(--field); cursor: pointer; box-shadow: none;
  transition: border-color var(--speed) var(--ease);
}
#v2 :is(.v2-alt, .v2-on-canvas) .qf-file { background: var(--surface); }
#v2 .qf-file:hover { border-color: var(--brand); background: var(--field); }
#v2 .qf-file:focus-within { border-color: var(--brand); box-shadow: none; }
#v2 .qf-file__ic {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand);
}
#v2 .qf-file__ic svg { width: 20px; height: 20px; stroke-width: 1.6; }
#v2 .qf-file__text strong { color: var(--ink); font-size: 15px; font-weight: 500; }
#v2 .qf-file__text span { color: var(--muted); font-size: 13px; }
#v2 .qf-file__list { gap: 0; margin-top: 8px; }
#v2 .qf-file__item {
  gap: 12px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent;
}
#v2 .qf-file__item::before { flex-basis: 6px; width: 6px; height: 6px; }
#v2 .qf-file__name { font-size: 14px; font-weight: 500; }
#v2 .qf-file__size { color: var(--muted); font-size: 13px; }
#v2 .qf-file__item button {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; min-height: 0; padding: 0;
  border: 0; border-radius: var(--r-pill); background: var(--field); color: var(--ink);
}
#v2 .qf-file__item button:hover { background: var(--hairline); }

/* Чипы фильтра */
#v2 .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#v2 .chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  border: 0; border-radius: var(--r-pill);
  background: var(--field); color: var(--ink);
  font: 400 15px/1.2 var(--font);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
#v2 .v2-alt .chip:not(.chip--active):not(.is-active):not([aria-pressed="true"]) { background: var(--surface); }
/* Счётчики в заголовках разделов и итоге заявки - бейджи, не фильтры (5.7) */
#v2 :is(.quote-section__head, .cart-summary__title) .chip,
#v2 :is(.quote-section__head, .cart-summary__title) .chip--active {
  min-height: 30px; padding: 0 12px; background: var(--brand-tint); color: var(--brand-hover);
  font-size: 13px; font-weight: 500; box-shadow: none;
}
#v2 .chip:hover, #v2 .chip--reset:hover { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); }
#v2 .chip--active, #v2 .chip.is-active, #v2 .chip[aria-pressed="true"] { background: var(--brand); color: #fff; }
#v2 .chip--active:hover { background: var(--brand-hover); color: #fff; box-shadow: none; }
#v2 .chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ==========================================================================
   9. Бейджи и статусы (5.7)
   ========================================================================== */

#v2 .stock, #v2 .stock--pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 0; margin-top: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--brand); font-size: 14px; font-weight: 400; white-space: nowrap;
}
#v2 .stock::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: none; }
/* Наличие с живого сайта: «Под заказ» (в заявку можно) и «Нет в наличии» (только уточнить) */
#v2 .stock--backorder { color: var(--warn); }
#v2 .stock--out { color: var(--muted); }

/* Зачёркнутая цена (regularPrice с живого сайта): приглушённая, обычного начертания, рядом с ценой */
#v2 .price-old {
  color: var(--muted); font-weight: 400; letter-spacing: 0; white-space: nowrap;
  text-decoration: line-through; text-decoration-thickness: 1px;
}

/* Счётчик корзины */
/* Выше и правее значка корзины: «99+» (больше 99 шт. JS не пишет) не ложится на ручку тележки */
#v2 .hd-cart-button__count, #v2 .hd-mobile-cart__count, #v2 .mobile-cart-count, #v2 .v2-count {
  position: absolute; top: -7px; right: -7px;
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--brand);
  box-shadow: 0 0 0 2px var(--canvas);
  font: 600 11px/1 var(--font);
}
#v2 [data-cart-count][hidden] { display: none; }

/* ==========================================================================
   10. Карточки, панели, окна, заметки (5.8)
   ========================================================================== */
/* У .panel - только цвет фона: тёмные первые экраны с классом panel (категория, «О компании»,
   политика) держат свою картинку-градиент, пока полоса не переведёт их на .v2-hero/.v2-pagehead */
#v2 .panel, #v2 .v2-card {
  background-color: var(--surface); border: 0; border-radius: var(--r); box-shadow: var(--shadow);
}

/* Товар без фото: знак AROLT в окне */
#v2 .product-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; background: var(--field); }
#v2 .product-placeholder img { width: 40%; max-width: 160px; height: auto; opacity: .25; filter: none; mix-blend-mode: multiply; }

/* ==========================================================================
   11. Заголовок секции и надзаголовок (5.9)
   ========================================================================== */

#v2 .eyebrow, #v2 .v2-eyebrow {
  display: inline-flex; align-items: center; gap: 0;
  margin-bottom: 12px;
  font-size: 15px; font-weight: 500; line-height: 1.3;
}
/* Цвет - базой: на тёмных первых экранах первой версии остаётся их светлый цвет */
:where(#v2) :is(.eyebrow, .v2-eyebrow) { color: var(--brand); }
#v2 .eyebrow::before, #v2 .v2-eyebrow::before { content: none; display: none; }
#v2 :is(.v2-band, .site-footer) :is(.eyebrow, .v2-eyebrow) { color: var(--brand-on-dark); }

#v2 .section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: var(--head-gap); }
#v2 .section-head h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.03em; }
#v2 .section-head > p, #v2 .section-head .lead { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }

/* ==========================================================================
   12. Выпадающие панели и подсказки поиска (5.10)
   ========================================================================== */
#v2 .search-suggest {
  top: calc(100% + 10px);
  gap: 4px; padding: 8px;
  border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow);
  color: var(--ink);
}
#v2 .search-suggest__group { gap: 2px; }
#v2 .search-suggest__label { padding: 8px 14px 4px; color: var(--muted); font-size: 13px; font-weight: 400; }
#v2 .search-suggest__item {
  gap: 2px 12px; padding: 12px 14px;
  border: 0; border-radius: var(--r-in);
  background: transparent; color: var(--ink);
  font: 400 15px/1.3 var(--font);
}
#v2 .search-suggest__item:hover, #v2 .search-suggest__item:focus-visible,
#v2 .search-suggest__item[aria-selected="true"], #v2 .search-suggest__item.is-active {
  border: 0; background: var(--field); color: var(--brand); outline: 0;
}
#v2 .search-suggest__item strong { font-size: 15px; font-weight: 400; line-height: 1.3; }
#v2 .search-suggest__item span { color: var(--muted); font-size: 13px; font-weight: 400; }
#v2 .search-suggest__item small { color: var(--muted); font-size: 13px; }
#v2 .search-suggest__note, #v2 .search-correction {
  padding: 12px 14px; border-radius: var(--r-in);
  background: var(--brand-tint); color: var(--brand-hover); font-size: 14px;
}
#v2 mark.ss-hl { padding: 0; border-radius: 0; background: var(--brand-tint); color: var(--brand-hover); }
/* «Показать все результаты» всегда видна внизу панели, даже когда список подсказок прокручивается */
#v2 .search-suggest__foot {
  position: sticky; bottom: -8px; z-index: 1;
  margin: 4px -8px -8px; padding: 12px 22px 14px;
  border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r) var(--r);
  background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 400;
}
#v2 .search-suggest__foot button { color: var(--brand); font-size: 14px; font-weight: 500; }

/* ==========================================================================
   13. Модальное окно (5.11)
   ========================================================================== */
#v2 .quote-popup__backdrop { background: rgb(22 30 23 / .45); backdrop-filter: blur(2px); }
#v2 .quote-popup__panel {
  width: min(560px, 100%);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-pop);
}
#v2 .quote-popup__head {
  gap: 12px 18px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 8px;
  border-bottom: 0;
}
#v2 .quote-popup__title { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
#v2 .quote-popup__sub { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
#v2 .quote-popup__close {
  width: 40px; height: 40px; border: 0; border-radius: var(--r-pill);
  background: var(--field); color: var(--ink);
  transition: background-color var(--speed) var(--ease);
}
#v2 .quote-popup__close:hover { border: 0; background: var(--hairline); }
#v2 .quote-popup__close svg { stroke: currentColor; stroke-width: 1.6; }
#v2 .quote-popup__form { gap: 16px; padding: 16px clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px); }
#v2 .quote-popup__row { gap: 16px; }
#v2 .quote-popup .field textarea { min-height: 96px; }
#v2 .quote-popup .qf-file { padding: 12px 16px; }
#v2 .quote-popup__actions { gap: 12px; }
#v2 .quote-popup__actions .btn { width: auto; min-height: var(--btn-h); justify-self: start; }
#v2 .quote-popup__legal { color: var(--muted); font-size: 12px; line-height: 1.45; }
/* «Подробная форма» (запрос КП, /kp) - текстовая ссылка справа от кнопки; подпись про данные - строкой ниже */
#v2 .quote-popup__actions { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; }
#v2 .quote-popup__actions > .quote-popup__legal { grid-column: 1 / -1; }
#v2 .quote-popup__more { justify-self: start; color: var(--brand); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
#v2 .quote-popup__more:hover { color: var(--brand-hover); }
/* «Заказать звонок» / «Получить консультацию»: только имя и телефон */
#v2 .quote-popup--callback [data-qp-extra] { display: none; }
/* Прокрутка формы у края не переходит на страницу под окном (сама страница закреплена lockPageScroll) */
#v2 :is(.quote-popup__panel, .quote-popup__form, .bp-sheet__panel, .hd-mobile-menu__scroll) { overscroll-behavior: contain; }
/* Блокировка прокрутки под окном (lockPageScroll в index.html): body закреплён на месте, полоса
   прокрутки окна остаётся видимой, чтобы ширина страницы не прыгала */
#v2.has-scroll-lock-gutter { overflow-y: scroll; }
#v2.is-scroll-locked body { overflow: visible; }
@media (max-width: 640px) {
  #v2 .quote-popup { place-items: end stretch; padding: 0; }
  #v2 .quote-popup__panel { width: 100%; max-height: calc(var(--qp-vh) - 24px); border-radius: var(--r) var(--r) 0 0; }
  #v2 .quote-popup__head { padding: 24px 16px 4px; }
  #v2 .quote-popup__title { font-size: 24px; }
  #v2 .quote-popup__form { padding: 12px 16px 24px; }
  #v2 .quote-popup__actions .btn { width: 100%; justify-self: stretch; }
  #v2 .quote-popup__actions { grid-template-columns: minmax(0, 1fr); }
  #v2 .quote-popup__more { justify-self: center; }
}

/* ==========================================================================
   14. Тост, лайтбокс, плавающие кнопки, «Заявка» на телефоне (5.12)
   ========================================================================== */
#v2 .toast {
  padding: 14px 20px; border-radius: var(--r);
  /* Светлая кромка: на тёмном подвале (почти того же цвета) тост читается отдельным слоем */
  background: var(--band); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .16), var(--shadow-pop);
  font-size: 15px; font-weight: 400; line-height: 1.45;
}
#v2 .toast.toast--error { background: var(--danger); }
/* Тост сверху под шапкой, справа по краю контента. Снизу он ложился на только что нажатую кнопку
   («Отправить заявку» в шторке попапа, «В заявку» и счётчик количества у нижнего края окна)
   и сливался с тёмным подвалом */
#v2 .toast {
  top: calc(var(--hd-h, 80px) + 12px); bottom: auto; right: var(--edge);
  transform: translateY(-12px);
}
#v2 .toast.is-visible { transform: none; }
@media (max-width: 760px) {
  #v2 .toast { top: calc(var(--mobile-header-height) + 8px); right: var(--mobile-edge); }
}

/* Закрытый просмотр фото скрыт целиком (visibility после затухания): крестик не ловит Tab
   и не читается из скрытого дерева. JS дополнительно ставит inert */
#v2 .image-lightbox { visibility: hidden; transition: opacity var(--speed) var(--ease), visibility 0s linear var(--speed); }
#v2 .image-lightbox.is-open { visibility: visible; transition: opacity var(--speed) var(--ease), visibility 0s; }
#v2 .image-lightbox { background: rgb(13 36 20 / .88); }
#v2 .image-lightbox img {
  width: auto; height: auto; max-width: min(100%, 1080px); max-height: min(82vh, 760px);
  padding: 24px; border-radius: var(--r); background: var(--surface); filter: none;
}
#v2 .image-lightbox__close {
  width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: 24px; line-height: 1;
}
#v2 .image-lightbox__close:hover { background: var(--brand); color: #fff; }

/* Справа - в поле страницы за краем контента, где оно есть (от ~1500px); уже - у края окна */
#v2 .floating-contacts { right: max(8px, var(--edge) - 56px); bottom: 24px; gap: 8px; }
#v2 .floating-contact {
  min-height: 44px; gap: 8px; padding: 0 18px 0 14px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
  font-size: 15px; font-weight: 500; transform: none;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .floating-contact:hover { transform: none; box-shadow: var(--shadow-pop); background: var(--field); }
#v2 .floating-contact__icon { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(29%) sepia(18%) saturate(1400%) hue-rotate(80deg) brightness(92%); }
#v2 .floating-contact--whatsapp { background: var(--brand); color: #fff; }
#v2 .floating-contact--whatsapp:hover { background: var(--brand-hover); }
#v2 .floating-contact--whatsapp .floating-contact__icon { filter: brightness(0) invert(1); }
@media (min-width: 761px) {
  /* Кнопки связи на всех страницах - круги 44px (развёрнутые с подписями закрывали первый экран).
     Подпись - всплывающая плашка слева при наведении и фокусе, для чтения с экрана она есть всегда. */
  #v2 .floating-contact { position: relative; width: 44px; min-height: 44px; padding: 0; }
  #v2 .floating-contact__label {
    position: absolute; top: 50%; right: calc(100% + 8px); width: 1px; height: 1px; margin: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; pointer-events: none;
  }
  #v2 .floating-contact:is(:hover, :focus-visible) .floating-contact__label {
    width: auto; height: auto; overflow: visible; clip: auto; padding: 8px 12px; transform: translateY(-50%);
    border-radius: var(--r-pill); background: var(--ink); color: #fff; box-shadow: var(--shadow-pop);
    font-size: 14px; font-weight: 500; line-height: 1;
  }
  /* До конца первого экрана кнопок нет: класс ставит прокрутка (setupStickyHeaderState) */
  #v2 .floating-contacts { transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease), translate var(--speed) var(--ease); }
  #v2 body:not(.is-past-first-screen) .floating-contacts { opacity: 0; visibility: hidden; translate: 0 8px; pointer-events: none; }
  /* У подвала свои телефон и WhatsApp (класс ставит IntersectionObserver в setupStickyHeaderState);
     на заявке кнопки ложились на поле «Что нужно» и кнопки сводки */
  #v2 body:is(.is-footer-visible, .is-quote-view, .is-kp-view) .floating-contacts { opacity: 0; visibility: hidden; translate: 0 8px; pointer-events: none; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  #v2 .floating-contacts { transition: none; translate: none; }
}

#v2 .mobile-cart-fab {
  min-height: 52px; gap: 10px; padding: 0 22px;
  border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; box-shadow: var(--shadow-pop);
  font-size: 15px; font-weight: 500;
}
#v2 .mobile-cart-fab svg { width: 20px; height: 20px; stroke-width: 1.6; }
#v2 .mobile-cart-fab .mobile-cart-count { position: static; box-shadow: none; }

/* ==========================================================================
   15. Крошки, «Показать ещё», пустые состояния (5.13)
   ========================================================================== */
#v2 .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 20px; color: var(--muted); font-size: 14px; line-height: 1.4; }
#v2 .breadcrumb a { color: var(--muted); transition: color var(--speed) var(--ease); }
/* Телефон: зона нажатия крошки 40px по высоте, строка остаётся прежней */
@media (max-width: 760px) {
  #v2 .breadcrumb a { padding-block: 10px; margin-block: -10px; }
}
#v2 .breadcrumb a:hover { color: var(--brand); }
#v2 .breadcrumb > :last-child:not(a) { color: var(--ink); }

#v2 .pagination { gap: 12px; padding-top: 32px; color: var(--muted); font-size: 14px; }

#v2 .catalog-empty, #v2 .search-empty {
  padding: clamp(28px, 4vw, 48px); border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); text-align: center; color: var(--muted);
}
#v2 .catalog-empty h3, #v2 .search-empty h3 { margin: 0 0 8px; color: var(--ink); font-size: var(--fs-h3); }
#v2 .catalog-empty p, #v2 .search-empty p { margin: 0 auto 20px; color: var(--muted); font-size: 16px; }

/* ==========================================================================
   16. Шапка (5.14)
   ========================================================================== */
/* «Перейти к содержимому» - первая остановка Tab, видна только в фокусе: капсула слева сверху */
#v2 .v2-skip {
  position: fixed; top: 12px; left: var(--edge); z-index: 1000;
  display: inline-flex; align-items: center; min-height: var(--btn-h-sm); padding: 0 18px;
  border-radius: var(--r-pill); background: var(--brand); color: #fff;
  font: 500 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  transform: translateY(calc(-100% - 24px));
}
/* Тень - только у показанной: у спрятанной над окном она проступала серой полосой над логотипом */
#v2 .v2-skip:focus { transform: none; box-shadow: var(--shadow-pop); outline: 2px solid var(--brand); outline-offset: 2px; }
/* Фокус после перехода (содержимое, заголовок экрана) ставит скрипт - рамка вокруг них не нужна */
#v2 main:focus, #v2 main > .view:focus, #v2 main > .view h1[tabindex="-1"]:focus { outline: 0; }

#v2 .global-hd-header-shell,
#v2 body.is-home-d-view .global-hd-header-shell {
  --hd-edge: var(--edge);
  /* inset целиком, а не отдельный top: 0 - его сбрасывал `inset: auto`, и шапка уезжала вверх
     вместе со страницей */
  /* Свой слой (правка 38 от 08.10): белая поверхность, линия снизу всегда; после прокрутки -
     мягкая тень, шапка читается отдельным слоем над любым блоком страницы */
  /* Фон сплошной и без backdrop-filter: Safari 26+ на iPhone красит место под своей адресной
     строкой (между часами и шапкой) цветом липкой шапки, но только если у неё нет backdrop-filter
     (WebKit, LocalFrameView::fixedContainerEdges). С размытием он показывал там страницу -
     товары и кнопки проезжали над логотипом (правка заказчика 29.10) */
  position: sticky; inset: 0 auto auto;
  width: auto; min-height: 0; z-index: 90;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--hairline); color: var(--ink);
  transition: box-shadow .25s var(--ease);
}
#v2 .global-hd-header-shell.is-scrolled,
#v2 body.is-home-d-view .global-hd-header-shell.is-scrolled {
  box-shadow: var(--shadow-header);
}
/* Белая полоса над шапкой: закрывает страницу между часами и шапкой во встроенном браузере
   Telegram (ниже). Полоса уходит вверх за край окна, на десктопе её не видно */
#v2 .global-hd-header-shell::before {
  content: ""; position: absolute; right: 0; bottom: 100%; left: 0;
  height: 240px; background: var(--surface); pointer-events: none;
}
/* Встроенный браузер Telegram на iPhone (класс ставит скрипт arolt-tg-browser в index.html).
   Окно страницы у него начинается под прозрачной шапкой Telegram и не обрезает то, что выше,
   поэтому между часами и нашей шапкой проезжала страница (правка заказчика 29.10). Полосу ::before
   там не видно: WebKit с iOS 26 обрезает липкие и fixed-слои по краю окна, но только когда их
   ближайший слой - корень страницы (RenderLayerCompositor, viewport clipping). Свой слой у body
   снимает обрезку. opacity в will-change не меняет отсчёт position: fixed - меню и шторки на месте */
#v2.is-tg-browser body { will-change: opacity; }
/* Без обрезки «Перейти к содержимому», спрятанная над окном, проступала в том же промежутке */
#v2.is-tg-browser .v2-skip:not(:focus) { opacity: 0; }
/* Метка тестовой копии (вторая версия на 7.seoweb.kz/2): ставит скрипт arolt-base в index.html,
   на боевом сайте её нет. Висит по центру верхней кромки шапки, в её пустом верхнем поле:
   ничего не закрывает, не сдвигает и не ловит нажатия */
#v2 .site-copy-badge {
  position: absolute; top: 0; left: 50%; z-index: 1;
  transform: translateX(-50%);
  margin: 0; padding: 0 10px 2px;
  border-radius: 0 0 8px 8px;
  background: var(--warn-bg); color: var(--warn);
  box-shadow: 0 0 0 1px rgb(154 98 0 / .18);
  font-size: 11px; font-weight: var(--fw-medium); line-height: 12px;
  white-space: nowrap; pointer-events: none;
}
/* Телефон в подтверждении заявки на тестовой копии (leadSentBox в index.html): не рвётся по дефису */
#v2 .lead-test-phone { white-space: nowrap; }
/* Поля шапки = поля контента: левый край логотипа и правый край «Заказать звонок» стоят на линиях
   .container (--wrap). Проценты считаются от ширины шапки, а не окна: полоса прокрутки не сдвигает */
#v2 .hd-header,
#v2 .global-hd-header-shell .hd-header,
#v2 body.is-home-d-view .global-hd-header-shell .hd-header {
  --hd-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 12px;
  min-height: 80px; padding: 0 var(--hd-inline);
}

#v2 .hd-logo { display: inline-flex; flex-direction: column; gap: 3px; flex: none; color: var(--ink); }
#v2 .hd-logo img { width: 116px; height: auto; max-height: none; filter: none; }
#v2 .hd-logo span { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }

/* Меню */
#v2 .hd-nav { order: 0; display: flex; align-items: center; gap: 2px; width: auto; margin: 0; }
#v2 .hd-nav > a,
#v2 .hd-catalog-mega > summary,
#v2 .hd-solutions-menu > summary {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 11px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font: 400 15px/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .hd-nav > a:hover,
#v2 .hd-catalog-mega:hover > summary,
#v2 .hd-catalog-mega[open] > summary,
#v2 .hd-catalog-mega:focus-within > summary,
#v2 .hd-solutions-menu:hover > summary,
#v2 .hd-solutions-menu[open] > summary,
#v2 .hd-solutions-menu:focus-within > summary { background: var(--field); color: var(--ink); }
#v2 .hd-nav > a[aria-current="page"], #v2 .hd-nav > a.is-active { color: var(--brand); }
/* «Каталог» на каталоге, категории, товаре и поиске, «Решения» на страницах решений (ставит роутер) */
#v2 .hd-nav > details > summary[aria-current] { color: var(--brand); }
#v2 .hd-nav > details > summary[aria-current] svg { stroke: currentColor; }
#v2 .hd-catalog-mega > summary svg,
#v2 .hd-solutions-menu > summary svg { width: 16px; height: 16px; stroke: var(--muted); stroke-width: 1.6; fill: none; transition: transform var(--speed) var(--ease); }
#v2 .hd-catalog-mega[open] > summary svg,
#v2 .hd-solutions-menu[open] > summary svg,
#v2 .hd-catalog-mega:hover > summary svg,
#v2 .hd-solutions-menu:hover > summary svg { transform: rotate(180deg); }

/* Мега-меню каталога: по левому краю логотипа */
#v2 .hd-catalog-mega__panel {
  top: calc(100% - 6px);
  /* от края логотипа до края кнопки «Заказать звонок» - одна ширина с шапкой (правка 2) */
  left: var(--hd-inline); width: calc(100% - var(--hd-inline) * 2);
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: var(--inset);
  border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); color: var(--ink);
  transform: translateY(6px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
}
#v2 .hd-catalog-mega__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; }
#v2 .hd-catalog-mega:hover .hd-catalog-mega__panel,
#v2 .hd-catalog-mega:focus-within .hd-catalog-mega__panel,
#v2 .hd-catalog-mega[open] .hd-catalog-mega__panel { transform: none; }
/* Закрыто по Escape: панель скрыта, хотя курсор или фокус ещё на пункте меню (JS снимает флаг) */
#v2 .hd-catalog-mega[data-dismissed]:not([open]) .hd-catalog-mega__panel,
#v2 .hd-solutions-menu[data-dismissed]:not([open]) .hd-solutions-menu__panel {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
}
#v2 .hd-catalog-mega[data-dismissed]:not([open]) > summary svg,
#v2 .hd-solutions-menu[data-dismissed]:not([open]) > summary svg { transform: none; }
/* Без анимации движения (настройка системы): выпадающие меню и уведомление появляются без сдвига,
   стрелка пункта меню поворачивается сразу */
@media (prefers-reduced-motion: reduce) {
  #v2 .hd-catalog-mega__panel, #v2 .hd-solutions-menu__panel, #v2 .toast { transform: none; transition-property: opacity, visibility; }
  #v2 .hd-catalog-mega > summary svg, #v2 .hd-solutions-menu > summary svg { transition: none; }
}
/* Правка 19.10: «Все товары» - зелёная кнопка сразу после заголовка, а не ссылка у правого края */
#v2 .hd-catalog-mega__top {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  padding: 10px 14px 12px; border-bottom: 0; background: transparent;
}
#v2 .hd-catalog-mega__top strong { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
#v2 .hd-catalog-mega__all {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 500; line-height: 1;
  transition: background-color var(--speed) var(--ease);
}
#v2 .hd-catalog-mega__all:hover, #v2 .hd-catalog-mega__all:focus-visible { background: var(--brand-hover); color: #fff; }
#v2 .hd-catalog-mega__item {
  min-height: 0; grid-template-columns: 64px minmax(0, 1fr); gap: 14px;
  padding: 8px; border: 0; border-radius: var(--r-in);
  background: transparent; color: var(--ink); transform: none;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .hd-catalog-mega__item:hover { border: 0; background: var(--field); color: var(--brand); transform: none; }
#v2 .hd-catalog-mega__media { width: 64px; height: 64px; border-radius: var(--r-in); background: var(--field); }
#v2 .hd-catalog-mega__media img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
/* Закрытое мега-меню не рисует окна с фото (размер окна задан): картинки (loading="lazy") грузятся
   при первом открытии, а не на каждой странице. allow-discrete: при закрытии - после затухания */
#v2 .hd-catalog-mega:not([open], :hover, :focus-within) .hd-catalog-mega__media { content-visibility: hidden; }
#v2 .hd-catalog-mega__media { transition: content-visibility var(--speed) allow-discrete; }
#v2 .hd-catalog-mega__item:hover .hd-catalog-mega__media { background: var(--surface); }
#v2 .hd-catalog-mega__copy { gap: 2px; }
#v2 .hd-catalog-mega__copy strong { font-size: 15px; font-weight: 400; line-height: 1.3; }
#v2 .hd-catalog-mega__copy span { color: var(--muted); font-size: 13px; }

/* Решения */
#v2 .hd-solutions-menu__panel {
  top: calc(100% + 14px); left: -8px; width: 360px;
  gap: 0; padding: var(--inset);
  border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); color: var(--ink);
  transform: translateY(6px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
}
#v2 .hd-solutions-menu__panel::before { bottom: 100%; height: 18px; }
#v2 .hd-solutions-menu:hover .hd-solutions-menu__panel,
#v2 .hd-solutions-menu:focus-within .hd-solutions-menu__panel,
#v2 .hd-solutions-menu[open] .hd-solutions-menu__panel { transform: none; }
#v2 .hd-solutions-menu__item {
  gap: 2px; padding: 12px 14px; border-radius: var(--r-in);
  background: transparent; color: var(--ink);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .hd-solutions-menu__item:hover { background: var(--field); color: var(--brand); }
#v2 .hd-solutions-menu__item strong { font-size: 15px; font-weight: 400; line-height: 1.3; }
#v2 .hd-solutions-menu__item span, #v2 .hd-solutions-menu__item:hover span { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Поиск в шапке */
#v2 .hd-header .hd-search {
  order: 0; flex: 1 1 240px; width: auto; max-width: 340px; min-width: 220px;
  height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); margin-left: auto; padding: 0 16px;
  border: 1px solid transparent; background: var(--field); color: var(--muted);
}
#v2 .hd-header .hd-search:hover { border-color: var(--line-strong); }
#v2 .hd-header .hd-search:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: none; }
#v2 .hd-search .search__icon { width: auto; color: var(--muted); }
#v2 .hd-search input, #v2 .hd-search input:focus { padding: 0; color: var(--ink); font-size: 15px; }
#v2 .hd-search input::placeholder { color: var(--hint); }
/* Подсказки - от левого края поля и по его ширине (раньше 420px от правого края и вылезали влево на меню).
   Узкое поле (1440: 263px, от 1630: 213px) - не уже 360px, лишнее уходит вправо, левый край совпадает */
#v2 .hd-search .search-suggest { left: 0; right: 0; width: auto; min-width: 360px; }

/* Телефон */
#v2 .hd-phone { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ink); }
#v2 .hd-phone svg { display: none; width: 16px; height: 16px; stroke: var(--muted); stroke-width: 1.6; fill: none; }
#v2 .hd-phone b { display: block; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
#v2 .hd-phone span { display: block; }
#v2 .hd-phone span span { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.3; }
#v2 .hd-phone:hover b { color: var(--brand); }

/* Корзина: зелёный круг; от 1630 - капсула с подписью */
#v2 .hd-header .hd-cart-button {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--circ); height: var(--circ); min-height: var(--circ); padding: 0; gap: 8px;
  border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; transform: none;
  transition: background-color var(--speed) var(--ease);
}
#v2 .hd-header .hd-cart-button:hover { background: var(--brand-hover); border: 0; transform: none; }
#v2 .hd-cart-button > svg { width: 20px; height: 20px; stroke-width: 1.6; }
#v2 .hd-cart-button__copy { display: none; }
#v2 .hd-cart-button__count { display: inline-grid; }
#v2 .hd-cart-button__count[hidden] { display: none; }

/* «Заказать звонок» - вторичная малая */
#v2 .hd-header .hd-call {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: var(--btn-h-sm); min-height: var(--btn-h-sm); padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font: 500 15px/1 var(--font); white-space: nowrap; transform: none;
  transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
#v2 .hd-header .hd-call:hover { background: var(--field); border-color: var(--line-strong); color: var(--ink); transform: none; }

/* Адрес под телефоном - там же, где в v1: 761-1180 и от 1630 */
@media (min-width: 1181px) and (max-width: 1629px) {
  #v2 .hd-phone span span { display: none; }
}

/* От 1630: корзина - капсула с подписью «Пусто / N шт.», счётчик число не дублирует (как в v1).
   Шапка той же ширины, что контент (--container 1360): с кругом кабинета капсула не влезала на 31px -
   промежутки 12px и поиск не уже 200px (подсказка «Поиск по каталогу» - 134px, помещается) */
@media (min-width: 1630px) {
  #v2 .hd-header,
  #v2 .global-hd-header-shell .hd-header,
  #v2 body.is-home-d-view .global-hd-header-shell .hd-header { gap: 12px; }
  #v2 .hd-header .hd-search { min-width: 200px; }
  #v2 .hd-nav > a, #v2 .hd-catalog-mega > summary, #v2 .hd-solutions-menu > summary { padding: 0 12px; }
  #v2 .hd-header .hd-cart-button { display: inline-flex; align-items: center; width: auto; padding: 0 18px 0 14px; }
  #v2 .hd-cart-button__copy { display: block; }
  #v2 .hd-cart-button__copy strong { display: block; color: #fff; font: 500 15px/1 var(--font); white-space: nowrap; }
  #v2 .hd-cart-button__count { display: none; }
}

/* 761-1400: две строки - меню второй строкой. До 1401 телефон (v1 показывает его на всех
   ширинах от 761) и круг личного кабинета не помещаются в одну строку рядом с меню и поиском:
   «Заказать звонок» выходил за правый край контента (на 1366 - на 26px) */
@media (min-width: 761px) and (max-width: 1400px) {
  #v2 .hd-header,
  #v2 .global-hd-header-shell .hd-header,
  #v2 body.is-home-d-view .global-hd-header-shell .hd-header {
    flex-wrap: wrap; row-gap: 0; min-height: 0;
  }
  #v2 .hd-logo { height: 72px; justify-content: center; }
  #v2 .hd-header .hd-search { flex: 1 1 200px; max-width: none; min-width: 0; }
  #v2 .hd-nav { order: 5; flex: 0 0 100%; width: 100%; margin: 0 0 0 -14px; padding-bottom: 10px; gap: 2px; }
  #v2 .hd-nav > a, #v2 .hd-catalog-mega > summary, #v2 .hd-solutions-menu > summary { height: 40px; padding: 0 14px; font-size: 15px; }
  #v2 .hd-catalog-mega__panel { top: calc(100% - 4px); }
}
/* Узкий планшет: телефон с адресом, корзина и «Заказать звонок» оставляют поиску меньше места -
   ужимаем промежутки, чтобы подсказка «Поиск по каталогу» не обрезалась */
@media (min-width: 761px) and (max-width: 900px) {
  #v2 .hd-header,
  #v2 .global-hd-header-shell .hd-header,
  #v2 body.is-home-d-view .global-hd-header-shell .hd-header { column-gap: 8px; }
  #v2 .hd-header .hd-search { padding: 0 14px; gap: 8px; }
  #v2 .hd-header .hd-call { padding: 0 14px; }
}

/* ≤ 760: строка 64px, справа круги корзины и меню */
@media (max-width: 760px) {
  /* mobile.css ставит body `overflow-x: hidden` (а открытое меню - `overflow: hidden`): при html
     с overflow-x: clip body от этого становится контейнером прокрутки, и sticky-шапка уезжает
     вместе со страницей. clip режет так же, но контейнером прокрутки не делает */
  #v2 body, #v2 body.is-mobile-menu-open { overflow-x: clip; overflow-y: visible; }
  #v2 .global-hd-header-shell,
  #v2 body.is-home-d-view .global-hd-header-shell {
    position: sticky; top: 0; min-height: var(--mobile-header-height);
    background: var(--surface); box-shadow: 0 1px 0 var(--hairline);
  }
  #v2 .global-hd-header-shell.is-scrolled,
  #v2 body.is-home-d-view .global-hd-header-shell.is-scrolled { box-shadow: var(--shadow-header); }
  #v2 body.is-mobile-menu-open .global-hd-header-shell { box-shadow: 0 1px 0 var(--hairline); }
  #v2 .hd-header,
  #v2 .global-hd-header-shell .hd-header,
  #v2 body.is-home-d-view .global-hd-header-shell .hd-header {
    min-height: var(--mobile-header-height); height: var(--mobile-header-height);
    justify-content: space-between; gap: 12px; padding: 0 var(--mobile-edge);
  }
  #v2 .hd-logo { gap: 2px; }
  #v2 .hd-logo img { width: 96px; height: auto; max-height: none; }
  #v2 .hd-logo span { color: var(--muted); font-size: 11px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
  #v2 .hd-nav, #v2 .hd-phone, #v2 .hd-header .hd-cart-button, #v2 .hd-header .hd-call, #v2 .hd-header .hd-search { display: none; }
  #v2 .hd-mobile-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  #v2 .hd-mobile-cart, #v2 .hd-mobile-menu-toggle {
    position: relative; display: grid; place-items: center;
    width: var(--circ-sm); height: var(--circ-sm); padding: 0;
    border: 0; border-radius: var(--r-pill);
    background: var(--field); color: var(--ink);
  }
  #v2 .hd-mobile-cart { background: var(--brand); color: #fff; }
  #v2 .hd-mobile-cart svg, #v2 .hd-mobile-menu-toggle svg { width: 20px; height: 20px; stroke-width: 1.6; }
  #v2 body.is-mobile-menu-open .hd-mobile-menu-toggle { background: var(--ink); color: #fff; }

  /* Мобильное меню */
  #v2 .hd-mobile-menu { border-top: 0; background: var(--section); color: var(--ink); }
  #v2 .hd-mobile-menu__scroll { padding: 12px var(--mobile-edge) max(32px, env(safe-area-inset-bottom)); }
  #v2 .hd-mobile-menu .hd-search-mobile {
    display: flex; height: 48px; min-height: 48px; margin-bottom: 16px;
    background: var(--surface); border: 1px solid transparent;
  }
  #v2 .hd-mobile-menu__quick {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
    padding: var(--inset); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  }
  #v2 .hd-mobile-menu__quick a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0 14px;
    border: 0; border-radius: var(--r-in); background: transparent; color: var(--ink);
    font-size: 16px; font-weight: 400;
  }
  #v2 .hd-mobile-menu__quick a::after {
    content: ""; width: 18px; height: 18px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A655B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #v2 .hd-mobile-menu__quick a:hover { background: var(--field); }
  #v2 .hd-mobile-menu__quick .hd-mobile-menu__catalog { grid-column: auto; color: var(--brand); background: transparent; border: 0; font-size: 16px; font-weight: 500; }
  #v2 .hd-mobile-menu__quick .hd-mobile-menu__catalog svg { display: none; }
  #v2 .hd-mobile-menu__section { margin-top: 28px; }
  #v2 .hd-mobile-menu__heading { margin: 0 0 12px 4px; color: var(--brand); font-size: 15px; font-weight: 500; }
  #v2 .hd-mobile-menu__categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Нечётная последняя карточка («Урны» девятой) - на всю ширину, без пустой ячейки рядом */
  #v2 .hd-mobile-menu__categories > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Закрытое меню не раскладывает категории: их картинки (loading="lazy") не грузятся, пока меню
     не открыли. allow-discrete: при закрытии содержимое прячется после затухания меню */
  #v2 body:not(.is-mobile-menu-open) .hd-mobile-menu__categories { content-visibility: hidden; }
  #v2 .hd-mobile-menu__categories { transition: content-visibility .2s allow-discrete; }
  /* Окно 44px и название 13px: «Комплектующие», «Металлические» целиком помещаются в колонку
     на 390; на 360 длинное слово переносится по слогам, а не вылезает за карточку */
  #v2 .hd-mobile-menu__categories a {
    min-height: 64px; grid-template-columns: 44px minmax(0, 1fr); gap: 8px;
    padding: var(--inset); border: 0; border-radius: var(--r);
    background: var(--surface); box-shadow: var(--shadow); color: var(--ink);
  }
  #v2 .hd-mobile-menu__categories img {
    width: 44px; height: 44px; padding: 4px; border-radius: var(--r-in);
    background: var(--field); object-fit: contain; mix-blend-mode: multiply;
  }
  #v2 .hd-mobile-menu__categories span {
    min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.25;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
  #v2 .hd-mobile-menu__solutions {
    display: grid; padding: var(--inset); border: 0; border-radius: var(--r);
    background: var(--surface); box-shadow: var(--shadow);
  }
  #v2 .hd-mobile-menu__solutions a { position: relative; gap: 2px; padding: 12px 14px; border: 0; border-radius: var(--r-in); color: var(--ink); }
  #v2 .hd-mobile-menu__solutions a + a::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--hairline); }
  #v2 .hd-mobile-menu__solutions a:hover { background: var(--field); }
  #v2 .hd-mobile-menu__solutions strong { font-size: 16px; font-weight: 500; line-height: 1.3; }
  #v2 .hd-mobile-menu__solutions span { color: var(--muted); font-size: 14px; line-height: 1.4; }
  #v2 .hd-mobile-menu__contacts { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 28px; }
  #v2 .hd-mobile-menu__contacts a {
    min-height: var(--btn-h); gap: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    background: transparent; color: var(--ink); font-size: 16px; font-weight: 500;
  }
  #v2 .hd-mobile-menu__contacts img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(900%) hue-rotate(80deg); }
  #v2 .hd-mobile-menu__contacts .hd-mobile-menu__whatsapp { border-color: var(--brand); background: var(--brand); color: #fff; }
  #v2 .hd-mobile-menu__contacts .hd-mobile-menu__whatsapp img { filter: brightness(0) invert(1); }
  #v2 .hd-mobile-menu-overlay { background: rgb(22 30 23 / .45); }
}
@media (max-width: 440px) {
  #v2 .hd-logo img { width: 100px; }
}
/* Уже 390 (320, 360, 375): названию в две колонки оставалось 72-99px, слова рвались по слогам
   («Металли-/ческие/контейне-/ры»). Одна колонка: строка «окно 44px + название» без переносов */
@media (max-width: 389px) {
  #v2 .hd-mobile-menu__categories { grid-template-columns: minmax(0, 1fr); }
  #v2 .hd-mobile-menu__categories a { min-height: 56px; }
  #v2 .hd-mobile-menu__categories span { -webkit-hyphens: manual; hyphens: manual; font-size: 14px; }
}

/* ==========================================================================
   17. Подвал (5.15). Правки 1 и 2 от 08.10: гигантского логотипа нет, скругление 20.
   Правка 19.10: тёмный фон почти во всю ширину окна - от краёв тот же отступ, что снизу
   (--footer-m), а колонки подвала стоят ровно по краям контента сайта (--wrap), как шапка
   и блоки страниц. Внутренние поля не меньше 20px - на телефоне, где край контента 16px,
   текст не прижимается к краю панели
   ========================================================================== */
#v2 .site-footer {
  --footer-m: clamp(16px, 1.6vw, 24px);
  position: relative; overflow: hidden;
  width: auto;
  margin: var(--block) var(--footer-m) var(--footer-m);
  padding: var(--band-y) max(20px, calc((100% - var(--wrap)) / 2 - var(--footer-m))) 0;
  border: 0; border-radius: var(--r);
  background: var(--footer); color: #fff;
}
#v2 .site-footer .container { width: auto; margin-inline: 0; }
/* Полоса подборки (fixed снизу) не закрывает низ подвала */
#v2 body.has-bp-bar .site-footer { margin-bottom: calc(var(--bp-bar-h, 78px) + 16px); }
#v2 .footer-grid {
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(min-content, 1fr);
  gap: 40px clamp(24px, 3.6vw, 56px);
}
#v2 .footer-grid > .footer-brand { --logo-mark: var(--brand-on-dark); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
#v2 .footer-brand__logo { display: block; width: 132px; height: 32px; margin: 0; color: #fff; }
#v2 .footer-brand p, #v2 .footer-grid .footer-brand p { margin: 0; color: var(--on-band); font-size: 15px; line-height: 1.55; }
#v2 .footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
#v2 .footer-grid h4 { margin: 0 0 10px; color: var(--on-band); font-size: 14px; font-weight: 400; letter-spacing: 0; }
#v2 .footer-grid a {
  display: block; margin: 0; padding: 4px 0;
  color: #fff; font-size: 15px; font-weight: 400; line-height: 1.4;
  transition: color var(--speed) var(--ease);
}
#v2 .footer-grid a:hover { color: var(--brand-on-dark); }
#v2 .footer-grid a[hidden] { display: none; }
#v2 .footer-contacts a[data-setting="contacts.phone1"] { margin-bottom: 4px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
#v2 .footer-grid p, #v2 .footer-contacts p { margin: 12px 0 0; color: var(--on-band); font-size: 15px; line-height: 1.5; }
#v2 .footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(40px, 5vw, 64px); padding: 24px 0;
  border-top: 1px solid rgb(255 255 255 / .12);
  color: var(--on-band); font-size: 14px;
}
#v2 .footer-bottom span { color: inherit; }
/* Телефон и почта не рвутся по дефису и не вылезают из колонки; длинное слово в ссылке
   («конфиденциальности» на 320) переносится, а не выходит за колонку */
#v2 .site-footer :is(a[href^="tel:"], a[href^="mailto:"]) { white-space: nowrap; }
#v2 .footer-grid a { overflow-wrap: break-word; }
/* Раскладка подвала по областям: на ноутбуке пять колонок не дают контактам места (телефон
   рвался «086-» / «86-80», почта вылезала), на планшете и телефоне оставались одинокие колонки */
#v2 .footer-grid > .footer-brand { grid-area: brand; }
#v2 .footer-grid > [data-footer-catalog] { grid-area: catalog; }
#v2 .footer-grid > div:not(.footer-brand, .footer-contacts, [data-footer-catalog], [data-footer-pages]) { grid-area: nav; }
#v2 .footer-grid > [data-footer-pages] { grid-area: pages; }
#v2 .footer-grid > .footer-contacts { grid-area: contacts; }
#v2 .footer-grid { grid-template-areas: "brand catalog nav pages contacts"; }
@media (max-width: 1380px) {
  /* Лого и текст строкой сверху, под ними четыре колонки; контактам - не меньше ширины телефона */
  #v2 .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(min-content, 1.15fr);
    grid-template-areas: "brand brand brand brand" "catalog nav pages contacts";
  }
}
@media (max-width: 1040px) {
  /* Три колонки: «Важное» под навигацией, контакты справа на две строки - без пустых ячеек */
  #v2 .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(min-content, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "brand brand brand" "catalog nav contacts" "catalog pages contacts";
  }
  #v2 .footer-contacts a[data-setting="contacts.phone1"] { font-size: 18px; }
}
@media (max-width: 760px) {
  #v2 .site-footer { margin-bottom: 16px; }
  #v2 .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 32px 16px;
    grid-template-areas: "brand brand" "catalog nav" "pages pages" "contacts contacts";
  }
  /* Ровный шаг между ссылками и зона нажатия не меньше 40px. Раньше - коробка 40px без отступов:
     ссылка в две строки заполняла её почти целиком, и соседние названия слипались (3px против 22px) */
  #v2 .footer-grid a { display: flex; align-items: flex-start; min-height: 0; padding: 11px 0; font-size: 14px; line-height: 1.35; }
  #v2 .footer-contacts a[data-setting="contacts.phone1"] { font-size: 20px; }
  #v2 .footer-bottom { padding-bottom: 20px; }
}
/* 320-359: колонка ~116px - длинное слово («Мусоровывозящие») переносится по слогам */
@media (max-width: 359px) {
  #v2 .footer-grid a { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 4; }
}

/* ==========================================================================
   18. Длинный текст из админки (5.17)
   ========================================================================== */
#v2 .cms-content { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
#v2 .cms-content h2 { margin: 32px 0 12px; color: var(--ink); font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
#v2 .cms-content h3 { margin: 24px 0 8px; color: var(--ink); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
#v2 .cms-content h4 { margin: 20px 0 6px; color: var(--ink); font-size: 17px; font-weight: 500; }
#v2 .cms-content > :first-child { margin-top: 0; }
#v2 .cms-content p { margin: 0; }
#v2 .cms-content p + p { margin-top: 16px; }
#v2 .cms-content :is(strong, b) { font-weight: 600; color: var(--ink); }
#v2 .cms-content ul, #v2 .cms-content ol { display: grid; gap: 8px; margin: 16px 0; padding-left: 22px; color: var(--ink-2); }
#v2 .cms-content ul li::marker { color: var(--brand); }
#v2 .cms-content a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#v2 .cms-content a:hover { color: var(--brand-hover); }
#v2 .cms-content img { border-radius: var(--r); }
#v2 .cms-content blockquote { margin: 20px 0; padding: 14px 18px; border: 0; border-radius: var(--r-in); background: var(--field); color: var(--ink-2); }
#v2 .cms-content th, #v2 .cms-content td { border: 0; border-bottom: 1px solid var(--hairline); padding: 12px 8px; }
#v2 .cms-content th { background: transparent; color: var(--muted); font-weight: 400; }
#v2 .cms-content hr { border-top-color: var(--hairline); }

/* Светлая секция во всю ширину окна (правка 37 от 08.10). Фон рисуется border-image за пределами
   блока: на 100vmax в стороны и на --alt-y вверх и вниз (в поля между секциями), с волосяной
   линией по верхней и нижней границе. Раскладку не меняет: ширина блока, его отступы и расстояния
   между секциями остаются прежними; горизонтальной прокрутки не даёт (это «чернильный» выход).
   Условие: у соседних секций отступ не меньше --alt-y (обычный --block - да). Две светлые подряд
   не ставить - чередовать с белыми. Сила (1,1,1): перебивает «border: 0» полос с селектором вида
   (1,1,0) - шорткат border сбрасывает border-image. В своих правилах секции с .v2-alt не писать
   шорткат border (только border-width/-style/-color). */
#v2 body .v2-alt {
  border-image:
    linear-gradient(var(--hairline) 0 1px, var(--section) 1px calc(100% - 1px), var(--hairline) calc(100% - 1px))
    fill 0 / 0 / var(--alt-y) 100vmax;
}

/* Лид-полоса: бледно-зелёная, форма - белая капсула (и компонент .hd-lead) */
/* overflow: clip, не hidden: полоса не становится контейнером прокрутки, и фокус на поле после
   отправки не прокручивает её содержимое вверх (знак ::after выступает за нижний край) */
#v2 .v2-lead-band, #v2 .hd-lead {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 28px;
  padding: var(--lead-pad-y) var(--lead-pad-end) var(--lead-pad-y) var(--band-pad);
  border: 0; border-radius: var(--r);
  background: var(--brand-tint); color: var(--ink); box-shadow: none;
}
/* Водяной знак AROLT (правка 21 от 08.10): целиком внутри полосы, по вертикали в центре, в своём
   квадрате справа (текст и форма идут столбцом слева и на него не заходят).
   Геометрия общая для всех лид-полос сайта: --mark-*, --lead-pad-* (их же берут .about-contact-band и .sol-cta) */
#v2 .v2-lead-band::after, #v2 .hd-lead::after {
  content: ""; position: absolute; z-index: -1;
  left: auto; right: var(--mark-right); top: 50%; bottom: auto;
  width: auto; height: var(--mark-size); aspect-ratio: 1; border-radius: 0;
  transform: translateY(-50%);
  background: var(--brand);
  -webkit-mask: url("../logo-mark.svg") center / contain no-repeat;
  mask: url("../logo-mark.svg") center / contain no-repeat;
  opacity: .07; pointer-events: none;
}
#v2 .v2-lead-band h2, #v2 .hd-lead__txt h2 { margin: 0; color: var(--ink); font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#v2 .v2-lead-band p, #v2 .hd-lead__txt p { margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
#v2 .hd-lead__eyebrow { display: block; margin: 0 0 12px; color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3; }
#v2 .hd-lead__form {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 6px;
  padding: 6px 6px 0;
}
/* Белая капсула за первой строкой формы (поля и кнопка); подпись и ошибка - под ней */
#v2 .hd-lead__form::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 64px;
  border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow);
}
#v2 .hd-lead__form input,
#v2 .hd-lead__form input:hover {
  grid-row: 1; min-height: 52px; height: 52px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font-size: 16px;
}
#v2 .hd-lead__form input:focus { border-color: var(--brand); background: var(--surface); }
#v2 .hd-lead__form input[aria-invalid="true"] { border-color: var(--danger); }
#v2 .hd-lead__form input::placeholder { color: var(--hint); }
#v2 .hd-lead__form .btn {
  grid-row: 1; min-height: 52px; padding: 0 24px;
  background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none;
}
#v2 .hd-lead__form .btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
#v2 .hd-lead__note, #v2 .hd-lead__form .lead-error { grid-column: 1 / -1; margin: 10px 0 0; padding-left: 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
#v2 .hd-lead__form .lead-error {
  padding-block: 0; padding-right: 0; border: 0; border-radius: 0; background: none;
  color: var(--danger); font-weight: 400;
}
/* Кнопка-контур в лид-полосе - сплошная белая, как поля формы (не прозрачная поверх знака) */
#v2 :is(.v2-lead-band, .hd-lead, .sol-cta, .about-contact-band) .btn--ghost { background: var(--surface); }
@media (min-width: 761px) and (max-width: 1023px) {
  /* Планшет: поля рядом белыми капсулами, кнопка во всю ширину под ними (три в ряд не помещаются) */
  #v2 .hd-lead__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; }
  #v2 .hd-lead__form::before { content: none; }
  #v2 .hd-lead__form input, #v2 .hd-lead__form input:hover { background: var(--surface); }
  #v2 .hd-lead__form .btn { grid-row: 2; grid-column: 1 / -1; width: 100%; }
  #v2 .hd-lead__note, #v2 .hd-lead__form .lead-error { padding-left: 4px; }
}
@media (max-width: 760px) {
  #v2 .v2-lead-band, #v2 .hd-lead { padding: 28px 16px 24px; }
  #v2 .v2-lead-band::after, #v2 .hd-lead::after { top: var(--mark-top-m); height: var(--mark-size-m); transform: none; }
  #v2 .v2-lead-band h2, #v2 .hd-lead__txt h2 { font-size: 28px; }
  #v2 .hd-lead__form { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
  #v2 .hd-lead__form::before { content: none; }
  #v2 .hd-lead__form input, #v2 .hd-lead__form input:hover, #v2 .hd-lead__form .btn { grid-row: auto; }
  #v2 .hd-lead__form input, #v2 .hd-lead__form input:hover { background: var(--surface); }
  #v2 .hd-lead__form .btn { width: 100%; }
  #v2 .hd-lead__note, #v2 .hd-lead__form .lead-error { padding-left: 4px; margin-top: 4px; }
}

/* ==========================================================================
   20. Карточка товара (раздел 6): одна на весь сайт
   ========================================================================== */
#v2 .product-card,
#v2 .product-card.hd-popular-product {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; height: 100%; overflow: visible;
  padding: var(--inset) var(--inset) 16px;
  border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow);
  color: var(--ink); cursor: pointer; transform: none;
  transition: none;
}
#v2 .product-card:hover, #v2 .product-card.hd-popular-product:hover { transform: none; border: 0; box-shadow: var(--shadow); }
/* Название - ссылка на товар, растянутая на всю карточку; кнопка корзины лежит над ней (z-index),
   рамка фокуса рисуется по контуру карточки */
#v2 .product-card .product-card__link { color: inherit; text-decoration: none; outline: 0; }
#v2 .product-card .product-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
#v2 .product-card .product-card__link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 2px; }
#v2 .product-card .product-card__media {
  position: relative; display: grid; place-items: center;
  width: auto; min-height: 0; height: auto; aspect-ratio: 1; overflow: hidden;
  padding: 0; border: 0; border-radius: var(--r-in);
  background: var(--field);
}
#v2 .product-card .product-card__media::before,
#v2 .product-card .product-card__media::after { content: none; display: none; }
#v2 .product-card .product-card__media img {
  position: static; inset: auto; display: block;
  width: 84%; height: 84%; max-width: none; padding: 0; margin: 0;
  object-fit: contain; mix-blend-mode: multiply;
  background: none; border-radius: 0; box-shadow: none;
  transition: transform .4s var(--ease);
}
#v2 .product-card .product-card__media--photo img {
  position: static; width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  mix-blend-mode: normal; filter: saturate(.85);
}
#v2 .product-card:hover .product-card__media img { transform: scale(1.04); }
#v2 .product-card .product-card__media .product-placeholder { background: transparent; }
#v2 .product-card .product-card__media .product-placeholder img { width: 40%; height: auto; opacity: .25; }
#v2 .product-card:hover .product-card__media .product-placeholder img { transform: none; }
#v2 .product-card .product-card__name {
  display: block; min-height: 0; margin: 16px 0 0; padding: 0 12px;
  overflow: visible; -webkit-line-clamp: unset;
  color: var(--ink); font: 400 16px/1.4 var(--font); letter-spacing: -0.01em;
}
#v2 .product-card .product-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding: 16px 8px 0 12px;
}
#v2 .product-card .product-card__price {
  display: inline; margin: 0; min-width: 0;
  color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap;
}
#v2 .product-card .product-card__price strong {
  display: inline; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap;
}
#v2 .product-card .product-card__price--request { color: var(--muted); font-size: 15px; font-weight: 400; letter-spacing: 0; }
/* Со старой ценой - две строки: зачёркнутая мелко над текущей (в разметке - после неё). Строка
   старой цены уходит вверх в отступ подвала карточки (отрицательный margin = её высота, отступ
   больше на столько же): текущая цена стоит на одной линии с ценами соседних карточек без скидки */
#v2 .product-card .product-card__price--sale {
  display: inline-flex; flex-direction: column-reverse; align-items: flex-start; gap: 2px;
  margin-top: calc(-13px * 1.2 - 2px);
}
#v2 .product-card .product-card__price--sale .price-old { font-size: 13px; line-height: 1.2; }
#v2 .product-card .product-card__foot:has(.product-card__price--sale) { padding-top: calc(16px + 4px); }
/* «Цена по запросу» в двух колонках на узком телефоне (320-375) переносится («Цена / по запросу» -
   «по» привязан к слову), а не уходит под круг корзины. Цифры цены по-прежнему не рвутся */
#v2 .product-card .product-card__price--request,
#v2 .product-card .product-card__price--request strong { white-space: normal; }
#v2 .product-card .product-card__cart {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; flex: none;
  width: var(--circ-sm); height: var(--circ-sm); min-height: 0; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand-hover);
  box-shadow: none; transform: none; cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .product-card .product-card__cart:hover,
#v2 .product-card .product-card__cart:focus-visible { background: var(--brand); color: #fff; }
#v2 .product-card .product-card__cart svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 760px) {
  #v2 .product-card, #v2 .product-card.hd-popular-product { --inset: 6px; padding-bottom: 12px; }
  #v2 .product-card .product-card__name { margin-top: 12px; padding-inline: 6px; font-size: 14px; }
  #v2 .product-card .product-card__foot { padding: 10px 2px 0 6px; }
  #v2 .product-card .product-card__foot:has(.product-card__price--sale) { padding-top: calc(10px + 8px); }
  #v2 .product-card .product-card__price { font-size: 15px; }
  #v2 .product-card .product-card__price--request { font-size: 13px; }
  #v2 .product-card .product-card__cart { width: 36px; height: 36px; }
  /* Зона нажатия круга корзины - 44px, сам круг прежний */
  #v2 .product-card .product-card__cart::after { content: ""; position: absolute; inset: -4px; border-radius: var(--r-pill); }
}
/* Длинное слово названия («четырёхсекционная», «для евроконтейнера» с неразрывным пробелом)
   переносится, а не выходит за белую карточку */
#v2 .product-card .product-card__name { overflow-wrap: break-word; }
/* 320-359: две колонки по ~140px - цена «от 66 990 ₸» вылезала из своей строки и упиралась в круг */
@media (max-width: 359px) {
  /* По слогам - только длинные слова (от 12 букв), чтобы не было «му-сорного» */
  #v2 .product-card .product-card__name { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 4; }
  #v2 .product-card .product-card__foot { gap: 6px; padding-right: 0; }
  #v2 .product-card .product-card__price { font-size: 14px; letter-spacing: -0.03em; }
  /* …а «Цена по запросу» остаётся 13px без сжатия, как на остальных телефонах */
  #v2 .product-card .product-card__price--request { font-size: 13px; letter-spacing: 0; }
  #v2 .product-card .product-card__cart { width: 32px; height: 32px; }
  #v2 .product-card .product-card__cart svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #v2 .product-card .product-card__media img { transition: none; }
  #v2 .product-card:hover .product-card__media img { transform: none; }
}

/* ==========================================================================
   21. Галерея товара: фото на миллиметровке с размерами (7.1)
   Селекторы с #view-product: в catalog.css у галереи правила (1,2,1)
   ========================================================================== */
#v2 #view-product .gallery {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "thumbs";
  gap: 12px; height: auto; align-items: start; align-self: start;
  position: sticky; top: calc(var(--hd-h, 80px) + 24px);
}
#v2 #view-product .gallery .main-photo { grid-area: main; }
#v2 #view-product .gallery .thumbs {
  grid-area: thumbs;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto;
  gap: 12px; height: auto; max-height: none; overflow: visible; padding: 0;
}
#v2 #view-product .gallery--single .thumbs { display: none; }
#v2 #view-product .gallery .thumb {
  display: grid; place-items: center; aspect-ratio: 1; min-height: 0; height: auto; padding: 0;
  border: 0; border-radius: var(--r); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; cursor: pointer;
  transition: box-shadow var(--speed) var(--ease);
}
#v2 #view-product .gallery .thumb img {
  width: 74%; height: 74%; object-fit: contain; mix-blend-mode: multiply; border-radius: 0;
}
#v2 #view-product .gallery .thumb:hover { border: 0; box-shadow: inset 0 0 0 2px var(--line-strong); }
#v2 #view-product .gallery .thumb.is-active { border: 0; box-shadow: inset 0 0 0 2px var(--brand); }

#v2 #view-product .gallery .main-photo {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; min-height: 0; height: auto; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow);
}
#v2 #view-product .gallery .main-photo::before { content: none; display: none; }
/* Знак KZ остаётся на главном фото, 40px, без тени */
#v2 #view-product .gallery .main-photo::after { z-index: 3; width: 40px; right: 16px; bottom: 16px; filter: none; }

/* Фон фото - белый (правки 12-13, product.css раздел 2); миллиметровки нет */
#v2 #view-product .gallery .v2-stage { position: relative; width: 80%; aspect-ratio: 1; }
#v2 #view-product .gallery .main-photo .v2-stage > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; margin: 0;
  object-fit: contain; mix-blend-mode: multiply;
  background: none; border-radius: 0; box-shadow: none;
  filter: brightness(1.04) contrast(1.03);
}
#v2 #view-product .gallery .main-photo.v2-draw--scene .v2-stage { width: 100%; height: 100%; aspect-ratio: auto; }
#v2 #view-product .gallery .main-photo.v2-draw--scene .v2-stage > img { object-fit: cover; mix-blend-mode: normal; filter: saturate(.85); }

#v2 .v2-dim {
  position: absolute; z-index: 2; color: var(--dim-ink);
  font: 500 12px/1 var(--font-mono); letter-spacing: .04em; word-spacing: -0.2em;
  pointer-events: none; transition: opacity .2s;
}
#v2 .v2-dim[hidden] { display: none; }
#v2 .v2-dim > b { position: absolute; padding: 3px 6px; background: var(--paper); font-weight: 500; white-space: nowrap; }
#v2 .v2-dim > i { position: absolute; background: currentColor; }
#v2 .v2-dim--h { left: var(--x1); right: calc(100% - var(--x2)); top: var(--y); height: 1px; background: currentColor; }
#v2 .v2-dim--h::before, #v2 .v2-dim--h::after { content: ""; position: absolute; top: -12px; width: 1px; height: 18px; background: currentColor; }
#v2 .v2-dim--h::before { left: 0; }
#v2 .v2-dim--h::after { right: 0; }
#v2 .v2-dim--h > i { top: -5px; width: 1px; height: 11px; transform: rotate(45deg); }
#v2 .v2-dim--h > i:first-of-type { left: 0; }
#v2 .v2-dim--h > i:last-of-type { right: 0; }
#v2 .v2-dim--h > b { left: 50%; top: 0; transform: translate(-50%, -50%); }
#v2 .v2-dim--v { top: var(--y1); bottom: calc(100% - var(--y2)); left: var(--x); width: 1px; background: currentColor; }
#v2 .v2-dim--v::before, #v2 .v2-dim--v::after { content: ""; position: absolute; left: -6px; width: 18px; height: 1px; background: currentColor; }
#v2 .v2-dim--v::before { top: 0; }
#v2 .v2-dim--v::after { bottom: 0; }
#v2 .v2-dim--v > i { left: -5px; width: 11px; height: 1px; transform: rotate(45deg); }
#v2 .v2-dim--v > i:first-of-type { top: 0; }
#v2 .v2-dim--v > i:last-of-type { bottom: 0; }
#v2 .v2-dim--v > b { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); }

@media (max-width: 1040px) {
  #v2 #view-product .gallery {
    position: static; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "main thumbs";
  }
  #v2 #view-product .gallery--single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  #v2 #view-product .gallery .thumbs { grid-template-columns: minmax(0, 1fr); align-content: start; }
}
@media (max-width: 760px) {
  #v2 #view-product .gallery,
  #v2 #view-product .gallery:not(.gallery--single) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "thumbs"; gap: 8px; }
  #v2 #view-product .gallery .thumbs,
  #v2 #view-product .gallery:not(.gallery--single) .thumbs { grid-area: thumbs; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; overflow: visible; }
  #v2 #view-product .gallery:not(.gallery--single) .main-photo { grid-area: main; }
  #v2 #view-product .gallery .main-photo { min-height: 0; padding: 0; }
  #v2 #view-product .gallery .v2-stage { width: 84%; }
  #v2 #view-product .gallery .main-photo::after { width: 32px; right: 12px; bottom: 12px; }
}

/* ==========================================================================
   22. Характеристики в 2 колонки (7.2)
   ========================================================================== */
#v2 .v2-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 1), auto);
  column-gap: clamp(32px, 4.4vw, 72px);
  margin: 0; padding: 8px 28px;
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#v2 .v2-specs__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.4;
}
#v2 .v2-specs__row.is-col-end { border-bottom: 0; }
#v2 .v2-specs dt { flex: 0 1 auto; margin: 0; color: var(--muted); }
#v2 .v2-specs dd {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: right;
  color: var(--ink); font: 500 14px/1.4 var(--font-mono); word-spacing: -0.2em; overflow-wrap: break-word;
}
@media (max-width: 760px) {
  #v2 .v2-specs { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; padding: 4px 20px; }
  #v2 .v2-specs__row { padding: 12px 0 14px; font-size: 14px; }
  #v2 .v2-specs__row.is-col-end { border-bottom: 1px solid var(--hairline); }
  #v2 .v2-specs__row:last-child { border-bottom: 0; }
  #v2 .v2-specs dd { font-size: 13px; }
}

/* ==========================================================================
   23. Заглушка картинки .v2-ph (20.10.2026)
   Все картинки, кроме фото товаров, заменены заглушками: по ним художник рисует новые. Список мест,
   размеров и сюжетов - docs/IMAGES-TODO.md. Остались фото товаров, логотипы клиентов, видео,
   картинки статей и настоящие фото заказчика (assets/client-*).
   Заглушка - окно того же размера и скругления, что картинка: фон --field, по центру контурная
   иконка «картинка» и подпись с размером для отрисовки (data-ph: вдвое больше самого крупного показа,
   под ретину). Размер окну задаёт его собственное правило (aspect-ratio, height) - класс его не трогает.
   - Окно-элемент: класс .v2-ph и data-ph на окне фото; иконка и подпись - его ::before и ::after.
     Фото из админки (data-cms-img) остаётся внутри: <img> без src скрыт, с src - закрывает заглушку.
   - Окно-псевдоэлемент первого экрана (каталог и категории, подбор для бизнеса, контакты): ::after
     блока сам рисует заглушку, подпись - из data-ph блока.
   Подпись - сгенерированный текст с пустой альтернативой (content: … / ""): читалке её не читать.
   ========================================================================== */
#v2 {
  /* Иконка 24 × 24, линия 1,2 - при 32px выходит 1,6, как у остальных контурных иконок. Чёрная - для
     маски (цвет - currentColor), серая --control - для фона псевдоэлемента, где маски нет */
  --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='17' rx='3.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.75'/%3E%3Cpath d='m20.5 15.5-4.3-4.3a1.5 1.5 0 0 0-2.1 0L5 20.3'/%3E%3C/svg%3E");
  --ph-icon-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858D86' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='17' rx='3.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.75'/%3E%3Cpath d='m20.5 15.5-4.3-4.3a1.5 1.5 0 0 0-2.1 0L5 20.3'/%3E%3C/svg%3E");
}
#v2 .v2-ph {
  --ph-bg: var(--field); --ph-ink: var(--muted); --ph-mark: var(--control);
  --ph-icon-size: 32px; --ph-gap: 10px; --ph-font: 12px; --ph-line: 15px; --ph-x: 50%; --ph-y: 50%;
  position: relative; overflow: hidden;
  background: var(--ph-bg);
}
/* [data-ph] в селекторе - сильнее правил псевдоэлементов окна в полосах и в первой версии
   (у карточек решений на главной ::after был градиентом во всё окно) */
#v2 .v2-ph[data-ph]::before,
#v2 .v2-ph[data-ph]::after {
  position: absolute; inset: var(--ph-y) auto auto var(--ph-x); z-index: 0;
  pointer-events: none;
}
#v2 .v2-ph[data-ph]::before {
  content: "";
  width: var(--ph-icon-size); height: var(--ph-icon-size);
  transform: translate(-50%, calc((var(--ph-icon-size) + var(--ph-gap) + var(--ph-line)) / -2));
  background: var(--ph-mark);
  -webkit-mask: var(--ph-icon) center / contain no-repeat;
  mask: var(--ph-icon) center / contain no-repeat;
}
#v2 .v2-ph[data-ph]::after {
  content: attr(data-ph); content: attr(data-ph) / "";
  transform: translate(-50%, calc((var(--ph-icon-size) + var(--ph-gap) - var(--ph-line)) / 2));
  background: none; color: var(--ph-ink);
  font: 500 var(--ph-font)/var(--ph-line) var(--font-mono); letter-spacing: .02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Крупное окно (первые экраны) и мелкое (64-112px: полка категорий, поиск) */
#v2 .v2-ph--lg { --ph-icon-size: 40px; --ph-gap: 12px; --ph-font: 13px; --ph-line: 16px; }
#v2 .v2-ph--sm { --ph-icon-size: 20px; --ph-gap: 4px; --ph-font: 9px; --ph-line: 11px; }
/* В мелком окне подпись - размер файла обложки «1440 × 1080»: без разрядки и с узкими пробелами у «×»
   она занимает 56px и помещается в окно 64px (полка главной на телефоне) */
#v2 .v2-ph--sm[data-ph]::after { letter-spacing: 0; word-spacing: -.2em; }
/* На тёмной сцене (первый экран главной: на нём белый текст) */
#v2 .v2-ph--dark { --ph-bg: var(--band); --ph-ink: var(--on-band); --ph-mark: rgb(186 206 186 / .55); }

/* Фото из админки поверх заглушки */
#v2 .v2-ph > img:not([src]) { display: none; }
#v2 .v2-ph:has(> img[src])::before,
#v2 .v2-ph:has(> img[src])::after { content: none; }

/* Первый экран с картинкой на псевдоэлементе: шапка каталога и категорий. Картинка есть всегда
   (setCategoryHeroImage: сцена категории hero-*.jpg или сцена «Каталог»), заглушка - только если её нет.
   Подбор для бизнеса и контакты показывают свои картинки № 29 и 30 (solutions.css, info.css) */
#v2 :is(#view-category .category-hero:not([data-hero-image]))::after {
  content: attr(data-ph); content: attr(data-ph) / "";
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 56px 16px 0;
  background: var(--ph-icon-grey) 50% calc(50% - 14px) / 40px no-repeat, var(--field);
  color: var(--muted);
  font: 500 13px/16px var(--font-mono); letter-spacing: .02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   24. Города (20.10.2026, docs/SEO.md): выбор города в шапке и в меню телефона, SEO-текст страницы
       в одну колонку (главная, каталог, рубрика, товар), «Купить в другом городе»
   ========================================================================== */
/* Телефон и город столбиком: строка города - на месте адреса (адрес есть в подвале и на «Контактах») */
#v2 .hd-contact { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: none; }
#v2 .hd-contact .hd-phone span span { display: none; }
/* 12px, как адрес до этого: с самым длинным названием («Усть-Каменогорск») строка не шире номера -
   шапка в одну строку (от 1401) не теряет место у поиска. Зона нажатия 25px (планшеты - тоже касание,
   минимум 24): поля 5px, отрицательный отступ их гасит - текст на прежнем месте */
#v2 .hd-city > summary {
  display: flex; align-items: center; gap: 3px; width: fit-content;
  margin: -5px -6px; padding: 5px 6px;
  border-radius: var(--r-pill);
  color: var(--muted); font: 400 12px/1.25 var(--font); white-space: nowrap;
  list-style: none; cursor: pointer; user-select: none;
  transition: color var(--speed) var(--ease);
}
#v2 .hd-city > summary::-webkit-details-marker { display: none; }
#v2 .hd-city > summary:hover,
#v2 .hd-city[open] > summary { color: var(--brand); }
#v2 .hd-city > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
#v2 :is(.hd-city, .hd-mobile-city) > summary svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#v2 :is(.hd-city__chevron, .hd-mobile-city__chevron) { transition: transform var(--speed) var(--ease); }
#v2 :is(.hd-city, .hd-mobile-city)[open] :is(.hd-city__chevron, .hd-mobile-city__chevron) { transform: rotate(180deg); }
/* Панель - как «Решения» (5.10): белая, радиус 20, города в две колонки; выбранный - тинт */
#v2 .hd-city__panel {
  position: absolute; top: calc(100% + 14px); left: -8px; z-index: 5;
  width: 380px; padding: var(--inset);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); color: var(--ink);
}
#v2 .hd-city__title { margin: 0; padding: 10px 14px 8px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.3; }
#v2 .hd-city__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
#v2 .hd-city__list a {
  display: flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border-radius: var(--r-in); color: var(--ink);
  font-size: 15px; font-weight: 400; line-height: 1.3; text-decoration: none;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .hd-city__list a:hover,
#v2 .hd-city__list a:focus-visible { background: var(--field); color: var(--brand); }
#v2 .hd-city__list a[aria-current="true"] { background: var(--brand-tint); color: var(--brand-hover); font-weight: 500; }
/* Узкий планшет: телефон ближе к правому краю - панель открывается влево, внутри линий шапки */
@media (min-width: 761px) and (max-width: 900px) {
  #v2 .hd-city__panel { left: auto; right: -8px; }
}

/* SEO-текст: белая карточка шириной контента, одна колонка - заголовок (H1 старой страницы), первый
   абзац, «Развернуть описание». Ниже - ссылки на ту же страницу в других городах */
#v2 .v2-seo-sec { margin-top: var(--block); }
#v2 :is(.v2-seo-sec, .v2-seo__text, .v2-seo__more, .v2-cities)[hidden] { display: none; }
#v2 .v2-seo {
  padding: clamp(24px, 3.6vw, 48px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); color: var(--ink);
}
#v2 .v2-seo__title {
  margin: 0; color: var(--ink);
  font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance;
}
#v2 .v2-seo__intro { margin-top: 16px; }
#v2 :is(.v2-seo__intro, .v2-seo__body) p { margin: 0 0 16px; color: var(--ink-2); font-size: 16px; font-weight: 400; line-height: 1.7; }
#v2 .v2-seo__intro > :last-child { margin-bottom: 0; }
/* Ключевые слова старого сайта выделены <strong> через слово - без жирного, только цветом текста */
#v2 .v2-seo__text :is(strong, b) { color: var(--ink); font-weight: 500; }
#v2 .v2-seo__text a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#v2 .v2-seo__more { margin-top: 8px; }
/* Зона нажатия - 44px по высоте */
#v2 .v2-seo__more > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3;
  list-style: none; cursor: pointer; user-select: none;
  transition: color var(--speed) var(--ease);
}
#v2 .v2-seo__more > summary::-webkit-details-marker { display: none; }
#v2 .v2-seo__more > summary:hover { color: var(--brand-hover); }
#v2 .v2-seo__more > summary svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--speed) var(--ease);
}
#v2 .v2-seo__more[open] > summary svg { transform: rotate(180deg); }
#v2 .v2-seo__more-open,
#v2 .v2-seo__more[open] .v2-seo__more-closed { display: none; }
#v2 .v2-seo__more[open] .v2-seo__more-open { display: inline; }
#v2 .v2-seo__body { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--hairline); }
#v2 .v2-seo__body h3 { margin: 28px 0 10px; color: var(--ink); font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
#v2 .v2-seo__body h4 { margin: 24px 0 8px; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
#v2 .v2-seo__body > :first-child { margin-top: 0; }
#v2 .v2-seo__body > :last-child { margin-bottom: 0; }
#v2 .v2-seo__body :is(ul, ol) { margin: 0 0 16px; padding: 0; list-style: none; }
#v2 .v2-seo__body li { position: relative; margin: 0 0 8px; padding-left: 20px; color: var(--ink-2); font-size: 16px; font-weight: 400; line-height: 1.7; }
#v2 .v2-seo__body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
#v2 .v2-seo__body ol { counter-reset: v2-seo; }
#v2 .v2-seo__body ol > li { padding-left: 26px; counter-increment: v2-seo; }
#v2 .v2-seo__body ol > li::before { content: counter(v2-seo) "."; position: absolute; left: 2px; top: 0; color: var(--brand); font-weight: 500; }

/* «Купить в другом городе»: строка чипов (5.6), без текста страницы - одна в карточке */
#v2 .v2-cities { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); }
#v2 .v2-seo__text[hidden] + .v2-cities { margin-top: 0; padding-top: 0; border-top: 0; }
#v2 .v2-cities__title { margin: 0 0 14px; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
#v2 .v2-cities__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#v2 .v2-cities__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border-radius: var(--r-pill); background: var(--field); color: var(--ink);
  font-size: 14px; font-weight: 400; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#v2 .v2-cities__link:hover,
#v2 .v2-cities__link:focus-visible { background: var(--brand-tint); color: var(--brand-hover); }

@media (prefers-reduced-motion: reduce) {
  #v2 :is(.hd-city__chevron, .hd-mobile-city__chevron), #v2 .v2-seo__more > summary svg { transition: none; }
}

/* ≤ 760: в шапке города нет (как и телефона) - он в меню: карточка-строка с городом, по нажатию -
   города в две колонки капсулами; выбранный - зелёный */
@media (max-width: 760px) {
  #v2 .hd-contact { display: none; }
  #v2 .hd-mobile-city {
    margin: 0 0 16px; padding: var(--inset);
    border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  }
  #v2 .hd-mobile-city > summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 14px; border-radius: var(--r-in);
    color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3;
    list-style: none; cursor: pointer; user-select: none;
  }
  #v2 .hd-mobile-city > summary::-webkit-details-marker { display: none; }
  #v2 .hd-mobile-city > summary svg { width: 20px; height: 20px; color: var(--brand); }
  #v2 .hd-mobile-city > summary .hd-mobile-city__chevron { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }
  #v2 .hd-mobile-city__list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    margin: 4px 0 0; padding: 0 6px 6px; list-style: none;
  }
  #v2 .hd-mobile-city__list a {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px;
    border-radius: var(--r-pill); background: var(--field); color: var(--ink);
    font-size: 15px; font-weight: 400; line-height: 1.2; text-align: center; text-decoration: none;
  }
  #v2 .hd-mobile-city__list a[aria-current="true"] { background: var(--brand); color: #fff; font-weight: 500; }
  /* 320-374: «Усть-Каменогорск» (дефис не рвётся - bindHangingWords) в одну строку, все капсулы 44px:
     список без своих полей, капсулы шире, текст 14px */
  @media (max-width: 374px) {
    #v2 .hd-mobile-city__list { gap: 4px; padding: 0 0 6px; }
    #v2 .hd-mobile-city__list a { padding: 8px 4px; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
  }

  #v2 .v2-seo { padding: 24px 20px; }
  #v2 .v2-seo__title { font-size: 24px; }
  #v2 .v2-seo__body h3 { font-size: 18px; }
  #v2 .v2-seo__body h4 { font-size: 16px; }
  #v2 :is(.v2-seo__intro, .v2-seo__body) :is(p, li) { font-size: 15px; }
  #v2 .v2-cities__list { gap: 6px; }
  #v2 .v2-cities__link { padding: 8px 14px; }
}

/* ==========================================================================
   25. Картинки категорий A5 (23.10.2026, docs/IMAGES-CODEX.md, 4 и 10.1)
   Обложка категории - прозрачный WebP изделия с тенью. Плитку (пятно света --a5-tile) рисует окно,
   картинка вписана целиком (contain) внутрь полей и стоит низом по центру: изделие не режется ни в
   одном окне, увеличение 1,03 при наведении поглощают поля. Класс .a5 - на окне с <img> внутри
   (витрина каталога, полка главной, поиск, мега-меню, карточки решений); в меню телефона окно -
   сама картинка (img.a5). Мелкие окна 44-112 px берут квадрат -sq (category.icon), остальные - обложку.
   ========================================================================== */
#v2 .a5 {
  --a5-t: 10%; --a5-b: 7%; --a5-s: 8%;
  position: relative; overflow: hidden;
  background: var(--a5-tile); background-color: var(--a5-e);
}
#v2 .a5 > img {
  position: absolute; inset: var(--a5-t) auto auto var(--a5-s);
  width: calc(100% - 2 * var(--a5-s)); height: calc(100% - var(--a5-t) - var(--a5-b));
  object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%;
  filter: none; mix-blend-mode: normal;
}
/* Квадратные окна 64-112 px: поля чуть уже */
#v2 :is(.hd-cat-compare__media, .result-category__media, .hd-catalog-mega__media).a5 { --a5-t: 9%; --a5-b: 7%; --a5-s: 7%; }
/* Крупная плитка витрины: изделие ниже бейджа «N товаров» (y 12-42 px) */
#v2 #view-category .cat-tile--lead .a5 { --a5-t: max(15%, 50px); }
/* Мега-меню: при наведении окно белело (--surface) - плитка остаётся */
#v2 .hd-catalog-mega__item:hover .hd-catalog-mega__media.a5 { background: var(--a5-tile); background-color: var(--a5-e); }
/* Меню телефона: окно 44 px - сама картинка; плитка вместо --field и без multiply (он перекрашивал тень).
   Изделие по низу окна, как в остальных окнах A5 (4.1): иначе бункер и площадка висят посередине */
#v2 .hd-mobile-menu__categories img.a5 { background: var(--a5-tile); background-color: var(--a5-e); mix-blend-mode: normal; object-position: 50% 100%; }