/* foodino — client screens (Menu, Options, Cart, Success). Values ported from screens-client*.jsx */

/* на десктопе колонка-«приложение» по центру: фон по бокам темнее + рамка/тень,
   чтобы границы были видны. На телефоне колонка во всю ширину — рамка у краёв незаметна. */
/* Высота через цепочку height:100% (html→body→.screen) — в установленном PWA она равна реальному
   вьюпорту, в отличие от 100dvh, который на Android standalone захватывает зону за системной навигацией
   и роняет прибитый низ (футер корзины, плашку «Корзина») под экран. Дашборд не трогаем (.screen без .client). */
html { height: 100%; }
.client-body { background: color-mix(in srgb, var(--cbg) 88%, #000); height: 100%; overflow: hidden; }
.screen.client {
  height: 100%;
  background: var(--cbg); font-family: var(--font-text); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(26,24,21,0.06), 0 10px 50px rgba(26,24,21,0.10);
}

/* ── MENU ─────────────────────────────────────────────────────────────── */
/* верхняя панель — тёплый кремовый, чтобы отделялась от светлого низа меню */
.menu-head { background: color-mix(in srgb, var(--cbg) 58%, var(--card)); border-bottom: 1px solid var(--line); }
.menu-head__top {
  padding: 6px 20px 0; display: flex; align-items: flex-start; gap: 13px;
}
.logo-slot {
  width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0; margin-top: 2px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-slot img { width: 100%; height: 100%; object-fit: cover; }
.logo-slot__ph {
  font-family: var(--font-mono); font-size: 9px; color: var(--ink45); letter-spacing: 0.3px;
  border: 1px dashed var(--line); border-radius: 5px; padding: 3px 5px;
}
.menu-brand { flex: 1; min-width: 0; }
.brand-row { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: -0.3px; color: var(--orange); }
.brand-dot { width: 3px; height: 3px; border-radius: 9px; background: var(--ink45); }
.brand-sub { font-size: 12.5px; color: var(--ink45); font-weight: 500; }
.venue-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; line-height: 1.05; }
.venue-addr { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; color: var(--ink70); line-height: 1.25; }
.venue-addr svg { flex-shrink: 0; }
.menu-head__search { margin-top: 4px; }

button.menu-head__search { cursor: pointer; }
.search-row { align-items: center; gap: 8px; margin: 2px 16px 8px; padding: 9px 13px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.search-row:not([hidden]) { display: flex; }
.search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-text); font-size: 15px; color: var(--ink); }
.search-input::placeholder { color: var(--ink45); }
.search-cancel { border: none; background: transparent; color: var(--orange); font-weight: 600; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.menu-empty { text-align: center; color: var(--ink45); padding: 44px 0; font-size: 14.5px; }

.status-row { display: flex; gap: 6px; padding: 10px 16px 11px; flex-wrap: wrap; }

.cat-tabs { display: flex; gap: 8px; padding: 0 20px 10px; overflow-x: auto; }
.cat-tab {
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--card); color: var(--ink70); border: 1px solid var(--line);
}
.cat-tab--on { background: var(--orange); color: #fff; border-color: var(--orange); }

.menu-list { padding: 4px 0 0; }
.has-cart .menu-list { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); }   /* запас ровно под плашку корзины */
.powered { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px; font-size: 13.5px; color: var(--ink45); text-decoration: none; border-top: 1px solid var(--line-soft); }
.powered__logo { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; }
.powered b { color: var(--ink70); font-weight: 700; }
.cat-label {
  padding: 16px 20px 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink45);
}
.menu-item {
  display: flex; gap: 14px; padding: 13px 20px; align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.menu-section .menu-item:last-child { border-bottom: none; }
.menu-item[data-href]:not([data-href=""]) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-item[data-href]:not([data-href=""]):active { background: var(--cbg); }
.menu-item--out { opacity: 0.55; }
/* «основное» блюдо — выделенная карточка: лёгкий фон + акцентная полоса слева + бейдж «Хит» */
.menu-item--featured {
  background: color-mix(in srgb, var(--orange) 7%, var(--card));
  box-shadow: inset 3px 0 0 var(--orange);
  border-bottom-color: transparent;
}
.menu-item--featured[data-href]:not([data-href=""]):active { background: color-mix(in srgb, var(--orange) 13%, var(--card)); }
.mi-hit {
  flex: none;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px; line-height: 1;
  color: #fff; background: var(--orange);
  padding: 3px 7px; border-radius: 999px; text-transform: uppercase;
}
.menu-item .foodph { width: 72px; height: 72px; }
.mi-text { flex: 1; min-width: 0; }
.mi-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mi-name { font-weight: 600; font-size: 16px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-name-row svg { flex-shrink: 0; }
.mi-desc { font-size: 13px; color: var(--ink45); margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-price { margin-top: 7px; display: flex; align-items: baseline; gap: 4px; }
.mi-from { font-size: 12.5px; color: var(--ink45); }
.money--mi { font-size: 15.5px; color: var(--ink); }
.money--mi-out { color: var(--ink45); }
.add-btn { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* мягкая рассеянная тень + скругление в стиле корзины (вместо тесного ореола) */
.add-btn--solid { background: var(--orange); color: #fff; border-radius: 13px; box-shadow: 0 6px 18px color-mix(in srgb, var(--orange) 40%, transparent); }
/* inset-обводка рисуется ровно по всем сторонам (в отличие от 1.5px border) */
.add-btn--opt { background: var(--card); box-shadow: inset 0 0 0 1.6px var(--orange); }
.add-btn--added { animation: edPop 0.3s ease; }
@keyframes edPop { 0% { transform: scale(1); } 35% { transform: scale(0.86); } 100% { transform: scale(1); } }
.out-pill { font-size: 12px; font-weight: 600; color: var(--ink45); background: var(--line-soft); padding: 5px 9px; border-radius: 999px; flex-shrink: 0; }

.cart-bar { position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 30; }
.cart-bar__inner {
  background: var(--orange); border-radius: 16px; padding: 13px 16px 13px 18px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--orange) 40%, transparent); color: #fff;
}
.cart-bar.is-bump .cart-bar__inner { animation: edBump 0.32s ease; }
@keyframes edBump { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 100% { transform: scale(1); } }
.cart-bar__left { display: flex; align-items: center; gap: 11px; }
.cart-bar__title { font-weight: 700; font-size: 15px; line-height: 1; }
.cart-bar__count { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.cart-bar__right { display: flex; align-items: center; gap: 8px; }

/* ── OPTIONS SHEET ────────────────────────────────────────────────────── */
/* height:100% (как .screen.client) вместо базовых 100dvh — иначе в Android/iOS PWA
   низ листа (кнопки «Добавить»/количество) уезжает под экран за системную навигацию. */
.screen.options { background: rgba(26,24,21,0.55); height: 100%; }
.sheet-peek { height: 78px; flex-shrink: 0; }
.sheet {
  flex: 1; background: var(--card); border-radius: 26px 26px 0 0; position: relative;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
.sheet__close { position: absolute; top: 18px; right: 16px; z-index: 5; }
.sheet__body { flex: 1; overflow: auto; }
.sheet-hero { height: 168px; width: 100%; border-radius: 0; }
.sheet-title-wrap { padding: 18px 22px 8px; }
.sheet-title { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.5px; }
.sheet-desc { font-size: 14px; color: var(--ink45); margin-top: 4px; line-height: 1.4; }

.opt-group { padding: 14px 22px 4px; }
.opt-group--sauce { padding: 18px 22px 8px; }
.group-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2px; }
.group-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; }
.group-hint { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; background: var(--line-soft); color: var(--ink45); }
.group-hint--req { background: var(--orange-wash); color: var(--orange); }

.opt-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.opt-ctl { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; }
.opt-ctl--radio { border-radius: 999px; }
.opt-ctl--check { border-radius: 7px; }
.opt-ctl--on { border-color: var(--orange); }
.opt-ctl--check.opt-ctl--on { background: var(--orange); }
.opt-radio-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--orange); }
.opt-label { flex: 1; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.opt-label--on { font-weight: 600; }
.opt-price { font-size: 14px; color: var(--ink70); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.opt-price--inc { color: var(--ink45); }

.sheet-foot {
  padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
  border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; background: var(--card);
}
.qty { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line); border-radius: 13px; padding: 7px 12px; flex-shrink: 0; }
.qty__n { font-family: var(--font-display); font-weight: 700; font-size: 17px; min-width: 14px; text-align: center; }
.qty__btn { background: none; border: none; padding: 0; margin: 0; display: flex; align-items: center; cursor: pointer; }
.opt-row { cursor: pointer; user-select: none; }
.qty--sm { gap: 11px; border-radius: 11px; padding: 6px 10px; }
.qty--sm .qty__n { font-size: 15px; min-width: 12px; }
.add-cta { flex: 1; background: var(--orange); border-radius: 13px; padding: 14px 18px; color: #fff; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 6px 18px color-mix(in srgb, var(--orange) 35%, transparent); }
.add-cta__label { font-weight: 700; font-size: 16px; }

/* ── CART / CHECKOUT ──────────────────────────────────────────────────── */
.cart-head { background: var(--cbg); border-bottom: 1px solid var(--line); }
.cart-head__row { padding: 4px 16px 14px; display: flex; align-items: center; gap: 12px; }
.cart-back { width: 40px; height: 40px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-title { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.4px; line-height: 1; }
.cart-sub { font-size: 12.5px; color: var(--ink45); margin-top: 3px; }

.cart-body { padding: 14px 16px 18px; }
.card-list { background: var(--card); border-radius: 16px; border: 1px solid var(--line); overflow: hidden; }
.cart-item { display: flex; gap: 13px; padding: 13px; align-items: center; }
.cart-item + .cart-item { border-top: 1px solid var(--line-soft); }
.cart-item .foodph { width: 58px; height: 58px; }
.ci-text { flex: 1; min-width: 0; }
.ci-name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.2px; }
.ci-hit { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.3px; line-height: 1; color: #fff; background: var(--orange); padding: 2px 5px; border-radius: 999px; text-transform: uppercase; vertical-align: middle; position: relative; top: -1px; }
.ci-opts { font-size: 12.5px; color: var(--ink45); margin-top: 2px; }
.ci-price { margin-top: 6px; }
.money--ci { font-size: 15px; }

.add-more { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 0; color: var(--orange); font-weight: 600; font-size: 14px; }

.comment-box { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; font-size: 14.5px; color: var(--ink45); min-height: 56px; margin-bottom: 16px; }
.comment-box__label { font-weight: 600; color: var(--ink45); }
.comment-box__ph { margin-top: 5px; color: var(--ink45); }

.section-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink45); }
.section-label--contacts { padding: 0 2px 9px; }
.contacts-grid { display: grid; gap: 9px; }
.field { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 11px 14px; display: flex; align-items: center; gap: 11px; }
.field__main { flex: 1; }
.field__label { font-size: 11.5px; color: var(--ink45); font-weight: 600; margin-bottom: 1px; }
.req { color: var(--orange); font-weight: 700; }
.field--err { border-color: #E0653F; box-shadow: 0 0 0 1px #E0653F; }
.field--err .field__label { color: #E0653F; }
.field__value { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.field__value--ph { color: var(--ink45); }
.field__input { width: 100%; border: none; background: transparent; outline: none; padding: 0;
  font-family: var(--font-text); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.field__input::placeholder { color: var(--ink45); font-weight: 500; }
.comment-input { width: 100%; border: none; background: transparent; outline: none; resize: none;
  margin-top: 5px; min-height: 40px; font-family: var(--font-text); font-size: 14.5px; color: var(--ink); }
.comment-input::placeholder { color: var(--ink45); }
.cart-empty { text-align: center; padding: 40px 0 8px; }
.cart-empty__t { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink70); }
.cart-empty__link { display: inline-block; margin-top: 8px; color: var(--orange); font-weight: 600; font-size: 14.5px; }

.pickup-card { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pickup-row { display: flex; gap: 12px; padding: 14px; align-items: center; }
.pickup-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--orange-wash); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pickup-main { flex: 1; }
.pickup-title { font-weight: 700; font-size: 15.5px; }
.pickup-addr { font-size: 13px; color: var(--ink45); margin-top: 1px; }
.pickup-note { display: flex; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--line-soft); background: var(--cbg); align-items: center; }
.pickup-note span { font-size: 13px; color: var(--ink70); font-weight: 500; }
/* акцент-полоса «бесплатная доставка от X» — в карточке доставки (витрина + десктоп) */
.deliv-free { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-soft); background: var(--green-wash); color: var(--green); font-weight: 700; font-size: 13px; }
.deliv-free svg { flex-shrink: 0; }

/* выбор способа получения (самовывоз / доставка) */
.fulfil { margin-top: 22px; }
.fulfil > .pickup-card:first-child { margin-top: 0; }
.fulfil-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.fulfil-tab { flex: 1; padding: 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink70); font-weight: 600; font-size: 14.5px; cursor: pointer; }
.fulfil-tab--on { background: var(--ink); color: var(--cbg); border-color: var(--ink); }
.pickup-card .field { margin: 0; border-top: 1px solid var(--line-soft); }

/* футер — обычный flex-элемент внизу колонки (не absolute): надёжно виден на мобиле и при открытой клавиатуре */
.cart-foot { flex-shrink: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 30; }
.cart-foot__row { display: flex; align-items: center; gap: 14px; }
.cart-total-label { font-size: 12px; color: var(--ink45); font-weight: 600; }
.cart-total-note { font-weight: 500; opacity: .8; }
.money--total { font-size: 22px; }
.cta { flex: 1; background: var(--orange); border-radius: 13px; padding: 15px 18px; color: #fff; text-align: center; font-weight: 700; font-size: 16px; box-shadow: 0 6px 18px color-mix(in srgb, var(--orange) 35%, transparent); }
.cta--disabled { background: var(--line); color: var(--ink45); box-shadow: none; cursor: not-allowed; }
.cart-closed { text-align: center; font-size: 13.5px; font-weight: 600; color: #B5601A; background: #FBE7D6; border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }

/* ── SUCCESS ──────────────────────────────────────────────────────────── */
.success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.success-check { width: 76px; height: 76px; border-radius: 999px; background: var(--green-wash); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.success-check__inner { width: 50px; height: 50px; border-radius: 999px; background: var(--green); display: flex; align-items: center; justify-content: center; }
.success-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.4px; }
.success-desc { font-size: 14.5px; color: var(--ink70); margin-top: 7px; line-height: 1.45; max-width: 260px; }
.code-box { margin: 26px 0; padding: 20px 40px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgba(26,24,21,0.05); }
.code-box__label { font-size: 12.5px; color: var(--ink45); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.code-box__num { font-family: var(--font-display); font-weight: 800; font-size: 64px; letter-spacing: -2px; line-height: 1.05; color: var(--orange); }
.info-card { width: 100%; max-width: 320px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: left; }
.info-row { display: flex; gap: 12px; padding: 12px 14px; align-items: center; }
.info-row + .info-row { border-top: 1px solid var(--line-soft); }
.info-row__main { flex: 1; }
.info-row__t { font-weight: 600; font-size: 14.5px; }
.info-row__s { font-size: 12.5px; color: var(--ink45); margin-top: 1px; }
/* состав заказа на экране «Заказ оформлен» */
.ord-card { margin-bottom: 12px; }
.ord-card__title { font-size: 12px; color: var(--ink45); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 12px 14px 4px; }
.ord-line { display: flex; gap: 10px; align-items: baseline; padding: 7px 14px; }
.ord-line__q { flex: none; color: var(--ink45); font-weight: 600; font-size: 13px; }
.ord-line__main { flex: 1; min-width: 0; }
.ord-line__name { font-size: 14.5px; font-weight: 600; }
.ord-line__opt { font-size: 12px; color: var(--ink45); margin-top: 1px; }
.ord-line__price { flex: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
.ord-line--total { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 11px; padding-bottom: 12px; font-size: 15px; }
.ord-line--total .ord-line__main { font-weight: 700; }
.ord-card__note { padding: 0 14px 12px; font-size: 12px; color: var(--ink45); }
.success-foot { padding: 14px 24px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.back-link { background: var(--cbg); border: 1.5px solid var(--line); border-radius: 13px; padding: 14px; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); display: block; }

/* ── Отслеживание статуса заказа на странице успеха ── */
.track-wrap { width: 100%; max-width: 340px; margin: 32px auto 14px; }
.track { display: flex; }
.track-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; padding: 0 3px; }
.track-step::before { content: ''; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.track-step:first-child::before { display: none; }
.track-step.is-done::before, .track-step.is-active::before { background: var(--green); }
.track-dot { width: 18px; height: 18px; border-radius: 999px; background: var(--line); position: relative; z-index: 1; transition: background .2s, box-shadow .2s; }
.track-step.is-done .track-dot { background: var(--green); }
.track-step.is-active .track-dot { background: var(--orange); box-shadow: 0 0 0 5px color-mix(in srgb, var(--orange) 18%, transparent); }
.track-lbl { font-size: 12px; color: var(--ink45); text-align: center; line-height: 1.3; }
.track-step.is-done .track-lbl { color: var(--ink70); }
.track-step.is-active .track-lbl { color: var(--ink); font-weight: 700; }
.track-hint { text-align: center; font-size: 13.5px; color: var(--ink70); margin-top: 20px; min-height: 18px; }
.track-cancel { display: none; text-align: center; font-size: 14px; font-weight: 700; color: #C0392B; background: rgba(192, 57, 43, .10); border-radius: 12px; padding: 13px 14px; margin-top: 8px; }

/* ── Бренд: акцентный токен по умолчанию (переопределяется per-venue в layout) ── */
:root { --accent: var(--orange); }

/* ── Карточные режимы меню: «Сетка 2» (grid, 2-в-ряд) и «Крупные карточки» (cards, 1-в-ряд) ── */
/* minmax(0,1fr) — иначе nowrap-название распирает колонку и сетка вылезает за край */
.menu-list--grid .menu-section,
.menu-list--cards .menu-section { display: grid; gap: 12px; padding: 0 16px; align-items: stretch; }
.menu-list--grid .menu-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.menu-list--cards .menu-section { grid-template-columns: 1fr; }
.menu-list--grid .cat-label,
.menu-list--cards .cat-label { grid-column: 1 / -1; }
.menu-list--grid .menu-item,
.menu-list--cards .menu-item {
  flex-direction: column; align-items: stretch; gap: 9px; min-width: 0;
  padding: 10px 10px 12px; border-bottom: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
/* «Хит» не распирает карточку: рамка вместо левой полосы */
.menu-list--grid .menu-item--featured,
.menu-list--cards .menu-item--featured { border-color: var(--orange); box-shadow: none; }
.menu-list--grid .menu-item .foodph,
.menu-list--cards .menu-item .foodph { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
.menu-list--grid .menu-item .mi-text,
.menu-list--cards .menu-item .mi-text { flex: none; min-width: 0; }
.menu-list--grid .menu-item .mi-name-row,
.menu-list--cards .menu-item .mi-name-row { flex-wrap: wrap; }
.menu-list--grid .menu-item .mi-name,
.menu-list--cards .menu-item .mi-name { white-space: normal; overflow: visible; }
.menu-list--grid .menu-item .mi-price,
.menu-list--cards .menu-item .mi-price { margin-top: 2px; }

/* Сетка 2-в-ряд: описание прячем */
.menu-list--grid .menu-item .mi-desc { display: none; }
.menu-list--grid .menu-item .out-pill { align-self: flex-start; margin-top: auto; }

/* Крупные карточки (1-в-ряд): чуть компактнее — фото площе (16:9), поджатые отступы; описание видно (2 строки), кнопка по центру */
.menu-list--cards .menu-section { gap: 10px; }
.menu-list--cards .menu-item { gap: 7px; padding: 9px 9px 10px; }
.menu-list--cards .menu-item .foodph { aspect-ratio: 16 / 9; }
.menu-list--cards .menu-item .mi-name { font-size: 15px; }
.menu-list--cards .menu-item .mi-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; font-size: 12.5px;
}
.menu-list--cards .menu-item .out-pill { align-self: center; margin-top: 6px; }

/* ── Кнопка «В корзину» / «Выбрать» + степпер «− N +» (карточные виды) ── */
.add-cta-text { display: none; }                 /* в списке — только «+» */
.mi-add { flex-shrink: 0; }
.menu-list--grid .add-cta-text,
.menu-list--cards .add-cta-text { display: inline; font-size: 13.5px; font-weight: 700; }
/* контрол на всю ширину снизу карточки */
.menu-list--grid .menu-item .mi-add,
.menu-list--cards .menu-item .mi-add { width: 100%; margin-top: auto; }
.menu-list--grid .menu-item .add-btn--solid, .menu-list--cards .menu-item .add-btn--solid,
.menu-list--grid .menu-item .add-btn--opt,   .menu-list--cards .menu-item .add-btn--opt {
  width: 100%; height: 40px; border-radius: 12px; gap: 7px;
}
.menu-list--grid .menu-item .add-btn--opt,
.menu-list--cards .menu-item .add-btn--opt { color: var(--orange); }
.qty-card {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 40px; overflow: hidden;
  background: var(--orange-wash); border: 1px solid var(--orange); border-radius: 12px;
}
.qty-card__btn { width: 46px; height: 100%; flex-shrink: 0; color: var(--orange); font-size: 22px; font-weight: 500; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty-card__n { font-weight: 800; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
/* атрибут hidden должен реально прятать (иначе display:flex перебивает) */
.add-btn[hidden], .qty-card[hidden] { display: none !important; }

/* ── PWA: «Установить на телефон» ────────────────────────────────────── */
.pwa-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 14px; border-radius: 14px; background: var(--orange-wash); color: var(--orange);
  font-weight: 700; font-size: 14.5px; border: 1px solid var(--orange); cursor: pointer;
  font-family: var(--font-text);
}
.pwa-hint { font-size: 12.5px; color: var(--ink45); text-align: center; line-height: 1.45; margin-top: 10px; }
.pwa-hint b { color: var(--ink70); font-weight: 700; }
.menu-foot { padding: 14px 20px 20px; }

.pwa-dismiss { display: block; margin: 8px auto 0; background: none; border: none; cursor: pointer;
  color: var(--ink45); font-size: 12.5px; font-family: var(--font-text); text-decoration: underline; }
.pwa-dismiss:hover { color: var(--ink70); }

/* атрибут hidden должен реально скрывать (иначе display:flex/block перебивает его) */
.pwa-cta[hidden], .pwa-hint[hidden] { display: none; }

/* ── Плашка активного заказа (плавающая снизу, на всех страницах витрины) ── */
.aob { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 80;
  max-width: 520px; margin: 0 auto; display: none; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; cursor: pointer;
  border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(26,24,21,0.22);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.aob.show { display: flex; opacity: 1; transform: none; }
.aob--raised { bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }   /* поднята над кнопкой корзины */
.aob__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.aob--wait .aob__dot { animation: aob-pulse 1.4s ease-in-out infinite; }
.aob--ready { border-color: var(--green); }
.aob--ready .aob__dot { background: var(--green); }
.aob--cancel .aob__dot { background: #D2473B; }
.aob--done .aob__dot { background: var(--green); }
.aob__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.aob__tx b { font-size: 14px; font-weight: 700; }
.aob__tx span { font-size: 12.5px; color: var(--ink45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aob--ready .aob__tx span { color: var(--green); font-weight: 700; }
.aob--cancel .aob__tx span { color: #D2473B; font-weight: 700; }
.aob__ch { font-size: 22px; color: var(--ink45); line-height: 1; flex-shrink: 0; }
.aob__close { flex-shrink: 0; width: 30px; height: 30px; margin: -6px -4px -6px 0; border: none; background: transparent; color: var(--ink45); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; }
.aob__close:active { background: var(--line-soft); }
@keyframes aob-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Опт-ин «уведомить, когда готово» на странице статуса */
.notify-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 320px; margin: 20px auto 12px;
  padding: 13px 18px; border-radius: 14px; border: 1.5px solid var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent);
  color: var(--orange); font-weight: 700; font-size: 14.5px; font-family: inherit; cursor: pointer; }
.notify-cta[hidden] { display: none; }
.notify-done { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 320px; margin: 20px auto 12px; font-size: 13.5px; font-weight: 600; color: var(--green); }
.notify-done[hidden] { display: none; }

/* ── Экран «Заказ оформлен» — мобильный редизайн «без хаоса» (десктоп .dk-status не трогаем) ── */
.suc { height: 100%; display: flex; flex-direction: column; background: var(--cbg); }
.suc__scroll { flex: 1; overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 6px; -webkit-overflow-scrolling: touch; }
.suc__scroll::-webkit-scrollbar { display: none; }
.suc-head { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 12px; }
.suc-head__ic { width: 27px; height: 27px; border-radius: 50%; background: var(--green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.suc-head__t { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.5px; color: var(--ink); }

.suc-hero { background: var(--card); border-radius: 20px; box-shadow: 0 10px 28px rgba(26,24,21,0.07); overflow: hidden; }
.suc-hero__top { text-align: center; padding: 15px 20px 11px; }
.suc-hero__label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink45); font-weight: 600; }
.suc-hero__code { font-family: var(--font-display); font-weight: 800; font-size: 58px; letter-spacing: -2px; color: var(--orange); line-height: 1.05; }
.suc-hero__sub { font-size: 12.5px; color: var(--ink45); margin-top: 1px; }

.suc-track { border-top: 1px solid var(--line-soft); padding: 12px 22px 13px; background: color-mix(in srgb, var(--cbg) 55%, var(--card)); }
.suc-line { display: flex; align-items: center; }
.suc-dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); flex-shrink: 0; transition: all .25s ease; }
.suc-dot.done { background: var(--orange); }
.suc-dot.active { width: 15px; height: 15px; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 18%, transparent); }
.suc-seg { flex: 1; height: 2px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.suc-seg.done { background: var(--orange); }
.suc-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink45); margin-top: 7px; }
.suc-labels span.on { color: var(--orange); font-weight: 700; }
.suc-hint { font-size: 12.5px; color: var(--ink70); margin-top: 8px; text-align: center; line-height: 1.35; }
.suc-cancel { display: none; font-size: 13px; font-weight: 600; color: #D2473B; text-align: center; margin-top: 8px; }

.suc-notify { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 10px; padding: 14px; border: none; border-radius: 14px; background: var(--ink); color: #fff; font-family: var(--font-text); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--ink) 45%, transparent); }
.suc-notify[hidden] { display: none; }
.suc-notify--done { gap: 8px; background: var(--green-wash); border: 1.5px solid color-mix(in srgb, var(--green) 40%, transparent); color: var(--green); box-shadow: none; cursor: default; font-size: 14px; }
.suc-notify__off { background: none; border: none; color: var(--green); opacity: .72; font-family: var(--font-text); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 3px 4px; margin-left: 2px; }

.suc-deliv { background: var(--card); border-radius: 16px; padding: 12px 16px; margin-top: 10px; }
.suc-deliv__lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink45); }
.suc-deliv__addr { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 3px; line-height: 1.35; }

.suc-items { background: var(--card); border-radius: 18px; margin-top: 10px; overflow: hidden; }
.suc-items__h { padding: 12px 16px 2px; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink45); font-weight: 600; }
.suc-item { display: flex; gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.suc-item:last-of-type { border-bottom: none; }
.suc-item__q { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--orange); min-width: 26px; }
.suc-item__main { flex: 1; min-width: 0; }
.suc-item__name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.suc-item__opt { font-size: 12px; color: var(--ink45); margin-top: 2px; }
.suc-item__price { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.suc-items__foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: color-mix(in srgb, var(--cbg) 55%, var(--card)); }
.suc-items__foot span { font-size: 13px; color: var(--ink45); }
.suc-items__foot b { font-size: 16px; font-weight: 700; color: var(--ink); }

.suc__foot { flex-shrink: 0; padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 6px); }
.suc-back { display: block; background: var(--card); border: 1.5px solid var(--line-soft); border-radius: 14px; padding: 12px; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.suc-pwa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; background: none; border: none; color: var(--orange); font-family: var(--font-text); font-weight: 600; font-size: 13px; cursor: pointer; line-height: 1.4; }
.suc-pwa.pwa-hint { flex-direction: column; color: var(--ink45); font-weight: 500; font-size: 12.5px; }

/* ░░ Бренд-сеть: окно выбора адреса (страница-развилка) + переключатель ░░ */
.brand-pick { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 18px calc(env(safe-area-inset-bottom, 0px) + 24px); background: var(--cbg); }
.brand-pick__card { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; }
.brand-pick__logo { width: 72px; height: 72px; border-radius: 20px; overflow: hidden; background: var(--card); border: 1.5px solid var(--line-soft); display: flex; align-items: center; justify-content: center; }
.brand-pick__logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-pick__logo span { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--orange); }
.brand-pick__brand { margin-top: 14px; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: var(--ink); text-align: center; }
.brand-pick__title { margin-top: 4px; font-size: 14px; color: var(--ink45); }
.brand-pick__list { margin-top: 22px; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.brand-pick__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 15px 16px; background: var(--card); border: 1.5px solid var(--line-soft); border-radius: 15px; cursor: pointer; font-family: var(--font-text); transition: border-color .15s, background .15s; }
.brand-pick__item:hover { border-color: var(--orange); }
.brand-pick__item.is-current { border-color: var(--orange); background: var(--orange-wash); }
.brand-pick__pin { flex-shrink: 0; display: flex; }
.brand-pick__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brand-pick__name { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.brand-pick__addr { font-size: 12.5px; color: var(--ink70); line-height: 1.3; }

.venue-addr--switch { margin-top: 4px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-text); color: var(--ink); font-weight: 600; }
.venue-addr--switch span { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }

.brand-switch { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.brand-switch[hidden] { display: none; }   /* иначе display:flex перебивает атрибут hidden и окно не закрывается */
.brand-switch__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.brand-switch__sheet { position: relative; width: 100%; max-width: 480px; background: var(--cbg); border-radius: 20px 20px 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); max-height: 80dvh; overflow-y: auto; animation: brandSheetUp .22s ease; }
@keyframes brandSheetUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.brand-switch__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.brand-switch__head span { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
.brand-switch__x { background: var(--card); border: 1.5px solid var(--line-soft); border-radius: 11px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.brand-switch__list { display: flex; flex-direction: column; gap: 10px; }
.brand-switch__list .brand-pick__item { justify-content: flex-start; }
.brand-switch__list .brand-pick__item.is-current .brand-pick__txt { flex: 1; }
/* на десктопе — центрированное модальное окно вместо нижнего листа */
@media (min-width: 1024px) {
  .brand-switch { align-items: center; }
  .brand-switch__sheet { border-radius: 20px; max-width: 440px; animation: none; }
}