/* Корзина на сайте (новая витрина, часть 2; постановка docs/superpowers/specs/2026-10-02-storefront-part2-menu-and-cart.md,
   раздел 4) — по эталону docs/design/reference/components.css («Блок корзины», «Строка корзины») и
   layout.css («Плашка корзины»): колонка на ПК, плашка `#cart-bar` и страница `/cart` на телефоне и
   планшете. Размеры — только токены (tokens.css), цвета — только роли темы: это стережёт
   tests/design/test_tokens_guard.py. Блок рисует js/cart/view.js, плашку — js/cart/bar.js. */

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

/* ── Блок корзины ─────────────────────────────────────────────────────── */
.cart {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-1);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text); color: var(--ink);
}
/* Шапка, строка смысла и низ не сжимаются: у низкой корзины прокручивается она вся, а не сплющиваются они. */
.cart__head, .cart__context, .cart__foot { flex: none; }
.cart__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0; }
.cart__title {
  flex: 1; min-width: 0; margin: 0; font-family: var(--font-title); font-size: var(--title-sm);
  font-weight: var(--weight-medium); line-height: var(--leading-title); color: var(--ink); text-align: left; letter-spacing: normal;
}
.cart__qty {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-5); height: var(--space-5);
  padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--cream);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1;
}
.cart__qty[hidden] { display: none; }
.cart__context {
  padding: var(--space-1) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border2);
  color: var(--muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Между шапкой и низом: строки (прокручиваются сами) или надпись пустой корзины — посередине. */
.cart__middle { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart__lines { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--space-4); overscroll-behavior: contain; }
.cart__empty {
  flex: 1; display: grid; gap: var(--space-2); align-content: center; justify-items: center;
  padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted);
}
.cart__empty b { color: var(--ink); font-family: var(--font-title); font-weight: var(--weight-medium); font-size: var(--title-sm); line-height: var(--leading-title); }
.cart__foot { display: grid; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--border2); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.cart__total b { font-family: var(--font-title); font-weight: var(--weight-medium); font-size: var(--title-sm); line-height: var(--leading-title); white-space: nowrap; }
.cart__skipped, .cart__hint { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-text); }
.cart__hint { text-align: center; }
.cart__note {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--cream);
  color: var(--ink); text-align: center; font-weight: var(--weight-medium); line-height: var(--leading-text);
}

/* ── Строка корзины: фото, название, вариант, сумма, «− N +» ──────────── */
.cart-line {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border2);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__photo {
  display: block; width: calc(var(--space-7) + var(--space-2)); height: calc(var(--space-7) + var(--space-2));
  overflow: hidden; border-radius: var(--radius-md); background: var(--cream);
}
button.cart-line__photo { cursor: pointer; }
.cart-line__photo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cart-line__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Заглушка сайта вместо фото — та же, что у плитки (своя картинка «Витрины» или узор, menu.css), но без имени
   заведения: в квадрат строки оно не помещается (длинное имя обрезалось бы посреди), а имя блюда и так рядом. */
.cart-line__photo .placeholder { font-size: 0; }
.cart-line__text { display: grid; gap: var(--space-1); }
/* Обрезка в две строки — с межстрочным `--leading-clamp`: при `--leading-title` надстрочные знаки скрытой третьей
   строки («Й», «Ё») заходили в видимую точками под названием (обход 03.10, п. 14). */
.cart-line__title {
  font-weight: var(--weight-medium); font-size: var(--text-sm); line-height: var(--leading-clamp);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.cart-line__title[data-line-open] { cursor: pointer; }
.cart-line__variant { color: var(--muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-line__price { font-weight: var(--weight-semibold); font-size: var(--text-sm); overflow-wrap: anywhere; }
.cart-line .counter--sm { align-self: center; }
.cart-line .counter button:disabled { opacity: 0.45; cursor: not-allowed; }
/* Телефон: рядом со счётчиком в три пальца названию осталось бы меньше слова, и оно рвалось бы посреди слова.
   Название и вариант — во всю ширину рядом с фото, счётчик — справа в строке цены (эталон phone-05): строка не
   растёт на отдельный ряд счётчика (обход 03.10, п. 8). Части текста — сами клетки сетки (`display: contents`). */
@media (max-width: 399px) {
  .cart-line {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'photo title title' 'photo variant variant' 'photo price counter';
    row-gap: var(--space-1);
  }
  .cart-line__photo { grid-area: photo; align-self: start; }
  .cart-line__text { display: contents; }
  .cart-line__title { grid-area: title; }
  .cart-line__variant { grid-area: variant; }
  .cart-line__price { grid-area: price; }
  .cart-line .counter--sm { grid-area: counter; }
}
/* Самый узкий телефон: рядом со счётчиком цене под текстом осталось бы меньше слова («Выберите заново», «от 1 890 ₽»
   рвались бы) — строка цены начинается под фото, во всю ширину до счётчика. */
@media (max-width: 359px) {
  .cart-line { grid-template-areas: 'photo title title' 'photo variant variant' 'price price counter'; }
  /* Фото выше названия в строку и варианта — они вместе посередине рядом с ним, а не порознь. */
  .cart-line__title { align-self: end; }
  .cart-line__variant { align-self: start; }
}
/* Не в сумме (раздел 4.2): нет в наличии — серым с причиной; нет в этом меню — «—»; выбор не годен —
   «Выберите заново». Причина — цветом ошибки: на неё надо посмотреть. */
.cart-line.is-out .cart-line__photo, .cart-line.is-out .cart-line__title, .cart-line.is-out .cart-line__variant,
.cart-line.is-missing .cart-line__photo, .cart-line.is-missing .cart-line__title { opacity: 0.6; }
.cart-line.is-out .cart-line__photo img { filter: grayscale(0.85); }
.cart-line.is-missing .cart-line__price, .cart-line.is-out .cart-line__price, .cart-line.is-choice .cart-line__price { color: var(--err); }

/* ── Колонка на ПК: до низа экрана даже пустая (Р30), липнет под шапкой, на подвал не заходит ──
   Колонка растянута на обе строки каталога (menu.css) и своей высотой в них не участвует (`contain`): высоту
   задаёт каталог. Поэтому липкая корзина не выходит из колонки, а у короткого каталога (поиск нашёл одно
   блюдо) она короче экрана и кончается вместе с каталогом над подвалом — страница не вырастает из-за неё. */
/* Короткий каталог (поиск нашёл одно блюдо или ничего) не сплющивает корзину до полутора строк (обход 03.10,
   п. 9): колонка не ниже `--cart-min-h` — шапка, три строки и низ — и не выше, чем корзина бывает на этом экране;
   страница при этом вырастает не больше чем на эту высоту. */
.cart-column { contain: size; min-height: min(var(--cart-min-h), calc(100vh - var(--header-h) - var(--space-6))); }
.cart-column .cart {
  position: sticky; top: calc(var(--header-h) + var(--space-4));
  height: calc(100vh - var(--header-h) - var(--space-6)); max-height: 100%;
}
/* Низкий экран: строкам места меньше разумного — прокручивается вся корзина (`cart--short` ставит view.js). */
.cart--short { overflow: auto; overscroll-behavior: contain; }
.cart--short .cart__middle, .cart--short .cart__lines { flex: none; overflow: visible; }

/* ── Плашка корзины (< 1100): число, «Корзина», суть заказа, сумма (Р25) ── */
.cart-bar {
  position: fixed; left: 50%; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-cartbar);
  transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-3);
  width: min(var(--cartbar-max), calc(100% - 2 * var(--gutter))); height: calc(var(--control-lg) + var(--space-2));
  padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
  text-decoration: none; box-shadow: var(--shadow-2); font-family: var(--font-text); font-size: var(--text-md);
  font-weight: var(--weight-semibold); line-height: var(--leading-title);
}
.cart-bar[hidden] { display: none; }
.cart-bar:hover { background: var(--accent-hover); color: var(--on-accent); }
.cart-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cart-bar svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.cart-bar__qty { flex: none; }
.cart-bar__text { flex: 1; min-width: 0; display: grid; line-height: var(--leading-title); }
.cart-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-bar__essence { font-size: var(--text-xs); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-bar__sum { flex: none; white-space: nowrap; }
/* Пока плашка видна, у страницы снизу место под неё: последнее блюдо и подвал не под плашкой. */
.has-cartbar { padding-bottom: calc(var(--control-lg) + var(--space-2) + var(--space-6)); }

/* ── Страница корзины: колонка для чтения по центру (Р39), «← Назад», тот же блок ── */
.screen[data-screen='cart'] {
  width: 100%; max-width: calc(var(--column-max) + var(--gutter) * 2); margin: 0 auto;
  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[data-screen='cart']) { background: var(--page); }
.cart-screen { display: grid; gap: var(--space-4); min-width: 0; }
.back-link {
  justify-self: start; display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--accent); font-weight: var(--weight-semibold); text-decoration: none;
}
.back-link:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.back-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cart-page { min-width: 0; }
.cart-page .cart { max-height: none; }
.cart-screen__note { margin: 0; color: var(--muted); }
.cart-screen__empty b { color: var(--ink); font-family: var(--font-title); font-weight: var(--weight-medium); font-size: var(--title-sm); line-height: var(--leading-title); }
.cart-screen__empty .btn { color: var(--on-accent); }