/* ============================================================================
   ok-home-w1.css — HOME-SHELL-V2 · ВОЛНА 1 (HC-09)
   ----------------------------------------------------------------------------
   ОТДЕЛЬНЫЙ файл волны. Пишется параллельно с HC-08 (assets/ok-home.css), чтобы
   две волны не толкались в одном файле. Подключается СРАЗУ ПОСЛЕ ok-home.css
   (deps: okna-ok-home) — см. рецепт enqueue в отчёте HC-09. В HC-14/HC-16 файл
   вливается в ok-home.css своими секциями — поэтому структура, комментарии и
   приёмы здесь ТЕ ЖЕ, что в ok-home.css.

   ═══ ОГЛАВЛЕНИЕ (порядок = порядок блоков на странице) ══════════════════════
     [W1.0]        локальная палитра волны (color-mix из --ok-*, ΔE подписан)
     [SITUATIONS]  02 · когда нужно заменить или подобрать стекло
     [SERVICES]    03 · что мы делаем
     [PICKER-DARK] 04 · подберём стекло (тёмный баннер, общий рендерер услуг)
     [PODBOR]      05 · подбор по каталогу (компонент «Быстрый подбор»)

   ═══ ПРАВИЛА ФАЙЛА (те же, что у ok-home.css — 14_CSS_JS_ARCHITECTURE §16) ═══
     1. Скоуп. Каждое правило начинается с класса своего блока (.ok-situations…,
        .ok-services…, .ok-pickdark…, .ok-podbor…). Глобальных селекторов нет —
        слой не течёт ни в шапку/футер, ни в FORBID-зоны (услуга, каталог).
        ★ Классы .okna-pick__* и .okna-qp__* — ЧУЖИЕ (общие рендереры услуг и
        каталога). Они здесь встречаются ТОЛЬКО с префиксом .ok-pickdark /
        .ok-podbor, иначе правка утекла бы на /uslugi/ и /katalog/.
     2. Цвет. Ноль литералов #hex: только токены --ok-* (assets/ok-tokens.css).
        Промежуточный тон — color-mix() из токенов, ΔE76 к эталону подписан
        (порог различимости глазом ≈2.3). Приём HC-05/HC-08.
     3. !important не применяется КАК МЕТОД. Три исключения — против ЧУЖОГО
        !important (компонент «Быстрый подбор» в mu-plugins/okna-tree-nav.php
        объявляет свои поля через !important). Каждое подписано на месте.
        TT1 (twentytwentyone/style.css грузится ДВАЖДЫ — первым и последним)
        перебивается СПЕЦИФИЧНОСТЬЮ `html body …`, а не порядком enqueue.
     4. Брейкпоинты — КАНОН M1, новые значения запрещены: 1024 / 768 / 600 / 480.
        Media-правила блока — В КОНЦЕ ЕГО ЖЕ секции.
     5. Числа — из ЖИВОГО ЗАМЕРА мастер-файла (headless Chrome 150,
        --allow-file-access-from-files, file://«02 Главная.dc.html»,
        vp1440 — десктоп-дерево, vp390 — мобильное дерево после клика «Мобайл»).
        Замер подписан в шапке каждой секции.

   ⚠ ГЛАВНЫЙ КАПКАН ЭТОЙ ЗОНЫ. glavnaya.css:54 держит
        `.glavnaya-v4 > section{ padding:32px 0 }`   (0,1,1)
     и на ≤1024 то же значением 24px. Секции волны — ПРЯМЫЕ дети .glavnaya-v4,
     поэтому к мастерским 72/0 приклеилось бы ещё по 32px. Гасится
     специфичностью `html body .ok-…` (0,1,2). Тот же приём — в [HERO] HC-08.

   ЗАВИСИМОСТИ ENQUEUE: ok-tokens → ok-foundation → ok-layout → ok-header →
   ok-footer → ok-home → **ok-home-w1**.
   ============================================================================ */


/* ██████████████████████████████████████████████████████████████████████████████
   [W1.0] · ЛОКАЛЬНАЯ ПАЛИТРА ВОЛНЫ
   ------------------------------------------------------------------------------
   Тона, которых нет в 07_DESIGN_TOKEN_REGISTRY. Собраны из токенов через
   color-mix. Двойное объявление — фолбэк: браузер без color-mix оставляет
   первое значение (приём HC-05/HC-08). Префикс --okw- («wave 1»), чтобы не
   пересечься с --okh- волны HC-08 при слиянии файлов в HC-14.
   ████████████████████████████████████████████████████████████████████████████ */
.ok-situations,
.ok-services,
.ok-pickdark,
.ok-podbor{
  /* рамка кружка-иконки ситуации · эталон #e3eaf5 */
  --okw-ico-line:var(--ok-border);
  --okw-ico-line:color-mix(in srgb, var(--ok-border-input) 60%, var(--ok-tint-blue));   /* ≈#e5ebf4 · ΔE 1.0 */

  /* градиент промо-карточки услуг · эталон #f8fbff → #e9f0fb */
  --okw-promo-a:var(--ok-section-a);
  --okw-promo-a:color-mix(in srgb, var(--ok-on-dark) 62%, var(--ok-tint-blue));         /* ≈#f8fafe · ΔE 0.5 */
  --okw-promo-b:var(--ok-tint-blue);
  --okw-promo-b:color-mix(in srgb, var(--ok-tint-blue) 88%, var(--ok-border-outline));  /* ≈#eaf0fa · ΔE 0.6 */

  /* тёмная плашка (моб. промо-карточка, база баннера) · эталон #0b1f3f.
     ✔ HC-14: тон внесён в реестр как --ok-hero-dark-b — один токен на всю
     главную вместо повторения формулы color-mix в четырёх файлах. */
  --okw-plate:var(--ok-hero-dark-b);                                                    /* #0b1f3f */

  /* подзаголовок на тёмном · эталон #cfd6e2 (= --okh-sub HC-08) */
  --okw-on-dark-sub:var(--ok-border-outline);
  --okw-on-dark-sub:color-mix(in srgb, var(--ok-muted-seed) 31%, var(--ok-tint-blue));  /* ≈#cfd6e1 · ΔE 0.23 */

  /* приглушённый на тёмном · эталон #9aa4b6 (= --okh-muted HC-08) */
  --okw-on-dark-muted:var(--ok-muted-seed);
  --okw-on-dark-muted:color-mix(in srgb, var(--ok-muted-seed) 77%, var(--ok-border-outline)); /* ≈#9aa4b6 · ΔE 0.14 */

  /* обводка кружка преимущества на тёмном · эталон rgba(127,166,239,.55) */
  --okw-adv-line:color-mix(in srgb, color-mix(in srgb, var(--ok-blue) 55%, var(--ok-on-dark)) 55%, transparent);
  /* штрих иконки преимущества · эталон #cfe0fb */
  --okw-adv-ico:var(--ok-tint-blue);
  --okw-adv-ico:color-mix(in srgb, var(--ok-blue) 20%, var(--ok-on-dark));              /* ≈#d1def7 · ΔE 1.6 */

  /* подложка иконки моб. поля подбора · эталон #eef2f7 */
  --okw-field-tile:var(--ok-section-b);
  --okw-field-tile:color-mix(in srgb, var(--ok-section-b) 55%, var(--ok-border));       /* ≈#eff3f8 · ΔE 0.6 */

  /* волосяные линии на тёмном · эталон rgba(255,255,255,.16) и .14 */
  --okw-hair:color-mix(in srgb, var(--ok-on-dark) 16%, transparent);
  --okw-hair-soft:color-mix(in srgb, var(--ok-on-dark) 14%, transparent);
  /* контур ghost-кнопки на тёмном · эталон rgba(255,255,255,.8) */
  --okw-ghost-line:color-mix(in srgb, var(--ok-on-dark) 80%, transparent);

  /* размеры мастера, которых нет в глобальных токенах */
  --okw-h2-underline:44px;   /* ширина красной черты под H2 секции */
  --okw-h3-underline:26px;   /* то же под H3 карточки-ситуации     */
}

/* Красная черта под H2/H3 — приём мастера: фоновый градиент в left bottom, а не
   ::after. Даёт ту же картинку без лишнего псевдоэлемента и без absolute. */


/* ██████████████████████████████████████████████████████████████████████████████
   [SITUATIONS] · HC-09 · 02 «Когда нужно заменить или подобрать автобусное стекло»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/situations.php
   Эталон:   «02 Главная.dc.html» → data-screen-label="02 Когда нужна замена"
             (десктоп) и вторая <section> мобильного дерева (M2, «карусель»).

   ★ ЖИВОЙ ЗАМЕР
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ......... h 697.5 · bg #f5f8fd (=--ok-section-b) · padding 72px 0
     контейнер ...... max-width 1280 · padding 0 32 · контент 1216
     H2 ............. 34px/800 · lh 1.18 · ls −.01em · #123d87 · h 60
                      pb 14 · mb 12 · подчёркивание 44×3 #e0223a слева снизу
     подзаголовок ... 16.5px/400 · lh 1.55 (25.575) · #526173
                      max-width 820 · mb 36 · h 76.69
     сетка .......... grid repeat(3,1fr) · gap 18 · колонки 393.33
     карточка ....... 393.33×175.41 · radius 16 · border 1px #e8ecf2 · padding 22
                      шахматка: нечётная #eef3fc, чётная #ffffff
     шапка карточки . flex · align center · gap 12 · mb 10 · h 52
     кружок иконки .. 52×52 · radius 999 · bg #fff · border 1px #e3eaf5
                      shadow 0 4px 12px rgba(20,40,80,.07)
     картинка ....... 34×34 · object-fit contain
     H3 ............. 17px/800 · #123d87 · pb 9 · подчёркивание 26×3 #e0223a
     текст .......... 14.5px/400 · lh 1.55 (22.475) · #526173

   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ......... h 404.56 · padding 44px 0 48px (боковых НЕТ — лента)
     H2 ............. 23px/800 · lh 1.25 · margin 0 16 8
     подзаголовок ... 14px/400 · lh 1.55 · margin 0 16 18
     лента .......... flex · gap 12 · padding 2 16 10 · scroll-snap x mandatory
     карточка ....... flex 0 0 260 · radius 16 · padding 18 · та же шахматка
     H3 ............. 15.5px/800 · #1d2433 · mb 8   ← цвет ДРУГОЙ, чем на десктопе
     текст .......... 13.5px/400 · lh 1.55
     ★ иконок в мобильном дереве мастера НЕТ — на ≤600 кружок скрывается.
   ████████████████████████████████████████████████████████████████████████████ */

/* `html body` (0,1,2) — против `.glavnaya-v4 > section{padding:32px 0}` (0,1,1). */
html body .ok-situations{
  padding-block:var(--ok-section-space-desktop);   /* 72px — замер мастера */
  background:var(--ok-section-b);                  /* #f5f8fd — замер мастера */
}

/* ★ ДВОЙНОЙ КЛАСС (0,2,0) — НЕ УКРАШЕНИЕ. Фундамент задаёт `.ok-scope h1…h6
   {margin:0}` и `.ok-scope p{margin:0 0 16px}` со специфичностью (0,1,1);
   одиночный класс блока (0,1,0) ей проигрывает, и замер это поймал: отступы
   заголовка и подзаголовка молча обнулялись/подменялись. Тот же приём — у всех
   заголовков и абзацев волны. */
.ok-situations .ok-situations__title{
  font-size:var(--ok-fs-h2);                       /* 34px */
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  padding-bottom:14px;
  margin:0 0 12px;
  /* красная черта 44×3 в левом нижнем углу — приём мастера */
  background-image:linear-gradient(var(--ok-red), var(--ok-red));
  background-size:var(--okw-h2-underline) 3px;
  background-position:left bottom;
  background-repeat:no-repeat;
}

.ok-situations .ok-situations__sub{
  max-width:820px;                                 /* замер мастера */
  margin:0 0 36px;
  font-size:var(--ok-fs-intro);                    /* 16.5px */
  line-height:var(--ok-lh-body);                   /* 1.55 */
  color:var(--ok-text-2);
}

/* Сетка: база 3 колонки из .ok-grid (ok-layout.css). Здесь — только отличия;
   (0,2,0) выбран осознанно: не полагаемся на порядок листов внутри своего же
   слоя (правило 3 шапки файла). */
.ok-situations .ok-situations__grid{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--ok-gap-cards);                         /* 18px — замер мастера */
}

.ok-situations__card{
  min-width:0;                                     /* без этого длинное слово распирает грид */
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);             /* 16px */
  padding:22px;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Шахматка мастера: 1-я, 3-я, 5-я карточки — голубой тинт. */
.ok-situations__card--tint{ background:var(--ok-tint-blue); }

.ok-situations__card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ok-shadow-card-hover);
}
@media (prefers-reduced-motion:reduce){
  .ok-situations__card{ transition:none; }
  .ok-situations__card:hover{ transform:none; }
}

.ok-situations__cardhead{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.ok-situations__ico{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-section-a);
  border:1px solid var(--okw-ico-line);
  box-shadow:0 4px 12px rgba(20,40,80,.07);        /* эталон 1-в-1 (тень, не цвет) */
}
.ok-situations__ico img{
  width:34px;
  height:34px;
  object-fit:contain;
}

/* (0,2,0) — против `.ok-scope h3{font-size:var(--ok-fs-h3)}` = 22px (0,1,1). */
.ok-situations .ok-situations__cardtitle{
  font-size:17px;
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  color:var(--ok-ink);
  padding-bottom:9px;
  background-image:linear-gradient(var(--ok-red), var(--ok-red));
  background-size:var(--okw-h3-underline) 3px;
  background-position:left bottom;
  background-repeat:no-repeat;
}

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

/* ── RESPONSIVE [SITUATIONS] ──────────────────────────────────────────────── */
/* LG 1024 — планшет: 2 колонки, ритм секции 56 (тот же приём, что в ok-layout). */
@media (max-width:1024px){
  html body .ok-situations{ padding-block:var(--ok-section-space-tablet); }
  .ok-situations .ok-situations__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* MD 768: остаёмся на 2 колонках (карточка мастера всего 260px — в одну колонку
   шесть штук дают лишнюю простыню). Перебиваем `.ok-grid` 1-колоночное правило. */
@media (max-width:768px){
  .ok-situations .ok-situations__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* SM 600 — мобильное дерево мастера: горизонтальная лента.
   06 §3 правило 9: bleed ОСОЗНАННЫЙ — скроллится сам ряд, страница не едет
   (правило 10 не нарушено, доказано ICB-замером). */
@media (max-width:600px){
  html body .ok-situations{
    padding-block:var(--ok-section-space-mobile) 48px;  /* 44 / 48 — замер мастера */
    padding-inline:0;                                   /* боковые снимаем: их несут дети */
  }
  /* Заголовок и подзаголовок сохраняют боковой отступ контейнера сами.
     ✔ HC-14: строка кегля СНЯТА — канон 23px даёт ok-legacy-compat.css §[3]
     одним правилом на все H2 оболочки (раньше шесть волн объявляли его каждая
     у себя со встречным !important). Здесь остаётся только своя отбивка. */
  .ok-situations .ok-situations__title{
    line-height:var(--ok-lh-h2-mobile);                 /* 1.25 */
    margin-bottom:8px;
    padding-bottom:0;
    background-image:none;                              /* черты под H2 в мобильном мастере нет */
  }
  .ok-situations .ok-situations__sub{
    max-width:none;
    margin-bottom:18px;
    font-size:14px;
  }
  .ok-situations .ok-situations__grid{
    display:flex;
    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) 10px;
  }
  .ok-situations .ok-situations__grid::-webkit-scrollbar{ display:none; }
  .ok-situations__card{
    flex:0 0 260px;                                     /* замер мастера */
    scroll-snap-align:start;
    padding:18px;
  }
  .ok-situations__card:hover{ transform:none; box-shadow:none; }
  .ok-situations__ico{ display:none; }                  /* в мобильном мастере иконок нет */
  .ok-situations__cardhead{ margin-bottom:8px; }
  /* !important — против okna-mobile.css:63 `body h3{19px!important}`: значение
     блочное (15.5), канон §[3] его не покрывает. */
  .ok-situations .ok-situations__cardtitle{
    font-size:15.5px !important;
    line-height:var(--ok-lh-heading);
    color:var(--ok-text);                               /* #1d2433 — цвет мобильного мастера */
    padding-bottom:0;
    background-image:none;
  }
  .ok-situations .ok-situations__text{ font-size:13.5px; }
}

/* XS 480 — карточка не должна быть шире экрана за вычетом отступов. */
@media (max-width:480px){
  .ok-situations__card{ flex-basis:min(260px, calc(100vw - 64px)); }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [SERVICES] · HC-09 · 03 «Что мы делаем»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/services.php
   Эталон:   data-screen-label="03 Что мы делаем" (десктоп) и M3 (мобайл).

   ★ ЖИВОЙ ЗАМЕР
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ......... h 708 · bg #ffffff · padding 72px 0
     H2 ............. 34px/800 · pb 14 · mb 32 · черта 44×3
     грид ........... grid 440px minmax(0,1fr) · gap 22 · align stretch
                      фактические колонки 440 / 754
     ПРОМО .......... 440×380 · min-height 380 · radius 16 · border 1px #e8ecf2
                      bg linear-gradient(160deg,#f8fbff,#e9f0fb) · padding 30 28
       автобус ...... <img> абс · right 10 · bottom 10 · width 58% · opacity .85
       точки ........ абс · top 24 · right 28 · 96×64
                      radial-gradient(#c9d8f0 1.5px, transparent 1.5px) 12×12
       H3 ........... 24px/800 · lh 1.2 · #123d87 · mb 10
       текст ........ 14.5px/1.55 · #526173 · max-width 340 · mb 18
       кнопки ....... column · gap 10 · каждая 230×48 · radius 8 · 14.5px/700
                      1: bg #e0223a / #fff · 2: bg #fff / #1c5bd6 · border 1.5px
     ПЛИТКИ ......... grid 1fr 1fr · gap 12 · плитка 371×84
                      radius 12 · border 1px #e8ecf2 · padding 24 20 · gap 14
       иконка ....... svg 26×22 · название 15px/700 #1c5bd6 · шеврон 8×14 #8a94a6
     ПЛАШКА МАРОК ... 1216×70 · mt 22 · radius 16 · bg #f5f8fd · border 1px #e8ecf2
                      padding 18 22 · gap 16 · иконка 30×32 · текст 15px #526173
                      выделение марок <b> #123d87

   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ......... h 685.63 · padding 44 16 48 · bg #ffffff
     H2 ............. 23px/800 · mb 16
     ПРОМО .......... 356×220.25 · ТЁМНАЯ: bg #0b1f3f + services-promo-bg
                      right center/cover · radius 16 · padding 22 18 · mb 14
       затемнение ... linear-gradient(180deg, rgba(9,16,30,.4), rgba(9,16,30,.9) 80%)
       H3 ........... 19px/800 · lh 1.25 · #fff · mb 8
       текст ........ 13.5px/1.5 · #cfd6e2 · mb 14
       кнопка ....... ОДНА · width 100% · h 46 · radius 4 · #e0223a · 14.5px/700
     ПЛИТКИ ......... grid 1fr 1fr · gap 10 · плитка 173×57.09 · min-height 52
                      radius 10 · padding 10 14 · 13.5px/700 · #1d2433 · lh 1.3
                      ★ иконки и шеврон в мобильном мастере отсутствуют
     МАРКИ .......... обычный <p> 13px/1.5 · mt 14 (плашки/иконки нет)
   ████████████████████████████████████████████████████████████████████████████ */

html body .ok-services{
  padding-block:var(--ok-section-space-desktop);   /* 72px */
  background:var(--ok-section-a);                  /* #ffffff */
}

/* (0,2,0) — против `.ok-scope h1…h6{margin:0}` (0,1,1), см. [SITUATIONS]. */
.ok-services .ok-services__title{
  font-size:var(--ok-fs-h2);
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  padding-bottom:14px;
  margin:0 0 32px;                                 /* замер мастера: 32, не 12 */
  background-image:linear-gradient(var(--ok-red), var(--ok-red));
  background-size:var(--okw-h2-underline) 3px;
  background-position:left bottom;
  background-repeat:no-repeat;
}

.ok-services__grid{
  display:grid;
  grid-template-columns:440px minmax(0,1fr);       /* замер мастера */
  gap:22px;
  align-items:stretch;
}

/* ── ПРОМО-КАРТОЧКА ───────────────────────────────────────────────────────── */
.ok-services__promo{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:380px;
  padding:30px 28px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
  overflow:hidden;
  background-color:var(--okw-promo-a);
  /* ★ ИСПРАВЛЕНО (замечание владельца): фон обязан заполнять ВЕСЬ объём карточки,
     автобус — быть виден. Было: сплошной градиент + отдельная картинка-автобус
     в правом нижнем углу (254×85 = 13% площади карточки 440×380, наполовину под
     кнопкой, да ещё и чужим кадром `podbor-bus-bg.webp` 1300×433 из блока подбора).
     Стало: фон карточки — штатный `services-promo-bg.webp` (1672×941), он уже
     приходит в разметку переменной --okw-svc-bg и до этого работал только на
     мобилке. `cover` заполняет объём; поверх — светлая вуаль, плотная слева-сверху
     (там текст) и прозрачная справа-снизу (там автобус проступает). Так и объём
     заполнен, и тёмно-синий текст читается без смены цветовой схемы карточки. */
  background-image:
    linear-gradient(155deg,
      color-mix(in srgb, var(--okw-promo-a) 94%, transparent) 0%,
      color-mix(in srgb, var(--okw-promo-a) 88%, transparent) 38%,
      color-mix(in srgb, var(--okw-promo-b) 55%, transparent) 68%,
      transparent 100%),
    var(--okw-svc-bg, none);
  background-position:center, right bottom;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
}
/* Автобус-подложка: заменён фоном карточки (см. выше) — картинка-обрезок в углу
   давала ровно тот дефект, на который указал владелец. Узел оставлен в разметке
   (декоративный, alt=""), чтобы вернуть одной строкой, если решение изменится. */
.ok-services__promo-bus{ display:none; }
/* Декоративная точечная сетка правого верхнего угла. */
.ok-services__promo-dots{
  position:absolute;
  top:24px;
  right:28px;
  width:96px;
  height:64px;
  pointer-events:none;
  background-image:radial-gradient(var(--ok-border-outline) 1.5px, transparent 1.5px);
  background-size:12px 12px;
}
.ok-services__promo-body{ position:relative; }     /* поверх подложек */

/* (0,2,0) — против `.ok-scope h3{font-size:22px}` и `.ok-scope p{margin}`. */
.ok-services .ok-services__promo-h3{
  font-size:24px;
  line-height:1.2;
  color:var(--ok-ink);
  margin:0 0 10px;
}
.ok-services .ok-services__promo-text{
  max-width:340px;
  margin:0 0 18px;
  font-size:var(--ok-fs-card);                     /* 14.5px */
  line-height:var(--ok-lh-body);
  color:var(--ok-text-2);
}
.ok-services__promo-ctas{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

/* Кнопки промо. `html body` (0,1,2) — TT1 чернит текст ссылок-кнопок
   (известный капкан, см. память проекта «okna кнопки — единый отклик»). */
html body .ok-services__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:230px;
  max-width:100%;
  height:var(--ok-control-h);                      /* 48px */
  padding:0 22px;
  border-radius:var(--ok-radius-cta);              /* 8px */
  font-size:var(--ok-fs-card);                     /* 14.5px */
  font-weight:var(--ok-fw-bold);
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
html body .ok-services__btn--primary{
  background:var(--ok-red);
  color:var(--ok-on-dark);
  border:0;
}
html body .ok-services__btn--primary:hover,
html body .ok-services__btn--primary:focus-visible{
  background:color-mix(in srgb, var(--ok-red) 88%, var(--ok-dark));   /* эталон hover #c81a30 · ΔE 1.8 */
  color:var(--ok-on-dark);
}
html body .ok-services__btn--outline{
  background:var(--ok-section-a);
  color:var(--ok-blue);
  border:1.5px solid var(--ok-blue);
}
html body .ok-services__btn--outline:hover,
html body .ok-services__btn--outline:focus-visible{
  background:var(--ok-blue);
  color:var(--ok-on-dark);
}
html body .ok-services__btn:active{ transform:translateY(1px); }
@media (prefers-reduced-motion:reduce){
  html body .ok-services__btn{ transition:none; }
  html body .ok-services__btn:active{ transform:none; }
}

/* ── ПЛИТКИ УСЛУГ ─────────────────────────────────────────────────────────── */
.ok-services__tiles{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
html body .ok-services__tile{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:24px 20px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-category);         /* 12px */
  color:var(--ok-blue);
  text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
html body a.ok-services__tile:hover,
html body a.ok-services__tile:focus-visible{
  border-color:var(--ok-blue);
  box-shadow:0 10px 26px rgba(20,40,80,.08);       /* эталон 1-в-1 */
  color:var(--ok-blue);
}
/* B1/B2 — нажатие плитки-ссылки (hover выше, active здесь). */
html body a.ok-services__tile:active{ transform:translateY(1px); }
.ok-services__tile-ico{
  flex:0 0 auto;
  display:grid;
  place-items:center;
}

/* ЦВЕТ ДВУХТОНОВЫХ ИКОНОК. В мастере он живёт presentation-атрибутами
   (fill="#eef3fc" stroke="#1c5bd6"), а presentation-атрибут не умеет var().
   Поэтому в разметке у фигур стоят КЛАССЫ, а цвет приходит отсюда из токенов —
   так в шаблоне не осталось ни одного литерала #hex (forbidden-список пакета).
   Скоуп двойной: только внутри своих контейнеров этого блока. */
.ok-services__tile-ico .ok-ico-fill,
.ok-services__brands-ico .ok-ico-fill{ fill:var(--ok-tint-blue); }
.ok-services__tile-ico .ok-ico-line,
.ok-services__brands-ico .ok-ico-line{ stroke:var(--ok-blue); }
.ok-services__tile-ico .ok-ico-dot,
.ok-services__brands-ico .ok-ico-dot,
.ok-services__tile-ico .ok-ico-solid,
.ok-services__brands-ico .ok-ico-solid{ fill:var(--ok-blue); }
/* блик/галочка — белым поверх заливки */
.ok-services__tile-ico .ok-ico-glare,
.ok-services__brands-ico .ok-ico-glare{ stroke:var(--ok-on-dark); }
/* «бумажная» подложка (щит марок) — белая заливка мастера */
.ok-services__brands-ico .ok-ico-paper{ fill:var(--ok-section-a); }
.ok-services__tile-name{
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
  line-height:1.3;
}
.ok-services__tile-chev{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:var(--ok-text-muted);
  transition:transform .16s ease;
}
html body a.ok-services__tile:hover .ok-services__tile-chev{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
  html body .ok-services__tile,
  .ok-services__tile-chev{ transition:none; }
  html body a.ok-services__tile:hover .ok-services__tile-chev{ transform:none; }
}

/* ── ПЛАШКА МАРОК ─────────────────────────────────────────────────────────── */
.ok-services__brands{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:22px;
  padding:18px 22px;
  background:var(--ok-section-b);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
}
.ok-services__brands-ico{ flex:0 0 auto; display:grid; place-items:center; }
.ok-services__brands-text{
  margin:0;
  font-size:15px;
  color:var(--ok-text-2);
}
.ok-services__brands-text b{ color:var(--ok-ink); }

/* ── RESPONSIVE [SERVICES] ────────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-services{ padding-block:var(--ok-section-space-tablet); }
  /* Промо больше не держит 440px рядом с плитками — кладём в один столбец. */
  .ok-services__grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .ok-services__promo{ min-height:340px; }
}

@media (max-width:768px){
  .ok-services .ok-services__title{ margin-bottom:16px; }
  .ok-services .ok-services__promo-text{ max-width:none; }
}

/* SM 600 — мобильное дерево мастера: тёмная промо-карточка, плитки без иконок. */
@media (max-width:600px){
  html body .ok-services{ padding-block:var(--ok-section-space-mobile) 48px; }
  /* ✔ HC-14: строка кегля снята — канон 23px в ok-legacy-compat.css §[3].
     Красной черты под H2 в мобильном дереве мастера НЕТ (как и у [SITUATIONS]);
     у [PODBOR] вместо неё — вертикальная планка слева. Следуем мастеру. */
  .ok-services .ok-services__title{
    line-height:var(--ok-lh-h2-mobile);
    margin-bottom:16px;
    padding-bottom:0;
    background-image:none;
  }

  .ok-services__promo{
    min-height:0;
    padding:22px 18px;
    margin-bottom:0;                                /* зазор даёт gap грида */
    border:0;
    /* Фон-картинка приходит из PHP инлайновой переменной --okw-svc-bg
       (путь к ассету знает только тема — литералов в CSS нет). */
    background-color:var(--okw-plate);
    background-image:var(--okw-svc-bg, none);
    background-position:right center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  /* Затемнение мастера. Отдельный слой, чтобы не мешать фон-картинке. */
  .ok-services__promo::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--ok-dark) 40%, transparent) 0%,
      color-mix(in srgb, var(--ok-dark) 90%, transparent) 80%);
  }
  .ok-services__promo-bus,
  .ok-services__promo-dots{ display:none; }         /* в мобильном мастере их нет */

  /* !important — против okna-mobile.css:63 `body h3{19px!important}`. Значение
     совпадает, но объявляем детерминированно, а не «повезло». */
  .ok-services .ok-services__promo-h3{
    font-size:19px !important;
    line-height:var(--ok-lh-h2-mobile);
    color:var(--ok-on-dark);
    margin-bottom:8px;
  }
  .ok-services .ok-services__promo-text{
    font-size:13.5px;
    line-height:1.5;
    color:var(--okw-on-dark-sub);
    margin-bottom:14px;
  }
  .ok-services__promo-ctas{ align-items:stretch; }
  html body .ok-services__btn{
    width:100%;
    height:46px;
    border-radius:var(--ok-radius-btn);             /* 4px — канон моб. CTA (07 §5) */
  }
  /* Вторая кнопка на тёмном фоне: белый контур вместо синего на белом. */
  html body .ok-services__btn--outline{
    background:transparent;
    color:var(--ok-on-dark);
    border-color:var(--okw-ghost-line);
  }
  html body .ok-services__btn--outline:hover,
  html body .ok-services__btn--outline:focus-visible{
    background:var(--ok-on-dark);
    color:var(--ok-ink);
  }

  .ok-services__tiles{ gap:10px; }
  html body .ok-services__tile{
    min-height:52px;
    padding:10px 14px;
    gap:0;
    border-radius:var(--ok-radius-dropdown);        /* 10px */
  }
  .ok-services__tile-ico,
  .ok-services__tile-chev{ display:none; }          /* мобильный мастер: только текст */
  .ok-services__tile-name{
    font-size:13.5px;
    color:var(--ok-text);                           /* #1d2433 — цвет мобильного мастера */
  }

  /* Плашка марок становится обычным абзацем (мастер снимает фон и иконку). */
  .ok-services__brands{
    margin-top:14px;
    padding:0;
    background:none;
    border:0;
    gap:0;
  }
  .ok-services__brands-ico{ display:none; }
  .ok-services__brands-text{ font-size:13px; line-height:1.5; }
  .ok-services__brands-text b{ color:var(--ok-text); }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [PICKER-DARK] · HC-09 · 04 «Подберём стекло» — тёмный CTA-баннер
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/picker-dark.php, которая ЗОВЁТ ОБЩИЙ
   рендерер okna_pick_banner_render() (inc/usluga-picker.php). Рендерер даёт
   классы .okna-pick__* и НАСТОЯЩИЕ CF7-формы + попап. Файл рендерера — общий
   с /uslugi/ (FORBID) и с концом лент блога/новостей, поэтому НЕ правится:
   вся разница вида берётся ЗДЕСЬ, под скоупом .ok-pickdark.

   Эталон: data-screen-label="04 Подберём стекло" (десктоп) и M4 (мобайл).

   ★ ЖИВОЙ ЗАМЕР
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ......... h 595.03 · bg #ffffff · padding 0 0 72   ← ВЕРХНЕГО НЕТ
     баннер ......... 1216×523.03 · radius 16 · padding 44 44 36 · gap 30 column
                      bg: 2 градиента + picker-cta-bus-bg · cover · center right
     тело ........... max-width 640
       H2 ........... 30px/800 · lh 1.25 · ls −.01em · #fff · mb 14
       текст ........ 15.5px/1.55 · #cfd6e2 · mb 22
       кнопки ....... flex · gap 12 · wrap · mb 20 · обе h 48 · radius 4 · 15px/700
                      1: bg #1c5bd6 · padding 0 24 · 2: контур 2px rgba(255,255,255,.8)
       телефон ...... flex · gap 9 · 14px · #9aa4b6 · ссылка #fff/700
     преимущества ... grid repeat(4,1fr) · gap 26 · колонка 262.5
                      border-top 1px rgba(255,255,255,.16) · padding-top 28
       кружок ....... 40×40 · radius 999 · border 1.5px rgba(127,166,239,.55) · mb 12
       H4 ........... 15px/700 · #fff · mb 5
       текст ........ 13px/1.5 · #9aa4b6

   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ......... h 670.38 · padding 0 16 48
     баннер ......... 356×622.38 · radius 16 · padding 24 18
       H2 ........... 20px/800 · lh 1.3 · mb 8
       текст ........ 13.5px/1.5 · mb 16
       кнопки ....... в столбик, во всю ширину: h 48 (mb 10) и h 46 (mb 16)
       преимущества . column · gap 14 · border-top 1px rgba(255,255,255,.14)
                      padding-top 16 · mb 16 · кружок 34×34
                      заголовок 13.5px · текст 12.5px/1.45
       телефон ...... по центру · 13px
   ████████████████████████████████████████████████████████████████████████████ */

/* Корень блока — <div>, а не <section>: единственный <section> внутри печатает
   общий рендерер. Так у блока ровно один section (семантика мастера) и
   `.glavnaya-v4 > section{padding:32px}` до него не дотягивается вовсе. */
html body .ok-pickdark{
  padding-block:0 var(--ok-section-space-desktop);  /* 0 / 72 — замер мастера */
  background:var(--ok-section-a);
}
/* Внутренняя секция рендерера — без своих отступов и ограничителей ширины. */
html body .ok-pickdark .okna-pick{
  max-width:none;
  margin:0;
  padding:0;
}

html body .ok-pickdark .okna-pick__banner{
  border-radius:var(--ok-radius-card);              /* 16px (в старом слое было 26) */
  padding:44px 44px 36px;
  /* Градиенты и сам файл фона приходят инлайном из общего рендерера —
     они СОВПАДАЮТ с мастером 1-в-1, поэтому здесь только геометрия. */
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}

html body .ok-pickdark .okna-pick__body{
  max-width:640px;
  z-index:2;
}
html body .ok-pickdark .okna-pick__title{
  margin:0 0 14px;
  max-width:none;
  font-size:30px;
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-h2-mobile);               /* 1.25 — замер мастера */
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-on-dark);
}
html body .ok-pickdark .okna-pick__sub{
  margin:0 0 22px;
  max-width:none;
  font-size:15.5px;
  line-height:var(--ok-lh-body);
  color:var(--okw-on-dark-sub);
}

html body .ok-pickdark .okna-pick__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 20px;
}
/* Кнопки. `html body` (0,2,2) перебивает `body.page-template-tpl-glavnaya
   .okna-pick__btn` (0,2,1) из design.css. Заливка/контур в glavnaya.css
   объявлены через !important (анти-TT1) — здесь такое же !important, иначе
   геометрия применится, а цвет останется старым. Это ЕДИНСТВЕННАЯ причина. */
html body .ok-pickdark .okna-pick__btn{
  height:var(--ok-control-h);                       /* 48px */
  padding:0 24px;
  gap:9px;
  border-radius:var(--ok-radius-btn);               /* 4px — замер мастера */
  border-width:0;
  font-size:15px;
  font-weight:var(--ok-fw-bold);
}
html body .ok-pickdark .okna-pick__btn--red{
  background:var(--ok-blue) !important;             /* против !important glavnaya.css:477 */
  border-color:var(--ok-blue) !important;
  color:var(--ok-on-dark) !important;
}
/* ★ D14 · ЗАЛИПАНИЕ ВИДА ПОСЛЕ КЛИКА МЫШЬЮ. Здесь был `:focus`. Он включается
   и КЛИКОМ МЫШЬЮ тоже и остаётся висеть: обе кнопки открывают попап, а при его
   закрытии фокус штатно возвращается на кнопку-триггер — и «наведённый» вид
   оставался на кнопке навсегда (замер: bg #1c5bd6 → #1448aa держится после
   закрытия). `:focus-visible` даёт ту же картинку ТОЛЬКО на клавиатурном
   фокусе, что и требовалось.
   ★ Специфичность НЕ меняется: `:focus-visible` — такой же псевдокласс (0,3,2),
     значит расстановка сил с чужими правилами прежняя.
   ★ `:hover`/`:active` НЕ тронуты — вся анимация нажатия осталась как была.
   ★ Остаток залипания (белое свечение box-shadow из design.css:1096/1111,
     объявленное на голом `:focus` с !important) снимается в ok-legacy-compat.css
     §[7.6]: тот файл — единственное место слоя, где можно бить чужой !important. */
html body .ok-pickdark .okna-pick__btn--red:hover,
html body .ok-pickdark .okna-pick__btn--red:focus-visible{
  background:var(--ok-blue-hover) !important;       /* против !important glavnaya.css:478 */
  border-color:var(--ok-blue-hover) !important;
  color:var(--ok-on-dark) !important;
}
html body .ok-pickdark .okna-pick__btn--ghost{
  padding:0 22px;
  background:transparent !important;                /* против !important glavnaya.css:480 */
  border:2px solid var(--okw-ghost-line) !important;
  color:var(--ok-on-dark) !important;
}
/* ★ D14 — та же замена, что у --red выше, и это ТА САМАЯ «бледная» кнопка:
   инверсия ghost = сплошная БЕЛАЯ заливка (--ok-on-dark) с тёмным текстом.
   На тёмном баннере она читается как выцветшая, и после закрытия попапа
   висела постоянно (замер: bg transparent → rgb(255,255,255), col #fff →
   #123d87 держались после закрытия). Условия те же: `:hover` не тронут,
   специфичность прежняя (0,3,2). */
html body .ok-pickdark .okna-pick__btn--ghost:hover,
html body .ok-pickdark .okna-pick__btn--ghost:focus-visible{
  background:var(--ok-on-dark) !important;          /* против !important glavnaya.css:482 */
  border-color:var(--ok-on-dark) !important;
  color:var(--ok-ink) !important;
}
/* B1/B2 — нажатие обеих кнопок баннера (hover/инверсия ghost — выше; press — здесь).
   transform чужим !important не объявлен, поэтому обычной специфичности хватает. */
html body .ok-pickdark .okna-pick__btn--red:active,
html body .ok-pickdark .okna-pick__btn--ghost:active{ transform:translateY(1px); }
html body .ok-pickdark .okna-pick__btn-ico svg{ width:17px; height:17px; }

html body .ok-pickdark .okna-pick__phone{
  gap:9px;
  font-size:14px;
  color:var(--okw-on-dark-muted);
}
html body .ok-pickdark .okna-pick__phone-ico{ color:var(--okw-adv-ico); }
html body .ok-pickdark .okna-pick__phone-ico svg{ width:16px; height:16px; }
html body .ok-pickdark .okna-pick__phone a{
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-on-dark);
}
html body .ok-pickdark .okna-pick__phone a:hover{ color:var(--ok-on-dark); }

html body .ok-pickdark .okna-pick__advs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:26px;
  margin:30px 0 0;                                  /* gap 30 колонки мастера */
  padding:28px 0 0;
  border-top:1px solid var(--okw-hair);
}
html body .ok-pickdark .okna-pick__adv-ico{
  width:40px;
  height:40px;
  margin-bottom:12px;
  border-radius:var(--ok-radius-pill);              /* круг, а не 11px */
  border:1.5px solid var(--okw-adv-line);
  background:transparent;
  color:var(--okw-adv-ico);
}
html body .ok-pickdark .okna-pick__adv-ico svg{ width:18px; height:18px; }
html body .ok-pickdark .okna-pick__adv h4{
  margin:0 0 5px;
  font-size:15px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-on-dark);
}
html body .ok-pickdark .okna-pick__adv p{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--okw-on-dark-muted);
}

/* ── RESPONSIVE [PICKER-DARK] ─────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-pickdark{ padding-block:0 var(--ok-section-space-tablet); }
  html body .ok-pickdark .okna-pick__banner{ padding:32px 32px 28px; }
  html body .ok-pickdark .okna-pick__advs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
}

@media (max-width:768px){
  /* !important — блочное значение 24px (канон §[3] даёт 23). */
  html body .ok-pickdark .okna-pick__title{ font-size:24px !important; }

  /* ★ ВОЗВРАТ ТЕЛЕФОНА И ПРЕИМУЩЕСТВ. glavnaya.css:329-330 прячет их на ≤768
     через `display:none !important` («этап 8.1: оставляем суть»). В мастере
     мобильное дерево их ПОКАЗЫВАЕТ — 4 преимущества столбиком и телефон по
     центру (замер vp390: секция 670.38, из них 303.88 — блок преимуществ).
     Без встречного !important блок теряет половину содержания: замер живьём
     дал высоту 387 вместо 670. Специфичность (0,3,2) против (0,2,0) + оба
     !important → выигрывает наше. Скоуп .ok-pickdark: на /uslugi/ и в лентах
     блога прежнее поведение не меняется ни на пиксель. */
  html body .ok-pickdark .okna-pick__banner .okna-pick__phone{ display:flex !important; }
  html body .ok-pickdark .okna-pick__banner .okna-pick__advs{ display:grid !important; }
  html body .ok-pickdark .okna-pick__ctas{ margin-bottom:20px; }
}

@media (max-width:600px){
  html body .ok-pickdark{ padding-block:0 48px; }
  html body .ok-pickdark .okna-pick__banner{ padding:24px 18px; }
  /* Мобильное затемнение мастера. Инлайновый градиент рендерера (100deg,
     под десктоп) на 356px оставлял бы правую треть светлой — белый текст лёг бы
     на фото. Псевдоэлемент ::before у баннера УЖЕ есть (glavnaya.css, прозрачный,
     z-index:1) — переиспользуем его, ничего не добавляя в разметку. */
  html body .ok-pickdark .okna-pick__banner::before{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--okw-plate) 55%, transparent) 0%,
      color-mix(in srgb, var(--okw-plate) 88%, transparent) 100%);
  }
  /* !important — блочное значение 20px (канон §[3] даёт 23). */
  html body .ok-pickdark .okna-pick__title{ font-size:20px !important; line-height:1.3; margin-bottom:8px; }
  html body .ok-pickdark .okna-pick__sub{ font-size:13.5px; line-height:1.5; margin-bottom:16px; }
  html body .ok-pickdark .okna-pick__ctas{ display:block; margin-bottom:0; }
  html body .ok-pickdark .okna-pick__btn{ width:100%; margin-bottom:10px; }
  html body .ok-pickdark .okna-pick__btn--ghost{ height:46px; font-size:14.5px; margin-bottom:16px; }
  html body .ok-pickdark .okna-pick__advs{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    margin:0 0 16px;
    padding-top:16px;
    border-top-color:var(--okw-hair-soft);
  }
  /* Мастер кладёт кружок СЛЕВА, а заголовок и описание — СТОЛБИКОМ справа.
     Разметка общего рендерера плоская (span + h4 + p — три сиблинга), менять её
     нельзя. Поэтому раскладку задаёт грид: кружок занимает обе строки первой
     колонки, h4 и p ложатся во вторую друг под другом. Flex-строка тут не
     годится — она выстроила бы h4 и p в ДВЕ КОЛОНКИ (замер поймал именно это). */
  html body .ok-pickdark .okna-pick__adv{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
  }
  html body .ok-pickdark .okna-pick__adv-ico{
    width:34px;
    height:34px;
    margin-bottom:0;
    grid-row:1 / span 2;
    align-self:start;
  }
  html body .ok-pickdark .okna-pick__adv-ico svg{ width:15px; height:15px; }
  html body .ok-pickdark .okna-pick__adv h4{ font-size:13.5px; }
  html body .ok-pickdark .okna-pick__adv p{ font-size:12.5px; line-height:1.45; }
  /* Телефон — одной центрированной строкой (мастер). glavnaya.css:326 на ≤768
     ставит этому блоку `flex-direction:column; align-items:flex-start` — гасим
     специфичностью (0,2,2), !important не нужен. */
  html body .ok-pickdark .okna-pick__phone{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    font-size:13px;
  }
  html body .ok-pickdark .okna-pick__phone-ico{ display:none; }   /* мастер: только текст */
  html body .ok-pickdark .okna-pick__phone a{ font-size:13px; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [PODBOR] · HC-09 · 05 «Подбор по каталогу»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/podbor.php — ОБВЯЗКА вокруг общего
   компонента okna_podbor_pair() → okna_compact_selector_html()
   (mu-plugins/okna-tree-nav.php). Компонент самодостаточен: сам печатает свой
   <style>/<script>, сам строит дерево страна→марка→модель из okna_nav_tree()
   и сам держит СКРЫТУЮ SEO-навигацию (718 ссылок каталога на 18.07).
   Он общий с /katalog/, страницами марок и ГЕО — НЕ правится. Внешний вид
   доводится ЗДЕСЬ, под скоупом .ok-podbor.

   ⚠ Стили компонента печатаются <style>-тегом В BODY, то есть ПОЗЖЕ нашего
     <link> в <head>. При равной специфичности выигрывает он. Поэтому все
     правила ниже идут с префиксом .ok-podbor (0,2,0 против его 0,1,0).
     Там, где компонент объявил !important (поля .okna-qp__field), другого
     способа, кроме встречного !important, нет — это подписано на месте.

   Эталон: data-screen-label="05 Подбор по каталогу" (десктоп) и M5 (мобайл).

   ★ ЖИВОЙ ЗАМЕР
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ......... h 552.56 · bg #ffffff · padding 0 0 72   ← ВЕРХНЕГО НЕТ
     H2 ............. 34px/800 · pb 14 · mb 12 · черта 44×3
     подзаголовок ... 16.5px/1.55 · #526173 · max-width 760 · mb 28
     панель ......... 1216×290 · bg #fff · border 1px #e8ecf2 · radius 16
                      padding 18 · shadow 0 10px 30px rgba(20,40,80,.05)
       ряд .......... flex · gap 12 · align center · wrap · h 52
       лид .......... 15px/800 · #123d87 · gap 8
       поле ......... h 52 · radius 10 · border 1px #dfe5ee · padding 0 16 · 15px/600
                      активное — border 2px #1c5bd6
       кнопка ....... h 48 · radius 8 · bg #1c5bd6 · #fff · 15px/700 · padding 0 26
       панель чипов . border-top 1px #e8ecf2 · mt 16 · pt 16
                      лейбл 12.5px/800 UPPER ls .06em #8a94a6 · mb 10
       чип .......... radius 999 · border 1px #dfe5ee · padding 9 14 · 14px/700
                      счётчик: bg #eef3fc · #123d87 · radius 999 · 11.5px/800
     нота ........... mt 14 · bg #fff · border 1px #e8ecf2 · border-left 3px #1c5bd6
                      radius 10 · padding 14 18 · 14px/1.5 · #526173

   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ......... h 727.38 · padding 44 16 48 · bg #f5f8fd  ← фон ДРУГОЙ
     H2 ............. 23px/800 · вместо черты — красная планка 4×24 слева, gap 11
     подзаголовок ... 14px/1.55 · mb 16
     панель ......... radius 18 · padding 16 · shadow 0 14px 36px rgba(20,40,80,.08)
       поля ......... в столбик · gap 10 · h 58 · radius 14 · border 1.5px #e3e9f2
       кнопка ....... h 56 · radius 14 · bg #123d87 · 16px/700 · mt 14
   ████████████████████████████████████████████████████████████████████████████ */

html body .ok-podbor{
  padding-block:0 var(--ok-section-space-desktop);  /* 0 / 72 — замер мастера */
  background:var(--ok-section-a);
}

/* (0,2,0) — против `.ok-scope h1…h6{margin:0}` / `.ok-scope p{margin}` (0,1,1). */
.ok-podbor .ok-podbor__title{
  font-size:var(--ok-fs-h2);
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  padding-bottom:14px;
  margin:0 0 12px;
  background-image:linear-gradient(var(--ok-red), var(--ok-red));
  background-size:var(--okw-h2-underline) 3px;
  background-position:left bottom;
  background-repeat:no-repeat;
}
.ok-podbor .ok-podbor__sub{
  max-width:var(--ok-content-narrow);               /* 760px — замер мастера */
  margin:0 0 28px;
  font-size:var(--ok-fs-intro);
  line-height:var(--ok-lh-body);
  color:var(--ok-text-2);
}

/* ── ПАНЕЛЬ КОМПОНЕНТА ────────────────────────────────────────────────────── */
/* Компонент даёт margin:24px 0 самому себе — снимаем, ритм держит обвязка. */
.ok-podbor .okna-podbor-pair{ margin:0; }

/* ★ КАРТОЧКА — НА .okna-qp, А НЕ НА .okna-qp__row. В мастере ряд полей и панель
   выбора страны лежат в ОДНОЙ карточке, разделённые волосяной линией. У
   компонента `.okna-qp__row` и `.okna-qp__panel` — СИБЛИНГИ, поэтому рамка,
   повешенная на ряд, оставляет чипы стран снаружи (замер поймал именно это:
   два отдельных блока вместо одной панели). Карточка переезжает на общего
   родителя, ряд становится прозрачным. */
.ok-podbor .okna-qp{
  margin:0;
  padding:18px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);              /* 16px */
  box-shadow:var(--ok-shadow-soft);                 /* 0 10px 30px rgba(20,40,80,.05) */
}
.ok-podbor .okna-qp__row{
  gap:var(--ok-gap-chips);                          /* 12px */
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.ok-podbor .okna-qp__lead{
  gap:8px;
  font-size:15px;
  font-weight:var(--ok-fw-black);
  color:var(--ok-ink);
}

/* ПОЛЯ. Компонент задаёт им bg/border/color через !important (mu-plugins,
   строка `.okna-qp .okna-qp__field{… !important}`) — встречный !important
   здесь единственный способ применить вид мастера. Геометрия (высота, радиус,
   шрифт) !important не требует и объявлена обычным способом. */
.ok-podbor .okna-qp .okna-qp__field{
  min-height:52px;
  padding:0 16px;
  gap:10px;
  justify-content:space-between;
  font-size:15px;
  font-weight:var(--ok-fw-semibold);
  border-radius:var(--ok-radius-dropdown);          /* 10px */
  background:var(--ok-section-a) !important;        /* против !important компонента */
  border:1px solid var(--ok-border-input) !important;
  color:var(--ok-text-muted) !important;
}
.ok-podbor .okna-qp .okna-qp__field[aria-expanded="true"]{
  border:2px solid var(--ok-blue) !important;       /* против !important компонента */
  box-shadow:none !important;
  color:var(--ok-ink) !important;
}
.ok-podbor .okna-qp__ph{ color:inherit; }
.ok-podbor .okna-qp__val{ color:var(--ok-ink); font-weight:var(--ok-fw-black); }

/* Кнопка «Подобрать». Селектор добирает классы самого элемента до (0,3,3):
   design.css:164-166 держит `a.okna-btn:not(.okna-btn--hero):not(.secondary)`
   (0,3,1) с !important — цвет иначе задаём не мы (подробности в мобильной части
   этой же секции, там же и объяснение, почему !important здесь законен). */
html body .ok-podbor a.okna-btn.okna-qp__go{
  min-height:52px;                                  /* как поля .okna-qp__field в этой строке */
  height:52px;
  flex:0 0 124px;
  align-self:stretch;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:var(--ok-radius-cta);               /* 8px */
  background:var(--ok-blue) !important;             /* против !important design.css:166 */
  border-color:var(--ok-blue) !important;
  color:var(--ok-on-dark) !important;
  font-size:15px;
  font-weight:var(--ok-fw-bold);
}
html body .ok-podbor a.okna-btn.okna-qp__go:hover,
html body .ok-podbor a.okna-btn.okna-qp__go:focus-visible{
  background:var(--ok-blue-hover) !important;       /* против !important design.css:170 */
  border-color:var(--ok-blue-hover) !important;
  color:var(--ok-on-dark) !important;
}
/* B1/B2 — нажатие кнопки «Подобрать» (одно правило на оба вьюпорта). */
html body .ok-podbor a.okna-btn.okna-qp__go:active{ transform:translateY(1px); }

/* ПАНЕЛЬ ВЫБОРА. Компонент позиционирует её absolute (под /katalog/ это верно);
   на главной она раскрыта по умолчанию, поэтому кладём в поток — иначе панель
   висит поверх ноты и её левый бордюр торчит (регресс, найденный аудитом
   04.07.2026 на старом блоке; здесь тот же приём, но без !important:
   специфичности 0,2,0 против 0,1,0 достаточно). */
.ok-podbor .okna-qp__panel{
  position:static;
  margin:16px 0 0;
  padding:16px 0 0;
  max-height:none;
  border:0;
  border-top:1px solid var(--ok-border);
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.ok-podbor .okna-qp__panel h4{
  margin:0 0 10px;
  font-size:14px;
  font-weight:var(--ok-fw-black);
  color:var(--ok-ink);
}
.ok-podbor .okna-qp__chips{ gap:8px; }
.ok-podbor .okna-qp__chip{
  padding:9px 14px;
  border:1px solid var(--ok-border-input);
  border-radius:var(--ok-radius-pill);
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
}
.ok-podbor .okna-qp__chip:hover,
.ok-podbor .okna-qp__chip:focus-visible{ border-color:var(--ok-blue); color:var(--ok-blue); }
/* B1/B2 — нажатие чипа страны/марки. */
.ok-podbor .okna-qp__chip:active{ transform:translateY(1px); }
.ok-podbor .okna-qp__chip.is-sel{
  background:var(--ok-blue);
  border-color:var(--ok-blue);
  color:var(--ok-on-dark);
}
.ok-podbor .okna-qp__cnt{
  padding:2px 8px;
  background:var(--ok-tint-blue);
  color:var(--ok-ink);
  font-size:11.5px;
  font-weight:var(--ok-fw-black);
}

/* ── НОТА ─────────────────────────────────────────────────────────────────── */
.ok-podbor__note{
  margin-top:14px;
  padding:14px 18px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-left:3px solid var(--ok-blue);
  border-radius:var(--ok-radius-dropdown);          /* 10px */
  font-size:14px;
  line-height:1.5;
  color:var(--ok-text-2);
}

/* ── RESPONSIVE [PODBOR] ──────────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-podbor{ padding-block:0 var(--ok-section-space-tablet); }
}

/* SM 600 — мобильное дерево мастера. Компонент сам стакает поля на ≤979px
   (его собственный media-запрос, не канон — трогать нельзя, это mu-plugin);
   здесь только вид: высота, радиусы, фон секции. */
@media (max-width:600px){
  html body .ok-podbor{
    padding-block:var(--ok-section-space-mobile) 48px;  /* 44 / 48 */
    background:var(--ok-section-b);                     /* #f5f8fd — фон мобильного мастера */
  }
  /* Красная планка слева вместо подчёркивания (приём мобильного мастера).
     ✔ HC-14: строка кегля снята — канон 23px в ok-legacy-compat.css §[3]. */
  .ok-podbor .ok-podbor__title{
    display:flex;
    align-items:center;
    gap:11px;
    line-height:var(--ok-lh-h2-mobile);
    padding-bottom:0;
    margin-bottom:8px;
    background-image:none;
  }
  .ok-podbor .ok-podbor__title::before{
    content:"";
    flex:0 0 auto;
    width:4px;
    height:24px;
    border-radius:2px;
    background:var(--ok-red);
  }
  .ok-podbor .ok-podbor__sub{ max-width:none; margin-bottom:16px; font-size:14px; }

  .ok-podbor .okna-qp{
    padding:16px;
    border:0;                                           /* рамку карточки убрали — держит тень (не «черновик») */
    border-radius:var(--ok-radius-picker);              /* 18px */
    box-shadow:var(--ok-shadow-picker);                 /* 0 14px 36px rgba(20,40,80,.08) */
  }
  .ok-podbor .okna-qp__row{ gap:10px; }
  .ok-podbor .okna-qp__lead{ display:none; }            /* в мобильном мастере лида нет */
  .ok-podbor .okna-qp .okna-qp__field{
    min-height:58px;
    padding:0 12px;
    border-radius:14px;                                 /* замер мастера */
    font-size:var(--ok-fs-body);                        /* 16px — против зума iOS */
    border:1.5px solid var(--ok-border-input) !important; /* против !important компонента */
  }
  /* ★ ЦВЕТ КНОПКИ — ЧУЖОЙ !important + ВЫСОКАЯ СПЕЦИФИЧНОСТЬ. design.css:164-166
     держит `a.okna-btn:not(.okna-btn--hero):not(.secondary){background:var(--blue)
     !important}`. `:not()` считается по своему аргументу, поэтому у правила
     (0,3,1) — оно перебивает даже `html body .ok-…` (0,2,2). Замер это и поймал:
     геометрия (radius 14) применялась, а цвет оставался голубым. Добираем
     специфичность классами самого элемента → (0,3,3) и встречный !important.
     В мастере мобильная кнопка тёмно-синяя (#123d87), а не голубая. */
  html body .ok-podbor a.okna-btn.okna-qp__go{
    min-height:56px;
    height:56px;
    flex:1 1 100%;
    align-self:auto;
    margin-top:4px;
    border-radius:14px;
    background:var(--ok-ink) !important;                /* против !important design.css:166 */
    border-color:var(--ok-ink) !important;
    color:var(--ok-on-dark) !important;
    font-size:var(--ok-fs-body);
  }
  html body .ok-podbor a.okna-btn.okna-qp__go:hover,
  html body .ok-podbor a.okna-btn.okna-qp__go:focus-visible{
    background:var(--ok-blue-hover) !important;          /* против !important design.css:170 */
    border-color:var(--ok-blue-hover) !important;
    color:var(--ok-on-dark) !important;
  }
  /* ★ Раскрытие панели подбора — 1:1 со стилем КОМПОНЕНТА каталога (mu-plugins/okna-tree-nav.php),
     единый путь (требование владельца). На телефоне отключаем .ok-podbor-переопределения
     (безрамочная линия + синие жирные крупные чипы) и возвращаем вид компонента, как на
     каталоге/марках: панель = белая карточка (border/radius14/padding, ограничена со скроллом),
     чипы = белые, border #dbe4f0, ТЁМНЫЙ текст 13px обычного веса, счётчик синий на #eef3fc. */
  .ok-podbor .okna-qp__panel{
    position:static; left:auto; right:auto; top:auto; width:100%;
    margin:8px 0 4px; padding:16px 18px;
    background:#fff; border:1px solid #e8ecf2; border-radius:14px;
    box-shadow:0 10px 28px rgba(20,30,55,.12);
    max-height:52vh; overflow-y:auto;
  }
  .ok-podbor .okna-qp__panel h4{ margin:0 0 10px; font-size:14px; font-weight:700; color:#123d87; }
  .ok-podbor .okna-qp__chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .ok-podbor .okna-qp__chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 13px; border:1px solid #dbe4f0; border-radius:999px;
    background:#fff; font-size:13px; font-weight:400; color:#1c2433;
  }
  .ok-podbor .okna-qp__chip:hover,
  .ok-podbor .okna-qp__chip:focus-visible{ border-color:#1c5bd6; color:#1c5bd6; }
  .ok-podbor .okna-qp__chip.is-sel{ background:#1c5bd6; border-color:#1c5bd6; color:#fff; }
  .ok-podbor .okna-qp__cnt{
    padding:1px 7px; background:#eef3fc; color:#1c5bd6;
    border-radius:999px; font-size:11px; font-weight:700;
  }
  .ok-podbor .okna-qp__chip.is-sel .okna-qp__cnt{ background:rgba(255,255,255,.25); color:#fff; }
  .ok-podbor__note{ margin-top:14px; padding:14px 16px; }
}