/* ============================================================
   SAVVY — витрина закупок ПК «Сабирин».
   Палитра и типографика утверждённого онбординга v2
   (business/marketing/onboarding-vitrina-savvy.html):
   ель #1F4E45, бумага #F4F0E6, солнце #F4C84A, Fraunces + IBM Plex.
   Мы кооператив, а не магазин: никаких «скидок», «акций», «распродаж».
   ============================================================ */

:root {
  --pine:#1F4E45;        /* главный тёмно-зелёный (логотип) */
  --pine-soft:#2C6357;
  --leaf:#3E9277;
  --leaf-mid:#54AE8E;
  --leaf-light:#6FC0A3;
  --mint:#E8F1EC;        /* фон логотипа */
  --sun:#F4C84A;         /* жёлтые окна */
  --sun-soft:#FBEBB9;
  --paper:#F4F0E6;       /* тёплая бумага */
  --card:#FFFDF8;
  --line:#E7E0CC;
  --ink:#22342E;
  --ink-muted:#5F6F66;
  --danger:#C2542F;
  --radius:18px;
  --radius-lg:28px;
  --pill:999px;
  --serif:'Fraunces', Georgia, serif;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --shadow-sm:0 2px 8px rgba(31,78,69,.07);
  --shadow-md:0 10px 30px rgba(31,78,69,.10);
  --shadow-lg:0 28px 70px rgba(31,78,69,.18);
  --topbar-h:132px;
}

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

html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  min-height:100vh;
  padding-bottom:96px; /* место под липкую полосу корзины */
}
/* тёплая бумага: мягкие пятна света */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 460px at 8% 4%, rgba(111,192,163,.14), transparent 70%),
    radial-gradient(640px 520px at 92% 96%, rgba(244,200,74,.12), transparent 70%);
}
img { max-width:100%; display:block; }
button, input, textarea, select { font:inherit; color:inherit; }
[hidden] { display:none !important; }

@keyframes fadeUp { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes pop { from{opacity:0;transform:scale(.96);} to{opacity:1;transform:none;} }

/* ===================== ЭКРАН ВХОДА ===================== */
.gate {
  position:fixed; inset:0; z-index:4000; overflow-y:auto;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(140deg, var(--pine), var(--pine-soft) 55%, var(--leaf));
  animation:fadeIn .3s ease;
}
.gate-card {
  width:440px; max-width:100%; margin:auto;
  background:var(--card); border-radius:var(--radius-lg);
  padding:40px 36px; box-shadow:var(--shadow-lg);
  animation:pop .4s cubic-bezier(.22,1,.36,1);
}
.gate-logo { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.mark {
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  background:var(--pine); color:var(--sun);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:20px;
}
.gate-logo .wordmark { font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:.5px; color:var(--pine); }
.gate-logo .sub { font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-muted); }
.gate h1 { font-family:var(--serif); font-size:27px; font-weight:600; line-height:1.15; margin-bottom:10px; }
.gate .lead { font-size:14px; color:var(--ink-muted); margin-bottom:24px; }
.field { display:block; margin-bottom:16px; }
.field > span { display:block; font-size:12.5px; font-weight:600; color:var(--ink-muted); margin-bottom:6px; }
.field input, .field textarea {
  width:100%; padding:14px 16px; border-radius:14px;
  border:1.5px solid var(--line); background:#FFFCF5;
  font-size:16px; transition:border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--leaf); background:#fff; }
.field textarea { resize:vertical; min-height:84px; }
.form-error {
  background:#FBEDE7; color:var(--danger); border:1px solid #EBC6B6;
  border-radius:14px; padding:11px 14px; font-size:13.5px; margin-bottom:16px;
}
.gate-note { margin-top:18px; font-size:12.5px; color:var(--ink-muted); text-align:center; line-height:1.5; }
.gate-note a { color:var(--leaf); font-weight:600; }

/* ===================== КНОПКИ ===================== */
.btn {
  border:none; border-radius:var(--pill); cursor:pointer;
  font-weight:600; font-size:15px; padding:14px 26px;
  background:var(--pine); color:#fff;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  min-height:46px;
}
.btn:hover { background:var(--pine-soft); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:default; }
.btn-block { width:100%; }
.btn-sun { background:var(--sun); color:var(--pine); }
.btn-sun:hover { background:#EFBE35; }
.btn-ghost {
  background:transparent; color:var(--pine);
  border:1.5px solid var(--line); font-size:14px; padding:10px 18px;
}
.btn-ghost:hover { border-color:var(--leaf); color:var(--leaf); background:#fff; }
.btn-quiet { background:none; border:none; color:var(--ink-muted); cursor:pointer; font-size:14px; font-weight:600; padding:10px 4px; }
.btn-quiet:hover { color:var(--pine); }

/* ===================== ШАПКА ===================== */
.topbar {
  position:sticky; top:0; z-index:60;
  background:rgba(244,240,230,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in {
  max-width:1220px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand .wordmark { font-family:var(--serif); font-size:20px; font-weight:700; color:var(--pine); letter-spacing:.5px; }
/* «FOOD» - лёгкий акцент рядом с SAVVY */
.wm-food { margin-left:6px; color:var(--leaf); font-weight:600; }
.search { flex:1; min-width:200px; position:relative; }
.search input {
  width:100%; padding:12px 16px 12px 42px; border-radius:var(--pill);
  border:1.5px solid var(--line); background:#FFFCF5; font-size:15px;
}
.search input:focus { outline:none; border-color:var(--leaf); background:#fff; }
.search .ico { position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.5; font-size:15px; }
.topbar .spacer { flex:1; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.who { font-size:13px; color:var(--ink-muted); white-space:nowrap; }

/* плашка временного пароля - напоминание поверх каталога, каталог не блокирует */
.tempbar {
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  background:#FBEDE7; border-bottom:1px solid #EBC6B6; color:var(--danger);
  padding:11px 24px; font-size:13.5px; font-weight:500; line-height:1.45; text-align:center;
}
.tempbar[hidden] { display:none; }
.tempbar a { color:var(--danger); font-weight:700; white-space:nowrap; }

/* пилюли категорий/подкатегорий */
.pill {
  border:1.5px solid var(--line); background:var(--card); color:var(--ink-muted);
  border-radius:var(--pill); padding:9px 17px; font-size:13.5px; font-weight:600;
  white-space:nowrap; cursor:pointer; transition:all .18s ease; min-height:40px;
}
.pill:hover { border-color:var(--leaf-light); color:var(--pine); }
.pill.on { background:var(--pine); border-color:var(--pine); color:#fff; }
.pill.muted { opacity:.5; }
.pill.muted:hover { opacity:.75; }
.pill .n { opacity:.6; font-family:var(--mono); font-size:12px; margin-left:5px; }

/* ===================== ФИЛЬТР ПО ЦИКЛУ ДОСТАВКИ ===================== */
.cycle-filter { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.chip {
  border:1.5px solid var(--line); background:var(--card); color:var(--ink-muted);
  border-radius:var(--pill); padding:9px 18px; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:all .18s ease; min-height:42px; display:inline-flex; align-items:center; gap:8px;
}
.chip::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .18s ease; }
.chip:hover { border-color:var(--leaf-light); color:var(--pine); }
.chip.on { background:var(--pine); border-color:var(--pine); color:#fff; }
.chip[data-cycle="weekly"]::before  { background:var(--leaf); }
.chip[data-cycle="biweekly"]::before{ background:var(--sun); }
.chip[data-cycle="monthly"]::before { background:var(--leaf-light); }
.chip.on::before { background:rgba(255,255,255,.9); }

/* ===================== LAYOUT КАТАЛОГА: меню слева, товары справа ===================== */
.catalog-layout { display:flex; align-items:flex-start; gap:24px; }
.cat-sidebar { flex:0 0 232px; position:sticky; top:calc(var(--topbar-h) - 30px); align-self:flex-start; }
.cat-sidebar-head { font-family:var(--serif); font-size:19px; font-weight:600; color:var(--pine); padding:2px 12px 12px; }
.cat-nav { display:flex; flex-direction:column; gap:2px; max-height:72vh; overflow-y:auto; scrollbar-width:thin; padding-right:4px; }
.cat-nav-item {
  display:flex; align-items:center; gap:11px; text-align:left; width:100%;
  background:none; border:none; border-radius:12px; padding:9px 12px; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--ink); transition:background .15s ease, color .15s ease;
}
.cat-nav-item .ic { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--mint); flex:none; }
.cat-nav-item:hover { background:var(--mint); }
.cat-nav-item.on { background:var(--pine); color:#fff; font-weight:600; }
.cat-nav-item.all { font-weight:600; color:var(--pine); }
.cat-nav-item.all.on { color:#fff; }
.cat-main { flex:1 1 auto; min-width:0; }
.cat-main-head { margin-bottom:18px; }
.cat-main-head h1 { font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.1; margin-bottom:5px; }
.cat-main-head p { font-size:14px; color:var(--ink-muted); max-width:60ch; }

/* ===================== ПОМОЩНИК ПО КОРЗИНЕ ===================== */
.assistant {
  display:flex; gap:16px; align-items:flex-start;
  background:linear-gradient(135deg, var(--mint), #F3F7F1);
  border:1px solid #D8E7DE; border-radius:var(--radius-lg);
  padding:18px 22px; margin-bottom:22px;
}
.assistant[hidden] { display:none; }
.asst-mark {
  flex:none; width:52px; height:52px; border-radius:15px;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  background:#fff; box-shadow:var(--shadow-sm);
}
.asst-main { flex:1; min-width:0; }
.asst-hi { font-family:var(--serif); font-size:19px; font-weight:600; color:var(--pine); line-height:1.2; }
.asst-note { font-size:14px; color:var(--ink-muted); margin-top:4px; line-height:1.5; }
.asst-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:13px; }
.asst-actions .btn, .asst-actions .btn-ghost { min-height:42px; padding:10px 18px; font-size:14px; }
.asst-actions:empty { display:none; }

/* мини-форма размера семьи */
.asst-family { margin-top:14px; padding-top:14px; border-top:1px dashed #C9DCD1; }
.asst-family[hidden] { display:none; }
.asst-family-q { font-size:14px; font-weight:600; color:var(--pine); margin-bottom:12px; }
.asst-steppers { display:flex; gap:22px; flex-wrap:wrap; margin-bottom:14px; }
.asst-step { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-muted); }
.asst-step span { min-width:62px; }
.asst-step b { font-family:var(--mono); font-size:17px; color:var(--ink); min-width:22px; text-align:center; }
.asst-step button {
  width:34px; height:34px; border-radius:10px; border:1.5px solid var(--line);
  background:#fff; color:var(--pine); font-size:18px; font-weight:700; cursor:pointer; line-height:1;
  transition:border-color .15s, background .15s;
}
.asst-step button:hover { border-color:var(--leaf); background:var(--mint); }
.asst-excluded { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.asst-excl-label { font-size:13px; color:var(--ink-muted); }
.excl-chip {
  border:1.5px solid var(--line); background:#fff; color:var(--ink-muted);
  border-radius:var(--pill); padding:6px 13px; font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s ease;
}
.excl-chip:hover { border-color:var(--leaf-light); }
.excl-chip[aria-pressed="true"] { background:var(--danger); border-color:var(--danger); color:#fff; }
.asst-family-act { display:flex; gap:10px; flex-wrap:wrap; }

/* ===================== БАННЕР НОВОСТЕЙ / ВАЖНОГО ===================== */
.promo {
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:linear-gradient(120deg, var(--pine), var(--pine-soft) 60%, var(--leaf));
  color:#fff; border-radius:var(--radius-lg); padding:18px 22px; margin-bottom:22px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.promo:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.promo::after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(244,200,74,.16); right:-50px; top:-70px; }
.promo-body { flex:1; min-width:0; position:relative; z-index:1; }
.promo-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--sun); margin-bottom:5px; }
.promo-title { font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.2; margin-bottom:3px; }
.promo-text { font-size:13.5px; opacity:.9; line-height:1.4; }
.promo-arrow { flex:none; font-size:22px; opacity:.85; position:relative; z-index:1; }

/* ===================== ПРИЛАВКИ (секции категорий) ===================== */
.cat-section { margin-bottom:26px; }
.cat-section:last-child { margin-bottom:6px; }
.cat-section-title { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); margin-bottom:13px; }

/* ===================== ПЛИТКИ КАТЕГОРИЙ (стиль Яндекс.Лавки) ===================== */
/* Пастельная плашка, вырезанный продукт (PNG без фона) справа, тёмное название слева. */
.cat-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
.cat-tile {
  position:relative; text-align:left; cursor:pointer; overflow:hidden;
  border:none; border-radius:var(--radius); padding:0;
  aspect-ratio:1 / 1; background:#fff;
  display:block;
  box-shadow:0 3px 12px rgba(31,78,69,.10);
  transition:transform .18s ease, box-shadow .2s ease;
  animation:fadeUp .4s ease both;
}
.cat-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
/* фото на всю плитку (квадрат = квадрат, без обрезки) */
.cat-photo { position:absolute; inset:0; z-index:0; display:block; }
.cat-img {
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:center; transition:transform .25s ease;
}
.cat-tile:hover .cat-img { transform:scale(1.04); }
.cat-fallback {
  position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  font-size:44px; opacity:.5;
}
/* подпись поверх фото, верхний левый угол */
.cat-label { position:absolute; z-index:2; top:12px; left:14px; right:14px; display:flex; flex-direction:column; }
.cat-nm {
  font-family:var(--serif); font-size:16px; font-weight:600; line-height:1.16; max-width:88%;
  color:var(--ink); text-shadow:0 1px 2px rgba(255,255,255,.45);
}
.cat-cyc {
  margin-top:6px; font-size:11px; font-weight:600; color:var(--ink-muted);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  text-shadow:0 1px 2px rgba(255,255,255,.45);
}
.cat-cyc::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--leaf-light); flex:none; }
.cat-tile[data-cycle="weekly"]  .cat-cyc::before { background:var(--leaf); }
.cat-tile[data-cycle="biweekly"] .cat-cyc::before { background:#E8A44C; }
/* тёмный фон картинки — подпись белым */
.cat-tile[data-ink="white"] .cat-nm { color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.cat-tile[data-ink="white"] .cat-cyc { color:rgba(255,255,255,.92); text-shadow:0 1px 4px rgba(0,0,0,.55); }
/* «Скоро»: маленький ярлык в углу, плашка чуть бледнее */
.cat-tile.empty { opacity:.96; }
.cat-tile.empty::after {
  content:'Скоро'; position:absolute; top:11px; right:11px; z-index:3;
  background:rgba(255,255,255,.82); color:var(--ink-muted);
  font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--pill);
}

/* ===================== КАТЕГОРИЯ (уровень 2) ===================== */
.crumbs { display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:14px; flex-wrap:wrap; }
.crumb-link { background:none; border:none; padding:0; cursor:pointer; color:var(--leaf); font-weight:600; }
.crumb-link:hover { color:var(--pine); text-decoration:underline; }
.crumb-sep { color:var(--ink-muted); opacity:.6; }
.crumb-cur { color:var(--ink-muted); }

.group-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.group-head h1 { font-family:var(--serif); font-size:27px; font-weight:600; line-height:1.1; }
.cyc-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--mint); color:var(--pine); border-radius:var(--pill);
  padding:6px 14px; font-size:12.5px; font-weight:600;
}
.cyc-badge::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--leaf-light); }
.cyc-badge[data-cycle="weekly"]::before  { background:var(--leaf); }
.cyc-badge[data-cycle="biweekly"]::before { background:var(--sun); }

.sub-pills { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:16px; scrollbar-width:thin; }
.section-head--sub { margin-bottom:16px; }

.soon {
  text-align:center; padding:52px 24px; background:var(--card);
  border:1px dashed var(--line); border-radius:var(--radius-lg); color:var(--ink-muted);
}
.soon .soon-ic { font-size:38px; display:block; margin-bottom:12px; }
.soon b { display:block; font-family:var(--serif); font-size:20px; color:var(--pine); margin-bottom:8px; }

/* ===================== СОДЕРЖИМОЕ ===================== */
.wrap { position:relative; z-index:1; max-width:1220px; margin:0 auto; padding:26px 24px 40px; }
.view { animation:fadeIn .3s ease; }

.hero {
  background:linear-gradient(135deg, var(--pine), var(--pine-soft));
  color:#fff; border-radius:var(--radius-lg); padding:30px 34px;
  margin-bottom:26px; position:relative; overflow:hidden;
}
.hero::after {
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(244,200,74,.16); right:-60px; top:-70px;
}
.hero .eyebrow { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--sun); font-weight:600; margin-bottom:8px; }
.hero h1 { font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.14; margin-bottom:10px; max-width:20ch; }
.hero p { font-size:14.5px; opacity:.86; max-width:62ch; position:relative; z-index:1; }

.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.section-head h2 { font-family:var(--serif); font-size:23px; font-weight:600; }
.section-head .muted { font-size:13.5px; color:var(--ink-muted); }

/* ===================== СЕТКА ТОВАРОВ ===================== */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(224px, 1fr)); gap:18px; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation:fadeUp .4s ease both;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--leaf-light); }
.thumb {
  position:relative; aspect-ratio:4/3; background:var(--mint);
  cursor:pointer; border:none; padding:0; width:100%; display:block; overflow:hidden;
}
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb .ph {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:34px; color:var(--leaf); background:var(--mint);
}
.cycle-tag {
  position:absolute; left:10px; top:10px; z-index:2;
  background:rgba(255,253,248,.94); color:var(--pine-soft);
  border-radius:var(--pill); padding:4px 11px; font-size:11px; font-weight:600;
}
.card-body { padding:14px 16px 8px; flex:1; display:flex; flex-direction:column; }
.card .name {
  font-size:15px; font-weight:600; line-height:1.32; margin-bottom:10px;
  background:none; border:none; padding:0; text-align:left; cursor:pointer; color:inherit;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card .name:hover { color:var(--leaf); }
/* плашка экономии: выгода идёт ПЕРЕД ценой (принцип «ценность раньше цены») */
.benefit {
  align-self:flex-start; background:var(--sun-soft); color:#7A5B00;
  border-radius:var(--pill); padding:4px 11px; font-size:12px; font-weight:600; margin-bottom:8px;
}
.price-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; }
.price { font-family:var(--mono); font-size:19px; font-weight:600; color:var(--pine); }
.unit { font-size:12px; color:var(--ink-muted); }
.market { font-family:var(--mono); font-size:12.5px; color:var(--ink-muted); text-decoration:line-through; }
.card-foot { padding:10px 16px 16px; }

/* степпер количества */
.stepper { display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--mint); border-radius:var(--pill); padding:4px; }
.stepper button {
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--card); color:var(--pine); font-size:19px; font-weight:600;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.stepper button:hover { background:#fff; color:var(--leaf); }
.stepper .qty { font-family:var(--mono); font-size:14px; font-weight:600; color:var(--pine); min-width:66px; text-align:center; }
.add-btn { width:100%; }

.empty { text-align:center; color:var(--ink-muted); padding:56px 16px; font-size:15px; }
.empty b { display:block; font-family:var(--serif); font-size:20px; color:var(--ink); margin-bottom:6px; font-weight:600; }
.loading { text-align:center; color:var(--ink-muted); padding:56px 16px; }

/* ===================== ЛИПКАЯ ПОЛОСА КОРЗИНЫ ===================== */
.cartbar {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--pine); color:#fff; box-shadow:0 -8px 30px rgba(31,78,69,.22);
  animation:fadeUp .3s ease;
}
.cartbar-in {
  max-width:1220px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.cartbar .sum { font-family:var(--mono); font-size:18px; font-weight:600; }
.cartbar .meta { font-size:12.5px; opacity:.82; }
.cartbar .saved { color:var(--sun); font-weight:600; }
.cartbar .btn { margin-left:auto; }

/* ===================== КОРЗИНА ===================== */
.panel {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:20px;
}
.panel h3 { font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:4px; }
.panel .panel-sub { font-size:13px; color:var(--ink-muted); margin-bottom:18px; }
.cart-group { margin-bottom:26px; }
.cart-group:last-child { margin-bottom:0; }
.group-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.group-head .dot { width:9px; height:9px; border-radius:50%; background:var(--leaf); flex-shrink:0; }
.group-head h4 { font-size:14px; font-weight:600; }
.group-head .muted { font-size:12.5px; color:var(--ink-muted); }

.line { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.line:last-child { border-bottom:none; }
.line .pic { width:60px; height:60px; border-radius:14px; overflow:hidden; background:var(--mint); flex-shrink:0; position:relative; }
.line .pic img { width:100%; height:100%; object-fit:cover; }
.line .pic .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--leaf); font-size:20px; }
.line .info { flex:1; min-width:0; }
.line .info .nm { font-size:14.5px; font-weight:600; }
.line .info .sub { font-size:12.5px; color:var(--ink-muted); }
.line .info .ben { font-size:12px; color:#7A5B00; background:var(--sun-soft); border-radius:var(--pill); padding:2px 9px; display:inline-block; margin-top:4px; }
.line .ctl { display:flex; align-items:center; gap:14px; }
.line .lsum { font-family:var(--mono); font-size:15px; font-weight:600; min-width:82px; text-align:right; }
.line .drop { background:none; border:none; cursor:pointer; color:var(--ink-muted); font-size:18px; padding:6px 8px; border-radius:10px; }
.line .drop:hover { color:var(--danger); background:#FBEDE7; }

.totals { border-top:2px solid var(--line); margin-top:8px; padding-top:18px; }
.trow { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:6px 0; font-size:14.5px; }
.trow .v { font-family:var(--mono); font-weight:600; }
.trow.grand { font-size:19px; padding-top:12px; }
.trow.grand .v { font-size:23px; color:var(--pine); }
.trow.save { color:#7A5B00; }
.trow.save .v { color:#7A5B00; }
.notice {
  background:var(--mint); border-radius:16px; padding:14px 16px;
  font-size:13px; color:var(--pine-soft); margin-top:16px; line-height:1.5;
}
.notice b { font-weight:600; }
/* Предупреждение (заказ без резерва: денег на счёте не хватило) - солнечный фон,
   чтобы «пополните счёт» не читалось как обычная спокойная подсказка. */
.notice.warn { background:var(--sun-soft); border:1px solid var(--sun); color:#6B5200; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

/* ===================== ОФОРМЛЕНИЕ ===================== */
.dates { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:18px; }
.date-card {
  border:1.5px solid var(--line); background:#FFFCF5; border-radius:18px;
  padding:13px 16px; min-width:112px; cursor:pointer; text-align:left;
  transition:all .18s ease; flex-shrink:0;
}
.date-card:hover { border-color:var(--leaf-light); }
.date-card.on { border-color:var(--pine); background:var(--mint); }
.date-card .dow { font-size:11.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-muted); }
.date-card .dnum { font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.2; }
.date-card .dmon { font-size:12.5px; color:var(--ink-muted); }

.windows { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.win {
  border:1.5px solid var(--line); background:#FFFCF5; border-radius:var(--pill);
  padding:11px 20px; font-size:14px; font-weight:600; cursor:pointer; min-height:44px;
  transition:all .18s ease; color:var(--ink);
}
.win:hover { border-color:var(--leaf-light); }
.win.on { border-color:var(--pine); background:var(--pine); color:#fff; }
.win .cap { display:block; font-size:11.5px; font-weight:400; opacity:.7; }
.cutoff { font-size:12.5px; color:var(--ink-muted); margin-top:10px; }

.summary-line { display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:5px 0; }
.summary-line .v { font-family:var(--mono); font-weight:600; }
.summary-line.fee-line .k, .summary-line.fee-line .v { color:var(--pine); }

/* Шаг членства на чекауте (виден только не-пайщику/lead) */
.member-step { margin-top:16px; padding:16px 18px; border:1.5px solid var(--sun); border-radius:14px; background:var(--sun-soft); }
.member-step .ms-head { font-family:var(--serif); font-size:16px; font-weight:600; color:#6B5200; margin-bottom:6px; }
.member-step .ms-sub { font-size:13px; color:#6B5200; line-height:1.5; margin-bottom:12px; }
.member-step .ms-consent { display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.member-step .ms-consent input { margin-top:2px; width:18px; height:18px; accent-color:var(--pine); flex-shrink:0; cursor:pointer; }
.member-step .ms-consent span { font-size:13px; color:var(--ink); line-height:1.5; }
.member-step .ms-consent a { color:var(--pine); font-weight:600; }

/* ===================== ГОТОВО ===================== */
.done { text-align:center; padding:44px 24px; }
.done .tick {
  width:76px; height:76px; border-radius:50%; margin:0 auto 20px;
  background:var(--mint); color:var(--leaf);
  display:flex; align-items:center; justify-content:center; font-size:36px;
}
.done h2 { font-family:var(--serif); font-size:27px; font-weight:600; margin-bottom:10px; }
.done .oid { font-family:var(--mono); font-size:14px; color:var(--ink-muted); margin-bottom:20px; }
.done .facts { display:inline-flex; gap:28px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; }
.done .fact .k { font-size:12px; color:var(--ink-muted); }
.done .fact .v { font-family:var(--mono); font-size:21px; font-weight:600; color:var(--pine); }
.done .fact.save .v { color:#7A5B00; }

/* ===================== МОИ ЗАКАЗЫ ===================== */
.order {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 24px; margin-bottom:16px; animation:fadeUp .35s ease both;
}
.order-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.order .oid { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--pine); }
.order .odate { font-size:12.5px; color:var(--ink-muted); }
/* статусы заказа: каждый цвет говорит сам за себя, без легенды */
.status { border-radius:var(--pill); padding:6px 14px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.status.st-wait { background:#FBEDE7; color:var(--danger); }
.status.st-hold { background:var(--sun-soft); color:#7A5B00; }
.status.st-work { background:var(--mint); color:var(--pine-soft); }
.status.st-done { background:var(--pine); color:#fff; }
.status.st-off  { background:#EDEAE0; color:var(--ink-muted); }

/* трекер этапов заказа: Принят → Собираем → Доставлен */
.order-track { display:flex; align-items:flex-start; margin:2px 0 18px; }
.ot-step { display:flex; flex-direction:column; align-items:center; gap:7px; flex-shrink:0; width:84px; }
.ot-dot {
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; background:#fff; color:var(--ink-muted);
  border:2px solid var(--line); transition:all .3s;
}
.ot-lbl { font-size:12px; font-weight:600; color:var(--ink-muted); text-align:center; line-height:1.3; }
.ot-bar { flex:1; height:3px; background:var(--line); border-radius:2px; margin:15px -10px 0; }
.ot-step.done .ot-dot { background:var(--leaf); border-color:var(--leaf); color:#fff; }
.ot-step.done .ot-lbl { color:var(--pine); }
.ot-bar.done { background:var(--leaf); }
.ot-step.current .ot-dot { background:#fff; border-color:var(--leaf); color:var(--leaf); box-shadow:0 0 0 4px var(--mint); }
.ot-step.current .ot-lbl { color:var(--pine); font-weight:700; }
.order-cancelled .ot-dot { background:#EDEAE0; border-color:var(--line); color:var(--ink-muted); box-shadow:none; }
.order-cancelled .ot-lbl { color:var(--ink-muted); }
.order-cancelled .ot-bar { background:var(--line); }

.order-facts { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:14px; }
.order-facts .fact .k { font-size:11.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.6px; }
.order-facts .fact .v { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--pine); }
/* дата доставки - обычным шрифтом: моноширинный уместен для сумм, не для слов */
.order-facts .fact.plain .v { font-family:var(--sans); font-size:15px; font-variant-numeric:tabular-nums; }
.order-facts .fact.save .v { color:#7A5B00; }
.order-note {
  background:var(--mint); border-radius:14px; padding:12px 14px;
  font-size:13px; color:var(--pine-soft); line-height:1.5; margin-bottom:10px;
}
.order-toggle { padding:8px 0; }
.order-items { border-top:1px solid var(--line); margin-top:4px; padding-top:6px; }
.oline { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.oline:last-child { border-bottom:none; }
.oline .nm { font-size:14px; font-weight:600; }
.oline .sub { font-family:var(--mono); font-size:12.5px; color:var(--ink-muted); }
.oline .lsum { font-family:var(--mono); font-size:14.5px; font-weight:600; white-space:nowrap; }
.order-items .muted { color:var(--ink-muted); font-size:13.5px; padding:8px 0; }
.order-items .loading { padding:18px 0; }

/* ===================== МОДАЛКА ТОВАРА ===================== */
.modal-back {
  position:fixed; inset:0; z-index:3000; background:rgba(31,78,69,.45);
  backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto; animation:fadeIn .25s ease;
}
.modal {
  background:var(--card); border-radius:var(--radius-lg); width:760px; max-width:100%;
  margin:auto; overflow:hidden; box-shadow:var(--shadow-lg);
  animation:pop .35s cubic-bezier(.22,1,.36,1); position:relative;
  display:grid; grid-template-columns:300px 1fr;
}
.modal .m-pic { background:var(--mint); position:relative; min-height:260px; }
.modal .m-pic img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.modal .m-pic .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:52px; color:var(--leaf); }
.modal .m-body { padding:28px 30px; }
.modal .m-cat { font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px; }
.modal h3 { font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.2; margin-bottom:12px; }
.modal .m-desc { font-size:14px; color:var(--ink-muted); line-height:1.6; margin:14px 0 18px; }
.modal .m-close {
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
  border:none; background:rgba(255,253,248,.92); color:var(--ink-muted);
  font-size:19px; cursor:pointer; z-index:3; display:flex; align-items:center; justify-content:center;
}
.modal .m-close:hover { background:#fff; color:var(--ink); }
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px; margin-bottom:18px; }
.fact-box { background:var(--mint); border-radius:14px; padding:10px 13px; }
.fact-box .k { font-size:11px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.6px; }
.fact-box .v { font-size:14px; font-weight:600; }
.nutri { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.nutri span {
  font-family:var(--mono); font-size:12px; background:#FFFCF5;
  border:1px solid var(--line); border-radius:var(--pill); padding:5px 11px; color:var(--ink-muted);
}

/* ===================== ТОСТ ===================== */
.toast {
  position:fixed; left:50%; transform:translateX(-50%); bottom:104px; z-index:5000;
  background:var(--pine); color:#fff; border-radius:var(--pill);
  padding:12px 22px; font-size:14px; font-weight:500;
  box-shadow:var(--shadow-md); animation:fadeUp .3s ease; max-width:92vw; text-align:center;
}

/* ===================== АДАПТИВ ===================== */
@media (max-width:860px) {
  /* Шапка липкая, поэтому на телефоне её ужимаем: имя пайщика прячем,
     кнопки и поиск делаем компактнее - иначе половина экрана уходит на хедер. */
  .topbar-in { padding:10px 16px; gap:10px; }
  .brand .sub { display:none; }
  .brand .wordmark { font-size:17px; }
  .mark { width:36px; height:36px; font-size:17px; border-radius:11px; }
  .who { display:none; }
  .topbar-actions { gap:6px; }
  .topbar-actions .btn { padding:8px 14px; font-size:13px; min-height:40px; }
  .btn-quiet { font-size:13px; padding:8px 4px; }
  .search { order:3; flex-basis:100%; }
  .search input { padding:10px 14px 10px 38px; font-size:15px; }
  .search .ico { left:13px; font-size:14px; }
  .pill { padding:8px 14px; font-size:13px; }
  .wrap { padding:20px 16px 30px; }
  /* Каталог: на телефоне меню категорий уезжает наверх горизонтальной лентой */
  .catalog-layout { flex-direction:column; gap:14px; }
  .cat-sidebar { position:static; flex:none; width:100%; }
  .cat-sidebar-head { padding:0 2px 8px; font-size:17px; }
  .cat-nav { flex-direction:row; overflow-x:auto; max-height:none; gap:8px; padding-bottom:6px; }
  .cat-nav-item { flex:none; white-space:nowrap; border:1.5px solid var(--line); border-radius:var(--pill); padding:8px 14px; }
  .cat-nav-item .ic { display:none; }
  .cat-main-head h1 { font-size:22px; }
  .cat-tiles { grid-template-columns:1fr 1fr; gap:10px; }
  .cat-tile { min-height:118px; padding:13px 14px; }
  .cat-nm { font-size:14.5px; max-width:66%; }
  .grid { grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:12px; }
  .panel { padding:20px 18px; border-radius:22px; }
  .modal { grid-template-columns:1fr; }
  .modal .m-pic { min-height:200px; aspect-ratio:16/10; }
  .modal .m-body { padding:22px 20px; }
  .line { flex-wrap:wrap; }
  .line .ctl { width:100%; justify-content:space-between; }
  .order { padding:18px 16px; border-radius:22px; }
  .order-facts { gap:16px 20px; }
  .order-facts .fact .v { font-size:15px; }
  .cartbar-in { padding:10px 16px; gap:12px; }
  .cartbar .btn { width:100%; margin-left:0; }
}
@media (max-width:420px) {
  .gate-card { padding:30px 22px; }
  .grid { grid-template-columns:1fr 1fr; }
  .card .name { font-size:14px; }
  .price { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}