/* Меню категорий: полоса, выпадение, шторка на телефоне, подложка — вынесено из shop3.css без изменения вида (W0a, plan-0.4 §2).
   Подключается после shop3.css (event.php headerAssets(), CHROME_CSS) тем же набором CSS. Шаблон: common/menu, скрипт js/shop3.js */

.s3-menu { background: var(--s3-surface); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-menu__head { display: none; }
.s3-menu__list { display: flex; flex-wrap: wrap; gap: 0 var(--s3-space-1); margin: 0 auto; list-style: none; }
.s3-menu__item { position: relative; }
.s3-menu__link {
  display: inline-flex; align-items: center; gap: var(--s3-space-1); padding: var(--s3-space-3) var(--s3-space-3);
  color: var(--s3-text); font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-medium); text-decoration: none;
}
.s3-menu__link:hover, .s3-menu__item:focus-within > .s3-menu__link { color: var(--s3-link); text-decoration: none; }
/* Закрытое подменю — display: none, а не visibility: hidden: скрытый блок у последнего пункта строки выходил за окно и давал
   горизонтальную прокрутку всей страницы (D5: airy, 1312 px — «Bikes» 1124…1364). Появление — @starting-style и display allow-discrete;
   браузер без них открывает сразу, без анимации */
.s3-menu__drop {
  position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: var(--s3-z-dropdown); min-inline-size: var(--s3-layout-dropdown); padding: var(--s3-space-4);
  background: var(--s3-surface); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-radius-md); box-shadow: var(--s3-shadow-lg);
  display: none; opacity: 0; transform: translateY(var(--s3-space-2));
  transition: opacity var(--s3-duration-base), transform var(--s3-duration-base);
  transition: opacity var(--s3-duration-base), transform var(--s3-duration-base), display var(--s3-duration-base) allow-discrete;
}
@media (min-width: 992px) {
  .s3-menu__item:hover > .s3-menu__drop, .s3-menu__item:focus-within > .s3-menu__drop { display: block; opacity: 1; transform: none; }
  @starting-style {
    .s3-menu__item:hover > .s3-menu__drop, .s3-menu__item:focus-within > .s3-menu__drop { opacity: 0; transform: translateY(var(--s3-space-2)); }
  }
}
.s3-menu__sub { columns: var(--s3x-cols); column-gap: var(--s3-space-5); margin: 0 0 var(--s3-space-3); padding: 0; list-style: none; }
.s3-menu__sub a { display: block; padding: var(--s3-space-1) 0; color: var(--s3-text); text-decoration: none; white-space: nowrap; }
.s3-menu__sub a:hover { color: var(--s3-link); }
.s3-menu__all { display: inline-flex; align-items: center; gap: var(--s3-space-1); font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-medium); }
.s3-overlay { position: fixed; inset: 0; z-index: var(--s3-z-overlay); background: var(--s3-overlay); }
@media (max-width: 991.98px) {
  .s3-menu {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: var(--s3-z-drawer); width: min(var(--s3-menu-drawer-width), var(--s3-viewport-drawer)); overflow: auto;
    border: 0; transform: translateX(-100%); transition: transform var(--s3-duration-base) var(--s3-easing-standard); /* rtl-ok: [dir="rtl"] ниже */
  }
  [dir="rtl"] .s3-menu:not(.is-open) { transform: translateX(100%); } /* шторка выезжает от начала строки — в RTL справа */
  .s3-menu.is-open { transform: none; box-shadow: var(--s3-shadow-lg); }
  .s3-menu__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s3-space-3) var(--s3-space-4); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
  .s3-menu__list { flex-direction: column; padding: 0; }
  .s3-menu__link { display: flex; justify-content: space-between; padding: var(--s3-space-3) var(--s3-space-4); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
  .s3-menu__drop { position: static; display: none; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; border-radius: 0; padding: var(--s3-space-2) var(--s3-space-5); background: var(--s3-surface-alt); }
  .s3-menu__item.is-open > .s3-menu__drop { display: block; }
  .s3-menu__sub { columns: 1; }
}
/* RTL: стрелка «все» смотрит по направлению письма (общее правило стрелок слайдера — в shop3.css) */
[dir="rtl"] .s3-menu__all .s3-i { transform: scaleX(-1); }

/* Меню документа (design-document.md §4, H2): `.s3-menu--lazy`. Правила выше — вид 0.3 и шторка телефона; выпадение здесь — `.s3-menu__panel`, его открывает
   js/chrome/menu.js, поэтому :hover правил 0.3 к нему не относятся. Край: текст первого пункта вровень с логотипом и содержимым — у списка отрицательный
   отступ на отступ пункта */
.s3-menu--lazy { position: relative; }
.s3-menu--in-row { position: static; min-inline-size: 0; background: none; border: 0; }
.s3-menu--lazy .s3-menu__list { gap: 0 var(--s3-menu-gap); margin-block: 0; margin-inline: calc(var(--s3-menu-item-padding-inline) * -1); padding: 0; }
.s3-menu--lazy .s3-menu__item { position: static; display: flex; flex: none; align-items: center; max-inline-size: 100%; }
.s3-menu--lazy .s3-menu__item--list, .s3-menu--lazy .s3-menu__item--more { position: relative; }
.s3-menu--lazy .s3-menu__item[hidden] { display: none; }
.s3-menu--lazy .s3-menu__link { padding: var(--s3-menu-padding-block) var(--s3-menu-item-padding-inline); border-block-end: var(--s3-border-width-thick) solid transparent; }
.s3-menu--lazy .s3-menu__link:hover { color: var(--s3-link); }
/* полоса меню на своей палитре (inverse, brand): цвет ссылки там часто равен цвету текста — наведение без отклика. Подчёркиваем текст пункта
   (VD-2 #14); на палитре страницы (scheme-main) — как было, цветом */
[class*="scheme-"]:not(.scheme-main) .s3-menu--lazy .s3-menu__link:hover .s3-menu__text,
[class*="scheme-"]:not(.scheme-main) .s3-menu--lazy .s3-menu__item:focus-within > .s3-menu__link .s3-menu__text { text-decoration: underline; }
.s3-menu--lazy .s3-menu__link[aria-current] { color: var(--s3-text); font-weight: var(--s3-font-weight-bold); border-block-end-color: var(--s3-text); }
.s3-menu__badge { padding-inline: var(--s3-space-1); border-radius: var(--s3-radius-sm); font-size: var(--s3-font-size-2xs); font-weight: var(--s3-font-weight-bold); }
.s3-menu__badge--accent { background: var(--s3-accent); color: var(--s3-on-accent); }
.s3-menu__badge--primary { background: var(--s3-primary); color: var(--s3-on-primary); }
.s3-menu__badge--sale { background: var(--s3-sale); color: var(--s3-on-sale); }

/* Кнопка раскрытия — только с JS: без него выпадений нет, ссылка ведёт на страницу (§4) */
.s3-menu__toggle, .s3-menu__more, .s3-menu__catalog { display: none; align-items: center; justify-content: center; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; }
.s3-menu--js .s3-menu__toggle, .s3-menu--js .s3-menu__more, .s3-menu--catalog .s3-menu__catalog { display: inline-flex; }
@media (scripting: enabled) { .s3-menu__toggle, .s3-menu__more { display: inline-flex; } }
.s3-menu .s3-menu__toggle[hidden] { display: none; }
.s3-menu__toggle { block-size: var(--s3-menu-toggle-width); inline-size: var(--s3-menu-toggle-width); margin-inline-start: calc(var(--s3-menu-item-padding-inline) * -1); }
.s3-menu__toggle:hover, .s3-menu__more:hover { color: var(--s3-link); }
.s3-menu__toggle[aria-expanded="true"] .s3-i, .s3-menu__more[aria-expanded="true"] .s3-i { transform: rotate(180deg); }
.s3-menu__more { gap: var(--s3-space-1); padding: var(--s3-menu-padding-block) var(--s3-menu-item-padding-inline); border-block-end: var(--s3-border-width-thick) solid transparent; font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-medium); }

/* «В одну строку» (§4.1). Без JS — прокрутка строки, «More» скрыт. С JS: до первого замера — без полосы прокрутки (условие scripting — улучшение, старый браузер покажет её на миг), после — без обрезки выпадений */
.s3-menu--more .s3-menu__list { flex-wrap: nowrap; overflow-x: auto; }
.s3-menu--more.s3-menu--js .s3-menu__list { overflow: hidden; }
@media (scripting: enabled) { .s3-menu--more .s3-menu__list { overflow: hidden; } }
.s3-menu--more.is-ready .s3-menu__list { overflow: visible; }
.s3-menu--more .s3-menu__link { white-space: nowrap; }
.s3-menu__more-list {
  position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: var(--s3-z-dropdown); inline-size: var(--s3-menu-more-width); margin: 0;
  padding: var(--s3-menu-more-padding-block) 0; color: var(--s3-text); background: var(--s3-surface); border: var(--s3-border-width-thin) solid var(--s3-border-subtle);
  border-radius: var(--s3-menu-more-radius); box-shadow: var(--s3-menu-more-shadow); font-size: var(--s3-menu-more-font-size); list-style: none;
}
.s3-menu--lazy .s3-menu__more-list .s3-menu__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.s3-menu__more-list .s3-menu__link { padding: var(--s3-menu-more-padding-block) var(--s3-menu-more-padding-inline); white-space: normal; border-block-end: 0; }
.s3-menu--lazy .s3-menu__more-list .s3-menu__panel { position: static; grid-column: 1 / -1; padding: 0 var(--s3-menu-more-padding-inline) var(--s3-menu-more-padding-block); background: none; border: 0; box-shadow: none; }

/* Выпадения: `list` — у своего пункта; панель мегаменю — во всю строку (ближайший предок с position) */
.s3-menu__panel { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: var(--s3-z-dropdown); color: var(--s3-text); background: var(--s3-surface); border-block-start: var(--s3-border-width-thin) solid var(--s3-border-subtle); box-shadow: var(--s3-megamenu-shadow); }
.s3-menu__panel--list { inset-inline: 0 auto; min-inline-size: var(--s3-dropdown-width); padding: var(--s3-dropdown-padding-block) var(--s3-dropdown-padding-inline); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-dropdown-radius); box-shadow: var(--s3-dropdown-shadow); }
.s3-menu__mega { display: grid; gap: var(--s3-megamenu-gap); padding-block: var(--s3-megamenu-padding-block); }
.s3-menu__mega--promo { grid-template-columns: minmax(0, 1fr) var(--s3-megamenu-promo-width); }
.s3-menu__columns { display: grid; grid-template-columns: repeat(var(--s3x-menu-columns), minmax(0, 1fr)); gap: var(--s3-megamenu-gap); }
.s3-menu__columns > .s3-menu__all { grid-column: 1 / -1; }
.s3-menu__heading { display: block; color: var(--s3-text); font-weight: var(--s3-font-weight-medium); text-decoration: none; }
.s3-menu__heading:hover { color: var(--s3-link); }
.s3-menu__image { display: block; inline-size: var(--s3-megamenu-image-size); block-size: auto; margin-block-end: var(--s3-space-2); }
.s3-menu__tree { margin: 0; padding: 0; list-style: none; }
.s3-menu__tree .s3-menu__tree { padding-inline-start: var(--s3-space-3); }
.s3-menu__tree a { display: block; padding-block: var(--s3-space-1); color: var(--s3-text); text-decoration: none; }
.s3-menu__tree a:hover { color: var(--s3-link); }
.s3-menu__promo { position: relative; display: block; color: var(--s3-text); text-decoration: none; }
/* a:hover, a:focus темы и Bootstrap (0,1,1) сильнее одного класса: без этого блок-ссылка при наведении подчёркнута и в цвете ссылки (VD-2 #2) */
.s3-menu__promo:is(:hover, :focus), .s3-menu__product:is(:hover, :focus) { color: var(--s3-text); text-decoration: none; }
.s3-menu__promo img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--s3-radius-md); }
.s3-menu__promo-title { display: block; margin-block-start: var(--s3-space-2); font-weight: var(--s3-font-weight-medium); }
.s3-menu__products { display: grid; gap: var(--s3-space-3); margin: 0; padding: 0; list-style: none; }
.s3-menu__product { display: grid; grid-template-columns: var(--s3-megamenu-image-size) minmax(0, 1fr); gap: 0 var(--s3-space-3); align-items: center; color: var(--s3-text); text-decoration: none; }
.s3-menu__product img { grid-row: span 2; inline-size: 100%; block-size: auto; }
.s3-menu__price { color: var(--s3-price); font-weight: var(--s3-font-weight-medium); }
[dir="rtl"] .s3-menu__columns .s3-menu__all .s3-i, [dir="rtl"] .s3-menu__panel--list .s3-menu__all .s3-i { transform: rotate(180deg); }

/* В строке хедера панель открывается от контейнера строки: свой контейнер фрагмента без отступа и лимита */
/* Панель в строке — по ширине контейнера строки, а не во весь экран: у неё свой край, как у «More» и списков (рамка, скругление снизу —
   ночью тень на тёмной странице не видна), а текст — с поля контейнера, вровень с текстом первого пункта меню, за вычетом рамки (VD-2 #9; было megamenu-gap:
   на 1900 и 2560 текст панели на 12–16 px левее пунктов) */
.s3-menu--in-row .s3-menu__mega { padding-inline: calc(var(--s3-container-gutter) - var(--s3-border-width-thin)); }
.s3-menu--in-row .s3-menu__panel--mega { border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-end-start-radius: var(--s3-dropdown-radius); border-end-end-radius: var(--s3-dropdown-radius); }

/* «Все категории» (§3.1): кнопка и вертикальный список; выпадение пункта — сбоку */
.s3-menu--catalog { position: relative; }
.s3-menu__catalog { gap: var(--s3-space-2); padding: var(--s3-space-2) var(--s3-space-3); background: var(--s3-surface-alt); border-radius: var(--s3-radius-sm); font-weight: var(--s3-font-weight-medium); }
.s3-menu__catalog-list {
  position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: var(--s3-z-dropdown); inline-size: var(--s3-dropdown-width); margin: 0; padding: var(--s3-dropdown-padding-block) 0;
  color: var(--s3-text); background: var(--s3-surface); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-dropdown-radius); box-shadow: var(--s3-dropdown-shadow); list-style: none;
}
.s3-menu--lazy .s3-menu__catalog-list .s3-menu__item { position: static; justify-content: space-between; }
.s3-menu--catalog .s3-menu__toggle { margin-inline-start: 0; }
.s3-menu--catalog .s3-menu__panel { inset-block-start: 0; inset-inline: 100% auto; inline-size: max-content; max-inline-size: var(--s3-layout-dialog); }
/* пункт, чьё выпадение открыто, подсвечен — глаз связывает строку списка с панелью; у панели свой край и скругление снаружи, как у списка
   (угол к списку прямой) (VD-2 #10) */
.s3-menu--lazy .s3-menu__catalog-list .s3-menu__item:hover, .s3-menu--lazy .s3-menu__catalog-list .s3-menu__item:has(> .s3-menu__toggle[aria-expanded="true"]) { background: var(--s3-surface-alt); }
/* на палитре полосы (inverse) surface-alt почти совпадает с фоном списка, а цвет ссылки — с текстом: открытый пункт ещё и подчёркнут */
.s3-menu--lazy .s3-menu__catalog-list .s3-menu__item:has(> .s3-menu__toggle[aria-expanded="true"]) > .s3-menu__link .s3-menu__text { text-decoration: underline; }
.s3-menu--catalog .s3-menu__panel--mega { border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-dropdown-radius); border-start-start-radius: 0; }
.s3-menu--catalog .s3-menu__toggle .s3-i { transform: rotate(-90deg); }
[dir="rtl"] .s3-menu--catalog .s3-menu__toggle .s3-i { transform: rotate(90deg); }

/* Ссылки роли одной строкой (§3.1) */
.s3-menu-links { display: flex; flex-wrap: wrap; gap: 0 var(--s3-space-3); margin: 0; padding: 0; list-style: none; }
.s3-menu-links a { color: inherit; text-decoration: none; }
.s3-menu-links a:hover, .s3-menu-links a[aria-current] { text-decoration: underline; }

@media (max-width: 991.98px) {
  .s3-menu--lazy .s3-menu__row { padding: 0; }
  .s3-menu--lazy .s3-menu__list { flex-direction: column; flex-wrap: nowrap; margin: 0; overflow: visible; }
  .s3-menu--lazy .s3-menu__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .s3-menu--lazy .s3-menu__toggle { margin: 0; block-size: var(--s3-size-control-lg); inline-size: var(--s3-size-control-lg); }
  .s3-menu--lazy .s3-menu__item { border-block-end: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
  .s3-menu--lazy .s3-menu__link { display: flex; padding: var(--s3-space-3) var(--s3-space-4); white-space: normal; border-block-end: 0; }
  .s3-menu--lazy .s3-menu__panel { position: static; grid-column: 1 / -1; min-inline-size: 0; padding: var(--s3-space-2) var(--s3-space-5); background: var(--s3-surface-alt); border: 0; border-radius: 0; box-shadow: none; }
  .s3-menu--lazy .s3-menu__item--more { display: none; }
  .s3-menu--lazy { position: fixed; }
  .s3-menu--in-row { background: var(--s3-surface); }
  .s3-menu--catalog { display: none; }
}