/* Телефон (design-document.md §3.1): варианты основной строки шапки, выезжающая панель, нижняя панель. Шаблоны: template/shop3/chrome/mobile/*, js/chrome/mobile.js.
   Вид 0.3 этих классов не несёт: всё под .s3-hdr, .s3-drawer, .s3-tabbar. HTML один на всех ширинах: варианты — только стили, сервер устройство не определяет (R04-02).
   Граница варианта — та же, что у кнопки меню шапки и шторки меню (header.css, menu.css): шаг с меткой desktop */

/* ---------- выезжающая панель: вид не зависит от ширины, кнопка `menu_button` открывает её и на компьютере ---------- */
.s3-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--s3-z-drawer); display: flex; flex-direction: column;
  inline-size: min(var(--s3-menu-drawer-width), calc(100% - var(--s3-size-control-lg))); color: var(--s3-text); background: var(--s3-surface); box-shadow: var(--s3-drawer-shadow);
  visibility: hidden; transform: translateX(-100%); transition: transform var(--s3-drawer-duration), visibility 0s var(--s3-drawer-duration); /* rtl-ok: [dir="rtl"] ниже */
}
[dir="rtl"] .s3-drawer { transform: translateX(100%); } /* выезжает от начала строки — в RTL справа */
.s3-drawer.is-open, [dir="rtl"] .s3-drawer.is-open { visibility: visible; transform: none; transition: transform var(--s3-drawer-duration); }
.s3-drawer:focus { outline: none; }
.s3-drawer__head { display: flex; flex: none; align-items: center; justify-content: space-between; padding-block: var(--s3-drawer-padding-block); padding-inline: var(--s3-drawer-padding-inline); border-block-end: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-drawer__body { display: flex; flex: 1; flex-direction: column; gap: var(--s3-drawer-gap); min-block-size: 0; padding-block-end: var(--s3-drawer-gap); overflow-y: auto; overscroll-behavior: contain; }
.s3-drawer__scrim { position: fixed; inset: 0; z-index: var(--s3-z-overlay); background: var(--s3-overlay); }
.s3-drawer__links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.s3-drawer__links a { display: flex; align-items: center; gap: var(--s3-space-2); min-block-size: var(--s3-size-control-md); padding-inline: var(--s3-drawer-padding-inline); color: var(--s3-text); text-decoration: none; }
/* язык, валюта, режим — такие же строки, как ссылки выше, с подписью: «Currency … £ GBP», «Dark mode … ☾» (VD-2 #12; было — мелкий ряд xs внизу) */
.s3-drawer__tools { display: flex; flex-direction: column; }
.s3-drawer__tools .s3-switch { font-size: inherit; }
.s3-drawer__tools .s3-switch > summary, .s3-drawer__tools [data-s3-mode] {
  display: flex; align-items: center; gap: var(--s3-space-2); box-sizing: border-box; inline-size: 100%; min-block-size: var(--s3-size-control-md);
  padding-block: 0; padding-inline: var(--s3-drawer-padding-inline); border-radius: 0; color: var(--s3-text); font-size: inherit;
}
.s3-drawer__tools .s3-switch .s3-visually-hidden { position: static; order: -1; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; margin-inline-end: auto; }
.s3-drawer__tools .s3-switch > summary { color: var(--s3-text-muted); }
.s3-drawer__tools .s3-switch .s3-visually-hidden, .s3-drawer__label { color: var(--s3-text); }
.s3-drawer__tools [data-s3-mode] { justify-content: space-between; }
.s3-drawer__label { display: none; }
.s3-drawer__tools .s3-drawer__label { display: inline; }
.s3-drawer__tools > div:empty { display: none; }
.s3-drawer .s3-switch__menu { position: static; box-shadow: none; }
.s3-drawer-lock, .s3-drawer-lock body { overflow: hidden; }

/* меню панели: дерево вглубь по нажатию; кнопка раскрытия рядом со ссылкой (образец disclosure, §4) */
.s3-dmenu__list { margin: 0; padding: 0; list-style: none; }
.s3-dmenu__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-block-end: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-dmenu__link { display: flex; align-items: center; gap: var(--s3-space-2); min-block-size: var(--s3-size-control-lg); padding-inline: var(--s3-drawer-padding-inline); color: var(--s3-text); text-decoration: none; }
/* a:hover, a:focus (0,1,1) подчёркивал пункт, получивший фокус при открытии панели (VD-2 #12) */
.s3-dmenu__link:is(:hover, :focus), .s3-drawer__links a:is(:hover, :focus) { text-decoration: none; }
.s3-dmenu__link[aria-current] { font-weight: var(--s3-font-weight-bold); }
.s3-dmenu__toggle {
  display: inline-flex; align-items: center; justify-content: center; block-size: var(--s3-size-control-lg); inline-size: var(--s3-size-control-lg);
  padding: 0; border: 0; background: none; color: var(--s3-text); cursor: pointer;
}
.s3-dmenu__toggle[aria-expanded="true"] .s3-i { transform: rotate(180deg); }
.s3-dmenu__panel { grid-column: 1 / -1; padding-inline-start: var(--s3-drawer-padding-inline); background: var(--s3-surface-alt); }
.s3-dmenu__panel .s3-menu__tree { margin: 0; padding: 0; list-style: none; }
.s3-dmenu__panel .s3-menu__tree .s3-menu__tree { padding-inline-start: var(--s3-drawer-padding-inline); }
.s3-dmenu__panel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.s3-dmenu__panel li > a, .s3-dmenu__panel .s3-menu__all { display: flex; align-items: center; min-block-size: var(--s3-size-control-md); padding-inline: var(--s3-drawer-padding-inline); color: var(--s3-text); text-decoration: none; }
.s3-dmenu__panel li > .s3-menu__tree { grid-column: 1 / -1; }
.s3-dmenu__panel li > .s3-menu__tree[hidden] { display: none; }

/* ---------- нижняя панель: только телефон и планшет; на ширине компьютера её нет ---------- */
.s3-tabbar { display: none; }

@media (max-width: 991.98px) {
  /* ---------- основная строка: сетка над элементами H1 (зоны — display: contents, header.css). Значки — поиск и корзина; остальное в панели ---------- */
  .s3-hdr .s3-hrow--main .s3-hrow__in { display: grid; gap: var(--s3-space-1); align-items: center; }
  .s3-hdr .s3-hrow--main .s3-hzone > :not(#logo):not(.s3-hsearch):not(.s3-hactions) { display: none; }
  .s3-hdr .s3-hactions > :not(#cart) { display: none; }
  .s3-hdr .s3-hrow .s3-switch { display: none; }
  .s3-hdr .s3-action__label { display: none; }
  .s3-hdr .s3-menu { display: none; }
  .s3-hdr .s3-logo { flex: none; min-inline-size: 0; max-inline-size: 100%; }
  .s3-hdr .s3-logo a, .s3-hdr .s3-logo img { display: block; max-inline-size: 100%; }
  .s3-hdr .s3-logo__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .s3-hdr .s3-hsearch--bar { grid-row: 2; grid-column: 1 / -1; inline-size: auto; }
  /* значок: рамка — под строкой шапки, с полями страницы, на полосе цвета строки с тенью: читается полосой шапки, а не рамкой на первом экране;
     строка с «×» значка остаётся видна (P:\SHOP\design\search.md §5) */
  .s3-hdr .s3-hsearch--icon .s3-hsearch__panel {
    inset-block: calc(100% + var(--s3-space-2)) auto; inset-inline: var(--s3-container-gutter); inline-size: auto; max-inline-size: none; margin: 0;
  }
  .s3-hdr .s3-hsearch--icon.is-open::before {
    content: ""; position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: var(--s3-z-dropdown);
    block-size: calc(var(--s3-search-height-mobile) + 2 * var(--s3-space-2)); background: var(--s3-surface); box-shadow: var(--s3-search-list-shadow);
  }

  /* М1: меню слева, логотип точно по центру строки, значки справа. Логотип занимает все колонки, поэтому центр не зависит от ширины значков */
  .s3-hdr--m-logo-center .s3-hrow--main .s3-hrow__in { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .s3-hdr--m-logo-center .s3-header__burger { grid-row: 1; grid-column: 1; }
  .s3-hdr--m-logo-center .s3-hrow--main .s3-logo { grid-row: 1; grid-column: 1 / -1; justify-self: center; max-inline-size: calc(100% - 2 * (2 * var(--s3-size-control-md))); }
  .s3-hdr--m-logo-center .s3-hsearch--icon { grid-row: 1; grid-column: 3; }
  .s3-hdr--m-logo-center .s3-hactions { grid-row: 1; grid-column: 4; }

  /* М2: логотип слева, значки и меню справа */
  .s3-hdr--m-logo-start .s3-hrow--main .s3-hrow__in { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .s3-hdr--m-logo-start .s3-hrow--main .s3-logo { grid-row: 1; grid-column: 1; justify-self: start; }
  .s3-hdr--m-logo-start .s3-hsearch--icon { grid-row: 1; grid-column: 2; }
  .s3-hdr--m-logo-start .s3-hactions { grid-row: 1; grid-column: 3; }
  .s3-hdr--m-logo-start .s3-header__burger { grid-row: 1; grid-column: 4; }

  /* М3: логотип и значки, поиск строкой ниже; значок поиска не нужен: строка видна всегда, узел #search тот же */
  .s3-hdr--m-logo-search .s3-hrow--main .s3-hrow__in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .s3-hdr--m-logo-search .s3-header__burger { grid-row: 1; grid-column: 1; }
  .s3-hdr--m-logo-search .s3-hrow--main .s3-logo { grid-row: 1; grid-column: 2; justify-self: start; }
  .s3-hdr--m-logo-search .s3-hactions { grid-row: 1; grid-column: 3; }
  .s3-hdr--m-logo-search .s3-hsearch { grid-row: 2; grid-column: 1 / -1; inline-size: auto; }
  .s3-hdr--m-logo-search .s3-hsearch__toggle { display: none; }
  .s3-hdr--m-logo-search .s3-hsearch--icon .s3-hsearch__panel { position: static; display: flex; max-inline-size: none; margin-inline: 0; }
  .s3-hdr--m-logo-search .s3-hsearch--icon.is-open::before { content: none; }

  /* ---------- нижняя панель: не перекрывает содержимое (отступ снизу) и учитывает вырез экрана ---------- */
  .s3-tabbar {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--s3-z-sticky); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding-block-end: env(safe-area-inset-bottom); color: var(--s3-text-muted); background: var(--s3-surface); border-block-start: var(--s3-border-width-thin) solid var(--s3-border-subtle);
  }
  .s3-tabbar.is-typing { display: none; }
  .s3-tabbar__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3-tabbar-gap); min-block-size: var(--s3-tabbar-height);
    padding-block: var(--s3-tabbar-padding-block); color: inherit; font-size: var(--s3-font-size-2xs); text-decoration: none;
  }
  .s3-tabbar__item:hover, .s3-tabbar__item:focus { color: var(--s3-text); text-decoration: none; }
  .s3-tabbar__item[aria-current] { color: var(--s3-text); font-weight: var(--s3-font-weight-bold); }
  .s3-tabbar__item[aria-current] .s3-i { color: var(--s3-tabbar-active-accent); }
  .s3-tabbar__badge { inset-block-start: 0; inset-inline: 50% auto; background: var(--s3-tabbar-badge-accent); color: var(--s3-on-accent); }
  .s3-tabbar__label { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .s3-has-tabbar body { padding-block-end: calc(var(--s3-tabbar-height) + env(safe-area-inset-bottom)); }
  .s3-has-tabbar .s3-toast { inset-block-end: calc(var(--s3-tabbar-height) + env(safe-area-inset-bottom) + var(--s3-space-4)); }
}