/* Start:/local/templates/welle/css/tokens/primitives.css?178638222910725*/
/*
 * Дизайн-система Welle Technik — ЯРУС 0: ПРИМИТИВЫ (reference tokens).
 * Каркас: Auditor/brain/Архитектура/2026-06-19 — Дизайн-система Welle Technik — архитектура (скелет).md
 *
 * Здесь и ТОЛЬКО здесь живут сырые значения (цветовые oklch-литералы, базовый радиус,
 * шрифт-стеки, литералы spacing/type-шкал). Примитивы НЕ несут роли и НЕ зависят от темы —
 * это палитра/сырьё, из которого ярус 1 (semantic.css) набирает значения через var().
 *
 * Источник значений (1:1, без изменений): перенос из prototypes/product-card/tokens.css,
 * состав/значения приняты владельцем 12.06.2026. Нейминг стальной шкалы — Tailwind 50–950
 * (решение владельца 2026-06-19).
 *
 * Spacing/type-шкалы (--scale-*): значения — дефолт CD/Tailwind v4 «как есть» (решение
 * владельца 2026-06-20). Материализованы ТОЛЬКО ступени, фактически используемые CD-макетом;
 * нормализация/смена значений вне этой задачи. Шкалы открыты к расширению — см. README
 * (карта ступеней и правило добавления новой ступени).
 *
 * ⚠️ Шкала НЕРАВНОМЕРНА (косметический долг таблицы-шкалы, НЕ функциональный дефект). Значения
 * унаследованы из ручной подгонки по семантическим токенам, перенесены точь-в-точь. Три пары на
 * одной светлоте различаются только микро-хромой:
 *   steel-600/650 (L0.3), steel-750/760 (L0.25), steel-850/870 (L0.21).
 * СТАТУС: нормализация осознанно ОТЛОЖЕНА владельцем (2026-06-20) — не «не сделана». Все шесть
 * ступеней живые: каждая пара держит по одной роли в :root и .dark (600→--accent[.dark] /
 * 650→--secondary-foreground[:root]; 750→--accent-foreground[:root] / 760→--muted[.dark];
 * 850→--foreground+--card/popover-foreground[:root] / 870→--card+--popover[.dark]). Выравнивание
 * значений сдвинуло бы цвета боевых тем. УСЛОВИЕ ВОЗВРАТА: только при реальной визуальной/
 * функциональной проблеме конкретного потребителя (вариант Б — точечная ревизия поверх ролей),
 * не ради ровности таблицы. Подробности и два пути решения — README, «Известные особенности».
 */

:root {
  /* — Бренд — */
  --navy:        oklch(0.372 0.127 258);  /* #0A3D7A — primary/ring (светлая тема) */
  --navy-bright: oklch(0.68 0.1 258);     /* navy осветлён для тёмной темы */
  --amber:       oklch(0.784 0.159 73);   /* #F5A623 — брендовый акцент (только декор) */

  /* — Чистые нейтрали (без хромы) — */
  --white:       oklch(1 0 0);            /* белые поверхности */
  --white-soft:  oklch(0.985 0 0);        /* текст/иконки на цветных и тёмных поверхностях */

  /* — Стальная шкала (hue 258, микро-хрома), светлая→тёмная по светлоте — */
  --steel-50:   oklch(0.965 0.004 258);
  --steel-100:  oklch(0.955 0.005 258);
  --steel-150:  oklch(0.95 0.005 258);
  --steel-200:  oklch(0.94 0.012 258);
  --steel-300:  oklch(0.9 0.008 258);
  --steel-400:  oklch(0.7 0.015 258);
  --steel-500:  oklch(0.5 0.02 258);
  --steel-600:  oklch(0.3 0.025 258);     /* L0.3 — пара к steel-650 (Δхрома) */
  --steel-650:  oklch(0.3 0.03 258);      /* L0.3 — пара к steel-600 (Δхрома) */
  --steel-700:  oklch(0.27 0.02 258);
  --steel-750:  oklch(0.25 0.03 258);     /* L0.25 — пара к steel-760 (Δхрома) */
  --steel-760:  oklch(0.25 0.018 258);    /* L0.25 — пара к steel-750 (Δхрома) */
  --steel-850:  oklch(0.21 0.02 258);     /* L0.21 — пара к steel-870 (Δхрома) */
  --steel-870:  oklch(0.21 0.018 258);    /* L0.21 — пара к steel-850 (Δхрома) */
  --steel-900:  oklch(0.17 0.015 258);
  --steel-925:  oklch(0.16 0.015 258);
  --steel-950:  oklch(0.15 0.02 258);

  /* — Полупрозрачные нейтрали (бордеры/инпуты тёмной темы) — */
  --white-a12:  oklch(1 0 0 / 12%);
  --white-a16:  oklch(1 0 0 / 16%);

  /* — Статусные хромы — */
  --green-500:  oklch(0.55 0.13 150);     /* «в наличии» (светлая) */
  --green-400:  oklch(0.7 0.13 150);      /* «в наличии» (тёмная) */
  --gold-500:   oklch(0.75 0.12 75);      /* «под заказ» / warning (светлая) */
  --gold-400:   oklch(0.8 0.13 75);       /* «под заказ» / warning (тёмная) */
  --gold-800:   oklch(0.25 0.05 75);      /* тёмный текст на gold */
  --red-500:    oklch(0.55 0.2 27);       /* destructive (светлая) */
  /* 10.08.2026: L поднята 0.6 → 0.64. При 0.6 текст inline-ошибки на оформлении заказа
     давал на карточке тёмной темы 4,09:1 при требуемых по AA 4,5:1; при 0.64 — 4,81:1
     на карточке и 5,19:1 на фоне. Светлой темы не касается: --red-400 участвует только
     в тёмной ветке semantic.css. Не возвращать к 0.6 без пересчёта контраста. */
  --red-400:    oklch(0.64 0.19 25);      /* destructive (тёмная) */

  /* — Радиус (базовое значение; шкала-производная — в ярусе 1) — */
  --radius-base: 0.375rem;

  /* — Шрифтовые стеки — */
  --font-sans-stack: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono-stack: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ============================================================
   * SPACING-ШКАЛА — литералы (дефолт CD/Tailwind v4 «как есть»).
   * Сетка: ступень N → N × 0.25rem. Имя = ступень CD; дробная точка
   * записывается через «_» (точка недопустима в CSS-идентификаторе):
   * --scale-space-1_5 = ступень 1.5 = 0.375rem.
   * Материализованы только используемые макетом ступени. Разрывы
   * (9, 11, 14, ≥20) — намеренные: добавляются по мере вёрстки на той
   * же сетке 0.25rem (см. README). НЕ для прямого использования —
   * ярус 1 публикует их как --space-* через var().
   * ============================================================ */
  --scale-space-0_5: 0.125rem;  /* CD step 0.5 */
  --scale-space-1:   0.25rem;   /* CD step 1   */
  --scale-space-1_5: 0.375rem;  /* CD step 1.5 */
  --scale-space-2:   0.5rem;    /* CD step 2   */
  --scale-space-2_5: 0.625rem;  /* CD step 2.5 */
  --scale-space-3:   0.75rem;   /* CD step 3   */
  --scale-space-3_5: 0.875rem;  /* CD step 3.5 */
  --scale-space-4:   1rem;      /* CD step 4   */
  --scale-space-5:   1.25rem;   /* CD step 5   */
  --scale-space-6:   1.5rem;    /* CD step 6   */
  --scale-space-7:   1.75rem;   /* CD step 7   */
  --scale-space-8:   2rem;      /* CD step 8   */
  --scale-space-10:  2.5rem;    /* CD step 10  */
  --scale-space-12:  3rem;      /* CD step 12  */
  --scale-space-16:  4rem;      /* CD step 16  */

  /* ============================================================
   * ТИПОШКАЛА: размеры (дефолт CD/Tailwind v4 «как есть»).
   * Имя = ступень CD. Разрывы text-xl (1.25rem) и text-3xl (1.875rem) —
   * макетом не достигаются (.hero-h1 решением владельца сведён на text-2xl,
   * см. README), добавляются при необходимости.
   * line-height вынесен в независимую leading-шкалу (см. ниже) —
   * макет задаёт безразмерный ratio отдельно от размера.
   * ============================================================ */
  --scale-text-xs:   0.75rem;   /* CD text-xs   */
  --scale-text-sm:   0.875rem;  /* CD text-sm   */
  --scale-text-base: 1rem;      /* CD text-base */
  --scale-text-lg:   1.125rem;  /* CD text-lg   */
  --scale-text-2xl:  1.5rem;    /* CD text-2xl  */

  /* ============================================================
   * ТИПОШКАЛА: line-height (дефолт CD/Tailwind v4 leading-*, «как есть»).
   * Безразмерные ratio, независимы от размера. Разрывы (snug 1.375,
   * relaxed 1.625, loose 2) — макетом не достигаются.
   * ============================================================ */
  --scale-leading-none:   1;     /* CD leading-none   */
  --scale-leading-tight:  1.25;  /* CD leading-tight  */
  --scale-leading-normal: 1.5;   /* CD leading-normal */

  /* ============================================================
   * ТИПОШКАЛА: tracking / letter-spacing (дефолт CD/Tailwind v4
   * tracking-*, «как есть»). Разрывы (tighter -0.05, tight -0.025,
   * normal 0) — макетом не достигаются. ⚠️ Разрядка .logo-sub
   * (TECHNIK) — 0.34/0.38em — bespoke-приём бренда вне CD-шкалы,
   * ступенью НЕ материализуется (остаётся в вёрстке логотипа).
   * NB: .logo-main (WELLE) сведён в --tracking-wide — это другой элемент.
   * ============================================================ */
  --scale-tracking-wide:   0.025em;  /* CD tracking-wide   */
  --scale-tracking-wider:  0.05em;   /* CD tracking-wider  */
  --scale-tracking-widest: 0.1em;    /* CD tracking-widest */
}

/* End */


/* Start:/local/templates/welle/css/tokens/semantic.css?17863822298800*/
/*
 * Дизайн-система Welle Technik — ЯРУС 1: СЕМАНТИКА (system tokens) = слой shadcn.
 * Каркас: Auditor/brain/Архитектура/2026-06-19 — Дизайн-система Welle Technik — архитектура (скелет).md
 *
 * Имена — соглашение shadcn/ui (ui.shadcn.com/docs/theming): пары «поверхность / -foreground»,
 * суффикс background опускается. Здесь НЕТ ни одного цветового литерала — только var() на
 * ярус 0 (primitives.css). Подключать primitives.css ДО или вместе с этим файлом (var()
 * резолвится в computed-value time — порядок на корректность не влияет, но держим примитивы
 * первыми по смыслу).
 *
 * Тема переключается ЗДЕСЬ: :root — светлая (источник истины), блок ниже переуказывает
 * семантику на другие примитивы при тёмной системной настройке пользователя
 * (@media screen and (prefers-color-scheme: dark), решение владельца 2026-08-10;
 * до 10.08 тем же списком владел класс .dark, который на сайте никогда не ставился).
 * Цветовые значения — 1:1 перенос из prototypes/product-card/tokens.css (приняты владельцем
 * 12.06.2026). Нецветовые шкалы (--space-* / --text-* / --leading-* / --tracking-*) — публичные
 * алиасы дефолта CD/Tailwind v4 (решение владельца 2026-06-20); тема-инвариантны, только в :root.
 * Ярус 2 (компонентные/производные через color-mix) НЕ материализован — ленивость (см. README).
 */

:root {
  --background: var(--white);
  --foreground: var(--steel-850);

  --card: var(--white);
  --card-foreground: var(--steel-850);
  --popover: var(--white);
  --popover-foreground: var(--steel-850);

  --primary: var(--navy);
  --primary-foreground: var(--white-soft);
  --secondary: var(--steel-100);
  --secondary-foreground: var(--steel-650);
  --muted: var(--steel-50);
  --muted-foreground: var(--steel-500);
  --accent: var(--steel-200);
  --accent-foreground: var(--steel-750);

  --brand-accent: var(--amber); /* #F5A623 — одна малая деталь на экран */

  --success: var(--green-500);
  --success-foreground: var(--white-soft);
  --warning: var(--gold-500);
  --warning-foreground: var(--gold-800);
  --destructive: var(--red-500);
  --destructive-foreground: var(--white-soft);

  --border: var(--steel-300);
  --input: var(--steel-300);
  --ring: var(--navy);

  --radius: var(--radius-base);
  --radius-sm: calc(var(--radius) - 2px);
  --radius-lg: calc(var(--radius) + 4px);

  --font-sans: var(--font-sans-stack);
  --font-mono: var(--font-mono-stack);

  /* — Spacing-шкала: публичные ступени (var → ярус 0). Это то, что
   *   пишет вёрстка/компоненты; ярус 0 (--scale-space-*) напрямую не трогаем.
   *   Тема-инвариантны → только в :root (как --radius/--font-*). — */
  --space-0_5: var(--scale-space-0_5);
  --space-1:   var(--scale-space-1);
  --space-1_5: var(--scale-space-1_5);
  --space-2:   var(--scale-space-2);
  --space-2_5: var(--scale-space-2_5);
  --space-3:   var(--scale-space-3);
  --space-3_5: var(--scale-space-3_5);
  --space-4:   var(--scale-space-4);
  --space-5:   var(--scale-space-5);
  --space-6:   var(--scale-space-6);
  --space-7:   var(--scale-space-7);
  --space-8:   var(--scale-space-8);
  --space-10:  var(--scale-space-10);
  --space-12:  var(--scale-space-12);
  --space-16:  var(--scale-space-16);

  /* — Типошкала: размеры (var → ярус 0). — */
  --text-xs:   var(--scale-text-xs);
  --text-sm:   var(--scale-text-sm);
  --text-base: var(--scale-text-base);
  --text-lg:   var(--scale-text-lg);
  --text-2xl:  var(--scale-text-2xl);

  /* — Типошкала: line-height (var → ярус 0). — */
  --leading-none:   var(--scale-leading-none);
  --leading-tight:  var(--scale-leading-tight);
  --leading-normal: var(--scale-leading-normal);

  /* — Типошкала: tracking / letter-spacing (var → ярус 0). — */
  --tracking-wide:   var(--scale-tracking-wide);
  --tracking-wider:  var(--scale-tracking-wider);
  --tracking-widest: var(--scale-tracking-widest);
}

/* ============================================================================
 * ТЁМНАЯ ТЕМА — ПО СИСТЕМНОЙ НАСТРОЙКЕ ПОЛЬЗОВАТЕЛЯ, БЕЗ ПЕРЕКЛЮЧАТЕЛЯ.
 * Решение владельца 2026-08-10: «переключатель на B2B-сайте вообще не нужен».
 * Тема включается только у того, у кого тёмная ОС; в интерфейсе не появляется
 * ни одного нового элемента, разметка и композиция не меняются — меняется палитра.
 *
 * ПОЧЕМУ `screen and`, а НЕ просто `(prefers-color-scheme: dark)`.
 * Печать. Браузеры по умолчанию НЕ печатают фоновые заливки, а печатают текст.
 * Без `screen and` пользователь с тёмной ОС, печатая карточку товара или корзину,
 * получил бы почти белый текст (--foreground = steel-150) на белой бумаге, то есть
 * пустой лист. С `screen and` медиазапрос на печати не срабатывает, :root остаётся
 * светлым, и любая страница печатается ровно так же, как её печатает пользователь
 * со светлой ОС. Счёт-договор защищён отдельно (css/print-doc.css), но остальные
 * страницы печатались бы вслепую — это и закрывает одно слово.
 *
 * ПОЧЕМУ ОДИН МЕХАНИЗМ, А НЕ КЛАСС `.dark` ПЛЮС МЕДИАЗАПРОС.
 * Переключателя нет по решению владельца, значит ручной ветке нечем управлять.
 * Два одинаковых списка токенов разошлись бы при первой же правке — держим один.
 * Проверять тему без тёмной ОС: DevTools → Rendering → Emulate CSS media feature
 * prefers-color-scheme (или colorScheme в Playwright) — это тот же путь, которым
 * тема живёт в бою, а не обходной.
 *
 * `color-scheme: dark` объявлен ЗДЕСЬ и только здесь: он переводит на тёмную
 * системную отрисовку то, что рисует не наш CSS, а браузер — полосы прокрутки,
 * раскрытый список <select>, автозаполнение полей. Без него страница была бы
 * тёмной, а её системные части остались бы светлыми. В :root он намеренно НЕ
 * добавлен: у светлой темы не должно измениться ничего, включая значение
 * color-scheme (сейчас `normal`).
 * ============================================================================ */
@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background: var(--steel-900);
    --foreground: var(--steel-150);

    --card: var(--steel-870);
    --card-foreground: var(--steel-150);
    --popover: var(--steel-870);
    --popover-foreground: var(--steel-150);

    --primary: var(--navy-bright);
    --primary-foreground: var(--steel-950);
    --secondary: var(--steel-700);
    --secondary-foreground: var(--steel-150);
    --muted: var(--steel-760);
    --muted-foreground: var(--steel-400);
    --accent: var(--steel-600);
    --accent-foreground: var(--steel-150);

    --brand-accent: var(--amber);

    --success: var(--green-400);
    --success-foreground: var(--steel-925);
    --warning: var(--gold-400);
    --warning-foreground: var(--steel-925);
    --destructive: var(--red-400);
    --destructive-foreground: var(--white-soft);

    --border: var(--white-a12);
    --input: var(--white-a16);
    --ring: var(--navy-bright);
  }
}

/* End */


/* Start:/local/templates/welle/styles.css?178956705548503*/
/* === база home-hero (перенос 1:1 нужных правил) === */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background: var(--muted); color: var(--foreground); -webkit-font-smoothing: antialiased; }
code { font-family: var(--font-mono); }

.variant { max-width: 1180px; margin: 0 auto 2.5rem; padding: 0 1rem; }
.variant-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; padding: 1.75rem .25rem .75rem; }
.variant-tag { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--foreground); background: var(--brand-accent); padding: .25rem .6rem; border-radius: var(--radius-sm); }
.variant-name { font-size: 1.15rem; font-weight: 650; margin: 0; }
.variant-note { flex-basis: 100%; margin: .15rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--muted-foreground); }
.variant-note b { color: var(--foreground); font-weight: 600; }

.screen { position: relative; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px oklch(0 0 0 / 6%), 0 8px 24px oklch(0 0 0 / 6%); }
/* overflow НЕ скрываем — dropdown контактов выпадает вниз ПОВЕРХ контента (штатно) */

.util-bar { display: flex; align-items: center; gap: .6rem; padding: .4rem 1.5rem; background: var(--secondary); border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); }
.util-bar .b2b { font-weight: 600; color: var(--foreground); }
.util-bar svg { color: var(--primary); flex: 0 0 auto; }
.util-bar .util-spacer { flex: 1; }
.util-bar .util-link { color: var(--muted-foreground); text-decoration: none; }
.util-bar .util-link:hover { color: var(--primary); }

/* аккаунт-блок в util-bar (вход + корзина), справа — решение владельца 2026-07-02.
   Утилитарные действия B2B (редкий вход, транзакционная корзина) в верхней полосе,
   телефон-доминанта остаётся в главной строке. Контракт B1 (реестр APG). */
.util-account, .util-cart { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted-foreground); text-decoration: none; font-size: var(--text-sm); font-weight: 600; padding: .15rem .35rem; border-radius: var(--radius-sm); white-space: nowrap; }
.util-account:hover, .util-cart:hover { color: var(--primary); }
.util-account svg, .util-cart svg { color: var(--primary); flex: 0 0 auto; }
.util-account:focus-visible, .util-cart:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Пункт «Кабинет» НА САМОЙ странице кабинета: не ссылка вовсе (22.08, design §G.5).
   Отменяем ровно две вещи, которые обещают действие, — подсветку при наведении и курсор
   руки. Всё остальное (иконка, подпись, отступы) остаётся прежним: человек должен узнать
   привычный пункт, а не заметить, что тот куда-то делся. */
.util-account--here { cursor: default; }
.util-account--here:hover { color: var(--muted-foreground); }
/* счётчик корзины — на --primary (не amber: одна amber-деталь на экран уже у лого) */
.util-cart-badge { display: inline-grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem; margin-left: .1rem; font-size: .68rem; font-weight: 700; line-height: 1; color: var(--primary-foreground); background: var(--primary); border-radius: 999px; }
/* ── ОСТАТОК ДО МИНИМУМА ЗАКАЗА (23.08, design §9.2) ──
   Живёт в УЖЕ СУЩЕСТВУЮЩЕЙ утилитарной полосе; новой панели не заводится, и запрет
   на липкую панель в мобильной корзине (24.07) остаётся в силе.
   Пустой контейнер печатается всегда (живая область не должна пересоздаваться), поэтому
   ему не даются ни отступы, ни разделитель: :empty гасит и то и другое — иначе в шапке
   висела бы точка-разделитель ниоткуда. */
.util-cart-min { color: var(--muted-foreground); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.util-cart-min:not(:empty) { margin-left: .5rem; padding-left: .5rem; border-left: 1px solid var(--border); }
.util-cart-min__done { color: var(--primary); font-weight: 600; text-decoration: none; }
.util-cart-min__done:hover { text-decoration: underline; }
.util-cart-min__done:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.site-header { display: flex; align-items: center; gap: 1.5rem; padding: .9rem 1.5rem; border-bottom: 1px solid var(--border); }
/* лого — ссылка на главную (NN/g-стандарт), укрупнён до ~40px; тач-зона ≥44px.
   bespoke-вордмарк на токенах (вариант A) — типокарту --text-* не потребляет. */
.logo { line-height: 1; user-select: none; text-decoration: none; display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; border-radius: var(--radius-sm); }
.logo:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.logo-main { display: inline-block; font-weight: 800; letter-spacing: .12em; font-size: 1.5rem; color: var(--primary); }
.logo-main::after { content: ""; display: block; height: 2px; margin-top: 3px; background: var(--brand-accent); }
.logo-sub { font-weight: 600; letter-spacing: .34em; font-size: .75rem; color: var(--muted-foreground); }
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a { color: var(--foreground); text-decoration: none; font-size: var(--text-base); padding: .2rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--primary); }
.site-nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.header-spacer { flex: 1; }

/* ── СНЯТО 13.09.2026: правила `.site-header .wt-search*` и `.site-header{flex-wrap:wrap}`
   ────────────────────────────────────────────────────────────────────────────────────
   Здесь стоял набор Д4 · слот 22 · волна Б — оформление формы поиска В ШАПКЕ. Саму форму
   сняли из header.php 12.09 словом владельца («Поиск не нужен в шапке, это не обсуждается»),
   и с того дня у этих объявлений не осталось носителя: разметки с классом `wt-search`
   в шапке нет ни на одной странице — красить нечего. Мёртвые правила сняты в том же заходе,
   в котором файл открывался ради подсказки поиска: вторым заходом это дороже.

   `flex-wrap: wrap` на `.site-header` ушёл вместе с ними — он был заведён ровно ради
   переноса той формы строкой ниже на средних ширинах. Перенос ниже 374 px остаётся: он
   объявлен своим media-запросом в конце файла и этой правкой не затронут.

   🔑 ЛОВУШКА, КОТОРУЮ СТОИТ ПОМНИТЬ, ЕСЛИ ФОРМА В ШАПКУ ВЕРНЁТСЯ: класс `wt-search`
   в проекте ЗАНЯТ и занят не формой — им назван КОРНЕВОЙ БЛОК СТРАНИЦЫ РЕЗУЛЬТАТОВ
   (`<div class="wt-search">`, components/bitrix/search.page/welle/template.php:29).
   Голый селектор `.wt-search { display:flex; max-width:420px }` сядет и на неё, сжав
   живую страницу /search/ в колонку 420 px. Потому здесь и стоял префикс `.site-header`.
   Сами объявления целиком лежат в истории git этого файла. */

.search { position: relative; display: flex; align-items: stretch; background: var(--background); border: 2px solid var(--primary); border-radius: var(--radius-lg); box-shadow: 0 6px 20px oklch(0.372 0.127 258 / 12%); }
.search-ico { display: grid; place-items: center; width: 3rem; color: var(--muted-foreground); flex: 0 0 auto; }
.search input { flex: 1; border: none; background: transparent; font-size: var(--text-base); padding: .95rem .5rem .95rem 0; color: var(--foreground); outline: none; min-width: 0; }
.search input::placeholder { color: var(--muted-foreground); }
.search-scope { display: flex; align-items: center; gap: .3rem; border-left: 1px solid var(--border); padding: 0 .85rem; font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; }
.search-go { display: flex; align-items: center; gap: .4rem; border: none; background: var(--primary); color: var(--primary-foreground); font-size: var(--text-base); font-weight: 600; padding: 0 1.5rem; border-radius: 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0; cursor: pointer; }
.search-go:hover { filter: brightness(1.06); }
.search-hint { margin: .55rem .25rem 0; font-size: var(--text-sm); color: var(--muted-foreground); text-align: center; }

/* ==========================================================================================
 *  ВЫПАДАЮЩАЯ ПОДСКАЗКА ПОИСКА (`.wt-sg*`) — такт ② «код подсказки», шаг Б, 13.09.2026.
 *
 *  ИСТОЧНИК — ЗАМОРОЖЕННАЯ ФОРМА, а не эта правка: весь блок перенесён из принятого
 *  прототипа `Design/etalony-zamorozhennye/podskazka-poiska/` (строки 495–605 артефакта),
 *  значения не пересматривались. Поведение — local/templates/welle/js/wt-suggest.js.
 *
 *  ПОЧЕМУ ЗДЕСЬ, В ШАБЛОНЕ САЙТА, А НЕ В ШАБЛОНЕ КОМПОНЕНТА. Капсула стоит на трёх
 *  экранах (главная · витрина · выдача), и её собственные правила (`.search*`) лежат
 *  выше в этом же файле ровно по той же причине. Список — часть капсулы; положи его
 *  в шаблон одного компонента — и на двух других экранах он останется без оформления.
 *
 *  🔴 ОТЛИЧИЯ ОТ ПРОТОТИПА — ТРИ, И КАЖДОЕ НАЗВАНО ЗДЕСЬ:
 *
 *  ① ХОСТА `.wt-sg-host` НЕТ. В прототипе форму оборачивал `div.wt-sg-host` с
 *     `position: relative`. В бою такой обёртки быть не может: разметка капсулы —
 *     принятая форма ред. 7 и одновременно вид главной, её нельзя менять ни на знак
 *     (закон 31.08). Роль хоста берёт на себя САМА `.search` — она уже `position:
 *     relative` (строка выше в этом файле).
 *     ЦЕНА — ПОПРАВКА НА РАМКУ. Содержащий блок абсолютного потомка — это ПОЛЕ ПАДДИНГА
 *     капсулы, а у неё `border: 2px`. Без поправки список встал бы на 2 px уже капсулы
 *     с каждой стороны и на 2 px ближе к ней. Поэтому −2 px по бокам и +2 px сверху:
 *     геометрия получается ровно принятая — край в край, зазор 6 px (--space-1_5).
 *     ⚠️ Число 2 px связано с `border: 2px solid var(--primary)` у `.search` в этом же
 *     файле, в двадцати строках отсюда. Меняется рамка — меняется и поправка.
 *
 *  ② КОНТЕЙНЕР — САМ СПИСОК. Прототип считал мобильную раскладку от ширины ЭКРАНА-кадра
 *     (`@container wtscreen`). Кадров в бою нет, а ширина капсулы на трёх экранах разная
 *     (820 px на главной, своя на витрине и выдаче). Настоящая причина мобильной
 *     раскладки — ширина, оставшаяся ИМЕНИ, то есть ширина самого списка; от неё и
 *     считаем. Порог 790 px перенесён без изменений.
 *
 *  ③ ВЫДЕЛЕНИЕ СТРОКИ РАЗДЕЛА. В CSS прототипа `--accent` был объявлен только товарной
 *     строке: кадра с выделенным разделом в артефакте нет. Но текст принятой формы
 *     требует прямо: «↑/↓ ведут по строкам ОБЕИХ ЗОН подряд… выделенная строка красится
 *     --accent — тем же токеном, что hover». Правило дописано по тексту формы; иначе
 *     половина списка не показывала бы, где человек сейчас стоит.
 * ========================================================================================== */

/* Список — НАЛОЖЕНИЕ, а не блок в потоке: страница под ним не сдвигается ни на пиксель.
   Иначе подпись под полем и всё, что ниже, прыгало бы под пальцем на каждом знаке. */
/* 🔴 `text-align: left` — НЕ УКРАШЕНИЕ, А ЗАЩИТА ОТ СОСЕДА, и поймано замером на стенде.
   На ГЛАВНОЙ капсула стоит внутри `.hero-center`, у которого `text-align: center` (эта
   строка живёт ниже в этом же файле и принадлежит герою главной, а не списку). Без явного
   объявления список наследовал бы выравнивание от предка — и ровно на одном экране из трёх
   имена позиций и строка нулевого состояния печатались бы ПО ЦЕНТРУ. В прототипе этого
   было не видно: его демо-обвязка воспроизводила `.hero-center` без `text-align`.
   Замер 13.09: главная — `center`, витрина и выдача — `start`; после этой строки все три
   дают `left`. Так список перестаёт зависеть от того, куда его поставили. */
.search > .wt-sg { position: absolute; left: -2px; right: -2px;
      top: calc(100% + 2px + var(--space-1_5));
      z-index: 20; overflow: hidden; text-align: left;
      container-type: inline-size; container-name: wtsg;
      background: var(--popover); color: var(--popover-foreground);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      box-shadow: 0 6px 20px oklch(0.372 0.127 258 / 12%); }

/* Строка, не влезшая в бюджет высоты, гасится атрибутом `hidden` из JS. Правило нужно
   потому, что у строк объявлен свой `display` (grid/flex), а он сильнее `display:none`
   из таблицы браузера: без этой строки «скрытая» строка осталась бы на экране. */
.wt-sg [hidden] { display: none; }

/* ЗОНА 1 — разделы. Носитель отличия — ПОДЛОЖКА, тот же приём, которым на принятой
   плитке различены ярусы (эталон листинга, комментарий к .wt-cat-card__specs). */
.wt-sg__scopes { background: var(--muted); border-bottom: 1px solid var(--border); }
.wt-sg__cap { display: flex; align-items: baseline; justify-content: space-between;
      gap: var(--space-3); margin: 0; padding: var(--space-2) var(--space-3_5) var(--space-1);
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: var(--tracking-widest); color: var(--muted-foreground); }
.wt-sg__scope { display: flex; align-items: center; gap: var(--space-2_5);
      padding: var(--space-2) var(--space-3_5); text-decoration: none; color: inherit;
      font-size: 0.9375rem; line-height: var(--leading-tight); }
/* отличие ③ — см. шапку блока */
.wt-sg__scope:hover, .wt-sg__scope[aria-selected="true"] { background: var(--accent);
      color: var(--accent-foreground); }
.wt-sg__scope:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.wt-sg__scope-ico { flex: 0 0 auto; display: grid; place-items: center;
      color: var(--muted-foreground); }
.wt-sg__scope-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap; }
.wt-sg__scope-name em { font-style: normal; color: var(--muted-foreground); }
.wt-sg__scope-count { flex: 0 0 auto; font-size: var(--text-xs);
      color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* ЗОНА 2 — товары. Подложка карточная, строки разделены линией. */
.wt-sg__items { background: var(--card); }
.wt-sg__item { display: grid; grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "name price" "meta sku";
      column-gap: var(--space-4); row-gap: var(--space-1);
      padding: var(--space-2_5) var(--space-3_5);
      border-top: 1px solid var(--border);
      text-decoration: none; color: inherit; }
.wt-sg__items > .wt-sg__item:first-child { border-top: none; }
.wt-sg__item:hover, .wt-sg__item[aria-selected="true"] { background: var(--accent);
      color: var(--accent-foreground); }
.wt-sg__item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.wt-sg__name { grid-area: name; min-width: 0;
      font-size: 0.9375rem; font-weight: 700; line-height: var(--leading-tight);
      color: var(--card-foreground);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Приглушается ТО, ЧТО ЧЕЛОВЕК УЖЕ НАБРАЛ. Baymard, ярус 3: «emphasize the
   predictive portion… underscoring what's different in each suggestion». */
.wt-sg__name em { font-style: normal; font-weight: 400; color: var(--muted-foreground); }

.wt-sg__price { grid-area: price; white-space: nowrap; text-align: right;
      display: flex; align-items: baseline; gap: var(--space-1_5); }
.wt-sg__price b { font-size: 0.9375rem; font-weight: 700; color: var(--foreground);
      font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wt-sg__price i { font-style: normal; font-size: var(--text-xs);
      color: var(--muted-foreground); }
.wt-sg__price--ask b { color: var(--muted-foreground); }

.wt-sg__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center;
      gap: var(--space-1_5); min-width: 0; }
.wt-sg__sku { grid-area: sku; align-self: center; justify-self: end;
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--muted-foreground); white-space: nowrap; display: none; }
.wt-sg__item--sku .wt-sg__sku { display: block; }

/* ПОДВАЛ списка — выход на страницу выдачи. Не строка-кандидат. */
.wt-sg__foot { display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-3); padding: var(--space-2_5) var(--space-3_5);
      border-top: 1px solid var(--border); background: var(--card);
      font-size: var(--text-sm); font-weight: 650; color: var(--primary);
      text-decoration: none; }
.wt-sg__foot:hover { background: var(--accent); }
.wt-sg__foot:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.wt-sg__foot-n { font-variant-numeric: tabular-nums; color: var(--muted-foreground);
      font-weight: 400; font-size: var(--text-xs); }

/* СОСТОЯНИЕ ④ — ноль. Список НЕ схлопывается: факт + выход. */
.wt-sg--zero { padding: var(--space-3_5); }
.wt-sg__zero-fact { margin: 0 0 var(--space-2); font-size: 0.9375rem; font-weight: 700;
      line-height: var(--leading-tight); color: var(--card-foreground); }
.wt-sg__zero-act { display: flex; align-items: flex-start; gap: var(--space-2_5);
      padding: var(--space-2_5) var(--space-3); border-radius: var(--radius);
      background: var(--secondary); color: var(--secondary-foreground);
      text-decoration: none; font-size: var(--text-sm);
      line-height: var(--leading-normal); }
.wt-sg__zero-act:hover { background: var(--accent); color: var(--accent-foreground); }
.wt-sg__zero-act svg { flex: 0 0 auto; margin-top: .15rem; color: var(--primary); }
.wt-sg__zero-act b { color: var(--foreground); }

/* ── ЧИП РАЗЛИЧИТЕЛЯ И БЕЙДЖ СОСТОЯНИЯ ВНУТРИ ПОДСКАЗКИ ───────────────────────────────
   Значения перенесены 1:1 из шаблона листинга
   (components/bitrix/catalog.section/.default/style.css, `.wt-spec` стр. 789+,
   `.wt-stock-badge` стр. 677+) — тот же класс, тот же цвет, та же точка: принятая форма
   требует «ВЗЯТ 1:1».

   🔴 ДОЛГ, НАЗВАННЫЙ ВСЛУХ, А НЕ СПРЯТАННЫЙ. Это ВТОРОЙ носитель тех же значений.
   Настоящее место чипа и бейджа — ядро сайта: их просит уже третий экран, а живут они
   в шаблоне ОДНОГО компонента и на главной недоступны. Подъём их в ядро — правка слоя
   ядра с радиусом «весь каталог» и с переприёмкой листинга; попуткой внутри подсказки
   такое не делается (слой правится отдельным заходом). Пока подъёма нет, копия заперта
   СЕЛЕКТОРОМ `.wt-sg …`: на плитки листинга она не распространяется, там правит
   их собственный файл. Расхождение значений станет видно глазами на одном экране.   */
.wt-sg .wt-spec { display: inline-flex; align-items: baseline; gap: .3em;
      padding: .15rem .45rem; border-radius: var(--radius-sm);
      background: var(--secondary); color: var(--secondary-foreground);
      font-size: 0.78rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.wt-sg .wt-spec i { font-style: normal; font-size: .92em; color: var(--muted-foreground); }
.wt-sg .wt-spec b { font-weight: 700; color: var(--foreground); }

.wt-sg .wt-stock-badge { display: inline-flex; align-items: center; gap: .4em;
      width: fit-content; flex: none; padding: .22rem .55rem;
      border-radius: var(--radius-sm); font-family: var(--font-sans);
      font-size: 0.72rem; font-weight: 600; letter-spacing: .01em;
      line-height: 1.2; white-space: normal; }
.wt-sg .wt-stock-badge::before { content: ""; flex: none; width: .45em; height: .45em;
      border-radius: 50%; background: currentColor; }
.wt-sg .wt-stock-badge--in-stock { background: color-mix(in oklab, var(--success) 13%, var(--background));
      color: color-mix(in oklab, var(--success) 80%, var(--foreground)); }
.wt-sg .wt-stock-badge--days-10, .wt-sg .wt-stock-badge--on-order {
      background: color-mix(in oklab, var(--warning) 18%, var(--background));
      color: var(--warning-foreground); }
.wt-sg .wt-stock-badge--days-60, .wt-sg .wt-stock-badge--out {
      background: color-mix(in oklab, var(--muted-foreground) 12%, var(--background));
      color: var(--muted-foreground); }
/* Тёмная тема: --warning-foreground рассчитан на текст ПО заливке, а бейдж кладёт его
   на тонированную подложку — контраст падал до 1,03:1. Блок обязан стоять НИЖЕ базовых
   правил: специфичность у них одинаковая, и переопределение держится только порядком. */
@media screen and (prefers-color-scheme: dark) {
  .wt-sg .wt-stock-badge--days-10, .wt-sg .wt-stock-badge--on-order {
      color: color-mix(in oklab, var(--warning) 80%, var(--foreground)); }
  .wt-sg .wt-stock-badge--days-60, .wt-sg .wt-stock-badge--out {
      color: color-mix(in oklab, var(--muted-foreground) 70%, var(--foreground)); }
}

/* ── МОБИЛЬНАЯ РАСКЛАДКА СТРОКИ ────────────────────────────────────────────────────────
   Имя занимает ВСЮ ширину и две строки. Это стоило пятой строки списка, и решение принято
   замером, а не на глаз: при цене справа от имени имя ужималось до ~33 знаков, и две живые
   позиции — «…EPDM DIN 11851, DN 25» и «…EPDM SMS, DN 25» — печатались ОДИНАКОВОЙ строкой.
   Четыре различимые строки полезнее пяти неразличимых. Порог 790 — тот же, что у принятого
   листинга; контейнер — сам список (отличие ② в шапке блока).                            */
@container wtsg (width < 790px) {
  .wt-sg__item { grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name name" "meta price" "sku sku";
        padding-top: var(--space-2); padding-bottom: var(--space-2);
        row-gap: var(--space-1_5); align-items: start; }
  .wt-sg__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden; }
  /* Бейдж переносится ДЕТЕРМИНИРОВАННО, а не «когда не влезет»: иначе высота строки
     гуляет от длины имени материала, и бюджет списка перестаёт считаться. */
  .wt-sg__meta .wt-stock-badge { flex-basis: 100%; }
  .wt-sg__price { justify-content: flex-end; align-self: start; }
  .wt-sg__sku { justify-self: start; }
}

/* сетка групп: две строки. Верх — 3 группы с подтипами (равные трети).
   Низ — 4 одиночные группы (равные четверти). Раскладка предсказуема, без «дыр». */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
/* ряд одиночных групп — отдельный под-грид на 4 равные колонки, во всю ширину сетки.
   DOM-порядок = визуальный: одиночные идут подряд, после групп с подтипами. */
.cat-singles-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
.cat-card { display: flex; flex-direction: column; gap: .7rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; text-decoration: none; color: var(--card-foreground); box-shadow: 0 1px 2px oklch(0 0 0 / 5%), 0 4px 12px oklch(0 0 0 / 4%); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cat-card:hover { border-color: var(--primary); box-shadow: 0 2px 4px oklch(0 0 0 / 7%), 0 10px 24px oklch(0 0 0 / 8%); transform: translateY(-2px); }

/* заголовок группы: иконка + название/подпись в колонку */
.cat-head { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--card-foreground); }
.cat-head-txt { display: flex; flex-direction: column; min-width: 0; }
.cat-ico { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; display: grid; place-items: center; background: var(--secondary); border-radius: var(--radius); color: var(--primary); }
.cat-name { display: block; font-size: var(--text-base); font-weight: 650; line-height: 1.2; }
.cat-count { display: block; font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; }
.cat-head:hover .cat-name { color: var(--primary); }

/* одиночная группа (без подтипов): тот же компактный формат — иконка-квадрат + текст,
   чтобы сетка была плотной и ровной (иначе обложка на всю ширину раздувает строку) */
.cat-single { justify-content: center; }
.cat-single .cat-ico svg { width: 30px; height: 30px; }

/* подтипы группы — чипы-ссылки */
.cat-subs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .15rem; }
.cat-sub { font-size: var(--text-sm); font-weight: 500; line-height: 1; color: var(--foreground); text-decoration: none; background: var(--secondary); border: 1px solid transparent; border-radius: var(--radius-sm); padding: .4rem .62rem; transition: border-color .12s, color .12s, background .12s; }
.cat-sub:hover { border-color: var(--primary); color: var(--primary); background: var(--background); }
.cat-sub:focus-visible, .cat-head:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

@media (max-width: 780px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .cat-singles-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } .cat-singles-row { grid-template-columns: 1fr; } }

.hero-pad { padding: 1.75rem 1.5rem; }
.hero-center { text-align: center; max-width: 820px; margin: 0 auto; }
.hero-h1 { font-size: var(--text-2xl); line-height: 1.2; margin: 0 0 .9rem; font-weight: 700; }
.block-label { display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); margin: 0 0 .7rem; }
.block-label .ln { flex: 1; height: 1px; background: var(--border); }

/* ===== TRUST-СТРОКА (УТП) под поиском — статика, плейн-стиль (NN/g: не рекламный баннер, */
/* иначе banner blindness). 4 факта-иконки, приоритет = порядок слева-направо. ≤1 строка. === */
.trust-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem 1rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-item { display: flex; align-items: center; gap: .6rem; padding: .85rem .4rem; }
.trust-ico { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; display: grid; place-items: center; color: var(--primary); }
.trust-txt { display: flex; flex-direction: column; min-width: 0; }
.trust-name { font-size: var(--text-base); font-weight: 650; color: var(--foreground); line-height: 1.2; }
.trust-sub { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; line-height: 1.25; }
@media (max-width: 780px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-strip { grid-template-columns: 1fr; } }

/* ===================================================================== */
/* === КОНТАКТНЫЙ БЛОК-РАЗВОРОТ (disclosure, APG) — правый угол шапки === */
/* ===================================================================== */
.contact-disclosure { position: relative; display: flex; align-items: center; gap: .4rem; }

/* стек строк: телефон → «счета…» → email, выровнены вправо */
.contact-lines { display: flex; flex-direction: column; line-height: 1.2; align-items: flex-end; }
.contact-tel { font-size: var(--text-lg); font-weight: 700; color: var(--foreground); white-space: nowrap; text-decoration: none; }
.contact-tel:hover { color: var(--primary); }
/* строка «счета и консультации…» — вторичный вес */
.contact-accounts { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 1px; }
.contact-email { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; text-decoration: none; }
.contact-email:hover { color: var(--primary); text-decoration: underline; }

/* нативная кнопка-триггер disclosure (только шеврон) */
.contact-trigger {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--radius); color: var(--muted-foreground);
  font-family: inherit; flex: 0 0 auto;
}
.contact-trigger:hover { background: var(--secondary); }
.contact-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.contact-chevron { color: var(--muted-foreground); flex: 0 0 auto; transition: transform .18s ease; }
.contact-trigger[aria-expanded="true"] .contact-chevron { transform: rotate(180deg); color: var(--primary); }

/* панель — обычный dropdown: выпадает ВНИЗ ПОВЕРХ контента (overlay, z-index) */
.contact-panel {
  position: absolute; top: calc(100% + .5rem); right: 0;
  min-width: 300px;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px oklch(0 0 0 / 16%);
  padding: 1rem 1.15rem 1.15rem;
  z-index: 50;
}
.contact-panel[hidden] { display: none; }

.panel-cap { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); margin: 0 0 .55rem; }

.msg-list { display: flex; flex-direction: column; gap: .15rem; }
.msg-item { display: flex; align-items: center; gap: .65rem; padding: .45rem .4rem; border-radius: var(--radius); text-decoration: none; color: var(--foreground); font-weight: 600; font-size: var(--text-base); }
.msg-item:hover { background: var(--secondary); }
.msg-item svg { flex: 0 0 auto; }

.panel-sep { border: none; border-top: 1px solid var(--border); margin: .85rem 0; }

.sched-list { display: grid; grid-template-columns: auto 1fr; row-gap: .35rem; column-gap: 1.5rem; }
.sched-day { font-size: var(--text-sm); color: var(--foreground); }
.sched-time { font-size: var(--text-sm); font-weight: 600; color: var(--foreground); text-align: right; white-space: nowrap; }
.sched-time.off { font-weight: 500; color: var(--muted-foreground); }

/* ===================================================================== */
/* === ФУТЕР (contentinfo) — 4 колонки по контракту B2, проект V1 ===== */
/* ===================================================================== */
.site-footer { background: var(--secondary); border-top: 1px solid var(--border); color: var(--muted-foreground); padding: 2rem 1.5rem 1.25rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.25rem; }
.foot-col { min-width: 0; }
.foot-h { font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--foreground); margin: 0 0 .75rem; }
.foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.foot-list a { color: var(--muted-foreground); text-decoration: none; font-size: var(--text-sm); }
.foot-list a:hover { color: var(--primary); }
.site-footer a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
/* колонка контактов (address — семантика контактных данных) */
.foot-contacts { font-style: normal; display: flex; flex-direction: column; gap: .5rem; font-size: var(--text-sm); }
.foot-contacts a { color: var(--muted-foreground); text-decoration: none; }
.foot-contacts a:hover { color: var(--primary); }
.foot-tel { font-size: var(--text-lg); font-weight: 700; color: var(--foreground); white-space: nowrap; }
.foot-msgs { display: flex; gap: .55rem; align-items: center; margin-top: .1rem; }
.foot-msgs a { display: inline-flex; }
.foot-sched, .foot-addr { color: var(--muted-foreground); line-height: 1.4; }
/* нижняя legal-строка: ©, реквизиты юрлица, дубль B2B-условия (формулировка A1) */
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-foreground); }
.foot-legal svg { color: var(--primary); flex: 0 0 auto; }
.foot-legal .foot-b2b { font-weight: 600; color: var(--foreground); }
.foot-legal .sep { opacity: .45; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
 * ЛЕНТА-ИНДЕКС РАЗДЕЛОВ — единственное, что волна 16.09.2026 ДОБАВЛЯЕТ в подвал.
 * Встаёт НИЖЕ четырёх существующих колонок и ВЫШЕ legal-строки: ни один блок,
 * который стоял в подвале до неё, не меняет ни места, ни соседа, ни ширины.
 *
 * Источник — замороженный эталон формы Design/etalony-zamorozhennye/ramka/
 * (sha256 c01080498bc34d6e…, редакция 1, принята владельцем 16.09.2026),
 * блок «ЕДИНСТВЕННОЕ НОВОЕ: ЛЕНТА-ИНДЕКС». Перенесён знак в знак, кроме
 * ОТСТУПЛЕНИЯ О-1 паспорта: в прототипе адаптив записан `@container wtscreen`,
 * потому что демо-фрейм задаёт ширину сам (headless Chrome не рисует окна уже
 * 500 px). 🔴 На сайте контейнера `wtscreen` НЕТ НИ ОДНОГО — без этого возврата
 * в `@media` четыре колонки молча приехали бы на телефон. ПОРОГИ СОХРАНЕНЫ
 * ЗНАК В ЗНАК: 1100 · 780 · 520. Два последних — те же, на которых уже
 * перестраивается сетка подвала строками выше.
 *
 * Порог 520 парный к скрипту в footer.php: до 520 включительно лента в одну
 * колонку и свёрнута, от 521 скрипт ставит `open`.
 * ═══════════════════════════════════════════════════════════════════════════ */
.foot-index { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.foot-index__sum { list-style: none; display: flex; align-items: center; gap: .5rem;
  cursor: pointer; padding: .15rem 0; font-size: var(--text-sm); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--foreground); }
.foot-index__sum::-webkit-details-marker { display: none; }
.foot-index__sum:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px;
  border-radius: var(--radius-sm); }
.foot-index__n { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0;
  color: var(--muted-foreground); background: var(--background);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 .45rem; }
.foot-index__chev { color: var(--muted-foreground); transition: transform .15s ease; }
.foot-index[open] .foot-index__chev { transform: rotate(180deg); }
.foot-index__list { list-style: none; margin: .6rem 0 0; padding: 0;
  columns: 4; column-gap: 1.5rem; }
.foot-index__list li { break-inside: avoid; margin: 0 0 .4rem; }
.foot-index__list a { display: inline-block; color: var(--muted-foreground);
  text-decoration: none; font-size: var(--text-xs); line-height: 1.35; }
.foot-index__list a:hover { color: var(--primary); }
.foot-index__list a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px;
  border-radius: var(--radius-sm); }
/* пороги подобраны под ширину самого длинного имени, а не «на глаз» — см. замер */
@media (max-width: 1100px) { .foot-index__list { columns: 3; } }
@media (max-width: 780px)  { .foot-index__list { columns: 2; } }
@media (max-width: 520px)  { .foot-index__list { columns: 1; }
  .foot-index__sum { min-height: 44px; }        /* тач-зона по контракту доступности */
  .foot-index__list a { padding: .25rem 0; }    /* строки индекса тоже нажимаются пальцем */
}

/* ===================================================================== */
/* === МОБИЛЬНЫЙ АДАПТИВ ШАПКИ + компактизация (2026-07-06) =========== */
/* Брейкпоинты: 960 (шапка→бургер) — НОВЫЙ; 780/520 — существующие канона */
/* (trust/тайлы/футер уже адаптивны выше). Off-canvas — на механике       */
/* существующего disclosure (обобщённый JS), не изобретаем.               */
/* ===================================================================== */
.nav-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; background: transparent; border: none; border-radius: var(--radius); color: var(--foreground); cursor: pointer; }
.nav-burger:hover { background: var(--secondary); }
.nav-burger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nav-scrim { position: fixed; inset: 0; background: oklch(0 0 0 / 42%); z-index: 55; }
.nav-scrim[hidden] { display: none; }
.nav-panel { position: fixed; top: 0; left: 0; width: min(86%, 340px); height: 100%; background: var(--popover); color: var(--popover-foreground); border-right: 1px solid var(--border); box-shadow: 0 0 40px oklch(0 0 0 / 20%); padding: 1rem 1.15rem 1.25rem; z-index: 60; overflow-y: auto; }
.nav-panel[hidden] { display: none; }
.nav-panel-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 .5rem auto; background: transparent; border: none; border-radius: var(--radius); color: var(--muted-foreground); cursor: pointer; }
.nav-panel-close:hover { background: var(--secondary); }
.nav-panel-close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nav-panel-links { display: flex; flex-direction: column; gap: .1rem; }
.nav-panel-links a { display: block; padding: .7rem .4rem; font-size: var(--text-base); color: var(--foreground); text-decoration: none; border-radius: var(--radius); }
.nav-panel-links a:hover { background: var(--secondary); }
.nav-panel-links a[aria-current="page"] { color: var(--primary); font-weight: 650; }
.nav-panel-mail { display: inline-block; padding: .4rem; font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: none; }
.nav-panel-mail:hover { color: var(--primary); }

@media (max-width: 960px) {
  .nav-burger { display: inline-flex; }
  .site-header > .site-nav { display: none; }          /* горизонт. меню → бургер */
  .site-header { gap: .75rem; }
  .logo-main { font-size: 1.25rem; }                    /* лого ~34px на мобильном */
  .logo-sub { font-size: .62rem; }
  .contact-accounts { display: none; }                  /* «счета…» — вторичное */
  .contact-email { display: none; }                     /* email — в off-canvas меню */
}
@media (max-width: 780px) {
  .util-sec { display: none; }                          /* вторичный B2B-дисклеймер */
  .go-label { display: none; }                          /* «Найти» → иконка */
  .search-go { padding: 0 1rem; }
  .search-scope { padding: 0 .5rem; }
}
@media (max-width: 520px) {
  .util-account .util-label, .util-cart .util-label { display: none; }  /* Войти/Корзина → иконки */
  /* Остаток до минимума на узком экране: перенос РАЗРЕШЁН (требование design §11 —
     «короткая форма на мобильном, перенос допускается, соседние элементы не сдвигаются
     рывком»). Скрывать строку здесь нельзя: на телефоне она нужна ровно так же, а то
     и больше — там меньше видно.
     ⚠️ Короткой ФОРМУЛИРОВКИ у меня нет: это клиентский текст, его пишет welle-copy.
     Поэтому пока сжимается вёрстка, а не слова. Место просит взгляда design на макете. */
  .util-cart-min { white-space: normal; line-height: 1.15; max-width: 8.5rem; }
  .hero-h1 { font-size: var(--text-lg); }               /* ступень шкалы, не ниже принятого */
  .search-scope { display: none; }                      /* «везде» — дефолт-скоуп */
  .contact-tel { font-size: var(--text-base); }         /* телефон-CTA компактнее, но виден */
}

/* ── ДЕФЕКТ МИНИМАЛЬНОЙ ШИРИНЫ СТРАНИЦЫ (найден 05.08, диагностирован Э6 08.08) ──
   Шапка не умела сжиматься ниже суммы своих детей: бургер + лого + неразрывный
   телефон + шеврон + отступы = 391 px. Ниже 391 уезжала ВСЯ страница на ЛЮБОЙ
   странице сайта. Замер: scrollWidth 391 при clientWidth 320…390.
   Лечение двухступенчатое, чтобы телефон-CTA не прятать и не ломать. */
@media (max-width: 440px) {
  .site-header { padding-left: 1rem; padding-right: 1rem; gap: .5rem; }
  /* flex-элемент по умолчанию не сжимается ниже содержимого — разрешаем */
  .contact-disclosure { min-width: 0; }
  .contact-tel { font-size: var(--text-sm); }
}
/* Ниже 375 одной строкой уже не собрать, не жертвуя телефоном: переносим
   контактный блок на вторую строку шапки. Телефон остаётся видимым и кликабельным. */
@media (max-width: 374px) {
  .site-header { flex-wrap: wrap; row-gap: .35rem; }
  .header-spacer { display: none; }
  .contact-disclosure { flex: 1 0 100%; justify-content: flex-end; }
}

/* End */


/* Start:/local/templates/welle/css/integration.css?178876945524273*/
/* integration.css — слой переноса канона главной в полноширинный сайт (Welle Technik).
   Канонный styles.css НЕ трогаем; здесь только фон страницы, центрирующий контейнер и
   полноширинные полосы. Значения канона не меняем. Загружается ПОСЛЕ styles.css. */

/* фон страницы — как сайт, не демо-серый */
body { background: var(--background); }

/* центрирующий контейнер контента */
.wt-container { max-width: 1180px; margin: 0 auto; padding: 0 1rem; }

/* секции канона центрируются колонкой 1180; фон-полосы дают обёртки .wt-band-secondary */
.util-bar,
.site-header,
.hero-pad,
.site-footer { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* полноширинная полоса-фон (util-bar и футер — серые) */
.wt-band-secondary { width: 100%; background: var(--secondary); }
.wt-band-secondary .util-bar { background: transparent; }
.wt-band-secondary .site-footer { background: transparent; border-radius: 0; }

/* ============================================================================
 * НЕЙТРАЛИЗАЦИЯ BOOTSTRAP 3 НА СТРАНИЦАХ КАТАЛОГА (2026-07-31).
 *
 * ФАКТ, ради которого этот блок (снят getComputedStyle в headless Chrome 31.07,
 * прототип и стенд в одном окне 1440×1200):
 *   страницы /catalog/ подключают /bitrix/css/main/bootstrap.min.css — его тянут
 *   ШТАТНЫЕ шаблоны комплексного компонента bitrix:catalog (оттуда же div.row/.col-xs-12
 *   в разметке). Bootstrap 3 задаёт html{font-size:10px} и body{font-size:14px;
 *   line-height:1.42857143}. Вся наша шкала — rem-овая (--scale-text-lg: 1.125rem,
 *   --scale-space-4: 1rem, --radius: 0.375rem), поэтому при корне 10px КАЖДОЕ значение
 *   токена уменьшалось в 1,6 раза:
 *     название карточки  14,00 px → 8,75 px
 *     цена карточки      18,00 px → 11,25 px
 *     радиус карточки    10,00 px → 7,75 px
 *   Медиа-слот считается от ШИРИНЫ карточки (aspect-ratio: 4/3) и не сжимался вместе
 *   с текстом — поэтому занимал 56,4 % высоты карточки против 34,3 % в макете.
 *   Это и есть первопричина «цена мелкая», «слот съедает карточку», «рамки не видно»
 *   (пп. 11–12 сверки владельца 31.07). Главная bootstrap не подключает — каталог и
 *   главная жили в разных масштабах.
 *
 * ПОЧЕМУ ИМЕННО ЗДЕСЬ. bootstrap.min.css лежит в /bitrix/ — его не трогаем (граница
 * роли). integration.css грузится ПОСЛЕДНИМ (header.php: primitives → semantic →
 * styles → integration), а порядок в <head> — bootstrap, page, template: значит правило
 * той же специфичности здесь выигрывает по каскаду. !important не нужен и не ставится.
 *
 * ЗНАЧЕНИЯ — по прототипам: там html/body своего кегля не задают, то есть 1rem = 16px
 * и line-height: normal. Возвращаем ровно это, ничего не «улучшая».
 * ========================================================================== */
html { font-size: 16px; }
body { font-size: var(--text-base); line-height: normal; }

/* --- ИНТЕРИМ: базовая раскладка страниц /catalog/ (старые wt-стили были в перезаписанном
   styles.css; полноценный рестайл каталога — отдельной задачей). Чтобы каталог не «поехал».
   2026-07-31: размеры приведены к прототипу catalog-listing (.catalog / .catalog-body):
   колонка фильтра 264px (было 240), gap --space-8 (было 1.5rem), поля --space-5 и нижнее
   --space-16. Литералы заменены токенами — канон дизайн-системы. --- */
/* 🔴 Д10 · СЛОТ 18 · ВОЛНА Б, 2026-09-07 — СЕТКА ПЕРЕВЕДЕНА В ОДНУ КОЛОНКУ.
   Было `264px 1fr` — две колонки под <aside class="wt-sidebar"> + контент.
   Колонка снята из header.php (в эталоне её нет ни на одной ширине), и у сетки
   остался ОДИН ребёнок. Оставить `264px 1fr` значило бы держать пустую колонку
   264 px слева на каждой странице каталога: визуально это тот же отъеденный кусок
   ширины, ради устранения которого колонка и снималась.
   minmax(0, 1fr), а не 1fr: без minmax(0,…) грид-элемент не сжимается ниже своего
   содержимого — тем же приёмом уже вылечены `:has(.wt-filter)` и `:has(.wt-pdp)` ниже,
   и теперь оба этих правила стали частным случаем базового, а не исключением из него. */
.wt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-16);
  align-items: start;
}

/* ---------------------------------------------------------------------------
 * ЛИСТОВОЙ РАЗДЕЛ С ФАСЕТНЫМ ФИЛЬТРОМ — ОДНА левая колонка, а не две (2026-08-01).
 *
 * ЧТО БЫЛО. Пока фасетов не существовало, эту 264-пиксельную колонку временно
 * занимало меню разделов — и прямо в комментарии выше (31.07) записано: «содержимое
 * (пока — меню разделов) ЗАМЕНИТСЯ ФАСЕТАМИ, когда они появятся». Фильтр появился
 * 01.08, но встал НЕ на место меню, а ВТОРОЙ колонкой рядом. Отсюда «листинг в две
 * колонки вместо трёх»: это не порог сетки отработал, а до сетки не дошло 296 px.
 *
 * ЗАМЕР (CDP, getBoundingClientRect, окно 1440×1200, оба документа в одном прогоне):
 *                        прототип   стенд ДО      стенд ПОСЛЕ
 *   контейнер             1180 px    1180 px       1180 px
 *   левая колонка          264 px     264 px        264 px   (фильтр)
 *   вторая колонка           нет   264+32 px          нет     («Каталог / Все товары»)
 *   колонка листинга       844 px     548 px        844 px   (844 − 264 − 32 = 548)
 *   карточек в ряду            3          2             3
 *   ширина карточки     270,66 px  266,00 px     270,66 px
 *
 * ПОЧЕМУ НЕ ТРОГАЕМ ПОРОГ container query (720 px у .wt-cat). Он откалиброван по
 * прототипу и совпадает с ним с точностью до 16 px по вьюпорту: у прототипа третья
 * колонка включается с 1040 px вьюпорта, у нас — с 1056 px (при .wt-cat = ширина
 * вьюпорта − 296 px). Снижение порога до 548 дало бы три карточки по 172 px вместо
 * 270,66 — «три колонки» ценой расхождения с макетом на 36 %. Сужение сайдбара тоже
 * отпадает: чтобы уместить два сайдбара и 720 px листинга, каждый пришлось бы срезать
 * до ~178 px, то есть сломать ту самую ширину 264 px, которая с макетом совпадает.
 * Единственная правка, дающая совпадение по ВСЕМ четырём числам, — убрать лишнюю
 * колонку. Пороги сетки не тронуты вовсе, поэтому мобильная раскладка не меняется.
 *
 * ГРАНИЦЫ ПРАВИЛА. Только там, где фильтр реально отрисован (:has), и только с 790 px.
 * 790, а не 781, — чтобы меню разделов исчезало РОВНО в тот момент, когда фильтр
 * занимает освободившееся место, без промежуточного состояния «нет ни того, ни другого».
 * Арифметика: спрятав меню, получаем .wt-content = вьюпорт − 40, а bootstrap-.row шире
 * своего родителя на 30 (отрицательные поля −15/−15), то есть вьюпорт − 10; контейнер
 * wtsec фильтра включает боковую колонку с 780 → вьюпорт ≥ 790. Порог wtsec не тронут.
 * Проверено: при 790 стенд и прототип совпадают (листинг 454 px, две колонки), при 1440 —
 * тоже (844 px, три колонки). Ниже 790 не меняется НИЧЕГО: принятая 01.08 узкая и
 * мобильная вёрстка цела до пикселя (замер 390 px: меню разделов на месте, одна колонка).
 * На карточке товара, в корне каталога и на разделах-группах без фильтра колонка разделов
 * остаётся как была. Нет поддержки :has() — прежняя раскладка, интерфейс рабочий.
 *
 * ОСТАТОК, СОЗНАТЕЛЬНО НЕ ТРОГАЕМ: в полосе 781–789 px прототип уже показывает боковой
 * фильтр, а стенд ещё нет. Полоса шириной 9 px, переходная, существовала и до правки
 * (тогда она была шире). Свести её можно только сдвигом порога wtsec — цена выше пользы.
 *
 * НАВИГАЦИЯ не теряется: над H1 стоят хлебные крошки со всей цепочкой, в шапке —
 * пункт «Каталог». В обоих утверждённых прототипах (catalog-listing, catalog-section-
 * group) отдельной колонки-рубрикатора на странице раздела нет.
 * ------------------------------------------------------------------------- */
@media (min-width: 790px) {
  .wt-layout:has(.wt-filter) { grid-template-columns: minmax(0, 1fr); }
  .wt-layout:has(.wt-filter) > .wt-sidebar { display: none; }
}

/* ---------------------------------------------------------------------------
 * КАРТОЧКА ТОВАРА — БЕЗ КОЛОНКИ РАЗДЕЛОВ, КОНТЕНТ ВО ВСЮ ШИРИНУ (2026-08-05, А2).
 *
 * РАСХОЖДЕНИЕ С МАКЕТОМ, найдено на приёмке 05.08. В утверждённом прототипе PDP
 * (Design/prototypes/product-pdp/index.html, принят 18.07) боковой колонки НЕТ вовсе:
 * есть один контейнер .pdp (max-width 1180, padding по бокам --space-5), внутри него
 * крошки и H1 идут на всю ширину. На стенде же слева стояла колонка 264 px с ОДНОЙ
 * ссылкой «Все товары», а контент был сжат до 844 px (1180 − 40 полей − 264 − 32 зазор).
 *
 * ПОЧЕМУ ЭТО НЕ НОВОЕ ДИЗАЙН-РЕШЕНИЕ. Ничего на освободившееся место не ставится и
 * сетка не сочиняется: колонок становится одна, ширина контента — 1140 px, ровно как
 * у .pdp прототипа. Действует ограничение владельца 30.07 «дизайн только по утверждённым
 * макетам»; здесь оно работает на удаление.
 *
 * ПРИЁМ — ТОТ ЖЕ, ЧТО ПРИНЯТ 01.08 ДЛЯ ЛИСТИНГА (правило выше): раскладку решает CSS по
 * фактическому содержимому колонки контента, потому что шаблон сайта открывает .wt-layout
 * в header.php, когда ещё НЕизвестно, какая страница каталога рендерится — /catalog/
 * работает в SEF-режиме одним index.php (SEF_URL_TEMPLATES: section/element), и тип
 * страницы определяет сам комплексный компонент, то есть ПОЗЖЕ шапки. Маркер карточки —
 * корневой .wt-pdp её шаблона, ровно как .wt-filter маркирует страницу с фасетами.
 *
 * БЕЗ МЕДИАЗАПРОСА, в отличие от правила листинга. Там порог 790 px нужен, чтобы меню
 * разделов уходило ровно тогда, когда его место занимает фильтр. Здесь занимать место
 * нечем и не нужно: в прототипе колонки нет ни на одной ширине, включая мобильный фрейм.
 *
 * ПОБОЧНО ИСПРАВЛЯЕТСЯ АДАПТИВ КАРТОЧКИ. Точки переключения PDP — container queries по
 * ширине СВОЕГО контейнера .wt-pdp (канон дизайн-системы). При 844 px не срабатывал
 * порог 1040 px, то есть широкая раскладка прототипа на стенде не включалась вовсе;
 * при 1140 px она включается — как в макете.
 *
 * ОСТАТОК, НАЗВАННЫЙ ЧЕСТНО: <aside class="wt-sidebar"> остаётся в HTML карточки и
 * скрывается стилем (как и на листинге с 01.08). Убрать его из разметки можно только
 * серверным признаком «это карточка» в header.php — отдельная задача, здесь не делается.
 * Нет поддержки :has() — прежняя раскладка, страница полностью рабочая.
 * ------------------------------------------------------------------------- */
.wt-layout:has(.wt-pdp) { grid-template-columns: minmax(0, 1fr); }
.wt-layout:has(.wt-pdp) > .wt-sidebar { display: none; }

/* ---------------------------------------------------------------------------
 * ШАПКА РАЗДЕЛА И ПЛИТКИ ПОДРАЗДЕЛОВ — НАД ФИЛЬТРОМ, ВО ВСЮ ШИРИНУ (2026-08-01).
 *
 * ЧТО БЫЛО И ПОЧЕМУ ЭТО РАСХОЖДЕНИЕ. Штатный section_horizontal.php кладёт в один
 * bootstrap-.row три колонки: фильтр, пустую заготовку и общую колонку «блок разделов +
 * листинг». Шаблон фильтра превращает этот .row в сетку 264 px + остаток, и H1,
 * подзаголовок и плитки подразделов оказывались ВНУТРИ правой колонки — сбоку от
 * фильтра. В ОБОИХ утверждённых макетах иначе: шапка раздела идёт над двумя колонками
 * (catalog-listing, .catalog-head над .catalog-body), а в макете раздела-группы над ними
 * же идёт и блок плиток (.head + .sections над .body). То есть расхождение было не
 * только у раздела-группы, но и у листового раздела.
 *
 * ПРИЁМ. Колонку-контейнер объявляем display: contents — её дети (.wt-sections и .wt-cat)
 * становятся элементами той же сетки и размещаются явно: блок разделов на всю ширину в
 * первой строке, фильтр и листинг — во второй. Разметка ядра не трогается, шаблон
 * фильтра не трогается, его поведение и адреса не меняются: правится только раскладка.
 *
 * ПОЧЕМУ ЗДЕСЬ, А НЕ В style.css ФИЛЬТРА. Это композиция СТРАНИЦЫ, а не деталь фильтра;
 * умный фильтр выкачен в бой 01.08 и по границам задачи не переделывается. integration.css
 * грузится последним (header.php: primitives -> semantic -> styles -> integration), поэтому
 * правило той же специфичности выигрывает по каскаду — !important не нужен.
 *
 * ПОЛЯ. У bootstrap-.row отрицательные поля −15 px, у .col-xs-12 — компенсирующий
 * padding 15 px. Дети, поднятые через display: contents, этот padding теряют, поэтому
 * поля .row обнуляются, а у колонки фильтра padding уже снят правилом шаблона фильтра.
 * Арифметика после правки (контейнер 1140): фильтр 264, зазор --space-8 = 32,
 * листинг 1140 − 264 − 32 = 844 — те же числа, что были и что в макете; побочно ушёл
 * прежний вылет фильтра на 15 px левее колонки контента.
 *
 * УЗКИЙ ЭКРАН. Сетки нет, поэтому тот же порядок задаётся flex-ом: плитки, затем
 * свёрнутая панель фильтра, затем листинг — как в мобильном фрейме макета (шапка и
 * плитки выше кнопки «Фильтр»).
 *
 * ЕСЛИ :has() НЕ ПОДДЕРЖИВАЕТСЯ — не применяется ничего, страница остаётся в прежней
 * раскладке и полностью рабочей (тот же принцип, что у правил шаблона фильтра).
 * ------------------------------------------------------------------------- */
.row:has(> div > .wt-filter) {
  margin-left: 0;
  margin-right: 0;
  /* Отбивку первой строки задаёт сам блок разделов, а не зазор сетки: в макетах она
     разная — 32 px под плитками раздела-группы (.sections) и 20 px под шапкой листового
     раздела (.catalog-head). Один общий row-gap не дал бы ни того, ни другого. */
  row-gap: 0;
}
.row:has(> div > .wt-filter) > div:last-child { display: contents; }
/* Поля .row сняты выше, поэтому компенсирующий padding колонки фильтра тоже снимаем —
   иначе на узком экране панель фильтра оказывалась на 30 px уже шапки и листинга.
   На широком то же самое уже делает правило шаблона фильтра; здесь — для всех ширин. */
.row:has(> div > .wt-filter) > div:has(> .wt-filter) {
  padding-left: 0;
  padding-right: 0;
}
.row:has(> div > .wt-filter) .wt-sections:not(:has(.wt-sections__grid)) {
  margin-bottom: var(--space-5);
}

/* Селекторы намеренно НЕ дочерние к .row: display: contents меняет генерацию боксов,
   но не дерево документа — .wt-sections и .wt-cat остаются внуками .row. */
@container wtsec (min-width: 780px) {
  .row:has(> div > .wt-filter) > div > .wt-sections { grid-column: 1 / -1; grid-row: 1; }
  .row:has(> div > .wt-filter) > div:has(> .wt-filter) { grid-row: 2; }
  .row:has(> div > .wt-filter) > div > .wt-cat { grid-column: 2; grid-row: 2; }
}

@container wtsec (max-width: 779.98px) {
  .row:has(> div > .wt-filter) { display: flex; flex-direction: column; }
  .row:has(> div > .wt-filter) > div > .wt-sections { order: 1; }
  .row:has(> div > .wt-filter) > div:has(> .wt-filter) { order: 2; }
  .row:has(> div > .wt-filter) > div > .wt-cat { order: 3; }
}

/* ---------------------------------------------------------------------------
 * САЙДБАР КАТАЛОГА (2026-07-31).
 *
 * В прототипе на этом месте стоит карточка фасетного фильтра (.filter-desktop
 * + .filter-title + .opt). Самих фасетов пока нет — это отдельная задача «Умный
 * фильтр» (USE_FILTER='N'), и в этой постановке они делаться не должны. Но
 * КОНТЕЙНЕР сайдбара был не одет вовсе: bootstrap рисовал маркированный <ul>
 * с отступом 40px и синими ссылками #337ab7. Одеваем контейнер и типографику
 * ровно по прототипу; содержимое (пока — меню разделов) заменится фасетами,
 * когда они появятся, без правки этих правил.
 * ------------------------------------------------------------------------- */
.wt-sidebar {
  position: sticky;
  top: var(--space-5);
  padding: var(--space-5);
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 780px) { .wt-sidebar { position: static; } }

/* .filter-title прототипа */
.wt-sidebar__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* .opt прототипа: строка выбора, без маркеров, без bootstrap-синевы */
.wt-side-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.wt-side-nav__link {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--foreground);
  text-decoration: none;
}
.wt-side-nav__link:hover { color: var(--primary); }
.wt-side-nav__link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.wt-side-nav__link--active { font-weight: 650; color: var(--primary); }

/* контактная панель: гарантированный сплошной фон/рамка/тень поверх канона (перекрывает,
   если правило styles.css не выигрывает). Тень rgba (не oklch) — устойчиво к склейке. */
.contact-panel {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  z-index: 50;
}

/* End */


/* Start:/local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185*/
/* Хлебные крошки — ЕДИНСТВЕННЫЙ носитель стиля крошек на весь сайт.
   Форма — эталон сквозной рамки ред. 4 (Design/etalony-zamorozhennye/ramka/
   Ramka_red4__2026-10-11_1239__sha256-2834a69e…dc.html, строки 554–569), правило Р10
   (DECISIONS 11.10): размер --text-xs, цвет --muted-foreground; ссылки подчёркнуты
   ВСЕГДА, при наведении темнеют до --foreground; текущее звено и «/» не подчёркнуты
   (правила на них нет). Значения — только токены css/tokens/, литералов не заводим.
   Подчёркивание задано явно (underline), а не браузерным умолчанием: в бою подключён
   /bitrix/css/main/bootstrap.min.css, и сброс a { text-decoration: none } в нём или
   в другом файле снял бы умолчание (справка design по Р10, §3).
   Отступ снизу — --space-2, как в рамке.

   Кто подключает файл: bitrix:breadcrumb сам (SetAdditionalCSS в component.php ядра) —
   каталог и статьи «Как это работает»; страницы со статической разметкой .wt-crumbs —
   строкой SetAdditionalCSS на странице: «Условия работы», «Контакты», рубрикатор,
   корзина (/personal/cart/index.php), оформление заказа (/personal/order/make/index.php).
   Копий этих правил в стилях других шаблонов быть не должно: до 11.10 они жили
   в sale.basket.basket и sale.order.ajax (bootstrap_v4/style.css и .min.css) и сняты
   решением владельца 11.10 «Р10 доходит до корзины и оформления заказа…». */

.wt-crumbs {
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
	margin-bottom: var(--space-2);
}

/* ЗОНА КЛИКА ССЫЛКИ — больше, на экране не сдвигается ни пиксель (акт №83, 13.10.2026; DECISIONS 13.10
   «ХЛЕБНЫЕ КРОШКИ: ЗОНА КЛИКА БОЛЬШЕ БЕЗ ВИДИМЫХ ИЗМЕНЕНИЙ»). Повод — Clarity 13.10: щелчок у нижнего края
   «Отводы нержавеющие» ушёл мимо (шрифт 12 px, строка 18 px, запаса не было).
   Как устроено: у строчной ссылки поля (padding) расширяют область, по которой браузер засчитывает щелчок,
   а строку не раздвигают — вертикальные поля строчного элемента высоту строки не меняют, горизонтальные гасятся
   равным отрицательным полем (margin), поэтому ни одна буква не сдвигается. Кольцо фокуса с клавиатуры
   поля бы увеличили — для него правило ниже (:focus-visible).
   Почему именно эти шаги:
   · снизу --space-1_5 (6 px) — туда пришёлся промах; до следующего блока под крошками ~10 px, не дотягивается;
   · сверху половина --space-0_5 (1 px) — больше нельзя: при переносе крошек на вторую строку (телефон) ссылка
     нижней строки перехватывала бы щелчок у нижнего края текста верхней (у Segoe UI запас строки всего 2 px);
   · по бокам --space-0_5 (2 px) — пробел до «/» 3,4 px: «/» остаётся ничьим. Справа поле работает только
     у последней ссылки — пробел после ссылки идёт позже по разметке и щелчок над ним забирает себе. */
.wt-crumbs a {
	color: inherit;
	text-decoration: underline;
	padding: calc(var(--space-0_5) / 2) var(--space-0_5) var(--space-1_5);
	margin: 0 calc(-1 * var(--space-0_5));
}

/* Кольцо фокуса с клавиатуры обводит поля ссылки и с полями стало бы больше (на стенде 13.10 отличались 120 снимков
   фокуса из 120). В фокусе с клавиатуры поля снимаются, и кольцо рисуется по тем же коробкам, что до акта №83
   (снимки фокуса 120 из 120 равны «было»). Щелчок мышью это не задевает: у ссылки, нажатой мышью, :focus-visible
   браузер не включает. */
.wt-crumbs a:focus-visible {
	padding: 0;
	margin: 0;
}

.wt-crumbs a:hover {
	color: var(--foreground);
	text-decoration: underline;
}

/* End */
/* /local/templates/welle/css/tokens/primitives.css?178638222910725 */
/* /local/templates/welle/css/tokens/semantic.css?17863822298800 */
/* /local/templates/welle/styles.css?178956705548503 */
/* /local/templates/welle/css/integration.css?178876945524273 */
/* /local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185 */