/* Каталог на сайте (новая витрина, часть 2; постановка docs/superpowers/specs/2026-10-02-storefront-part2-menu-and-cart.md,
   раздел 3) — по эталону docs/design/reference/layout.css («Каталог») и components.css («Карточка блюда: плитка и
   строка», «Дополнения меню»): строка инструментов, колонка корзины справа, липкая полоса категорий, разделы и
   плитки со счётчиком и метками, строка блюда на телефоне. Размеры — только токены (tokens.css), цвета — только
   роли темы: это стережёт tests/design/test_tokens_guard.py. Карточка блюда — своим файлом (dish.css),
   корзина — cart.css. */

/* ── Экран меню и главная (часть 4 — тот же каталог под первым экраном и баннерами): во всю ширину страницы,
   края — вровень с карточками второй строки шапки ── */
.screen:is([data-screen='menu'], [data-screen='home']) {
  max-width: var(--page-max); padding: var(--space-4) var(--gutter) var(--space-7);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text); color: var(--ink);
}
/* Фон страницы меню и главной — тот же, что у шапки (как у эталона): полоса категорий липнет без шва. */
body:has(> #screen:is([data-screen='menu'], [data-screen='home'])) { background: var(--page); }
.menu-page { min-width: 0; }
.menu-page > .empty { padding: var(--space-6) 0; color: var(--muted); }
/* «Открыть меню» под словами «Это меню сейчас не показывается» — по центру, как и сами слова. */
.menu-page > .btn { display: flex; width: fit-content; margin-inline: auto; }

/* Общее правило кнопок прежних экранов (`button` в app.css: золотая заливка во всю строку, поля, тень,
   блик) деталям каталога не подходит — они начинают с чистого листа, как детали components.css. */
.dish-tile__photo, .dish-tile__add, .categories__arrow {
  width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background-image: none; font: inherit; letter-spacing: normal; color: inherit;
}
:is(.dish-tile__photo, .dish-tile__add, .categories__arrow):not(:disabled):not(.ghost):not(.opt) { animation: none; }

/* ── Каталог: строка инструментов и колонка корзины сверху, под ними — полоса и разделы ── */
.catalog {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--cart-width); grid-template-rows: auto 1fr;
  column-gap: var(--space-6); row-gap: var(--space-3); align-items: start;
}
#tools { grid-column: 1; grid-row: 1; }
.cart-column { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-width: 0; }
.catalog__main { grid-column: 1; grid-row: 2; min-width: 0; }
@media (max-width: 1099px) {
  .catalog { grid-template-columns: minmax(0, 1fr); }
  .cart-column { display: none; }
}

/* ── Строка инструментов: поиск, «Фильтры», значок сетки — одной высоты ── */
.tools { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tools .search { flex: 1; min-width: 0; }
.tools .btn, .tools .icon-btn { height: var(--control-lg); min-height: var(--control-lg); }
.tools .icon-btn { width: var(--control-lg); border: 1px solid var(--border); background: var(--panel); }
.tools__filters { position: relative; }
.tools__filters svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.tools__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-5); height: var(--space-5);
  padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
  font-size: var(--text-xs); line-height: 1;
}
.tools__count[hidden] { display: none; }
@media (max-width: 767px) {
  /* Слово «Фильтры» на телефоне не видно, но у кнопки остаётся имя для чтения экрана. */
  .tools__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tools__filters { width: var(--control-lg); padding: 0; }
  .tools__count { position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); }
}

/* Выбранные фильтры — чипами под строкой; плашки (ссылка не отсюда, старое наличие) — под ними. */
.tools-chips { padding-top: var(--space-2); }
.tools-chips[hidden] { display: none; }
.catalog__notes { display: grid; gap: var(--space-2); }
.catalog__notes:not(:empty) { padding-top: var(--space-2); }
.catalog__notes .notice { margin: 0; }

/* Панель фильтров и список раскладок — меню слоя (#layer), на телефоне — шторкой. */
.menu--wide { width: min(calc(var(--space-8) * 5 + var(--space-6)), calc(100vw - var(--space-4))); padding-bottom: 0; }
.menu__block { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.menu__caption { font-size: var(--text-sm); }
.menu__note { margin: 0; padding: 0 var(--space-3); color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-text); }
/* Аллергенов в меню бывает два десятка: панель листается, а «Сбросить» и «Показать» стоят внизу на виду.
   Низ прилипает к самому краю прокрутки: у панели (`.menu--wide`) нет нижнего поля, его даёт сам низ — с полем
   под «Сбросить» и «Показать» оставалась полоса в 8 точек, и сквозь неё просвечивали чипы (обход 03.10.2026). */
.menu__foot {
  position: sticky; bottom: 0; z-index: var(--z-raised);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3);
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-top: 1px solid var(--border);
  background: var(--panel);
}
/* В шторке листается сама шторка: своя прокрутка панели (`.menu`) держала бы низ панели не у края экрана. */
#filters-menu.menu--in-sheet { overflow: visible; }
.menu__item:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Полоса категорий: липкая, на ПК кончается перед корзиной (Р29) ── */
.categories-bar {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky); height: var(--categories-h); background: var(--page);
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
}
@media (min-width: 1100px) { .categories-bar { margin-right: 0; padding-right: 0; } }
.categories-frame { position: relative; height: 100%; }
.categories {
  position: relative; display: flex; align-items: center; gap: var(--space-2); height: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.categories::-webkit-scrollbar { display: none; }
.categories__item {
  display: inline-flex; align-items: center; flex: none; min-height: var(--control-md); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; white-space: nowrap;
  font-weight: var(--weight-medium); line-height: var(--leading-title);
  transition: background-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
}
.categories__item:hover { background: var(--tint); }
.categories__item[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
.categories__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.categories__arrow { display: none; }
@media (min-width: 768px) and (hover: hover) {
  .categories__arrow:not([hidden]) {
    position: absolute; top: 0; bottom: 0; z-index: var(--z-raised); display: flex; align-items: center;
    width: calc(var(--control-sm) + var(--space-5)); cursor: pointer; color: var(--ink);
  }
  .categories__arrow--back { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--page) 60%, transparent); }
  .categories__arrow--more { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--page) 60%, transparent); }
  .categories__arrow svg {
    width: var(--control-sm); height: var(--control-sm); padding: var(--space-1); border: 1px solid var(--border);
    border-radius: var(--radius-pill); background: var(--panel); box-shadow: var(--shadow-1);
  }
  .categories__arrow:hover svg { border-color: var(--gold2); }
}
@media (max-width: 767px) { .categories__item { min-height: var(--tap); } }

/* ── Разделы: заголовок и число блюд, сетка плиток ── */
#sections { display: grid; gap: var(--space-7); padding-top: var(--space-4); }
/* Прокрутка к разделу — под полосой категорий (поверх шапки отступ даёт `scroll-padding-top` страницы). */
.menu-section { display: grid; gap: var(--space-4); min-width: 0; scroll-margin-top: var(--categories-h); }
.menu-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.menu-section__head h2 {
  min-width: 0; margin: 0; font-family: var(--font-title); font-size: var(--title-lg); font-weight: var(--weight-medium);
  line-height: var(--leading-title); letter-spacing: 0.01em; color: var(--ink); text-align: left; overflow-wrap: anywhere;
}
.menu-section__count { flex: none; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.dish-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 767px) { .dish-grid { gap: var(--space-4); } #sections { gap: var(--space-6); } }

/* ── Плитка блюда ── */
/* Плитка — контейнер для своей ширины: раскладка её низа зависит от ширины самой плитки, а у плиток одного ряда
   она одна (узкая плитка — ниже). `--action-h` — высота «+» и счётчика: на ПК --control-md, на телефоне --tap. */
.dish-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel);
  transition: box-shadow var(--motion-base) var(--ease);
  container: dish-tile / inline-size; --action-h: var(--control-md);
}
.dish-tile:hover { box-shadow: var(--shadow-1); }
.dish-tile__photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--cream); cursor: pointer;
}
.dish-tile__photo:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dish-tile__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-decor) var(--ease); }
.dish-tile:hover .dish-tile__photo img { transform: scale(1.03); }
/* Заглушка вместо фото (№49): имя заведения на узоре — на плитке и в карточке. */
.placeholder {
  display: grid; place-items: center; width: 100%; height: 100%; padding: var(--space-2); text-align: center;
  font-family: var(--font-title); font-size: var(--title-sm); letter-spacing: 0.1em; color: var(--gold2); overflow-wrap: anywhere;
  background: repeating-linear-gradient(135deg, var(--card) 0 var(--space-3), var(--cream) var(--space-3) var(--space-5));
}
.dish-tile__left {
  position: absolute; left: var(--space-2); bottom: var(--space-2); z-index: var(--z-raised); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--pistachio); color: var(--dark);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-text);
}
.dish-tile__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; padding: var(--space-4); text-align: left; }
/* Название — до двух строк (в узкой плитке — до трёх). Межстрочный — `--leading-clamp`: при 1.2 «Й» и «Ё» первой
   скрытой строки оставляли точки под последней видимой. Слова переносятся только целиком, по пробелу (или после
   дефиса); посреди слова — лишь слово длиннее строки. */
.dish-tile__title {
  font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: var(--leading-clamp); cursor: pointer;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word;
}
.dish-tile__desc {
  color: var(--muted); font-size: var(--text-sm);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.dish-tile__meta { display: flex; gap: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.dish-tile__mark { color: var(--muted); font-size: var(--text-xs); }
/* Низ плитки — цена и «+» (счётчик) одной строкой высотой с кнопку: цена стоит на одной высоте и у плитки с
   причиной словами или вовсе без кнопки. */
.dish-tile__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
  min-height: calc(var(--action-h) + var(--space-2)); margin-top: auto; padding-top: var(--space-2);
}
.dish-tile__price { font-family: var(--font-title); font-size: var(--title-sm); font-weight: var(--weight-medium); line-height: var(--leading-title); white-space: nowrap; }
.dish-tile__add {
  display: inline-grid; place-items: center; flex: none; width: var(--control-md); height: var(--control-md);
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--title-sm);
  line-height: 1; cursor: pointer; transition: background-color var(--motion-fast) var(--ease);
}
.dish-tile__add:hover { background: var(--accent-hover); }
.dish-tile__add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dish-tile__add:disabled, .dish-tile .counter button:disabled { opacity: 0.45; cursor: not-allowed; }
.dish-tile .counter { flex: none; }
.dish-tile__reason { color: var(--err); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
/* Недоступное не исчезает (§8.3): серым, причина словами; «−» у счётчика — в полную силу. */
.dish-tile.is-off .dish-tile__photo, .dish-tile.is-off .dish-tile__title, .dish-tile.is-off .dish-tile__desc,
.dish-tile.is-off .dish-tile__meta, .dish-tile.is-off .dish-tile__price { opacity: 0.6; }
.dish-tile.is-off .dish-tile__photo img { filter: grayscale(0.85); }

/* Узкая плитка (два в ряд на телефоне, четыре в ряд на ПК — уже 241): цена и счётчик рядом не помещаются
   (самая длинная цена «от 12 345 ₽» и счётчик — 209 из 209), и прежде цена у плитки со счётчиком вставала строкой
   выше, чем у соседки с «+» (обход 03.10.2026). Здесь у всех плиток ряда цена — своей строкой, «+» или счётчик —
   строкой ниже у правого края, строка кнопки — всегда высотой с кнопку: цены ряда — на одной высоте. Название —
   до трёх строк. */
@container dish-tile (max-width: 240px) {
  .dish-tile:not(.dish-tile--row) .dish-tile__title { -webkit-line-clamp: 3; }
  .dish-tile:not(.dish-tile--row) .dish-tile__foot {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--action-h); align-items: center;
  }
  .dish-tile:not(.dish-tile--row) .dish-tile__foot > :is(.counter, .dish-tile__add) { justify-self: end; }
}

/* Строка — телефон, «Списком»: квадратное фото с отступом по верху строки, высота строки — с фото (Р46, Р47). */
.dish-tile--row { flex-direction: row; }
.dish-tile--row .dish-tile__photo {
  width: calc(var(--space-8) + var(--space-7)); height: auto; flex: none; align-self: flex-start;
  margin: var(--space-3) 0 var(--space-3) var(--space-3); border-radius: var(--radius-md);
}
.dish-tile--row .placeholder { font-size: var(--text-xs); }
.dish-tile--row .dish-tile__body { gap: var(--space-1); min-width: 0; padding: var(--space-3); }
.dish-tile--row .dish-tile__desc { -webkit-line-clamp: 1; line-height: var(--leading-title); }
/* Цена и счётчик не помещаются рядом (узкий телефон, длинная цена) — счётчик уходит строкой ниже, к правому
   краю, а не ложится на цену. Промежуток между ними — не меньше --space-1: на 360 цена «от 725 ₽» и счётчик
   ещё стоят рядом. Отступа над низом у строки нет и высота низа — по содержимому: межстрочный названия —
   `--leading-clamp`, и с отступом строка вышла бы выше своего фото. */
.dish-tile--row .dish-tile__foot { gap: var(--space-2) var(--space-1); min-height: 0; padding-top: 0; }
.dish-tile--row .dish-tile__foot > :is(.counter, .dish-tile__add) { margin-left: auto; }
.dish-tile__price-block { display: grid; min-width: 0; line-height: var(--leading-title); }
.dish-tile__weight { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }

/* ── Метки (Р48, Р49, Р67): кружок со значком в углу фото; при наведении на фото — надпись; количество,
   «Острое» и слово без значка — надписью сразу. Место нажатия пальцем — около 44. ── */
.dish-tile__tags {
  position: absolute; top: var(--space-2); left: var(--space-2); z-index: var(--z-raised);
  display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: calc(100% - var(--space-4));
}
.dish-tag {
  display: inline-flex; align-items: center; height: var(--space-5); min-width: var(--space-5); padding: 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--panel); color: var(--accent); box-shadow: var(--shadow-1);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-title); white-space: nowrap;
}
.dish-tag svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
/* Слово метки свёрнуто, пока метку не раскрыли (наведением или нажатием), и — цветом текста: золото темы
   сайта на светлом читается чуть хуже 4,5:1 (мелкий шрифт), а значок — рисунок, ему хватает 3:1. */
.dish-tag__label {
  max-width: 0; overflow: hidden; color: var(--ink);
  transition: max-width var(--motion-base) var(--ease), margin var(--motion-base) var(--ease);
}
.dish-tag:not(.dish-tag--always) { position: relative; cursor: pointer; }
.dish-tag:not(.dish-tag--always)::before { content: ""; position: absolute; inset: calc(var(--space-2) * -1 - var(--space-1) / 2); }
.dish-tag.is-open { padding: 0 var(--space-2); }
.dish-tag.is-open .dish-tag__label { max-width: calc(var(--space-8) * 3); }
.dish-tag.is-open:not(.dish-tag--text) .dish-tag__label { margin-left: var(--space-1); }
.dish-tag--always { padding: 0 var(--space-2); }
.dish-tag--always .dish-tag__label { max-width: none; }
.dish-tag--always:not(.dish-tag--text) .dish-tag__label { margin-left: var(--space-1); }
@media (hover: hover) {
  .dish-tile__photo:hover .dish-tag, .dish-tile__photo:focus-visible .dish-tag { padding: 0 var(--space-2); }
  .dish-tile__photo:hover .dish-tag__label, .dish-tile__photo:focus-visible .dish-tag__label { max-width: calc(var(--space-8) * 3); }
  .dish-tile__photo:hover .dish-tag:not(.dish-tag--text) .dish-tag__label,
  .dish-tile__photo:focus-visible .dish-tag:not(.dish-tag--text) .dish-tag__label { margin-left: var(--space-1); }
}

/* ── Телефон: во что тычут пальцем — не меньше --tap ── */
@media (max-width: 767px) {
  .dish-tile { --action-h: var(--tap); }
  .dish-tile__add { width: var(--tap); height: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
  .dish-tile, .dish-tile__photo img, .dish-tag__label, .categories__item, .dish-tile__add { transition: none; }
}