/* KrakenOS storefront — dark food-delivery theme, mobile-first */

:root {
  --accent: #e94560; /* переопределяется primary_color организации */
  --accent-dim: #c22f4b;
  --bg: #0f0f14;
  --bg-2: #16161d;
  --card: #1c1c26;
  --card-2: #232330;
  --text: #f2f2f5;
  --text-dim: #a0a0b0;
  --danger: #ff6b6b;
  --success: #35c759;   /* [130] якорь для темы из Контента (success) */
  --line: rgba(255, 255, 255, 0.08);
  --radius: 14px;
  --header-h: 60px;
  --chips-h: 54px;
  --bottomnav-h: 56px;   /* [124] высота bottom-nav (для отступов над ним) */
}

/* [116] светлая тема (переключатель в хедере, localStorage sf_theme).
   Только палитра — вся разметка и так на переменных. */
:root[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-2: #eceef2;
  --card: #ffffff;
  --card-2: #f0f1f5;
  --text: #17171d;
  --text-dim: #5d5d6e;
  --line: rgba(15, 15, 25, 0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

[hidden] { display: none !important; }

img { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.body--locked { overflow: hidden; }

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: rgba(15, 15, 20, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.brand__logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
}

.brand__logo img { width: 100%; height: 100%; object-fit: cover; }

.brand__name {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__phone {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px;
}

.header__phone-num { display: none; }

@media (min-width: 720px) {
  .header__phone-num { display: inline; }
  .header__phone-ic { display: none; }
}

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  padding: 9px 14px;
  font-weight: 700;
  flex: none;
}

.cart-btn__sum { font-size: 14px; white-space: nowrap; }

.cart-btn__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #fff;
  color: var(--accent-dim);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

/* ---------- chips ---------- */

.chips {
  position: sticky;
  top: var(--header-h);
  z-index: 35;
  background: rgba(15, 15, 20, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.chips__row {
  position: sticky;
  top: var(--header-h);
  z-index: 45;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 9px 12px;
  max-width: 1080px;
  margin: 0 auto;
  scrollbar-width: none;
}

.chips__row::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--line);
  transition: background 0.15s, color 0.15s;
}

.chip--active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* ---------- menu ---------- */

.main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 12px calc(96px + env(safe-area-inset-bottom));
}

.section { scroll-margin-top: calc(var(--header-h) + var(--chips-h) + 10px); }

.section__title {
  font-size: 20px;
  font-weight: 800;
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
}

.section__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 9px;
  background: var(--accent);
  flex: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

.menu-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 60px 20px;
  font-size: 15px;
}

/* ❤️ кнопка избранного в карточке */
.card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  color: #999;
}
.card__fav:hover { transform: scale(1.1); background: #fff; }
.card__fav--on {
  color: #ff4757;
  background: rgb(255 255 255 / 12%);
}
.card__fav--on svg { fill: #ff4757; }

/* ---------- product card ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.card:hover { border-color: rgba(255, 255, 255, 0.18); }
.card:active { transform: scale(0.98); }

.card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--card-2);
}

.card__img img { width: 100%; height: 100%; object-fit: cover; }

.card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  opacity: 0.6;
}

.card__placeholder--sm { position: absolute; }

.card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
}

.badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.badge--hit { background: var(--accent); color: #fff; }
.badge--new { background: #2ea86d; color: #fff; }
.badge--spicy { background: rgba(0, 0, 0, 0.55); }

.card__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.card__name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.card__weight { font-size: 12px; color: var(--text-dim); }

.card__desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card__price { font-weight: 800; font-size: 15px; white-space: nowrap; }

.card__add {
  background: var(--accent);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---------- overlays / modal ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
}

.overlay--center { align-items: center; justify-content: center; }

.modal {
  background: var(--bg-2);
  width: 100%;
  margin-top: auto;
  border-radius: 18px 18px 0 0;
  max-height: 92vh;
  overflow-y: auto;
}

@media (min-width: 720px) {
  .modal { margin: auto; max-width: 560px; border-radius: 18px; }
}

.modal__img {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--card-2);
}

.modal__img img { width: 100%; height: 100%; object-fit: cover; }

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 15px;
}

.modal__body { padding: 16px 16px 8px; }

.modal__name { font-size: 20px; font-weight: 800; }

.modal__meta { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

.modal__desc {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 10px;
}

.modal__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

.modal__footer .btn { flex: 1; }

/* variants */

.variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }

.variant {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
  text-align: left;
}

.variant--active { border-color: var(--accent); }
.variant__name { font-size: 13px; font-weight: 600; }
.variant__price { font-size: 13px; font-weight: 800; }
.variant--active .variant__price { color: var(--accent); }

/* modifiers */

.mod-group { margin: 16px 0 4px; }
.mod-group__name { font-weight: 700; font-size: 14px; margin-bottom: 8px; }

.mod-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}

.mod-item__cb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--text-dim);
  flex: none;
  position: relative;
  margin: 0;
}

.mod-item__cb:checked { background: var(--accent); border-color: var(--accent); }

.mod-item__cb:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mod-item__name { flex: 1; font-size: 14px; }
.mod-item__price { font-weight: 700; font-size: 13px; color: var(--text-dim); }

.mods-loading { color: var(--text-dim); font-size: 13px; padding: 10px 0; }

/* stepper */

.stepper {
  display: flex;
  align-items: center;
  background: var(--card-2);
  border-radius: 12px;
  border: 1px solid var(--line);
  flex: none;
}

.stepper button {
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: var(--accent);
  font-weight: 800;
}

.stepper__val { min-width: 30px; text-align: center; font-weight: 700; }

/* ---------- drawer (cart / checkout) ---------- */

.drawer {
  background: var(--bg-2);
  width: 100%;
  margin-top: auto;
  border-radius: 18px 18px 0 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 719px) {
  .drawer {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
}

@media (min-width: 720px) {
  .overlay--drawer { justify-content: flex-end; }
  .drawer {
    margin: 0;
    width: 420px;
    max-height: none;
    height: 100vh;
    border-radius: 0;
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.drawer__title { font-size: 17px; font-weight: 800; flex: 1; }

.drawer__back {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 0;
  flex: none;
}

.drawer__close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--card-2);
  color: var(--text-dim);
  font-size: 14px;
  flex: none;
}

.drawer__scroll { flex: 1; overflow-y: auto; padding: 4px 16px; }

.drawer__footer {
  padding: 12px 16px calc(12px + var(--bottomnav-h) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  flex: none;
}
@media (min-width: 720px) {
  .drawer__footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}

.drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 15px;
}

.drawer__subtotal strong { font-size: 18px; }

/* cart line */

.cart-line {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.cart-line__thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-2);
  flex: none;
  position: relative;
}

.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__info { flex: 1; min-width: 0; }
.cart-line__name { font-weight: 700; font-size: 14px; }
.cart-line__mods { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.cart-line__sum { font-weight: 800; font-size: 14px; margin-top: 4px; }

.cart-line__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}

.cart-line__remove { color: var(--text-dim); font-size: 12px; padding: 4px; }

.cart-line .stepper button { width: 32px; height: 32px; font-size: 16px; }

/* empty cart */

.cart-empty { text-align: center; padding: 48px 20px; }
.cart-empty__icon { font-size: 44px; margin-bottom: 12px; }
.cart-empty__title { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.cart-empty__text { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; }
.cart-empty .btn { width: auto; padding-left: 28px; padding-right: 28px; }

/* ---------- checkout form ---------- */

.checkout { padding: 14px 0 24px; }

.field { margin-bottom: 14px; }

.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.field__input {
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
}

textarea.field__input { resize: vertical; min-height: 70px; }

.field__input:focus { outline: none; border-color: var(--accent); }
.field__input--error { border-color: var(--danger); }

.field__error { color: var(--danger); font-size: 12px; margin-top: 5px; }

/* [135] bonus_program: блок бонусов на checkout (градиент от --accent,
   без хардкода цветов — тема орг [130] применяется автоматически) */
.bonus-box {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, var(--card)),
    var(--card));
}

.bonus-box__title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }

.bonus-box__balance {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}

.bonus-box__row { display: flex; gap: 8px; align-items: stretch; }

.bonus-box__input { flex: 1; min-width: 0; }

.bonus-box__chip {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.bonus-box__chip:active { background: var(--accent); color: #fff; }

.bonus-box__hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
}

.bonus-box__spend {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dim);
  margin-top: 10px;
}

.bonus-box__earn {
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  margin-top: 10px;
}

.seg {
  display: flex;
  background: var(--card-2);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
}

.seg button {
  flex: 1;
  padding: 10px 6px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}

.seg button.seg--active { background: var(--accent); color: #fff; }

.pickup-info {
  display: none;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.pickup-info--show { display: block; }

.form-error {
  display: none;
  background: rgba(255, 77, 77, 0.12);
  border: 1px solid rgba(255, 77, 77, 0.4);
  color: #ff8a8a;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.form-error--show { display: block; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ---------- buttons ---------- */

.btn {
  border-radius: 12px;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15px;
  display: inline-block;
  text-align: center;
}

.btn--accent { background: var(--accent); color: #fff; width: 100%; }
.btn--accent:disabled { opacity: 0.6; cursor: default; }

.btn--ghost {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--line);
  width: 100%;
}

/* ---------- full screen (loading / 404 / error) ---------- */

.screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
  text-align: center;
}

.screen__box { max-width: 360px; }

.screen__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--card-2);
  border-top-color: var(--accent);
  margin: 0 auto 18px;
  animation: kr-spin 0.9s linear infinite;
}

@keyframes kr-spin { to { transform: rotate(360deg); } }

.screen__title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.screen__text { color: var(--text-dim); font-size: 14px; line-height: 1.45; }

.screen__retry { width: auto; margin-top: 18px; padding-left: 32px; padding-right: 32px; }

/* ---------- skeletons ---------- */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: kr-shimmer 1.2s infinite;
  transform: translateX(-100%);
}

@keyframes kr-shimmer { to { transform: translateX(100%); } }

.sk-chip { width: 92px; height: 36px; border-radius: 999px; flex: none; }
.sk-card { height: 218px; }

/* ---------- success ---------- */

.success {
  background: var(--bg-2);
  border-radius: 18px;
  padding: 28px 22px;
  width: calc(100% - 32px);
  max-width: 420px;
  text-align: center;
  border: 1px solid var(--line);
}

.success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success__title { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.success__sum { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.success__line { color: var(--text-dim); font-size: 14px; margin-bottom: 6px; }
.success__phone { color: var(--accent); text-decoration: none; font-weight: 700; }
.success .btn { margin-top: 16px; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 95;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}

.toast--show { opacity: 1; }

/* ================= [109] гео-блок: зоны доставки на витрине ================= */

.geo {
  margin: 4px 0 14px;
}

.geo__btn {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
}

.geo__btn:hover { border-color: var(--accent); }
.geo__btn:disabled { opacity: 0.6; cursor: default; }

.geo__map {
  height: 290px;   /* [145] checkout_zones_ux: +30% — контур зоны реально рассмотреть */
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  z-index: 0; /* [121] карта внутри drawer: не перекрывать оверлеи */
}

.geo__hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.geo__result {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.geo__result--ok {
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.45);
  color: #7bd88a;
}

.geo__result--bad {
  background: rgba(233, 69, 96, 0.10);
  border: 1px solid rgba(233, 69, 96, 0.5);
  color: #ff8fa3;
}

/* ================= [110] промокод на витрине ================= */

.promo-row {
  display: flex;
  gap: 8px;
  flex-direction: column;   /* [145] промокод вертикально: поле полной ширины, кнопка под ним */
}

.promo-row .field__input { flex: none; width: 100%; box-sizing: border-box; }

.promo-row__btn {
  align-self: flex-start;   /* [145] кнопка компактная под полем ввода */
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.promo-row__btn:hover { border-color: var(--accent); }
.promo-row__btn:disabled { opacity: 0.6; cursor: default; }

/* [145] checkout_zones_ux: сводка «Ваш заказ» внизу чекаута */
.order-summary {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}
.order-summary__title { font-weight: 700; margin-bottom: 8px; }
.order-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 2px 0;
}
.order-summary__qty { opacity: 0.65; }
.order-summary__val { white-space: nowrap; }
.order-summary__total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 700;
}
.order-summary__earn {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* [145] серверный suggest (fallback, когда у ключа нет Yandex Suggest API) */
.suggest-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.suggest-list__item { padding: 9px 12px; font-size: 14px; cursor: pointer; }
.suggest-list__item:hover { background: var(--card-2); }

.promo-result {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.promo-result--ok {
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.45);
  color: #7bd88a;
}

.promo-result--bad {
  background: rgba(233, 69, 96, 0.10);
  border: 1px solid rgba(233, 69, 96, 0.5);
  color: #ff8fa3;
}

/* ========== [112] storefront_auth (2026-08-23): вход клиента, бонусы, адреса ========== */
.header__auth {
  display: flex;
  align-items: center;
}

.auth-btn {
  background: transparent;
  border: 1px solid var(--line, rgba(255, 255, 255, .16));
  color: var(--text, #f2f2f5);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-btn--login {
  border-color: var(--accent);
  color: var(--accent);
}

.auth-pop {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 320;
  background: var(--card, #1c1c24);
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.auth-pop__title {
  font-size: 14px;
  font-weight: 700;
}

.auth-pop__hint {
  font-size: 12px;
  color: var(--text-dim, #9a9aa5);
  text-align: center;
}

.auth-pop__error {
  font-size: 12px;
  color: #e94560;
}

/* [132] sms_otp_auth: форма SMS-входа в auth-pop (альтернатива TG [112]) */
.auth-pop__sep {
  font-size: 12px;
  color: var(--text-dim, #9a9aa5);
}

.sms-auth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
}

.sms-auth__phone,
.sms-auth__code { width: 100%; margin: 0; }

.sms-auth__code {
  text-align: center;
  letter-spacing: 4px;
  font-size: 16px;
  font-weight: 700;
}

.sms-auth__send,
.sms-auth__login { width: 100%; justify-content: center; }

.sms-auth__code-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sms-auth__error {
  font-size: 12px;
  color: #e94560;
  line-height: 1.4;
  text-align: center;
}

.customer-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-2, rgba(255, 255, 255, .05));
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

.customer-chip__name {
  font-size: 14px;
  font-weight: 600;
}

.customer-chip__out {
  background: transparent;
  border: none;
  color: var(--text-dim, #9a9aa5);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.addr-select {
  width: 100%;
}

/* ========== [113] storefront_full (2026-08-23): нав-меню, инфо-страницы, TT-карточка ========== */

/* описание в карточке: 3 строки вместо 2 — меньше «обрубков» */
.card__desc { -webkit-line-clamp: 3; }

/* ---------- бургер в шапке ---------- */

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 9px;
  background: var(--card-2, #232330);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 12px;
  cursor: pointer;
  flex: none;
}

.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text, #f2f2f5);
}

/* ---------- нав-меню (drawer слева) ---------- */

.overlay--nav { z-index: 90; justify-content: flex-start; }

.navdrawer {
  background: var(--bg-2, #17171f);
  width: min(320px, 86vw);
  height: 100%;
  overflow-y: auto;
  padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
  border-right: 1px solid var(--line, rgba(255, 255, 255, .1));
  display: flex;
  flex-direction: column;
}

.navdrawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.navdrawer__brand {
  font-size: 17px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navdrawer__close {
  background: var(--card-2, #232330);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  color: var(--text, #f2f2f5);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  flex: none;
}

.navdrawer__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.navdrawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--text, #f2f2f5);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.navdrawer__item:hover { background: var(--card, #1c1c26); }

.navdrawer__item-ic { font-size: 17px; width: 24px; text-align: center; flex: none; }

/* [159] qr_menu_v2: вложенные категории дерева в hall-сайдбаре */
.navdrawer__item--sub { padding-left: 36px; font-weight: 500; }

.navdrawer__contacts {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .1));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.navdrawer__contact {
  color: var(--text-dim, #9a9aa5);
  font-size: 13px;
  text-decoration: none;
}

a.navdrawer__contact:hover { color: var(--accent); }

/* ---------- инфо-страница / профиль (полноэкранный лист) ---------- */

.overlay--page { z-index: 100; }

.infopage {
  background: var(--bg, #0f0f14);
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
  .overlay--page { align-items: center; justify-content: center; }
  .infopage {
    width: min(640px, 92vw);
    height: auto;
    max-height: 88vh;
    border-radius: 18px;
    border: 1px solid var(--line, rgba(255, 255, 255, .1));
  }
}

.infopage__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  position: sticky;
  top: -14px;
  background: var(--bg, #0f0f14);
  padding: 8px 0;
  z-index: 2;
}

.infopage__back {
  background: var(--card-2, #232330);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  color: var(--text, #f2f2f5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  flex: none;
}

.infopage__title { font-size: 19px; font-weight: 800; }

.infopage__body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #f2f2f5);
  margin: 0 0 12px;
  white-space: pre-wrap;
}

/* [127] страница «Акции»: карточки действующих акций (над статическим текстом) */
.promo-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 720px) {
  .promo-cards { grid-template-columns: 1fr 1fr; }
}

.promo-card {
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .08));
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease;
}
.promo-card:active { transform: scale(.98); }

.promo-card__media {
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, var(--accent, #e94560), var(--accent-dim, #c22f4b));
  background-size: cover;
  background-position: center;
}

.promo-card__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba(15, 15, 20, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.promo-card__body { padding: 10px 12px 12px; }
.promo-card__name { font-size: 15px; font-weight: 800; line-height: 1.25; }
.promo-card__desc {
  font-size: 13px;
  color: var(--text-dim, #9a9aa5);
  margin-top: 4px;
}
.promo-card__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #e94560);
  margin-top: 7px;
}

.promo-card--sk { height: 190px; }

/* [131] content_posts: новости/события на странице «Акции»
   (между карточками акций [127] и статическим текстом [129]) */
.post-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 720px) {
  .post-cards { grid-template-columns: 1fr 1fr; }
}

.post-card {
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .08));
  border-radius: 16px;
  overflow: hidden;
}

.post-card__media {
  height: 140px;
  background: linear-gradient(135deg, var(--accent, #e94560), var(--accent-dim, #c22f4b));
  background-size: cover;
  background-position: center;
}

.post-card__media--img { background-size: cover; }

.post-card__body { padding: 12px 14px 14px; }
.post-card__title { font-size: 15px; font-weight: 800; line-height: 1.25; }
.post-card__text {
  font-size: 13px;
  color: var(--text-dim, #9a9aa5);
  margin-top: 6px;
  line-height: 1.5;
}
.post-card__text p { margin: 0 0 8px; }
.post-card__text img { max-width: 100%; border-radius: 10px; }
.post-card__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim, #9a9aa5);
  margin-top: 8px;
}

/* [129] content_pages_full: H1/изображение/HTML-контент info-страниц,
   шаблоны страниц и SEO-блок главной */
.infopage__h1 { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.infopage__img { width: 100%; border-radius: 16px; margin: 0 0 14px; display: block; }

.infopage__html { font-size: 14px; line-height: 1.55; }
.infopage__html h2 { font-size: 18px; margin: 14px 0 8px; }
.infopage__html h3 { font-size: 16px; margin: 12px 0 6px; }
.infopage__html p { margin: 0 0 10px; }
.infopage__html ul, .infopage__html ol { margin: 0 0 10px; padding-left: 22px; }
.infopage__html a { color: var(--accent, #e94560); }
.infopage__html img { max-width: 100%; border-radius: 12px; }
.infopage__html blockquote {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent, #e94560);
  background: rgba(255, 255, 255, .04);
  border-radius: 0 10px 10px 0;
}

/* шаблоны страниц — класс контейнера (контентная логика не меняется) */
.infopage--tpl-wide .infopage__body { max-width: none; }
.infopage--tpl-landing .infopage__body { max-width: 760px; margin: 0 auto; }
.infopage--tpl-menu .infopage__body { max-width: 720px; }

/* SEO-текст главной ПОД сеткой товаров */
.home-content {
  margin: 28px 4px 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim, #9a9aa5);
}
.home-content__h1 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #f2f2f5);
  margin: 0 0 10px;
}
.home-content__img { width: 100%; border-radius: 16px; margin: 0 0 12px; display: block; }
.home-content__html a { color: var(--accent, #e94560); }
.home-content__html img { max-width: 100%; border-radius: 12px; }
.home-content__html p { margin: 0 0 10px; }

.infopage__who {
  font-weight: 700;
  font-size: 15px !important;
}

.infopage__sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim, #9a9aa5);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 18px 0 8px;
}

.profile-bonus {
  background: linear-gradient(135deg, var(--accent, #e94560), var(--accent-dim, #c22f4b));
  border-radius: 16px;
  padding: 18px 16px;
  margin: 6px 0 4px;
}

.profile-bonus__num { font-size: 30px; font-weight: 800; line-height: 1; }

.profile-bonus__lbl {
  font-size: 12px;
  opacity: .85;
  margin-top: 4px;
}

.profile-addr {
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  margin-bottom: 6px;
}

.profile-bm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 12px;
  padding: 12px;
  color: var(--text, #f2f2f5);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 6px;
  text-align: left;
}

.profile-bm:hover { border-color: var(--accent); }

.profile-bm__price { color: var(--accent); font-weight: 700; white-space: nowrap; }

.profile-logout { margin-top: 20px; width: 100%; }

/* [136] customer_account: ЛК по SOHO-паттерну (profile.html); классы
   profile-* выше сохранены (пины [113]). padding-bottom — bottom-nav
   не перекрывает контент/кнопки */
.acc { padding-bottom: 90px; }

.acc-card {
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 14px;
}

.acc-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #e94560), var(--accent-dim, #c22f4b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 10px;
}

.acc-name { font-size: 18px; font-weight: 700; }

.acc-phone {
  font-size: 13px;
  color: var(--text-dim, #9a9aa5);
  margin-top: 4px;
}

.acc-guest-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.acc-btn { padding: 10px 22px; border-radius: 12px; }

.acc-points__lbl { font-size: 13px; opacity: .9; margin-bottom: 6px; }

.acc-points__hint { font-size: 12px; opacity: .8; margin-top: 6px; }

/* [144] referral_program: экран «Пригласи друзей» в ЛК */
.acc-ref {
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc-ref__lbl { font-size: 13px; opacity: .9; }

.acc-ref__code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent, #f2c14e);
}

.acc-ref__hint { font-size: 12px; opacity: .8; }

.acc-ref__stats { font-size: 13px; opacity: .9; }

.acc-ref__row { display: flex; gap: 8px; }

.acc-ref__input { flex: 1; }

.acc-menu {
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 8px;
}

.acc-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .1));
  color: var(--text, #f2f2f5);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.acc-menu__item:last-child { border-bottom: none; }
.acc-menu__item:active { background: var(--card-2, #232330); }

.acc-menu__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--card-2, #232330);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
}

.acc-menu__text { flex: 1; }

.acc-menu__arrow { color: var(--text-dim, #9a9aa5); font-size: 18px; }

.acc-order {
  background: var(--card, #1c1c26);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.acc-order__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.acc-order__num { font-weight: 700; font-size: 14px; }

.acc-status {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.acc-status--new { background: rgba(255, 152, 0, .18); color: #ff9800; }

.acc-status--done {
  background: rgba(53, 199, 89, .18);
  color: var(--success, #35c759);
}

.acc-status--cancel {
  background: rgba(154, 154, 165, .18);
  color: var(--text-dim, #9a9aa5);
}

/* [153] birthday_lk: строка ДР в profile-card ЛК */
.acc-bday {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
}

.acc-bday__val { font-weight: 600; }

.acc-bday__hint {
  font-size: 12px;
  color: var(--text-dim, #9a9aa5);
}

.acc-bday__btn {
  background: none;
  border: 1px solid var(--accent, #e94560);
  border-radius: 14px;
  color: var(--accent, #e94560);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
}

.acc-bday__btn:disabled { opacity: .5; cursor: default; }

.acc-bday__btn--ghost {
  border-color: var(--text-dim, #9a9aa5);
  color: var(--text-dim, #9a9aa5);
}

.acc-bday__input {
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  border-radius: 10px;
  background: var(--bg-input, transparent);
  color: inherit;
  font-size: 14px;
  padding: 5px 10px;
}

.acc-bday__err {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--danger, #f44336);
}

.acc-order__info {
  font-size: 13px;
  color: var(--text-dim, #9a9aa5);
  margin-bottom: 6px;
}

.acc-order__total { font-weight: 700; color: var(--accent, #e94560); }

/* [251] my_orders_2: детали заказа в ЛК (тап по карточке) */
.acc-order__detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, .12));
  font-size: 13px;
}

.acc-od__item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}

.acc-od__sum { font-weight: 600; white-space: nowrap; }

.acc-od__mod {
  padding-left: 14px;
  font-size: 12px;
  color: var(--text-dim, #9a9aa5);
}

.acc-od__row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: var(--text-dim, #9a9aa5);
}

.acc-od__addr,
.acc-od__pay { padding: 4px 0; }

.acc-od__btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.acc-empty {
  text-align: center;
  color: var(--text-dim, #9a9aa5);
  font-size: 14px;
  padding: 24px 12px;
}

.acc-back {
  background: none;
  border: none;
  color: var(--accent, #e94560);
  font-size: 14px;
  font-weight: 600;
  padding: 0 0 10px;
  cursor: pointer;
}

.acc-addr { display: flex; align-items: center; gap: 10px; }

.acc-addr__text { flex: 1; }

.acc-addr__del {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: .7;
  flex: none;
}

.acc-addr__del:active { opacity: 1; }

.acc-form { display: grid; gap: 8px; }

/* ---------- bottom-nav ---------- */

.bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: flex;
  background: rgba(15, 15, 20, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line, rgba(255, 255, 255, .1));
  padding-bottom: env(safe-area-inset-bottom);
}

.bottomnav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  background: transparent;
  border: none;
  color: var(--text-dim, #9a9aa5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color .15s;
}

.bottomnav__item:hover { color: var(--text, #f2f2f5); }

.bottomnav__ic { font-size: 19px; line-height: 1; }

.bottomnav__badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 8px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent, #e94560);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ---------- TT-страница товара ---------- */

.overlay--ppage { z-index: 110; background: var(--bg, #0f0f14); }

.ppage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: var(--bg, #0f0f14);
  /* [175] storefront_menu_ux: вертикальный свайп у КРАЯ скролла листает
     товары (следующий/предыдущий), горизонтальный — закрывает карточку;
     вертикальный скролл контента нативный (pan-y), перехват — только
     preventDefault'ом на краях в setupPpageSwipe. Горизонтально
     скроллируемых блоков внутри ppage нет.
     ([159] до [175]: горизонталь листала товары, вертикаль — скролл) */
  touch-action: pan-y;
}

@media (min-width: 720px) {
  .overlay--ppage { align-items: center; justify-content: center; background: rgba(0, 0, 0, .75); }
  .ppage {
    width: min(480px, 94vw);
    height: auto;
    max-height: 92vh;
    border-radius: 20px;
    border: 1px solid var(--line, rgba(255, 255, 255, .1));
    overflow-y: auto;
  }
}

.ppage__hero {
  position: relative;
  height: 56vh;
  min-height: 300px;
  background: var(--card, #1c1c26);
  /* [178] table_card_ux_fixes: зонирование жестов — фото-зона отдаёт ВСЕ
     жесты в JS (вертикаль = листать товары, горизонталь = закрытие);
     pan-y на .ppage глушил вертикальные JS-жесты [175] (браузер
     забирал жест в нативный скролл). Остальная карточка — pan-y:
     вертикаль = нативный скролл, горизонталь = закрытие (setupPpageSwipe) */
  touch-action: none;
}

@media (min-width: 720px) {
  .ppage__hero { height: 340px; min-height: 0; }
}

.ppage__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ppage__hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(15, 15, 20, .85));
  pointer-events: none;
}

.ppage__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppage__placeholder svg { width: 96px; height: 96px; opacity: .35; }

.ppage__back {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}

/* action-rail справа (TikTok-style) */

.ppage__rail {
  position: absolute;
  right: 10px;
  bottom: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ppage__rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
}

.ppage__rail-ic {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
  transition: transform .15s;
}

.ppage__rail-btn:active .ppage__rail-ic { transform: scale(1.25); }

.ppage__rail-btn--on .ppage__rail-ic { filter: drop-shadow(0 0 10px var(--accent, #e94560)); }

.ppage__rail-count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  min-height: 13px;
}

/* нижний лист */

.ppage__sheet {
  position: relative;
  margin-top: -22px;
  background: var(--bg, #0f0f14);
  border-radius: 22px 22px 0 0;
  padding: 18px 16px 12px;
  z-index: 2;
}

/* [175] storefront_menu_ux: формат фото категории — фото БЕЗ обрезки
   (contain) на нейтральной подложке; контейнеру JS ставит aspect-ratio.
   Пустой photo_aspect → эти классы не ставятся, поведение cover прежнее.
   Специфичность выше базовых .card__img/.modal__img/.ppage__hero —
   фиксированные высоты (вкл. media ≥720px) уступают aspect-ratio. */
.card__img.img--aspect,
.modal__img.img--aspect,
.ppage__hero.img--aspect { height: auto; min-height: 0; }

.img--aspect img {
  object-fit: contain !important;
  background: var(--card, #1c1c26);
}

/* [175] жесты карточки (setupPpageSwipe): возврат на место и уход
   при горизонтальном закрытии */
.ppage--snap { transition: transform .18s ease; }
.ppage--leaving { transition: transform .2s ease-in, opacity .2s ease-in; opacity: 0; }

.ppage__name { font-size: 22px; font-weight: 800; line-height: 1.2; }

.ppage__meta {
  font-size: 13px;
  color: var(--text-dim, #9a9aa5);
  margin-top: 5px;
}

.ppage__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, #f2f2f5);
  margin: 12px 0 0;
  white-space: pre-wrap;
}

.variants--ppage { margin-top: 14px; }

/* футер: степпер + «В корзину» */

.ppage__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  /* [124] спейсер на высоту bottom-nav + safe-area: кнопка «В корзину»
     полностью видна и кликабельна над нижней навигацией */
  padding: 12px 16px calc(14px + var(--bottomnav-h) + env(safe-area-inset-bottom));
  background: var(--bg, #0f0f14);
  border-top: 1px solid var(--line, rgba(255, 255, 255, .08));
  z-index: 3;
}

@media (min-width: 720px) {
  /* [124] на десктопе TT-страница — центрированная карточка: спейсер не нужен */
  .ppage__footer { padding-bottom: 14px; }
}

.ppage__add { flex: 1; }

/* [178] table_card_ux_fixes П4: вертикальное фото (photo_aspect 3:4/9:16) —
   ГОРИЗОНТАЛЬНАЯ карточка: фото слева во всю высоту (contain), справа
   колонка (название/описание/варианты/добавки — скроллится), внизу
   степпер + «В корзину». Фото ~44% ширины (мобильная адаптация).
   Комментарии — position:absolute, из grid-потока вынесены. */
.ppage--h-split {
  display: grid;
  grid-template-columns: minmax(0, 44%) 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.ppage--h-split .ppage__hero {
  grid-row: 1 / 3;
  grid-column: 1;
  height: 100%;
  min-height: 0;
}
.ppage--h-split .ppage__sheet {
  grid-column: 2;
  grid-row: 1;
  overflow-y: auto;
  min-height: 0;
  margin-top: 0;
  border-radius: 0;
}
.ppage--h-split .ppage__footer { grid-column: 2; grid-row: 2; position: static; }

@media (min-width: 720px) {
  /* десктоп: h-split шире и с определённой высотой (grid-строки) */
  .ppage--h-split { width: min(860px, 96vw); height: min(92vh, 620px); }
}

/* лист комментариев поверх страницы */

.ppage__comments {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  height: 62%;
  background: var(--bg-2, #17171f);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .12));
  display: flex;
  flex-direction: column;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
}

.ppage__comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ppage__comments-title { font-size: 15px; font-weight: 700; }

.ppage__comments-close {
  background: var(--card-2, #232330);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  color: var(--text, #f2f2f5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
}

.ppage__comments-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ppage__comments-empty {
  color: var(--text-dim, #9a9aa5);
  font-size: 13px;
  text-align: center;
  padding: 24px 10px;
}

.ppage__comment { display: flex; gap: 9px; align-items: flex-start; }

.ppage__comment-ic { font-size: 15px; flex: none; }

.ppage__comment-text {
  font-size: 13px;
  line-height: 1.4;
  background: var(--card, #1c1c26);
  border-radius: 12px;
  padding: 8px 11px;
  word-break: break-word;
}

.ppage__comments-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ppage__comments-form .field__input { flex: 1; }

.ppage__comments-send {
  width: 44px;
  flex: none;
  padding: 0;
  font-size: 17px;
}

/* ============ [116] storefront_main_page (2026-08-24) ============ */

/* Переключатель темы в хедере */
.theme-toggle {
  flex: none;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.theme-toggle:active { transform: scale(.92); }

/* Поиск по меню */
.searchbar {
  position: relative;
  z-index: 40;
  background: var(--bg);
  padding: 8px 14px 10px;
}
.searchbar__box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 10px;
}
.searchbar__ic { color: var(--text-dim); flex: none; }
.searchbar__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 11px 0;
}
.searchbar__input::placeholder { color: var(--text-dim); }
.searchbar__input::-webkit-search-cancel-button { display: none; }
.searchbar__clear {
  flex: none;
  border: none;
  background: var(--card-2);
  color: var(--text-dim);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
}
.searchbar__meta {
  padding: 10px 4px 4px;
  color: var(--text-dim);
  font-size: 13px;
}

/* [124] результаты поиска В ПОТОКЕ (не оверлей): чипсы категорий
   остаются видимыми и кликабельными над результатами */
.search-results {
  position: static;
  z-index: auto;
  padding-bottom: 8px;
}

/* Слайдер акций */
.pslider {
  position: relative;
  padding: 2px 0 6px;
}
.pslider__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 14px 8px;
}
.pslider__track::-webkit-scrollbar { display: none; }
.pslide {
  flex: 0 0 min(78vw, 320px);
  scroll-snap-align: center;
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.pslide::after {
  content: '';
  position: absolute;
  right: -34px;
  top: -34px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
/* [117] слайд с фото акции: фон-картинка + затемнение для читаемости */
.pslide--img {
  background-size: cover;
  background-position: center;
}
.pslide--img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .58) 100%);
}
.pslide--img::after {
  display: none;
}
.pslide--img .pslide__badge,
.pslide--img .pslide__name,
.pslide--img .pslide__desc,
.pslide--img .pslide__date {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.pslide__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, .45);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
}
.pslide__name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  position: relative;
  text-align: right;
}
.pslide__desc {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  opacity: .92;
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pslide__date {
  margin-top: 6px;
  font-size: 12px;
  opacity: .85;
  position: relative;
  text-align: right;
}
.pslider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 6px;
}
.pslider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: var(--text-dim);
  opacity: .45;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.pslider__dot--active {
  opacity: 1;
  background: var(--accent);
  transform: scale(1.25);
}

/* Подвал: юр. информация + способы оплаты */
.footer {
  margin-top: 28px;
  padding: 20px 16px calc(20px + 84px); /* место над bottom-nav */
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}
.footer__pays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.footer__pay {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.footer__title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.footer__links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.footer__link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  padding: 0;
}
.footer__engine {
  margin-top: 12px;
  font-size: 12px;
  opacity: .7;
}

/* ================= [118] публичная «Доставка»: зоны + поиск НП ================= */
.dzone-search {
  margin: 18px 0 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card, #fff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.dzone-search__title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}
.dzone-search__input {
  width: 100%;
  border: 1px solid var(--line, rgba(0, 0, 0, .14));
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  background: var(--bg, #f6f7fb);
  color: inherit;
  box-sizing: border-box;
}
.dzone-matches { margin-top: 8px; }
.dzone__hint {
  font-size: 13px;
  opacity: .65;
  padding: 6px 2px;
}
.dzone-match { margin-bottom: 8px; }
.dzone-match__loc {
  font-weight: 700;
  font-size: 14px;
  margin: 6px 0 4px;
}
.dzones { margin-top: 6px; }
.dzone {
  border: 1px solid var(--line, rgba(0, 0, 0, .1));
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card, #fff);
}
.dzone__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.dzone__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}
.dzone__conds {
  font-size: 13px;
  margin-top: 4px;
  font-weight: 600;
  color: var(--accent, #e94560);
}
.dzone__desc {
  font-size: 13px;
  opacity: .8;
  margin-top: 4px;
}
.dzone__locs {
  font-size: 12px;
  opacity: .65;
  margin-top: 6px;
  line-height: 1.5;
}

/* ================= [119] SOHO-стиль: phone-float + копирайт подвала ================= */
.phone-float {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent, #e94560);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(233, 69, 96, .4);
  z-index: 90;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.phone-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(233, 69, 96, .5);
}
.phone-float svg { stroke: #fff; }
.footer__bottom {
  text-align: center;
  font-size: 12px;
  opacity: .55;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(127, 127, 127, .2));
}

/* [141] comments_loyalty: серверные комментарии — автор/★/дата/свой */
.ppage__comment-body { flex: 1; min-width: 0; }
.ppage__comment-meta {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 12px; margin-bottom: 2px;
}
.ppage__comment-author { font-weight: 600; }
.ppage__comment-stars { color: #f5a623; letter-spacing: 1px; }
.ppage__comment-date { color: var(--text-dim, #9a9aa5); }
.ppage__comment-own { color: var(--accent, #e94560); font-weight: 600; }
.ppage__comment-del {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-dim, #9a9aa5); font-size: 12px;
  text-decoration: underline;
}
.ppage__comment-del:hover { color: #e94560; }
.ppage__comments-rate { flex: none; width: 116px; }

/* ================= [156] venue_menu: hall-режим (зал/QR, ?hall=1) ==========
   View-only меню заведения: более крупная типографика и сетка — читается
   с расстояния и на планшете. Корзина, заказ и вход скрываются логикой
   app.js (state.hall), здесь только визуальная адаптация */
body.hall-mode .chip {
  height: 44px;
  padding: 0 20px;
  font-size: 16px;
}
body.hall-mode .section__title { font-size: 24px; }
body.hall-mode .grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
body.hall-mode .card__name { font-size: 16px; }
body.hall-mode .card__price { font-size: 17px; }
/* [156] цена на странице товара в hall (футера с «В корзину» там нет) */
.ppage__hall-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent, #e94560);
  margin: 4px 0 2px;
}