/* ============================================================================
   ok-header.css — HOME-SHELL-V2 · пакеты HC-03 «HEADER DESKTOP» + HC-04 «HEADER MOBILE»
   ----------------------------------------------------------------------------
   Слой представления НОВОЙ глобальной шапки (template-parts/global/header/*).
   Спека: 09_HEADER_IMPLEMENTATION_SPEC + 06_GLOBAL_LAYOUT_CONTRACT + 14_CSS_JS.

   ★ HC-04 добавил секции [12] БУРГЕР, [13] DRAWER и переписал блок ≤768 в [14]:
     до него ниже 768 у новой шапки не было бургера вовсе, а мега-панель держала
     ширину 516px и уводила документ вправо (замер: overflow +141px на 375).
     Мобильные числа — тот же живой замер мастера, режим «Мобайл», vp 390 и 375.

   ★ ВСЕ ЧИСЛА — ЖИВОЙ ЗАМЕР МАСТЕРА, НЕ ГЛАЗОМЕР.
     headless Chrome 150, --allow-file-access-from-files,
     file://…/«01 Шапка и бургер.dc.html», viewport 1440×900, DSF 1.

     NORMAL (scrollY = 0)
       sticky-обёртка ............ h 126 · position sticky · top 0 · z-index 100
       топбар .................... h 41  = контент 40 + border-bottom 1px #eef1f6
                                   bg #fff · overflow hidden · max-height 60
                                   transition max-height .25s
       топбар-контейнер .......... max-width 1280 · padding 0 32 · h 40 · gap 24
       строка .................... h 85  = контент 84 + border-bottom 1px #e8ecf2
       строка-контейнер .......... max-width 1280 · padding 0 32 · h 84 · gap 14
                                   transition height .25s
       лого-img .................. h 52 (w 80.8) · gap до текста 12
       лого-текст ................ 16px/800 · ls .32px (=.02em) · lh 16.32 (=1.02) · #123d87
       кнопка «Каталог» .......... h 42 · bg #1c5bd6 · #fff · pad 0 18 · gap 9
                                   font 15/700 · иконок в кнопке: 1
       нав ....................... gap 2 · margin-left 6 · 6 пунктов
       пункт нава ................ pad 9 10 · 14.5px/600 · #1d2433 · radius 4 · gap 5
       корзина ................... 42×42 · radius 4 · бейдж 16×16 r999 #e0223a 10.5/800
       CTA «Запросить цену» ...... h 42 · bg #1c5bd6 · #fff · radius 4 · pad 0 22 · 15/700
       город ..................... 13.5px/600 #526173 · gap 7 · pad 5 0 · strong 800 #123d87
       контакты .................. gap 26 · телефон 14/700 #123d87 gap 8 · почта 13.5/600 #526173

     COMPACT (scrollY = 600)
       топбар .................... max-height 0 (визуально h 1 — остаётся border)
       строка .................... h 61 (контент 60) · тень 0 10px 30px rgba(10,20,40,.14)
       лого-img .................. h 38
       кнопки .................... h 36 · font-size 14
       телефон в строке .......... display inline-flex · 15px/800 #123d87
       итоговая высота шапки ..... 62

   ⚠️ РАСХОЖДЕНИЯ С ТЕКСТОМ ПАКЕТА — все зафиксированы в отчёте HC-03:
     1. Кнопка «Каталог». Пакет: «контурная, БЕЗ иконки». Замер мастера: ЗАЛИВКА
        #1c5bd6 / текст #fff / иконка-сетка есть. Гайд §5 (строка «Шапка Каталог»)
        и 07_DESIGN_TOKEN_REGISTRY тоже дают ЗАЛИВКУ #1c5bd6/#fff. Реализовано по
        мастеру+гайду (заливка, иконка из настроек меню), контурный вид оставлен
        готовым модификатором `.ok-cat-btn--outline` — переключается одним значением.
     2. Радиус той же кнопки. Мастер: 8px. Гайд §5 и §8 («синие компактные кнопки — 4»)
        и 07: 4px. Взят 4px (--ok-radius-btn) — совпадает с соседней CTA и с пакетом.
        Мастер сам себе противоречит: «Запросить цену» рядом — r4.
     3. Поиск. В мастере в шапке его нет, в спеке 09 он есть явным пунктом и на
        сайте уже работает (фикс P1 аудита M-0). Оставлен — удаление было бы
        функциональной регрессией.

   ЦВЕТА: 0 новых #hex — только токены --ok-* (ok-tokens.css). Соответствия:
     #eef1f6 → --ok-bg · #e8ecf2 → --ok-border · #fff → --ok-section-a/--ok-on-dark
     #526173 → --ok-text-2 · #8a94a6 → --ok-text-muted · #123d87 → --ok-ink
     #1d2433 → --ok-text · #1c5bd6 → --ok-blue · #1448aa → --ok-blue-hover
     #e0223a → --ok-red · #f5f8fd → --ok-section-b · тёмная панель → --ok-dark

   БРЕЙКПОИНТЫ: канон 1024 / 768 / 600 / 480. Единственное «не канон» число —
   782px в правиле admin-bar: это КОНСТАНТА WordPress (высота бара 32→46), а не
   дизайн-брейкпоинт; иначе шапка уезжает под панель админа.

   ЗАВИСИМОСТИ ENQUEUE: ok-tokens → ok-foundation → ok-layout → ok-header.
   Скоуп: всё под `.ok-header` (плюс несколько правил `body.okna-scrolled .ok-header …`
   для компакта). В FORBID-зоны (услуга, каталог, футер) не протекает: ни одного
   глобального селектора без префикса шапки.
   ============================================================================ */


/* ═══ [0] КОРЕНЬ И STICKY ═══════════════════════════════════════════════════ */

/* Эталон: position sticky / top 0 / z-index 100. Правило живёт ЗДЕСЬ, а не в
   glavnaya.css:1583 (старое — на .okna-header, к новой разметке не относится). */
.ok-header{
  position:sticky;
  top:0;
  z-index:var(--ok-z-header);
  background:var(--ok-section-a);
  /* TT1 задаёт #masthead/header паддинги — гасим на своём классе (специфичность,
     не порядок enqueue: родительский style.css грузится ПОСЛЕ наших листов). */
  margin:0;
  padding:0;
}

/* Админ-бар WP фиксирован сверху: без сдвига шапка уезжает под него (запрет пакета
   «не ломать admin-bar»). 32/46 и рубеж 782 — константы WP, не дизайн-брейкпоинт. */
body.admin-bar .ok-header{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .ok-header{ top:46px; }
}

/* ═══ ⚠️ ДВА КАПКАНА КАСКАДА — ЗАМЕРЕНЫ ЖИВЬЁМ НА СТЕНДЕ, НЕ ТЕОРИЯ ═══════════
   [1] РОДИТЕЛЬСКАЯ ТЕМА TT1 красит ЛЮБУЮ <button> цепочкой
         button:not(:hover):not(:active):not(.has-background){ background-color:… }
         button:not(:hover):not(:active):not(.has-text-color){ color:… }
       `:not()` весит как своё содержимое, поэтому это (0,3,1) — обычное
       `.ok-header .ok-cat-btn` (0,2,0) ПРОИГРЫВАЕТ. Первый замер стенда так и
       показал: фон кнопок был #28303d, текст #d1e4dd (палитра TT1).
       ЛЕЧЕНИЕ БЕЗ !important — тем же приёмом: два `:not()` поднимают наши
       правила до (0,4,0) и выигрывают у (0,3,1) по числу классов. Заодно это
       честный опт-аут: кнопка с классами блочного редактора красится редактором.
   [2] НАШ ЖЕ ok-foundation.css задаёт `.ok-scope a{color}`, `.ok-scope img{height:auto}`
       — это (0,1,1) и оно перебивает одноклассовые правила шапки. Замер: логотип
       имел height 0, телефоны/пункты меню были синими. ЛЕЧЕНИЕ: все правила для
       a/img/input/button внутри шапки пишутся с префиксом `.ok-header …` (0,2,0).
   Оба лечения — специфичностью, не порядком enqueue и не !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Базовая гигиена внутри шапки. */
.ok-header button{
  margin:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:normal;
  letter-spacing:normal;
  text-transform:none;
  cursor:pointer;
  border-radius:0;
  box-shadow:none;
}
.ok-header a{ text-decoration:none; }
.ok-header img{ display:block; }
.ok-header ul{ list-style:none; margin:0; padding:0; }


/* ═══ [1] ТОПБАР (40px) ════════════════════════════════════════════════════ */

.ok-topbar{
  position:relative;
  z-index:3;                                   /* выше мега-панели и скрима */
  background:var(--ok-section-a);
  border-bottom:1px solid var(--ok-bg);        /* эталон #eef1f6 */
  overflow:hidden;
  max-height:60px;                             /* эталон: запас над контентом 40 */
  transition:max-height .25s ease;             /* гайд §10 — сжатие шапки .25s */
}
.ok-topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:var(--ok-header-topbar);              /* 40px */
}

/* — Город. `.okna-city` — хук geo-engine.js; его же geo.css задаёт цвет/паддинг
     через !important, поэтому здесь единственные два !important во всём файле:
     без них значения эталона (цвет --ok-text-2 и padding 5px 0) недостижимы. — */
.ok-header .ok-city{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 0 !important;                    /* перебивает geo.css .okna-city{padding:2px 0 !important} */
  color:var(--ok-text-2) !important;           /* перебивает geo.css .okna-city{color:#5b6574 !important} */
  font-size:13.5px;
  font-weight:var(--ok-fw-semibold);
  line-height:1.2;
  white-space:nowrap;
  min-width:0;
}
.ok-header .ok-city__ic{
  display:inline-flex;
  flex:0 0 auto;
  color:var(--ok-blue);                        /* эталон: обводка пина #1c5bd6 */
}
.ok-header .ok-city__ic svg{ display:block; }
.ok-header .ok-city__lab{
  color:var(--ok-text-muted);
  font-weight:var(--ok-fw-regular);
}
.ok-header .ok-city strong{
  color:var(--ok-ink);
  font-weight:var(--ok-fw-black);
}
.ok-header .ok-city:hover{ color:var(--ok-blue) !important; }
.ok-header .ok-city:hover strong{ color:var(--ok-blue); }

/* Каретка ▾ — свой класс: у легаси `.okna-caret` (glavnaya.css/geo.css) другой кегль. */
.ok-header .ok-caret{
  color:var(--ok-text-muted);
  font-size:10px;
  line-height:1;
  transition:transform .18s ease;
}

/* — Контакты справа. — */
.ok-topbar__contacts{
  display:flex;
  align-items:center;
  gap:26px;
  min-width:0;
}
/* Префикс .ok-header обязателен: иначе `.ok-scope a{color:var(--ok-blue)}` из
   ok-foundation.css (0,1,1) красит телефон и почту синим (капкан [2] выше). */
.ok-header .ok-phone,
.ok-header .ok-mail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.ok-header .ok-phone{
  color:var(--ok-ink);
  font-size:14px;
  font-weight:var(--ok-fw-bold);
}
.ok-header .ok-mail{
  color:var(--ok-text-2);
  font-size:13.5px;
  font-weight:var(--ok-fw-semibold);
}
.ok-header .ok-phone:hover,
.ok-header .ok-mail:hover{ color:var(--ok-blue); }
.ok-phone__ic,
.ok-mail__ic{
  display:inline-flex;
  flex:0 0 auto;
  color:var(--ok-blue);                        /* эталон: обводка иконок синяя */
}
/* Номера — моноширинные цифры (спека 09: tabular-nums), чтобы строка не «дышала». */
.ok-phone__num,
.ok-hdr-phone__num{ font-variant-numeric:tabular-nums; }


/* ═══ [2] ОСНОВНАЯ СТРОКА (84px) ═══════════════════════════════════════════ */

.ok-header__row{
  position:relative;
  z-index:3;
  background:var(--ok-section-a);
  border-bottom:1px solid var(--ok-border);    /* эталон #e8ecf2 */
}
.ok-header__inner{
  display:flex;
  align-items:center;
  gap:14px;
  height:var(--ok-header-height);              /* 84px */
  transition:height .25s ease;
}
.ok-header__spacer{ flex:1 1 auto; min-width:0; }


/* ═══ [3] ЛОГОТИП ══════════════════════════════════════════════════════════ */

.ok-header .ok-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
/* Префикс обязателен: `.ok-scope img{height:auto}` (0,1,1) иначе схлопывает
   логотип в 0px — ровно это и показал первый замер стенда (капкан [2]). */
.ok-header .ok-brand__mark{
  height:var(--ok-header-logo);                /* 52px */
  width:auto;
  transition:height .25s ease;
}
.ok-brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.02;                            /* эталон: lh 16.32 при кегле 16 */
}
.ok-header .ok-brand__text span{
  font-size:16px;
  font-weight:var(--ok-fw-black);
  letter-spacing:.02em;                        /* эталон: ls .32px */
  color:var(--ok-brand-ink);                   /* MOBM-01: макет #01 = #00307b (кузов), не интерфейсный #123d87 */
  text-transform:uppercase;
}


/* ═══ [4] КНОПКА «КАТАЛОГ» (триггер мегаменю) ══════════════════════════════ */

/* `:not(.has-background):not(.has-text-color)` — обязательный противовес TT1
   (капкан [1]): без них фон кнопки становится #28303d, текст #d1e4dd. */
.ok-header .ok-cat-btn:not(.has-background):not(.has-text-color){
  display:inline-flex;
  align-items:center;
  gap:9px;                                     /* эталон: зазор иконка↔текст */
  flex:0 0 auto;
  height:var(--ok-control-h-header);           /* 42px */
  padding:0 18px;
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  border-radius:var(--ok-radius-btn);          /* 4px — гайд §5/§8, 07 (мастер 8, см. шапку файла) */
  font-size:15px;
  font-weight:var(--ok-fw-bold);
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, height .25s ease, font-size .25s ease;
}
/* На :hover/:active правила TT1 не действуют вовсе (они сами их исключают), поэтому
   здесь противовес не нужен. */
.ok-header .ok-cat-btn:hover{ background:var(--ok-blue-hover); color:var(--ok-on-dark); }
.ok-header .ok-cat-btn:active{ transform:translateY(1px); }
/* КНОПКА-ШАПКА (микро-задача 08.08): КАПКАН TT1 для :focus. twentytwentyone/style.css задаёт
   `.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){ background:rgba(255,255,255,.9) }`
   — а .ok-cat-btn это <a>, и при фокусе/нажатии фон кнопки белеет («кромка становится белой»).
   Базовый противовес (:281, :not(.has-background):not(.has-text-color)) держит только ПОКОЙ, для :focus
   его не было. Локируем фирменный фон в :focus/:active тем же противовесом; :hover ниже (тем же весом,
   порядком) держит тон hover при наведении-в-фокусе. Спецификность (0,5,0) > TT1 (0,4,1). Новых !important нет.
   Фокус-индикатор клавиатуры (синее кольцо) даёт .ok-header :focus-visible (ok-header.css:1466). */
.ok-header .ok-cat-btn:focus:not(.has-background):not(.has-text-color),
.ok-header .ok-cat-btn:active:not(.has-background):not(.has-text-color){ background:var(--ok-blue); color:var(--ok-on-dark); }
.ok-header .ok-cat-btn:hover:not(.has-background):not(.has-text-color){ background:var(--ok-blue-hover); color:var(--ok-on-dark); }
/* Открытая панель — как в эталоне: кнопка уходит в тон hover (catBg #1448aa). */
.ok-header.is-mega-open .ok-cat-btn:not(.has-background){ background:var(--ok-blue-hover); }
.ok-cat-btn__ic{ display:inline-flex; flex:0 0 auto; }
.ok-cat-btn__ic svg{ display:block; }
.ok-header .ok-cat-btn .ok-caret{ color:currentColor; opacity:.75; }
.ok-header.is-mega-open .ok-cat-btn .ok-caret{ transform:rotate(180deg); }

/* Контурный вариант — на случай, если владелец утвердит формулировку пакета
   («контурная, border 2px, без иконки»). Включается настройкой триггера
   (okna_menu_trigger_get → style ≠ filled) + иконка «none». Один переключатель. */
.ok-header .ok-cat-btn--outline:not(.has-background):not(.has-text-color){
  background:transparent;
  color:var(--ok-blue);
  box-shadow:inset 0 0 0 2px var(--ok-blue);   /* border 2px без сдвига геометрии */
}
.ok-header .ok-cat-btn--outline:hover{
  background:var(--ok-tint-blue);
  color:var(--ok-blue-hover);
  box-shadow:inset 0 0 0 2px var(--ok-blue-hover);
}


/* ═══ [5] НАВИГАЦИЯ И ДРОПДАУНЫ ════════════════════════════════════════════ */

/* `flex:0 0 auto` — НЕ косметика, а защита от наложения. Замер компакта показал:
   при flex-shrink по умолчанию нав сжимался с 527 до 400px, а его пункты
   (white-space:nowrap) вылезали за свою коробку и наезжали на телефон. Теперь
   нав не ужимается никогда, а место освобождается управляемо — по лестнице
   приоритетов в блоках компакта и респонсива ниже. */
.ok-nav{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:2px;                                     /* эталон */
  margin-left:6px;                             /* эталон */
}
.ok-nav__item{
  position:relative;
  display:inline-flex;
  align-items:center;
  border-radius:var(--ok-radius-btn);
}
/* Префикс .ok-header — против `.ok-scope a{color:var(--ok-blue)}` (капкан [2]). */
.ok-header .ok-nav__link{
  padding:9px 10px;                            /* эталон */
  color:var(--ok-text);
  font-size:var(--ok-fs-nav);                  /* 14.5px */
  font-weight:var(--ok-fw-semibold);
  white-space:nowrap;
}
.ok-header .ok-nav__link:hover,
.ok-header .ok-nav__item--drop:hover .ok-nav__link,
.ok-header .ok-nav__item--drop.is-open .ok-nav__link{ color:var(--ok-blue); }

/* Пункт с подменю: ссылка ведёт в раздел, каретка-кнопка раскрывает список.
   Суммарные паддинги совпадают с эталоном (9/10 по краям, 5 между текстом и ▾). */
.ok-header .ok-nav__item--drop .ok-nav__link{ padding-right:0; }
.ok-header .ok-nav__caret:not(.has-background):not(.has-text-color){
  display:inline-flex;
  align-items:center;
  padding:9px 10px 9px 5px;
  background:transparent;
  color:inherit;
}
.ok-header .ok-nav__caret:focus-visible{ outline:2px solid var(--ok-blue); outline-offset:-2px; border-radius:var(--ok-radius-btn); }
.ok-header .ok-nav__item--drop.is-open .ok-caret{ transform:rotate(180deg); }

/* Выпадающее подменю — геометрия и палитра эталона. */
.ok-drop{
  position:absolute;
  top:100%;
  left:0;
  z-index:4;
  min-width:270px;                             /* эталон: 270 (организации) – 290 (услуги) */
  max-width:340px;
  max-height:min(70vh, 560px);
  overflow-y:auto;
  padding:8px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-dropdown);     /* 10px */
  box-shadow:var(--ok-shadow-dropdown);        /* 0 14px 40px rgba(20,40,80,.14) */
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
/* Открыто — по КЛИКУ (класс ставит ok-header.js). Ключевое правило: без .is-open
   подменю не показывается ничем, поэтому «hover-only» невозможен by design. */
.ok-nav__item--drop.is-open > .ok-drop{
  opacity:1;
  visibility:visible;
  transform:none;
}
/* Hover — ТОЛЬКО усиление и ТОЛЬКО на точном указателе (мышь). На тач-устройствах
   правило не применяется вовсе, там работает тап по каретке. */
@media (hover:hover) and (pointer:fine){
  .ok-nav__item--drop:hover > .ok-drop{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  /* Мост под пунктом: курсор доходит до панели, меню не схлопывается. */
  .ok-nav__item--drop > .ok-drop::before{
    content:"";
    position:absolute;
    left:0; right:0; top:-10px;
    height:10px;
  }
  /* Закрыли кликом, курсор ещё над пунктом: без этого правила :hover сразу же
     показал бы панель обратно, и aria-expanded="false" разошёлся бы с картинкой.
     Метку ok-nohover ставит и снимает ok-header.js (снимает по mouseleave). */
  .ok-nav__item--drop.ok-nohover:hover > .ok-drop{
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
  }
}
.ok-header .ok-drop__link{
  display:block;
  padding:10px 14px;
  border-radius:var(--ok-radius-cta);          /* 8px */
  color:var(--ok-text);
  font-size:var(--ok-fs-nav);
  font-weight:var(--ok-fw-semibold);
}
.ok-header .ok-drop__link:hover,
.ok-header .ok-drop__link:focus-visible{
  background:var(--ok-section-b);
  color:var(--ok-ink);
}
.ok-header .ok-drop__all{
  display:block;
  margin-top:2px;
  padding:10px 14px;
  border-top:1px solid var(--ok-bg);
  color:var(--ok-blue);
  font-size:14px;
  font-weight:var(--ok-fw-bold);
}
.ok-header .ok-drop__all:hover{ color:var(--ok-blue-hover); }


/* ═══ [6] ТЕЛЕФОН В СТРОКЕ (только компакт) ════════════════════════════════ */
/* Эталон: display none → inline-flex при компакте. Это НЕ второй телефон:
   тот же первый номер из okna_phones_all(), показывается взамен свёрнутого топбара. */

.ok-header .ok-hdr-phone{
  display:none;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  color:var(--ok-ink);
  font-size:15px;
  font-weight:var(--ok-fw-black);
  white-space:nowrap;
}
.ok-hdr-phone__ic{ display:inline-flex; color:var(--ok-blue); }
.ok-header .ok-hdr-phone:hover{ color:var(--ok-blue); }


/* ═══ [7] ПОИСК ПО САЙТУ ═══════════════════════════════════════════════════ */
/* Не из мастера — фича сайта (аудит M-0 P1) и явный пункт спеки 09. Геометрия
   подогнана под соседей: квадрат 42×42, как корзина. */

.ok-search{ position:relative; flex:0 0 auto; }
.ok-header .ok-search__btn:not(.has-background):not(.has-text-color){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ok-control-h-header);
  height:var(--ok-control-h-header);
  padding:0;
  border-radius:var(--ok-radius-btn);
  background:transparent;
  color:var(--ok-text-2);
  transition:background .2s ease, color .2s ease;
}
.ok-header .ok-search__btn:hover,
.ok-search.is-open .ok-search__btn{
  background:var(--ok-section-b);
  color:var(--ok-blue);
}
.ok-search__panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:4;
  padding:10px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-dropdown);
  box-shadow:var(--ok-shadow-dropdown);
}
.ok-search__panel[hidden]{ display:none; }
.ok-search__form{ display:flex; gap:8px; align-items:center; }
.ok-header .ok-search__input{
  width:280px;
  max-width:52vw;
  height:var(--ok-control-h-header);
  padding:0 14px;
  background:var(--ok-section-a);
  border:var(--ok-input-border-w) solid var(--ok-border-input);
  border-radius:var(--ok-radius-search,10px); /* Волна 1-бис: роль поля поиска (было --ok-radius-cta 8px = роль кнопки; норма §1.2 поиск=10) */
  color:var(--ok-text);
  font-size:var(--ok-fs-body);                 /* 16px — гайд §6, иначе iOS зумит */
  outline:none;
}
.ok-header .ok-search__input:focus{ border-color:var(--ok-blue); }
.ok-header .ok-search__go:not(.has-background):not(.has-text-color){
  height:var(--ok-control-h-header);
  padding:0 16px;
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  border-radius:var(--ok-radius-btn);
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* Волна 3 §6.5: кнопка поиска была системным шрифтом (нет font-family → TT1 button{system}) → Manrope */
  white-space:nowrap;
}
.ok-header .ok-search__go:hover{ background:var(--ok-blue-hover); }


/* ═══ [8] КОРЗИНА ══════════════════════════════════════════════════════════ */
/* Разметку даёт inc/cart.php, счётчик перерисовывает assets/cart.js. Здесь —
   только приведение к эталону поверх базовых правил design.css (0,1,0 → 0,2,0). */

.ok-header .okna-header-cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:var(--ok-control-h-header);            /* 42×42 — эталон */
  height:var(--ok-control-h-header);
  border-radius:var(--ok-radius-btn);
  color:var(--ok-text-2);
  background:transparent;
  transition:background .2s ease, color .2s ease;
}
.ok-header .okna-header-cart:hover{
  background:var(--ok-section-b);              /* эталон: hover #f5f8fd */
  color:var(--ok-blue);
}
.ok-header .okna-header-cart svg{ display:block; }
.ok-header .okna-cart-count{
  position:absolute;
  top:2px;
  right:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-red);
  color:var(--ok-on-dark);
  font-size:10.5px;
  font-weight:var(--ok-fw-black);
  line-height:1;
}
.ok-header .okna-cart-count.is-empty{ display:none; }


/* ═══ [9] CTA «ЗАПРОСИТЬ ЦЕНУ» ═════════════════════════════════════════════ */

/* CTA — это <button> (action=modal) ЛИБО <a> (action=link): противовес TT1 нужен
   для первого случая, префикс .ok-header — для второго. */
.ok-header .ok-cta:not(.has-background):not(.has-text-color){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  height:var(--ok-control-h-header);           /* 42px */
  padding:0 22px;                              /* эталон */
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  border-radius:var(--ok-radius-btn);          /* 4px — гайд §5 */
  font-size:15px;
  font-weight:var(--ok-fw-bold);
  white-space:nowrap;
  transition:background .2s ease, height .25s ease, font-size .25s ease;
}
.ok-header .ok-cta:hover{ background:var(--ok-blue-hover); color:var(--ok-on-dark); }
.ok-header .ok-cta:active{ transform:translateY(1px); }


/* ═══ [10] МЕГАМЕНЮ КАТАЛОГА ═══════════════════════════════════════════════ */

/* Полоса во всю ширину под строкой шапки (эталон: absolute / top 100% / left 0 /
   right 0). Внутри — общий контейнер 1280/32 и вертикальные 18/22 из эталона. */
.ok-header__mega{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:2;
  background:var(--ok-dark);
  box-shadow:var(--ok-shadow-dropdown);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.ok-header.is-mega-open .ok-header__mega{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* ★★★ HC-16 · РЕЛИЗ-БЛОКЕР: НЕВИДИМЫЙ ПЕРЕХВАТЧИК КЛИКОВ (нашёл HC-17) ★★★
   ЧТО БЫЛО. Закрытая панель гасится ДВУМЯ свойствами (выше): `opacity:0` и
   `visibility:hidden`. Из этой пары от хит-теста спасает ТОЛЬКО visibility:
   `opacity:0` делает элемент прозрачным, но полностью кликабельным. А ниже, в
   блоке «ГАШЕНИЕ ЛЕГАСИ», вложенной `.okna-mega-panel` возвращается
   `visibility:visible` — и по правилам каскада visibility это ОТМЕНЯЕТ
   унаследованное `hidden` у потомка. В итоге при ЗАКРЫТОЙ шапке над страницей
   висел прозрачный, но живой для мыши слой 1425×599 (y = 150…749).

   ЦЕНА ДЕФЕКТА (замер сеткой elementFromPoint, HC-17): перехватывалось 59%
   площади экрана на 1440, 69% на 1280, 72% на 1024 — на ВСЕХ страницах. То есть
   на десктопе при флаге 1 не работали «В корзину», FAQ, кейсы, табы марок и всё
   прочее в верхних ~600px. Ниже 1072 мега уходит в display:none — мобайл цел.

   ★ ПОЧЕМУ ЭТО НЕ ЛОВИЛОСЬ ПЯТЬ ВОЛН. Дефект невидим глазом и не виден на
     скриншоте: геометрия, цвета и высоты у страницы идеальные. Он ловится
     только замером хит-теста — поэтому в vr.mjs заведён постоянный зонд
     «перехват кликов» (доля площади экрана, отданная невидимому слою).

   ПОЧЕМУ pointer-events, А НЕ display:none — `display:none` убил бы transition
   раскрытия (панель появлялась бы рывком). `pointer-events` влияет на хит-тест,
   но НЕ на раскладку и отрисовку, поэтому геометрия матрицы HC-16 не меняется
   ни на пиксель. Наследуется потомками: `pointer-events` у `.okna-mm-*` не
   переопределяет никто (проверено по всем листам темы; единственное вхождение
   рядом — glavnaya.css:1953 на `::after` СТАРОЙ шапки `.okna-header`). */
.ok-header:not(.is-mega-open) .ok-header__mega{ pointer-events:none; }

.ok-mega__inner{ padding-block:18px 22px; }

/* ГАШЕНИЕ ЛЕГАСИ. `.okna-mega-panel` из glavnaya.css несёт свою ширину 880px,
   абсолютное позиционирование, радиус 14, свой фон и padding 16 плюс скрытие
   opacity/visibility. В новой шапке панель — просто контент внутри нашей полосы,
   поэтому все эти свойства снимаются. Специфичность (0,2,0) > (0,1,0) — порядок
   enqueue значения не имеет. Внутренняя раскладка (.okna-mm-*) НЕ трогается:
   её держит assets/megamenu.css. */
/* ★ КОРЕНЬ HOVER-ONLY, найден замером: okna-child/style.css:68 объявляет
   `.okna-mega-panel{display:none}` и показывает панель ТОЛЬКО правилом
   `.okna-mega:hover .okna-mega-panel{display:flex}`. Без сброса display наша
   панель осталась бы невидимой при любом клике (первый прогон стенда: полоса
   мегаменю 40px пустоты). Поэтому display возвращается в поток здесь. */
.ok-header .okna-mega-panel,
.ok-header .okna-mega-panel.okna-cat-panel{
  display:block;
  position:static;
  width:auto;
  min-width:0;
  max-width:none;
  max-height:none;                             /* style.css:86 ставил 80vh + overflow:auto */
  overflow:visible;                            /* скролл — у колонки моделей (megamenu.css) */
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  opacity:1;
  visibility:visible;
  transform:none;
  transition:none;
  z-index:auto;
}
.ok-header .okna-mega-panel::before{ content:none; }   /* легаси hover-мост не нужен */

/* Скрим клика-вне (эталон: overlay position fixed / inset 0 / z-index 90 под
   sticky z-index 100). Внутри шапки собственный контекст наложения, поэтому
   z-index 1 — это «под панелью и строками, но над контентом страницы». */
.ok-header__scrim{
  position:fixed;
  inset:0;
  z-index:1;
}
.ok-header__scrim[hidden]{ display:none; }

/* Деградация: если разметка движка изменится и панель не вырежется — печатается
   исходный пункт меню целиком; тогда работают старые правила, а наш контейнер
   не мешает. */
.ok-mega-fallback{ display:contents; }


/* ═══ [11] КОМПАКТ (body.okna-scrolled) ════════════════════════════════════ */
/* Класс ставит существующий assets/header-sticky.js — ОДИН источник на весь сайт,
   своего слушателя скролла ok-header.js НЕ заводит (§17: no duplicate listeners).
   Пороги там с ГИСТЕРЕЗИСОМ: сжать при scrollY > 120, вернуть при scrollY < 40.
   У мастера один порог 80 — гистерезис строго лучше: у одиночного порога шапка
   моргает на границе, а это и есть тот самый «jump». Все переходы — .25s ease
   (гайд §10), поэтому смена состояния идёт плавной интерполяцией высоты,
   без мгновенного скачка вёрстки. */

/* ⚠️ Вес селекторов компакта должен быть ВЫШЕ базовых: у базовых кнопок стоит
   противовес TT1 из двух `:not()` — то есть (0,4,0). Поэтому здесь тот же приём
   плюс лишний класс: (0,5,0). Иначе высота 42 «переспорила» бы компактную 36. */
body.okna-scrolled .ok-topbar{ max-height:0; }
body.okna-scrolled .ok-header .ok-header__inner{ height:var(--ok-header-sticky-height); }  /* 84 → 60 */
body.okna-scrolled .ok-header .ok-brand__mark{ height:38px; }                              /* 52 → 38 */
body.okna-scrolled .ok-header .ok-cat-btn:not(.has-background):not(.has-text-color),
body.okna-scrolled .ok-header .ok-cta:not(.has-background):not(.has-text-color){ height:36px; font-size:14px; }
body.okna-scrolled .ok-header__row{ box-shadow:var(--ok-shadow-dropdown); }
body.okna-scrolled .ok-header .ok-hdr-phone{ display:inline-flex; }

/* ЛЕСТНИЦА ПРИОРИТЕТОВ В КОМПАКТЕ. В сжатой строке появляется телефон (+153px),
   и полный набор перестаёт помещаться в контейнер 1216. ЗАМЕР: сумма элементов
   компакта 1336 при доступных 1216. Сам эталон в этом состоянии тоже не влезает —
   его CTA вылезает за контейнер на 29px (замер 1440). Мы вместо переполнения
   убираем наименее нужное, сохраняя канон контейнера:
     1) поиск — наша добавка сверх мастера, возвращается прокруткой вверх;
     2) словесный знак логотипа — марка остаётся, бренд читается.
   Итог замера: 1141 < 1216 — влезает с запасом, наложений нет. */
body.okna-scrolled .ok-header .ok-search{ display:none; }
body.okna-scrolled .ok-header .ok-brand__text{ display:none; }


/* ═══ [12] БУРГЕР (HC-04) ══════════════════════════════════════════════════ */
/* ЗАМЕР МАСТЕРА (режим «Мобайл», vp 390 и 375): кнопка 44×44 · radius 10 ·
   три полосы 21×2 · gap 4.5 · цвет полос #1d2433 · нажатие — фон #eef3fc.
   На десктопе кнопки нет вовсе (display:none) — показывается только ниже 1072. */

.ok-header .ok-burger:not(.has-background):not(.has-text-color){
  display:none;                                /* ≤1071 включается в блоке респонсива */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4.5px;                                   /* эталон */
  flex:0 0 auto;
  width:44px;                                  /* эталон: тач-минимум 44 (гайд §6) */
  height:44px;
  padding:0;
  background:transparent;
  border-radius:var(--ok-radius-dropdown);     /* 10px — эталон */
}
.ok-burger__b{
  display:block;
  width:21px;                                  /* эталон */
  height:2px;
  border-radius:2px;
  background:var(--ok-text);                   /* эталон #1d2433 */
}
.ok-header .ok-burger:active{ background:var(--ok-tint-blue); }   /* эталон #eef3fc */


/* ═══ [13] МОБИЛЬНЫЙ DRAWER (HC-04) ════════════════════════════════════════ */
/* ЗАМЕР МАСТЕРА (vp 390 и 375 — цифры совпадают, панель фиксированной ширины):
     слой ......... inset 0 · z-index 80 (у нас --ok-z-modal 300, см. header-shell)
     скрим ........ rgba(10,15,26,.52) · okFade .2s
     панель ....... 326 · справа · вся высота · okSlide .22s
                    тень -16px 0 40px rgba(10,16,30,.25)
     шапка ........ h 65 · padding 10 8 10 16 · gap 8 · border-bottom 1px #eef1f6
     город ........ 110×36 · 13px/700 · pad 8 12 · r4 · bg #f5f8fd · рамка #e8ecf2
     «Назад» ...... 14px/700 #1c5bd6 · pad 8 6 · gap 8
     крестик ...... 44×44
     тело ......... overflow-y auto · padding 6 16 20
     строка ....... min-height 52 · разделитель 1px #eef1f6 · стрелка 17 #8a94a6
     «Каталог» .... 16px/800 #123d87 · прочие 15.5px/700 #1d2433
     CTA .......... 100% · h 48 · r4 · 15.5px/700
     телефон ...... min-height 44 · 16px/800 #123d87 · почта 14.5px/600 #1c5bd6
     заголовок ур.. 17px/800 #123d87 · padding 10 2 12
     чипы типов ... h 38 · pad 9 13 · 13px/600 · r999 · рамка #dfe5ee
     метка «Страны» 12px/800 UPPER · ls .06em · #8a94a6 · padding 16 2 6
     страны/марки . min-height 50 · 15.5px/700 · модели min-height 46 · 15px/600
   ЗАТЕМНЕНИЕ: rgba(10,15,26,.52) — это оверлей из семейства «modal;backdrop»
   реестра 07 (там .55 для модалок); у дровера мастер даёт .52. Новых #hex нет. */

.ok-drawer{
  position:fixed;
  inset:0;
  z-index:var(--ok-z-modal);                   /* 300: выше sticky-шапки (100), ниже модалок гео/CTA */
}
/* Атрибут hidden обязан побеждать display выше — иначе дровер виден всегда. */
.ok-drawer[hidden]{ display:none; }
/* Страховка от рассинхрона: выше 1071 дровера нет ни при каких условиях
   (бургер там скрыт, но состояние могло остаться после смены ориентации/ресайза). */
/* ★★ SHAPKA-01: 769 → 1072, И ЭТО НЕ КОСМЕТИКА.
 * Страховка обязана сниматься ровно там, где кончается мобильная раскладка.
 * Мобильная идёт до 1071 — то есть бургер виден до 1071. Оставь здесь 769, и в
 * полосе 769…1071 получилось бы худшее из возможного: бургер на месте, а дровер
 * скрыт этой страховкой — кнопка есть, меню не открывается.
 * Числа парные: 1071 и 1072, между ними зазора нет. */
@media (min-width:1072px){ .ok-drawer{ display:none; } }

/* ★ Снятие замка прокрутки выше границы живёт НИЖЕ, сразу за самим замком —
 *   специфичность у них равная, спор решает порядок. Разбор там же. */

/* ★ ГИГИЕНА КНОПОК ДРОВЕРА — ОБЯЗАТЕЛЬНА, И ВОТ ПОЧЕМУ.
   Дровер печатается СОСЕДОМ <header>, поэтому базовый сброс `.ok-header button`
   из секции [0] его не достаёт, и на кнопки падает голое правило TT1 (style.css:1652,
   вес (0,0,1)): padding var(--button--padding-*), своя рамка, радиус, шрифт.
   ЧЕМ ЭТО КОНЧИЛОСЬ В ПЕРВОЙ СБОРКЕ (замер): при `box-sizing:border-box` паддинги
   TT1 (30px по бокам) съели всю ширину кнопки поиска — width 44 стал меньше суммы
   паддингов, контент-бокс схлопнулся, и SVG-лупа отрисовалась шириной 0: на скрине
   был просто синий прямоугольник. Здесь тот же сброс, что у шапки. (0,1,1) > (0,0,1). */
.ok-drawer button{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:normal;
  letter-spacing:normal;
  text-transform:none;
  cursor:pointer;
  border-radius:0;
  box-shadow:none;
}
.ok-drawer a{ text-decoration:none; }
.ok-drawer svg{ display:block; flex:0 0 auto; }   /* иконка — не сжимаемый флекс-элемент */

.ok-drawer__scrim{
  position:absolute;
  inset:0;
  background:rgba(10,15,26,.52);               /* эталон */
  animation:okFade .2s ease;
}
.ok-drawer__panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  /* Эталон 326 фиксированно. calc — защита узких экранов (320): панель никогда
     не шире вьюпорта минус ручка скрима, поэтому «клик-вне» доступен всегда. */
  width:min(var(--ok-mobile-drawer-width), calc(100vw - 44px));
  background:var(--ok-section-a);
  box-shadow:-16px 0 40px rgba(10,16,30,.25);  /* эталон */
  animation:okSlide .22s ease;
  /* Вырез камеры/«домашняя полоса» — контент не под системным UI. */
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

/* — Шапка дровера: «Назад» ИЛИ город · распорка · крестик. — */
.ok-drawer__head{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:10px 8px 10px 16px;                  /* эталон */
  border-bottom:1px solid var(--ok-bg);        /* эталон #eef1f6 */
}
.ok-drawer__spacer{ flex:1 1 auto; }

/* ★ ПОЧЕМУ ГЕОМЕТРИЯ И ЦВЕТ РАЗВЕДЕНЫ ПО РАЗНЫМ ПРАВИЛАМ.
   Противовес TT1 из двух `:not()` поднимает вес до (0,4,0) — он НУЖЕН только там,
   где мы задаём background/color (родительская тема красит любую <button> цепочкой
   веса (0,3,1)). Но display/размеры TT1 не трогает, а вес (0,4,0) у базовой строки
   ЛОМАЛ бы всё остальное: замер первой сборки показал, что `[hidden]` на «Назад»
   (0,3,0) и модификаторы строк (0,2,0) проигрывали базе и не применялись —
   кнопка «Назад» висела на корневом уровне, а модели рисовались как страны.
   Поэтому: РАЗМЕРЫ — обычным весом, ЦВЕТ/ФОН — с противовесом. */

.ok-drawer .ok-drawer__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 6px;                             /* эталон */
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  border-radius:var(--ok-radius-btn);
}
.ok-drawer .ok-drawer__back:not(.has-background):not(.has-text-color){
  background:transparent;
  color:var(--ok-blue);                        /* эталон #1c5bd6 */
}
/* (0,3,0) > (0,2,0): на корневом уровне кнопки «Назад» нет. */
.ok-drawer .ok-drawer__back[hidden]{ display:none; }
.ok-drawer .ok-drawer__back:active{ background:var(--ok-tint-blue); }

.ok-drawer .ok-drawer__city{
  display:inline-flex;
  align-items:center;
  gap:7px;                                     /* эталон */
  min-height:36px;
  padding:8px 12px;                            /* эталон */
  box-shadow:inset 0 0 0 1px var(--ok-border); /* эталон: рамка 1px #e8ecf2 без сдвига геометрии */
  border-radius:var(--ok-radius-btn);          /* 4px — эталон */
  font-size:13px;
  font-weight:var(--ok-fw-bold);
  white-space:nowrap;
}
.ok-drawer .ok-drawer__city:not(.has-background):not(.has-text-color){
  background:var(--ok-section-b);              /* эталон #f5f8fd */
  color:var(--ok-text);
}
.ok-drawer .ok-drawer__city strong{ font-weight:var(--ok-fw-bold); }
/* ★ W1-P02 · ТАЧ-ЦЕЛЬ 44px У ГОРОДА В ШТОРКЕ.
   Замер до правки (375/600/768, тач-эмуляция): 112.4×36 — единственная цель шторки
   ниже канона 44 из четырнадцати. Поднять min-height нельзя: 36px — ЗАМЕР МАСТЕРА
   (эталон строки шапки шторки), и растягивание кнопки сдвинуло бы шапку шторки
   относительно макета ради одного элемента.
   Приём тот же, что HC-16 применил к городу и почте топбара: расширяем не элемент,
   а ЗОНУ НАЖАТИЯ — абсолютный псевдоэлемент 44px по высоте, отцентрованный по кнопке.
   `position:absolute` из потока выключен, раскладку не двигает; по ширине цель и так
   112px ≥ 44. Псевдоэлементы `.ok-drawer__city` свободны — проверено по файлу.
   Определение тач-цели пакета §5 п.6 прямо включает «псевдоэлементы-расширители». */
.ok-drawer .ok-drawer__city{ position:relative; }
.ok-drawer .ok-drawer__city::after{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:44px;
  transform:translateY(-50%);
}
.ok-drawer__city-ic{ display:inline-flex; flex:0 0 auto; color:var(--ok-red); }  /* эталон: пин красный */
.ok-drawer__city-ic svg{ display:block; }
.ok-drawer .ok-drawer__city:active{ background:var(--ok-tint-blue); }
/* Уровень не корневой → место в шапке занимает «Назад», город убираем (эталон).
   (0,3,0) > (0,2,0) — правило геометрии выше перебивается штатно. */
.ok-drawer:not([data-level="root"]) .ok-drawer__city{ display:none; }

.ok-drawer .ok-drawer__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;                                  /* эталон */
  height:44px;
  padding:0;
  border-radius:var(--ok-radius-dropdown);     /* 10px — эталон */
}
.ok-drawer .ok-drawer__close:not(.has-background):not(.has-text-color){
  background:transparent;
  color:var(--ok-text-2);                      /* эталон: обводка крестика #526173 */
}
.ok-drawer .ok-drawer__close:active{ background:var(--ok-tint-blue); }
.ok-drawer__close svg{ display:block; }

/* — Тело: единственная прокручиваемая область дровера. — */
.ok-drawer__body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;                 /* прокрутка не «протекает» на фон */
  padding:6px 16px 20px;                       /* эталон */
}
/* Уровни лежат в одном потоке; активен ровно один (остальные с атрибутом hidden). */
.ok-lvl[hidden]{ display:none; }

.ok-drawer__title{
  padding:10px 2px 12px;                       /* эталон */
  color:var(--ok-ink);
  font-size:17px;
  font-weight:var(--ok-fw-black);
}

/* — Строка меню: и <a>, и <button> выглядят одинаково. Размеры — обычным весом
     (иначе модификаторы ниже не применятся, см. пояснение выше). — */
.ok-drawer .ok-drow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:52px;                             /* эталон */
  padding:0 2px;                               /* эталон */
  border-bottom:1px solid var(--ok-bg);        /* эталон #eef1f6 */
  border-radius:0;
  font-size:15.5px;
  font-weight:var(--ok-fw-bold);
  text-align:left;
}
.ok-drawer .ok-drow:not(.has-background):not(.has-text-color){
  background:transparent;
  color:var(--ok-text);                        /* эталон #1d2433 */
}
/* «Каталог стёкол» — единственная строка корня с другим кеглем и цветом (эталон). */
.ok-drawer .ok-drow--main{ font-size:16px; font-weight:var(--ok-fw-black); }
.ok-drawer .ok-drow--main:not(.has-background):not(.has-text-color){ color:var(--ok-ink); }
.ok-drawer .ok-drow--sub{ min-height:48px; font-size:15px; font-weight:var(--ok-fw-semibold); }
.ok-drawer .ok-drow--model{ min-height:46px; font-size:15px; font-weight:var(--ok-fw-semibold); }
.ok-drawer .ok-drow--country,
.ok-drawer .ok-drow--brand{ min-height:50px; }
.ok-drawer .ok-drow:active{ background:var(--ok-section-b); }
.ok-drow__go{ flex:0 0 auto; color:var(--ok-text-muted); }   /* эталон: стрелка #8a94a6 */

/* «Все услуги →» / «Весь каталог →» — та же роль, что у .ok-drop__all на десктопе. */
.ok-drawer .ok-drow__all{
  display:inline-block;
  padding:14px 2px;                            /* эталон */
  color:var(--ok-blue);
  font-size:14.5px;
  font-weight:var(--ok-fw-bold);
}

/* — Чипы «Типы стекла» (клоны из мега-панели). — */
.ok-drawer__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;                                     /* эталон */
  padding-bottom:16px;
  border-bottom:1px solid var(--ok-bg);
}
.ok-drawer .ok-drawer__chip{
  display:inline-flex;
  align-items:center;
  min-height:38px;                             /* эталон */
  padding:9px 13px;                            /* эталон */
  border:1px solid var(--ok-border-input);     /* эталон #dfe5ee */
  border-radius:var(--ok-radius-pill);
  color:var(--ok-text);
  font-size:13px;
  font-weight:var(--ok-fw-semibold);
  /* Без этого от ok-foundation прилетает межстрочный 1.55 и чип вырастает до 40.1
     (замер) — эталонные 38 достижимы только со своим line-height. */
  line-height:1.2;
}
.ok-drawer .ok-drawer__chip:active{ background:var(--ok-tint-blue); }

/* — Метка группы («Страны»). — */
.ok-drawer__label{
  padding:16px 2px 6px;                        /* эталон */
  color:var(--ok-text-muted);
  font-size:12px;
  font-weight:var(--ok-fw-black);
  letter-spacing:var(--ok-ls-eyebrow);         /* .06em — эталон */
  text-transform:uppercase;
}

/* — Поиск по сайту в дровере (спека 09: поле в шапке И в дровере). — */
.ok-msearch{ display:flex; gap:8px; align-items:center; padding:10px 0 6px; }
.ok-drawer .ok-msearch__input{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  padding:0 12px;
  background:var(--ok-section-a);
  border:var(--ok-input-border-w) solid var(--ok-border-input);
  border-radius:var(--ok-radius-search,10px); /* Волна 1-бис: роль поля поиска (было --ok-radius-dropdown, то же 10px, иная роль) */
  color:var(--ok-text);
  font-size:var(--ok-fs-body);                 /* 16px — иначе iOS зумит поле при фокусе */
  outline:none;
}
.ok-drawer .ok-msearch__input:focus{ border-color:var(--ok-blue); }
.ok-drawer .ok-msearch__go:not(.has-background):not(.has-text-color){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  height:44px;
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  border-radius:var(--ok-radius-dropdown);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* Волна 3 §6.5: род поиска — Manrope (значок SVG, но род единый) */
}
.ok-drawer .ok-msearch__go:active{ background:var(--ok-blue-hover); }

/* — CTA «Запросить цену»: та же механика попапа, что у десктопной кнопки. — */
.ok-drawer .ok-drawer__cta:not(.has-background):not(.has-text-color){
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px;                                 /* эталон */
  margin-top:18px;                             /* эталон */
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  border-radius:var(--ok-radius-btn);          /* 4px — эталон */
  font-size:15.5px;
  font-weight:var(--ok-fw-bold);
}
.ok-drawer .ok-drawer__cta:active{ background:var(--ok-blue-hover); transform:translateY(1px); }

/* — Контакты в корне дровера. — */
.ok-drawer__contacts{ display:flex; flex-direction:column; gap:2px; margin-top:20px; }
.ok-drawer .ok-drawer__tel{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;                             /* эталон = тач-минимум */
  color:var(--ok-ink);
  font-size:16px;
  font-weight:var(--ok-fw-black);
  font-variant-numeric:tabular-nums;
}
.ok-drawer .ok-drawer__mail{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  color:var(--ok-blue);
  font-size:14.5px;
  font-weight:var(--ok-fw-semibold);
  word-break:break-word;                       /* длинная почта не рвёт 326px */
}
.ok-drawer__ic{ display:inline-flex; flex:0 0 auto; color:var(--ok-blue); }
.ok-drawer__ic svg{ display:block; }

/* — Пусто (каталог не отдал данных): без тупика, только текст. — */
.ok-drawer__empty{ padding:14px 2px; color:var(--ok-text-2); font-size:14px; }

/* — БЛОКИРОВКА ПРОКРУТКИ ФОНА. position:fixed на body — единственный способ,
     который держит iOS Safari; top:-Ypx ставит JS, поэтому картинка под скримом
     остаётся ровно там же, где была: визуального скачка при открытии нет. — */
html.ok-drawer-on,
html.ok-drawer-on body{ overflow:hidden; }
html.ok-drawer-on body{ position:fixed; left:0; right:0; width:100%; }

/* ★★ SHAPKA-01 · СНЯТИЕ ЗАМКА ВЫШЕ ГРАНИЦЫ — ЗАЩИТА ОТ БЛОКИРОВКИ СТРАНИЦЫ.
 *
 * Замок выше ставит JS и снимает ТОЛЬКО он же, при закрытии дровера.
 * ★ А сторож в `ok-header.js` слушает `matchMedia('(min-width:769px)')` — он
 * остался на старом числе, и трогать его этот пакет не вправе: JS шапки в
 * Forbidden, критерий приёмки требует, чтобы диф не содержал JS шапки.
 *
 * Отказ, который отсюда следует, разобран по шагам: iPad Pro 11" в портрете
 * 834 px — шапка мобильная, пользователь открывает меню. Поворот в альбом,
 * 1194 px. Порог 769 при этом НЕ ПЕРЕСЕКАЕТСЯ (обе ширины выше него), событие
 * `change` не приходит, состояние «открыт» остаётся. CSS выше 1072 прячет и
 * панель, и затемнение, и сам бургер — а замок объявлен ВНЕ медиазапросов и
 * потому держится. Итог: страница не прокручивается, меню не видно, закрыть
 * нечем; клавиатуры на планшете нет, Escape недоступен. То же на iPad Air
 * (820→1180) и iPad 10.2 (810→1080) — на всём нынешнем парке iPad.
 *
 * Правило ниже снимает замок средствами листа, не касаясь JS: выше границы
 * страница прокручивается независимо от того, что думает состояние в скрипте.
 *
 * ★ `position:static` тут важнее, чем `overflow`. Скрипт ставит инлайновый
 * `body.style.top = -прокрутка`, а инлайн перебивается только `!important`,
 * который пакетом запрещён. Но `top` применяется лишь к позиционированному
 * элементу — при `static` браузер его игнорирует, и обходить инлайн не нужно.
 *
 * ★ СТОИТ ИМЕННО ЗДЕСЬ, СРАЗУ ЗА ЗАМКОМ. Специфичность у обоих правил равная
 * (0,1,2), медиазапрос веса не добавляет — спор решает порядок. Поставленное
 * выше по файлу, оно не сделало бы ничего. */
@media (min-width:1072px){
  html.ok-drawer-on, html.ok-drawer-on body{ overflow:visible; }
  html.ok-drawer-on body{ position:static; width:auto; }
}

/* Анимации мастера (имена свободны — грепом по теме @keyframes ok* не найдено). */
@keyframes okSlide{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes okFade{ from{ opacity:0; } to{ opacity:1; } }


/* ═══ [14] РЕСПОНСИВ ═══════════════════════════════════════════════════════ */
/* ★ ОБНОВЛЕНО SHAPKA-01, 30.07.2026. Прежняя запись гласила: «Канон M1: LG 1024
   · MD 768 · SM 600 · XS 480. Ниже 768 шапка становится мобильной… Выше 768 —
   десктопная строка с управляемой деградацией, чтобы на планшете не было
   overflow». Последнее оказалось неверным: overflow на планшете как раз и был,
   в полосе 769…1275, потому что границы стояли на круглых числах, а полы
   раскладок некруглые.
   ДЕЙСТВУЮЩИЕ ГРАНИЦЫ ШАПКИ: мобильная ≤1071 · планшетная 1072…1315 ·
   десктопная ≥1316. Числа некруглые намеренно — они считаны от полов ширины
   плюс полоса прокрутки, разбор у каждой ступени. Канон M1 (1024/768/600/480)
   продолжает действовать для ОСТАЛЬНЫХ листов темы; шапка из него вышла
   осознанно, потому что её пол от канона не зависит. */

/* ── ПЛАНШЕТНАЯ СТУПЕНЬ ──────────────────────────────────────────────────── */
/* Замер: при 1024 сумма «лого 206 + каталог 120 + нав 527 + корзина 42 + поиск 42
   + CTA 164 + 6 зазоров» превышает контент-ширину 976 → пришлось бы резать. Режем
   осознанно и по приоритету: словесный знак логотипа (марка остаётся), затем
   плотность нава и паддинги кнопок. */
/* Вес селекторов здесь поднят до уровня базовых (те несут противовес TT1 из двух
   `:not()`): иначе десктопные значения перебили бы планшетные. */

/* ★★ SHAPKA-01, 30.07.2026: ГРАНИЦА 1024 → 1315. ПОЧЕМУ НЕКРУГЛОЕ ЧИСЛО.
 *
 * Прежние границы были назначены круглыми (768, 1024), а полы ширины у раскладок
 * некруглые — отсюда и дефект. Замерено:
 *
 *     планшетная раскладка требует  1009 px по scrollWidth ряда
 *                                   1032,59 px по ИСТИННОМУ полу (с полем 24)
 *     десктопная                    1261 / 1292,78 px
 *
 * ★ Две меры расходятся, и это не мелочь. Chrome НЕ включает `padding-right`
 * контейнера в `scrollWidth`: пока правое поле не съедено целиком, `scrollWidth`
 * равен `clientWidth` и пола не показывает вовсе. По короткой мере на 1024
 * «всё влезло», по истинной — не влезает на 23,59 px, и боковое поле уже
 * съедено с 24 px до 0,41 px. Зелёный сигнал там был обманчивым.
 *
 * ★ ГРАНИЦА СЧИТАЕТСЯ ПО ИСТИННОМУ ПОЛУ ПЛЮС ПОЛОСА ПРОКРУТКИ.
 * Медиазапрос сверяется с ШИРИНОЙ ОКНА (полоса включена), а вёрстка живёт в
 * доступной ширине (полоса вычтена). Разница 15 px — это и есть корень дефекта:
 * порог мерили одной величиной, раскладку строили в другой.
 *
 * ★★ ПЕРВАЯ РЕДАКЦИЯ ЭТОЙ ПРАВКИ БЫЛА НЕВЕРНОЙ, И ВОТ ПОЧЕМУ.
 * Сначала здесь стояла граница 1056 и строка `padding-inline:24px` на ряду —
 * чтобы поле не зависело от `.ok-container`, который переключается на 1024.
 * Критик показал, что это разъезжает шапку саму с собой: `.ok-topbar__inner`,
 * `.ok-header__inner` и `.ok-mega__inner` — ТРИ РАЗНЫХ УЗЛА С ОДНИМ И ТЕМ ЖЕ
 * классом `.ok-container` (`header-topbar.php:28`, `header-main.php:43`,
 * `header-mega-catalog.php:37`), и переопределение на одном из них оставляло
 * два других на 32 px. Ступенька 8 px между строкой города и логотипом под
 * ней — на каждой странице сайта. Плюс контент страницы тоже на 32
 * (`ok-legacy-compat.css:216`), то есть разъезд шёл бы и с крошками.
 *
 * Поэтому отступ НЕ переопределяется вовсе, а граница поднята так, чтобы
 * планшетная ступень целиком лежала в зоне общего контейнера 32 px:
 *
 *     пол при поле 32/32:  1032,59 − 48 + 64 = 1048,59
 *     плюс полоса 15:      1063,59  ← ниже этого не влезает
 *     берём 1072:          доступная ширина 1057, запас 8,41 px
 *
 * ★ ЗАПАС НАЗВАН ЧИСЛОМ И БОЛЬШЕ НУЛЯ: 8,41 px при классической полосе,
 * 23,41 px при накладной (там доступная ширина равна окну). Прежде запас у всех
 * трёх границ был РОВНО НОЛЬ — 768, 1024 и 1276 стояли в упор.
 *
 * ★ Шапка теперь живёт на общем контейнере, и разъезда нет ПО ПОСТРОЕНИЮ, а не
 * потому что его подравняли в трёх местах. Подравнивание пришлось бы повторять
 * при каждом новом `.ok-container` в шапке. */
/* ★ ВЫП110: порог компакта поднят 1315→1559. Причина (замер): при полном
   раскладе (словесный знак + текущая навигация) содержимое строки ≈1356px, а
   контент-бокс контейнера 1280 = 1216px → правая группа (CTA) вылезала за
   центрированный контейнер и на 1316–1559 упиралась в край экрана (гориз. скролл,
   scrollWidth 1466 при 1440). Overflow уходит в поле только при vw≥1560 (поле
   ≥140). Компакт прячет словесный знак (−140px) и ужимает — строка влезает в 1216.
   ≥1560 полный расклад снова помещается (поле поглощает). Навигацию/лого/топбар/
   дровер не трогаем (границы №110) — расширен существующий компактный режим. */
@media (max-width:1559px){
  .ok-header .ok-brand__text{ display:none; }
  .ok-header .ok-header__inner{ gap:10px; }
  .ok-header .ok-cat-btn:not(.has-background):not(.has-text-color){ padding:0 14px; gap:7px; font-size:14.5px; }
  .ok-header .ok-nav{ margin-left:2px; gap:0; }
  .ok-header .ok-nav__link{ padding:9px 7px; font-size:14px; }
  .ok-header .ok-nav__caret:not(.has-background):not(.has-text-color){ padding:9px 7px 9px 4px; }
  .ok-header .ok-cta:not(.has-background):not(.has-text-color){ padding:0 16px; font-size:14.5px; }
  .ok-header .ok-topbar__inner{ gap:16px; }
  .ok-header .ok-topbar__contacts{ gap:18px; }
  .ok-header .ok-search__input{ width:220px; }
  /* Следующая ступень лестницы: на планшете в компакте телефон в строке тоже не
     помещается (замер: 1036 при доступных 976). Он возвращается сразу, как только
     топбар разворачивается прокруткой вверх; постоянный мобильный вызов — HC-04. */
  body.okna-scrolled .ok-header .ok-hdr-phone{ display:none; }
}

/* ── ≤1071 — ★ МОБИЛЬНАЯ ШАПКА (HC-04) ───────────────────────────────────── */
/* ЗАМЕР МАСТЕРА (режим «Мобайл», 390 и 375):
     тёмная строка города .. h 36 · bg #12161f · padding 0 12
     белый бар ............. h 56 · sticky · z 60 · border-bottom 1px #e8ecf2
                             padding 0 6 0 14 · gap 6
     лого .................. h 36 · подпись 12px/800 UPPER ls .02em #123d87
     телефон/бургер ........ 44×44 · radius 10
   ★ ЧТО ЛИПНЕТ. В мастере липнет ТОЛЬКО белый бар 56, а строка города уезжает
   вместе со страницей. Поэтому здесь корень шапки переводится в static, а sticky
   переносится на саму строку. Заодно снимается компакт-сжатие топбара: свернуть
   высоту уже уехавшей строки — значит дёрнуть контент вверх на 36px (тот самый
   «jump», который в HC-03 специально исключали). */
/* ★★ SHAPKA-01: ГРАНИЦА 768 → 1071.
 *
 * Мобильная раскладка теперь покрывает всё, что ниже планшетной. Прежде между
 * ними зияла дыра 769…1023: мобильная кончалась на 768, а планшетной нужно
 * 1009 px доступной ширины — и в этой полосе не работала ни одна.
 * Замер «до», карта по 25 ширинам: вынос падал линейно по формуле
 * `1024 − ширина окна`, от 255 px на 769 до 1 px на 1023.
 *
 * ★ ПОЧЕМУ МОБИЛЬНАЯ ГОДИТСЯ ДЛЯ ЭТОЙ ПОЛОСЫ, А ПЛАНШЕТНАЯ НЕТ.
 * У планшетной жёсткий пол: шесть детей `flex:0 0 auto`, распорка сжата в ноль,
 * ряд не сжимается вовсе — координаты детей на 900 и на 1024 совпадают до
 * пикселя. У мобильной пола нет: лого `flex:1 1 auto` с `min-width:0`, оно и
 * отдаёт ширину. Поэтому 769…1071 отдано мобильной раскладке, а не наоборот.
 *
 * Вид самой раскладки не тронут — меняется только ширина переключения.
 *
 * ★ Число 1071, а не 1055: граница планшетной поднята до 1072, чтобы ступень
 * лежала в зоне общего контейнера 32 px (разбор — у планшетного блока ниже).
 * Числа парные, зазора между 1071 и 1072 нет. */
@media (max-width:1071px){

  /* [1] Липнет вся шапка, а не внутренняя строка.
     ★ 2026-08-02: sticky на .ok-header__row не работал — строка не могла «вылетать»
       за пределы родителя .ok-header (position:static, высота = топбар+строка).
       Макет 06: липнет шапка целиком. Строка остаётся обычной (static внутри sticky). */
  .ok-header{ position:sticky; top:0; z-index:var(--ok-z-header); }
  .ok-header .ok-header__row{ position:static; z-index:auto; }
  /* Админ-бар WP: 601–782 он fixed (46px), ≤600 — absolute и уезжает сам.
     Числа 782/600 здесь — константы WordPress, а не дизайн-брейкпоинты. */
  body.admin-bar .ok-header{ top:46px; }

  /* [2] Тёмная строка города (эталон). Компакт-сворачивание отключено — иначе
         на скролле контент дёргается на 36px. */
  .ok-topbar,
  body.okna-scrolled .ok-topbar{
    max-height:none;
    background:var(--ok-dark);
    border-bottom:0;
    transition:none;
  }
  .ok-header .ok-topbar__inner{ height:36px; gap:12px; padding-inline:12px; }
  /* geo.css задаёт `.okna-city{color:…!important;padding:…!important}` — перебить
     можно ТОЛЬКО таким же !important (единственная причина их появления в файле). */
  /* min-height 36 = вся высота тёмной строки. Канонические 44 внутри строки 36
     недостижимы физически (высота строки — замер мастера), поэтому берём максимум
     из возможного: у мастера эта кнопка вообще 27px. */
  .ok-header .ok-city{ min-height:36px; padding:6px 4px !important; color:var(--ok-border-input) !important; font-size:12.5px; }
  .ok-header .ok-city strong{ color:var(--ok-border-input); font-weight:var(--ok-fw-semibold); }
  .ok-header .ok-city:hover{ color:var(--ok-on-dark) !important; }
  .ok-header .ok-city:hover strong{ color:var(--ok-on-dark); }
  .ok-header .ok-city__ic{ color:var(--ok-red); }        /* эталон: на тёмном пин красный */
  .ok-header .ok-city__lab{ display:none; }              /* эталон: только название города */
  .ok-header .ok-topbar .ok-phone{ display:none; }       /* телефон переехал в бар и в дровер */
  /* ★ HC-16: на ТЁМНОМ мобильном топбаре (--ok-dark #12161f) берём базовый
     оттенок мастера, а не осветлённый-под-AA `--ok-text-muted`. Затемнение
     последнего сделано для СВЕТЛЫХ поверхностей; здесь фон тёмный, и то же
     затемнение работает наоборот — замер после первой правки: #646f84 на
     #12161f дал 3.58:1 вместо нормы 4.5, тогда как оттенок мастера #8a94a6
     даёт на нём 5.9:1. Ровно тот случай, ради которого база и текст разведены
     на два токена (см. ok-tokens.css). */
  .ok-header .ok-mail{ min-height:36px; color:var(--ok-muted-seed); font-size:12px; }
  .ok-header .ok-topbar .ok-caret{ color:var(--ok-muted-seed); }
  .ok-header .ok-mail__t{ overflow:hidden; text-overflow:ellipsis; }
  .ok-header .ok-mail__ic{ display:none; }               /* эталон: в тёмной строке только текст */

  /* ★ HC-16 · ТАЧ-ЦЕЛЬ 44px БЕЗ ИЗМЕНЕНИЯ ВЁРСТКИ (замер HC-18: город 90×36,
     почта 108×36 — ниже канона 44). Поднять сами кнопки нельзя: они живут в
     тёмной строке высотой 36px, а 36 — ЗАМЕР МАСТЕРА; растянуть строку значит
     разойтись с эталоном на всех вьюпортах ради двух элементов.
     Поэтому увеличиваем не элемент, а ЗОНУ НАЖАТИЯ: абсолютный псевдоэлемент
     44px по высоте, отцентрованный по кнопке. Он выходит за строку вверх-вниз,
     но `position:absolute` не влияет на раскладку, а `ok-topbar` ничего не
     клиппирует по вертикали — геометрия шапки не меняется ни на пиксель
     (проверено замером высот шапки до/после). По ширине обе цели и так ≥44.
     Псевдоэлементы у этих двух классов свободны (проверено по файлу). */
  .ok-header .ok-city,
  .ok-header .ok-mail{ position:relative; }
  .ok-header .ok-city::after,
  .ok-header .ok-mail::after{
    content:'';
    position:absolute;
    left:0; right:0; top:50%;
    height:44px;
    transform:translateY(-50%);
  }

  /* [3] Бар 56px. Селекторы с body.okna-scrolled повторены осознанно: у блока
         компакта вес (0,3,0), и без этого он вернул бы десктопные 60/38/none. */
  .ok-header .ok-header__inner,
  body.okna-scrolled .ok-header .ok-header__inner{
    height:var(--ok-mobile-header-height);     /* 56px */
    /* ★ W1-P02 · ПРОСВЕТ МЕЖДУ ТАЧ-ЦЕЛЯМИ 6px → 8px.
       Замер до правки (375, тач-эмуляция): все четыре цели бара по 44×44 — канон
       выдержан, но просветы между ними 6px при норме §5 п.6 «не менее 8px». Три
       смежные пары: лого|телефон, телефон|корзина, корзина|бургер — все по 6px.
       Значение 6 пришло из замера мастера, но мастер — не эталон там, где он
       противоречит канону доступности (правило проекта). Отклонение 2px осознанное.
       Раскладку это не ломает: лишние 6px забирает `.ok-brand` (flex:1 1 auto,
       min-width:0) — на 375 он ужимается с 205 до 199, три цели 44×44 не двигаются. */
    gap:8px;                                   /* мастер: 6 · канон тач-просвета: ≥8 */
    padding-inline:14px 6px;                   /* эталон: слева 14, справа 6 под тап-зону */
    transition:none;
  }
  /* min-height 44 — тач-минимум для ссылки-логотипа (сам знак остаётся 36, как в
     эталоне: у мастера кликабельная зона тоже 36, это добор до канона M1). */
  .ok-header .ok-brand,
  body.okna-scrolled .ok-header .ok-brand{ flex:1 1 auto; min-width:0; gap:9px; min-height:44px; }
  .ok-header .ok-brand__mark,
  body.okna-scrolled .ok-header .ok-brand__mark{ height:36px; transition:none; }   /* эталон */
  .ok-header .ok-brand__text,
  body.okna-scrolled .ok-header .ok-brand__text{ display:flex; overflow:hidden; }  /* длинное слово не толкает тап-цели */
  .ok-header .ok-brand__text span{ line-height:1.05; }                             /* кегль задаётся ниже, у ≤767 (:1413) — 12px здесь был мёртв, перебивался 10px */

  /* [4] Что уходит в дровер (и потому скрыто в баре). Двойной `:not()` — тот же
         противовес TT1, что и у базовых правил: иначе (0,2,0) проиграет (0,4,0).
     ★ 2026-08-02: `.ok-search` БОЛЬШЕ не скрывается — поиск сквозной элемент шапки,
       должен быть виден на мобиле ВСЕХ страниц (не только каталога). Стили иконки/панели
       для мобильного бара — в конце этого media-блока (см. блок «МОБИЛЬНЫЙ ПОИСК» ниже).
       Навигация/спейсер/скрим по-прежнему уходят в дровер. */
  .ok-header .ok-cat-btn:not(.has-background):not(.has-text-color),
  .ok-header .ok-cta:not(.has-background):not(.has-text-color){ display:none; }
  .ok-header .ok-nav,
  .ok-header .ok-header__spacer,
  .ok-header .ok-header__scrim{ display:none; }
  /* ★ Мега-панель ниже 768 не просто не нужна — она ЛОМАЕТ страницу: её содержимое
     (колонки марок/моделей из megamenu.css) держит ширину 516px, и документ уезжал
     вправо. ЗАМЕР ДО правки: scrollWidth 516 при вьюпорте 375 → overflow +141px;
     с `display:none` на панели — ровно 375, переполнение 0. */
  .ok-header .ok-header__mega,
  .ok-header .ok-mega-fallback{ display:none; }   /* и деградационная ветка панели — тоже */

  /* [5] Телефон в баре — ИКОНКА 44×44. Это тот же самый узел `.ok-hdr-phone`,
         что показывается текстом в десктопном компакте: второго телефона в DOM
         не заводим (§11 «единый источник»), прячется только подпись с номером.
         Подпись для скринридера даёт aria-label (header-main.php). */
  .ok-header .ok-hdr-phone,
  body.okna-scrolled .ok-header .ok-hdr-phone{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:var(--ok-radius-dropdown);   /* 10px — эталон */
  }
  .ok-header .ok-hdr-phone__num{ display:none; }
  .ok-header .ok-hdr-phone:active{ background:var(--ok-tint-blue); }

  /* [6] Корзина остаётся в баре: это функция сайта (сбор заявки), в мастере её
         нет только потому, что мастер корзину не рисует вовсе. Тач-размер 44. */
  .ok-header .okna-header-cart{ width:44px; height:44px; border-radius:var(--ok-radius-dropdown); }

  /* [7] Бургер — появляется. */
  .ok-header .ok-burger:not(.has-background):not(.has-text-color){ display:inline-flex; }

  /* ★ 2026-08-02 · МОБИЛЬНЫЙ ПОИСК (сквозной элемент шапки, все страницы ≤1071):
     раньше .ok-search уходил в дровер (display:none). Теперь иконка 44×44 в баре,
     по нажатию выезжает панель во всю ширину под шапкой. Шапка сжимает логотип
     (flex:1) — влезаем: лого 44 + телефон 44 + поиск 44 + корзина 44 + бургер 44
     + просветы ≈ 360 ≤ 375 (проверено замером; паттерн перенесён из каталог-скоупа). */
  .ok-header .ok-search{ display:flex !important; align-items:center; }
  .ok-header .ok-search__btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px !important; height:44px !important; min-width:44px !important;
    padding:0; background:transparent; border:none; border-radius:10px;
    color:#526173; cursor:pointer;
  }
  .ok-header .ok-search__btn svg{ width:21px; height:21px; display:block; }
  .ok-header .ok-search__panel{
    position:fixed; left:0; right:0; top:93px;
    width:auto !important; border-radius:0 0 12px 12px;
    border-left:0; border-right:0; border-top:0;
  }
  .ok-header .ok-brand__mark{ height:34px; width:auto; }
  /* MOB-04: «Автобусные» (нужно 78px @11px) не влезало в бокс 72.9px и резалось в «Автобусн…».
     Коробку не меняем (длинное слово не должно толкать тап-цели) — уменьшаем кегль до 10px,
     чтобы название печаталось ПОЛНОСТЬЮ (78×10/11=70.9<72.9). Ellipsis оставлен как страховка. */
  .ok-header .ok-brand__text span{ font-size:10px; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* ★№29 §1.1 · уточнено №30 (критик). letter-spacing:0 сбрасывает трекинг базы :271 (.02em): «Автобусные» 71→69px (замер свежего листа, catalog 360). ★★ ЛОВУШКА: computed letter-spacing:0 Chrome сериализует как `normal` — это НЕ «правило не применилось» (ширина доказывает применение). ★ ЧЕСТНО: это ЕДИНООБРАЗИЕ трекинга + микрозапас, а НЕ фикс обрезки — кегль 10px и так влезает (overflow:hidden+ellipsis страхуют). Область: @media(max-width:1071px) — действует и на планшет 481-1071 (не только 360/390), безвредно (лишь трекинг). Кегль/строки не тронуты. */
}

/* ★★ SHAPKA-01 · ИСПРАВЛЕНИЕ РЕГРЕССА, СОЗДАННОГО ЭТОЙ ЖЕ ПРАВКОЙ.
 *
 * Мобильный блок выше даёт липкой строке `top:46px` — высоту админ-бара
 * WordPress. Пока блок кончался на 768, это было верно: до 782 бар и правда
 * 46px. Граница уехала на 1071, и блок вышел за константу WP:
 *
 *     ширина ≤ 782   админ-бар 46px   ← `top:46px` верен
 *     ширина ≥ 783   админ-бар 32px   ← `top:46px` оставляет щель 14px
 *
 * В полосе 783…1071 липкая строка вставала на 46 при баре 32, и сквозь щель при
 * прокрутке просвечивал контент — на каждой странице. Видно только залогиненным,
 * то есть владельцу и редакторам; анонимный посетитель этого не увидел бы
 * никогда — потому дефект и мог дожить до боевого незамеченным.
 *
 * ★ 782 — константа WordPress, а не дизайн-брейкпоинт: её не меняют, к ней
 * приспосабливаются. Поэтому отдельный блок, а не правка числа выше.
 *
 * ★ И СТОИТ ОН ЗДЕСЬ, ПОСЛЕ ЗАКРЫТИЯ МОБИЛЬНОГО БЛОКА, А НЕ ВНУТРИ НЕГО.
 * Первая попытка вставила его в середину блока — новый `@media` разорвал
 * мобильную ступень пополам, и всё, что шло дальше (топбар, лого, телефон,
 * корзина, бургер), оказалось под условием `min-width:783px`, то есть перестало
 * применяться на телефонах. Поймано проверкой баланса скобок и перечнем
 * медиазапросов сразу после правки. */
@media (min-width:783px) and (max-width:1071px){
  body.admin-bar .ok-header .ok-header__row{ top:32px; }
}

/* ── SM 600 ──────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .ok-topbar__contacts .ok-phone:not(:first-child){ display:none; }
  .ok-header .ok-search__input{ width:100%; max-width:none; }
  .ok-search__panel{ right:auto; left:0; width:min(320px, calc(100vw - 32px)); }
  .ok-drop{ min-width:min(270px, calc(100vw - 32px)); max-width:calc(100vw - 32px); }
  /* Админ-бар ≤600 у WP position:absolute — он уезжает со страницей,
     поэтому сдвиг липкой строки не нужен (иначе под ней остаётся щель 46px). */
  body.admin-bar .ok-header .ok-header__row{ top:0; }
}

/* ── XS 480 ──────────────────────────────────────────────────────────────── */
/* ★ ЗДЕСЬ НАМЕРЕННО ПУСТО. Рубеж 480 НИЖЕ обоих приёмочных вьюпортов (390 и 375),
   поэтому любая «оптимизация под узкий экран» правила бы ровно тот кадр, который
   сверяют с мастером. Первая сборка так и сделала: паддинги бара стали 12/4 вместо
   эталонных 14/6 — расхождение поймано замером и убрано. Мобильный бар помещается
   и в 320 (замер: лого 56 + подпись 90 + три тап-цели 132 + отступы 38 = 316),
   так что отдельная ступень XS ему не нужна. */


/* ═══ [15] ДОСТУПНОСТЬ ═════════════════════════════════════════════════════ */

/* Дровер — сосед шапки, поэтому в список фокус-обводки его нужно внести отдельно. */
.ok-header :focus-visible,
.ok-drawer :focus-visible{ outline:2px solid var(--ok-blue); outline-offset:2px; }
/* Внутри дровера строки прижаты к краю панели — обводка «наружу» обрезалась бы. */
.ok-drawer .ok-drow:focus-visible,
.ok-drawer .ok-drow__all:focus-visible{ outline-offset:-2px; border-radius:var(--ok-radius-btn); }

/* Уважение к системной настройке «меньше движения» (гайд/15_A11Y). Состояния
   переключаются мгновенно, но остаются полностью рабочими. */
@media (prefers-reduced-motion:reduce){
  .ok-topbar,
  .ok-header__inner,
  .ok-brand__mark,
  .ok-header .ok-cat-btn,
  .ok-header .ok-cta,
  .ok-drop,
  .ok-header__mega{ transition:none; }
  .ok-header .ok-cat-btn:active,
  .ok-header .ok-cta:active{ transform:none; }
  /* Дровер открывается мгновенно: выезд и затемнение — самые заметные движения
     всего компонента, и именно их просит убрать системная настройка. */
  .ok-drawer__panel,
  .ok-drawer__scrim{ animation:none; }
  .ok-drawer .ok-drawer__cta:active{ transform:none; }
}

/* Печать: липкая шапка и мобильное меню на бумаге не нужны. */
@media print{
  .ok-header{ position:static; }
  .ok-header__mega,
  .ok-header__scrim,
  .ok-search__panel,
  /* ★ SHAPKA-01: бургер добавлен в список. Печатный блок ширины не задаёт, её
     считает браузер из формата и полей — в альбомном A4 это порядка 1040 px, то
     есть внутри новой мобильной полосы ≤1071. Прежде она кончалась на 768 и в
     печать не попадала, поэтому бургера тут и не было. Без этой строки на
     бумаге печатались бы три полоски вместо меню: нав, поиск и CTA мобильный
     блок гасит, а бургер — показывает. */
  .ok-burger,
  .ok-drawer{ display:none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ★ W1-P02 · ТАЧ-ЗОНЫ 44px НА ПЛАНШЕТЕ (769–1024) И ЛЮБОМ ТАЧ-УСТРОЙСТВЕ
   ---------------------------------------------------------------------------
   ЧТО ЗАМЕРЕНО ДО ПРАВКИ (тач-эмуляция CDP, hover:none + pointer:coarse):
     ширина 1024, шапка десктопная (мегаменю и нав видимы) — 68 целей из 78 ниже
     канона 44px. Поимённо худшие:
       .ok-nav__caret ..... 19.4 × 28    ← сама каретка, то есть ГЛАВНЫЙ тач-safe
                                           контрол §2, и он же самая мелкая цель
       .ok-nav__link ...... 53.5 × 39.7
       .ok-cat-btn ........ 123.9 × 42
       .ok-search__btn / корзина / CTA .. 42 по высоте
       топбар .ok-city / .ok-phone / .ok-mail .. 26.2 / 21.7 / 20.9 по высоте
     Зона 44px, заведённая HC-16, живёт только внутри @media (max-width:768px) —
     на планшете она не действует, хотя тач там ровно такой же.

   ПОЧЕМУ ГАРД ИМЕННО (hover:none), А НЕ ШИРИНА:
     тач определяется устройством, а не вьюпортом. Планшет 1024 в альбоме — тач,
     ноутбук 1024 — мышь. Ширина здесь не критерий; на мыши правило не включается,
     и десктопные 42px канона ДС §12 остаются нетронутыми.

   ★ W5-P02 п.6 (D-209): условие сведено к канону «И» `(hover:none) and (pointer:coarse)`
     — было голое `(hover:none)`, единственное такое место в проекте. На устройстве
     `hover:none + pointer:fine` (стилус, часть Android) зоны 44px теперь НЕ включаются
     — как и норма 44 на прочих поверхностях (они уже под каноном). Ось одна.

   ПОЧЕМУ ТОЛЬКО ПО ВЕРТИКАЛИ:
     псевдоэлемент растягивается вверх-вниз (`top:50%; height:44px; translateY(-50%)`),
     по горизонтали берёт ровно ширину узла (`left:0; right:0`). Вертикаль свободна —
     соседи в строке стоят рядом, а не сверху; горизонталь занята: расширение каретки
     до 44px наехало бы на ссылку соседнего пункта. `position:absolute` из потока
     выключен, поэтому НИ ОДНА высота шапки не меняется — проверено замером.

   ЧТО ЭТО НЕ ЧИНИТ (осознанный остаток, вынесен в реестр):
     ШИРИНА каретки остаётся 19.4px. Довести её до 44 можно только двумя путями,
     и оба за рамками пакета: (а) переверстать ряд навигации, рискуя переполнением
     на 1024; (б) сделать раскрытие по тапу на весь пункт — это правка поведения
     в ok-header.js и прямое противоречие между §2 п.2 и §2 п.3 самого задания.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse){
  .ok-header .ok-nav__caret,
  .ok-header .ok-nav__link,
  .ok-header .ok-cat-btn,
  .ok-header .ok-search__btn,
  .ok-header .ok-cta,
  .ok-header .okna-header-cart,
  .ok-header .ok-city,
  .ok-header .ok-phone,
  .ok-header .ok-mail{ position:relative; }

  .ok-header .ok-nav__caret::after,
  .ok-header .ok-nav__link::after,
  .ok-header .ok-cat-btn::after,
  .ok-header .ok-search__btn::after,
  .ok-header .ok-cta::after,
  .ok-header .okna-header-cart::after,
  .ok-header .ok-city::after,
  .ok-header .ok-phone::after,
  .ok-header .ok-mail::after{
    content:'';
    position:absolute;
    left:0; right:0; top:50%;
    height:44px;
    transform:translateY(-50%);
    pointer-events:auto;
  }

  /* Квадратные кнопки правой группы: 42×42 по канону ДС §12, до тач-нормы не хватает
     ровно 2px по ширине. Растягиваем зону на 1px в каждую сторону — соседи в группе
     стоят с просветом 6px и более, наложения зон не возникает (проверено замером
     просветов: после правки ни одной пары ближе 8px в этой группе нет). */
  .ok-header .ok-search__btn::after,
  .ok-header .okna-header-cart::after{ left:-1px; right:-1px; }
}

/* [W5-P02 п.5] Тач-цели шапки ≥44 на грубом указателе. ★ 20.08 ЭТАЛОН=МАКЕТ:
   тёмный топбар в макете 01 = 36px (замер мастера, город/почта там ~27px), и это
   перебивало на телефоне эталонные 36 из [2] обратно на 44 (сити-бар выше на 8px).
   Решение владельца — вид как в макете: топбар и цели города/почты держим 36.
   (Телефон в топбаре на моб скрыт — его 44 не влияет; кнопки бара/бургер = 44 отдельно.) */
@media (hover:none) and (pointer:coarse){
  .ok-header .ok-topbar__inner{ height:36px; }
  .ok-header .ok-city,
  .ok-header .ok-mail{ min-height:36px; }
  .ok-header .ok-phone{ min-height:44px; }
}

/* ============================================================================
   ★ §4.1 (26.08, ночной пакет): ЛОГОТИП «АВТОБУСНЫЕ» ОБРЕЗАЛСЯ НА 360.
   Причина: бокс .ok-brand__text сжался с ~73px (расчёт MOB-04 при 11px→10px)
   до 58px — в шапку добавили иконки поиска и корзины, они забрали ширину.
   10px-текст «АВТОБУСНЫЕ» = 71px > 58px → резалось в «АВТОБУ…».
   Фикс по МЕСТУ (≤480, канон): уменьшаем марку и зазор, освобождаем ~16px под
   текст — иконки НЕ убираем (поиск/корзина — рабочие). Марка остаётся читаемой.
   Правило в конце файла — бьёт ≤767 порядком при равной специфичности.
   Десктоп (>480) не тронут. Альтернатива (решение владельца): убрать иконку
   поиска в бургер-дровер — тогда марку можно вернуть к 34px.
   ---------------------------------------------------------------------------
   ★ §1 (выпуск №28, 27.08): перепроверка макетных размеров 36/12 ФАКТОМ (симуляция
   на боевой xampp, 360 и 320). ОСОЗНАННОЕ РАСХОЖДЕНИЕ С МАКЕТОМ — числа:
     · 360: марка 36 → бокс .ok-brand__text сжимается 71→57px; «Автобусные» @12px = 85px
       натуральной ширины → перелив 28px, резалось бы в «Автобусн…». Текущий 27/10: scrollWidth 71
       = clientWidth 71 бокс — НЕ клипается, но запас НУЛЕВОЙ (knife-edge; главная И каталог, замер
       идентичен). ★№28 knife-edge ЗАКРЫТ №29: (1) владелец прислал скрин со СВОЕГО Android — логотип
       виден целиком, обрезки нет, риск не реализовался; (2) дан копеечный хедж letter-spacing:0 (см. :1425/
       :1641) — натуральная ширина «Автобусные» 71→69px (−2px), порог обрезки сдвинут в узкую сторону,
       покрывает субпиксель иного движка. Кегль 27/10 не тронут (36/12 = обрезка 28px).
     · 320: клипается ДАЖЕ 27/10 (бокс 34px < 69px); 36/12 перелив 68px. ★ РЕШЕНИЕ Архитектора №29:
       320 — ВНЕ ЗОНЫ. Спека проекта 360/390, макеты 375; iPhone SE1 не догоняем. НЕ переоткрывать.
   Причина расхождения: живая шапка несёт 4 тап-цели ×44 (phone/search/cart/burger),
   которых в мобильной ветке макета не было — они забирают ширину, отданную макетом под 36/12.
   Возврат к 36/12 = гарантированная обрезка → оставляем 27/10 (правило §1: «это ответ»).
   ============================================================================ */
@media (max-width:480px){
  .ok-header .ok-brand__mark,
  body.okna-scrolled .ok-header .ok-brand__mark{ height:27px; }
  .ok-header .ok-brand,
  body.okna-scrolled .ok-header .ok-brand{ gap:6px; }
  /* katalog/posadochnye/kartochka (body.ok-catalog): svoi pravila logo v ok-catalog.css:322-323 (marka 34px, tekst 11px).
     ok-catalog.css trogat nelzya (zapret) - perebivaem otsyuda bolshey specifichnostyu html body.ok-catalog, chtoby fiks byl edinym. */
  html body.ok-catalog .ok-header .ok-brand__mark{ height:27px; }
  html body.ok-catalog .ok-header .ok-brand__text span{ font-size:10px; letter-spacing:0; } /* ★№29 §1.1: тот же хедж для каталожной шапки */
}