/* Шапка: верхняя строка (телефон, валюта, язык), хедер (логотип, действия, переключатель режима, поиск, мини-корзина) — вынесено из shop3.css
   без изменения вида (W0a, plan-0.4 §2). Подключается после shop3.css (event.php headerAssets(), CHROME_CSS) тем же набором CSS: условия @media —
   именованные (tokens.md §3.5). Шаблоны: common/header, common/search, common/currency, common/language, common/cart */

.s3-topbar { font-size: var(--s3-font-size-xs); }
.s3-topbar__in { display: flex; align-items: center; justify-content: space-between; min-height: var(--s3-size-control-md); gap: var(--s3-space-4); }
.s3-topbar a, .s3-topbar .btn-link { color: var(--s3-text-muted); text-decoration: none; }
.s3-topbar a:hover, .s3-topbar .btn-link:hover { color: var(--s3-text); }
.s3-topbar__phone { display: inline-flex; align-items: center; gap: var(--s3-space-1); }
.s3-topbar__phone .s3-i { width: var(--s3-size-icon-xs); height: var(--s3-size-icon-xs); }
.s3-topbar__right { display: flex; align-items: center; gap: var(--s3-space-4); }
.s3-topbar__right form { margin: 0; }
.s3-topbar__right .btn-link { padding: 0; font-size: var(--s3-font-size-xs); }
/* валюта и язык (common/currency, common/language): <details> + кнопки отправки формы */
.s3-switch { position: relative; font-size: var(--s3-font-size-xs); }
.s3-switch > summary { display: inline-flex; align-items: center; gap: var(--s3-space-1); min-height: var(--s3-size-control-sm); list-style: none; cursor: pointer; color: var(--s3-text-muted); }
.s3-switch > summary::-webkit-details-marker { display: none; }
.s3-switch > summary::after { content: ""; width: 0; height: 0; margin-inline-start: var(--s3-space-half); border-inline: var(--s3-space-1) solid transparent; border-top: var(--s3-space-1) solid currentColor; }
.s3-switch > summary:hover, .s3-switch[open] > summary { color: var(--s3-text); }
.s3-switch__menu { position: absolute; top: 100%; inset-inline-end: 0; z-index: var(--s3-z-dropdown); display: flex; flex-direction: column; min-width: var(--s3-layout-column); margin: 0; padding: var(--s3-space-1); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-radius-md); background: var(--s3-surface); box-shadow: var(--s3-shadow-md); }
.s3-switch__menu button { display: flex; align-items: center; gap: var(--s3-space-2); min-height: var(--s3-size-control-sm); padding: 0 var(--s3-space-3); border: 0; border-radius: var(--s3-radius-sm); background: none; color: var(--s3-text); font-size: var(--s3-font-size-sm); text-align: start; white-space: nowrap; cursor: pointer; }
.s3-switch__menu button:hover, .s3-switch__menu button:focus { background: var(--s3-surface-alt); }
.s3-switch__menu button[aria-current] { font-weight: var(--s3-font-weight-bold); }
.s3-switch__sym { min-width: var(--s3-space-4); color: var(--s3-text-muted); }
.s3-header { position: sticky; top: 0; z-index: var(--s3-z-sticky); background: var(--s3-surface); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); transition: box-shadow var(--s3-duration-base); }
.s3-header.is-stuck { box-shadow: var(--s3-shadow-md); }
.s3-header__in { display: flex; align-items: center; gap: var(--s3-space-5); min-height: var(--s3-header-height); }
.s3-logo img { max-height: var(--s3-header-logo-height); width: auto; }
.s3-logo__text { font-size: var(--s3-font-size-xl); font-weight: var(--s3-font-weight-bold); color: var(--s3-text); text-decoration: none; letter-spacing: var(--s3-font-tracking-tight); }
/* a:hover, a:focus темы и Bootstrap (0,1,1) сильнее одного класса: без этого блок-ссылка при наведении подчёркнута и в цвете ссылки (VD-2 #2) */
.s3-logo__text:is(:hover, :focus) { color: var(--s3-text); text-decoration: none; }
.s3-action.s3-header__burger { display: none; }
.s3-header__actions { display: flex; align-items: center; gap: var(--s3-space-1); margin-inline-start: auto; }
.s3-action {
  position: relative; display: inline-flex; align-items: center; gap: var(--s3-space-2);
  padding: var(--s3-space-2); border: 0; border-radius: var(--s3-radius-sm); background: none;
  color: var(--s3-text); font-size: var(--s3-font-size-sm); text-decoration: none; cursor: pointer;
}
.s3-action:hover, .s3-action:focus { background: var(--s3-surface-alt); color: var(--s3-text); text-decoration: none; }
.s3-action__label { display: none; }
.s3-badge {
  position: absolute; top: 0; inset-inline-end: 0; min-width: var(--s3-size-badge); height: var(--s3-size-badge); padding: 0 var(--s3-space-1); box-sizing: border-box;
  border-radius: var(--s3-radius-pill); background: var(--s3-accent); color: var(--s3-on-accent);
  font-size: var(--s3-font-size-2xs); font-weight: var(--s3-font-weight-bold); line-height: var(--s3-size-badge); text-align: center;
}
/* переключатель режима: состояние ставит shop3.js по схеме текущего режима (имён режимов в CSS компонентов нет — ADR 0013) */
.s3-i--sun, [data-s3-mode][aria-pressed="true"] .s3-i--moon { display: none; }
[data-s3-mode][aria-pressed="true"] .s3-i--sun { display: inline; }
/* поиск */
.s3-search { position: relative; flex: 1; max-width: var(--s3-search-max-width); }
.s3-search__input {
  box-sizing: border-box; width: 100%; height: var(--s3-size-control-lg); padding-block: 0; padding-inline: var(--s3-space-4) calc(var(--s3-size-control-md) + var(--s3-space-2));
  border: var(--s3-border-width-thin) solid var(--s3-border); border-radius: var(--s3-radius-pill);
  background: var(--s3-surface-alt); color: var(--s3-text); font: inherit;
}
/* фокус поля поиска — как у любого поля темы (.s3-input:focus в shop3.css): рамка цвета primary и кольцо */
.s3-search__input:focus { outline: none; border-color: var(--s3-primary); background: var(--s3-surface); box-shadow: 0 0 0 var(--s3-border-width-ring) color-mix(in srgb, var(--s3-focus) var(--s3-field-focus-ring-mix), transparent); }
.s3-search__btn {
  position: absolute; top: var(--s3-space-half); inset-inline-end: var(--s3-space-half); width: var(--s3-size-control-md); height: var(--s3-size-control-md); display: grid; place-items: center;
  border: 0; border-radius: var(--s3-radius-pill); background: var(--s3-primary); color: var(--s3-on-primary); cursor: pointer;
}
.s3-search__btn .s3-i { width: var(--s3-size-icon-sm); height: var(--s3-size-icon-sm); }
/* мини-корзина */
.s3-cart { position: relative; }
.s3-cart__menu { width: var(--s3-layout-summary); max-width: var(--s3-viewport-dialog); padding: var(--s3-space-4); border-radius: var(--s3-radius-md); box-shadow: var(--s3-shadow-lg); }
.s3-cart__items { max-height: var(--s3-viewport-dropdown-height); overflow: auto; }
.s3-cart__item { display: grid; grid-template-columns: var(--s3-size-thumb-sm) minmax(0, 1fr); gap: var(--s3-space-3); align-items: start; padding: var(--s3-space-2) 0; border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-cart__thumb img { border-radius: var(--s3-radius-sm); }
.s3-cart__info { display: flex; flex-direction: column; gap: var(--s3-space-half); font-size: var(--s3-font-size-sm); min-width: 0; }
.s3-cart__name { color: var(--s3-text); font-weight: var(--s3-font-weight-medium); }
.s3-cart__remove { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--s3-text-muted); font-size: var(--s3-font-size-xs); text-decoration: underline; cursor: pointer; }
.s3-cart__remove:hover { color: var(--s3-danger); }
/* шапка — только у панели (ниже); в выпадающем меню её нет */
.s3-cart__head { display: none; }
.s3-cart__totals { display: grid; grid-template-columns: 1fr auto; gap: var(--s3-space-1) var(--s3-space-4); margin: var(--s3-space-3) 0; font-size: var(--s3-font-size-sm); }
.s3-cart__totals dt { font-weight: var(--s3-font-weight-regular); color: var(--s3-text-muted); }
.s3-cart__totals dd { text-align: end; font-weight: var(--s3-font-weight-bold); }
.s3-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3-space-2); }
.s3-cart__empty { margin: var(--s3-space-4) 0; text-align: center; color: var(--s3-text-muted); }
@media (max-width: 991.98px) {
  .s3-header__in { flex-wrap: wrap; gap: var(--s3-space-2) var(--s3-space-3); min-height: var(--s3-header-height-mobile); padding-top: var(--s3-space-2); padding-bottom: var(--s3-space-2); }
  .s3-action.s3-header__burger { display: inline-flex; }
  .s3-logo { flex: 1; min-width: 0; }
  .s3-logo img { max-height: var(--s3-header-logo-height-mobile); }
  .s3-header__actions { margin-inline-start: 0; }
  .s3-search { order: 1; flex-basis: 100%; max-width: none; }
  .s3-search__input { height: var(--s3-size-control-md); }
  .s3-search__btn { width: calc(var(--s3-size-control-md) - 2 * var(--s3-space-half)); height: calc(var(--s3-size-control-md) - 2 * var(--s3-space-half)); }
}
@media (max-width: 600.98px) {
  .s3-topbar__phone { display: none; }
  .s3-topbar__in { justify-content: flex-end; }
  .s3-action { padding: var(--s3-space-1); }
}
/* ---------- шапка по настройкам (design-document.md §3.1): template/shop3/chrome/header/*, js/chrome/header.js. Вид 0.3 этих классов не несёт ---------- */
.s3-hdr { position: relative; z-index: var(--s3-z-sticky); }
.s3-hrow { position: relative; background: var(--s3-surface); border-block-end: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
/* три зоны: center — точно по центру страницы, пока боковые равны по месту; не влезает — center сжимается (решение п. 41) */
.s3-hrow__in { position: relative; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: var(--s3-space-5); }
.s3-hrow--two .s3-hrow__in { grid-template-columns: minmax(0, 1fr) auto; }
.s3-hrow--menu-start .s3-hrow__in { grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); }
.s3-hrow--menu-end .s3-hrow__in { grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); }
.s3-hrow--wide .s3-hrow__in { max-width: var(--s3-container-wide); }
.s3-hrow--full .s3-hrow__in { max-width: none; }
.s3-hrow--main .s3-hrow__in { min-height: var(--s3-header-height); }
.s3-hrow--top { font-size: var(--s3-font-size-xs); }
.s3-hrow--top .s3-hrow__in { min-height: var(--s3-topbar-height); }
.s3-hrow--top a { color: var(--s3-text-muted); text-decoration: none; }
.s3-hrow--top a:hover { color: var(--s3-text); }
.s3-hzone { display: flex; align-items: center; gap: var(--s3-space-3); min-width: 0; }
.s3-hzone--center { justify-content: center; }
.s3-hzone--end { justify-content: flex-end; }
.s3-hactions { display: flex; align-items: center; gap: var(--s3-space-1); }
.s3-hdr--labels .s3-action__label { display: inline; }
.s3-hdr--quiet .s3-badge { display: none; }
.s3-hcontacts { display: flex; align-items: center; gap: var(--s3-space-4); }
.s3-hcontacts__item { display: inline-flex; align-items: center; gap: var(--s3-space-1); }
.s3-hcontacts .s3-i { width: var(--s3-size-icon-xs); height: var(--s3-size-icon-xs); }
.s3-hsocial { display: flex; gap: var(--s3-space-2); margin: 0; padding: 0; list-style: none; }
.s3-hbutton__label { font-size: var(--s3-font-size-sm); }
.s3-hdr .s3-logo__img--dark, .s3-hdr .s3-logo__img--over { display: none; }
.s3-logo.is-dark .s3-logo__img { display: none; }
.s3-logo.is-dark .s3-logo__img--dark { display: inline; }
/* ---------- поиск шапки (P:\SHOP\design\search.md §3–5): одна рамка .s3-hsearch__panel вокруг категории, поля и кнопки ----------
   Радиус рамки — component.search.radius (= радиус кнопок: ручка round даёт pill, Knobs::apply). Внутренние части рамки своей обводки не несут
   и берут её углы: категория — начальные, кнопка — конечные, поле — никаких; внутренний радиус — радиус рамки минус её толщина.
   bar — рамка в потоке, по центру зоны; icon — рамка поверх середины строки шапки, ширина от центра страницы */
.s3-hsearch { display: flex; align-items: center; min-width: 0; }
.s3-hsearch__panel {
  position: relative; display: flex; flex: 1; align-items: stretch; box-sizing: border-box; min-width: 0; height: var(--s3-search-height);
  border: var(--s3-border-width-control) solid var(--s3-search-border-color); border-radius: var(--s3-search-radius);
  background: var(--s3-search-surface); color: var(--s3-text); transition: border-color var(--s3-duration-fast);
}
.s3-hsearch__panel:hover { border-color: var(--s3-text-muted); }
.s3-hsearch__panel:focus-within { border-color: var(--s3-primary); }
/* одно кольцо темы — на рамке, внутренние части своего не рисуют. :has нет (старые браузеры) — кольцо по :focus-within */
.s3-hsearch__panel:has(:focus-visible) { outline: var(--s3-border-width-thick) solid var(--s3-focus); outline-offset: var(--s3-border-width-thick); }
.s3-hsearch__panel :focus, .s3-hsearch__panel :focus-visible { outline: none; }
@supports not selector(:has(*)) {
  .s3-hsearch__panel:focus-within { outline: var(--s3-border-width-thick) solid var(--s3-focus); outline-offset: var(--s3-border-width-thick); }
}
.s3-hsearch .s3-search { display: flex; flex: 1; align-items: stretch; min-width: 0; max-width: none; }
.s3-hsearch .s3-search__input {
  flex: 1; min-width: 0; height: auto; padding-block: 0; padding-inline: var(--s3-space-4) var(--s3-space-2);
  border: 0; border-radius: 0; background: transparent; color: inherit; appearance: none;
}
.s3-hsearch .s3-search__input:focus { background: transparent; box-shadow: none; } /* фокус показывает рамка, не поле (кольцо поля темы — для вида 0.3) */
.s3-hsearch .s3-search__input::-webkit-search-cancel-button { display: none; } /* своего «×» в #search нет: любая кнопка там ищет (§3) */
.s3-hsearch .s3-search__input::placeholder { color: var(--s3-text-muted); opacity: 1; }
.s3-hsearch .s3-search__btn {
  position: static; flex: none; width: var(--s3-search-button-width); height: auto; border-radius: 0;
  border-start-end-radius: calc(var(--s3-search-radius) - var(--s3-border-width-control)); border-end-end-radius: calc(var(--s3-search-radius) - var(--s3-border-width-control));
  background: var(--s3-search-button-accent); color: var(--s3-search-button-accent-on);
}
.s3-hsearch--bar { width: var(--s3-search-max-width); max-width: 100%; }
.s3-hsearch--bar.s3-hsearch--narrow { width: var(--s3-search-max-width-narrow); }
.s3-hsearch--icon .s3-hsearch__panel {
  position: absolute; inset-block: 0; inset-inline: 0; z-index: var(--s3-z-dropdown); display: none; width: 100%; max-width: var(--s3-search-max-width); margin: auto;
}
.s3-hsearch--icon.s3-hsearch--narrow .s3-hsearch__panel { max-width: var(--s3-search-max-width-narrow); }
.s3-hsearch--icon.is-open .s3-hsearch__panel { display: flex; }
/* значок: пока рамка открыта — «×» (§5) */
.s3-hsearch__close, .s3-hsearch.is-open .s3-hsearch__open { display: none; }
.s3-hsearch.is-open .s3-hsearch__close { display: inline; }
/* категория: часть рамки с начальными углами, ширина по содержимому до cat-max-width; без JS — <select> без системного вида */
.s3-hsearch__cat {
  position: relative; display: flex; flex: none; align-items: stretch; min-width: 0; max-width: var(--s3-search-cat-max-width);
  border-inline-end: var(--s3-border-width-thin) solid var(--s3-border-subtle); background: var(--s3-search-cat-surface);
  border-start-start-radius: calc(var(--s3-search-radius) - var(--s3-border-width-control)); border-end-start-radius: calc(var(--s3-search-radius) - var(--s3-border-width-control));
}
.s3-hsearch__select, .s3-hsearch__trigger {
  box-sizing: border-box; width: 100%; min-width: 0; height: auto; margin: 0; padding-block: 0; padding-inline: var(--s3-space-3) calc(var(--s3-space-2) + var(--s3-size-icon-xs) + var(--s3-space-1));
  border: 0; border-radius: inherit; background: transparent; color: var(--s3-text); font: inherit; font-size: var(--s3-font-size-sm); cursor: pointer;
}
.s3-hsearch__select { appearance: none; text-overflow: ellipsis; }
.s3-hsearch__select option { background: var(--s3-surface); color: var(--s3-text); }
.s3-hsearch__trigger { display: flex; align-items: center; white-space: nowrap; }
.s3-hsearch__value { overflow: hidden; text-overflow: ellipsis; }
.s3-hsearch__short { display: none; }
.s3-hsearch__caret {
  position: absolute; inset-block: 0; inset-inline-end: var(--s3-space-2); width: var(--s3-size-icon-xs); height: var(--s3-size-icon-xs); margin-block: auto;
  color: var(--s3-text-muted); pointer-events: none; transition: transform var(--s3-duration-fast);
}
.s3-hsearch__trigger[aria-expanded="true"] ~ .s3-hsearch__caret { transform: rotate(180deg); }
.s3-hsearch__cat.is-enhanced > .s3-hsearch__select { display: none; }
/* список категорий: образец select-only combobox WAI-ARIA (§5) — кнопка и listbox, фокус остаётся на кнопке (aria-activedescendant) */
.s3-hsearch__list {
  position: absolute; inset-block-start: calc(100% + var(--s3-space-1)); inset-inline-start: calc(-1 * var(--s3-border-width-control)); z-index: var(--s3-z-dropdown);
  box-sizing: border-box; max-width: var(--s3-search-list-max-width); max-height: var(--s3-search-list-max-height);
  margin: 0; padding: var(--s3-search-list-padding); overflow-y: auto; overscroll-behavior: contain; list-style: none;
  border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: min(var(--s3-search-radius), var(--s3-search-list-radius));
  background: var(--s3-search-list-surface); color: var(--s3-text); box-shadow: var(--s3-search-list-shadow);
}
.s3-hsearch__list[hidden] { display: none; }
.s3-hsearch__option {
  display: flex; align-items: center; gap: var(--s3-space-2); min-height: var(--s3-size-control-sm); padding: var(--s3-space-2) var(--s3-space-3);
  border-radius: min(var(--s3-search-radius), var(--s3-radius-sm)); font-size: var(--s3-font-size-sm); white-space: nowrap; cursor: pointer;
}
.s3-hsearch__option:hover, .s3-hsearch__option.is-active { background: var(--s3-surface-alt); }
/* кольцо активного пункта — только когда его ведут клавиши (.is-keyed); мышью и касанием — заливка и галочка */
.s3-hsearch__list.is-keyed .s3-hsearch__option.is-active { box-shadow: inset 0 0 0 var(--s3-border-width-thin) var(--s3-border); }
.s3-hsearch__option[aria-selected="true"] { font-weight: var(--s3-font-weight-medium); }
.s3-hsearch__option .s3-i { flex: none; width: var(--s3-size-icon-xs); height: var(--s3-size-icon-xs); visibility: hidden; color: var(--s3-primary); }
.s3-hsearch__option[aria-selected="true"] .s3-i { visibility: visible; }
.s3-hsearch__option span { overflow: hidden; text-overflow: ellipsis; }
/* значок фильтра вместо подписи (§5.1): квадратная кнопка без заливки и разделителя; выбор — плашкой с «×», на телефоне — точкой на значке */
.s3-hsearch__cat--icon { max-width: none; border-inline-end: 0; background: none; }
.s3-hsearch__cat--icon.is-enhanced .s3-hsearch__caret { display: none; }
.s3-hsearch__cat--icon ~ .s3-search .s3-search__input { padding-inline-start: var(--s3-space-1); }
.s3-hsearch__trigger--icon { position: relative; flex: none; justify-content: center; width: var(--s3-search-button-width); padding: 0; color: var(--s3-text-muted); }
.s3-hsearch__trigger--icon:hover, .s3-hsearch__trigger--icon[aria-expanded="true"] { color: var(--s3-text); }
.s3-hsearch__trigger--icon .s3-i { width: var(--s3-size-icon-sm); height: var(--s3-size-icon-sm); }
.s3-hsearch__dot {
  position: absolute; inset-block-start: var(--s3-space-2); inset-inline-end: var(--s3-space-2); display: none;
  width: var(--s3-search-dot-size); height: var(--s3-search-dot-size); border-radius: var(--s3-radius-pill); background: var(--s3-accent);
}
.s3-hsearch__chip {
  display: inline-flex; flex: none; align-self: center; align-items: center; gap: var(--s3-space-1); box-sizing: border-box; max-width: var(--s3-search-chip-max-width);
  margin-inline-end: var(--s3-space-1); padding-block: var(--s3-chip-tag-padding-block); padding-inline: var(--s3-chip-tag-padding-inline) var(--s3-space-half);
  border-radius: min(var(--s3-search-radius), var(--s3-chip-radius)); background: var(--s3-surface-alt); color: var(--s3-text); font-size: var(--s3-font-size-xs);
}
.s3-hsearch__chip[hidden] { display: none; }
.s3-hsearch__chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-hsearch__chip-reset { display: inline-grid; flex: none; place-items: center; padding: var(--s3-space-half); border: 0; border-radius: var(--s3-radius-pill); background: none; color: var(--s3-text-muted); cursor: pointer; }
.s3-hsearch__chip-reset:hover { color: var(--s3-text); }
.s3-hsearch__chip-reset .s3-i { width: var(--s3-size-icon-xs); height: var(--s3-size-icon-xs); }
/* панель значка: не модальная, от начального края рамки; список в ней — без своей рамки и тени */
.s3-hsearch__pop {
  position: absolute; inset-block-start: calc(100% + var(--s3-space-1)); inset-inline-start: calc(-1 * var(--s3-border-width-control)); z-index: var(--s3-z-dropdown);
  box-sizing: border-box; width: var(--s3-search-list-max-width); max-width: calc(100% + 2 * var(--s3-border-width-control)); padding: var(--s3-search-list-padding);
  border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: min(var(--s3-search-radius), var(--s3-search-list-radius));
  background: var(--s3-search-list-surface); color: var(--s3-text); box-shadow: var(--s3-search-list-shadow);
}
.s3-hsearch__pop[hidden] { display: none; }
.s3-hsearch__pop .s3-hsearch__list { position: static; max-width: none; max-height: var(--s3-search-list-max-height); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.s3-hsearch__group { margin: 0; padding: var(--s3-space-1) var(--s3-space-3); color: var(--s3-text-muted); font-size: var(--s3-font-size-xs); font-weight: var(--s3-font-weight-medium); }
.s3-hsearch__check {
  display: flex; align-items: center; gap: var(--s3-space-2); margin: var(--s3-space-2) 0 0; padding: var(--s3-space-2) var(--s3-space-3) 0;
  border-block-start: var(--s3-border-width-thin) solid var(--s3-border-subtle); font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-regular); cursor: pointer;
}
.s3-hsearch__check input { margin: 0; accent-color: var(--s3-primary); }
.s3-hsearch__pop input:focus-visible { outline: var(--s3-border-width-thick) solid var(--s3-focus); outline-offset: var(--s3-border-width-thick); }
@media (prefers-reduced-motion: no-preference) {
  .s3-hsearch__list:not([hidden]) { animation: s3-hsearch-in var(--s3-duration-fast) var(--s3-easing-enter); }
}
@keyframes s3-hsearch-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .s3-hsearch__pop:not([hidden]) { animation: s3-hsearch-in var(--s3-duration-fast) var(--s3-easing-enter); }
}
@media (prefers-reduced-motion: reduce) {
  .s3-hsearch__panel, .s3-hsearch__caret { transition: none; }
}
/* касание: поле от 16 px, иначе iPhone увеличивает страницу при фокусе (§1 п. 9) */
@media (pointer: coarse) {
  .s3-hsearch .s3-search__input { font-size: max(var(--s3-search-input-font-size-touch), var(--s3-font-size-md)); }
}
/* корзина выезжающей панелью: разметка та же, #cart.open ставит Bootstrap */
.s3-hdr--cart-drawer #cart .s3-cart__menu { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; z-index: var(--s3-z-drawer); margin: 0; overflow: auto; border-radius: 0; }
/* шапка панели: название и «закрыть» — там, где у панели ждут крестик (VD-2 #4) */
.s3-hdr--cart-drawer .s3-cart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3-space-3); margin-bottom: var(--s3-space-2); padding-bottom: var(--s3-space-2); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-cart__title { margin: 0; font-size: var(--s3-font-size-lg); font-weight: var(--s3-font-weight-bold); }
/* панель — над нижней панелью телефона: у шапки свой слой (.s3-hdr, z-sticky), и fixed-панель внутри него не выше .s3-tabbar с тем же
   z-sticky позже в разметке; пока корзина открыта, слой шапки поднимаем до панелей. У sticky menu/compact шапка — display: contents (слоя нет),
   слой — у строки (sticky, z-sticky): поднимаем и её */
.s3-hdr--cart-drawer:has(#cart.open), .s3-hdr--cart-drawer .s3-hrow:has(#cart.open) { z-index: var(--s3-z-drawer); }
.s3-hdr--cart-drawer #cart.open::before { content: ""; position: fixed; inset: 0; z-index: var(--s3-z-overlay); background: var(--s3-overlay); }
/* sticky: место держит сама строка в потоке, страница не сдвигается (R04-04). compact — высота строки та же, видна её нижняя часть:
   прилипает со сдвигом вверх, содержимое прижато к низу и сжимается */
.s3-hdr--sticky-whole { position: sticky; top: 0; }
.s3-hdr--sticky-whole.is-stuck { box-shadow: var(--s3-shadow-md); }
.s3-hdr--sticky-menu, .s3-hdr--sticky-compact, .s3-hdr--sticky-menu .s3-hdr__rows, .s3-hdr--sticky-compact .s3-hdr__rows { display: contents; }
.s3-hdr--sticky-menu .s3-hrow--menu { position: sticky; top: 0; z-index: var(--s3-z-sticky); }
.s3-hdr--sticky-compact .s3-hrow--main {
  position: sticky; top: calc(var(--s3-header-height-compact) - var(--s3-header-height)); z-index: var(--s3-z-sticky);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--s3-header-height);
}
.s3-hrow.is-stuck { box-shadow: var(--s3-shadow-md); }
.s3-hrow--main.is-stuck .s3-hrow__in, .s3-hdr.is-stuck.s3-hdr--sticky-compact .s3-hrow--main .s3-hrow__in { min-height: var(--s3-header-height-compact); }
.s3-hrow--main.is-stuck .s3-logo img, .s3-hdr.is-stuck.s3-hdr--sticky-compact .s3-logo img { max-height: var(--s3-header-logo-height-mobile); }
/* прозрачная поверх первого экрана: шапка вне потока, страница не сдвигается; цвета — роли inverse, при прокрутке — своя палитра строки */
.s3-hdr--over { position: absolute; inset-inline: 0; top: 0; }
.s3-hdr--over.s3-hdr--sticky-whole, .s3-hdr--over.s3-hdr--sticky-menu, .s3-hdr--over.s3-hdr--sticky-compact { position: fixed; display: block; }
.s3-hdr--over .s3-hdr__rows { display: block; }
.s3-hdr--over .s3-hrow--menu, .s3-hdr--over .s3-hrow--main { position: relative; top: auto; }
.s3-hdr--over:not(.is-stuck):not(.s3-hdr--plate) .s3-hrow {
  --s3-text: var(--s3-p-inverse-text); --s3-text-muted: var(--s3-p-inverse-text-muted); --s3-link: var(--s3-p-inverse-link); --s3-surface-alt: transparent;
  background: none; border-color: transparent; color: var(--s3-text);
}
.s3-hdr--over:not(.is-stuck) .s3-logo--over .s3-logo__img { display: none; }
.s3-hdr--over:not(.is-stuck) .s3-logo--over .s3-logo__img--over { display: inline; }
.s3-hdr--over.s3-hdr--sticky-menu.is-stuck .s3-hrow:not(.s3-hrow--menu), .s3-hdr--over.s3-hdr--sticky-compact.is-stuck .s3-hrow:not(.s3-hrow--main) { display: none; }
/* плашка Н4: непрозрачная, с отступом и скруглением; вне layouts — та же в потоке; на телефоне её нет (R04-10) */
.s3-hdr--plate { padding: var(--s3-header-plaque-offset); }
.s3-hdr--plate.is-stuck { box-shadow: none; }
.s3-hdr--plate .s3-hdr__rows { max-width: var(--s3-header-plaque-max-width); margin-inline: auto; border-radius: var(--s3-header-plaque-radius); box-shadow: var(--s3-shadow-md); }
.s3-hdr--plate .s3-hrow { border: 0; }
.s3-hdr--plate .s3-hrow:first-child { border-start-start-radius: var(--s3-header-plaque-radius); border-start-end-radius: var(--s3-header-plaque-radius); }
.s3-hdr--plate .s3-hrow:last-child { border-end-start-radius: var(--s3-header-plaque-radius); border-end-end-radius: var(--s3-header-plaque-radius); }
@media (max-width: 991.98px) {
  .s3-hrow__in { display: flex; flex-wrap: wrap; gap: var(--s3-space-2) var(--s3-space-3); }
  .s3-hzone { display: contents; }
  .s3-hrow--main .s3-hrow__in, .s3-hrow--main.is-stuck .s3-hrow__in { min-height: var(--s3-header-height-mobile); padding-block: var(--s3-space-2); }
  .s3-hdr--sticky-compact .s3-hrow--main { top: 0; min-height: var(--s3-header-height-mobile); }
  .s3-hsearch--bar { order: 1; flex-basis: 100%; width: auto; }
  .s3-hsearch__panel { height: var(--s3-search-height-mobile); }
  .s3-hsearch__cat { max-width: var(--s3-search-cat-max-width-mobile); }
  .s3-hsearch__long { display: none; }
  .s3-hsearch__short { display: inline; }
  /* телефон: список шириной с рамку, не выше половины окна (§5) */
  .s3-hsearch__list { inset-inline: calc(-1 * var(--s3-border-width-control)); max-width: none; max-height: var(--s3-search-list-max-height-mobile); }
  .s3-hsearch__pop { inset-inline: calc(-1 * var(--s3-border-width-control)); width: auto; max-width: none; }
  .s3-hsearch__pop .s3-hsearch__list { max-height: var(--s3-search-list-max-height-mobile); }
  .s3-hsearch__chip { display: none; }
  .s3-hsearch__cat--icon.is-filtered .s3-hsearch__dot { display: block; }
  .s3-hrow--menu { border: 0; }
  .s3-hrow--menu .s3-hrow__in { min-height: 0; padding-block: 0; }
  .s3-hdr--plate { padding: 0; }
  .s3-hdr--plate .s3-hdr__rows { max-width: none; border-radius: 0; box-shadow: none; }
  .s3-hdr--plate .s3-hrow:first-child, .s3-hdr--plate .s3-hrow:last-child { border-radius: 0; }
}
/* Системный контраст Windows: поле поиска теряет контур (outline: none выше) — возвращаем контур, как общее правило forced-colors в shop3.css;
   правило здесь, а не там: хром подключается после shop3.css и иначе перекрыл бы его (порядок каскада сохранён, W0a) */
@media (forced-colors: active) {
  .s3-search__input:focus { outline: var(--s3-border-width-thick) solid Highlight; outline-offset: var(--s3-border-width-thin); }
  .s3-hsearch__panel { border-color: ButtonText; }
  .s3-hsearch__panel:focus-within { outline: var(--s3-border-width-thick) solid Highlight; outline-offset: var(--s3-border-width-thick); }
  .s3-hsearch__option.is-active { outline: var(--s3-border-width-thin) solid Highlight; }
}