/* ============================================================
   ДИЗАЙН-ТОКЕНЫ. Единственный источник цветов, отступов,
   радиусов, теней и типографики.

   ПРАВИЛО: ни один литерал (hex, rem-отступ, радиус, тень)
   не появляется ниже этого блока. Нужного значения нет —
   добавьте токен здесь, не пишите число на месте.
   ============================================================ */
/* Japanese M PLUS Rounded 1c, restricted to Cyrillic so the small brand asset
   stays quick to load and every other interface role retains its established face. */
@font-face {
  font-family: "Okinawa Rounded";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/m-plus-rounded-1c-cyrillic-800.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Бренд «Окинава»: спокойный красный из логотипа, а не Bootstrap blue. */
  --c-brand:        #a64048;
  --c-brand-strong: #7d2c34;
  --c-brand-soft:   #f7e7e7;

  /* Текст */
  --c-ink:       #312a29;
  --c-ink-muted: #5d5350;
  /* Достаточно тёмный для контраста ≥4.5:1 на светлых тёплых поверхностях. */
  --c-ink-faint: #6c615c;

  /* Линии и поверхности */
  --c-line:           #eaded6;
  --c-line-strong:    #d9c8bf;
  --c-page:           #fdf9f6;
  --c-surface:        #ffffff;
  --c-surface-alt:    #fbf6f2;
  --c-surface-sunken: #f4ece6;

  /* Состояния */
  /* Fix-usability-08: #1a7f37 на --c-ok-soft давал 4.2:1 (нужно 4.5:1, WCAG AA)
     на бейдже статуса «Открыто» и везде, где токен на светлом фоне. */
  --c-ok:     #167632;  --c-ok-soft:     #d7f0dc;
  --c-warn:   #9a6700;  --c-warn-soft:   #fff3cd;
  --c-danger: #b02a37;  --c-danger-soft: #f8d7da;
  --c-neutral-soft: #d6d6d6;
  --c-kitchen-pizza: #a65f12; --c-kitchen-pizza-soft: #fff5e8;
  --c-kitchen-rolls: #0f766e; --c-kitchen-rolls-soft: #eaf8f5;

  /* Отступы — только эти семь значений */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;

  /* Радиусы — только эти четыре */
  --r-sm: .25rem; --r-md: .5rem; --r-lg: .75rem; --r-pill: 999px;

  /* Тени — только эти три */
  --sh-1: 0 1px 3px rgba(0,0,0,.12);
  --sh-2: 0 .35rem 1rem rgba(0,0,0,.18);
  --sh-3: 0 1rem 3rem rgba(0,0,0,.25);

  /* Типографика */
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: var(--f-body);
  --f-brand: "Okinawa Rounded", "Yu Gothic UI", "Yu Gothic", "Meiryo", var(--f-body);
  --t-xs: .78rem; --t-sm: .875rem; --t-md: 1rem;
  --t-lg: 1.15rem; --t-xl: 1.4rem; --t-2xl: 1.75rem;
  --lh-tight: 1.25; --lh-normal: 1.5;

  /* Kitchen admin monitor: reuse the site palette; urgency-only colors stay semantic. */
  --kitchen-page-bg: var(--c-page);
  --kitchen-surface: var(--c-surface);
  --kitchen-text: var(--c-ink);
  --kitchen-text-secondary: var(--c-ink-muted);
  --kitchen-text-muted: var(--c-ink-faint);
  --kitchen-border: var(--c-line);
  --kitchen-card-border: var(--c-line-strong);
  --kitchen-primary: var(--c-brand);
  --kitchen-success: var(--c-ok);
  --kitchen-warning: var(--c-warn);
  --kitchen-warning-text: var(--c-warn);
  --kitchen-warning-soft: var(--c-warn-soft);
  --kitchen-danger: var(--c-danger);
  --kitchen-danger-text: var(--c-danger);
  --kitchen-danger-soft: var(--c-danger-soft);
  --kitchen-new: var(--c-brand);
  --kitchen-new-soft: var(--c-brand-soft);
  --kitchen-shadow: var(--sh-1);
  --kitchen-content-max: 100rem;
  --kitchen-content-padding: 1.25rem 1.5rem 2rem;
  --kitchen-content-padding-compact: 1rem 1rem 1.5rem;

}

/* Web Interface Guidelines: no double-tap zoom delay on controls, and no
   unbranded gray tap flash - pressed/focused states already exist via
   :active/:focus-visible tokens. */
a, button, input[type="submit"], input[type="button"], [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bs-primary: var(--c-brand);
  --bs-text: var(--c-ink);
  --bs-bg: var(--c-surface);
  --bs-border: var(--c-line);
  --bs-body-color: var(--c-ink);
  --bs-border-color: var(--c-line);
  --bs-border-radius: var(--r-md);
  --bs-font-sans-serif: var(--f-body);
}

/* Дизайн-аудит 2026-09-07: радиусы контролов держим в токен-лестнице.
   Вендорный Bootstrap зашивает .375rem (6px) литералами в .btn,
   .form-control и .form-select, поэтому кнопки/поля стояли в 6px рядом
   с карточками 8px и заявленными четырьмя значениями радиусов. */
.btn, .form-control, .form-select { border-radius: var(--r-md); }
.btn-sm, .btn-group-sm > .btn, .form-control-sm, .form-select-sm { border-radius: var(--r-sm); }

*,
*::before,
*::after { box-sizing: border-box; }

/* Fix-cart-02: короткая публичная страница не должна оставлять контакты
   висеть посреди экрана — футер прижимается к низу окна. Панель персонала
   живёт по своим правилам высоты, поэтому правило помечено классом body. */
/* Единственный источник цвета фона страницы: липкие панели красятся тем же
   токеном, поэтому под кнопкой и слева от неё не остаётся белой полосы. */
body { background: var(--c-page); }
body.page-public { display: flex; flex-direction: column; min-height: 100dvh; }
/* A public page is a flex child of <body>. A menu's min-content width can
   otherwise become the cross-axis size of main before its responsive rules
   apply. Pin the flex child to the viewport, then let its descendants shrink. */
body.page-public > main { flex: 1 0 auto; width: 100%; min-width: 0; }
body.page-public > footer { flex: 0 0 auto; }

.d-none { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.menu-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.menu-search .form-control { flex: 1 1 14rem; min-width: 0; }
.menu-search-results { margin-top: var(--sp-4); }
/* Fix-perf-03: карточка или категория, отфильтрованная на клиенте. */
.is-filtered-out { display: none !important; }
/* Десктопный макет меню (usability И4): сайдбар + сетка, потолок шире 1320.
   Структура повторяет .staff-catalog-layout панели персонала. */
.menu-main { max-width: 1360px; margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.menu-order-panel { display: none; }
@media (min-width: 992px) {
  .menu-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 20rem);
    gap: var(--sp-5);
    align-items: start;
  }
  .menu-sidebar { position: sticky; top: var(--sp-3); }
  .menu-sidebar .menu-tools > summary { display: none; }
  .menu-sidebar .category-nav { position: static; flex-direction: column; align-items: stretch; border-bottom: 0; padding-bottom: 0; }
  .menu-sidebar .category-nav a { flex: 0 0 auto; }
  .public-floating-actions.menu-floating-actions { display: none; }
  .menu-order-panel {
    display: block; position: sticky; top: var(--sp-3); width: auto; padding: var(--sp-4);
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  }
}
.menu-order-panel ul { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.menu-order-panel li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); overflow-wrap: anywhere; }
.menu-category { margin-top: var(--sp-6); scroll-margin-top: 4.5rem; }
.product-card { height: 100%; display: flex; flex-direction: column; }
.product-image-trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-decoration: none; color: inherit; }
.product-image-trigger:focus-visible { outline: 3px solid var(--c-brand); outline-offset: -3px; }
.product-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md) var(--r-md) 0 0; }
/* Fix-catalog-42: a 404'd photo must not show the browser's broken-image icon;
   the hidden img keeps its box (4/3 in menu, 3/2 on the home popular grid) and
   the overlay covers exactly that box. */
.product-card.is-image-missing img { visibility: hidden; }
.product-card.is-image-missing .product-image-trigger { position: relative; }
.product-card.is-image-missing .product-image-trigger::after {
  content: ""; position: absolute; inset: 0;
  background: var(--c-surface-sunken) url("../img/okinawa-logo.jpg") center / 2.5rem no-repeat;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.product-card-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 11rem; }
.product-card-body h3 { overflow-wrap: anywhere; }
.product-card-title-link { color: inherit; text-decoration: none; }
.product-card-title-link:hover, .product-card-title-link:focus-visible { text-decoration: underline; }
.product-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; }
.product-detail-photo { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--r-md); background: var(--c-surface-sunken); }
.product-detail-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); overflow-x: auto; }
.product-detail-thumbs img { width: 4.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--r-sm); }
.product-detail-price { font-size: 1.4rem; }
.price { font-size: 1.15rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.product-facts { margin: 0 0 var(--sp-3); }
.product-facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); }
.product-facts > div:last-child { border-bottom: 0; }
.product-facts dt { font-weight: 600; color: var(--c-ink-muted); }
.product-facts dd { margin: 0; }
.product-facts-composition dd { line-height: 1.45; }
.product-composition { margin: 0 0 var(--sp-3); line-height: 1.45; overflow-wrap: anywhere; }
.product-cart-control { display: flex; justify-content: flex-end; min-width: 8rem; }
.product-cart-control > form > .btn { white-space: nowrap; }
.quantity-control { display: inline-flex; align-items: center; gap: var(--sp-2); }
.quantity-control .btn { min-width: 2.75rem; min-height: 2.75rem; }
.quantity-value { min-width: 1.75rem; text-align: center; font-weight: 700; }
.cart-action-status { min-height: 0; margin: 0; }
.cart-action-status.text-danger { margin-top: var(--sp-2); }
.menu-filters, .category-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.menu-tools > summary { cursor: pointer; padding: var(--sp-2) 0; font-weight: 600; }
.menu-filter-chip, .category-nav a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); text-decoration: none; background: var(--c-surface); }
@media (max-width: 575px) { .menu-filter-chip, .category-nav a { min-height: 2.75rem; } }
.menu-filter-chip.is-active, .category-nav a[aria-current="true"] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-surface); font-weight: 600; }
.category-nav { border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-2); }
/* И3: липкая навигация категорий с фоном; под неё подогнан scroll-margin-top */
.category-nav { position: sticky; top: 0; z-index: 10; background: var(--c-surface); }
@media (max-width: 575px) {
  .category-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .category-nav a { flex: 0 0 auto; scroll-snap-align: start; }
}
.public-floating-actions { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.public-top-link, .public-cart-fab { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); text-decoration: none; }
.public-top-link { background: var(--c-surface); border: 1px solid var(--c-brand); color: var(--c-brand); }
.public-top-link { display: none; }
@media (min-width: 992px) { .public-top-link { display: inline-flex; } }
.public-cart-fab { background: var(--c-brand); color: var(--c-surface); box-shadow: var(--sh-2); }
.public-top-link:hover, .public-top-link:focus-visible, .public-cart-fab:hover, .public-cart-fab:focus-visible { color: var(--c-brand); filter: brightness(.97); }
.public-cart-fab-count { min-width: 1.35rem; padding: .05rem var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-brand); text-align: center; font-weight: 700; }
main.container { padding-bottom: 6rem !important; }
.promotion-section { margin-top: var(--sp-7); }
/* Fix-home-06: auto-fill sizing keeps one/two promotions card-sized instead of
   stretching a lone col-lg-4 across a third of an otherwise empty row. */
.promotion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 22rem)); justify-content: start; gap: var(--sp-3); }
.promotion-grid-item { min-width: 0; }
.promotion-card { height: 100%; }
.promotion-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md) var(--r-md) 0 0; }
/* Same Fix-catalog-42 fallback as product cards; the placeholder is an in-flow
   block so the card's own overflow:hidden keeps rounding it (no absolute
   overlay that would also cover the promotion text). */
.promotion-card.is-image-missing img { display: none; }
.promotion-card.is-image-missing::before {
  content: ""; display: block; width: 100%; aspect-ratio: 4 / 3;
  background: var(--c-surface-sunken) url("../img/okinawa-logo.jpg") center / 2.5rem no-repeat;
}
.promotion-card-body { padding: var(--sp-4); }
.cart-count-bump { animation: cart-count-pop .3s ease-out; }
@keyframes cart-count-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.order-promise { font-size: var(--t-xl); font-weight: 700; color: var(--c-ink); }
.contact-list { margin-bottom: var(--sp-4); }
.contacts-section { margin-top: var(--sp-5); }
.contact-list > div { margin-bottom: var(--sp-3); }
.contact-list dt { font-weight: 700; }
.contact-list dd { margin: 0; }
.cart-line { min-width: 0; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); scroll-margin-bottom: 5rem; }
.cart-quantity { display: flex; gap: var(--sp-2); align-items: center; }
.cart-quantity input { width: 5rem; }
.cart-line-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(7rem, auto) minmax(5rem, auto); align-items: center; gap: var(--sp-3) var(--sp-4); min-width: 0; }
.cart-line-main > * { min-width: 0; }
.cart-line-product { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.cart-line-main img { width: 3.5rem; height: 2.75rem; object-fit: cover; border-radius: var(--r-sm); }
.cart-line-product > div { min-width: 0; overflow-wrap: anywhere; }
.cart-line-unit-price { display: block; margin-top: .1rem; font-size: var(--t-sm); }
.cart-line-main > [data-product-cart-control] { justify-self: end; }
.cart-summary { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-alt); }
.cart-summary-title { margin: 0 0 var(--sp-2); font-size: var(--t-md); font-weight: 700; }
.cart-summary-weight { color: var(--c-ink-muted); font-size: var(--t-sm); }
.cart-delivery-note { margin: 0 0 var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-sm); }
/* ------------------------------------------------------------------
   Fix-cart-05: приборы и соусы — строки заказа, а не настройки. Один
   набор классов для корзины и оформления: знак, название с бесплатной
   нормой, степпер и ценовая колонка (0 в пределах нормы).
   ------------------------------------------------------------------ */
.packing-block { margin-top: var(--sp-2); }
.packing-title { margin: 0 0 var(--sp-2); font-size: var(--t-md); font-weight: 700; }
.packing-list { margin: 0; padding: 0; list-style: none; }
.packing-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); scroll-margin-bottom: 5rem; }
.packing-row[hidden] { display: none; }
.packing-row:last-child { border-bottom: 0; }
/* The row glyph is decorative: the label and its free norm carry the meaning. */
.packing-row-icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); background: var(--c-surface-alt); color: var(--c-ink-muted); }
.packing-row-icon svg { width: 1.15rem; height: 1.15rem; }
.packing-row-text { display: grid; gap: .1rem; min-width: 0; }
.packing-row-label { margin: 0; font-weight: 600; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.packing-row-free { color: var(--c-ok); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Fix-checkout-37: цена стоит в той же строке, что степпер. Отдельной
   строкой под каждой позицией она делала блок приборов вдвое выше экрана. */
.packing-row-price { justify-self: end; min-width: 2.5rem; color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.packing-row-price.is-paid { color: var(--c-warn); }
/* Fix-checkout-37: поле числа шире кнопок, а не равно им. Раньше «12» не
   помещалось в 36px между двумя такими же 36px кнопками - число обрезалось,
   а сами +/- выглядели непропорционально крупными рядом с ним. */
.packing-stepper { display: grid; grid-template-columns: 2rem 2.75rem 2rem; gap: var(--sp-1); align-items: center; justify-self: end; }
.packing-stepper form { margin: 0; display: contents; }
.packing-stepper button { min-width: 2rem; min-height: 2rem; padding: 0; font-size: var(--t-md); font-weight: 700; line-height: 1; }
.packing-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.packing-count { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.packing-stepper input { width: 100%; min-width: 0; min-height: 2rem; padding: 0 .15rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Native spinner arrows ate ~13px of a 36px field and never fit a thumb. */
.packing-stepper input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.packing-stepper input[type="number"]::-webkit-outer-spin-button,
.packing-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.packing-note { margin: var(--sp-2) 0 0; color: var(--c-ink-muted); font-size: var(--t-xs); line-height: var(--lh-normal); }
.packing-block .errorlist, .packing-row .errorlist { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .packing-stepper { grid-template-columns: 2.75rem 3rem 2.75rem; }
  .packing-stepper button, .packing-stepper input { min-width: 2.75rem; min-height: 2.75rem; }
}
.cart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.cart-head h1 { margin-bottom: 0; }
.cart-head-note { margin: 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.cart-layout { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); min-width: 0; }
.cart-lines, .cart-aside { min-width: 0; }
/* Fix-cart-11: one rule weight for the whole order list. The last dish used to
   close with its own 1px line 8px above the 2px line that opened the utensils
   block — two rules for one boundary. Row separators are hairlines in
   `--c-line`, section boundaries the same hairline in `--c-line-strong`. */
.cart-line:not(:has(+ .cart-line)) { border-bottom: 0; }
.cart-extras { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-line-strong); }
.cart-extras-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.cart-extras-title { margin: 0; font-size: var(--t-md); font-weight: 700; }
.cart-extras-lead { margin: 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); }
.cart-actions form { margin: 0; }
.cart-continue-link { font-weight: 600; }
.cart-clear-button { padding-inline: 0; color: var(--c-ink-faint); font-size: var(--t-sm); font-weight: 400; }
.cart-clear-button:hover, .cart-clear-button:focus-visible { color: var(--c-danger); }
/* Единственная главная кнопка страницы: всегда в поле зрения, всегда с суммой. */
.cart-checkout-bar { position: sticky; bottom: 0; z-index: 6; margin-top: var(--sp-4); padding: var(--sp-2) 0 max(var(--sp-2), env(safe-area-inset-bottom)); background: var(--c-page); }
.cart-checkout-button { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: 3rem; box-shadow: var(--sh-2); font-size: var(--t-lg); font-weight: 700; }
.cart-checkout-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Exactly one primary button is rendered: inside the total card on desktop,
   inside the sticky bottom bar on phones. The other is display:none, so it
   never reaches the accessibility tree either. */
.cart-summary-cta { display: none; }
.cart-empty-state { margin-top: var(--sp-5); color: var(--c-ink-muted); }
/* Cutlery rows repeat the dish-row grid from the same width the dish row stops
   being compact (701px). Track widths are resolved from the right, so the
   steppers and the price column of both lists share one axis. */
@media (min-width: 701px) {
  .cart-extras .packing-row { grid-template-columns: 3.5rem minmax(0, 1fr) auto minmax(8rem, auto) minmax(5rem, auto); gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) 0; }
  .cart-extras .packing-row-icon { width: 3.5rem; height: 2.75rem; }
  .cart-extras .packing-row-icon svg { width: 1.4rem; height: 1.4rem; }
  .cart-extras .packing-stepper { grid-template-columns: 2.75rem 1.75rem 2.75rem; gap: var(--sp-2); }
  .cart-extras .packing-stepper button { min-width: 2.75rem; min-height: 2.75rem; }
  .cart-extras .packing-row-price { grid-column: 4; font-size: var(--t-base); }
}
/* Fix-cart-05: the totals column splits off at 992px, not 768px. In the 768-991
   band the item column was left ~320px wide, which collapsed the name track of
   both the dish rows and the cutlery rows to zero and wrapped names to one
   character per line. Below 992 the cart is one column and the sticky bottom
   bar carries the primary action. */
@media (min-width: 992px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: var(--sp-5); align-items: start; }
  .cart-aside { position: sticky; top: var(--sp-3); max-height: calc(100dvh - var(--sp-7) - var(--sp-7)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .cart-checkout-bar { display: none; }
  .cart-summary-cta { display: block; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line-strong); }
}
.cart-free-remaining { margin: var(--sp-2) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.cart-line-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 8rem; text-align: right; }
.cart-line-main > form { margin: 0; justify-self: end; white-space: nowrap; }
.cart-line-remove .btn { padding: 0; }
.cart-line-remove-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem;
  border-radius: var(--r-md); color: var(--c-ink-faint);
}
.cart-line-remove-button:hover, .cart-line-remove-button:focus-visible { color: var(--c-danger); background: var(--c-danger-soft); }
.cart-line-remove-icon { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2; fill: none; }
.cart-line-weight { color: var(--c-ink-muted); font-size: var(--t-sm); }
.cart-line-unavailable { opacity: .7; }
.cart-line-unavailable .text-danger { grid-column: 2 / 4; margin: 0; }
.cart-undo-row { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink-muted); }
@media (max-width: 700px) {
  .cart-line { padding: var(--sp-2) 0; }
  /* The product name gets its own first row. Quantity, price and removal then
     occupy fixed cells below it, so a wrapped name cannot move the − 1 +
     control up or down between lines. */
  .cart-line-main { grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: var(--sp-2); }
  .cart-line-product { gap: 0; }
  .cart-line-product img, .cart-line-unit-price { display: none; }
  .cart-line-product { grid-column: 1 / -1; grid-row: 1; }
  .cart-line-main > [data-product-cart-control] { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
  .cart-line-price { grid-column: 2; grid-row: 2; min-width: max-content; align-items: flex-end; text-align: right; }
  .cart-line-main > form { grid-column: 3; grid-row: 2; align-self: start; }
  .cart-line-unavailable .text-danger { grid-column: 1 / -1; grid-row: 2; }
  .cart-line-unavailable .cart-line-main > form { grid-row: 3; }
}
@media (max-width: 380px) {
  .cart-line-main { grid-template-columns: minmax(0, 1fr) auto; }
  .cart-line-main > form { grid-column: 2; grid-row: 3; }
}
.cart-action-form.is-pending button { cursor: wait; opacity: .7; }

/* Внутренний каталог: таблица (шаги 10-11) */
.catalog-table { font-size: .85rem; }          /* legacy order tables keep their compact type */
.catalog-table td, .catalog-table th { vertical-align: top; }
.catalog-table .col-position { max-width: 32rem; min-width: 18rem; }
.catalog-table .col-select { width: 2.2rem; }
.catalog-table .col-actions { width: 9rem; white-space: nowrap; }
.catalog-thumb { width: 56px; height: 46px; object-fit: cover; border-radius: 4px; background: var(--c-surface-alt); }
.catalog-scroll { overflow-x: auto; }
.catalog-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-1) 0; }
.catalog-product-description { max-width: 32rem; margin: var(--sp-1) 0 0; line-height: 1.35; overflow-wrap: anywhere; color: var(--c-ink-muted); }
.catalog-composition { white-space: pre-line; }

/* Липкий столбец действий, чтобы кнопка карточки не терялась при прокрутке
   (К2: то же правило переиспользовано для таблицы заказов) */
@media (min-width: 992px) {
  .catalog-table .col-actions, .orders-table .order-actions { position: sticky; right: 0; background: var(--c-surface); box-shadow: var(--sh-1); }
  .catalog-row-unavailable .col-actions { background: var(--c-surface-alt); }
}

/* К2: колонки второго уровня видны только на широких экранах панели */
@media (max-width: 1279px) {
  .orders-table .col-wider { display: none; }
}
.order-details-row > td { padding-top: 0; }
.order-details { padding: var(--sp-1) 0; }
.order-details summary { cursor: pointer; color: var(--c-ink-muted); font-size: var(--t-sm); }
.order-details-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-2) 0 0; }
.order-details-list dt { font-weight: 700; color: var(--c-ink-muted); }
.order-details-list dd { margin: 0; }
.order-items { max-height: 7.5rem; overflow-y: auto; }

/* Облако фильтров (шаги 10-11: заменяет .filter-grid/.catalog-quick-filters) */
.catalog-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.catalog-search-row input[name="search"] { flex: 1 1 18rem; min-width: 12rem; }
.catalog-found { font-weight: 700; white-space: nowrap; }
.filter-cloud { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3); background: var(--c-surface-alt); border-radius: var(--r-md); }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.filter-group-label { flex: 0 0 7.5rem; font-size: .78rem; font-weight: 700; color: var(--c-ink-faint); text-transform: uppercase; }
.filter-group-selects { gap: var(--sp-2); }
.filter-group-selects .form-select { flex: 0 1 13rem; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink); font-size: .82rem; line-height: 1.3;
  text-decoration: none; white-space: nowrap;   /* внутри чипа не рвём, группа переносится целиком */
}
.chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.chip-on { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-surface); font-weight: 600; }
.chip-on:hover { color: var(--c-surface); }
@media (max-width: 767px) {
  .filter-group-label { flex-basis: 100%; }
}

/* Staff dashboard (§27, §28, §81) */
.staff-main { max-width: none; margin: 0; padding: 0 clamp(var(--sp-3), 3vw, var(--sp-6)) var(--sp-7); }
.staff-shell { max-width: none; margin: 0; padding: 0 clamp(var(--sp-3), 3vw, var(--sp-6)); }
.staff-footer { display: flex; align-items: center; justify-content: center; max-width: none; min-height: 2.75rem; margin: var(--sp-7) 0 0; padding: var(--sp-3) clamp(var(--sp-3), 3vw, var(--sp-6)); color: var(--c-ink-faint); opacity: .58; text-align: center; font-size: var(--t-xs); }
/* Fix-staff-01: узкая читаемая колонка для форм/детальных staff-страниц —
   в отличие от fluid .staff-main/.staff-shell выше, которые растягиваются
   на весь операционный экран. */
.staff-readable { max-width: 60rem; margin: 0 auto; }
.staff-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--c-line); padding: var(--sp-3) 0; background: var(--c-surface); box-shadow: var(--sh-1); }
.site-header-shell, .staff-header-shell {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(16rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.site-header-status, .site-header-actions, .staff-header-brand,
.staff-header-alert-zone, .staff-header-nav-zone, .staff-header-user-zone { min-width: 0; }
.site-header-actions, .staff-nav, .staff-header-user-zone {
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
  white-space: nowrap;
}
.site-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.staff-header-nav-zone { min-width: 0; }
/* Fix-staff-ui-08: обе оперативные карточки шапки (кухня и новые заказы)
   растягиваются по высоте самой высокой — их геометрия зависит от разного
   содержимого (пилюли станций против ссылки с кнопкой звука), и без stretch
   они стояли на разной высоте. */
.staff-header-alert-zone { display: flex; align-items: stretch; gap: var(--sp-2); min-width: 0; }
/* Fix-usability-07: только пункты меню прокручиваются внутри своей полосы;
   «Ещё разделы» и колокольчик — вне её и не пропадают, когда карточки
   оповещений (кухня/новые заказы) отжимают nav-zone до нехватки места. */
.staff-nav-scroll {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
  min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin;
}
/* Дизайн-аудит 2026-09-07: когда пункты не влезают (1366–1536px, широкий
   набор прав), полоса резала «Кухню» посреди слова без намёка на прокрутку.
   Тот же паттерн затухающего края, что у мобильной рельсы категорий меню;
   класс вешает staff_dialogs.js только при фактическом переполнении. */
.staff-nav-scroll.is-overflowing {
  mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent);
}
.staff-nav-admin, .staff-nav-bell { flex-shrink: 0; }
.staff-nav a { text-decoration: none; }
.staff-header-user-zone { justify-content: flex-end; }
.staff-user { color: var(--c-ink-muted); }
/* Fix-usability-06: единый pill-компонент навигации персонала — одинаковая
   высота/паддинг/радиус у текстовых пунктов, «Ещё разделы» и колокольчика
   устраняют разнобой по вертикали. */
.staff-nav-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 2.75rem; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--c-ink-muted); font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; white-space: nowrap;
}
.staff-nav-link:hover, .staff-nav-link:focus-visible { color: var(--c-brand); background: var(--c-surface-alt); }
.staff-nav-link.is-active { color: var(--c-brand-strong); background: var(--c-brand-soft); }
.staff-order-alerts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); min-height: 2.75rem; min-width: 0; max-width: 100%; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-line-strong); border-left: .3rem solid var(--c-danger); border-radius: var(--r-md); background: var(--c-surface-alt); box-shadow: var(--sh-1); }
.staff-order-alerts-link { display: inline-flex; align-items: center; min-height: 2.35rem; gap: var(--sp-1); min-width: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.staff-order-alerts-dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--c-ink-faint); }
.staff-order-alerts-count { min-width: 1.4rem; padding: 0 .35rem; border-radius: var(--r-pill); background: var(--c-danger); color: var(--c-surface); font-variant-numeric: tabular-nums; text-align: center; }
.staff-order-alerts-sound { min-height: 2.35rem; padding: var(--sp-1) var(--sp-2); border: 0; border-left: 1px solid var(--c-line-strong); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: transparent; color: var(--c-ink-muted); font: inherit; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
.staff-order-alerts-sound:hover, .staff-order-alerts-sound:focus-visible { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.staff-order-alerts-sound.is-enabled { color: var(--c-ok); }
.staff-order-alerts-sound.is-blocked, .staff-order-alerts.has-connection-error .staff-order-alerts-sound { color: var(--c-danger); }
.staff-order-alerts.has-pending-orders { border-color: var(--c-danger); border-left-color: var(--c-danger); background: var(--c-danger-soft); }
.staff-order-alerts.has-pending-orders .staff-order-alerts-link { color: var(--c-danger); }
.staff-order-alerts.has-pending-orders .staff-order-alerts-dot { background: var(--c-danger); animation: staff-order-alert-pulse 1.1s ease-in-out infinite; }
@keyframes staff-order-alert-pulse { 0%, 100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.staff-catalog-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.staff-catalog-layout { display: grid; grid-template-columns: minmax(260px, 290px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.catalog-filter-sidebar { position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface-alt); }
.catalog-filter-sidebar details { border-top: 1px solid var(--c-line); padding: var(--sp-2) 0; }
.catalog-filter-sidebar summary { cursor: pointer; font-weight: 700; }
.catalog-filter-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-2); }
.catalog-filter-links .chip { font-size: .78rem; }
.catalog-filter-form { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); }
.catalog-sidebar-summary { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: .85rem; }
.catalog-results-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.catalog-toolbar-group { display: flex; align-items: center; gap: var(--sp-2); }
.catalog-toolbar-group-order { margin-left: auto; padding-left: var(--sp-3); border-left: 2px solid var(--c-line); }
.catalog-bulk-counter { color: var(--c-ink-muted); font-size: var(--t-sm); }

/* Feature-catalog-27: плавающая панель массовых действий (стоп-лист) —
   доступна без прокрутки к началу длинного списка и не занимает место,
   пока ничего не выбрано ни на десктопе, ни на узком экране. Десктоп:
   залипает сверху. Узкий экран: прижата к низу окна (образец —
   .public-floating-actions выше). Видимость переключает
   static_js/staff_catalog.js классом .catalog-toolbar-visible.
   z-index: 30 — выше .category-nav (10) и липкого столбца действий
   таблицы (свой контекст). */
/* Fix-gui-11: место тулбара зарезервировано всегда (visibility, а не
   display) — при первой отметке товара список не прыгает вниз. */
.catalog-sticky-toolbar {
  display: flex;
  visibility: hidden;
  position: sticky; top: 0; z-index: 30;
  background: var(--c-surface); box-shadow: var(--sh-1);
  padding: var(--sp-2); margin: 0 0 var(--sp-3); border-radius: var(--r-md);
}
.catalog-sticky-toolbar.catalog-toolbar-visible { visibility: visible; }
@media (max-width: 767px) {
  .catalog-sticky-toolbar {
    position: fixed; top: auto; left: 0; right: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
    border-radius: 0; margin: 0;
  }
  .staff-catalog-table, .ingredient-table-scroll { padding-bottom: 4.5rem; }
}

.stop-reason-dialog { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4); max-width: 24rem; }
/* Fix-catalog-31: окно «Новый товар» было шириной с телефон — категория,
   название и состав не помещались в одну строку. */
.product-create-dialog { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4); width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
.product-create-dialog .staff-form-grid { gap: var(--sp-3); }
/* Флажок выравнивается по соседнему полю, а не висит в верхнем углу ячейки. */
.product-create-dialog .form-check { align-self: end; min-height: 2.375rem; margin-bottom: 0; }
.product-create-dialog .form-check input[type="checkbox"] { flex: none; width: 1rem; height: 1rem; }
.employee-quick-roles { padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-alt); }
.employee-quick-roles > label { display: block; margin-bottom: var(--sp-2); font-weight: 700; }
.employee-quick-roles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); margin: 0; padding: 0; list-style: none; }
.employee-quick-roles li { min-width: 0; }
.employee-quick-roles input { margin-right: var(--sp-1); }
@media (max-width: 575px) { .employee-quick-roles ul { grid-template-columns: 1fr; } }
dialog::backdrop { background: rgba(0,0,0,.35); }

/* Аудит (usability Л1) */
.audit-metadata { max-width: 26rem; }
.audit-metadata-details summary { cursor: pointer; overflow-wrap: anywhere; }
.audit-metadata-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; max-height: 12rem; overflow-y: auto; }
.audit-metadata-list li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); overflow-wrap: anywhere; }
.audit-metadata-raw summary { cursor: pointer; color: var(--c-ink-faint); font-size: var(--t-sm); }
.audit-metadata-raw pre { max-height: 16rem; overflow: auto; font-size: var(--t-xs); }

/* Системные экраны (usability Л4) */
.error-cell { max-width: 24rem; }
.error-details summary { cursor: pointer; overflow-wrap: anywhere; }
.alert-system { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.alert-system-ok   { color: var(--c-ok); background: var(--c-ok-soft); border-color: var(--c-ok); }
.alert-system-warn { color: var(--c-warn); background: var(--c-warn-soft); border-color: var(--c-warn); }
.alert-system-fail { color: var(--c-danger); background: var(--c-danger-soft); border-color: var(--c-danger); }
.system-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.system-card { padding: var(--sp-4); border: 1px solid var(--c-line); border-left-width: .35rem; border-radius: var(--r-md); background: var(--c-surface); }
.system-card p { margin-bottom: var(--sp-2); }
.system-card p:last-child { margin-bottom: 0; }
.system-card-ok   { border-left-color: var(--c-ok); }
.system-card-warn { border-left-color: var(--c-warn); }
.system-card-fail { border-left-color: var(--c-danger); }
.compliance-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-2); }
.compliance-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border: 1px solid var(--c-line); border-left-width: .35rem; border-radius: var(--r-md); background: var(--c-surface); color: inherit; text-decoration: none; }
.compliance-card:hover, .compliance-card:focus-visible { border-color: var(--c-brand); }
.compliance-card-todo { border-left-color: var(--c-danger); }
.compliance-card-done { border-left-color: var(--c-ok); }
.compliance-card-overdue { border-left-color: var(--c-danger); background: var(--c-danger-soft); }
.compliance-card-head { display: flex; align-items: center; gap: var(--sp-2); }
.compliance-card-notes { margin: 0; color: var(--c-ink-muted); font-size: var(--t-sm); flex: 1; }
.compliance-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--t-sm); color: var(--c-ink-muted); }
.staff-catalog-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-4); min-width: 0; }
.staff-catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.staff-catalog-more { position: relative; }
.staff-catalog-more summary { list-style: none; }
.staff-catalog-more summary::-webkit-details-marker { display: none; }
.staff-catalog-more-menu { position: absolute; z-index: 4; right: 0; display: grid; min-width: 12rem; margin-top: var(--sp-1); padding: var(--sp-1); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-2); }
.staff-catalog-more-menu a { padding: var(--sp-2) var(--sp-3); color: inherit; text-decoration: none; }
.staff-catalog-more-menu a:hover, .staff-catalog-more-menu a:focus-visible { background: var(--c-surface-alt); color: var(--c-brand); }
/* Fix-catalog-30: настоящие карточки товара вместо плотных строк-таблицы —
   фото ведёт, статус читается без открытия карточки, edit остаётся точной
   целью отдельно от переключателя выбора самой карточки. */
.catalog-product-row {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.catalog-product-row.is-selected { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.catalog-product-row:focus-visible { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.catalog-product-image { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-sunken); color: var(--c-ink-faint); font-size: var(--t-sm); }
.catalog-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalog-product-photo-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.catalog-product-nophoto { padding: var(--sp-2) var(--sp-3); color: var(--c-ink-faint); font-size: var(--t-sm); text-align: center; }
.catalog-product-photo-link:hover .catalog-product-nophoto, .catalog-product-photo-link:focus-visible .catalog-product-nophoto { color: var(--c-brand-strong); text-decoration: underline; }
.catalog-product-select { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 2; display: flex; }
.catalog-select { width: 1.3rem; height: 1.3rem; margin: 0; border-radius: var(--r-sm); accent-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-surface), var(--sh-1); cursor: pointer; }
.catalog-product-status { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 2; display: inline-flex; align-items: center; gap: var(--sp-1); max-width: calc(100% - 1rem); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--sh-1); color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-product-status .status-dot { flex: 0 0 auto; }
.catalog-row-unavailable .catalog-product-status { color: var(--c-danger); }
.catalog-row-unavailable .catalog-product-image img { opacity: .5; }
.catalog-product-hidden-flag { position: absolute; bottom: var(--sp-2); left: var(--sp-2); z-index: 2; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--sh-1); color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; }
.catalog-product-copy { padding: var(--sp-3) var(--sp-3) 0; min-width: 0; }
.catalog-product-category { margin: 0; color: var(--c-ink-muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-product-name { margin: var(--sp-1) 0 0; min-height: 2.5em; font-size: var(--t-md); font-weight: 600; line-height: var(--lh-tight); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.catalog-product-name a { color: inherit; text-decoration: none; }
.catalog-product-name a:hover, .catalog-product-name a:focus-visible { text-decoration: underline; }
.catalog-product-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); padding: 0 var(--sp-3); color: var(--c-ink-muted); font-size: var(--t-sm); }
.catalog-product-meta .price { font-size: var(--t-lg); font-weight: 700; color: var(--c-ink); }
.catalog-product-open { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; padding: var(--sp-2) var(--sp-3); }
.catalog-product-edit { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-ink-muted); font-size: var(--t-lg); line-height: 1; text-decoration: none; }
.catalog-product-edit:hover, .catalog-product-edit:focus-visible { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-brand-soft); }
.status-dot--ok { background: var(--c-ok); }
.status-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; }
.status-dot--low { background: var(--c-warn); }
.status-dot--stop { background: var(--c-danger); }

/* Feature-kitchen-01: заготовка кухонной очереди — крупный, читаемый с
   расстояния текст, годится и как обычная staff-страница, и как основа
   будущего киоска на кухне. */
.kitchen-queue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.kitchen-station { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3); background: var(--c-surface); }
.kitchen-station-title { margin: 0 0 var(--sp-3); }
.kitchen-order-group { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); margin-bottom: var(--sp-3); border: 1px solid var(--c-line); border-left: .35rem solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface-alt); font-size: 1.05rem; }
.kitchen-order-group:last-child { margin-bottom: 0; }
.kitchen-order-color-1 { border-left-color: var(--c-brand); }
.kitchen-order-color-2 { border-left-color: var(--c-ok); }
.kitchen-order-color-3 { border-left-color: var(--c-warn); }
.kitchen-order-color-4 { border-left-color: var(--c-danger); }
.kitchen-order-color-5 { border-left-color: var(--c-brand-strong); }
.kitchen-order-color-6 { border-left-color: var(--c-ink-muted); }
.kitchen-order-items { display: grid; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.kitchen-order-items li { padding-left: var(--sp-2); border-left: 2px solid var(--c-line); }
.kitchen-component-parent { color: var(--c-ink-muted); font-size: var(--t-sm); }
.kitchen-queue-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.kitchen-order-group time { font-size: var(--t-sm); color: var(--c-ink-muted); }
.staff-detail-heading { display: flex; justify-content: space-between; align-items: start; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.cash-collection-form { display: grid; gap: var(--sp-1); }
.cash-collection-form .btn { min-height: 2.75rem; }
.staff-back-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 2.75rem; margin-bottom: var(--sp-2); padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface-alt); color: var(--c-ink-muted);
  font-weight: 600; text-decoration: none;
}
.staff-back-link:hover, .staff-back-link:focus-visible {
  border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-strong);
}
.product-facts-line { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0 0; font-size: var(--t-sm); color: var(--c-ink-muted); }
.staff-detail-edit-action { margin: 0 0 var(--sp-3); }
.staff-product-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-1); border-bottom: 1px solid var(--c-line); }
.staff-product-tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: .45rem; background: var(--c-surface); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.staff-product-tabs a:hover, .staff-product-tabs a:focus-visible { border-color: var(--c-brand); color: var(--c-brand); outline: 3px solid var(--c-brand-soft); outline-offset: 2px; }
.staff-product-tabs a.is-active { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-surface); font-weight: 700; }
.staff-product-tab-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border: 1px dashed var(--c-line); border-radius: .45rem; }
.staff-product-tab-group-label { font-size: var(--t-xs); color: var(--c-ink-muted); padding: 0 var(--sp-1); white-space: nowrap; }
.staff-readonly-card { overflow-wrap: anywhere; }
.staff-readonly-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; }
.staff-readonly-grid > div { min-width: 0; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.staff-readonly-grid .field-wide { grid-column: 1 / -1; }
.staff-readonly-grid dt { color: var(--c-ink-muted); font-size: .85rem; font-weight: 700; }
.staff-readonly-grid dd { margin: var(--sp-1) 0 0; white-space: pre-line; }
.staff-readonly-text { overflow-wrap: anywhere; }
/* Fix-catalog-38: длинный текст карточки свёрнут в строку-превью. */
.staff-readonly-collapse > summary { cursor: pointer; list-style: revert; }
.staff-readonly-collapse > summary:hover, .staff-readonly-collapse > summary:focus-visible { color: var(--c-brand-strong); }
.staff-readonly-collapse[open] > summary { margin-bottom: var(--sp-1); color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-employee-create { max-width: 32rem; }
.staff-employee-directory { display: grid; gap: 1px; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: var(--c-line); }
.staff-employee-directory-head, .staff-employee-row { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(10rem, 1.25fr) minmax(9rem, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-3); background: var(--c-surface); }
.staff-employee-directory-head { color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 700; background: var(--c-surface-alt); }
.staff-employee-row > div { min-width: 0; overflow-wrap: anywhere; }
.staff-employee-row a { color: inherit; }
.staff-employee-empty { padding: var(--sp-4); background: var(--c-surface); }
.staff-state-text { display: inline-flex; align-items: baseline; gap: .25rem; }
.staff-state-text--ok { color: var(--c-ok); }
.staff-state-text--warn { color: var(--c-warn-ink, var(--c-ink)); }
.staff-state-text--danger { color: var(--c-danger); }
.employee-page { max-width: 78rem; margin: 0 auto; }
.employee-page-header { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.employee-page-header h1 { margin: var(--sp-1) 0; }
.employee-page-kicker { margin: 0; color: var(--c-brand-strong); font-size: var(--t-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.employee-add-button { flex: 0 0 auto; min-height: 2.75rem; }
.employee-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.employee-stat { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-2); min-width: 0; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1); }
.employee-stat span { color: var(--c-ink-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.employee-stat strong { color: var(--c-ink); font-size: 1.65rem; line-height: 1; }
.employee-stat--ok { border-left: .3rem solid var(--c-ok); }
.employee-stat--warn { border-left: .3rem solid var(--c-warn); background: var(--c-warn-soft); }
.employee-directory-toolbar { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface-alt); }
.employee-search-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.employee-search-form input { flex: 1 1 18rem; min-width: 0; }
.employee-filter-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.employee-filter-pills a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 2.5rem; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); text-decoration: none; }
.employee-filter-pills a.is-active { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-surface); font-weight: 700; }
.employee-filter-pills span { min-width: 1.25rem; padding: 0 .3rem; border-radius: var(--r-pill); background: var(--c-warn-soft); color: var(--c-warn); font-size: var(--t-xs); text-align: center; }
.employee-filter-pills a.is-active span { background: rgba(255,255,255,.22); color: var(--c-surface); }
.employee-directory { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-line); box-shadow: var(--sh-1); }
.employee-directory-head, .employee-row { display: grid; grid-template-columns: minmax(13rem, 2fr) minmax(11rem, 1.35fr) minmax(8rem, .9fr) minmax(11rem, 1.1fr) minmax(9rem, 1fr); gap: var(--sp-3); align-items: center; min-width: 0; padding: var(--sp-3); background: var(--c-surface); }
.employee-directory-head { color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 700; background: var(--c-surface-alt); }
.employee-row { color: inherit; text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease; }
.employee-row:hover, .employee-row:focus-visible { z-index: 1; background: var(--c-brand-soft); outline: 0; box-shadow: inset 0 0 0 2px var(--c-brand); }
.employee-row > div { min-width: 0; overflow-wrap: anywhere; }
.employee-row-name { display: grid; gap: .15rem; }
.employee-row-name strong { color: var(--c-ink); }
.employee-row-name small { color: var(--c-ink-muted); }
.employee-role-chip { display: inline-flex; max-width: 100%; padding: .25rem .55rem; border-radius: var(--r-pill); background: var(--c-surface-sunken); color: var(--c-ink-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.employee-empty { display: grid; gap: var(--sp-1); padding: var(--sp-5); background: var(--c-surface); color: var(--c-ink-muted); text-align: center; }
.employee-empty strong { color: var(--c-ink); }
.employee-create-dialog { width: min(94vw, 38rem); max-height: min(42rem, calc(100dvh - 2rem)); margin: auto; padding: var(--sp-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-3); overflow: auto; }
.employee-create-dialog::backdrop { background: rgba(16, 24, 40, .58); }
.employee-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); }
.employee-dialog-header h2 { margin: var(--sp-1) 0 0; font-size: var(--t-xl); }
.employee-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink-muted); font-size: 1.5rem; line-height: 1; }
.employee-dialog-close:hover, .employee-dialog-close:focus-visible { border-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); }
.employee-dialog-description { margin: var(--sp-3) 0 var(--sp-4); color: var(--c-ink-muted); overflow-wrap: anywhere; }
.employee-create-form { gap: var(--sp-3); }
.employee-form-field { display: grid; gap: var(--sp-1); min-width: 0; }
.employee-form-field > label { margin: 0; font-weight: 600; }
.employee-field-help { color: var(--c-ink-muted); overflow-wrap: anywhere; }
.employee-form-field.has-error > label { color: var(--c-danger); }
.employee-form-field.has-error input, .employee-form-field.has-error select { border-color: var(--c-danger); box-shadow: 0 0 0 .12rem rgba(176,42,55,.18); }
.employee-form-field .errorlist { margin: 0; padding: .4rem .6rem .4rem 1.7rem; border: 1px solid var(--c-danger); border-left: .3rem solid var(--c-danger); border-radius: var(--r-sm); background: var(--c-danger-soft); color: var(--c-danger); font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.employee-form-error-summary { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-danger); border-radius: var(--r-md); background: var(--c-danger-soft); color: var(--c-danger); }
.employee-form-error-summary strong { display: block; margin-bottom: var(--sp-1); }
.employee-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.staff-state-text--muted { color: var(--c-ink-muted); }
.staff-product-form { gap: var(--sp-4); }
.staff-form-section { padding-bottom: var(--sp-2); }
.staff-form-section h2, .staff-form-section h3 { border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-2); }
.staff-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-3); }
.staff-form-grid > div { min-width: 0; }
.staff-form-grid .field-wide { grid-column: 1 / -1; }
.staff-form-grid textarea { min-height: 5rem; width: 100%; }
.staff-form-grid input, .staff-form-grid select { max-width: 100%; }
.staff-form-actions { display: flex; justify-content: space-between; margin-top: var(--sp-3); }
.staff-form-actions > div { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.staff-product-form .errorlist { margin: var(--sp-1) 0 0; padding-left: 1.2rem; color: var(--c-danger); font-size: .85rem; }

/* Feature-payroll-02: карточка «К выплате» — тот же акцент-бордер, что
   у .system-card/.compliance-card, чтобы сумма к выплате читалась первой
   среди плановой суммы и числа сотрудников. */
.payroll-current-card { border-left: .3rem solid var(--c-brand); }
.payroll-hint { font-size: .82rem; }
.payroll-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orders-table { font-size: 1.05rem; }
.orders-table th, .orders-table td { vertical-align: top; padding: var(--sp-3) var(--sp-2); }
.order-row-stale > td { background: var(--c-warn-soft); }
.order-items { list-style: none; padding: 0; margin: 0; }
.order-row-new { font-weight: 600; }
.order-row-new td { background-color: var(--c-warn-soft); }
.order-status-badge { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); font-weight: 600; }
.order-status-new { background: var(--c-warn-soft); }
.order-status-confirmed { background: var(--c-ok-soft); }
.order-status-ready { background: var(--c-brand-soft); }
.order-status-assembled { background: var(--c-warn-soft); }
.order-status-in_delivery { background: var(--c-ok-soft); }
.order-status-completed { background: var(--c-neutral-soft); }
.order-status-cancelled { background: var(--c-danger-soft); }
.order-source-badge { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--c-neutral-soft); color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; line-height: 1.35; }
.order-source-phone, .order-source-staff { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.order-source-yandex_eats { background: var(--c-warn-soft); color: var(--c-ink); }
.order-action-danger { display: block; margin-top: var(--sp-2); }
.sound-state { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-weight: 700; }
.sound-on      { color: var(--c-ok); }
.sound-off     { color: var(--c-ink-faint); font-weight: 400; }
.sound-blocked { color: var(--c-danger); background: var(--c-danger-soft); }
/* Экран смены (usability К1) */
.shift-today-header { margin-bottom: var(--sp-4); }
.shift-today-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--c-ink-muted); margin: var(--sp-1) 0 0; }
.shift-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.shift-tile { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); text-decoration: none; color: var(--c-ink); }
.shift-tile:hover { border-color: var(--c-brand); }
.shift-tile-value { font-size: var(--t-2xl); font-weight: 700; }
.shift-tile-value-text { font-size: var(--t-xl); }
.shift-tile-ok { color: var(--c-ok); }
.shift-tile-warn { color: var(--c-warn); }
.staff-system-line { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: var(--sp-4) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-system-line-alert { color: var(--c-danger); font-weight: 600; }
.shift-high-demand { margin-bottom: var(--sp-4); }
.shift-high-demand-toggle summary { cursor: pointer; }
.shift-high-demand-toggle[open] summary { margin-bottom: var(--sp-2); }
.poll-status { min-height: 1.5rem; margin-bottom: var(--sp-2); font-size: var(--t-sm); }
.poll-status-ok    { color: var(--c-ink-faint); }
.poll-status-stale { color: var(--c-warn); font-weight: 700; }
.poll-status-error { color: var(--c-danger); font-weight: 700; }
.staff-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.staff-filter-row .form-select,
.staff-filter-row .form-control { width: auto; }
.staff-settings-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-3); }
.staff-settings-eyebrow { margin: 0 0 var(--sp-1); color: var(--c-brand-strong); font-size: var(--t-sm); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.staff-settings-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.staff-settings-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-ink); font-weight: 700; text-decoration: none; }
.staff-settings-link:hover, .staff-settings-link:focus-visible { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-strong); }
.staff-settings-section { min-width: 0; margin: 0; padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1); }
.staff-settings-section legend { padding: 0 var(--sp-2); color: var(--c-ink); font-size: var(--t-lg); font-weight: 700; }
.staff-settings-help { margin: 0 0 var(--sp-3); color: var(--c-ink-muted); font-size: var(--t-sm); max-width: 52rem; }
.staff-settings-check-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.staff-settings-check { display: flex; align-items: center; min-height: 2.75rem; gap: var(--sp-2); margin: 0; }
.staff-settings-check .form-check-input { flex: 0 0 auto; margin: 0; }
.staff-settings-mode { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-alt); }
.staff-settings-mode + .staff-settings-mode { margin-top: var(--sp-3); }
.staff-settings-field { display: grid; gap: var(--sp-1); min-width: 0; margin-top: var(--sp-3); }
.staff-settings-field > label { color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 600; }
.staff-settings-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.staff-settings-subsection { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-alt); }
.staff-settings-subsection-title { margin: 0; color: var(--c-ink); font-size: var(--t-md); font-weight: 700; }
.staff-settings-field-hint { margin: var(--sp-1) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-settings-auto-hint { margin: var(--sp-1) 0 0; padding: var(--sp-1) var(--sp-2); border-left: .2rem solid var(--c-line-strong); background: var(--c-surface-sunken); color: var(--c-ink-faint); font-size: var(--t-xs); }
.staff-settings-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-4); padding-bottom: var(--sp-4); }
.staff-settings-actions .btn { min-height: 2.75rem; }

/* Fix-settings-03: "Где видно" tag under a field/group and the "Где видно"
   caption inline with a checkbox. Distinct from `.staff-settings-field-hint`
   (plain help text) — this one always names an actual page/URL. */
.staff-settings-where { display: flex; align-items: flex-start; gap: var(--sp-1); margin: var(--sp-1) 0 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--c-brand-soft); color: var(--c-brand-strong); font-size: var(--t-xs); font-weight: 600; }

/* Settings hub: one card per subpage, room to grow. */
.staff-settings-hub { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.staff-settings-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1); color: var(--c-ink); text-decoration: none; }
.staff-settings-card:hover, .staff-settings-card:focus-visible { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.staff-settings-card-title { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.staff-settings-card-desc { margin: 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-settings-card-arrow { margin-top: auto; padding-top: var(--sp-2); color: var(--c-brand-strong); font-weight: 700; font-size: var(--t-sm); }
@media (min-width: 768px) {
  .staff-settings-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .staff-settings-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Subpage layout: form beside its live preview, stacked on narrow screens. */
.staff-settings-layout { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
@media (min-width: 992px) {
  .staff-settings-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .staff-settings-preview-col { position: sticky; top: var(--sp-3); }
}
.staff-settings-preview-label { margin: 0 0 var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.staff-settings-preview-frame { padding: var(--sp-4); border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface-alt); }
.staff-settings-preview-frame .home-order-summary,
.staff-settings-preview-frame .home-terms { margin: 0; max-width: none; }
.staff-settings-preview-note { margin: var(--sp-2) 0 0; color: var(--c-ink-faint); font-size: var(--t-xs); }
.staff-settings-preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.staff-settings-preview-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.staff-settings-preview-zones { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.staff-settings-preview-zones[hidden] { display: none; }
.staff-settings-preview-zone { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.staff-settings-preview-zone-fee { font-weight: 700; }
@media (max-width: 575px) {
  .staff-settings-field-grid { grid-template-columns: 1fr; gap: 0; }
  .staff-settings-actions .btn { width: 100%; }
}
.staff-toolbar-row { display: flex; align-items: center; gap: var(--sp-4); }
.staff-notify-groups { gap: var(--sp-5); }
.staff-notify-group { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.staff-notify-group-title { font-size: var(--t-sm); color: var(--c-ink-muted); }
.staff-table-scroll { overflow-x: auto; }
.order-row-highlight { animation: staff-row-flash 2s ease-in-out 2; }
@keyframes staff-row-flash {
  0% { background-color: var(--c-warn-soft); }
  50% { background-color: transparent; }
  100% { background-color: var(--c-warn-soft); }
}
.admin-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: stretch; }
.admin-card { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; min-height: 8rem; height: 100%; padding: var(--sp-3); }
.admin-card-icon { display: block; font-size: 1.4rem; line-height: 1; margin-bottom: var(--sp-1); }
.admin-card--muted { border-color: var(--c-line-strong); background: var(--c-surface-sunken); }
.admin-card--muted .admin-card-icon { filter: grayscale(1); opacity: .65; }
.admin-card p { line-height: var(--lh-normal); }
.admin-card-group { margin-bottom: var(--sp-5); }
.admin-card-group-title { font-size: var(--t-lg); margin-bottom: var(--sp-3); }
@media (max-width: 1199px) { .admin-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .admin-card-grid { grid-template-columns: 1fr; } }
.admin-help summary { cursor: pointer; font-weight: 600; }
.admin-help ul { margin-top: var(--sp-2); }
/* Feature-catalog-37: tokenized ingredient picker for product creation. */
.catalog-ingredient-picker { position: relative; }
.catalog-ingredient-picker-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-1); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.catalog-ingredient-picker-field:focus-within { border-color: var(--c-brand); }
.catalog-ingredient-picker-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.catalog-ingredient-picker-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--c-brand-soft); color: var(--c-ink); font-size: var(--t-sm); line-height: 1.8; }
.catalog-ingredient-picker-chip-remove { border: 0; background: none; padding: 0; margin: 0; font-size: 1rem; line-height: 1; color: var(--c-ink-muted); cursor: pointer; }
.catalog-ingredient-picker-chip-remove:hover, .catalog-ingredient-picker-chip-remove:focus-visible { color: var(--c-danger); }
.catalog-ingredient-picker-field input[data-ingredient-picker-input] { flex: 1 1 8rem; min-width: 8rem; border: 0; outline: 0; padding: var(--sp-1); background: transparent; }
.catalog-ingredient-picker-suggestions { position: absolute; z-index: 20; left: 0; right: 0; margin: var(--sp-1) 0 0; padding: var(--sp-1) 0; list-style: none; max-height: 12rem; overflow-y: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-2); }
.catalog-ingredient-picker-suggestion { padding: var(--sp-1) var(--sp-3); cursor: pointer; }
.catalog-ingredient-picker-suggestion.is-active, .catalog-ingredient-picker-suggestion:hover { background: var(--c-brand-soft); }
@media (max-width: 575px) { .catalog-ingredient-picker-field input[data-ingredient-picker-input] { min-width: 100%; } }

/* Feature-analytics-04: owner summary — a plain grid of linked figures. */
.staff-owner-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.staff-owner-summary-card { display: block; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--r-lg); transition: border-color .15s ease; }
.staff-owner-summary-card:hover, .staff-owner-summary-card:focus-visible { border-color: var(--c-brand); }
@media (max-width: 1199px) { .staff-owner-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .staff-owner-summary-grid { grid-template-columns: 1fr; } }
/* Feature-orders-03: две очереди заказов вместо широкой таблицы. */
.order-queues { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 992px) { .order-queues { grid-template-columns: 1fr 1fr; } }
.order-queue { display: flex; flex-direction: column; gap: var(--sp-3); }
.order-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-line); border-left: 4px solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface); }
.order-card-new { border-left-color: var(--c-danger); }
.order-card-confirmed { border-left-color: var(--c-brand); }
.order-card-ready { border-left-color: var(--c-brand); }
.order-card-assembled { border-left-color: var(--c-warn); }
.order-card-in_delivery { border-left-color: var(--c-ok); }
.order-card-completed { border-left-color: var(--c-ok); }
.order-card-cancelled { border-left-color: var(--c-neutral-soft); opacity: .65; }
.order-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.order-card-head strong { font-size: var(--t-lg); }
.order-card p { margin: 0; }
.order-card-phone { font-weight: 700; font-size: var(--t-lg); }
.order-card-address, .order-card-comment { color: var(--c-ink-muted); }
/* Fix-staff-ui-09: комментарий клиента читают в последнюю очередь и чаще
   всего пропускают — он получает собственную плашку с акцентом и обычным
   контрастом текста, а не приглушённую строку в общем потоке карточки. */
.order-card-comment--customer { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-left: .25rem solid var(--c-warn); border-radius: var(--r-sm); background: var(--c-warn-soft); color: var(--c-ink); }
.order-card-comment-label { color: var(--c-warn); font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.order-card-comment-text { font-size: var(--t-md); font-weight: 600; line-height: var(--lh-normal); overflow-wrap: anywhere; }
.order-card-zone { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface-sunken); color: var(--c-ink); font-size: var(--t-sm); font-weight: 600; }
.order-card-total { display: flex; align-items: center; gap: var(--sp-2); }
.order-card-station-pending { margin: var(--sp-2) 0; color: var(--c-warn); font-size: var(--t-sm); }
.order-client-notification { margin: var(--sp-2) 0; font-size: var(--t-sm); }
.staff-assembly-page { max-width: 46rem; margin: 0 auto; }
.staff-assembly-header { margin: var(--sp-4) 0; }
.staff-assembly-kicker { color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 700; }
.staff-assembly-form fieldset { display: grid; gap: var(--sp-2); border: 0; padding: 0; }
.staff-assembly-form legend { margin-bottom: var(--sp-2); font-size: var(--t-lg); font-weight: 700; }
.staff-assembly-check { display: flex; align-items: center; gap: var(--sp-3); min-height: 2.75rem; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; }
.staff-assembly-check input { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.staff-assembly-check span { flex: 1 1 auto; overflow-wrap: anywhere; }
.staff-assembly-check--missing { border-color: var(--c-danger); background: var(--c-danger-soft); }
.staff-assembly-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.order-condiment-hint { padding: var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface-alt); font-size: var(--t-sm); }
.order-card .order-items { margin: 0; padding-left: 1.1rem; }
.order-card .order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.order-card-more { border-top: 1px solid var(--c-line); padding-top: var(--sp-2); }
.order-card-more > summary { cursor: pointer; color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 600; }
.order-card-more > *:not(summary) { margin-top: var(--sp-2); }
.order-card-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.confirm-order-options { width: 100%; }
.confirm-order-options > summary { cursor: pointer; color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-orders-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.staff-orders-heading h1 { margin: 0; }
.staff-orders-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.staff-orders-toolbar .poll-status { flex: 1 1 12rem; margin: 0; }
.staff-high-demand-control { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-alt); }
.staff-high-demand-control h2 { margin: 0; font-size: var(--t-md); }
.staff-high-demand-state, .staff-high-demand-note { margin: var(--sp-1) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-high-demand-state--on { color: var(--c-brand-strong); font-weight: 700; }
.staff-high-demand-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2); }
.staff-high-demand-form label { color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 600; }
.staff-high-demand-form .form-control { width: 8rem; }
.staff-high-demand-form .btn { min-height: 2.75rem; }
.staff-orders-notifications { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.staff-orders-notifications > summary { cursor: pointer; font-weight: 600; }
.order-queue-count { color: var(--c-ink-muted); font-size: var(--t-sm); white-space: nowrap; }
.order-card-primary-action { flex: 1 1 16rem; min-width: min(100%, 16rem); }
.order-card-primary-action form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.order-card-primary-action .confirm-order-submit, .order-card-primary-action .order-complete-form .btn { min-height: 2.75rem; }
.order-card-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.order-card-secondary-actions form { margin: 0; }
.kitchen-station-ready { margin: var(--sp-2) 0 0; color: var(--c-ok); font-weight: 700; }
.kitchen-station-ready-form, .kitchen-complete-form { margin-top: var(--sp-2); }
/* Fix-kitchen-07: действия карточки кухни в одном ряду, компактно и без
 * вертикального прыжка при фоновом обновлении. */
.kitchen-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.kitchen-order-actions .kitchen-station-ready-form, .kitchen-order-actions .kitchen-complete-form { margin-top: 0; }
.kitchen-order-actions .kitchen-station-ready { margin: 0; }
.kitchen-complete-button { min-height: 2.75rem; }
/* Feature-orders-10: подтверждение и правка нового заказа рядом. */
.order-card-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.order-card-action-row .confirm-order-submit { flex: 1 1 auto; }
@media (max-width: 767px) {
  .staff-orders-toolbar > .btn { width: 100%; }
  .staff-high-demand-form { width: 100%; }
  .staff-high-demand-form .form-control, .staff-high-demand-form .btn { flex: 1 1 100%; width: 100%; }
  .order-card-primary-action { min-width: 100%; }
  .order-card-primary-action .btn { width: 100%; }
  .order-card-primary-action .confirm-order-time { flex: 1 1 100%; }
}
/* Feature-orders-04: форма приёма заказа по телефону. */
.staff-phone-order-form { max-width: 1500px; margin: 0 auto; }
.staff-phone-order-header { margin-bottom: var(--sp-4); }
.staff-phone-order-header h1 { margin-bottom: var(--sp-1); }
.staff-phone-order-customer, .staff-phone-order-products, .staff-phone-order-summary { border-color: var(--c-line-strong); box-shadow: var(--sh-1); }
.staff-phone-order-customer h2, .staff-phone-order-products h2, .staff-phone-order-summary h2 { margin-bottom: 0; }
.staff-phone-order-customer .staff-phone-order-fields { gap: var(--sp-2); }
.staff-phone-order-customer .form-label { margin-bottom: var(--sp-1); }
.staff-phone-order-choice { min-width: 0; margin: 0; padding: var(--sp-2) 0 0; border: 0; border-top: 1px solid var(--c-line); }
.staff-order-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sp-2); max-height: 28rem; overflow-y: auto; scrollbar-width: thin; }
.staff-order-product { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.staff-order-product-name { display: flex; flex-direction: column; min-width: 0; }
.staff-order-product-name { line-height: var(--lh-tight); }
/* Feature-orders-09: плотная карточка — имя, теги, факты и состав в одну колонку. */
.staff-order-product-name > a { font-weight: 600; color: var(--c-ink); }
.staff-order-product-facts { color: var(--c-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-order-product-composition { color: var(--c-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-order-product-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.staff-order-tag { display: inline-flex; align-items: center; padding: 0 .4rem; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink-muted); font-size: .72rem; line-height: 1.5; white-space: nowrap; }
.staff-order-tag-warn { border-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); font-weight: 700; }
.staff-order-tag-spicy { border-color: var(--c-warn); color: var(--c-warn); }
.staff-order-product.is-in-order { border-color: var(--c-brand); background: var(--c-brand-soft); }
.staff-order-product.is-in-order .staff-order-qty { border-color: var(--c-brand); font-weight: 700; color: var(--c-brand-strong); }
.staff-order-product-count { color: var(--c-ink-faint); font-size: var(--t-sm); font-weight: 400; }
.staff-order-products-empty { margin: 0; padding: var(--sp-4); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); color: var(--c-ink-muted); text-align: center; }
.staff-order-qty { width: 3rem; flex: 0 0 auto; text-align: center; }
/* Fix-orders-XX: количество кликами +/- вместо ручного ввода числа. */
.staff-order-qty-stepper { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.staff-order-qty-stepper button { width: 2rem; padding: 0 .25rem; line-height: 1.5; }

/* Fix-staff-orders-08: desktop workspace for a live phone order. */
.staff-phone-order-layout { display: grid; gap: var(--sp-4); align-items: start; }
.staff-phone-order-customer, .staff-phone-order-products, .staff-phone-order-summary { min-width: 0; }
.staff-phone-order-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.staff-phone-order-header-copy { min-width: 0; }
/* Fix-staff-ui-10: плашка кухни видна всегда, поэтому спокойное состояние
   выглядит спокойно — тревожный акцент и пульсация включаются только при
   перегрузке (.is-busy), иначе это был бы постоянный ложный сигнал. */
.staff-kitchen-queue-warning { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-height: 2.75rem; max-width: 100%; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-line-strong); border-left: .3rem solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface-alt); color: var(--c-ink); box-shadow: var(--sh-1); font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-tight); text-decoration: none; }
.staff-kitchen-queue-warning.is-busy { border-left-color: var(--c-warn); background: var(--c-warn-soft); }
.staff-kitchen-queue-warning[hidden] { display: none; }
.staff-kitchen-queue-warning:hover, .staff-kitchen-queue-warning:focus-visible { border-color: var(--c-brand); border-left-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-strong); }
.staff-kitchen-queue-dot { flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-ink-faint); }
.staff-kitchen-queue-warning.is-busy .staff-kitchen-queue-dot { background: var(--c-warn); animation: staff-kitchen-queue-pulse 1.8s ease-in-out infinite; }
.staff-kitchen-queue-label { padding-right: var(--sp-1); color: var(--c-brand-strong); font-weight: 700; }
.staff-kitchen-queue-item { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); white-space: nowrap; }
.staff-kitchen-queue-item--pizza { background: var(--c-kitchen-pizza-soft); color: var(--c-kitchen-pizza); }
.staff-kitchen-queue-item--rolls { background: var(--c-kitchen-rolls-soft); color: var(--c-kitchen-rolls); }
.staff-kitchen-queue-item strong { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; padding: 0 .35rem; border-radius: var(--r-pill); color: var(--c-surface); font-variant-numeric: tabular-nums; text-align: center; }
.staff-kitchen-queue-item--pizza strong { background: var(--c-kitchen-pizza); }
.staff-kitchen-queue-item--rolls strong { background: var(--c-kitchen-rolls); }
@keyframes staff-kitchen-queue-pulse { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.staff-phone-order-fields { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.staff-phone-order-fields .field-wide { grid-column: 1 / -1; }
.staff-phone-order-products { display: grid; gap: var(--sp-3); }
.staff-phone-order-products-header { display: grid; grid-template-columns: minmax(0, auto) minmax(12rem, 1fr); gap: var(--sp-3); align-items: center; }
.staff-phone-order-products-header > * { min-width: 0; }
.staff-phone-order-products-header h2 { margin: 0; }
.staff-phone-order-products-header input { width: 100%; }
.staff-order-category-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.staff-order-category-list .btn { min-height: 2.75rem; }
.staff-order-category-list .btn.is-active { color: var(--c-surface); border-color: var(--c-brand); background: var(--c-brand); }
/* Две колонки были жёсткими, и на 1280 средняя колонка (433px) резала плитку
   до 190px: под название оставалось 45px, и «Сет «Гармония»» переносился по
   буквам. Колонки набираются по ширине — узкая колонка отдаёт одну плитку. */
.staff-order-products { max-height: calc(100vh - 18rem); }
.staff-order-product { min-width: 0; background: var(--c-surface-alt); }
.staff-order-product-name { overflow-wrap: anywhere; }
.staff-phone-order-summary { position: sticky; top: var(--sp-3); }
.staff-phone-order-summary-lines { display: grid; gap: var(--sp-1); list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.staff-phone-order-summary-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.staff-phone-order-summary-line > span { min-width: 0; overflow-wrap: anywhere; }
.staff-phone-order-summary-label { flex: 1 1 auto; }
.staff-phone-order-summary-amount { flex: 0 0 auto; color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
.staff-phone-order-summary-remove { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink-muted); font-size: 1.25rem; line-height: 1; }
.staff-phone-order-summary-remove:hover, .staff-phone-order-summary-remove:focus-visible { border-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); }
.staff-packing-controls { display: grid; gap: 0; margin: var(--sp-3) 0 var(--sp-4); border-top: 1px solid var(--c-line); }
.staff-packing-controls[hidden], .staff-packing-control[hidden], .staff-condiment-controls[hidden] { display: none; }
.staff-packing-controls-title { margin: var(--sp-2) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 700; }
.staff-condiment-controls { display: grid; }
.staff-packing-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3); min-width: 0; min-height: 3rem; padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); }
.staff-packing-control > label { min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.staff-packing-stepper { display: inline-flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.staff-packing-stepper .btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; min-height: 2.5rem; padding: 0; font-size: var(--t-lg); line-height: 1; }
.staff-packing-stepper input { width: 3rem; min-width: 3rem; height: 2.5rem; padding-inline: var(--sp-1); text-align: center; font-variant-numeric: tabular-nums; }
.staff-packing-control .staff-order-field-error { grid-column: 1 / -1; }
.staff-packing-control.has-error { border-bottom-color: var(--c-danger); }
.staff-packing-control.has-error > label { color: var(--c-danger); }
.staff-packing-control.has-error input { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); }
.staff-phone-order-submit-actions { display: grid; gap: var(--sp-2); }
.staff-phone-order-submit-actions .btn { min-height: 3rem; }
.staff-order-source-options { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); }
.staff-order-source-option { display: inline-flex; align-items: center; gap: var(--sp-2); width: max-content; max-width: 100%; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); cursor: pointer; white-space: nowrap; }
.staff-order-source-option.is-active { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-strong); font-weight: 700; }
.staff-order-source-option input { margin: 0; }
.staff-phone-order-choice-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.staff-phone-order-choice-options label { display: inline-flex; align-items: center; flex: 0 1 auto; gap: var(--sp-2); min-height: 2.75rem; margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); cursor: pointer; white-space: nowrap; }
.staff-phone-order-choice-options label.is-active { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-strong); font-weight: 700; }
.staff-phone-order-choice-options input { margin: 0; }
.staff-order-source-hint { min-height: 1.25rem; margin-top: var(--sp-2); }
.staff-order-field-error { margin-top: var(--sp-1); color: var(--c-danger); font-size: var(--t-sm); font-weight: 600; }
.staff-phone-order-fields .has-error .form-control,
.staff-phone-order-fields .has-error .form-select { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); }
.staff-phone-order-fields .has-error .form-label,
.staff-phone-order-fields .has-error legend { color: var(--c-danger); }
@media (min-width: 1200px) {
  .staff-phone-order-layout { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr) minmax(17rem, 21rem); }
}
@media (min-width: 1440px) {
  .staff-phone-order-layout { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr) minmax(18rem, 23rem); }
}
@media (max-width: 1199px) {
  .staff-phone-order-layout { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); }
  .staff-phone-order-summary { grid-column: 1 / -1; position: static; }
}
@media (max-width: 767px) {
  .staff-phone-order-layout, .staff-phone-order-fields, .staff-phone-order-products-header, .staff-order-products { grid-template-columns: 1fr; }
  .staff-phone-order-summary { position: static; }
  .staff-order-products { max-height: none; }
  .staff-order-source-option { flex: 1 1 100%; }
  .staff-packing-stepper .btn, .staff-packing-stepper input { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .staff-kitchen-queue-dot, .staff-order-alerts.has-pending-orders .staff-order-alerts-dot { animation: none; }
}

/* Галерея фото товара во внутреннем каталоге (§13.3, шаг 8) */
.staff-gallery { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.staff-gallery-item { width: 14rem; margin: 0; padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.staff-gallery-item img { width: 100%; height: 7rem; object-fit: cover; border-radius: var(--r-sm); }
.staff-gallery-item figcaption { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); font-size: .75rem; }
.staff-gallery-private { opacity: .6; border-style: dashed; }
.staff-gallery-edit { margin-top: var(--sp-2); font-size: .8rem; }
.staff-gallery-edit-form { margin-top: var(--sp-1); }
.badge-soft { display: inline-block; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface-alt); margin: .08rem; font-size: .75rem; }
@media (max-width: 991px) { .staff-catalog-layout { grid-template-columns: 1fr; } .catalog-filter-sidebar { position: static; } .staff-employee-directory-head, .staff-employee-row { grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(10rem, 1.25fr); } .staff-employee-phone { display: none; } }
@media (max-width: 575px) { .staff-user { margin-left: 0; } }
@media (max-width: 767px) {
  .employee-page-header { align-items: stretch; flex-direction: column; gap: var(--sp-3); }
  .employee-add-button { width: 100%; }
  .employee-stats { gap: var(--sp-2); }
  .employee-stat { align-items: start; flex-direction: column; padding: var(--sp-2); }
  .employee-stat strong { font-size: 1.35rem; }
  .employee-search-form > .btn { flex: 0 0 auto; }
  .employee-directory-head { display: none; }
  .employee-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); }
  .employee-row-name, .employee-row-roles { grid-column: 1 / -1; }
  .employee-row > .employee-phone { display: none; }
  .employee-create-dialog { padding: var(--sp-3); }
}
@media (max-width: 767px) { .staff-product-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; } .staff-product-tabs a { flex: 0 0 auto; scroll-snap-align: start; } .staff-product-tab-group { flex: 0 0 auto; } .staff-readonly-grid { grid-template-columns: 1fr; } .staff-readonly-grid .field-wide { grid-column: auto; } .staff-employee-directory-head { display: none; } .staff-employee-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); } .staff-employee-row > div:first-child { grid-column: 1 / -1; } }

/* Fix-frontend-05: контактная полоса над шапкой — телефон (тап = звонок),
   адрес, «Все контакты». Только токены: фон — глубокий брендовый,
   текст — цвет страницы (контраст > 7:1). */
.site-topbar { background: var(--c-brand-strong); color: var(--c-page); }
.site-topbar-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-1) clamp(1rem, 3vw, 2rem);
}
.site-topbar-phone, .site-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  color: var(--c-page);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
}
.site-topbar-phone:hover, .site-topbar-phone:focus-visible,
.site-topbar-link:hover, .site-topbar-link:focus-visible {
  color: var(--c-brand-soft);
  text-decoration: underline;
}
.site-topbar-icon { flex: 0 0 auto; }
/* Fix-frontend-13: VK now sits in the phone cluster, styled the same as a
   phone link (44px tap target, same hover) with a tighter icon/label gap
   since "VK" is two letters, not a formatted number. */
.site-topbar-vk { gap: var(--sp-1); }
.site-topbar-address {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  overflow: hidden;
  color: var(--c-page);
  font-size: var(--t-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: .85;
}
.site-topbar-link { margin-left: auto; }
@media (max-width: 991.98px) {
  .site-topbar-address { display: none; }
}

/* Шапка с контактами (§99, шаг 9) */
.site-header { border-bottom: 1px solid var(--c-line); padding: var(--sp-3) 0; background: var(--c-surface); }
.site-brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; color: var(--c-brand-strong); font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.site-brand:hover, .site-brand:focus-visible { color: var(--c-brand); }
.site-brand-logo { flex: 0 0 auto; width: 3rem; height: 3rem; border: 1px solid var(--c-line-strong); border-radius: 50%; box-shadow: var(--sh-1); object-fit: cover; }
.site-header .site-brand-label { min-width: 0; font-family: var(--f-brand); font-size: var(--t-xl); font-weight: 800; letter-spacing: .025em; line-height: 1; }
.site-nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); text-decoration: none; color: var(--c-ink); }
.site-nav-link:hover, .site-nav-link:focus-visible { color: var(--c-brand); }
.site-cart-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); text-decoration: none; background: var(--c-brand); color: var(--c-surface); font-weight: 600; }
.site-cart-link:hover, .site-cart-link:focus-visible { color: var(--c-surface); filter: brightness(.97); }
.site-status-badge { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 700; }
.site-status-badge[hidden] { display: none; }
/* Fix-staff-05: значок уведомлений в шапке персонала. */
.staff-nav-bell { position: relative; padding: var(--sp-1) var(--sp-2); }
.staff-nav-bell-count { position: absolute; top: -.15rem; right: -.15rem; min-width: 1.1rem; padding: 0 .2rem; border-radius: var(--r-pill); background: var(--c-danger); color: var(--c-surface); font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.1rem; }
.site-status-open        { color: var(--c-ok); background: var(--c-ok-soft); }
.site-status-closing_soon { color: var(--c-warn); background: var(--c-warn-soft); }
.site-status-closed      { color: var(--c-ink-muted); background: var(--c-surface-alt); }
.site-status-paused      { color: var(--c-danger); background: var(--c-danger-soft); }
.site-status-high_demand { color: var(--c-warn); background: var(--c-warn-soft); }
.contacts-block { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-2); }
.contacts-address { flex: 1 1 100%; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.contacts-social { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.contacts-social-link--soon { color: var(--c-ink-faint); cursor: default; }
@media (max-width: 575px) {
  .contacts-block { gap: var(--sp-2) var(--sp-3); }
}
@media (max-width: 767px) {
  .site-header-shell, .staff-header-shell { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header-actions, .staff-header-alert-zone, .staff-header-nav-zone { grid-column: 1 / -1; }
  .staff-header-alert-zone { flex-wrap: wrap; }
  .staff-order-alerts { max-width: 100%; }
  .staff-order-alerts-link { overflow: hidden; text-overflow: ellipsis; }
  .site-header-actions { justify-content: flex-start; }
}

/* Значки-теги на фото карточки (шаг 9); Fix-public-02: ряд не шире фото */
.product-image-trigger { position: relative; display: block; overflow: hidden; }
.product-tag-row {
  position: absolute; left: .5rem; right: .5rem; bottom: .5rem;
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  max-width: calc(100% - 1rem); pointer-events: none;
}
.product-tag-row-static { position: static; padding: var(--sp-2) var(--sp-2) 0; max-width: 100%; }
.product-tag {
  display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%;
  padding: var(--sp-1) var(--sp-2); font-size: .8rem; line-height: 1.2;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
}
/* Fix-menu-44: the label is the meaning of the badge, so it wraps with the
   row instead of being truncated to an unreadable stub. */
.product-tag-label { display: inline-block; }
/* Fix-menu-48: значок-предупреждение прижимается к углу только там, где есть
   позиционированный предок — карточка меню. На странице товара его нет, и
   абсолют уносил значок в угол страницы, к шапке (замер: x=1229, y=8 при
   заголовке товара x=645, y=158). Базовое состояние — обычная строка. */
.product-warn-icons { display: flex; gap: var(--sp-1); }
.product-image-trigger .product-warn-icons,
.product-card > .product-warn-icons { position: absolute; bottom: var(--sp-2); right: var(--sp-2); }
.product-detail-page .product-warn-icons { margin: 0 0 var(--sp-2); }
.product-image-trigger { position: relative; }
.product-warn-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-line-strong); font-size: 1rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Краткое описание: ровно две строки, чтобы карточки не прыгали по высоте */
.product-note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0 0 var(--sp-3); line-height: 1.45; color: var(--c-ink-muted); overflow-wrap: anywhere;
}

/* Диалог подтверждения заказа со временем (Д3) - тот же паттерн, что у окна товара */
.confirm-dialog { width: min(92vw, 26rem); border: 0; border-radius: var(--r-md); padding: 0; box-shadow: var(--sh-3); }
.confirm-dialog::backdrop { background: rgba(0,0,0,.55); }
.confirm-dialog-inner { position: relative; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.confirm-dialog-close { position: absolute; top: var(--sp-1); right: var(--sp-2); z-index: 1; font-size: 1.6rem; text-decoration: none; }
.confirm-dialog-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.confirm-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.confirm-order-form { display: flex; align-items: center; gap: var(--sp-1); }

/* Окно товара */
/* ------------------------------------------------------------------
   Fix-menu-47: product window. The screen shows it whole: the photo is
   height-capped, the composition is a wrapping row of chips instead of a
   column, and price plus the add button stay pinned at the bottom even
   when the composition is long.
   ------------------------------------------------------------------ */
.product-dialog { width: min(94vw, 34rem); max-height: min(88vh, 46rem); overflow: hidden; border: 0; border-radius: var(--r-lg); padding: 0; background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-3); }
.product-dialog::backdrop { background: rgba(0,0,0,.55); }
.product-dialog-inner { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--sp-3); max-height: min(88vh, 46rem); padding: var(--sp-4); }
.product-dialog-close { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-size: var(--t-2xl); line-height: 1; cursor: pointer; }
.product-dialog-close:hover, .product-dialog-close:focus-visible { background: var(--c-surface-sunken); }
.product-dialog-media { min-width: 0; }
.product-dialog-main-image { display: block; width: 100%; max-height: 24vh; object-fit: cover; border-radius: var(--r-md); background: var(--c-surface-sunken); }
.product-dialog-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); overflow-x: auto; }
.product-dialog-thumb { flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); background: none; cursor: pointer; }
.product-dialog-thumb.is-active { border-color: var(--c-brand); }
.product-dialog-thumb:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.product-dialog-thumb img { display: block; width: 3.5rem; height: 2.75rem; object-fit: cover; border-radius: var(--r-sm); }
.product-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.product-dialog-body h2 { margin: 0 var(--sp-7) var(--sp-2) 0; font-size: var(--t-xl); line-height: var(--lh-tight); }
.product-dialog-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.product-dialog-tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--c-brand-soft); color: var(--c-brand-strong); font-size: var(--t-xs); font-weight: 600; }
.product-dialog-facts { margin: 0 0 var(--sp-3); color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 600; }
.product-dialog-subtitle { margin: 0 0 var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; }
.product-composition-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.product-composition-item { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface-alt); font-size: var(--t-sm); overflow-wrap: anywhere; }
.product-composition-item a { color: var(--c-brand-strong); font-weight: 600; text-decoration: none; }
.product-composition-item a:hover, .product-composition-item a:focus-visible { text-decoration: underline; }
.product-dialog-description { margin: var(--sp-3) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); line-height: var(--lh-normal); }
.product-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.product-dialog-actions .price { font-size: var(--t-lg); }
.product-dialog-cart { margin-left: auto; }
.product-dialog-page-link { flex-basis: 100%; font-size: var(--t-sm); }
.product-dialog-actions .cart-action-status { flex-basis: 100%; }
@media (min-width: 768px) {
  .product-dialog { width: min(92vw, 50rem); }
  .product-dialog-inner { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--sp-5); }
  .product-dialog-inner:has(.product-dialog-media) .product-dialog-media { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .product-dialog-inner:has(.product-dialog-media) .product-dialog-body { grid-column: 2; grid-row: 1; }
  .product-dialog-inner:has(.product-dialog-media) .product-dialog-actions { grid-column: 2; grid-row: 2; }
  .product-dialog-inner:not(:has(.product-dialog-media)) { grid-template-columns: minmax(0, 1fr); }
  .product-dialog-main-image { max-height: 19rem; }
}
/* A menu card opens on a click anywhere, so the cursor promises that. */
.has-product-dialog .product-card--food[data-open-product] .product-card-body { cursor: pointer; }
/* Fix-frontend-08: карточка обещает открыться целиком — наведение подтверждает
   это. Только там, где окно реально существует (класс ставит public_menu.js). */
@media (hover: hover) {
  .has-product-dialog .product-card--food[data-open-product] { transition: border-color .15s, box-shadow .15s; }
  .has-product-dialog .product-card--food[data-open-product]:hover { border-color: var(--c-brand); box-shadow: var(--sh-1); }
}
@media (prefers-reduced-motion: reduce) {
  .has-product-dialog .product-card--food[data-open-product] { transition: none; }
}

/* Фокус — один стиль на все интерактивные элементы */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.chip:focus-visible, .menu-filter-chip:focus-visible,
.category-nav a:focus-visible, .catalog-product-image:focus-visible,
.staff-nav a:focus-visible, .contacts-social-link:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Ховер — только для указательных устройств, никогда единственный носитель смысла */
@media (hover: hover) {
  .product-card { transition: box-shadow .15s, transform .15s; }
  .product-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
  .catalog-product-row:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-2); transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Доступность (usability М1): зоны касания ≥44×44 px у компактных
   интерактивных элементов витрины — область растёт псевдоэлементом,
   визуальный размер не меняется. К плотной панели персонала требование
   не применяется. */
.menu-filter-chip, .category-nav a, .chip, .contacts-social-link { position: relative; }
.menu-filter-chip::after, .category-nav a::after, .chip::after, .contacts-social-link::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px;
}

/* Главная страница (usability Е3) */
.home-status { display: inline-block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-size: var(--t-lg); font-weight: 700; }
.home-status-open        { color: var(--c-ok); background: var(--c-ok-soft); }
.home-status-closing_soon { color: var(--c-warn); background: var(--c-warn-soft); }
.home-status-closed      { color: var(--c-ink-muted); background: var(--c-surface-alt); }
.home-status-paused      { color: var(--c-danger); background: var(--c-danger-soft); }
.home-status-high_demand { color: var(--c-warn); background: var(--c-warn-soft); }
.home-announcement { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-alt); font-size: var(--t-sm); }
.home-announcement span { color: var(--c-ink-muted); }
.home-active-order { display: block; max-width: 76rem; margin: var(--sp-4) auto 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand-soft); color: var(--c-brand-strong); font-weight: 600; text-decoration: none; text-align: center; }
.home-active-order:hover, .home-active-order:focus-visible { background: var(--c-brand); color: var(--c-surface); }
.home-quick-categories { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.home-order-summary { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: center; gap: var(--sp-5); max-width: 76rem; margin: var(--sp-5) auto; padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface-alt); }
.home-order-summary-media { min-width: 0; max-width: 26rem; max-height: 16rem; overflow: hidden; border-radius: var(--r-lg); }
.home-hero-image { display: block; width: 100%; max-width: 26rem; max-height: 16rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); }
.home-hero-title { font-size: var(--t-2xl); }
.home-order-summary-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.home-order-summary-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.home-order-summary-facts li { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); }
.home-order-summary-delivery { margin: 0; color: var(--c-ink-muted); }
.home-terms, .home-popular, .home-contacts { margin-top: var(--sp-5); }
.home-quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); max-width: 76rem; margin: 0 auto var(--sp-5); }
.home-quick-link { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink); text-decoration: none; }
.home-quick-link:hover, .home-quick-link:focus-visible { border-color: var(--c-brand); box-shadow: var(--sh-1); }
.home-quick-link--primary { border-color: var(--c-brand); background: var(--c-brand-soft); }
.home-quick-link-label { color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.home-quick-link strong { font-size: var(--t-lg); }
.home-quick-link span:last-child { color: var(--c-ink-muted); font-size: var(--t-sm); }
.home-popular-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 22rem)); justify-content: start; gap: var(--sp-3); }
.home-popular-grid > .product-card--food { min-width: 0; max-width: 22rem; }
.home-popular-grid .product-card--with-image .product-card { display: flex; flex-direction: column; }
.home-popular-grid .product-card--with-image .product-image-trigger { width: 100%; max-width: none; }
.home-popular-grid .product-card--with-image .product-image-trigger img { width: 100%; height: auto; max-height: 16rem; aspect-ratio: 4 / 3; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.home-popular-grid .product-card-body { min-height: 0; padding: var(--sp-3); }
.home-popular-grid .product-card-body h3 { font-size: var(--t-lg); }
.home-terms-list { margin: 0; }
/* Fix-settings-03: same author-vs-[hidden] conflict as .checkout-total-row above. */
.home-terms-list > div[hidden] { display: none; }
.home-order-summary-facts[hidden] { display: none; }
.home-terms-intro { max-width: 52rem; margin: 0 0 var(--sp-3); color: var(--c-ink-muted); }
.home-terms-list > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.home-terms-list dt { font-weight: 700; color: var(--c-ink-muted); }
.home-terms-list dd { margin: 0; }
@media (max-width: 767px) {
  .home-order-summary { grid-template-columns: 1fr; margin-inline: 0; }
  .home-order-summary-media, .home-hero-image { max-width: 100%; max-height: 12rem; }
  .home-quick-links { grid-template-columns: 1fr; }
  .home-popular-grid { grid-template-columns: minmax(0, 1fr); }
  .home-popular-grid > .product-card--food { max-width: none; }
}
@media (max-width: 575px) { .home-terms-list > div { grid-template-columns: 1fr; } }
/* Feature-public-07: комбо «Корпоратив» (/corporate/). */
.corporate-combo-form { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 34rem; margin: var(--sp-4) 0; }
/* Feature-catalog-26: сет «Корпоратив» карточкой в меню — как сет/комбо,
   а не кнопка в шапке сайта. */

/* Fix-public-menu-08: спокойный каталог без промо-шумов. */
.menu-intro { margin: 0; padding: var(--sp-5) 0 var(--sp-3); }
.menu-intro h1 { margin: 0; font-size: var(--t-2xl); line-height: var(--lh-tight); }
.menu-category-rail { position: sticky; top: 0; z-index: 10; margin: 0 0 var(--sp-3); padding: var(--sp-2) 0; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.menu-category-rail-inner, .menu-filters { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: thin; }
.menu-category-rail-link, .menu-filter-chip { display: inline-flex; align-items: center; min-height: 2.5rem; flex: 0 0 auto; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink-muted); text-decoration: none; }
.menu-category-rail-link:hover, .menu-filter-chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.menu-category-rail-link.is-active, .menu-filter-chip.is-active { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-surface); font-weight: 700; }
.menu-tools { display: grid; gap: var(--sp-2); min-width: 0; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.menu-search, .menu-category-rail, .menu-filter-details { min-width: 0; }
.menu-search { margin: 0; }
.menu-filter-details { border-top: 1px solid var(--c-line); }
.menu-filter-details summary { cursor: pointer; padding: var(--sp-2) 0; font-weight: 600; }
.menu-filters { flex-wrap: wrap; overflow: visible; margin: 0; padding-bottom: var(--sp-1); }
.menu-filter-chip { position: relative; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.menu-filter-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menu-filter-chip:has(input:focus-visible) { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.menu-tools.is-loading { opacity: .72; }
.menu-category-heading { margin: var(--sp-5) 0 var(--sp-3); }
.menu-product-grid--food { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.product-card--food { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: none; }
.product-card--food .product-card-body, .product-card--food .product-card-footer { min-width: 0; }
.product-card--food .product-card-body { min-height: 11rem; }
.product-card--food .product-card-body h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: balance; }
.product-card--food .product-note { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card--food .product-card-footer { gap: var(--sp-2); }
.menu-special-grid { margin-top: var(--sp-3); }
.home-social-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.menu-order-panel--food { display: none; }
.menu-order-panel--food [data-menu-order-checkout][hidden] { display: none; }
.menu-order-panel--food.is-has-items { border-color: var(--c-brand); box-shadow: var(--sh-1); }
.menu-order-panel--food .btn { min-height: 2.75rem; }
.menu-category-rail-link:focus-visible, .menu-filter-chip:focus-visible, .menu-order-panel--food a:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }
/* Fix-frontend-06: строка категорий липнет к верху экрана карточкой — навигация
   доступна на любой глубине прокрутки 100+ позиций. */
.menu-category-filters { position: sticky; top: var(--sp-2); z-index: 15; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
/* Fix-frontend-06: строка сортировки (Этап 16) живёт под рельсом категорий. */
.menu-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); }
.menu-sort-option { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-1) var(--sp-3); border: 1px solid transparent; border-radius: var(--r-pill); color: var(--c-brand-strong); font-weight: 600; text-decoration: none; }
.menu-sort-option:hover, .menu-sort-option:focus-visible { border-color: var(--c-brand); }
.menu-sort-option.is-active { border-color: var(--c-brand); background: var(--c-brand-soft); }
/* Fix-frontend-14: `align-items: center` vertically centered the pill's own
   text against the smaller-font count span by their box heights, not their
   baselines — with different digit widths per category, the count looked
   like it bounced up/down relative to the label as you scanned the row.
   `baseline` lines up both on the text baseline instead, so the count sits
   still. */
.menu-category-filter { display: inline-flex; align-items: baseline; gap: var(--sp-1); min-height: 2.5rem; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.menu-category-filter:hover, .menu-category-filter:focus-visible { border-color: var(--c-brand); color: var(--c-brand); }
.menu-category-filter.is-active { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-surface); font-weight: 700; }
.menu-category-filter.is-disabled { color: var(--c-ink-faint); background: var(--c-surface-sunken); border-style: dashed; cursor: not-allowed; }
.menu-category-filter-count { font-size: var(--t-xs); opacity: .82; }
.menu-hours-note { margin: var(--sp-2) 0 0; }
.menu-empty-category { margin: 0; padding: var(--sp-4); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); color: var(--c-ink-muted); background: var(--c-surface-alt); }
@media (min-width: 600px) {
  .menu-product-grid--food { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card--with-image .product-card { flex-direction: column; }
  .product-card--with-image .product-image-trigger { width: 100%; }
  .product-card--with-image .product-image-trigger img { height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
@media (min-width: 992px) {
  .menu-category-rail { position: static; }
  .menu-product-grid--food { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-order-panel--food { display: block; position: sticky; top: var(--sp-3); margin-top: calc(var(--sp-6) + var(--sp-5) + var(--sp-3)); }
}
@media (min-width: 1280px) {
  .menu-product-grid--food { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .menu-product-grid--food { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .menu-layout { display: block; }
  .menu-order-panel--food { margin-top: var(--sp-5); }
}
@media (max-width: 599px) {
  .menu-page { padding-inline: 0; }
  .menu-category-rail { margin-inline: calc(var(--sp-3) * -1); padding-inline: var(--sp-3); }
  .menu-product-grid--food { gap: var(--sp-2); }
  .product-card--with-image .product-card { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  .product-card--with-image .product-image-trigger { width: 100%; max-width: 6.5rem; }
  .product-card--with-image .product-image-trigger img { height: 100%; aspect-ratio: auto; border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .product-card--with-image .product-card-body { min-width: 0; min-height: 0; padding: var(--sp-3); }
  .product-card--with-image .product-card-body h3 { margin-bottom: var(--sp-1); font-size: var(--t-lg); }
  .product-card--with-image .product-note { margin-bottom: var(--sp-2); }
  .product-card--with-image .price { font-size: var(--t-md); }
  .menu-floating-actions { left: var(--sp-3); right: var(--sp-3); align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-page *, .menu-page *::before, .menu-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.menu-order-panel-note { margin: 0 0 var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-sm); }
/* Fix-frontend-09: остаток до бесплатной доставки - второй строкой плашки. */
.menu-mobile-cart-bar.is-visible { flex-wrap: wrap; }
.menu-mobile-cart-bar .menu-mobile-cart-hint { flex-basis: 100%; font-size: var(--t-xs); font-weight: 600; }
.menu-mobile-cart-bar { display: none; }
@media (max-width: 991px) {
  .menu-main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .menu-mobile-cart-bar.is-visible {
    position: fixed; z-index: 20; left: var(--sp-3); right: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); min-height: 3rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
    background: var(--c-brand); color: var(--c-surface); box-shadow: var(--sh-2);
    text-decoration: none;
  }
}
@media (min-width: 992px) { .menu-mobile-cart-bar { display: none !important; } }
.corporate-combo-variants { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.corporate-combo-variant { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); cursor: pointer; }
.corporate-combo-variant.is-active { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-surface); font-weight: 700; }
.corporate-combo-preview { max-width: 34rem; }
.corporate-combo-items { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.corporate-combo-totals { margin: 0 0 var(--sp-3); }
.corporate-combo-totals > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); }
.corporate-combo-totals dt { font-weight: 400; color: var(--c-ink-muted); margin: 0; }
.corporate-combo-totals dd { margin: 0; }
/* Оформление заказа (usability Ж1–Ж4) */
.checkout-layout { display: grid; gap: var(--sp-3); min-width: 0; align-items: start; }
.checkout-form-col, .checkout-summary { min-width: 0; }
.checkout-form-col { order: 1; }
.checkout-summary { order: 2; }
.checkout-form { min-width: 0; }
.checkout-form > [hidden], .checkout-form [hidden] { display: none !important; }
.checkout-group, .checkout-summary { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4) var(--sp-4); margin: 0; }
.checkout-group legend { font-weight: 700; padding: 0 var(--sp-2); }
.checkout-summary-title { margin: 0 0 var(--sp-2); font-size: var(--t-md); font-weight: 700; }
.required-mark { color: var(--c-danger); font-weight: 700; }
.optional-note { color: var(--c-ink-faint); font-weight: 400; font-size: var(--t-sm); }
.checkout-choice { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; padding: var(--sp-1) 0; }
.checkout-inline-field { margin-top: var(--sp-1); padding-top: var(--sp-1); border-top: 1px solid var(--c-line); }
/* Fix-checkout-36: one column of fieldsets at every width, in the order of the
   step itself. The old two-column split put «Детали заказа» before «Ваше имя»
   in the DOM but after it on screen, so tab order and reading order diverged. */
.checkout-form-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); min-width: 0; }
.checkout-radio-options { display: grid; gap: var(--sp-1); }
.checkout-payment-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-4); }
.checkout-extra-contacts { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.checkout-extra-contacts summary { cursor: pointer; font-weight: 600; }
.checkout-extra-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, .7fr); gap: var(--sp-3); }
.checkout-extra-fields-grid > * { min-width: 0; }
.checkout-summary { background: var(--c-surface-alt); align-self: start; overflow-wrap: anywhere; }
.checkout-summary-list { max-height: min(20rem, 42vh); overflow-y: auto; overscroll-behavior: contain; }
.checkout-summary-line { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; min-width: 0; padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); }
.checkout-summary-line img { width: 2.5rem; height: 2rem; object-fit: cover; border-radius: var(--r-sm); }
.checkout-summary-thumb svg { width: 1.25rem; height: 1.25rem; }
.checkout-summary-thumb { font-size: var(--t-lg); text-align: center; }
.checkout-summary-line > * { min-width: 0; }
.checkout-summary-name { min-width: 0; overflow-wrap: anywhere; }
.checkout-summary-line:last-child { border-bottom: 0; }
.checkout-unavailable-note { color: var(--c-danger); font-size: var(--t-sm); }
.checkout-line-unavailable { opacity: .7; }
/* Feature-catalog-54: one quiet line, not a boxed banner — at this step the
   customer is confirming, not browsing, so the suggestion stays as low-key
   as the order list it sits under. */
.checkout-suggestion {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px dashed var(--c-line);
  font-size: var(--t-sm); color: var(--c-ink-muted);
}
.checkout-suggestion-text { min-width: 0; }
.checkout-suggestion-add { flex: none; }
.checkout-summary-breakdown { padding-top: var(--sp-2); }
/* Fix-checkout-37: закреплённый подвал карточки. Промокод стоит перед
   разбивкой, поэтому «Итого» и кнопка подтверждения всегда соседи. */
.checkout-summary-foot { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-line-strong); }
/* Пары полей: два коротких вопроса занимают одну строку вместо двух. */
.checkout-field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-3); }
.checkout-field-row > * { min-width: 0; }
@media (min-width: 576px) { .checkout-field-row { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.checkout-extras { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-line-strong); }
/* Fix-cart-08: the block always lists 4 items (chopsticks, soy sauce, ginger,
   wasabi) even for a one-dish order, so expanded it was reliably taller than
   the order list beside it. Collapsed to one summary line that still states
   what is included and its price status — never a bare "Приборы" label — so
   the customer is never left not knowing whether cutlery is coming, which is
   what made the disclosure this project dropped for Fix-cart-05 feel weak.
   Opens on click, or on its own the moment there is a real surcharge to see. */
.checkout-extras-details { margin: 0; }
.checkout-extras-summary {
  display: flex; align-items: baseline; gap: var(--sp-2);
  list-style: none; cursor: pointer; font-size: var(--t-base);
}
.checkout-extras-summary::-webkit-details-marker { display: none; }
.checkout-extras-summary-title { margin: 0; font-size: inherit; font-weight: 700; }
/* Fix-checkout-45: `justify-content: space-between` used to split three flex
   items (title, value, the ::after chevron) evenly, so the value floated at
   some middle point instead of sitting next to the chevron at the right
   edge — its exact spot shifted with title/value text length. `margin-left:
   auto` pushes only the value (and the chevron right after it) flush right,
   with a fixed small gap between them, so the amount never moves. */
.checkout-extras-summary-value { flex: none; margin-left: auto; color: var(--c-ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.checkout-extras-summary-value.is-paid { color: var(--c-warn); }
/* A plain chevron says "tap to see/edit the list" without implying the item
   itself might be missing — the summary text already answers that. */
.checkout-extras-summary::after {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: var(--sp-1);
  border-right: 2px solid var(--c-ink-muted); border-bottom: 2px solid var(--c-ink-muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.checkout-extras-details[open] .checkout-extras-summary::after { transform: translateY(1px) rotate(-135deg); }
.checkout-extras-note { margin: var(--sp-1) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 400; }
.checkout-extras .packing-list { margin-top: var(--sp-2); }
.checkout-extras .packing-note { margin-bottom: 0; }
/* Fix-cart-07: the free norm is one shared number for every condiment
   (server passes a single condiment_free), so stating it once in the
   subtitle above and letting each row's price cell say 0 ₽ / a surcharge
   is enough — repeating "N бесплатно" on every row was pure duplication.
   Dropping it removes the two-line stack and the decorative icon column,
   so a row is one line, no taller than a dish row, and visually quieter
   than the order it sits under instead of competing with it. */
.checkout-extras .packing-row-icon { display: none; }
.checkout-extras .packing-row { grid-template-columns: minmax(0, 1fr) auto auto; padding: var(--sp-1) 0; }
.checkout-extras .packing-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--t-sm); color: var(--c-ink-muted); }
.checkout-main h1 { margin-bottom: var(--sp-2); font-size: var(--t-xl); }
.checkout-promo-details { margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.checkout-promo-details summary { cursor: pointer; font-weight: 600; }
.checkout-promo-under-total { margin-top: var(--sp-2); }
.checkout-promo-under-total .form-control { background: var(--c-surface); }
/* Fix-gui-04: the field answers immediately — a checked code confirms in the
   success colour, a rejected one explains itself next to the input. */
.checkout-promo-message { margin: var(--sp-1) 0 0; font-size: var(--t-sm); }
.checkout-promo-message.is-ok { color: var(--c-ok); }
.checkout-promo-message.is-error { color: var(--c-danger); }
.checkout-promo-message[hidden] { display: none; }
.checkout-comment-field textarea { min-height: 3.5rem; resize: vertical; }
.checkout-total-row { display: flex; justify-content: space-between; gap: var(--sp-2); padding: .1rem 0; }
.checkout-total-row > * { min-width: 0; }
/* Fix-cart-06: an author rule beats the UA [hidden] default regardless of
   selector order, so a discount/extras row stayed a visible flex item — with
   "−0 ₽" on screen — even with the hidden attribute set. */
.checkout-total-row[hidden] { display: none; }
.checkout-total-final { font-weight: 700; font-size: var(--t-lg); border-top: 1px solid var(--c-line-strong); margin-top: var(--sp-1); padding-top: var(--sp-2); }
.checkout-summary-cta { display: none; }
.checkout-actions { position: sticky; bottom: 0; z-index: 6; margin-top: var(--sp-3); padding: var(--sp-2) 0 max(var(--sp-2), env(safe-area-inset-bottom)); background: var(--c-page); }
/* К-3: нативный scroll-into-view не знает о sticky-панели подтверждения и
   прятал сфокусированное поле под ней (та же механика, что К-2 в корзине);
   запас покрывает высоту бара с зазором. */
.checkout-form :is(input, select, textarea, summary),
.checkout-summary :is(input, summary) { scroll-margin-bottom: 6rem; }
.checkout-submit { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: 3rem; box-shadow: var(--sh-2); font-size: var(--t-lg); font-weight: 700; }
.checkout-submit-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-closed-alert { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.checkout-closed-alert p { margin: 0 0 var(--sp-1); }
.checkout-hours-note { margin: 0 0 var(--sp-3); }
.checkout-form .errorlist, .checkout-summary .errorlist { margin: var(--sp-1) 0 0; padding: .45rem .65rem .45rem 1.8rem; border: 1px solid var(--c-danger); border-left: .3rem solid var(--c-danger); border-radius: var(--r-sm); background: var(--c-danger-soft); color: var(--c-danger); font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.checkout-form .errorlist li + li, .checkout-summary .errorlist li + li { margin-top: .2rem; }
.checkout-error-summary { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-danger); border-radius: var(--r-md); background: var(--c-danger-soft); color: var(--c-danger); }
.checkout-error-summary strong { display: block; margin-bottom: var(--sp-1); }
.checkout-error-summary .errorlist { margin-bottom: 0; }
.checkout-field--error > .form-control, .checkout-field--error > .form-select, .checkout-field--error input:not([type="radio"]), .checkout-field--error textarea { border-color: var(--c-danger); box-shadow: 0 0 0 .12rem rgba(176,42,55,.18); }
.checkout-inline-field[data-has-error="true"] > .form-control { border-color: var(--c-danger); box-shadow: 0 0 0 .12rem rgba(176,42,55,.18); }
.checkout-field--error > .form-label, .checkout-field--error > .form-label, .checkout-field--error > legend { color: var(--c-danger); }
/* Feature-orders-11: приборы и порционные добавки — одна компактная
   таблица строк «название · степпер» вместо прежней высокой карточки
   палочек. Каждая строка занимает строку высоты, а не отдельный блок. */
/* ------------------------------------------------------------------
   Feature-delivery-01: районы доставки. Две кнопки одинакового веса, на
   каждой — название района и его тариф, поэтому цена видна до выбора.
   ------------------------------------------------------------------ */
.checkout-zone-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.checkout-zone-option { position: relative; display: flex; min-width: 0; margin: 0; cursor: pointer; }
.checkout-zone-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.checkout-zone-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border: 2px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); }
.checkout-zone-name { font-weight: 600; overflow-wrap: anywhere; }
.checkout-zone-fee { color: var(--c-ink-muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.checkout-zone-option input:checked + .checkout-zone-body { border-color: var(--c-brand); background: var(--c-brand-soft); }
.checkout-zone-option input:checked + .checkout-zone-body .checkout-zone-name,
.checkout-zone-option input:checked + .checkout-zone-body .checkout-zone-fee { color: var(--c-brand-strong); }
.checkout-zone-option input:focus-visible + .checkout-zone-body { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.checkout-zone-note { margin: var(--sp-2) 0 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-chopsticks-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.staff-chopsticks-heading > div { display: grid; gap: .1rem; min-width: 0; }
.staff-chopsticks-heading small, .staff-chopsticks-note { color: var(--c-ink-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.staff-chopsticks-stepper { display: grid; grid-template-columns: 2.75rem minmax(4rem, 7rem) 2.75rem; gap: var(--sp-1); align-items: center; margin-top: var(--sp-2); }
.staff-chopsticks-stepper button { min-height: 2.75rem; padding-inline: 0; font-size: 1.2rem; }
.staff-chopsticks-stepper input { min-width: 0; text-align: center; font-weight: 700; }
.staff-chopsticks-note { display: block; margin-top: var(--sp-2); }
@media (max-width: 575px) {
  .checkout-summary { padding: var(--sp-2) var(--sp-3); }
  .checkout-summary-line { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--sp-2); padding: var(--sp-1) 0; }
  .checkout-summary-line img { width: 2.5rem; height: 2rem; }
  .checkout-summary-thumb { font-size: var(--t-base); }
}
@media (min-width: 768px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  /* A fieldset legend pushes its visible top border below its grid-box top.
     Offset the adjacent summary by the same rhythm token so both border lines align. */
  .checkout-summary { position: static; top: auto; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .checkout-summary-title { margin-bottom: var(--sp-1); }
  .checkout-group { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .checkout-group legend { margin-bottom: var(--sp-1); }
  .checkout-group .mb-3 { margin-bottom: var(--sp-2) !important; }
  .checkout-group .form-control, .checkout-group .form-select { min-height: 2.5rem; }
  .checkout-actions { display: flex; justify-content: flex-end; }
  .checkout-submit { width: min(100%, 24rem); }
}
/* Fix-checkout-36: the order summary moves beside the form from 992px, not
   1100px. On a 1024px laptop it used to sit under the whole form, where the
   sticky confirm bar covered its first 64px - the customer confirmed an order
   whose contents were hidden behind the button that confirms it. */
@media (min-width: 992px) {
  .checkout-layout { grid-template-columns: minmax(0, 40rem) minmax(20rem, 23rem); justify-content: space-between; gap: var(--sp-5); }
  .checkout-form-columns { gap: var(--sp-3); }
  /* Fix-checkout-37: карточка целиком помещается в экран ещё до того, как
     станет липкой - 15rem покрывают шапку сайта, заголовок и предупреждение
     над ней. Поэтому кнопка подтверждения видна без прокрутки страницы.
     Прокручивается ровно одна область - середина карточки. */
  .checkout-summary { position: sticky; top: var(--sp-3); display: flex; flex-direction: column; max-height: calc(100dvh - 13rem); }
  /* main.container reserves 6rem for the floating cart button and the sticky
     bars. Neither exists here at this width, and the dead reserve was the
     only reason the page scrolled at all. */
  main.checkout-main, main.cart-main { padding-bottom: var(--sp-4) !important; }
  /* Fix-checkout-38: the dish list is the scrolling part, not the whole middle
     of the card. `scrollbar-gutter: stable` on the middle reserved 15px on the
     right of everything inside it, so the rule above «Приборы и соусы» was
     327px long while the identical rule above the totals was 342px. Now every
     rule in the card spans the same width, and the utensils stay in view while
     a long order scrolls. */
  .checkout-summary-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: visible; }
  .checkout-summary-list { flex: 0 1 auto; min-height: 3rem; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  /* Fix-gui-03: the open condiments list is unshrinkable here, so when the
     dish list hit its own floor the card ran out of room and the middle
     (overflow: visible) bled under the pinned footer - the promo summary
     painted right over the wasabi row. The extras section now yields first
     and scrolls within itself, keeping the footer overlap-proof while the
     dish list keeps the single scrollbar of Fix-checkout-38. */
  .checkout-extras { flex: 0 1 auto; min-height: 3rem; overflow: hidden auto; overscroll-behavior: contain; }
  /* Fix-gui-03: the vertical scrollbar of the scrollable block costs ~15px,
     and the summary row's unshrinkable title then overflowed by 2px and
     spawned a pointless horizontal scrollbar. Let the title ellipsize, like
     the packing row labels above already do. */
  .checkout-extras .checkout-extras-summary-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .checkout-summary-foot { flex: 0 0 auto; }
  .checkout-summary-cta { display: block; margin-top: var(--sp-2); }
  .checkout-actions { display: none; }
  .checkout-submit { width: 100%; }
}
@media (max-width: 767px) {
  .checkout-extra-fields-grid { grid-template-columns: 1fr; }
  .checkout-summary { margin-top: 0; }
}

/* Экран подтверждения заказа (usability Ж6) */
.order-confirmed { max-width: 40rem; }
.order-confirmed-number { font-size: var(--t-2xl); font-weight: 700; margin: var(--sp-2) 0 var(--sp-4); }
.order-confirmed-steps { padding-left: 1.2rem; }
.order-confirmed-steps li { margin-bottom: var(--sp-2); }
.order-confirmed-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.order-confirmed-link { overflow-wrap: anywhere; }

/* Страница статуса заказа (usability З4) */
.order-progress { display: flex; flex-wrap: wrap; gap: var(--sp-5); list-style: none; margin: var(--sp-3) 0 var(--sp-2); padding: 0; }
.order-progress li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-faint); }
.order-progress-dot { width: .8rem; height: .8rem; border-radius: var(--r-pill); border: 2px solid var(--c-line-strong); background: var(--c-surface); }
.order-progress li.is-done { color: var(--c-ok); }
.order-progress li.is-done .order-progress-dot { border-color: var(--c-ok); background: var(--c-ok); }
.order-progress li.is-current { color: var(--c-ink); font-weight: 700; }
.order-progress li.is-current .order-progress-dot { border-color: var(--c-brand); background: var(--c-brand-soft); }
.order-progress-note { color: var(--c-ink-muted); margin-bottom: var(--sp-4); }
.order-items-list { max-width: 26rem; }
.order-items-line { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.order-items-list .checkout-total-row { padding: var(--sp-1) 0; }

/* Skip-link (usability Е6): невидим до фокуса, первый фокусируемый элемент body */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 100;
  width: auto; height: auto; clip: auto;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface); color: var(--c-brand);
  border: 2px solid var(--c-brand); border-radius: var(--r-sm); text-decoration: none;
}
.catalog-stop-reason { width: min(100%, 18rem); }
.feedback-form { max-width: 40rem; }
.feedback-form textarea, .feedback-form input[type="text"] { width: 100%; }

/* Feature-catalog-02: списки чекбоксов ингредиентов в фильтре каталога */
.ingredient-checklist { max-height: 14rem; overflow-y: auto; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); padding: var(--sp-1); }
.ingredient-name-search { max-width: 20rem; }
.ingredient-table th { white-space: nowrap; background: var(--c-surface-alt); }
.ingredient-table td { vertical-align: middle; }
.ingredient-table .badge-soft { margin-right: 2px; }
/* Fix-ui-04: квадратик всегда на одной вертикали и не сжимается —
   иначе двухстрочные названия ингредиентов смещали его вправо. */
.ingredient-checkitem { display: grid; grid-template-columns: 1rem 1fr; align-items: center; gap: var(--sp-2); padding: .2rem var(--sp-1); font-size: var(--t-sm); cursor: pointer; }
.ingredient-checkitem input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; }
.ingredient-checkitem:hover { background: var(--c-surface-alt); }
.ingredient-checkitem span { overflow-wrap: anywhere; text-align: left; }

/* Feature-attachments-01: вложения */
.attachments-block { margin: var(--sp-4) 0; padding: var(--sp-3); background: var(--c-surface-alt); border-radius: var(--r-sm); }
.attachments-list { margin-bottom: var(--sp-4); }
.attachments-list h3 { font-size: var(--t-lg); margin-bottom: var(--sp-3); }
.attachments-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.attachments-table th, .attachments-table td { padding: var(--sp-2); text-align: left; border-bottom: 1px solid var(--c-line); }
.attachments-table th { background: var(--c-surface); font-weight: 600; }
.attachments-table tr:hover { background: var(--c-surface); }
.attachments-table a { color: var(--c-brand); text-decoration: none; }
.attachments-table a:hover { text-decoration: underline; }
.attachments-upload { border-top: 1px solid var(--c-line-strong); padding-top: var(--sp-3); }
.attachments-upload h4 { font-size: var(--t-md); margin-bottom: var(--sp-2); }
.attachments-upload-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.attachments-upload-form .form-group { display: flex; flex-direction: column; }
.attachments-upload-form .form-group label { margin-bottom: var(--sp-1); font-weight: 600; }
.attachments-upload-form input[type="file"], .attachments-upload-form input[type="text"] { padding: var(--sp-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); font-size: var(--t-sm); }
.attachments-upload-form button { align-self: flex-start; }

/* Kitchen admin monitor mockup: a dense dashboard, not a second CRUD page. */
.staff-kitchen-main {
  min-height: 100dvh;
  padding: 0;
  background: var(--kitchen-page-bg);
}
.staff-kitchen-main > .staff-shell {
  /* width обязателен: main здесь flex-колонка (body.page-staff > main),
     а flex-элемент с margin: 0 auto без явной ширины сжимается до
     fit-content — контент кухни ужимался в ~44rem вместо монитора. */
  width: 100%;
  max-width: var(--kitchen-content-max);
  margin: 0 auto;
  padding: var(--kitchen-content-padding);
}
.staff-kitchen-screen { min-width: 0; }
.staff-kitchen-screen .kitchen-queue-grid { flex: none; min-height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kitchen-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.kitchen-page-title { margin: 0; color: var(--kitchen-text); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.kitchen-page-subtitle { margin: var(--sp-1) 0 0; color: var(--kitchen-text-secondary); font-size: var(--t-sm); }
.kitchen-page-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); color: var(--kitchen-text-secondary); font-size: var(--t-sm); }
.kitchen-total-count { color: var(--kitchen-text); white-space: nowrap; }
.kitchen-sync { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.kitchen-sync-dot { color: var(--kitchen-success); font-size: var(--t-sm); }
.kitchen-sync--error { color: var(--kitchen-danger-text); }
.kitchen-sync--error .kitchen-sync-dot { color: var(--kitchen-danger); }
.kitchen-connection-alert { margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--kitchen-danger); border-radius: var(--r-md); background: var(--kitchen-danger-soft); color: var(--kitchen-danger-text); font-size: var(--t-sm); font-weight: 600; }
.kitchen-queue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.kitchen-station { min-width: 0; padding: var(--sp-4); border: 1px solid var(--kitchen-border); border-radius: var(--r-lg); background: var(--kitchen-surface); }
.staff-kitchen-screen .kitchen-station { min-height: auto; overflow: visible; }
.kitchen-station--other { grid-column: 1 / -1; }
.kitchen-station-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--kitchen-border); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--kitchen-surface); }
.kitchen-station-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; color: var(--kitchen-text); font-size: 1.2rem; font-weight: 700; }
.kitchen-station-icon { font-size: var(--t-lg); line-height: 1; }
.kitchen-station-count { flex: 0 0 auto; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface-sunken); color: var(--kitchen-text-secondary); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.kitchen-station-queue { min-width: 0; }
.staff-kitchen-screen .kitchen-station > [data-kitchen-station] { overflow: visible; }
.staff-kitchen-screen .kitchen-station-title { margin: 0; }
.kitchen-order-group { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border: 1px solid var(--kitchen-card-border); border-left: .25rem solid var(--kitchen-card-border); border-radius: var(--r-md); background: var(--kitchen-surface); box-shadow: var(--kitchen-shadow); color: var(--kitchen-text); font-size: var(--t-md); }
.staff-kitchen-screen .kitchen-order-group { gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); font-size: var(--t-md); }
.kitchen-order-group:last-child { margin-bottom: 0; }
.kitchen-order-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 2.75rem; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-surface-sunken); }
.kitchen-order-identity { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.kitchen-order-number { color: var(--kitchen-text); font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
.kitchen-order-age { flex: 0 0 auto; color: var(--kitchen-text-secondary); font-size: var(--t-md); font-weight: 700; white-space: nowrap; }
/* Fix-kitchen-06: одна подписанная цифра вместо двух безымянных чисел рядом.
   Крупная строка отвечает на вопрос повара «сколько у меня осталось», мелкая
   под ней — само обещанное время. */
.kitchen-order-timer { display: grid; justify-items: end; gap: .1rem; flex: 0 0 auto; text-align: right; }
.kitchen-order-timer-value { color: var(--kitchen-text); font-size: var(--t-lg); font-weight: 700; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kitchen-order-timer-target { color: var(--kitchen-text-muted); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kitchen-order--warning .kitchen-order-timer-value { color: var(--kitchen-warning-text); }
.kitchen-order--critical .kitchen-order-timer-value { color: var(--kitchen-danger-text); }
.staff-kitchen-screen .kitchen-order-group time { font-size: var(--t-md); }
.kitchen-order-content { display: grid; gap: var(--sp-3); min-width: 0; }
.kitchen-order-items { display: grid; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.staff-kitchen-screen .kitchen-order-items { gap: var(--sp-1); }
.kitchen-order-items li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--sp-2); min-width: 0; line-height: 1.35; }
.kitchen-item-quantity { color: var(--kitchen-text); font-size: var(--t-md); font-weight: 700; text-align: right; }
.kitchen-item-name { min-width: 0; color: var(--kitchen-text); font-size: var(--t-md); overflow-wrap: anywhere; }
.kitchen-component-group-title { margin-bottom: var(--sp-1); color: var(--kitchen-text-secondary); font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; }
.kitchen-component-group-title + .kitchen-order-items { margin-bottom: var(--sp-2); }
.kitchen-component-group-title:last-child + .kitchen-order-items { margin-bottom: 0; }
.kitchen-empty { margin: 0; padding: var(--sp-7) var(--sp-4); color: var(--kitchen-text-muted); font-size: var(--t-sm); text-align: center; }
.kitchen-new-badge { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--kitchen-new-soft); color: var(--kitchen-primary); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; }
.kitchen-order--warning { border-left-color: var(--kitchen-warning); background: var(--kitchen-warning-soft); }
.kitchen-order--critical { border-left-color: var(--kitchen-danger); background: var(--kitchen-danger-soft); }
.kitchen-order--new { border-color: var(--kitchen-new); background: var(--kitchen-new-soft); }
.kitchen-order--warning.kitchen-order--new { border-color: var(--kitchen-warning); background: var(--kitchen-warning-soft); }
.kitchen-order--critical.kitchen-order--new { border-color: var(--kitchen-danger); background: var(--kitchen-danger-soft); }
@media (max-width: 1099px) {
  .staff-kitchen-main > .staff-shell { padding: var(--kitchen-content-padding-compact); }
  .staff-kitchen-screen .kitchen-station { padding: var(--sp-3); max-height: none; overflow: visible; }
  .kitchen-station-heading { margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-3); padding: var(--sp-3); }
}
@media (max-width: 767px) {
  .kitchen-page-heading { align-items: start; flex-direction: column; gap: var(--sp-2); }
  .kitchen-page-meta { justify-content: flex-start; }
  .staff-kitchen-screen .kitchen-queue-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .staff-kitchen-screen .kitchen-station { max-height: none; overflow: visible; }
  .kitchen-station--other { grid-column: auto; }
  .kitchen-order-group { padding-left: var(--sp-3); }
}

/* Fix-catalog-31: попап каталога занимает рабочее место, а не почтовую марку.
   Шапка и вкладки закреплены, прокручивается только содержимое, кнопки
   сохранения всегда видимы - редактор больше не ищет их прокруткой. */
.staff-product-dialog { --staff-dialog-pad: var(--sp-4); width: min(60rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.staff-product-dialog[open] { display: flex; }
.staff-product-dialog::backdrop { background: rgba(16, 24, 40, .55); }
.staff-product-dialog-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; padding: var(--staff-dialog-pad); }
.staff-product-dialog-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(var(--staff-dialog-pad) * -1) calc(var(--staff-dialog-pad) * -1); padding: 0 var(--staff-dialog-pad) var(--staff-dialog-pad); }
.staff-product-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.staff-product-dialog-header h2 { margin: 0; font-size: var(--t-xl); }
.staff-product-dialog-kicker { margin: 0 0 var(--sp-1); color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-product-dialog-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.staff-product-dialog-facts > div { min-width: 0; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.staff-product-dialog-facts .field-wide { grid-column: 1 / -1; }
.staff-product-dialog-facts dt { color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-product-dialog-facts dd { margin: var(--sp-1) 0 0; overflow-wrap: anywhere; }
/* Витринный текст - не продолжение состава: отдельная подложка и отступ, иначе
   строки вроде «К WOK идут: палочка 1 шт.» читаются как ингредиент. */
.staff-product-dialog-facts .staff-product-dialog-note { border-bottom: 0; }
.staff-product-dialog-facts .staff-product-dialog-note dd { padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-line-strong); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--c-surface-alt); color: var(--c-ink-muted); }
.staff-product-dialog-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.staff-product-dialog-form > * { min-width: 0; }
.staff-product-dialog-form .field-wide { grid-column: 1 / -1; }
.staff-product-dialog-form input, .staff-product-dialog-form select, .staff-product-dialog-form textarea { width: 100%; }
.staff-product-dialog-form textarea { min-height: 0; max-height: 24rem; resize: vertical; }
/* Флажок не растягивается на всю колонку: иначе бокс уезжает в её середину и
   «улетает» от собственной подписи. */
.staff-product-dialog-check { display: flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; margin-top: 1.55rem; }
.staff-product-dialog-check input[type="checkbox"] { flex: none; width: 1rem; height: 1rem; margin: 0; }
.staff-product-dialog-check label { margin: 0; font-weight: 500; }
.staff-product-dialog-actions { position: sticky; bottom: calc(var(--staff-dialog-pad) * -1); z-index: 1; display: flex; flex-wrap: wrap; gap: var(--sp-2); grid-column: 1 / -1; margin: var(--sp-2) calc(var(--staff-dialog-pad) * -1) calc(var(--staff-dialog-pad) * -1); padding: var(--sp-3) var(--staff-dialog-pad); border-top: 1px solid var(--c-line); background: var(--c-surface); }
@media (max-width: 575px) { .staff-product-dialog { --staff-dialog-pad: var(--sp-3); } .staff-product-dialog-facts, .staff-product-dialog-form { grid-template-columns: 1fr; } .staff-product-dialog-facts .field-wide, .staff-product-dialog-form .field-wide { grid-column: auto; } .staff-product-dialog-check { margin-top: 0; } }

/* Fix-catalog-29: вкладки попапа каталога и работа с фотографиями прямо в нём. */
.staff-product-dialog { overflow: hidden; }
.staff-product-dialog-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.staff-product-dialog-tabs a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--c-ink-muted); font-weight: 500; text-decoration: none; }
.staff-product-dialog-tabs a:hover, .staff-product-dialog-tabs a:focus-visible { background: var(--c-surface-sunken); color: var(--c-ink); }
.staff-product-dialog-tabs a.is-active { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.staff-product-dialog-tab-count { display: inline-block; min-width: 1.6em; padding: 0 .4em; border-radius: var(--r-pill); background: var(--c-surface-sunken); color: var(--c-ink-muted); font-size: var(--t-xs); text-align: center; }
.staff-product-dialog-tab-count.is-empty { background: var(--c-warn-soft); color: var(--c-warn); }
.staff-product-dialog-fullcard { margin-left: auto; font-size: var(--t-sm); }
.staff-dialog-messages { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.staff-dialog-message { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-sunken); font-size: var(--t-sm); }
.staff-dialog-message--success { background: var(--c-ok-soft); color: var(--c-ok); }
.staff-dialog-message--error { background: var(--c-danger-soft); color: var(--c-danger); }
.staff-dialog-message--warning { background: var(--c-warn-soft); color: var(--c-warn); }
.staff-photo-form { margin-bottom: var(--sp-4); }
.staff-photo-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 8rem; padding: var(--sp-4); border: 2px dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface-alt); text-align: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.staff-photo-zone:hover, .staff-photo-zone:focus-within, .staff-photo-zone.is-dragover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.staff-photo-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.staff-photo-zone-icon { color: var(--c-brand); font-size: var(--t-2xl); line-height: 1; }
.staff-photo-zone-title { font-weight: 600; }
.staff-photo-zone-hint { max-width: 26rem; color: var(--c-ink-muted); font-size: var(--t-sm); }
.staff-photo-progress { height: .35rem; margin-top: var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface-sunken); overflow: hidden; }
.staff-photo-progress-bar { display: block; width: 0; height: 100%; background: var(--c-brand); transition: width .12s linear; }
.staff-photo-options { margin-top: var(--sp-2); }
.staff-photo-options > summary { color: var(--c-ink-muted); font-size: var(--t-sm); cursor: pointer; }
.staff-photo-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-2); }
.staff-photo-options-grid > * { min-width: 0; }
.staff-photo-options-grid input[type="text"], .staff-photo-options-grid select { width: 100%; }
.staff-photo-submit { margin-top: var(--sp-3); }
.staff-photo-form.is-busy .staff-photo-zone { opacity: .6; pointer-events: none; }
.staff-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sp-3); align-items: start; }
.staff-photo-card { position: relative; margin: 0; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
.staff-photo-card.is-primary { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand); }
.staff-photo-card.is-hidden img { opacity: .55; filter: grayscale(1); }
.staff-photo-card.is-pending { opacity: .55; }
.staff-photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-surface-sunken); }
.staff-photo-card figcaption { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-2); }
.staff-photo-badge { padding: 0 .4em; border-radius: var(--r-pill); background: var(--c-surface-sunken); color: var(--c-ink-muted); font-size: var(--t-xs); }
.staff-photo-badge--primary { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.staff-photo-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0 var(--sp-2) var(--sp-2); }
.staff-photo-card-actions .btn { font-size: var(--t-xs); }
.staff-photo-remove { color: var(--c-danger); }
.staff-photo-empty { grid-column: 1 / -1; margin: 0; color: var(--c-ink-muted); }
/* Fix-catalog-30: порядок перетаскиванием, свой прогресс у каждого файла и правка метаданных фото в попапе. */
.staff-photo-card[draggable="true"] { cursor: grab; }
.staff-photo-card[draggable="true"]:active { cursor: grabbing; }
.staff-photo-card.is-dragging { opacity: .45; outline: 2px dashed var(--c-brand); }
.staff-photo-order { position: absolute; top: var(--sp-1); left: var(--sp-1); min-width: 1.5rem; padding: 0 .35em; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--sh-1); color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; text-align: center; }
.staff-photo-pending-name { padding: var(--sp-1) var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-xs); overflow-wrap: anywhere; }
.staff-photo-card .staff-photo-progress { margin: 0 var(--sp-2) var(--sp-2); }
.staff-photo-move { display: inline-flex; gap: var(--sp-1); }
.staff-photo-move .btn { min-width: 2rem; padding-left: var(--sp-2); padding-right: var(--sp-2); }
.staff-photo-edit { border-top: 1px solid var(--c-line); }
.staff-photo-edit > summary { padding: var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-sm); cursor: pointer; }
.staff-photo-edit-form { padding: 0 var(--sp-2) var(--sp-2); }
.staff-photo-edit-grid { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.staff-photo-edit-grid > * { min-width: 0; }
.staff-photo-edit-grid label { font-size: var(--t-xs); color: var(--c-ink-muted); }
.staff-photo-edit-grid input[type="text"], .staff-photo-edit-grid select { width: 100%; }
.staff-photo-edit-tags ul { max-height: 8rem; margin: 0; padding: 0; overflow: auto; list-style: none; }
.staff-photo-edit-tags li label { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t-sm); color: var(--c-ink); }
.staff-photo-edit-public { display: flex; align-items: center; gap: var(--sp-1); }
.staff-photo-edit-public label { margin: 0; }
/* Раскрытая правка занимает всю ширину сетки: в колонке 11rem подписи и теги нечитаемы. */
.staff-photo-card:has(.staff-photo-edit[open]) { grid-column: 1 / -1; display: grid; grid-template-columns: 10rem minmax(0, 1fr); }
.staff-photo-card:has(.staff-photo-edit[open]) img { grid-column: 1; grid-row: 1 / -1; height: 100%; }
.staff-photo-card:has(.staff-photo-edit[open]) .staff-photo-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-photo-card:has(.staff-photo-edit[open]) .staff-photo-edit-tags { grid-column: 1 / -1; }
/* Пальцем по кнопке порядка/архива попадают на планшете кухни, мышью на десктопе — компактно. */
@media (pointer: coarse) { .staff-photo-card-actions .btn { min-height: 2.75rem; } .staff-photo-move .btn { min-width: 2.75rem; } }
@media (max-width: 575px) { .staff-photo-options-grid { grid-template-columns: 1fr; } .staff-photo-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } .staff-photo-card:has(.staff-photo-edit[open]) { grid-template-columns: 1fr; } .staff-photo-card:has(.staff-photo-edit[open]) img { grid-column: 1; grid-row: auto; } .staff-photo-card:has(.staff-photo-edit[open]) .staff-photo-edit-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .staff-photo-zone, .staff-photo-progress-bar { transition: none; } }

/* Fix-menu-04: calm, aligned public menu surface without changing its data or actions. */
.menu-page { color: var(--c-ink); }
.menu-intro { padding: var(--sp-6) 0 var(--sp-4); }
.menu-intro h1 { font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.menu-tools { padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface-alt); box-shadow: var(--sh-1); }
.menu-search { align-items: center; }
.menu-search .form-control { min-height: 2.75rem; border-color: var(--c-line-strong); background: var(--c-surface); }
.menu-category-rail { position: static; margin: 0; padding: var(--sp-1) 0 0; border-bottom: 0; background: transparent; }
.menu-category-rail-inner { padding-bottom: var(--sp-1); }
.menu-category-rail-link { min-height: 2.25rem; padding-inline: var(--sp-3); background: var(--c-surface); font-size: var(--t-sm); }
.menu-filter-details { border-top: 1px solid var(--c-line-strong); }
.menu-filter-details summary { padding-bottom: var(--sp-1); color: var(--c-ink-muted); }
.menu-category { margin-top: var(--sp-6); }
.menu-category-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-line); }
.menu-category-heading h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.01em; }
.menu-category-heading p { font-size: var(--t-sm); }
.menu-product-grid--food { gap: var(--sp-4); }
.product-card--food { border-color: var(--c-line); box-shadow: var(--sh-1); transition: transform .15s, box-shadow .15s, border-color .15s; }
.product-card--food:hover { border-color: var(--c-brand); box-shadow: var(--sh-2); transform: translateY(-1px); }
.product-card--food .product-card-body { min-height: 9.5rem; padding: var(--sp-3); }
.product-card--food .product-card-body h3 { margin-bottom: var(--sp-1); font-size: var(--t-lg); line-height: var(--lh-tight); }
.product-card--food .product-note { margin-bottom: var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-sm); line-height: var(--lh-normal); }
.product-card--food .product-card-facts { margin: 0 0 var(--sp-2); color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 600; }
.product-card--food .product-card-footer { padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.product-card--food .price { color: var(--c-ink); font-size: var(--t-lg); }
.product-card--food .product-cart-control .btn { min-height: 2.75rem; }
.menu-order-panel--food { padding: var(--sp-4); border-color: var(--c-line-strong); background: var(--c-surface); }
.menu-order-panel--food.is-has-items { border-color: var(--c-brand); background: var(--c-brand-soft); }
@media (max-width: 991px) {
  .menu-intro { padding-top: var(--sp-5); }
  .menu-tools { border-radius: var(--r-md); }
  .menu-category { margin-top: var(--sp-5); }
}
@media (max-width: 599px) {
  .menu-page { padding-inline: var(--sp-2); }
  .menu-tools { margin-inline: 0; padding: var(--sp-2); }
  .menu-product-grid--food { gap: var(--sp-3); }
  .product-card--food .product-card-body { min-height: 8.5rem; padding: var(--sp-3); }
  .product-card--food .product-card-body h3 { font-size: var(--t-md); }
}

/* Fix-menu-05: balanced desktop measure and comfortable phone cards. */
.menu-layout, .menu-content, .menu-tools { min-width: 0; }
.menu-layout { gap: var(--sp-4); }
.menu-category-heading-copy { min-width: 0; }
.menu-category-heading-copy p { overflow-wrap: anywhere; }
.product-card--food .product-card-body { min-height: 8.5rem; }
.product-card--food .product-card-body h3 { margin-bottom: var(--sp-1); }
.product-card--food .product-card-footer { align-items: flex-end; }
@media (min-width: 992px) {
  .menu-order-panel--food { top: var(--sp-4); }
  .menu-category { margin-top: var(--sp-5); }
}
@media (max-width: 991px) {
  .menu-main { max-width: none; }
  .menu-order-panel--food { margin-top: var(--sp-5); }
}
@media (max-width: 599px) {
  .menu-main { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .menu-page { padding-inline: 0; }
  .menu-tools { padding: var(--sp-2); }
  .menu-product-grid--food { grid-template-columns: minmax(0, 1fr); }
  .product-card--with-image .product-card { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  .product-card--with-image .product-image-trigger { max-width: 6.5rem; }
  .product-card--food .product-card-body { padding: var(--sp-2) var(--sp-3); }
  .product-card--food .product-note { font-size: var(--t-xs); }
}

/* Perf-public-01: mobile browsers can paint the first category without
   calculating the full long menu. The intrinsic size preserves scroll and
   anchor geometry until a later category approaches the viewport. */
@media (max-width: 767px) {
  @supports (content-visibility: auto) {
    .menu-category { content-visibility: auto; contain-intrinsic-size: auto 70rem; }
    .menu-category:first-child { content-visibility: visible; contain-intrinsic-size: auto; }
  }
}

/* Fix-worktime-19: aligned calendar controls and per-employee weekly hours. */
.shift-calendar-overview { min-width: 0; }
.shift-calendar-payment-notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.shift-calendar-payment-notice a { font-weight: 700; }
.shift-calendar-toolbar { gap: var(--sp-3); }
.shift-calendar-nav { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.shift-calendar-nav .btn, .shift-day-dialog .btn { white-space: nowrap; }
.shift-calendar { display: grid; gap: 1px; min-width: 0; min-height: 0; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.shift-calendar-week-header, .shift-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; min-width: 0; }
.shift-calendar-week { grid-template-rows: minmax(0, 1fr); min-height: 0; }
.shift-calendar-head { min-width: 0; padding: var(--sp-2); background: var(--c-surface-alt); font-size: var(--t-sm); font-weight: 700; text-align: center; }
.shift-calendar-head--weekend { color: var(--c-danger); }
.shift-calendar-day-cell { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--c-surface); }
.shift-calendar-day { display: flex; flex: 1; flex-direction: column; gap: var(--sp-1); min-width: 0; min-height: 0; width: 100%; height: auto; padding: var(--sp-2); border: 0; color: inherit; background: var(--c-surface); cursor: pointer; font: inherit; font-size: var(--t-xs); line-height: 1.25; text-align: left; overflow: hidden; }
.shift-calendar-week.is-current-week .shift-calendar-day { box-shadow: inset 0 2px 0 var(--c-brand); }
.shift-calendar-day.is-weekend { background: var(--c-surface-alt); }
.shift-calendar-day-cell.is-weekend { background: var(--c-surface-alt); }
.shift-calendar-day.is-past { opacity: .58; }
.shift-calendar-day.is-planning-window { box-shadow: inset 0 0 0 1px var(--c-brand-soft); }
.shift-calendar-day.is-today { outline: 2px solid var(--c-brand); outline-offset: -2px; background: var(--c-brand-soft); }
.shift-calendar-date-row { display: flex; align-items: baseline; gap: var(--sp-1); min-width: 0; overflow: hidden; }
.shift-calendar-date { flex: 0 0 auto; font-weight: 700; font-size: var(--t-md); }
.shift-calendar-month { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--c-ink-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.shift-calendar-weekday { display: none; color: var(--c-ink-muted); font-weight: 700; }
.shift-calendar-week-number { flex: 0 0 auto; padding: .1rem .35rem; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-ink-faint); font-size: .68rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.shift-calendar-hours { flex: 0 1 auto; max-width: 55%; min-width: 0; margin-inline-start: auto; color: var(--c-ink-muted); font-size: var(--t-xs); overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.shift-calendar-hours--closed { color: var(--c-danger); }
.shift-role-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--sp-1); min-width: 0; min-height: 1.8rem; border-top: 1px solid var(--c-line); padding-top: var(--sp-1); }
.shift-role-people { display: block; min-width: 0; overflow: hidden; text-align: right; }
.shift-role-label { min-width: 0; color: var(--c-ink-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-role-person { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; gap: var(--sp-1); color: var(--c-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-role-time { flex: 0 0 auto; color: var(--c-ink-faint); white-space: nowrap; }
.shift-role-empty { color: var(--c-ink-muted); font-weight: 600; }
.shift-role-separator { color: var(--c-ink-muted); }
.shift-calendar-day-footer { display: flex; flex: 0 0 auto; align-items: stretch; justify-content: flex-end; gap: var(--sp-1); min-width: 0; min-height: 1.7rem; padding: 0 var(--sp-1) .25rem; }
.shift-calendar-day-footer:empty { min-height: 0; padding: 0; }
.shift-calendar-missing { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; margin: 0; padding: 0; color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-calendar-missing.is-warning { color: var(--c-warn); }
.shift-calendar-missing.is-urgent { color: var(--c-danger); }
.shift-week-hours-control { position: relative; display: flex; flex: 0 0 auto; align-items: stretch; justify-content: flex-end; min-width: 0; min-height: 0; background: inherit; }
.shift-week-hours-button { flex: 0 0 auto; height: 100%; min-height: 1.7rem; box-sizing: border-box; padding: .15rem .35rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); color: var(--c-ink-muted); background: var(--c-surface); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.shift-week-hours-button:hover, .shift-week-hours-button:focus-visible, .shift-week-hours-button.is-open { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-brand-soft); }
.shift-week-hours-result { position: absolute; right: var(--sp-1); bottom: calc(100% - var(--sp-1)); z-index: 4; width: min(16rem, calc(100vw - 2rem)); max-height: min(18rem, calc(100dvh - 2rem)); overflow-y: auto; padding: var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-ink); background: var(--c-surface); box-shadow: var(--sh-2); font-size: var(--t-sm); }
.shift-calendar-week.is-first-week .shift-week-hours-result { top: calc(100% - var(--sp-1)); bottom: auto; }
.shift-week-hours-result ul { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.shift-week-hours-result li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.shift-week-hours-name { display: inline-flex; align-items: center; min-width: 0; gap: var(--sp-1); color: var(--employee-fg, var(--c-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-week-hours-dot { flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%; background: var(--employee-fg, var(--c-ink-muted)); }
.shift-week-hours-result li strong { flex: 0 0 auto; white-space: nowrap; }
.shift-week-hours-result p { margin: var(--sp-2) 0 0; color: var(--c-ink-muted); }
.shift-day-dialog { display: flex; flex-direction: column; box-sizing: border-box; width: min(92vw, 42rem); max-height: 84vh; margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-3); overflow: hidden; }
.shift-day-dialog:not([open]) { display: none; }
.shift-day-dialog::backdrop { background: rgba(23, 28, 36, .48); }
.shift-day-dialog-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.shift-day-dialog-header h2 { margin: 0; font-size: var(--t-xl); }
.shift-day-dialog-hours { align-self: center; margin: 0; color: var(--c-ink-muted); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.shift-day-dialog-close { min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; color: var(--c-ink); background: transparent; font-size: 2rem; line-height: 1; }
.shift-day-dialog-form { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.shift-day-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-4); }
.shift-day-role-groups { display: grid; gap: 0; }
.shift-role-group { min-width: 0; padding: var(--sp-1) 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: transparent; }
.shift-role-group:first-child { padding-top: 0; }
.shift-role-group:last-child { border-bottom: 0; }
.shift-role-group-heading { display: flex; align-items: center; gap: var(--sp-1); min-height: 2rem; color: var(--c-ink); font-weight: 700; }
.shift-role-entries { display: grid; gap: var(--sp-1); min-width: 0; }
.shift-assignment-row { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(7rem, 1fr) auto; align-items: center; gap: var(--sp-2); min-width: 0; min-height: 2.25rem; padding: 0; border-top: 1px solid var(--c-line); }
.shift-assignment-person, .shift-assignment-hours { min-width: 0; min-height: 2.5rem; padding: var(--sp-1) var(--sp-2); border: 1px solid transparent; border-radius: var(--r-sm); color: var(--c-ink); background: transparent; text-align: left; font: inherit; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-assignment-person:hover, .shift-assignment-hours:hover, .shift-assignment-hours.is-custom { border-color: var(--c-line-strong); background: var(--c-surface); }
.shift-assignment-hours { color: var(--c-ink-muted); font-weight: 500; }
.shift-assignment-menu { position: relative; justify-self: end; }
.shift-assignment-menu summary { display: grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; border-radius: 50%; color: var(--c-ink-muted); cursor: pointer; list-style: none; font-size: 1.35rem; }
.shift-assignment-menu summary::-webkit-details-marker { display: none; }
.shift-assignment-menu > div { position: absolute; right: 0; bottom: calc(100% - var(--sp-1)); z-index: 2; min-width: 12rem; max-width: min(16rem, calc(100vw - 2rem)); padding: var(--sp-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); box-shadow: var(--sh-2); }
.shift-assignment-menu button { width: 100%; min-height: 2.5rem; padding: var(--sp-2); border: 0; background: transparent; color: var(--c-danger); text-align: left; white-space: nowrap; }
.shift-assignment-menu--plain { display: block; }
.shift-assignment-menu--plain button { min-width: 2.5rem; width: auto; padding-inline: var(--sp-1); }
.shift-assignment-hours-editor { grid-column: 1 / -1; display: grid; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface); }
.shift-hours-mode { display: flex; flex-wrap: nowrap; gap: var(--sp-3); margin: 0; padding: 0; border: 0; }
.shift-hours-mode label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--sp-1); min-height: 2.5rem; color: var(--c-ink); font-size: var(--t-sm); white-space: nowrap; }
.shift-assignment-custom-times { display: flex; align-items: end; flex-wrap: wrap; gap: var(--sp-2); }
.shift-assignment-custom-times label { display: grid; gap: .15rem; color: var(--c-ink-muted); font-size: var(--t-xs); }
.shift-assignment-custom-times input { width: 7rem; }
.shift-assignment-custom-times small { color: var(--c-ink-muted); }
.shift-employee-picker { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1) 0; }
.shift-employee-picker button, .shift-employee-choices button { min-height: 2.5rem; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); color: var(--c-ink); background: var(--c-surface); white-space: nowrap; }
.shift-role-group-actions { display: flex; min-height: 1.75rem; align-items: center; }
.shift-add-employee { min-height: 1.75rem; padding: 0; border: 0; color: var(--c-brand); background: transparent; font: inherit; font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.shift-no-eligible-employees { color: var(--c-ink-faint); font-size: var(--t-xs); }
.shift-role-person.employee-color-assigned, .shift-assignment-person.employee-color-assigned, .shift-employee-picker button.employee-color-assigned, .shift-employee-choices button.employee-color-assigned { border-color: var(--employee-border); background: var(--employee-bg); color: var(--employee-fg); }
.shift-role-person.employee-color-assigned { padding-inline: .25rem; border-radius: var(--r-sm); }
.shift-employee-choices { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); }
.shift-employee-choices > div { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.shift-choice-hint, .shift-choice-search { margin: 0; color: var(--c-ink-muted); font-size: var(--t-sm); }
.shift-choice-search { display: grid; gap: .15rem; }
.shift-choice-search input { max-width: 18rem; }
.shift-assignment-row--pending { border-top: 0; }
.shift-assignment-row.is-removed { min-height: 2.75rem; display: flex; align-items: center; }
.shift-assignment-row.is-removed > :not(.shift-assignment-undo) { display: none; }
.shift-assignment-undo { min-height: 2.5rem; padding: var(--sp-1) var(--sp-2); border: 0; color: var(--c-brand); background: transparent; font: inherit; font-weight: 600; }
.shift-day-dialog-footer { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); background: var(--c-surface); }
.shift-day-dialog-footer .btn { min-height: 2.75rem; }
.shift-day-dialog [hidden], .shift-employee-choices [hidden] { display: none !important; }
@media (max-width: 767px) {
  .shift-calendar-toolbar { align-items: flex-start; }
  .shift-calendar { gap: var(--sp-3); border: 0; background: transparent; overflow: visible; }
  .shift-calendar-week-header { display: none; }
  .shift-calendar-week { grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
  .shift-calendar-day { min-height: 7.5rem; height: auto; padding: var(--sp-3); }
  .shift-calendar-week { grid-template-rows: none; }
  .shift-calendar-weekday { display: inline; }
  .shift-role-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shift-day-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .shift-day-dialog-header { padding: var(--sp-3); }
  .shift-day-dialog-body { padding: var(--sp-2) var(--sp-3); }
  .shift-day-dialog-footer { padding: var(--sp-2) var(--sp-3); }
  .shift-assignment-row { grid-template-columns: minmax(0, 1fr) auto; }
  .shift-assignment-hours { grid-column: 1; grid-row: 2; }
  .shift-assignment-menu { grid-column: 2; grid-row: 1 / span 2; }
  .shift-assignment-hours-editor { grid-column: 1 / -1; }
  .shift-assignment-custom-times { align-items: stretch; }
  .shift-assignment-custom-times input { width: 100%; }
}
@media (min-width: 768px) {
  .staff-worktime-main { display: flex; flex-direction: column; box-sizing: border-box; height: calc(100dvh - 5.25rem); min-height: 0; padding-top: var(--sp-3); padding-bottom: var(--sp-3); overflow: hidden; }
  .staff-worktime-main > .staff-shell { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
  .staff-worktime-main .shift-calendar-overview { display: flex; flex: 1; min-height: 0; }
  .staff-worktime-main .shift-calendar { flex: 1; grid-template-rows: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .staff-worktime-main .shift-calendar-day { padding: var(--sp-1); }
  .staff-worktime-main .shift-role-row { min-height: 1.45rem; padding-top: .15rem; }
  .staff-worktime-main .staff-footer { flex: 0 0 auto; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shift-calendar *, .shift-day-dialog * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* Fix-home-01: one menu-first entry point, with only order-relevant facts. */
.home-order-summary { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(var(--sp-4), 4vw, var(--sp-6)); margin: var(--sp-4) auto var(--sp-6); padding: clamp(var(--sp-4), 4vw, var(--sp-6)); border-color: var(--c-line-strong); background: linear-gradient(135deg, var(--c-brand-soft), var(--c-surface) 62%); box-shadow: var(--sh-1); }
.home-order-summary-media { max-width: 24rem; max-height: none; box-shadow: var(--sh-1); }
.home-hero-image { max-width: 24rem; max-height: none; aspect-ratio: 4 / 3; }
.home-order-summary-body { max-width: 42rem; gap: var(--sp-3); }
.home-hero-eyebrow { margin: 0; color: var(--c-brand-strong); font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-hero-title { max-width: 18ch; margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -.03em; }
.home-order-summary-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: var(--sp-2); }
.home-order-summary-facts li { min-width: 0; padding: var(--sp-2) var(--sp-3); border-color: var(--c-line-strong); background: var(--c-surface); font-weight: 600; }
.home-hero-actions { align-items: center; margin-top: var(--sp-1); }
.home-hero-actions .btn { min-height: 3rem; padding-inline: var(--sp-4); }
.home-promotions-link { padding: var(--sp-2); color: var(--c-brand-strong); font-weight: 700; text-underline-offset: .18em; }
.home-popular { margin-top: 0; }
.home-popular > h2 { margin-bottom: var(--sp-3); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; }
.home-popular-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.home-popular-grid > .product-card--food { max-width: none; }
.cart-action-form.is-pending button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.cart-action-form.is-pending button::after { content: ""; width: .85rem; height: .85rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cart-action-spin .65s linear infinite; }
@keyframes cart-action-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  .home-order-summary { gap: var(--sp-4); margin-top: var(--sp-3); margin-bottom: var(--sp-5); padding: var(--sp-4); }
  .home-hero-title { max-width: none; font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .home-order-summary-facts { grid-template-columns: 1fr; }
  .home-hero-actions { width: 100%; }
  .home-hero-actions .btn { flex: 1 1 auto; }
  .home-promotions-link { flex: 1 1 100%; text-align: center; }
  .home-popular-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) { .cart-action-form.is-pending button::after { animation: none; } }

/* Fix-menu-44: readable card badges, a first dish near the phone fold and an
   add-to-cart control that no longer resizes the card. Presentation only. */

/* A badge cut to «Больша…» carries no meaning: labels wrap instead of being
   truncated, and the pork/alcohol warning moves to the opposite corner so it
   can no longer be painted over the tag row. */
.product-card { position: relative; }
.product-tag-row { row-gap: var(--sp-1); }
.product-tag { box-shadow: var(--sh-1); }
.product-tag-row-static { padding-right: calc(var(--sp-6) + var(--sp-2)); }
.product-image-trigger .product-warn-icons,
.product-card > .product-warn-icons { top: var(--sp-2); bottom: auto; }
.product-warn-icon { box-shadow: var(--sh-1); }

/* Adding to the cart must not resize the card. The confirmation is the stepper
   plus the cart counter, so only an error message takes layout space. */
.product-card--food .product-cart-control { align-items: center; min-height: 2.75rem; }
/* Fix-frontend-08: «В корзину» в карточке и в окне товара — те же 44px, что у
   степпера и навигации, а не бутстраповские ~40px. */
.product-card .product-card-footer .btn, .product-dialog-actions .btn { min-height: 2.75rem; }
.product-card--food .cart-action-status:not(.text-danger) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 991px) {
  /* Nine wrapped category pills pushed the first dish far below the fold; one
     scrollable line keeps every category reachable and shows food sooner. */
  .menu-category-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: var(--sp-2); }
  .menu-category-filter { flex: 0 0 auto; min-height: 2.75rem; scroll-snap-align: start; }
}

@media (max-width: 599px) {
  .menu-intro { padding: var(--sp-4) 0 var(--sp-2); }
  /* A 6.5rem thumbnail has no room for pill text, so the phone card keeps the
     icon and leaves the wording to screen readers. */
  .product-card--with-image .product-tag-row { left: var(--sp-1); right: auto; bottom: var(--sp-1); gap: var(--sp-1); max-width: calc(100% - var(--sp-2)); }
  .product-card--with-image .product-tag { padding: var(--sp-1); }
  .product-card--with-image .product-tag-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* Fix-menu-45: filters that describe what is actually on screen — one grouped
   panel with live counts, an explicit reset and a visible open state. */
.menu-filter-details { border-top: 1px solid var(--c-line-strong); }
.menu-filter-details > summary {
  display: inline-flex; align-items: center; gap: var(--sp-2); width: fit-content;
  min-height: 2.75rem; margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink); font-weight: 600;
  list-style: none; cursor: pointer;
}
.menu-filter-details > summary::-webkit-details-marker { display: none; }
.menu-filter-details > summary:hover { border-color: var(--c-brand); color: var(--c-brand); }
/* The chevron is the open state: a collapsed panel with active filters would
   otherwise hide the fact that the menu is narrowed. */
.menu-filter-details > summary::after {
  content: ""; width: var(--sp-2); height: var(--sp-2);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg); transition: transform .15s;
}
.menu-filter-details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.menu-filter-summary-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--sp-5); height: var(--sp-5); padding: 0 var(--sp-1);
  border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-surface);
  font-size: var(--t-xs); font-weight: 700;
}
.menu-filters {
  display: grid; gap: var(--sp-3); overflow: visible;
  margin-top: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
}
.menu-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.menu-filter-group-title {
  width: 100%; margin-bottom: var(--sp-2); padding: 0; color: var(--c-ink-muted);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.menu-filter-group-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* One touch height for the whole panel: chips, summary and reset. */
.menu-filter-chip, .menu-filters-submit { min-height: 2.75rem; }
.menu-filter-chip { gap: var(--sp-1); }
.menu-filter-chip-count { color: var(--c-ink-muted); font-size: var(--t-xs); font-weight: 700; }
.menu-filter-chip.is-active .menu-filter-chip-count { color: inherit; }
.menu-filters-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line);
}
.menu-filters-reset {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto;
  padding: var(--sp-1) var(--sp-2); color: var(--c-brand-strong); font-weight: 600;
  text-underline-offset: .18em;
}
@media (min-width: 992px) {
  /* Three groups read as three columns instead of one ragged list. */
  .menu-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); padding: var(--sp-4); }
  .menu-filters-actions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-filter-details > summary::after { transition: none; }
}

/* Fix-menu-46: the desktop menu must open on food. The page title, the shop
   status, search, the category rail and the filter toggle share one toolbar
   card, so the first dish row starts roughly 145px higher and a whole row of
   cards fits on a 900px-tall screen. Presentation only — same controls, same
   order, same markup hooks (`data-menu-tools`, `.menu-category-filters`,
   `.menu-filter-details` stay direct children of the toolbar). */
.menu-page { padding-top: var(--sp-4); }
.menu-intro {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-3); min-width: 0; margin: 0; padding: 0;
}
.menu-intro h1 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.menu-hours-note { margin: 0; }
.menu-tools { align-items: center; row-gap: var(--sp-3); }
.menu-search { margin: 0; }
/* One height for the whole toolbar: search field, category pill, filter toggle. */
.menu-category-filter { min-height: 2.75rem; }
.menu-filter-details { border-top: 0; }
.menu-filter-details > summary { margin-top: 0; }
/* The first category sits right under the toolbar; later ones keep their air. */
.menu-category:first-child { margin-top: var(--sp-4); }

@media (min-width: 992px) {
  /* Title left, search right; rail and filters keep the full width so the open
     filter panel still reads as three columns. */
  .menu-tools { grid-template-columns: minmax(0, 1fr) minmax(13rem, 20rem); column-gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
  .menu-intro { grid-column: 1; }
  .menu-search { grid-column: 2; }
  .menu-filter-details { grid-column: 1 / -1; }
  /* Aligns the sticky order panel with the first product card, not with the
     category heading above it. */
  .menu-order-panel--food { margin-top: calc(var(--sp-4) + var(--sp-6) + var(--sp-5)); }
  /* Fix-frontend-06: панель не должна заезжать под липкий рельс, когда обе
     прилипли. */
  .menu-order-panel--food { top: 5.5rem; }
}

@media (max-width: 991px) {
  .menu-tools { row-gap: var(--sp-2); }
  .menu-intro h1 { font-size: var(--t-xl); }
}

/* Fix-home-02: a desktop home page that shows food instead of empty space.
   Without a hero picture the two-column card left 634px of the row blank while
   a 52px headline wrapped three times in the remaining 384px — the picture
   column now exists only when there is a picture. */
.home-main { max-width: 1280px; margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.home-order-summary {
  grid-template-columns: minmax(0, 1fr); align-items: start;
  max-width: none; margin: var(--sp-4) 0; padding: var(--sp-5);
}
.home-order-summary-body { max-width: 46rem; gap: var(--sp-2); }
/* Fix-home-04: the hero card is two groups, not four floating items. Eyebrow,
   headline and facts stack as one copy block; the actions cluster is the only
   thing on the right; the category rail is a separate row under a hairline. */
.home-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.home-hero-title { max-width: 22ch; font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.1; text-wrap: balance; }
/* Facts are two short pills, not two stretched half-width boxes. */
.home-order-summary-facts { display: flex; flex-wrap: wrap; width: auto; }
.home-hero-actions .btn { min-height: 2.75rem; }
.home-quick-categories { margin-top: 0; padding-top: var(--sp-3); border-top: 1px solid var(--c-line-strong); }

@media (max-width: 991px) {
  /* Fix-frontend-07: 7+ перенесённых пилюль занимают 3-4 ряда и уводят еду под
     сгиб; одна прокручиваемая строка — тот же паттерн, что рельс категорий меню. */
  .home-quick-categories { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: var(--sp-2); mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent); }
  .home-quick-categories .menu-category-filter { flex: 0 0 auto; scroll-snap-align: start; min-height: 2.75rem; }
}

/* The one current announcement is a quiet line in the hero card, not a
   separate promotional strip. */
.home-announcement {
  grid-column: 1 / -1; align-items: baseline;
  margin: var(--sp-1) 0 0; padding: var(--sp-3) 0 0;
  border: 0; border-top: 1px solid var(--c-line-strong);
  border-radius: 0; background: transparent;
}
.home-announcement strong { color: var(--c-ink); }
.home-announcement span { color: var(--c-ink-muted); }

/* One section rhythm for the whole page: the same underlined heading row the
   menu categories use, with the shortcut on the right instead of a button
   pushed below the grid. */
.home-section-heading {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sp-3); margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-line);
}
.home-section-heading h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.01em; }
.home-section-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: var(--sp-1) var(--sp-2); color: var(--c-brand-strong);
  font-weight: 700; text-underline-offset: .18em;
}
.home-terms > h2, .home-main .promotion-section > h2 {
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-line);
  font-size: var(--t-xl); letter-spacing: -.01em;
}
.home-popular { margin-top: var(--sp-4); }
/* A teaser row is a wider crop than the menu's 4/3 catalogue photo, so the
   whole first row of dishes fits on a 800px-tall laptop screen. */
.home-popular-grid .product-card--with-image .product-image-trigger img { aspect-ratio: 3 / 2; max-height: none; }
.home-terms { margin-top: var(--sp-6); }
/* На главной акции — тот же размер карточки, что «Популярное в меню»:
   4 равные колонки вместо широких плиток 22rem (замечание владельца). */
.home-main .promotion-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--sp-4); }
.home-main .promotion-card img { aspect-ratio: 4 / 3; }
.home-main .promotion-section { margin-top: var(--sp-6); }

/* Promotion cards were plain Bootstrap cards next to raised, rounded product
   cards; one surface language for both. */
.promotion-card {
  overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.promotion-card:hover { border-color: var(--c-brand); box-shadow: var(--sh-2); transform: translateY(-1px); }
.promotion-card img { border-radius: 0; }
.promotion-card-body h3 { margin-bottom: var(--sp-2); font-size: var(--t-lg); line-height: var(--lh-tight); }
.promotion-card-body p { margin: 0; color: var(--c-ink-muted); font-size: var(--t-sm); }

@media (min-width: 992px) {
  .home-order-summary--media { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; column-gap: var(--sp-6); }
  .home-order-summary--media .home-order-summary-media, .home-order-summary--media .home-hero-image { max-width: 22rem; }
  /* Without a picture the card is a banner, not a column: the copy block on the
     left, the actions cluster on the right, both vertically centred against one
     another. Fix-home-04: a grid, because `space-between` on four flex children
     left a 559px hole between a single 260px fact pill and the button pair, and
     the category rail floated wherever the wrap put it. */
  .home-order-summary:not(.home-order-summary--media) .home-order-summary-body {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; max-width: none;
    column-gap: var(--sp-6); row-gap: var(--sp-4);
  }
  .home-order-summary:not(.home-order-summary--media) .home-hero-copy { grid-column: 1; }
  /* CTA стоит под фактами внутри копи-блока: одна колонка, никакой
     «парящей» кнопки у правого края (замечание владельца). */
  .home-order-summary:not(.home-order-summary--media) .home-hero-actions {
    grid-column: 1; justify-self: start; margin-top: 0;
  }
  .home-order-summary:not(.home-order-summary--media) .home-quick-categories { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
  .home-main { max-width: none; padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Four teaser cards in a 768px row left 168px each; two readable ones instead. */
  .home-popular-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .home-order-summary { margin-top: var(--sp-3); padding: var(--sp-4); }
  .home-hero-title { max-width: none; }
  .home-section-heading { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .promotion-card { transition: none; }
  .promotion-card:hover { transform: none; }
}

/* Fix-public-ui-01: public information pages share one calm, readable shell
   instead of falling back to a loose heading and a vertical list. */
.public-page-shell { max-width: 70rem; margin: 0 auto; padding: var(--sp-5) 0 var(--sp-7); }
.public-page-shell--narrow { max-width: 58rem; }
.public-page-heading { max-width: 42rem; margin-bottom: var(--sp-5); }
/* Дизайн-аудит 2026-09-07: 2.6rem было утечкой вне токен-лестницы — самый
   крупный заголовок стоял на самых бедных страницах. Базовый h1 сайта — 2rem. */
.public-page-heading h1 { margin-bottom: var(--sp-2); font-size: clamp(1.75rem, 4vw, 2rem); letter-spacing: -.025em; }
.public-page-heading p:last-child { margin: 0; color: var(--c-ink-muted); font-size: var(--t-lg); }
.public-page-eyebrow, .public-card-kicker { margin: 0 0 var(--sp-1); color: var(--c-brand-strong); font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-page-grid, .feedback-layout, .order-status-grid { display: grid; gap: var(--sp-4); min-width: 0; }
.contact-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-info-card, .feedback-form-card, .feedback-help-card, .vacancies-card {
  min-width: 0; padding: clamp(var(--sp-4), 3vw, var(--sp-5));
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1);
}
.public-info-card h2, .feedback-form-card h2, .feedback-help-card h2, .vacancies-card h2 { margin-bottom: var(--sp-3); font-size: var(--t-xl); }
.public-info-card p:last-child, .feedback-help-card p:last-child, .vacancies-card p:last-child { margin-bottom: 0; }
.contact-page-grid .contact-ways-card { grid-column: 1 / -1; }
.contact-address-value { margin-bottom: var(--sp-4); font-size: var(--t-lg); font-weight: 700; }
.public-info-card .contact-list { margin-bottom: 0; }
.public-info-card .contact-list > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.public-info-card .contact-list > div:last-child { border-bottom: 0; }
.public-info-card .contact-list dt { color: var(--c-ink-muted); font-size: var(--t-sm); }
.public-info-card .contact-list dd { text-align: right; }
.public-action-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4) clamp(var(--sp-4), 3vw, var(--sp-5)); border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-brand-soft); }
.public-action-card h2 { margin-bottom: var(--sp-1); font-size: var(--t-lg); }
.public-action-card p { margin: 0; color: var(--c-ink-muted); }
.public-action-card .btn { flex: 0 0 auto; min-height: 2.75rem; }
.feedback-layout { grid-template-columns: minmax(0, 1.55fr) minmax(15rem, .85fr); align-items: start; }
.feedback-form-card h2 { margin-top: 0; }
.feedback-form { max-width: none; }
.feedback-field { margin-bottom: var(--sp-3); }
.feedback-field .form-label { margin-bottom: var(--sp-1); font-weight: 600; }
.feedback-field .form-text { margin-top: var(--sp-1); color: var(--c-ink-muted); }
.feedback-submit { min-width: 9rem; min-height: 2.9rem; }
.feedback-help-card { background: var(--c-surface-alt); }
.feedback-help-card ul { display: grid; gap: var(--sp-3); margin: 0; padding-left: 1.2rem; color: var(--c-ink-muted); }
.feedback-help-card li::marker { color: var(--c-brand); }
.vacancies-card { border-top: .35rem solid var(--c-brand); }
.vacancies-copy { font-size: var(--t-lg); line-height: var(--lh-normal); }
.home-menu-cta { min-width: 12rem; min-height: 3.2rem !important; padding-inline: var(--sp-5) !important; box-shadow: var(--sh-2); font-size: var(--t-lg); font-weight: 700; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--sp-2); }
.home-promotions-cta { min-height: 3.2rem !important; border-radius: var(--r-pill); font-weight: 600; }

/* Fix-staff-ui-05: keep the version marker at the bottom of every staff
   viewport while preserving the existing footer markup inside staff/base. */
body.page-staff { display: flex; flex-direction: column; min-height: 100dvh; }
body.page-staff > main { display: flex; flex: 1 0 auto; flex-direction: column; width: 100%; min-width: 0; }
body.page-staff .staff-footer { margin-top: auto; }

/* Fix-public-ui-02: a status page is a small dashboard for one order, with
   the current state and next useful action visible before its details. */
.order-status-page { max-width: 64rem; }
.order-status-hero { margin-bottom: var(--sp-4); padding: clamp(var(--sp-4), 4vw, var(--sp-6)); border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--c-brand-soft), var(--c-surface) 70%); box-shadow: var(--sh-1); }
.order-status-hero--cancelled { border-color: var(--c-danger); background: var(--c-danger-soft); }
.order-status-hero-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-4); }
.order-status-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.035em; }
.order-status-label { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); font-weight: 800; white-space: nowrap; }
.order-status-label--new { background: var(--c-brand); color: var(--c-surface); }
.order-status-label--confirmed { background: var(--c-ok-soft); color: var(--c-ok); }
.order-status-label--ready { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.order-status-label--assembled { background: var(--c-warn-soft); color: var(--c-ink); }
.order-status-label--in_delivery { background: var(--c-ok-soft); color: var(--c-ok); }
.order-status-label--completed { background: var(--c-ok); color: var(--c-surface); }
.order-status-label--cancelled { background: var(--c-danger); color: var(--c-surface); }
.order-status-message { margin: var(--sp-4) 0 0; padding: var(--sp-3); border-radius: var(--r-md); font-size: var(--t-lg); font-weight: 700; }
.order-status-message--danger { background: var(--c-surface); color: var(--c-danger); }
.order-status-hero .order-promise { margin: var(--sp-4) 0 var(--sp-2); }
.order-status-hero .order-progress { margin-top: var(--sp-4); }
.order-status-hero .order-progress { padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.order-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-status-card { height: 100%; margin: 0; }
.order-status-card .order-items-list { max-width: none; }
.order-status-next { margin-top: var(--sp-4); }

@media (max-width: 767px) {
  .public-page-shell { padding-top: var(--sp-4); }
  .contact-page-grid, .feedback-layout, .order-status-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-page-grid .contact-ways-card { grid-column: auto; }
  .public-action-card, .order-status-hero-heading { align-items: stretch; flex-direction: column; }
  .public-action-card .btn { width: 100%; }
  .order-status-label { align-self: flex-start; }
  .order-status-hero { padding: var(--sp-4); }
}

@media (min-width: 576px) {
  .order-status-hero .order-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .order-status-hero .order-progress li { flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-width: 0; font-size: var(--t-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .home-menu-cta { transition: none; }
}

/* Fix-staff-ui-09: временные «облачка» результата вместо блоков в потоке страницы.
   Область фиксирована и не двигает рабочую вёрстку, поэтому кнопка под курсором
   не уезжает в момент появления сообщения. */
.staff-toasts { position: fixed; right: max(var(--sp-4), env(safe-area-inset-right)); bottom: max(var(--sp-4), env(safe-area-inset-bottom)); z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.staff-toast { display: flex; align-items: start; gap: var(--sp-2); width: 100%; padding: var(--sp-3); border: 1px solid var(--c-line-strong); border-left: .3rem solid var(--c-ink-muted); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-2); color: var(--c-ink); font-size: var(--t-sm); line-height: var(--lh-normal); pointer-events: auto; animation: staff-toast-in .18s ease-out; }
.staff-toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.staff-toast-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; margin: -.25rem -.25rem -.25rem 0; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-ink-muted); font: inherit; font-size: var(--t-lg); line-height: 1; cursor: pointer; }
.staff-toast-close:hover, .staff-toast-close:focus-visible { background: var(--c-surface-sunken); color: var(--c-ink); }
.staff-toast--success { border-left-color: var(--c-ok); }
.staff-toast--warning { border-left-color: var(--c-warn); }
.staff-toast--error { border-left-color: var(--c-danger); background: var(--c-danger-soft); }
.staff-toast--info, .staff-toast--debug { border-left-color: var(--c-brand); }
.staff-toast.is-leaving { opacity: 0; transform: translateY(.35rem); transition: opacity .22s ease, transform .22s ease; }
@keyframes staff-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (max-width: 575px) {
  .staff-toasts { left: max(var(--sp-2), env(safe-area-inset-left)); right: max(var(--sp-2), env(safe-area-inset-right)); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .staff-toast { animation: none; }
  .staff-toast.is-leaving { transition: none; }
}

/* --- Charts dashboard (Feature-charts-02) ---
   One warm report: topline with presets, underline tabs, KPI strip,
   12-column chart grid. Depth = borders only, like the rest of staff. */
.charts-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: var(--sp-4);
}
.charts-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.charts-title {
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: var(--sp-1) 0 0;
}
.charts-period {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}
.charts-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.charts-preset {
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  padding: .15rem .7rem;
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.charts-preset:hover { border-color: var(--c-brand); color: var(--c-brand-strong); }
.charts-preset.is-active {
  background: var(--c-brand-soft);
  border-color: var(--c-brand);
  color: var(--c-brand-strong);
  font-weight: 600;
}
.charts-period-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.charts-period-form .form-control { background-color: var(--c-surface); }
.charts-period-dash { color: var(--c-ink-faint); }

.charts-tabs {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.charts-tabs::-webkit-scrollbar { display: none; }
.charts-tab {
  padding: var(--sp-2) var(--sp-1);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  text-decoration: none;
  white-space: nowrap;
}
.charts-tab:hover { color: var(--c-ink); }
.charts-tab.is-active {
  border-bottom-color: var(--c-brand);
  color: var(--c-brand-strong);
  font-weight: 600;
}

.charts-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.charts-kpi {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
}
.charts-kpi-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.charts-kpi-value {
  font-size: var(--t-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin-top: var(--sp-1);
}
.charts-kpi-delta {
  font-size: var(--t-xs);
  font-weight: 500;
  margin-top: var(--sp-1);
}
.charts-kpi-delta.is-up { color: var(--c-ok); }
.charts-kpi-delta.is-down { color: var(--c-danger); }
.charts-kpi-delta.is-flat { color: var(--c-ink-faint); font-weight: 400; }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.charts-card {
  grid-column: span 12;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}
@media (min-width: 992px) {
  .charts-card--half { grid-column: span 6; }
}
.charts-card-title {
  font-size: var(--t-md);
  font-weight: 600;
  margin: 0 0 var(--sp-1);
}
.charts-card-caption {
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
  margin: 0 0 var(--sp-3);
}
.charts-canvas { position: relative; height: 280px; }
.charts-canvas--full { height: 320px; }
.charts-canvas--tall { height: 380px; }
.charts-canvas--empty { height: auto; }

/* Fix-ui-14: margin-quadrant composition tooltip - a custom-positioned
   panel (Chart.js's own tooltip only does plain text), same card/token
   language as the rest of the dashboard. */
.margin-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s ease;
  min-width: 220px;
  max-width: 280px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(49, 42, 41, .16);
  padding: var(--sp-3);
  font-size: var(--t-xs);
  line-height: 1.35;
}
.margin-tooltip-title { font-weight: 600; color: var(--c-ink); margin-bottom: 2px; }
.margin-tooltip-sub { color: var(--c-ink-faint); margin-bottom: var(--sp-2); }
.margin-tooltip-cols {
  display: grid;
  grid-template-columns: 1fr 62px 62px;
  gap: var(--sp-2);
  color: var(--c-ink-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 2px;
}
.margin-tooltip-cols span:nth-child(2), .margin-tooltip-cols span:nth-child(3) { text-align: right; }
.margin-tooltip-row {
  display: grid;
  grid-template-columns: 1fr 62px 62px;
  gap: var(--sp-2);
  align-items: center;
  padding: 3px 0;
}
.margin-tooltip-row + .margin-tooltip-row { border-top: 1px solid var(--c-line); }
.margin-tooltip-name { color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.margin-tooltip-flag {
  display: inline-block;
  color: var(--c-warn);
  font-size: 9px;
  font-weight: 600;
  vertical-align: middle;
}
.margin-tooltip-metric { display: flex; align-items: center; gap: 4px; }
.margin-tooltip-track {
  flex: 1 1 auto;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  overflow: hidden;
}
.margin-tooltip-bar { display: block; height: 100%; border-radius: var(--r-pill); }
.margin-tooltip-bar--weight { background: var(--c-ink-faint); }
.margin-tooltip-bar--cost { background: var(--c-brand); }
.margin-tooltip-num { flex: 0 0 auto; min-width: 26px; text-align: right; color: var(--c-ink-muted); font-size: 10px; }
.margin-tooltip-more { color: var(--c-ink-faint); padding-top: var(--sp-1); font-style: italic; }
.charts-warnings { margin-bottom: var(--sp-4); }
.charts-table-scroll { max-height: 420px; overflow-y: auto; }

@media (max-width: 575.98px) {
  .charts-period { align-items: stretch; }
  .charts-period-form { flex-wrap: wrap; }
  .charts-kpi-value { font-size: var(--t-xl); }
  .charts-canvas { height: 240px; }
  .charts-canvas--full { height: 260px; }
  .charts-card { padding: var(--sp-3) var(--sp-4); }
}