/* ============================================================================
   ok-home-w2.css — HOME-SHELL-V2 · СЛОЙ ПРЕДСТАВЛЕНИЯ · ВОЛНА 2 (пакет HC-10)
   ----------------------------------------------------------------------------
   ЧТО ЗДЕСЬ. Четыре блока каскада Главной (и ~1200 ГЕО-посадок):
     [SHOWCASE]   05а · Популярные стёкла      → .ok-showcase
     [TRANSPORT]  06  · Для какого транспорта  → .ok-transport
     [BRANDS]     07  · Марки автобусов (strip)→ .ok-brands
     [NOCAT]      08  · Не нашли стекло        → .ok-nocat

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ. Волны HC-08…HC-13 идут ПАРАЛЛЕЛЬНО, а не по очереди:
   общий assets/ok-home.css принадлежит HC-08, ok-home-w1.css — HC-09. Слияние
   в один лист запланировано на HC-14/HC-16. До того файл живёт отдельно, но
   держит ТУ ЖЕ структуру и те же приёмы, что ok-home.css — чтобы слияние было
   механическим (перенести секции по якорям [SHOWCASE]/[TRANSPORT]/[BRANDS]/[NOCAT],
   заготовки под них в ok-home.css уже стоят).

   ═══ ПРАВИЛА ФАЙЛА (14_CSS_JS_ARCHITECTURE §16) ════════════════════════════
     1. Скоуп. Каждое правило начинается с класса своего блока (.ok-showcase…,
        .ok-transport…, .ok-brands…, .ok-nocat…). Глобальных селекторов НЕТ:
        слой не протекает ни в шапку/футер, ни в FORBID-зоны (услуга, каталог).
        Даже там, где мы перекрашиваем ЧУЖИЕ классы (.okna-card, .okna-podbor__*,
        .okna-bm__*) — они всегда под своим .ok-*-предком, поэтому /katalog/ и
        страницы услуг, где живут те же классы, не затрагиваются.
     2. Цвет. Ноль литералов #hex: только токены --ok-* (assets/ok-tokens.css).
        Промежуточные тона мастера собраны из токенов через color-mix() с
        подписанным ΔE (приём HC-05/HC-08). Каждое такое объявление продублировано
        «токен → color-mix», чтобы браузер без color-mix взял осмысленный фолбэк.
     3. !important — НЕ метод. Единственное применение в файле (см. [S.2]) бьёт
        по ЧУЖОМУ !important из design.css:704 и подписано на месте.
        TT1 (twentytwentyone/style.css грузится ДВАЖДЫ) и glavnaya.css (грузится
        ПОЗЖЕ нашего слоя!) перебиваются СПЕЦИФИЧНОСТЬЮ `html body .ok-…`,
        а не расчётом на порядок enqueue.
     4. Брейкпоинты — КАНОН M1, новые значения запрещены: 1024 / 768 / 600 / 480.
        Media-правила блока — В КОНЦЕ ЕГО ЖЕ секции.
     5. Числа — из ЖИВОГО ЗАМЕРА мастер-файла (headless Chrome 150,
        --allow-file-access-from-files, file://…/«02 Главная.dc.html»),
        а не из чтения инлайн-стилей. Замер подписан в шапке каждой секции.

   ═══ ЧТО МЫ ПЕРЕБИВАЕМ (карта конфликтов, снята грепом) ════════════════════
     glavnaya.css:54    .glavnaya-v4 > section{padding:32px 0}      (0,1,1)
     glavnaya.css:2453  то же в @media                              (0,1,1)
     glavnaya.css:338   .glavnaya-v4 .okna-bm{max-width;padding:40} (0,2,0)
     design.css:704     .glavnaya-v4 .okna-showcase__head{margin-left:…!important}
     inc/podbor.php     инлайновый <style id="okna-podbor-css">      (0,1,0)
   Первые три требуют веса `html body .ok-…` (0,2,2); последний бьётся обычным
   потомком .ok-nocat (0,2,0) — инлайн-лист в <body> идёт позже, но проигрывает
   по специфичности.

   ЗАВИСИМОСТИ ENQUEUE: ok-tokens → ok-foundation → ok-layout → (ok-header,
   ok-footer, ok-home, ok-home-w1) → ok-home-w2. Файл САМОДОСТАТОЧЕН: опирается
   только на ok-tokens (переменные) и ok-layout (.ok-container) — если соседние
   волны ещё не задеплоены, блоки волны 2 всё равно выглядят правильно.
   ============================================================================ */


/* ██████████████████████████████████████████████████████████████████████████████
   [W2.0] ОБЩЕЕ ДЛЯ ВОЛНЫ 2 — плашка секции, H2, интро-абзац, локальные тона
   ------------------------------------------------------------------------------
   ЖИВОЙ ЗАМЕР МАСТЕРА (одинаков у всех четырёх секций волны):
     секция ......... padding 72px 0 · фон чередуется #ffffff ↔ #f5f8fd
     контейнер ...... max-width 1280 · padding 0 32 · margin 0 auto → контент 1216
     H2 ............. 34px/800 · lh 1.18 · ls −.01em (−0.34px) · #123d87
                      подчёркивание: linear-gradient(#e0223a,#e0223a)
                      left bottom / 44px 3px no-repeat · padding-bottom 14
     интро-абзац .... 16.5px/400 · lh 1.55 (25.575px) · #526173 · max-width 820
     мобайл (390) ... секция 44px 0 48px · H2 23px/800 без подчёркивания
                      интро 14px/400 · lh 1.55 (21.7px)
   ★ 820px у интро — замер мастера (у гайда §3 значится 760); берём мастер.
   ██████████████████████████████████████████████████████████████████████████████ */

.ok-showcase,
.ok-transport,
.ok-brands,
.ok-nocat{
  /* Тон-подложка теней мастера rgba(20,40,80,·). Собран из токенов:
     mix(--ok-dark 55%, --ok-ink) = rgb(18,40,78) · эталон rgb(20,40,80) · ΔE 0.6 */
  --okw2-shadow-ink:var(--ok-ink);
  --okw2-shadow-ink:color-mix(in srgb, var(--ok-dark) 55%, var(--ok-ink));

  /* Разделитель под фото карточки · эталон #f2f5fa
     mix(--ok-section-b 75%, --ok-border) = #f2f5fa · ΔE 0.0 */
  --okw2-hair:var(--ok-border);
  --okw2-hair:color-mix(in srgb, var(--ok-section-b) 75%, var(--ok-border));

  /* Разделитель внутри светлой панели · эталон #e3e9f2
     mix(--ok-border 50%, --ok-border-input) = #e4e9f0 · ΔE 1.0 */
  --okw2-hair-2:var(--ok-border);
  --okw2-hair-2:color-mix(in srgb, var(--ok-border) 50%, var(--ok-border-input));

  /* Тень наведения ленты/карточки · эталон 0 10px 30px rgba(20,40,80,.08) */
  --okw2-shadow-lift:var(--ok-shadow-soft);
  --okw2-shadow-lift:0 10px 30px color-mix(in srgb, var(--okw2-shadow-ink) 8%, transparent);

  /* Тень круглых стрелок ленты · эталон 0 8px 22px rgba(20,40,80,.16) */
  --okw2-shadow-arrow:var(--ok-shadow-dropdown);
  --okw2-shadow-arrow:0 8px 22px color-mix(in srgb, var(--okw2-shadow-ink) 16%, transparent);
}

/* ── [W2.1] ПЛАШКА СЕКЦИИ ─────────────────────────────────────────────────────
   `html body` (0,1,2) обязателен: гасит `.glavnaya-v4 > section{padding:32px 0}`
   (0,1,1) из glavnaya.css — иначе к мастерским 72px сверху/снизу приклеивается
   ещё по 32px, и вертикальный ритм страницы уезжает вдвое.
   Фон — full-bleed (06 §3 правило 7), ширину ограничивает только .ok-container. */
html body .ok-showcase,
html body .ok-transport,
html body .ok-brands,
html body .ok-nocat{
  max-width:none;
  margin-inline:0;
  padding-block:var(--ok-section-space-desktop);   /* 72px — замер мастера */
  box-sizing:border-box;
}
/* Чередование фонов — ровно как в мастере: 05а B · 06 A · 07 B · 08 A. */
html body .ok-showcase{ background:var(--ok-section-b); }
html body .ok-transport{ background:var(--ok-section-a); }
html body .ok-brands{ background:var(--ok-section-b); }
html body .ok-nocat{ background:var(--ok-section-a); }

/* ── [W2.2] H2 СЕКЦИИ ─────────────────────────────────────────────────────────
   Подчёркивание сделано фоном-градиентом (как в мастере), а не ::after: у части
   легаси-заголовков ::after уже занят красной чертой 52×3 из glavnaya.css:1880 —
   двух черт быть не должно, поэтому чужой ::after гасим, свою рисуем фоном. */
.ok-showcase .ok-w2-h2,
.ok-transport .ok-w2-h2,
.ok-brands .ok-w2-h2,
.ok-nocat .ok-w2-h2{
  margin:0 0 12px;
  padding:0 0 14px;
  font-size:var(--ok-fs-h2);                 /* 34px */
  font-weight:var(--ok-fw-black);            /* 800  */
  line-height:var(--ok-lh-heading);          /* 1.18 */
  letter-spacing:var(--ok-ls-h2);            /* −.01em → −0.34px (замер) */
  color:var(--ok-ink);
  background-image:linear-gradient(var(--ok-red), var(--ok-red));
  background-position:left bottom;
  background-size:44px 3px;                  /* замер мастера: 44×3 */
  background-repeat:no-repeat;
}
.ok-showcase .ok-w2-h2::after,
.ok-transport .ok-w2-h2::after,
.ok-brands .ok-w2-h2::after,
.ok-nocat .ok-w2-h2::after{ content:none; }  /* гасим чужую черту 52×3 */

/* ── [W2.3] ИНТРО-АБЗАЦ ─────────────────────────────────────────────────────── */
.ok-transport .ok-w2-sub,
.ok-brands .ok-w2-sub{
  margin:0 0 28px;
  max-width:820px;                           /* замер мастера (в гайде 760) */
  font-size:var(--ok-fs-intro);              /* 16.5px */
  font-weight:var(--ok-fw-regular);
  line-height:var(--ok-lh-body);             /* 1.55 → 25.575px (замер) */
  color:var(--ok-text-2);
}

/* ── [W2.4] РЕСПОНСИВ ОБЩЕГО СЛОЯ ─────────────────────────────────────────────
   Канон 1024/768/600/480. Боковые падинги переключает сам .ok-container
   (ok-layout.css), здесь — только вертикальный ритм и кегли. */
@media (max-width:1024px){
  html body .ok-showcase,
  html body .ok-transport,
  html body .ok-brands,
  html body .ok-nocat{ padding-block:var(--ok-section-space-tablet); }  /* 56px */
}
@media (max-width:600px){
  /* Замер мобильного дерева мастера: секции волны 2 идут `44px … 48px`. */
  html body .ok-showcase,
  html body .ok-transport,
  html body .ok-brands,
  html body .ok-nocat{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
  }
  /* Чередование фонов — МОБИЛЬНАЯ фаза. На мобиле M5 подбор = B (ok-home-w1.css
     :≤600), поэтому такт волны 2 инвертируется относительно десктопа: 05а A ·
     06 B · 07 A · 08 B (мобильный макет 02, ветка ≤600). Десктопные объявления
     выше (стр.114-117) НЕ трогаем — там своя фаза мастера 05а B · 06 A · 07 B. */
  html body .ok-showcase{ background:var(--ok-section-a); }
  html body .ok-transport{ background:var(--ok-section-b); }
  html body .ok-brands{ background:var(--ok-section-a); }
  html body .ok-nocat{ background:var(--ok-section-b); }
  /* ✔ HC-14: строка кегля СНЯТА в обеих ветках ниже — канон 23px держит
     ok-legacy-compat.css §[3] одним правилом на все H2 оболочки.
     Прежнее обоснование дубля: без него кегль задавал не мастер,
     а глобальный мобильный слой (замер: приходило 22px вместо 23). Тем же приёмом
     и в том же месте это решено в ok-home-w1.css (HC-09) — держим единообразие. */
  .ok-showcase .ok-w2-h2,
  .ok-transport .ok-w2-h2,
  .ok-brands .ok-w2-h2,
  .ok-nocat .ok-w2-h2{
    margin-bottom:8px;
    padding-bottom:0;
    line-height:var(--ok-lh-h2-mobile);           /* 1.25 */
    letter-spacing:normal;
    background-image:none;                        /* в мобильном мастере черты нет */
  }
  /* H2 витрины печатает рендерер — своего класса .ok-w2-h2 у него нет.
     Остальные его свойства донастраиваются в секции [S.6]: она НИЖЕ по файлу,
     иначе базовое правило [S.2] перебило бы их порядком при равной специфичности. */
  .ok-showcase .okna-showcase__head h2{
    line-height:var(--ok-lh-h2-mobile);
  }
  .ok-transport .ok-w2-sub,
  .ok-brands .ok-w2-sub{
    margin-bottom:16px;
    max-width:none;
    font-size:14px;                          /* замер мастера: 14px/1.55 */
  }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [SHOWCASE] · HC-10 · 05а «Популярные стёкла»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/showcase-popular.php — тонкая обёртка над
   ШТАТНЫМ рендерером витрины okna_showcase_render_by_id('popular')
   (inc/showcase.php → okna_v4_card_html(), inc/catalog-prices.php).
   Карточку НЕ переписываем: это тот же компонент, что в каталоге, и он несёт
   корзину, Schema.org/Product, бейджи наличия и скидок. Здесь — только скин
   под мастер, строго внутри .ok-showcase (в /katalog/ ничего не меняется).

   ★ ЖИВОЙ ЗАМЕР (vp1440) ────────────────────────────────────────────────────
     секция ......... h 1334 · bg #f5f8fd · padding 72 0
     контейнер ...... 1280 / pad 32 → контент 1216
     шапка .......... flex · align-items flex-start · space-between · gap 20 · mb 30
     H2 ............. 34/800 · ls −.34px · #123d87 · pb 14 · черта 44×3 #e0223a
     кнопка «все» ... h 48 · padding 0 22 · #fff · 1px #dfe5ee · r8 · 14/700 #1c5bd6
     сетка .......... repeat(4,1fr) · gap 16 → колонка 292px
     карточка ....... 292×542 · #fff · 1px #e8ecf2 · r16 · overflow hidden
     фото ........... 290×290 (aspect 1/1) · граница снизу 1px #f2f5fa
     бейджи ......... 11/800 · r999 · padding 4 9 (слева наличие, справа обогрев)
     тело ........... padding 14 16 16
     H3 ............. 14.5/700 · lh 1.35 · #1d2433 · min-h 40 · mb 6
     характеристики . 12/400 · lh 1.45 · #8a94a6 · min-h 36 · mb 8
     цена ........... 13 #526173 · <b> 17/800 #123d87
     с установкой ... 12.5 #526173 · <b> #1d2433 · mt 2
     примечание ..... 11.5 #8a94a6 · margin 8 0 10
     кнопки ......... ряд h 40 · gap 8 · r8 · 13.5/700
                      «В корзину» #1c5bd6/#fff · «Открыть» #fff/1px #dfe5ee/#1c5bd6

   ★ ЧТО БЫЛО ДО (замер боевого, флаг 0): контейнер витрины —
     `<div class="okna-wrap" style="max-width:1180px">`, то есть контент 1100px
     против 1200 у соседних секций и 1216 у мастера. Витрина была УЖЕ всей
     страницы на 100px, карточка выходила 261.5 вместо 292. Новая обёртка на
     .ok-container это чинит (единый контракт 06 §3 правило 3).

   ★ МОБАЙЛ (390): вместо сетки — scroll-row карточек 240px, gap 12,
     scroll-snap x mandatory, padding 2 16 12; тело 12 14 14; H3 13.5/min-h 38;
     характеристики 11.5/min-h 34; цена 12.5 · <b> 16; кнопка h 42.
     ⚠ ОСОЗНАННОЕ ОТКЛОНЕНИЕ: в мобильном мастере у карточки ОДНА кнопка
     («Подробнее»). Мы оставляем обе — выбросить «В корзину» на телефонах
     значит потерять рабочее целевое действие каталога (прямой forbidden
     пакета «потеря полей/форм»). Обе кнопки помещаются в 240px картой в ряд.
   ██████████████████████████████████████████████████████████████████████████████ */

/* ── [S.1] ШАПКА ВИТРИНЫ ────────────────────────────────────────────────────── */
.ok-showcase .okna-showcase{ margin:0; }

.ok-showcase .okna-showcase__head{
  display:flex;
  align-items:flex-start;              /* мастер: не center — кнопка по верху */
  justify-content:space-between;
  gap:20px;
  margin:0 0 30px;
  flex-wrap:wrap;
}
/* ✔ ОСЬ ЗАГОЛОВКА ВИТРИНЫ — ЗАЯВКА ЗАКРЫТА В HC-14. design.css:704 держит
   `.glavnaya-v4 .okna-showcase__head{margin-left:calc(37px − 10px)!important}`;
   обнуление вынесено в ok-legacy-compat.css §[4] вместе с остальными пятью
   заголовочными осями — локальный дубль снят. */

/* [S.2] H2 витрины: тег печатает рендерер, класса .ok-w2-h2 у него нет —
   повторяем канон волны на его собственном селекторе (0,2,0 бьёт (0,1,0)
   из glavnaya.css:1869, где 30px и черта 52×3 через ::after). */
.ok-showcase .okna-showcase__head h2{
  margin:0;
  padding:0 0 14px;
  font-size:var(--ok-fs-h2);
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  background-image:linear-gradient(var(--ok-red), var(--ok-red));
  background-position:left bottom;
  background-size:44px 3px;
  background-repeat:no-repeat;
}
.ok-showcase .okna-showcase__head h2::after{ content:none; }  /* чужая черта 52×3 */

/* [S.3] Кнопка «Смотреть все стёкла» (текст и адрес — из конфига витрины).
   ★ !important — против design.css:192-196, где у `.okna-btn.secondary`
   background / color / border стоят с `!important`. Мастеру нужна НЕЙТРАЛЬНАЯ
   рамка #dfe5ee вместо синей — без равного инструмента её не поставить.
   Геометрию (высота/паддинг/маргин/тень) перебиваем обычной специфичностью. */
/* ⚠ `html body` (0,2,2) обязателен: design.css целит кнопку селектором
   `a.okna-btn.secondary` (0,2,1) + !important — простого `.ok-showcase .…`
   (0,2,0) не хватает даже с !important, специфичность считается первой. */
/* ★ ЛОВУШКА, ПОЙМАННАЯ ICB-ЗАМЕРОМ (+129px на 375/390, виновник — эта кнопка).
   okna-mobile.css:78 объявляет `.okna-btn:not(.okna-hdr-cta):not(.okna-hdr-phone--compact)
   { width:100% }` — селектор из ТРЁХ классов (0,3,0). Кнопка витрины — тоже
   .okna-btn, поэтому на ≤768 она растягивалась на 100% ширины флекс-контейнера
   и вместе с заголовком вылезала за экран. Специфичности `html body .ok-showcase
   .okna-showcase__all` (0,2,2) НЕ ХВАТАЕТ: классы старше элементов. Поэтому в
   селектор добавлен .okna-btn → (0,3,2) > (0,3,0), и width возвращается в auto
   без единого !important. */
html body .ok-showcase .okna-btn.okna-showcase__all{
  display:inline-flex;
  align-items:center;
  flex:0 1 auto;
  width:auto;
  max-width:100%;
  height:var(--ok-control-h);          /* 48px */
  margin:0;                            /* легаси .okna-btn даёт margin 0 8 4 0 */
  padding:0 22px;
  border:1px solid var(--ok-border-input) !important;   /* против ! design.css:195 */
  border-radius:var(--ok-radius-cta);  /* 8px */
  background:var(--ok-section-a) !important;            /* против ! design.css:195 */
  color:var(--ok-blue) !important;                      /* против ! design.css:195 */
  box-shadow:none;
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  letter-spacing:normal;
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}
html body .ok-showcase .okna-btn.okna-showcase__all:hover,
html body .ok-showcase .okna-btn.okna-showcase__all:focus-visible{
  background:var(--ok-tint-blue) !important;
  color:var(--ok-ink) !important;
  border-color:var(--ok-border-input) !important;
}
.ok-showcase .okna-showcase__all:active{ transform:translateY(1px); }

/* ── [S.4] СЕТКА ТОВАРОВ ───────────────────────────────────────────────────── */
/* minmax(0,1fr) вместо 1fr: иначе длинное название распирает колонку и рождает
   горизонтальный overflow (06 §3 правило 10). */
.ok-showcase .okna-catalog-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ok-gap-products);          /* 16px — замер мастера */
  margin-top:0;
}

/* ── [S.5] КАРТОЧКА ────────────────────────────────────────────────────────── */
.ok-showcase .okna-catalog-grid .okna-card{
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card); /* 16px */
  background:var(--ok-section-a);
  box-shadow:none;                     /* легаси design.css:338 даёт тень в покое, мастер — нет */
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ok-showcase .okna-catalog-grid .okna-card:hover{
  transform:translateY(-4px);
  border-color:var(--ok-border);
  box-shadow:0 14px 40px color-mix(in srgb, var(--okw2-shadow-ink) 10%, transparent);
}
@media (prefers-reduced-motion:reduce){
  .ok-showcase .okna-catalog-grid .okna-card{ transition:none; }
  .ok-showcase .okna-catalog-grid .okna-card:hover{ transform:none; }
}

/* Фото: в мастере оно вписано в скруглённый угол карточки (радиус даёт
   overflow:hidden родителя), собственного радиуса и отбивки снизу у него нет. */
.ok-showcase .okna-card-img{
  aspect-ratio:1/1;
  margin:0;
  border-radius:0;
  border-bottom:1px solid var(--okw2-hair);
  background-color:var(--ok-section-a);
}
/* Заглушка «нет фото» — в мастере вписана целиком (contain) на белом. */
.ok-showcase .okna-card-img--ph{
  background-color:var(--ok-section-a);
  background-size:contain;
}

.ok-showcase .okna-card-body{
  padding:14px 16px 16px;
  gap:0;                                /* мастер разводит элементы margin'ами */
}
.ok-showcase .okna-card-head{ gap:0; }

.ok-showcase .okna-card-title{
  margin:0 0 6px;
  min-height:40px;
  font-size:var(--ok-fs-card);          /* 14.5px */
  font-weight:var(--ok-fw-bold);
  line-height:1.35;
  color:var(--ok-text);
}
.ok-showcase .okna-card-chars{
  margin:0 0 8px;
  height:36px;
  font-size:12px;
  line-height:1.45;
  color:var(--ok-text-muted);
}
/* Артикул в витрине скрыт и сегодня (glavnaya.css:1131) — мастер его тоже
   не показывает. Повторяем явно, чтобы не зависеть от чужого правила. */
.ok-showcase .okna-card-art{ display:none; }

/* Строки цены. line-height ставим ЯВНО: .ok-scope наследует 1.55, и крупный
   <b> 17px раздувал строку до 26.3px вместо мастерских 23. */
.ok-showcase .okna-card-price{
  margin:0;
  gap:0;                               /* отбивку дают margin'ы строк, как в мастере */
  min-height:74px;
  font-size:13px;
  font-weight:var(--ok-fw-regular);
  line-height:1.35;
  color:var(--ok-text-2);
}
.ok-showcase .okna-price-glass{ display:block; font-size:13px; line-height:1.35; }
.ok-showcase .okna-price-glass b{
  font-size:17px;
  font-weight:var(--ok-fw-black);
  line-height:1.35;
  color:var(--ok-ink);
}
.ok-showcase .okna-price-install{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.35;
}
.ok-showcase .okna-price-install b{ color:var(--ok-text); font-weight:var(--ok-fw-bold); }
.ok-showcase .okna-price-note{
  display:block;
  margin:8px 0 10px;
  font-size:11.5px;
  line-height:1.35;
  color:var(--ok-text-muted);
}

.ok-showcase .okna-card-actions{
  gap:8px;
  padding-top:0;                        /* отбивку даёт margin примечания */
}
/* ★ !important в цветах — против design.css:164-167 и 192-196: там у .okna-btn
   и .okna-btn.secondary background / color / border стоят с `!important`
   во всех состояниях. Геометрия перебивается обычной специфичностью. */
.ok-showcase .okna-card-actions .okna-btn{
  flex:1 1 0;
  min-height:40px;
  height:40px;
  margin:0;                             /* легаси .okna-btn: margin 0 8 4 0 */
  padding:0 10px;
  border-radius:var(--ok-radius-cta);    /* 8px */
  box-shadow:none;
  font-size:13.5px;
  font-weight:var(--ok-fw-bold);
  letter-spacing:normal;
}
.ok-showcase .okna-card-actions .okna-tocart{
  background:var(--ok-blue) !important;
  border:1px solid var(--ok-blue) !important;
  color:var(--ok-on-dark) !important;
}
.ok-showcase .okna-card-actions .okna-tocart:hover{
  background:var(--ok-blue-hover) !important;
  border-color:var(--ok-blue-hover) !important;
  color:var(--ok-on-dark) !important;
  box-shadow:none;
}
.ok-showcase .okna-card-actions .okna-btn.secondary{
  background:var(--ok-section-a) !important;
  border:1px solid var(--ok-border-input) !important;
  color:var(--ok-blue) !important;
}
.ok-showcase .okna-card-actions .okna-btn.secondary:hover{
  background:var(--ok-tint-blue) !important;
  border-color:var(--ok-border-input) !important;
  color:var(--ok-blue) !important;
}
.ok-showcase .okna-card-actions .okna-btn:active{ transform:translateY(1px); }

/* ── [S.6] РЕСПОНСИВ ВИТРИНЫ ───────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-showcase .okna-catalog-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px){
  .ok-showcase .okna-catalog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  /* Мастер на телефоне: не сетка, а горизонтальная лента карточек 240px.
     06 §3 правило 9 — это ОСОЗНАННЫЙ bleed: скроллится сам ряд, страница
     горизонтально не едет (проверка ICB на 375 обязательна). */
  .ok-showcase .okna-showcase__head{
    align-items:baseline;
    gap:14px;
    margin-bottom:16px;
    flex-wrap:nowrap;
  }
  /* В мобильном мастере у H2 нет ни красной черты, ни нижнего поля под неё. */
  .ok-showcase .okna-showcase__head h2{
    padding-bottom:0;
    letter-spacing:normal;
    background-image:none;
  }
  /* На телефоне «все стёкла» — текстовая ссылка (мастер: «Каталог →»),
     текст остаётся из конфига витрины. Селектор с .okna-btn — по той же
     причине, что и в базовом правиле (см. ловушку width:100% выше). */
  html body .ok-showcase .okna-btn.okna-showcase__all{
    width:auto;
    height:auto;
    min-height:0;
    padding:0;
    border:0 !important;
    background:none !important;
    box-shadow:none;
    font-size:13.5px;
  }
  html body .ok-showcase .okna-btn.okna-showcase__all:hover{
    background:none !important;
    color:var(--ok-blue-hover) !important;
  }

  .ok-showcase .okna-catalog-grid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed ровно на боковой padding контейнера и обратно себе внутрь */
    margin-inline:calc(var(--ok-container-pad-mobile) * -1);
    padding:2px var(--ok-container-pad-mobile) 12px;
  }
  .ok-showcase .okna-catalog-grid::-webkit-scrollbar{ display:none; }
  .ok-showcase .okna-catalog-grid .okna-card{
    flex:0 0 240px;
    height:auto;
    scroll-snap-align:start;
  }
  .ok-showcase .okna-card-body{ padding:12px 14px 14px; }
  /* !important — блочное значение 13.5px против okna-mobile.css:63
     `body h3{font-size:19px!important}`. Замер показывал 19px вместо
     мастерских 13.5 — карточка вырастала на ~110px и ломала ленту. */
  .ok-showcase .okna-card-title{
    min-height:38px;
    margin-bottom:5px;
    font-size:13.5px !important;
    line-height:1.35;
  }
  .ok-showcase .okna-card-chars{ height:34px; font-size:11.5px; }
  .ok-showcase .okna-card-price{ min-height:0; font-size:12.5px; }
  .ok-showcase .okna-price-glass{ font-size:12.5px; }
  .ok-showcase .okna-price-glass b{ font-size:16px; }
  .ok-showcase .okna-price-install{ font-size:12px; }
  /* Кнопки держим В РЯД. Глобальный мобильный слой ставит .okna-btn
     `width:100%` (okna-mobile.css:78) и раскладывает контейнер колонкой —
     две кнопки уезжали одна под другую и добавляли карточке ~50px высоты.
     flex-basis:0 (flex:1 1 0) отменяет width:100% для главной оси. */
  .ok-showcase .okna-card-actions{
    padding-top:12px;
    flex-direction:row;
    flex-wrap:nowrap;
  }
  .ok-showcase .okna-card-actions .okna-btn{
    flex:1 1 0;
    min-width:0;
    height:42px;
    min-height:42px;
    padding:0 6px;
    font-size:13px;
  }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [TRANSPORT] · HC-10 · 06 «Для какого транспорта работаем»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/transport-types.php (полностью своя).
   Данные: okna_home_data('transport-types') → h2 · sub · banner{lead,text,adv[]}
   · types[{text,url}]. Иконки — SVG в шаблоне (в мастере они тоже часть дизайна,
   а не контента); тексты и адреса — только из адаптера.

   ★ ЖИВОЙ ЗАМЕР (vp1440) ────────────────────────────────────────────────────
     секция ......... h 697.13 · bg #ffffff · padding 72 0
     H2 ............. 34/800 · mb 12 · pb 14 · черта 44×3
     интро .......... 16.5/1.55 · #526173 · max-width 820 · mb 28
     баннер ......... grid minmax(0,1fr) minmax(0,1.1fr) → 578.09 / 635.91
                      gap 0 · 1px #e8ecf2 · r16 · overflow hidden · mb 22 · h 262
     фото ........... min-height 260 · cover · transport-buses-1200.webp
     правая часть ... bg #f5f8fd · padding 28 30
     строка-акцент .. flex · gap 10 · mb 10 · иконка 22 · текст 16.5/800 #123d87
     текст .......... 14.5/1.55 · #526173 · mb 18
     преимущества ... grid 3×1fr · gap 16 · border-top 1px #e3e9f2 · pt 16
                      иконка 20 (stroke #1c5bd6 1.7) · текст 13/600 · lh 1.45 · #1d2433
     плитки типов ... grid repeat(4,1fr) · gap 12 → 295px · карточка h 53
                      space-between · gap 10 · #fff · 1px #e8ecf2 · r10
                      padding 15 18 · 15/700 #1c5bd6 · стрелка 8×14
                      hover: border #1c5bd6 · color #123d87

   ★ МОБАЙЛ (390): баннер одной колонкой, фото h 150; правая часть padding 16;
     акцент 14/800 gap 9 mb 8; текст 13/1.5; плитки grid 2×1fr gap 9,
     min-height 48, padding 10 13, 13/700 #1d2433, стрелки нет.
   ★ ОТКЛОНЕНИЕ: мобильный мастер не показывает 3 преимущества. Мы их
     оставляем (одной колонкой, 12.5px) — это реальные данные поля
     `_okhc_transport_adv`, выбрасывать контент на телефоне нельзя.
   ██████████████████████████████████████████████████████████████████████████████ */

/* ── [T.1] БАННЕР ──────────────────────────────────────────────────────────── */
.ok-transport__banner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);   /* замер: 578 / 636 */
  gap:0;
  margin:0 0 22px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);                   /* 16px */
  overflow:hidden;
}

.ok-transport__media{
  display:block;
  min-height:260px;
  margin:0;
}
.ok-transport__img{
  display:block;
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  object-position:center;
}

.ok-transport__body{
  padding:28px 30px;
  background:var(--ok-section-b);
  min-width:0;                                           /* страховка от распирания */
}

.ok-transport__lead{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  font-size:var(--ok-fs-intro);                          /* 16.5px */
  font-weight:var(--ok-fw-black);
  color:var(--ok-ink);
}
.ok-transport__lead svg{ flex:0 0 auto; width:22px; height:22px; }
/* Иконка-галка мастера: синий круг + белая галка. В разметке цветов нет
   (ноль #hex в PHP) — красим здесь из токенов. */
.ok-transport__lead svg circle{ fill:var(--ok-blue); }
.ok-transport__lead svg path{ stroke:var(--ok-section-a); }

.ok-transport__text{
  margin:0 0 18px;
  font-size:var(--ok-fs-card);                           /* 14.5px */
  line-height:var(--ok-lh-body);
  color:var(--ok-text-2);
}

.ok-transport__adv{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0;
  padding:16px 0 0;
  list-style:none;
  border-top:1px solid var(--okw2-hair-2);
}
.ok-transport__adv li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  font-weight:var(--ok-fw-semibold);
  line-height:1.45;
  color:var(--ok-text);
}
.ok-transport__adv svg{ flex:0 0 auto; width:20px; height:20px; color:var(--ok-blue); }

/* ── [T.2] ПЛИТКИ ТИПОВ ТРАНСПОРТА ─────────────────────────────────────────── */
.ok-transport__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.ok-transport .ok-transport__card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:100%;
  padding:15px 18px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-dropdown);               /* 10px */
  background:var(--ok-section-a);
  font-size:15px;
  font-weight:var(--ok-fw-bold);
  line-height:1.4;                                       /* строка 21px → плитка 53px с рамкой, замер мастера */
  color:var(--ok-blue);
  transition:border-color .2s ease, color .2s ease;
}
.ok-transport .ok-transport__card:hover,
.ok-transport .ok-transport__card:focus-visible{
  border-color:var(--ok-blue);
  color:var(--ok-ink);
}
.ok-transport .ok-transport__card:active{ transform:translateY(1px); }
.ok-transport__arr{ flex:0 0 auto; display:inline-flex; line-height:1; }  /* иначе строка 24.8px из .ok-scope раздувает плитку */
.ok-transport__arr svg{ width:8px; height:14px; }

/* ── [T.3] РЕСПОНСИВ ТРАНСПОРТА ────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-transport__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ok-transport__body{ padding:22px 24px; }
}
@media (max-width:768px){
  .ok-transport__banner{ grid-template-columns:minmax(0,1fr); }
  .ok-transport__media,
  .ok-transport__img{ min-height:0; height:150px; }     /* замер мобильного мастера */
  .ok-transport__body{ padding:16px; background:var(--ok-section-a); }
  .ok-transport__lead{ gap:9px; margin-bottom:8px; font-size:14px; }
  .ok-transport__lead svg{ width:20px; height:20px; }
  .ok-transport__text{ margin-bottom:14px; font-size:13px; line-height:1.5; }
  /* ★ S4 (аудит СИСТЕМНО-2): трёх преимуществ баннера в МОБИЛЬНОЙ ветке мастера НЕТ —
     на телефоне они ломали ритм блока. Скрываем, десктоп не трогаем. Узел остаётся
     в DOM (данные поля `banner.adv` не теряются, при возврате правила видны сразу). */
  .ok-transport__adv{ display:none; }
  .ok-transport__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .ok-transport .ok-transport__card{
    min-height:var(--ok-control-h);                     /* 48px — тач-минимум */
    padding:10px 13px;
    font-size:13px;
    line-height:1.3;
    color:var(--ok-text);                               /* мастер: #1d2433 */
  }
  .ok-transport__arr{ display:none; }                   /* в мобильном мастере стрелки нет */
  .ok-transport__banner{ background:var(--ok-section-a); margin-bottom:14px; }
}
/* ⚠ Сетки типов в ОДНУ колонку на ≤480 НЕТ намеренно: мобильный мастер держит
   ДВА столбца и на 390 (замер: плитка 173.5px), одна колонка ломала бы кадр. */


/* ██████████████████████████████████████████████████████████████████████████████
   [SCALE] · Задача №56 §3.1 · 06а «Масштаб» (счётчики охвата) → .ok-scale
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/scale.php (вход blocks/scale.php).
   Данные: okna_home_data('scale') → h2 · sub · cards[{num,label}].
   Карточки 1-3 — ручные числа панели; 4-я («марок автобусов») — okna_marks_total().
   ЦВЕТ: только токены --ok-* (ноль #hex). ШИРИНА: .ok-container (как вся волна 2).
   ★★★★ МОБИЛКА ОТДЕЛЬНАЯ: 4 карточки ложатся 2×2 на ≤600 и держат 2 колонки на
   360/390 — без бокового скролла. Брейкпоинты — канон 1024/768/600/480.
   ██████████████████████████████████████████████████████████████████████████████ */

/* ★ ВЫП109: утверждённый дизайн — фон-автобус. Плашка full-bleed, ширину держит
   .ok-container. `html body` (0,1,2) гасит .glavnaya-v4 > section{padding:32px 0}.
   Фон — картинка (десктоп/мобилка разные файлы через <picture>), под ней светлый
   фолбэк section-b (если webp не загрузился). Контент над фоном (z-index). */
html body .ok-scale{
  position:relative;
  max-width:none;
  margin-inline:0;
  padding-block:var(--ok-section-space-desktop);   /* 72px — ритм волны 2 */
  box-sizing:border-box;
  background:var(--ok-section-b);                   /* фолбэк под картинкой */
  overflow:hidden;                                  /* картинка не вылезает за секцию */
}
/* Слой фона: абсолютный, автобус справа (десктоп), контент поверх. */
.ok-scale__bg{ position:absolute; inset:0; z-index:0; }
.ok-scale__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:right center;                     /* десктоп: автобус справа, светлая зона слева */
  display:block;
}
.ok-scale .ok-scale__inner{ position:relative; z-index:1; }   /* контент над фоном */

/* H2 секции — канон волны 2 (34/800, красное подчёркивание-градиент 44×3).
   Своя копия правила (а не общий селектор [W2.2]) — файл держит скоуп «правило
   начинается с класса своего блока». */
.ok-scale .ok-w2-h2{
  position:relative;
  margin:0 0 14px;
  padding:0 0 18px;
  font-size:40px;                            /* ВЫП109 референс: 38–44 на 1440 */
  font-weight:var(--ok-fw-black);            /* 800 */
  line-height:1.12;
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);                       /* ink #123d87 */
  text-wrap:balance;
}
/* Красная черта — компонент заголовков секций (≈72×5, радиус 10, CTA-красный). */
.ok-scale .ok-w2-h2::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:72px; height:5px;
  border-radius:10px;
  background:var(--ok-red);
}

.ok-scale .ok-w2-sub{
  margin:0 0 30px;
  max-width:850px;                           /* строка не уходит под автобус */
  font-size:19px;                            /* 18–21 */
  font-weight:var(--ok-fw-regular);
  line-height:1.45;
  color:var(--ok-text-2);
}

/* Сетка счётчиков: 4 в ряд. minmax(0,1fr) — против overflow длинной подписи. */
.ok-scale__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ok-gap-products);                /* 16px */
  margin:8px 0 0;
  padding:0;
  list-style:none;
}
.ok-scale .ok-scale__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:24px 22px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);       /* 16px */
  background:rgba(255,255,255,.96);          /* белая карта поверх фона (ВЫП109) */
  box-shadow:0 1px 2px rgba(16,24,40,.05);   /* почти незаметная тень */
}
.ok-scale .ok-scale__num{
  font-size:48px;                            /* ВЫП109: 44–52 */
  font-weight:var(--ok-fw-black);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--ok-blue);                      /* акцент #1c5bd6 */
  font-variant-numeric:tabular-nums;
  white-space:nowrap;                        /* «30 000» всегда одной строкой */
}
.ok-scale .ok-scale__label{
  font-size:18px;                            /* 17–20 */
  font-weight:var(--ok-fw-medium, 500);
  line-height:1.35;
  color:var(--ok-ink);
}

/* ── РЕСПОНСИВ МАСШТАБА (ВЫП109) ───────────────────────────────────────────── */
/* Планшет 768–1023: десктопный фон, карточки 2×2 (четыре в ряд тесно). */
@media (max-width:1023px){
  html body .ok-scale{ padding-block:var(--ok-section-space-tablet); }  /* 56px */
  .ok-scale .ok-w2-h2{ font-size:34px; }
  .ok-scale__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .ok-scale .ok-scale__num{ font-size:40px; }
}

/* Мобилка ≤767: светлая карта со скруглением, МОБИЛЬНЫЙ фон (автобус внизу),
   карточки в ОДНУ колонку, автобус под последней карточкой. */
@media (max-width:767px){
  html body .ok-scale{
    margin-inline:12px;                        /* внешние отступы карты */
    border-radius:24px;
    padding-block:40px 168px;                  /* низ — место для автобуса под карточками */
    background:var(--ok-section-a);            /* фолбэк под мобильным фоном */
  }
  .ok-scale__bg img{ object-position:center bottom; }  /* автобус внизу */
  .ok-scale .ok-w2-h2{
    font-size:28px;
    line-height:1.12;
    letter-spacing:normal;
    margin-bottom:12px;
    padding-bottom:16px;
  }
  .ok-scale .ok-w2-h2::after{ width:64px; height:4px; }
  .ok-scale .ok-w2-sub{ margin-bottom:22px; max-width:none; font-size:16px; line-height:1.45; }
  /* Одна колонка — не 2×2 (референс ВЫП109). */
  .ok-scale__grid{ grid-template-columns:minmax(0,1fr); gap:14px; margin-top:2px; }
  .ok-scale .ok-scale__card{ padding:16px 18px; min-height:84px; justify-content:center; }
  .ok-scale .ok-scale__num{ font-size:32px; }
  .ok-scale .ok-scale__label{ font-size:15px; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [BRANDS] · HC-10 · 07 «Для каких автобусов подходит» (лента марок)
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/brands.php.
   Данные: okna_home_data('brands') → marks[{name,country,url,slug,count,logo}]
   · countries[] · total · all_url. Источник — ДЕРЕВО КАТАЛОГА okna_nav_tree()
   (тот же, что у мегаменю), логотипы — файлы темы assets/img/bus-brands/.

   ★ ПОВЕДЕНИЕ БЕЗ НОВОГО JS. Табы, бесконечная лента с клонами, стрелки,
     живой бегунок и автоскролл уже реализованы в assets/brands-tabs.js —
     он подключён глобально и ищет узлы ПО КЛАССАМ .okna-bm__*. Поэтому новая
     вёрстка сохраняет эти классы как ХУКИ ПОВЕДЕНИЯ и добавляет свои .ok-brands__*
     как ХУКИ ОФОРМЛЕНИЯ. Ни строчки нового JS, ни одного нового enqueue.
     Контракт JS (assets/brands-tabs.js:20-29): .okna-bm (корень) ·
     .okna-bm__tab[data-country] · .okna-bm__strip (сам скроллер) ·
     .okna-bm__item[data-country] (оригиналы, клоны помечаются data-clone) ·
     .okna-bm__arrow--prev/--next · .okna-bm__bar + .okna-bm__bar-fill ·
     .okna-bm__count-num[data-total] + .okna-bm__count-word (склонение).

   ★ ЖИВОЙ ЗАМЕР (vp1440) ────────────────────────────────────────────────────
     секция ......... h 661.13 · bg #f5f8fd · padding 72 0
     H2/интро ....... как [W2.2]/[W2.3], интро mb 26
     карточка-панель  1216×368 · #fff · 1px #e8ecf2 · r16 · padding 20
     табы ........... flex · gap 8 · overflow-x auto · pb 6 · кнопка h 36
                      r999 · padding 9 16 · 13.5/700
                      активный #1c5bd6/#fff · обычный #f5f8fd/#1d2433
     лента .......... flex · gap 14 · padding 6 4 24 · margin-bottom −18
                      маска linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)
     карточка марки . 184×165 · #fff · 1px #e8ecf2 · r16 · padding 24 12 20
                      колонка · center · gap 16
                      hover: border #cfdcf1 · shadow 0 10px 30px rgba(20,40,80,.08)
     лого ........... бокс 124×84 · contain · center
     монограмма ..... 27/800 · #123d87 · ls .02em (две буквы названия)
     название ....... 14.5/700 · #1d2433 · nowrap · center
     стрелки ........ 46×46 · r999 · #fff · 1px #e8ecf2 · shadow 0 8px 22px
                      left/right −14 · цвет #123d87 · hover инверсия в синий
     бегунок ........ дорожка h 6 · #eef1f6 · r999 · margin 18 2 4
                      заполнение h 6 · #1c5bd6
     подвал ......... flex · gap 16 · border-top 1px #eef1f6 · pt 16
                      «не нашли» flex 1 1 320 · 13.5 #526173 · иконка-бокс 40×40 r10 #eef3fc
                      счётчик 13.5 · <b> 15/700 #123d87
                      кнопка h 48 · padding 0 22 · #1c5bd6/#fff · r8 · 14/700

   ★ МОБАЙЛ (390) мастера — бегущая лента okMarquee, карточка 170×83, bg #f5f8fd,
     r10, padding 16 10, gap 9, лого ≤134×54, имя 13/700; плюс карточка
     «Не нашли нужную марку?».
     ПЕРЕВОД: ту же «бегущую ленту» даёт штатный автоскролл brands-tabs.js
     (rAF, пауза на hover/вне экрана/prefers-reduced-motion) — второй механизм
     не заводим. Табы на телефоне ОСТАВЛЕНЫ (это работающий фильтр, мастер
     его просто не рисует), стрелки скрыты — свайп.
   ██████████████████████████████████████████████████████████████████████████████ */

/* ── [B.1] ПАНЕЛЬ ──────────────────────────────────────────────────────────── */
/* `html body` (0,2,2): гасим `.glavnaya-v4 .okna-bm{max-width;padding:0 40px}`
   (0,2,0) из glavnaya.css:338 — иначе панель получит лишние 80px внутрь
   поверх падингов .ok-container.
   ⚠ Сброс и оформление — ОДНО правило намеренно. Разнесённые (сброс на .okna-bm,
   вид на .ok-brands__card) они дрались друг с другом на ОДНОМ элементе: у него
   оба класса, и сброс (0,2,2) съедал padding карточки (0,1,0) — лента получалась
   1214px вместо мастерских 1174. Поймано замером, «на глаз» такое незаметно. */
html body .ok-brands .ok-brands__card.okna-bm{
  max-width:none;
  margin:0;
  padding:20px;                             /* замер мастера */
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);      /* 16px (легаси было 20) */
  background:var(--ok-section-a);
  box-shadow:none;                          /* мастер: панель без тени */
}

/* ── [B.2] ТАБЫ ПО СТРАНАМ ─────────────────────────────────────────────────── */
.ok-brands__tabs{
  display:flex;
  gap:8px;
  padding:0 0 6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.ok-brands__tabs::-webkit-scrollbar{ display:none; }

/* ★ !important здесь ВЫНУЖДЕННЫЙ и подписанный: glavnaya.css:351-354 держит
   background / color / border таба через `!important` на одноклассовом селекторе
   (0,1,0+!). Специфичность (0,2,0) его не берёт — только равный инструмент.
   Перебиваем РОВНО три свойства, всё остальное — обычными объявлениями. */
.ok-brands .okna-bm__tab{
  flex:0 0 auto;
  height:36px;
  padding:9px 16px;
  border:0 !important;                      /* против !important glavnaya.css:352 */
  border-radius:var(--ok-radius-pill);      /* 999px */
  background:var(--ok-section-b) !important;/* против !important glavnaya.css:352 */
  color:var(--ok-text) !important;          /* против !important glavnaya.css:352 */
  font-family:inherit;
  font-size:13.5px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.ok-brands .okna-bm__tab:hover{
  background:var(--ok-tint-blue) !important;
  color:var(--ok-ink) !important;
}
.ok-brands .okna-bm__tab.is-active{
  background:var(--ok-blue) !important;     /* против !important glavnaya.css:354 */
  color:var(--ok-on-dark) !important;
}
.ok-brands .okna-bm__tab:active{ transform:translateY(1px); }

/* ── [B.3] ЛЕНТА ───────────────────────────────────────────────────────────── */
.ok-brands__stripwrap{ position:relative; margin:14px 0 0; }

.ok-brands .okna-bm__strip{
  display:flex;
  gap:14px;
  margin:0 0 -18px;
  padding:6px 4px 24px;
  list-style:none;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  /* Приглушение краёв — как в мастере. Маска не мешает скроллу: она красит
     только отрисовку, сам скроллер остаётся этим же элементом.
     ⚠ В маске значим ТОЛЬКО альфа-канал, поэтому вместо литерала #000 стоит
     currentColor (наследуется из токена .ok-scope) — ноль новых #hex в файле. */
  -webkit-mask-image:linear-gradient(90deg, transparent, currentColor 3%, currentColor 97%, transparent);
  mask-image:linear-gradient(90deg, transparent, currentColor 3%, currentColor 97%, transparent);
}
.ok-brands .okna-bm__strip::-webkit-scrollbar{ display:none; }

.ok-brands .okna-bm__item{ flex:0 0 184px; }

.ok-brands__link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  height:100%;
  padding:24px 12px 20px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);      /* 16px */
  background:var(--ok-section-a);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ok-brands__link:hover,
.ok-brands__link:focus-visible{
  border-color:var(--ok-border-outline);    /* эталон #cfdcf1 · ΔE 1.6 */
  box-shadow:var(--okw2-shadow-lift);
}

.ok-brands__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:124px;
  height:84px;
}
.ok-brands__logo img{
  max-width:124px;
  max-height:84px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.ok-brands__mono{
  font-size:27px;
  font-weight:var(--ok-fw-black);
  letter-spacing:.02em;
  color:var(--ok-ink);
  text-transform:uppercase;
}
.ok-brands__name{
  font-size:var(--ok-fs-card);              /* 14.5px */
  font-weight:var(--ok-fw-bold);
  line-height:1.3;                          /* строка 19px — замер мастера (в .ok-scope 1.55 давало 22.5) */
  color:var(--ok-text);
  text-align:center;
  white-space:nowrap;
}

/* ── [B.4] СТРЕЛКИ ─────────────────────────────────────────────────────────── */
/* ★ !important — против glavnaya.css:377-382, где у стрелки color / background /
   border тоже стоят с `!important` (0,1,0+!). Перебиваем ровно эти свойства. */
.ok-brands .okna-bm__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid var(--ok-border) !important;   /* против ! glavnaya.css:379 */
  border-radius:var(--ok-radius-pill);
  background:var(--ok-section-a) !important;      /* против ! glavnaya.css:379 */
  box-shadow:var(--okw2-shadow-arrow);
  color:var(--ok-ink) !important;                 /* против ! glavnaya.css:378 */
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ok-brands .okna-bm__arrow--prev{ left:-14px; }
.ok-brands .okna-bm__arrow--next{ right:-14px; }
.ok-brands .okna-bm__arrow:hover,
.ok-brands .okna-bm__arrow:focus-visible{
  background:var(--ok-blue) !important;
  border-color:var(--ok-blue) !important;
  color:var(--ok-on-dark) !important;
}
.ok-brands .okna-bm__arrow svg{ width:9px; height:16px; }

/* ── [B.5] БЕГУНОК ─────────────────────────────────────────────────────────── */
.ok-brands .okna-bm__bar{
  position:relative;
  height:6px;
  margin:18px 2px 4px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-bg);                  /* #eef1f6 — точное совпадение */
  overflow:hidden;
  cursor:pointer;
}
/* ⚠ position/left/width НЕ трогаем: бегунок абсолютный, его left и width пишет
   JS инлайном (assets/brands-tabs.js::updateBar). Меняем только вид. */
.ok-brands .okna-bm__bar-fill{
  height:100%;
  min-width:32px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-blue);
}

/* ── [B.6] ПОДВАЛ ПАНЕЛИ ───────────────────────────────────────────────────── */
.ok-brands__foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding:16px 0 0;
  border-top:1px solid var(--ok-bg);
}
/* «Не нашли марку?» — КНОПКА (открывает попап заявки), а не текст: так на
   боевом сегодня, терять точку входа в форму нельзя. Внешне — строка мастера.
   ★ ЛОВУШКА TT1, пойманная скрином: родительская тема красит ЛЮБОЙ <button>
   правилами `button:not(:hover):not(:active):not(.has-text-color)` и
   `button:not(:hover):not(:active):not(.has-background)` — это (0,3,1), и
   при загрузке TT1 ПОСЛЕДНИМ обычный `.ok-brands__notfound` (0,1,0) проигрывал:
   строка выезжала тёмно-серым блоком #28303d с белым текстом. Цепочка
   `html body .ok-brands .ok-brands__foot .ok-brands__notfound` = (0,3,2) — берёт
   верх специфичностью, без !important. */
html body .ok-brands .ok-brands__foot .ok-brands__notfound{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 320px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  background-color:transparent;
  box-shadow:none;
  font-family:inherit;
  font-size:13.5px;
  font-weight:var(--ok-fw-regular);
  line-height:1.35;
  color:var(--ok-text-2);
  text-align:left;
  cursor:pointer;
}
.ok-brands__notfound-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:var(--ok-radius-dropdown);  /* 10px */
  background:var(--ok-tint-blue);
  color:var(--ok-blue);
}
.ok-brands__notfound-ico svg{ width:18px; height:18px; }
html body .ok-brands .ok-brands__notfound strong{ color:var(--ok-text); font-weight:var(--ok-fw-bold); }
html body .ok-brands .ok-brands__notfound .ok-brands__notfound-txt{ color:var(--ok-text-2); }
.ok-brands__notfound:hover .ok-brands__notfound-ico{ background:var(--ok-blue); color:var(--ok-on-dark); }

.ok-brands__count{ font-size:13.5px; color:var(--ok-text-2); }
.ok-brands__count b{ font-size:15px; font-weight:var(--ok-fw-bold); color:var(--ok-ink); }

/* ⚠ `.ok-brands .` обязателен: ok-foundation.css задаёт `.ok-scope a{color:var(--ok-blue)}`
   (0,1,1) — одноклассовый `.ok-brands__all` (0,1,0) проигрывал, и белая надпись
   на синей кнопке становилась синей (текст исчезал). Поймано скрином. */
.ok-brands .ok-brands__all{
  display:inline-flex;
  align-items:center;
  height:var(--ok-control-h);               /* 48px */
  padding:0 22px;
  border-radius:var(--ok-radius-cta);       /* 8px */
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  white-space:nowrap;
  transition:background-color .2s ease;
}
.ok-brands .ok-brands__all:hover,
.ok-brands .ok-brands__all:focus-visible{ background:var(--ok-blue-hover); color:var(--ok-on-dark); }
.ok-brands .ok-brands__all:active{ transform:translateY(1px); }

/* D11 · чипы-контекст и стрелка каталога — элементы мобильного мастера M7.
   На десктопе подвал = ряд (замер vp1440), поэтому оба скрыты. */
.ok-brands__mchips{ display:none; }
.ok-brands__all-arr{ display:none; }

/* ── [B.7] РЕСПОНСИВ МАРОК ─────────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-brands .okna-bm__arrow--prev{ left:-6px; }
  .ok-brands .okna-bm__arrow--next{ right:-6px; }
}
@media (max-width:768px){
  /* Стрелки прячем — лента листается свайпом (так же поступает и легаси). */
  .ok-brands .okna-bm__arrow{ display:none; }
  html body .ok-brands .ok-brands__card.okna-bm{ padding:16px; }
}
@media (max-width:600px){
  /* Мобильный мастер: карточка марки 170×83, тинт-фон, r10, лого ≤134×54. */
  .ok-brands .okna-bm__item{ flex:0 0 170px; }
  .ok-brands__link{
    flex-direction:column;
    justify-content:center;
    gap:9px;
    padding:16px 10px;
    border-radius:var(--ok-radius-dropdown);   /* 10px */
    background:var(--ok-section-b);
  }
  .ok-brands__logo{ width:134px; height:54px; }
  .ok-brands__logo img{ max-width:134px; max-height:54px; }
  .ok-brands__mono{ font-size:22px; }
  .ok-brands__name{ font-size:13px; }
  .ok-brands .okna-bm__strip{
    gap:10px;
    padding:2px 4px 20px;
    /* лента вылезает на боковой padding панели и возвращает его себе внутрь */
    margin-inline:-16px;
    padding-inline:16px;
  }
  .ok-brands .okna-bm__tab{ height:34px; padding:8px 14px; font-size:12.5px; }
  /* ── D11 · ПОДВАЛ → КОМПАКТНАЯ КАРТОЧКА МОБИЛЬНОГО МАСТЕРА M7 ──────────────
     Мастер на телефоне вместо ряда «кнопка-заявка + счётчик + крупная синяя
     кнопка» рисует тинт-карточку «Не нашли нужную марку?»: заголовок, текст,
     два чипа-контекста, текст-ссылку на каталог со стрелкой. Кнопку-заявку
     (попап фото) и ссылку каталога СОХРАНЯЕМ — терять точки входа нельзя
     ([B.6]); счётчик мастер не показывает — прячем (JS в него пишет дальше,
     это безвредно). Замеры: карточка bg #f5f8fd, r16, padding 18, mt 22;
     h3 17/800, текст 13.5/1.5, чипы #fff r999 7×12 12.5/600, ссылка 14/700. */
  .ok-brands__foot{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:22px;                          /* замер мастера M7 */
    padding:18px;
    border:1px solid var(--ok-border);        /* полная рамка карточки (перебивает border-top [B.6]) */
    border-radius:var(--ok-radius-card);      /* 16px */
    background:var(--ok-section-b);           /* тинт #f5f8fd */
  }
  /* «Не нашли марку?»: строка-с-иконкой → заголовок + абзац карточки.
     Остаётся <button> — тап открывает попап фото (точка входа сохранена).
     Селектор (0,3,2)/(0,4,x) — той же длины/длиннее базового, иначе не берёт. */
  html body .ok-brands .ok-brands__foot .ok-brands__notfound{
    flex:0 0 auto;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .ok-brands__notfound-ico{ display:none; }   /* в карточке мастера иконки нет */
  html body .ok-brands .ok-brands__foot .ok-brands__notfound strong{
    display:block;
    margin-bottom:6px;
    font-size:17px;                           /* замер мастера M7 */
    font-weight:var(--ok-fw-black);           /* 800 — база даёт 700, мастер 800 */
    line-height:1.3;
    color:var(--ok-ink);
  }
  html body .ok-brands .ok-brands__foot .ok-brands__notfound .ok-brands__notfound-txt{
    font-size:13.5px;
    line-height:1.5;
    color:var(--ok-text-2);
  }
  /* Чипы-контекст (декоративные) — только телефон. */
  .ok-brands__mchips{ display:flex; flex-wrap:wrap; gap:7px; }
  .ok-brands__mchip{
    padding:7px 12px;
    border:1px solid var(--ok-border-input);
    border-radius:var(--ok-radius-pill);
    background:var(--ok-section-a);           /* #fff */
    font-size:var(--ok-fs-micro);             /* 12.5px */
    font-weight:var(--ok-fw-semibold);
    line-height:1.2;
    color:var(--ok-text);
  }
  .ok-brands__count{ display:none; }          /* мастер M7 счётчик не рисует */
  /* «Все марки» → компактная текст-ссылка со стрелкой (мастер: «Смотреть весь
     каталог →»); синяя кнопка убрана. Метку берём из поля all_btn (данные не
     теряем). Оба правила той же длины (0,2,0)/(0,2,1), что база — позже в
     источнике → перебивают. */
  .ok-brands .ok-brands__all{
    align-self:flex-start;
    height:auto;
    min-height:0;
    padding:0;
    gap:7px;
    background:none;
    color:var(--ok-blue);
    font-size:14px;
  }
  .ok-brands .ok-brands__all:hover,
  .ok-brands .ok-brands__all:focus-visible{ background:none; color:var(--ok-blue-hover); }
  .ok-brands__all-arr{ display:inline-block; flex:0 0 auto; width:15px; height:15px; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [NOCAT] · HC-10 · 08 «Не нашли стекло»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/no-catalog-cta.php — обёртка над ШТАТНЫМ
   блоком подбора okna_podbor_block_html('home') (inc/podbor.php). Именно он и
   нарисован в мастере: заголовок «Не нашли нужное стекло?», две кнопки
   («Подобрать стекло» → попап заявки, «Отправить фото» → попап загрузки) и три
   признака (совместимость/скорость/специалист). Тексты и действия кнопок
   правятся в «Кастом → Блок подбора» — поэтому рендерер не подменяем.

   ⚠ ЧУЖОЙ ИНЛАЙН-CSS. Рендерер печатает <style id="okna-podbor-css"> прямо в
     теле страницы, то есть ПОЗЖЕ нашего листа. Все его правила — одноклассовые
     (0,1,0), поэтому бьются потомком .ok-nocat (0,2,0) без !important.

   ★ ЖИВОЙ ЗАМЕР МАСТЕРА (vp1440) ────────────────────────────────────────────
     секция ......... h 304 · bg #ffffff · padding 72 0
     панель ......... min-height 160 · 1px #e8ecf2 · r16 · overflow hidden
                      bg linear-gradient(90deg,#e7effb 0,#f2f7fd 24%,#fff 46%)
                      padding 30 42 30 280 · grid minmax(0,1fr) auto · gap 40
     автобус ........ podbor-bus-bg.webp слева, 130% высоты, multiply
     текст .......... border-left 3px #1c5bd6 · padding-left 24
     H2 ............. 26/800 · #123d87 · mb 8
     подпись ........ 15.5/1.55 · #526173
     кнопки ......... ряд справа · gap 10 · mb 16 · h 48 · padding 0 22 · r8
                      «Подобрать стекло» #1c5bd6/#fff · «Отправить фото» аутлайн
     признаки ....... ряд справа · gap 20 · 12.5 · #526173 · иконка 15

   ★ МОБАЙЛ (390) мастера — БЕЛАЯ КАРТОЧКА: h2 23/800, текст 13.5,
     шесть чипов-способов (r999, 12.5/600, tint-фон), кнопка во всю ширину.
     Чипы — это поле `_okhc_nocat_ways` (адаптер отдаёт ways[]); на боевом
     сегодня они не выводятся вовсе. Возвращаем их (только ≤768) — это данные,
     а не выдумка.
   ★ ОТКЛОНЕНИЯ (осознанные, оба аддитивные):
     1) порядок на телефоне: h2 → текст → кнопки → признаки → чипы. В мастере
        чипы стоят перед кнопкой, но кнопки приходят одним куском из рендерера
        (менять его разметку строковой хирургией — хрупко и вне зоны пакета).
     2) кнопок на телефоне две (мастер рисует одну): вторая — «Отправить фото»,
        это отдельный попап загрузки, терять его нельзя.
   ██████████████████████████████████████████████████████████████████████████████ */

.ok-nocat .okna-podbor{ margin:0; }

/* ── [N.1] ПАНЕЛЬ ──────────────────────────────────────────────────────────── */
.ok-nocat .okna-podbor__card{
  min-height:160px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);      /* 16px */
  box-shadow:none;                          /* мастер: панель без тени */
  align-items:center;
  /* Градиент мастера, собранный из токенов:
     #e7effb ≈ mix(--ok-tint-blue 96%, --ok-blue)   · ΔE 1.1
     #f2f7fd ≈ mix(--ok-tint-blue 55%, --ok-section-a) · ΔE 1.6 */
  background:var(--ok-section-a);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--ok-tint-blue) 96%, var(--ok-blue)) 0%,
    color-mix(in srgb, var(--ok-tint-blue) 55%, var(--ok-section-a)) 24%,
    var(--ok-section-a) 46%);
}

/* Автобус слева: в мастере он занимает 280px до начала текста и заполняет зону
   ЦЕЛИКОМ ПО ВЫСОТЕ, мягко растворяясь вправо.

   ★ ИСПРАВЛЕНО (замечание владельца по скрину): здесь стояло `background-size:contain`
   и `mask-image:none`. `contain` вписывает картинку целиком — автобус выходил мелким,
   прижатым к левому краю, с воздухом сверху и снизу; снятая маска убирала растворение,
   из-за чего картинка обрывалась прямой границей. Штатный рендерер (inc/podbor.php:139)
   изначально задавал верно — `cover` + `align-self:stretch` + градиентная маска; мой
   слой это перебивал. Возвращаю поведение мастера, ширину и позицию оставляю свои.
   `align-self:stretch` дублирую явно: он приходит из инлайна рендерера, а от него
   зависит вся высота — пусть не теряется, если инлайн однажды изменится. */
.ok-nocat .okna-podbor__bg{
  flex:0 0 280px;
  align-self:stretch;                 /* на всю высоту панели */
  background-position:left center;
  background-size:cover;              /* заполнить зону, лишнее обрезать */
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right, #000 48%, transparent);
  mask-image:linear-gradient(to right, #000 48%, transparent);
  mix-blend-mode:multiply;
}

/* ★ D10-R · ГОРИЗОНТАЛЬ ПО МАСТЕРУ.
   В мастере зона автобуса И ЕСТЬ левый падинг панели (`padding:30px 42px 30px
   280px`), поэтому текстовая колонка начинается ровно на 280 от края панели.
   У нас автобус — отдельный флекс-элемент шириной 280px, значит СВОЙ левый
   падинг у .__main обязан быть НУЛЕВЫМ: иначе он ложится ПОВЕРХ зоны автобуса
   и сдвигает чёрточку с текстом на 42px правее мастера.
   Замер vp1440 до правки: чёрточка 323 от края карточки (мастер 281),
   текст 347 (мастер 308). Правый падинг 42 — как в мастере. */
.ok-nocat .okna-podbor__main{
  padding:30px 42px 30px 0;
  gap:40px;
  align-items:center;
}

/* ── [N.2] ТЕКСТ ───────────────────────────────────────────────────────────── */
/* Мастер: `border-left:3px solid #1c5bd6` + `padding-left:24px` — то есть текст
   отстоит от ЛЕВОГО КРАЯ КОЛОНКИ на 3+24=27. У нас линия рисуется штатным
   ::before ПОВЕРХ падинга (absolute left:0, ширина 3), поэтому падинг обязан
   быть 27, иначе чистый зазор линия→текст выходит 21 вместо мастерских 24. */
.ok-nocat .okna-podbor__text{ padding-left:27px; }
.ok-nocat .okna-podbor__text::before{
  top:0;
  bottom:0;
  width:3px;
  background:var(--ok-blue);
  border-radius:0;                          /* мастер: прямая линия-акцент */
}
.ok-nocat .okna-podbor__text h2{
  margin:0 0 8px;
  font-size:26px;
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  color:var(--ok-ink);
}
.ok-nocat .okna-podbor__text p{
  margin:0;
  max-width:420px;
  font-size:15.5px;
  line-height:var(--ok-lh-body);
  color:var(--ok-text-2);
}

/* ── [N.3] КНОПКИ И ПРИЗНАКИ ───────────────────────────────────────────────── */
.ok-nocat .okna-podbor__aside{ gap:16px; }
.ok-nocat .okna-podbor__btns{ gap:10px; justify-content:flex-end; }

/* ★ D10-R · ЛОВУШКА, НАЙДЕННАЯ ЗАМЕРОМ — ИМЕННО ОНА «НЕ ВЫРАВНИВАЛА ВЫГОДЫ».
   okna-child/style.css:29 печатает `.okna-btn{…margin:4px 8px 4px 0}` (0,1,0).
   Правое поле 8px не давало ПОСЛЕДНЕЙ КНОПКЕ дотянуться до правого края ряда
   выгод: замер vp1440 — правый край кнопок 1269.5 против 1277.5 у выгод.
   Верхнее/нижнее по 4px раздували ряд кнопок до 56px и превращали зазор
   кнопки→выгоды в 20px вместо мастерских 16. Бьём специфичностью (0,2,0),
   !important не нужен. Тот же margin ломал и телефон: кнопка width:100% плюс
   поле 8px = вылет за контейнер. */
.ok-nocat .okna-podbor__btn{
  margin:0;
  min-height:var(--ok-control-h);           /* 48px */
  height:var(--ok-control-h);
  padding:0 22px;
  gap:9px;
  border-radius:var(--ok-radius-cta);       /* 8px */
  font-size:14.5px;
  font-weight:var(--ok-fw-bold);
  background:var(--ok-blue);
  color:var(--ok-on-dark);
}
.ok-nocat .okna-podbor__btn:hover{ background:var(--ok-blue-hover); color:var(--ok-on-dark); }
.ok-nocat .okna-podbor__btn svg{ width:16px; height:16px; }

/* ★ ЛОВУШКА, пойманная скрином: у второй кнопки НЕТ класса .secondary, поэтому
   на неё падает design.css:164-167 `a.okna-btn:not(.okna-btn--hero):not(.secondary)`
   = (0,3,1) + !important и заливает её синим. Мастер требует аутлайн. Нужны
   ОБА инструмента: специфичность (0,3,2) И встречный !important. */
html body .ok-nocat .okna-podbor__btns .okna-podbor__btn--outline{
  background:var(--ok-section-a) !important;
  border:1px solid var(--ok-border-input) !important;  /* мастер: 1px, не 1.5 */
  color:var(--ok-blue) !important;
  box-shadow:none;
}
html body .ok-nocat .okna-podbor__btns .okna-podbor__btn--outline:hover{
  background:var(--ok-blue) !important;
  border-color:var(--ok-blue) !important;
  color:var(--ok-on-dark) !important;
}

/* ★ D10-R · РЯД ВЫГОД. Штатный инлайн (inc/podbor.php:153) печатает
   `justify-content:space-between; gap:16px; width:100%` — он растаскивает три
   выгоды по всей ширине колонки неравными зазорами. Мастер: ряд прижат вправо,
   зазор ровно 20, правый край — в один вертикальный след с кнопками.
   Одноклассовый инлайн (0,1,0) бьётся потомком .ok-nocat (0,2,0) без !important.
   `width:100%` не перебиваем ОСОЗНАННО: вместе с flex-end он даёт ровно
   мастерское поведение (ряд прижат к правому краю колонки), а когда ряд шире
   кнопок — колонка растёт по его max-content, как в мастере, где ширину
   правой колонки задают именно выгоды (замер мастера: выгоды 469.7, кнопки
   399.2 — шире именно ряд выгод). */
.ok-nocat .okna-podbor__features{
  justify-content:flex-end;
  gap:20px;
}
.ok-nocat .okna-podbor__feat{
  gap:7px;
  font-size:var(--ok-fs-micro);             /* 12.5px */
  line-height:1.25;
  color:var(--ok-text-2);
}
/* Мастер разделителей между признаками не рисует. */
.ok-nocat .okna-podbor__feat + .okna-podbor__feat{ border-left:0; padding-left:0; }
.ok-nocat .okna-podbor__feat svg{ width:15px; height:15px; }

/* ⚠ ОСТАТОК D10-R, КОТОРЫЙ CSS НЕ ЗАКРЫВАЕТ — доказано опытом, а не мнением.
   Рендерер печатает подпись выгоды как `l1 . '<br>' . l2` (inc/podbor.php:209),
   поэтому «Точная / совместимость» стоит В ДВЕ СТРОКИ, а в мастере это одна
   строка «Точная совместимость».
   Живьём прогнаны 15 способов обезвредить <br> средствами CSS: display
   inline-block / block / inline-flex / contents / none, `content:"\00a0"` на
   самом br, ::before и ::after у br, position:absolute, width/margin/padding
   на br, а также flex- и grid-контейнер у родительского span.
   ИТОГ ЗАМЕРА: Blink строит для <br> отдельный LayoutBR и переносит строку при
   ЛЮБОМ display, кроме none и contents (высота ряда 31.3 = две строки); а при
   none/contents оба текстовых узла склеиваются БЕЗ пробела —
   «Точнаясовместимость», ширина 134.7 против 137.2 у мастера. Вставить пробел
   между двумя текстовыми узлами CSS не умеет: псевдоэлементы у <br> не
   генерируются вовсе.
   Лечится ОДНОЙ строкой в рендерере (`l1 . ' ' . l2` вместо '<br>'), но
   inc/podbor.php — общий файл, он же рисует блок при флаге 0 на боевом, и его
   правка вне зоны этого пакета. Геометрия ряда под односрочную подпись здесь
   уже готова: как только пробел появится, ряд встаёт в мастерские ~462px
   (проверено подстановкой пробела в DOM) без единой правки CSS. */

/* ── [N.4] ЧИПЫ-СПОСОБЫ (только телефон) ───────────────────────────────────── */
.ok-nocat__ways{
  display:none;                             /* десктопный мастер их не рисует */
  margin:0;
  padding:0;
  list-style:none;
}
.ok-nocat__ways li{
  padding:7px 12px;
  border:1px solid var(--ok-border-input);
  border-radius:var(--ok-radius-pill);
  background:var(--ok-section-b);
  font-size:var(--ok-fs-micro);             /* 12.5px */
  font-weight:var(--ok-fw-semibold);
  line-height:1.2;
  color:var(--ok-text);
}

/* ── [N.5] ФОЛБЭК-ВЕРСИЯ (модуль подбора не загружен) ──────────────────────── */
/* Печатается только если okna_podbor_block_html() недоступна/пуста — как и
   сегодня. Оформляем той же карточкой, чтобы «аварийный» вид не разъезжался. */
.ok-nocat__fallback{
  padding:30px 32px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
  background:var(--ok-section-b);
}
.ok-nocat__fallback h2{
  margin:0 0 8px;
  font-size:26px;
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  color:var(--ok-ink);
}
.ok-nocat__fallback p{ margin:0 0 14px; font-size:15.5px; line-height:var(--ok-lh-body); color:var(--ok-text-2); }
.ok-nocat__fallback .ok-nocat__ways{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.ok-nocat .ok-nocat__fallback .ok-nocat__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--ok-control-h);
  padding:0 22px;
  border-radius:var(--ok-radius-cta);
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  font-size:15px;
  font-weight:var(--ok-fw-bold);
}
.ok-nocat .ok-nocat__fallback .ok-nocat__btn:hover{ background:var(--ok-blue-hover); color:var(--ok-on-dark); }

/* ── [N.6] РЕСПОНСИВ «НЕ НАШЛИ» ────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-nocat .okna-podbor__bg{ flex-basis:200px; }
  .ok-nocat .okna-podbor__main{ padding:24px 26px; gap:20px; }
  .ok-nocat .okna-podbor__btns,
  .ok-nocat .okna-podbor__features{ justify-content:flex-start; }
}
@media (max-width:768px){
  /* Мобильный мастер: одна белая карточка на всю ширину контейнера.
     Внутренняя панель подбора теряет собственную рамку и фон — рамкой
     становится наш .ok-nocat__box. */
  .ok-nocat__box{
    padding:20px 18px;
    border:1px solid var(--ok-border);
    border-radius:var(--ok-radius-card);
    background:var(--ok-section-a);
  }
  .ok-nocat .okna-podbor__card{
    min-height:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
  }
  /* ⚠ ЗАМЕР D10-R (vp768/600): эта строка НЕ РАБОТАЕТ и не работала никогда —
     okna-mobile.css:353 печатает `.okna-podbor__main{padding:20px !important}`
     (трек мобильной версии, файл вне зоны пакета). Итог на телефоне: 20px
     внутреннего падинга панели ПОВЕРХ 20/18 у .ok-nocat__box, тогда как в
     мобильном мастере (M8) карточка имеет только свои 20/18. Правка требует
     встречного !important либо согласования с мобильным треком — в задании
     D10-R этого не заказано, поэтому оставлено как есть и вынесено в отчёт. */
  .ok-nocat .okna-podbor__main{ padding:0; gap:14px; }
  .ok-nocat .okna-podbor__text{ padding-left:0; }
  .ok-nocat .okna-podbor__text::before{ display:none; }
  .ok-nocat .okna-podbor__text h2{
    font-size:var(--ok-fs-h2-mobile);       /* 23px */
    line-height:1.3;
  }
  .ok-nocat .okna-podbor__text p{ max-width:none; font-size:13.5px; }
  .ok-nocat .okna-podbor__aside{ gap:14px; }
  .ok-nocat .okna-podbor__btn{ width:100%; font-size:15px; }
  .ok-nocat .okna-podbor__features{ justify-content:flex-start; gap:14px; }

  .ok-nocat__ways{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:16px;
  }
}

/* [W5-P02 п.5] Тач-цели ≥44: табы марок (фикс. height 34–36 перебиваем на 44)
   и «все марки». Канон «И» (D-209). Без !important — тот же вес, позже. */
@media (hover:none) and (pointer:coarse){
  .ok-brands .okna-bm__tab{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .ok-brands .ok-brands__all{ min-height:44px; }
  .ok-brands__notfound{ min-height:44px; }
}
