/* Шапка сайта (новая витрина, часть 1; спецификация 03; Р22, Р25, Р34, Р37) — по эталону
   docs/design/reference/layout.css. Первая строка на каждой странице: ☰ · логотип по центру экрана ·
   профиль. Размеры — только токены, цвета — только роли темы (сторожа те же, что у components.css). */

.site-header { background: var(--page); border-bottom: 1px solid var(--border); }
.header-row1 {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3);
  width: 100%; height: var(--header-row1); max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  background: var(--page);
}
#burger { justify-self: start; }
#profile { justify-self: end; }
/* ☰ без разделов прячется, а место остаётся: логотип стоит по центру экрана, а не между кнопками. */
#burger[hidden] { display: inline-flex; visibility: hidden; }

/* Логотип сайта — ссылка на главную (Р34); нет своего знака — имя сайта текстом, до двух строк. */
.logo {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  max-width: var(--logo-box-w); height: var(--logo-box-h); color: var(--ink); text-decoration: none;
}
.logo__img { height: var(--logo-box-h); width: auto; max-width: var(--logo-box-w); object-fit: contain; }
.logo__img[hidden], .logo__name[hidden] { display: none; }
.logo__name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-height: var(--logo-box-h); text-align: center; overflow-wrap: anywhere;
  font-family: var(--font-title); font-size: var(--text-md); font-weight: var(--weight-medium);
  line-height: var(--leading-title); letter-spacing: 0.02em;
}
/* Крупнее — там, где коробка знака выше (от 1100: 56 против 40): две строки имени помещаются целиком. */
@media (min-width: 1100px) {
  .logo__name { font-size: var(--title-sm); }
}

/* ── Вторая строка — только на странице меню: заведение · способ · кошелёк (Р22, Р28, Р68) ─────────────── */
:root { --context-w: calc(var(--space-8) * 3 + var(--space-5)); }
@media (min-width: 1100px) { :root { --context-w: calc(var(--space-8) * 4 + var(--space-2)); } }
.context-row {
  display: grid; grid-template-columns: var(--context-w) minmax(0, 1fr) var(--context-w); align-items: center;
  gap: var(--space-4); width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-4);
  background: var(--page); font-family: var(--font-text); font-size: var(--text-md); color: var(--ink);
}
.context-row--two { grid-template-columns: var(--context-w) minmax(0, 1fr); }
.scenario { display: grid; gap: var(--space-1); min-width: 0; }
.scenario .segments { display: flex; width: 100%; overflow: hidden; }
.scenario .segments__item { flex: 1 1 auto; padding: 0 var(--space-3); }
.scenario__single { display: flex; align-items: center; min-height: var(--control-lg); font-weight: var(--weight-semibold); }
.scenario__select { display: none; justify-content: flex-start; width: 100%; border-color: var(--border); }
/* Выбор способа — одного размера при любом способе и любом поле под ним (З32; владелец 07.10: «Доставка / Самовывоз»
   менял размер): высота — как у поля «Когда забрать» под ним, а не телефонные 44 у кнопки (`--tap`). */
.context-row .scenario__select { min-height: var(--control-lg); padding: 0 var(--space-3); }
.scenario__select > span { flex: 1; text-align: left; }
.scenario__select svg { width: var(--icon-md); height: var(--icon-md); color: var(--gold); flex: none; }
.scenario--compact .segments { display: none; }
.scenario--compact .scenario__select { display: inline-flex; }
.scenario__context {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--space-5);
  color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-title);
}
.scenario__context svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; color: var(--gold); }
/* Поле «Когда забрать» под самовывозом с заказом (Р115, И107; эталон `layout.css`, «.ww») — как поле формы: подпись
   сверху, значок, значение, ⌄; кнопка окна выбора. Во всю ширину ряда способов (владелец 06.10: «Где забрать» убрано —
   заведение выбрано карточкой; раскладка — симметрично ряду над ним). */
.ww { display: flex; gap: var(--space-2); width: 100%; min-width: 0; }
.ww__field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); min-width: 0;
  min-height: var(--control-lg); margin: 0; padding: var(--space-1) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.ww__field--when { flex: 1 1 auto; }
.ww__field:hover { border-color: var(--gold2); box-shadow: var(--shadow-1); }
.ww__field:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Подпись — в строку: иначе при расчёте высоты ряда (телефон) она переносится, и поля с кнопкой способа вырастают. */
.ww__label {
  grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-title);
}
.ww__value {
  grid-column: 1; display: flex; align-items: center; gap: var(--space-1); min-width: 0; color: var(--ink);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-title);
}
.ww__value svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.ww__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww__chevron { grid-column: 2; grid-row: 1 / span 2; width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
.ww__field.is-warn { border-color: var(--warn); }
.ww__field.is-warn .ww__value svg { color: var(--warn); }
/* С полями строка выше: карточки по бокам растут вровень (Р28). */
@media (min-width: 900px) { .context-row--order { --context-card-h: calc(var(--control-lg) * 2 + var(--space-2)); } }
/* Перенос корзины (часть 2, постановка §5): нажатый выбор, пока грузится меню выбранного способа. */
.context-row [aria-busy="true"] { cursor: progress; opacity: 0.6; }
/* «в корзине 3» у бренда в «Где заказываем?» (И19); список — в слое страницы, не в строке. */
.menu__cart {
  flex: none; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--tint); color: var(--accent);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-text); white-space: nowrap;
}

@media (min-width: 768px) {
  /* Р28: вкладки способа — вровень с верхом карточек, строка под ними — вровень с низом. */
  .scenario { height: var(--context-card-h); align-content: space-between; gap: 0; }
  .scenario__context { min-height: 0; }
}
@media (max-width: 767px) {
  .context-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-top: var(--space-3); border-bottom: 1px solid var(--border); }
  #venue { grid-column: 1; grid-row: 1; }
  #wallet { grid-column: 2; grid-row: 1; }
  .context-row--two #venue { grid-column: 1 / -1; }
  .scenario { grid-column: 1 / -1; grid-row: 2; }
  .scenario .segments { display: none; }
  .scenario__select { display: inline-flex; }
  /* Узкие карточки (как у эталона): поля меньше, стрелки нет, знак меньше — место тексту. */
  .context-card { padding: 0 var(--space-3); gap: var(--space-2); }
  .context-card__chevron { display: none; }
  .context-card__logo { width: var(--control-sm); height: var(--control-sm); }
}
/* Узкий планшет (768–899): карточки строкой пополам, под ними выбор способа и то, что под ним, — тоже пополам, по той
   же сетке (симметрия, владелец 06.10). При ЛЮБОМ способе (З32, владелец 07.10): прежде так стоял только самовывоз с
   заказом, а у доставки выбор уезжал в средний столбец ряда карточек — и менял размер и место при смене способа. */
@media (min-width: 768px) and (max-width: 899px) {
  .context-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--space-3); }
  .context-row #venue { grid-column: 1; grid-row: 1; }
  .context-row #wallet { grid-column: 2; grid-row: 1; }
  .context-row.context-row--two #venue { grid-column: 1 / -1; }
  .context-row .scenario {
    grid-column: 1 / -1; grid-row: 2; height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start; align-items: center; gap: var(--space-2);
  }
  .context-row .scenario .segments { display: none; }
  .context-row .scenario__select { display: inline-flex; justify-content: flex-start; }
  .context-row--order .scenario__context, .context-row--order .ww { display: contents; }
}
@media (max-width: 767px) {
  /* Телефон: «Самовывоз ⌄» и «Когда забрать» — каждое во всю ширину, одно под другим (симметрия, владелец 06.10). */
  .scenario--order { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .scenario--order .scenario__context, .scenario--order .ww { display: contents; }
  .scenario--order .ww__field { min-height: var(--control-lg); max-width: none; }
}

/* Высота липкой части шапки — для всего, что липнет под ней (лента категорий меню, полоса «Назад»
   кабинета) и для прокрутки к разделу: меряет `header.js`, умолчание — первая строка. */
:root { --header-h: var(--header-row1); }
html { scroll-padding-top: var(--header-h); }
/* Пока внизу видна плашка корзины (`has-cartbar`), снизу страницы — столько же места, сколько отступ страницы под
   ней (cart.css): кнопка, на которую встал фокус с клавиатуры, прокручивается выше плашки, а не под неё (обход
   03.10.2026: на телефоне Tab ставил фокус на «+» за плашкой). */
html:has(> body.has-cartbar) {
  scroll-padding-bottom: calc(var(--control-lg) + var(--space-2) + var(--space-6) + env(safe-area-inset-bottom));
}

/* Липкость (Р25): на ПК липнет вся шапка, на телефоне — первая строка; высота строки не меняется (Р37).
   Низкий экран (телефон боком: 844 × 390, у самых больших — до 430) — тоже только первая строка: вся шапка
   (145), лента категорий и плашка корзины оставляли блюдам 121 точку из 390 (итоговая проверка части 2).
   Граница — 480: окно ПК в 500 высотой целую шапку ещё вмещает, и колонка корзины там прокручивается вся,
   как ей положено на низком экране. Вторая строка уезжает с прокруткой, как на телефоне, и отделена от
   страницы своей чертой. */
@media (min-width: 768px) and (min-height: 481px) {
  .site-header { position: sticky; top: 0; z-index: var(--z-header); }
}
@media (max-width: 767px), (max-height: 480px) {
  .site-header { display: contents; }
  .header-row1 { position: sticky; top: 0; z-index: var(--z-header); border-bottom: 1px solid var(--border); }
}
@media (min-width: 768px) and (max-height: 480px) {
  .context-row { border-bottom: 1px solid var(--border); }
}