/* Шапка: H1 компакт, H2 навигация, H3 двухуровневая. Меню в DOM одно: на десктопе ряд, на ≤960px панель. */
#header { position: relative; z-index: 10; background: var(--header-background-color, var(--content-background-color)); color: var(--on-dark-text-color); }
#header a:not(.button) { color: inherit; text-decoration: none; }
/* Меню нового формата (ub-menu) рисует SiteMenuWidget common: цвета берёт у шапки (inherit), выпадающая панель и акцент: переменные темы */
#header, #footer { --site-menu-panel-bg: var(--content-background-color); --site-menu-panel-text: var(--content-text-color); --site-menu-accent: var(--primary-background-color); --site-menu-on-accent: var(--primary-text-color); }
#header-menu .site-menu__list { flex-wrap: nowrap; gap: var(--t-nav-gap); }
#header-menu .site-menu__list > .site-menu__item > .site-menu__link { border-bottom: 0; padding: 0; }
#header-menu .site-menu__link { font-weight: 500; }
#header-menu .site-menu__item.is-active > .site-menu__link, #header-menu .site-menu__item.is-active-branch > .site-menu__link { font-weight: 700; }
#header-rubrics .site-menu__list { gap: 2px; }
#header-rubrics .site-menu__list > .site-menu__item > .site-menu__link { border-bottom: 0; padding: 0 14px; }
#header-row-1 > .page-wrapper { display: flex; align-items: center; gap: var(--t-nav-gap); min-height: var(--t-header-h); }

#top-logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; max-width: 60vw; font-weight: 700; }
#top-logo img { display: block; max-height: var(--t-logo-h); width: auto; max-width: 100%; }
#top-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* stthm50: «Мобільний вигляд» — название выключено: на телефоне видна только картинка; текст остаётся для скринридера (имя ссылки) */
@media (max-width: 600px) { #top-logo .logo-text--desktop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.logo-size-m { --t-logo-h: 40px; } .logo-size-s { --t-logo-h: 28px; } .logo-size-l { --t-logo-h: 56px; } .logo-size-xl { --t-logo-h: 72px; }
@media (max-width: 960px) { .logo-size-l, .logo-size-xl { --t-logo-h: 40px; } }

#header-menu { flex: 1 1 auto; min-width: 0; }
#header-menu nav > ul, #header-menu > ul, #header-menu ul { list-style: none; margin: 0; padding: 0; }
#header-menu > nav > ul, #header-menu > ul, #header-menu > div > ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: var(--t-nav-gap); align-items: center; }
#header-menu li { position: relative; }
#header-menu li.dropdown { display: block; }   /* движок прячет `.dropdown` (default.css): NavWidget ставит этот класс пункту с подменю */
#header-menu li > a { display: inline-flex; align-items: center; min-height: var(--t-tap); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#header-menu li.active > a { font-weight: 700; }
/* подменю: по наведению и фокусу на десктопе */
#header-menu li > ul { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; padding: 8px 0; background: var(--content-background-color); color: var(--content-text-color); border: 1px solid var(--content-border-color); border-radius: var(--t-radius); box-shadow: var(--shadow-overlay); }
#header-menu li:hover > ul, #header-menu li:focus-within > ul { display: block; }
#header-menu li > ul a { display: flex; padding: 0 16px; max-width: none; }
/* Меню нового формата «колонками» (SiteMenuWidget, upcc12): панель на всю ширину шапки, как у прежнего мега-меню; правила выпадающего списка
   выше (`li > ul`) к панели и её спискам ссылок не относятся. Карточка «Акція» — последняя колонка. На узком экране и в панели — аккордеон темы. */
body:not(.nav-collapsed) #header-menu .site-menu--part { position: static; }
body:not(.nav-collapsed) #header-menu li.is-mega { position: static; }
body:not(.nav-collapsed) #header-menu > ul > li.is-mega > .site-menu__link, body:not(.nav-collapsed) #header-menu .site-menu__list > li.is-mega > .site-menu__link { min-height: var(--t-header-h); }
body:not(.nav-collapsed) #header-menu li.is-mega > .site-menu__sub--mega {
    right: 0; z-index: 30; min-width: 0; box-sizing: border-box;
    padding: 32px max(var(--t-gutter), calc((100% - var(--t-container-max)) / 2 + var(--t-gutter)));
    gap: 24px 40px; align-items: start; border-width: 1px 0 0; border-radius: 0;
    max-height: calc(100vh - var(--t-header-h) - 24px); max-height: calc(100dvh - var(--t-header-h) - 24px); overflow: auto;
}
body:not(.nav-collapsed) #header-menu li.is-mega:hover > .site-menu__sub--mega,
body:not(.nav-collapsed) #header-menu li.is-mega:focus-within > .site-menu__sub--mega { display: grid; grid-template-columns: repeat(var(--site-menu-cols, 4), minmax(0, 1fr)); }
#header-menu .site-menu__sub--mega ul { display: grid; gap: 2px; position: static; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#header-menu .site-menu__sub--mega a { padding: 0; }
#header-menu .site-menu__sub--mega > .site-menu__col > .site-menu__link { font-weight: 700; }
#header-menu .site-menu__card-box { padding: 16px; }

#header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 1 auto; min-width: 0; }
.header-cta-bar { display: inline-flex; gap: 8px; min-width: 0; }   /* stthm45: в одном блоке — второй и третий пункт «Меню в правому боці» */
#header-actions .language-selector { display: flex; align-items: center; }
.header-cta { min-height: var(--t-tap); display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--t-radius); }
.header-cta-menu { display: none; }

#top-menu-button { display: none; min-width: var(--t-tap); min-height: var(--t-tap); padding: 0; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: inherit; cursor: pointer; }   /* stthm50: без круга и тени общего стиля кнопок (elements.css) */
#top-menu-button .fa-xmark, body.top-menu #top-menu-button .fa-bars { display: none; }
body.top-menu #top-menu-button .fa-xmark { display: inline; }
#top-menu-button:focus-visible, #header a:focus-visible, #header-menu a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* H1: без меню; кнопка остаётся в строке */
.header-compact .header-cta { padding-inline: 16px; }

/* H3: служебный ряд */
#header-row-top { background: var(--primary-light-background-color); color: var(--primary-text-color); font-size: 14px; }
#header-row-top > .page-wrapper { display: flex; align-items: center; gap: 24px; min-height: var(--t-header-top-h); justify-content: flex-end; }
.header-promo { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-phone-icon { display: none; }

/* Режим «панель»: на ≤960px и на десктопе, когда пункты не помещаются. Класс `nav-collapsed` на <body> ставит nav.js (оба случая);
   правило в @media — запасное на время до загрузки скрипта, чтобы страница не мигала десктопной шапкой. */
@media (max-width: 960px) {
    #top-menu-button { display: inline-flex; }
    #header-menu { display: none; }
    #header-row-2 { display: none; }   /* stthm43: додаткове меню — в свёрнутом меню */
    .header-cta-bar--desktop { display: none; }
}
body.nav-collapsed #top-menu-button { display: inline-flex; }
body.nav-collapsed #header-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    max-height: calc(100vh - var(--t-header-h)); max-height: calc(100dvh - var(--t-header-h)); overflow: auto;
    padding: 8px var(--t-gutter) 24px; background: var(--content-background-color); color: var(--content-text-color);
    border-top: 1px solid var(--content-border-color); box-shadow: var(--shadow-overlay);
}
body.nav-collapsed.top-menu #header-menu { display: block; }
body.nav-collapsed #header-menu > nav > ul, body.nav-collapsed #header-menu > ul, body.nav-collapsed #header-menu > div > ul { flex-direction: column; align-items: stretch; gap: 0; }
body.nav-collapsed #header-menu li > a { display: flex; max-width: none; min-height: var(--t-tap); white-space: normal; }
body.nav-collapsed #header-menu li > ul { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 16px; background: transparent; }
body.nav-collapsed #header-menu a:not(.button) { color: var(--content-text-color); }
/* stthm43: додаткове меню при свёрнутом меню (☰) — в панели под основным, отдельной группой; свой ряд под шапкой скрыт.
   «Панель / На весь екран» (header.menu_style) действует на него так же, как на основное: правила `#header-menu li > a` */
.header-menu-extra { display: none; }
body.nav-collapsed .header-menu-extra { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--content-border-color); }
body.nav-collapsed #header-row-2 { display: none; }
/* stthm49: пункты додаткового меню мельче и тише основных — видно, что это вторая группа */
body.nav-collapsed .header-menu-extra li > a { font-size: .875em; font-weight: 400; opacity: .75; }
body.nav-collapsed .header-menu-extra li.active > a, body.nav-collapsed .header-menu-extra li > a:hover { opacity: 1; }
body.nav-collapsed .header-cta-menu { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
body.nav-collapsed .header-cta-menu .header-cta { width: 100%; justify-content: center; }
body.nav-collapsed .header-cta-menu--top { padding: 8px 0 12px; }   /* `header.cta_mobile = menu_top`: кнопки над пунктами меню */
/* магазин, кнопка «в шапке»: в панели только на ≤600px, где ей в строке нет места (shop.html) */
@media (min-width: 601px) { body.nav-collapsed .header-cta-menu .header-cta--narrow { display: none; } }
body.nav-collapsed .header-cta-bar--desktop { display: none; }
/* фон под панелью: клик закрывает меню (nav.js) */
body.nav-collapsed.top-menu::after { content: ""; position: fixed; inset: 0; z-index: 5; background: var(--veil-background-color); }
body.nav-collapsed.top-menu #header { z-index: 40; }
@media (max-width: 960px) {
    /* H3: служебный ряд уходит в панель, телефон остаётся иконкой */
    .header-two-level #header-row-top { display: none; }
    .header-two-level .header-phone-icon { display: inline-flex; align-items: center; justify-content: center; min-width: var(--t-tap); min-height: var(--t-tap); }
    .header-compact #header-actions { margin-left: auto; }
    .header-compact .header-cta { padding-inline: 12px; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; }
}

/* Магазин (T8): иконки справа в строке; поиск раскрывается по кнопке */
.shop-icons { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.shop-icons > li { position: relative; display: flex; align-items: center; }
.shop-icons > li > a, .shop-icons > li > button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--t-tap); min-height: var(--t-tap); color: inherit; position: relative; }
/* stthm53: счётчик значка — круг 18px (с двумя цифрами — «таблетка»): у `.badge` движка отступы 4px 6px и строка 20px (default.css), в шапке без
   этих правил он вытянут вверх; прежние темы правили это `line-height: 1` (#header-nav-1). display не задаётся: показ решает виджет (user-cart.css) */
.shop-icons .badge { position: absolute; top: 4px; right: 2px; box-sizing: border-box; min-width: 18px; height: 18px; min-height: 0; padding: 0 5px;
    border-radius: 9px; font-size: 10px; line-height: 16px; text-align: center; }
/* stthm53: выпадающие списки значков магазина — меню пользователя (NavWidget `user-nav` в `li.shop-user`) и товары корзины (UserCartWidget
   `top-menu.html`, `ul.store-item-list`): под значком по наведению и фокусу. Значки стоят вне `nav`, поэтому правила движка для подменю шапки
   (`header nav ul ul`, default.css; `#header-nav-1 > ul > li ul` прежних тем) к ним не относятся, и без этих правил список открыт прямо в шапке.
   Строки корзины оформляет сам виджет (user-cart.css) */
.shop-icons > li > ul { display: none; position: absolute; top: 100%; right: 0; z-index: 30; min-width: 240px; margin: 0; padding: 8px 0; list-style: none;
    background: var(--content-background-color); color: var(--content-text-color); border: 1px solid var(--content-border-color); border-radius: var(--t-radius);
    box-shadow: var(--shadow-overlay); font-size: 14px; line-height: 20px; text-align: left; }
.shop-icons > li:hover > ul, .shop-icons > li:focus-within > ul { display: block; }
.shop-icons > li > ul > li { margin: 0; padding: 0; }
#header .shop-user > ul a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px; color: inherit; white-space: nowrap; }
#header .shop-user > ul a:hover, #header .shop-user > ul a:focus-visible { background: var(--hover2-background-color, color-mix(in srgb, currentColor 8%, transparent)); }
.shop-user > ul a i { width: 20px; flex: none; text-align: center; color: var(--secondary-text-color); }
.shop-user > ul .divider { margin: 6px 0; border-top: 1px solid var(--content-border-color); }
.shop-user > ul .text-secondary { font-size: 13px; color: var(--secondary-text-color); }
#header .top-menu-user-cart > ul { padding: 8px; }
#header .top-menu-user-cart .store-item-list a.store-item-title { color: inherit; }
#header .top-menu-user-cart .store-item-total { padding-top: 10px; }
/* stthm53: основное меню магазина строкой под шапкой (`header.menu_row = bottom`, shop.html): тот же фон шапки, тонкая линия сверху.
   Свёрнутое меню (≤960px, нехватка места): строки нет, панель #header-menu встаёт под шапкой, как из строки шапки */
.header-menu-below #header-row-main { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.header-menu-below #header-row-main > .page-wrapper { display: flex; align-items: center; min-height: 52px; }
body.nav-collapsed .header-menu-below #header-row-main, body.nav-collapsed .header-menu-below #header-row-main > .page-wrapper { display: contents; }
@media (max-width: 960px) { .header-menu-below #header-row-main, .header-menu-below #header-row-main > .page-wrapper { display: contents; } }
#search-box { display: flex; align-items: center; flex: none; }   /* stthm53: не сжимается до нуля, когда значков много (место уступает название у логотипа) */
#search-box > button { min-width: var(--t-tap); min-height: var(--t-tap); background: none; border: 0; color: inherit; cursor: pointer; }
#search-box #form-search, #search-box #search-close { display: none; }
#search-box.active #form-search, #search-box.active #search-close { display: flex; }
#search-box.active #search-show { display: none; }
@media (max-width: 960px) { #search-box.active { position: absolute; left: var(--t-gutter); right: var(--t-gutter); top: 100%; z-index: 35; background: var(--content-background-color); color: var(--content-text-color); } }

/* Магазин на телефоне: значков много, кнопка уходит в панель меню, логотип уступает место */
@media (max-width: 600px) {
    .header-shop .header-cta-bar--wide { display: none; }
    .header-shop #top-logo { max-width: 32vw; }
    .header-shop #header-actions { gap: 2px; flex: none; }   /* stthm53: значки и ☰ не сжимаются и не уходят за край — место уступает логотип */
    .header-shop #top-logo { min-width: min(var(--t-logo-h), 32vw); }
    .shop-icons > li > a, .shop-icons > li > button, #search-box > button { min-width: 36px; }
    .header-shop #top-menu-button { min-width: 36px; }
    /* списки значков (корзина, меню пользователя) — под шапкой по ширине окна: от значка вправо им не хватает места */
    .shop-icons > li { position: static; }
    .shop-icons > li > ul { left: var(--t-gutter); right: var(--t-gutter); min-width: 0; }
    #header .top-menu-user-cart .store-item { min-width: 0; }
    #header .top-menu-user-cart .store-item .store-item-title { width: auto; max-width: 100%; }
}
@media (max-width: 360px) {   /* stthm53: все значки и ☰ на 320px — уже, чтобы были видны все (раньше лупа сжималась до нуля) */
    .header-shop #header-row-1 > .page-wrapper { gap: 8px; }
    .shop-icons > li > a, .shop-icons > li > button, #search-box > button, .header-shop #top-menu-button { min-width: 32px; }
}

/* Поведение при прокрутке (shared/js/header.js): прячется вверх-вниз, уменьшается, прозрачная → плотная */
#header { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
body.header-hidden #header { transform: translateY(-100%); }
body.header-shrunk { --t-header-h: 56px; }
body.header-shrunk #header-row-1 > .page-wrapper { min-height: var(--t-header-h); }
body.header-shrunk #top-logo img { max-height: 32px; }
body.header-overlay[data-overlay-solid] #header { position: fixed; }   /* поверх экрана и при прокрутке */
body.header-overlay.header-solid #header, body.header-overlay.top-menu #header { background: var(--t-header-solid-bg, var(--header-background-color, var(--content-background-color))); color: var(--t-header-solid-text, var(--on-dark-text-color)); box-shadow: 0 1px 0 var(--content-border-color); }
body.header-overlay.header-solid #header #top-logo span, body.header-overlay.top-menu #header #top-logo span { color: var(--t-header-solid-text, var(--on-dark-text-color)); }
body.header-overlay.header-solid #header a:not(.button), body.header-overlay.top-menu #header a:not(.button), body.header-overlay.top-menu #top-menu-button { color: var(--t-header-solid-text, var(--on-dark-text-color)); }
/* затемнение под прозрачной шапкой (`header.overlay_shade`): градиент от тёмного к прозрачному, чтобы светлый текст читался на любой обложке */
body.header-overlay.overlay-shade:not(.header-solid):not(.top-menu) #header { background: linear-gradient(color-mix(in srgb, var(--content-text-color) 65%, transparent), transparent); }
body.header-overlay.overlay-tone-dark:not(.header-solid) #header { color: var(--content-text-color); background: transparent; }
body.header-overlay.overlay-tone-dark:not(.header-solid) #header a:not(.button), body.header-overlay.overlay-tone-dark:not(.header-solid) #top-menu-button { color: var(--content-text-color); }
@media (prefers-reduced-motion: reduce) { #header { transition: none; } }

/* Мега-меню (`header.mega`, класс `nav-mega` на <body>; docs/themes/contract.md «Мега-меню»). Подменю первого уровня — панель колонок во всю ширину
   шапки: второй уровень — заголовки колонок, третий — ссылки, в конце блок акции. Открывается наведением, фокусом и кликом (nav.js);
   в режиме панели (≤960px и бургер) — аккордеон: пункт раскрывается по тапу. */
body.nav-mega:not(.nav-collapsed) #header-menu li.has-mega { position: static; }
body.nav-mega:not(.nav-collapsed) #header-menu > ul > li.has-mega > a { min-height: var(--t-header-h); }   /* без щели между пунктом и панелью: наведение не теряется */
body.nav-mega:not(.nav-collapsed) #header-menu li.has-mega > a[aria-haspopup]::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
body.nav-mega:not(.nav-collapsed) #header-menu .mega-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; min-width: 0; box-sizing: border-box;
    padding: 32px max(var(--t-gutter), calc((100% - var(--t-container-max)) / 2 + var(--t-gutter)));
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 40px; align-items: start;
    border-width: 1px 0 0; border-radius: 0; box-shadow: var(--shadow-overlay);
    max-height: calc(100vh - var(--t-header-h) - 24px); max-height: calc(100dvh - var(--t-header-h) - 24px); overflow: auto;
}
body.nav-mega:not(.nav-collapsed) #header-menu li.has-mega:hover:not(.mega-closed) > .mega-panel,
body.nav-mega:not(.nav-collapsed) #header-menu li.has-mega.mega-open > .mega-panel { display: grid; }
body.nav-mega:not(.nav-collapsed) #header-menu .mega-panel > li > a { display: flex; max-width: none; min-height: 0; padding: 0 0 8px; font-weight: 700; white-space: normal; overflow: visible; }
body.nav-mega:not(.nav-collapsed) #header-menu .mega-panel > li:not(.has-children):not(.mega-promo) > a { font-weight: 400; }
body.nav-mega:not(.nav-collapsed) #header-menu .mega-panel ul { display: block; position: static; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.nav-mega:not(.nav-collapsed) #header-menu .mega-panel ul a { display: flex; max-width: none; min-height: var(--t-tap); padding: 0; font-weight: 400; white-space: normal; overflow: visible; }
body.nav-mega #header-menu .mega-panel a:not(.button) { color: var(--content-text-color); }
body.nav-mega #header-menu .mega-panel a:hover { text-decoration: underline; }
/* блок акции: последняя ячейка сетки */
body.nav-mega:not(.nav-collapsed) #header-menu .mega-panel > li.mega-promo > a, body.nav-mega:not(.nav-collapsed) #header-menu .mega-panel > li.mega-promo > .mega-promo-link { padding: 16px; font-weight: 400; }
#header-menu .mega-promo { align-self: start; }
#header-menu .mega-promo-link { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--t-radius); background: var(--primary-light-background-color); color: var(--primary-text-color); }
body.nav-mega #header-menu .mega-promo a.mega-promo-link { color: var(--primary-text-color); text-decoration: none; }
#header-menu .mega-promo img { display: block; width: 100%; height: auto; max-height: 140px; object-fit: cover; border-radius: calc(var(--t-radius) / 2); }
#header-menu .mega-promo-title { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
#header-menu .mega-promo-text { font-size: 14px; overflow-wrap: anywhere; }
/* панель меню: аккордеон */
body.nav-mega.nav-collapsed #header-menu li.has-mega > ul { display: none; }
body.nav-mega.nav-collapsed #header-menu li.has-mega.expanded > ul { display: block; }
body.nav-mega.nav-collapsed #header-menu li.has-mega > a[aria-haspopup] { justify-content: space-between; width: 100%; }
body.nav-mega.nav-collapsed #header-menu li.has-mega > a[aria-haspopup]::after { content: ""; flex: none; margin: 0 6px 4px 8px; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
body.nav-mega.nav-collapsed #header-menu li.has-mega.expanded > a[aria-haspopup]::after { transform: rotate(-135deg); }
body.nav-mega.nav-collapsed #header-menu .mega-panel > li > a { font-weight: 700; }
body.nav-mega.nav-collapsed #header-menu .mega-panel ul { padding-left: 12px; }
body.nav-mega.nav-collapsed #header-menu .mega-promo { padding: 8px 0 16px; }
@media (prefers-reduced-motion: reduce) { body.nav-mega.nav-collapsed #header-menu li.has-mega > a::after { transition: none; } }

/* Поиск в шапке (`header.show_search`, `header.search_mode`; shared/js/search.js). Лендинговые шапки — `#header-search`: форма на страницу поиска;
   `icon` — кнопка раскрывается в поле, `field` — поле в строке (на ≤960px всё равно кнопка). Магазин — `#search-box` с тем же `icon` / `field`. */
.header-search { display: flex; align-items: center; position: relative; }
.header-search button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--t-tap); min-height: var(--t-tap); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; cursor: pointer; }
.header-search-form { display: none; align-items: center; gap: 0; }
.header-search.active .header-search-form { display: flex; }
.header-search.active .header-search-toggle { display: none; }
.header-search input[type="search"] {
    box-sizing: border-box; width: 220px; max-width: 100%; min-height: 40px; padding: 0 12px;
    background: var(--content-background-color); color: var(--content-text-color);
    border: 1px solid var(--content-border-color); border-radius: var(--t-radius); font: inherit; font-size: 15px;
}
.header-search input[type="search"]:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.header-search .header-search-submit { color: inherit; }
.header-search-toggle:focus-visible, .header-search button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 961px) {
    .header-search--field .header-search-form { display: flex; }
    .header-search--field .header-search-toggle, .header-search--field .header-search-close { display: none; }
    #search-box.search-field { width: auto; overflow: visible; }
    #search-box.search-field #form-search { display: flex; }
    #search-box.search-field #search-show, #search-box.search-field #search-close { display: none; }
    #search-box.search-field input { width: 240px; min-height: 40px; padding: 0 12px; color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--t-radius); }
    #search-box.search-field input::placeholder { color: inherit; opacity: .7; }
}
@media (max-width: 960px) {
    .header-search { position: static; }
    .header-search.active .header-search-form {
        position: absolute; left: var(--t-gutter); right: var(--t-gutter); top: 100%; z-index: 35; padding: 8px;
        background: var(--content-background-color); color: var(--content-text-color); box-shadow: var(--shadow-overlay);
        border: 1px solid var(--content-border-color); border-radius: var(--t-radius);
    }
    .header-search.active input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Ссылка рядом с кнопкой меню (`header.mobile_link_*`): видна, когда меню свёрнуто (≤960px и бургер); на десктопе её нет. Текст не обрезается и не переносится
   (до 14 знаков): места уступает логотип. Если ссылка задана, кнопка из шапки на ≤520px уходит в панель меню, чтобы всё поместилось на 320px. */
.header-mobile-link { display: none; }
@media (max-width: 960px) { .header-mobile-link { display: inline-flex; } }
body.nav-collapsed .header-mobile-link { display: inline-flex; }
.header-mobile-link { flex: none; align-items: center; min-height: var(--t-tap); padding: 0 10px; font-size: 14px; white-space: nowrap; font-weight: 600; border: 1px solid currentColor; border-radius: var(--t-radius); }
@media (max-width: 520px) { .header-cta-bar--link { display: none; } }
#header-actions:has(.header-mobile-link) { flex: none; }   /* ссылка и кнопка меню не сжимаются: сжимается логотип */

/* Служебный ряд (two-level): промо-ссылка; на телефоне ряд скрыт, но с `header.top_bar_mobile` остаётся одна строка с акцией (телефон и язык уходят в панель и иконку) */
.header-promo a { color: inherit; text-decoration: underline; }
@media (max-width: 960px) {
    .header-two-level #header-row-top.top-bar-mobile { display: block; }
    .header-two-level #header-row-top.top-bar-mobile .header-phone, .header-two-level #header-row-top.top-bar-mobile .language-selector { display: none; }
    .header-two-level #header-row-top.top-bar-mobile > .page-wrapper { min-height: 36px; justify-content: center; text-align: center; }
    .header-two-level #header-row-top.top-bar-mobile .header-promo { margin: 0; white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; padding-block: 6px; }
}

/* Шапка «по центру» (`header.layout = center`, бургер-шапка; `body.header-center`): три колонки — ссылка слева, логотип по центру, язык и кнопка меню справа.
   Кнопка шапки здесь — текстовая ссылка слева, меню всегда в панели. Только шире 600px: на телефоне шапка обычная (логотип слева, язык и кнопка меню справа,
   кнопка шапки в панели меню): при трёх колонках длинное название не оставляет места языку и кнопке меню на 320px. */
@media (min-width: 601px) {
    body.header-center #header-row-1 > .page-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); gap: var(--t-nav-gap); }
    body.header-center #top-logo { grid-column: 2; justify-self: center; max-width: 44vw; }   /* длинное название не отнимает место у боковых колонок */
    body.header-center .header-left { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; max-width: 100%; overflow: hidden; }
    body.header-center .header-left .button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.header-center #header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
    body.header-center .header-left .button { background: transparent; border: 0; box-shadow: none; color: inherit; padding-inline: 0; font-weight: 500; }
    body.header-center .header-left .button:hover { text-decoration: underline; }
}
@media (min-width: 601px) { body.header-center .header-mobile-link { display: none; } }   /* ссылка слева уже есть */
@media (max-width: 600px) { body.header-center .header-left { display: none; } }

/* Меню на весь экран (`header.menu_style = fullscreen`; `body.menu-fullscreen`): когда меню свёрнуто и открыто, оно закрывает страницу, шапка остаётся сверху
   с кнопкой закрытия; пункты крупно по центру. */
body.menu-fullscreen.nav-collapsed #header-menu {
    position: fixed; inset: 0; max-height: none; z-index: 30; box-sizing: border-box; padding: calc(var(--t-header-h) + 24px) var(--t-gutter) 48px;
    background: var(--t-fullscreen-bg); color: var(--t-fullscreen-text); border: 0; box-shadow: none; overflow: auto; text-align: center;
}
body.menu-fullscreen.nav-collapsed.top-menu #header { background: var(--t-fullscreen-bg); color: var(--t-fullscreen-text); box-shadow: none; }
body.menu-fullscreen.nav-collapsed.top-menu #header a:not(.button), body.menu-fullscreen.nav-collapsed.top-menu #top-menu-button { color: var(--t-fullscreen-text); }
body.menu-fullscreen.nav-collapsed #header-menu > ul, body.menu-fullscreen.nav-collapsed #header-menu > nav > ul, body.menu-fullscreen.nav-collapsed #header-menu > div > ul { align-items: center; gap: 4px; }
/* stthm49: додаткове меню на весь экран — короткая черта по центру вместо линии на всю ширину, пункты мельче основных */
body.menu-fullscreen.nav-collapsed .header-menu-extra { position: relative; margin-top: 16px; padding-top: 16px; border-top: 0; }
body.menu-fullscreen.nav-collapsed .header-menu-extra::before { content: ""; position: absolute; top: 0; left: 50%; width: 48px; margin-left: -24px; border-top: 1px solid color-mix(in srgb, var(--t-fullscreen-text) 35%, transparent); }
body.menu-fullscreen.nav-collapsed #header-menu .header-menu-extra li > a { font-size: clamp(18px, 4.5vw, 24px); font-weight: 400; min-height: var(--t-tap); }
body.menu-fullscreen.nav-collapsed #header-menu a:not(.button) { color: var(--t-fullscreen-text); }
body.menu-fullscreen.nav-collapsed #header-menu li > a { justify-content: center; font-size: clamp(28px, 7vw, 44px); font-weight: 300; line-height: 1.3; min-height: 56px; }
body.menu-fullscreen.nav-collapsed #header-menu li.active > a { opacity: .6; }
body.menu-fullscreen.nav-collapsed #header-menu li > ul { padding-left: 0; }
body.menu-fullscreen.nav-collapsed #header-menu li > ul a { font-size: clamp(18px, 4vw, 24px); }
body.menu-fullscreen.nav-collapsed #top-logo, body.menu-fullscreen.nav-collapsed #header-actions, body.menu-fullscreen.nav-collapsed .header-left { position: relative; z-index: 31; }   /* логотип и кнопка закрытия над экраном меню */
body.menu-fullscreen.nav-collapsed.top-menu #header #top-logo span { color: var(--t-fullscreen-text); }   /* цвет текста шапки из настроек не должен темнить логотип на тёмном экране */
body.menu-fullscreen.nav-collapsed.top-menu::after { display: none; }
body.menu-fullscreen.nav-collapsed .header-cta-menu { padding-top: 24px; }
body.menu-fullscreen.nav-collapsed .header-cta-menu--top { padding: 0 0 24px; }

/* Соцсети в минимальном подвале: ряд ссылок по центру */
.footer-minimal #footer-socials { display: flex; justify-content: center; margin-bottom: 8px; }

/* Второй ряд меню, прежде «ряд рубрик» (`header.menu_secondary`): вторая строка шапки под основной, до 10 ссылок. Не помещается — прокручивается по горизонтали внутри строки
   (страница шире окна не становится); в строке нет выпадающих подменю. */
#header-row-2 { border-top: 2px solid currentColor; border-bottom: 1px solid var(--content-border-color); }
#header-rubrics ul { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#header-rubrics ul::-webkit-scrollbar { display: none; }
#header-rubrics li { flex: none; margin: 0; padding: 0; position: relative; }
#header-rubrics li.dropdown { display: block; }
#header-rubrics li > a { display: inline-flex; align-items: center; min-height: var(--t-tap); padding: 0 14px; font-weight: 600; white-space: nowrap; opacity: .8; }
#header-rubrics li > a:hover { opacity: 1; }
#header-rubrics li.active > a { opacity: 1; font-weight: 700; box-shadow: inset 0 -2px 0 currentColor; }
#header-rubrics a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
@media (max-width: 600px) { #header-rubrics > ul, #header-row-2 .page-wrapper { padding-inline: 0; } #header-row-2 .page-wrapper { padding-inline: var(--t-gutter); } }

/* Ссылка «на главную» (`header.back_link_*`, шапка compact): после логотипа; на ≤600px остаётся стрелка (текст виден скринридеру) */
.header-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--t-tap); padding-inline: 4px; font-weight: 700; white-space: nowrap; }
.header-back:hover .header-back-text { text-decoration: underline; }
.header-compact #header-actions { margin-left: auto; }
@media (max-width: 600px) {
    .header-back-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .header-back { min-width: var(--t-tap); justify-content: center; }
}
/* Поиск магазина на телефоне: base.css задаёт полю 400px, на ≤960px оно занимает строку под шапкой по ширине окна */
@media (max-width: 960px) { #search-box.active #form-search { flex: 1 1 auto; min-width: 0; } #search-box.active input { width: 100%; min-width: 0; box-sizing: border-box; } }

/* stthm58: шапка «без відволікань» (page-chrome = bare): логотип слева, пометка о безопасном оформлении справа */
.header-bare #header-row-1 .page-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}
.header-bare-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875em;
    color: var(--secondary-text-color);
    white-space: nowrap;
}