/* Из Морозилки — витрина. Токены и вёрстка. Контракт: DESIGN.md */

:root {
  /* палитра */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #e7ebf0;
  --photo: #f3f4f6;          /* подложка фото товара: светлый нейтральный, как у Самоката */
  --ink: #101724;
  --muted: #5a6a7d;
  --edge: #d7dde6;
  --edge-ctl: #7c8796;   /* граница интерактивных полей: 3.64:1 к белому, 3.28:1 к фону (WCAG 1.4.11) */
  --accent: #1b32de;
  --accent-press: #1526b0;
  --frost: #c9f227;
  --on-dark: #fff;        /* текст на ink и accent */
  --muted-dark: #b8c2cf;  /* приглушённый текст на ink: 8.1:1 */
  --bad: #b3132b;         /* ошибка формы */
  --bad-bg: #fdf2f4;

  /* кегли */
  --fs-display: clamp(28px, 1.4rem + 2.2vw, 44px);
  --fs-title: 24px;
  --fs-price: 18px;
  --fs-body: 15px;
  --fs-caption: 13px;

  /* отступы */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* форма */
  --r-1: 12px;
  --r-2: 22px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 23, 36, .06);
  --sh-2: 0 12px 28px -12px rgba(16, 23, 36, .28);

  /* движение */
  --t-micro: 150ms;
  --t-enter: 420ms;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --m-dist: 20px;

  --wrap: 1720px; /* было 1360: на широких экранах поля по краям были слишком большие (владелец, 2026-10-08) */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* поле прокрутки = липкая шапка (69px) + запас: раздел не должен вставать вплотную */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--s8) + var(--s6)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.45 Rubik, system-ui, sans-serif;
  font-feature-settings: "tnum" 0;
}

h1, h2, h3 { margin: 0; font-family: Geologica, Rubik, system-ui, sans-serif; font-weight: 800; letter-spacing: -.015em; line-height: 1.08; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: var(--fs-body); font-weight: 700; font-family: Rubik, system-ui, sans-serif; letter-spacing: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-press); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s4); }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.num { font-variant-numeric: tabular-nums; }
.caption { font-size: var(--fs-caption); color: var(--muted); }

/* ─────────── шапка ─────────── */

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--edge);
}
.hdr__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: Geologica, sans-serif; font-weight: 800; font-size: var(--fs-price);
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  min-height: 44px;
}
/* знак — одна снежинка цветом бренда, без синей плашки (2026-10-07, по просьбе
   владельца). 26px при кегле 18: лучи выходят чуть выше прописных и ниже
   строки, знак держит высоту слова, обводка 2.4 — вес, сравнимый со штрихом
   Geologica 800 */
.logo__mark { display: grid; place-items: center; color: var(--accent); flex: none; }
.logo__mark svg { width: 26px; height: 26px; display: block; }
.logo:hover { color: var(--accent); }

.search { position: relative; display: flex; }
.search svg {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.search input {
  width: 100%; height: 44px;
  padding: 0 var(--s4) 0 40px;
  font: inherit; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge-ctl); border-radius: var(--r-pill);
  transition: background var(--t-micro) var(--e-out), border-color var(--t-micro) var(--e-out);
}
.search input::placeholder { color: var(--muted); }
.search input:hover { background: var(--surface-2); }
.search input:focus { background: var(--surface); border-color: var(--accent); outline: none; }
.search input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* «Избранное», «Заказы», «Войти» — ссылки, но выглядят и работают как
   кнопки шапки: без подчёркивания и тем же чернильным цветом, что «Куда везём?» */
.hbtn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 44px; padding-inline: var(--s4);
  background: var(--bg); border: 1px solid var(--edge-ctl); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap; font-weight: 500;
  color: var(--ink); text-decoration: none;
  transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out);
}
.hbtn:hover { background: var(--surface-2); color: var(--ink); }
/* ссылки шапки (Избранное, Заказы, Войти) — синие, как остальные ссылки сайта,
   но без подчёркивания; «Куда везём?» — кнопка, остаётся тёмной */
a.hbtn, a.hbtn:hover { color: var(--accent); }
.hbtn:active { background: var(--edge); }
.hbtn svg { width: 18px; height: 18px; flex: none; }
.hbtn--addr { max-width: 260px; }
.hbtn--addr b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbtn--addr .caption { color: var(--muted); }

.cart-btn {
  background: var(--accent); color: var(--on-dark); border-color: var(--accent);
  font-weight: 500;
}
.cart-btn:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-dark); }
.cart-btn:active { background: var(--accent-press); }
.cart-btn__count {
  min-width: 22px; height: 22px; padding-inline: 6px;
  display: grid; place-items: center;
  background: var(--frost); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-btn.is-bump { animation: bump var(--t-enter) var(--e-out); }
@keyframes bump {
  0% { transform: scale(1); }
  38% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* шапка на узких: поиск уезжает во вторую строку, адрес — в третью */
@media (max-width: 999px) {
  .hdr__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo addr cart" "search search search";
    gap: var(--s2) var(--s3);
  }
  .logo { grid-area: logo; }
  .addr:not(.me) { grid-area: addr; justify-self: end; min-width: 0; }
  .me { grid-area: cart; justify-self: end; }
  .search { grid-area: search; }
  .hbtn--addr { max-width: 100%; }
}
@media (max-width: 600px) {
  /* три полосы в шапке съедали четверть первого экрана: адрес возвращается
     в первую строку и укорачивается до района, поиск остаётся во второй */
  /* на 390 три кнопки в одной полосе не помещались, и адрес наезжал на
     логотип: «ИзМорозил». Полос по-прежнему две, но вторую делят поиск и адрес */
  .hdr__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo cart" "search addr";
    padding-block: var(--s2);
  }
  .addr { justify-self: end; }
  .cart-btn { justify-self: end; }
  .hbtn--addr { max-width: 100%; padding-inline: var(--s3); }
  .hbtn--addr b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cart-btn__t { display: none; }
  .cart-btn { padding-inline: var(--s3); }
  .logo { font-size: var(--fs-body); }
}

/* адрес доставки: details/summary, без js */
.addr { position: relative; }
.addr > summary { list-style: none; }
.addr > summary::-webkit-details-marker { display: none; }
.addr > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.addr__pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
  width: 288px; padding: var(--s4);
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-2); box-shadow: var(--sh-2);
}
.addr__zones { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.addr__zones button {
  min-height: 44px; padding: var(--s2) var(--s3); font: inherit; font-size: var(--fs-caption);
  background: var(--bg); border: 1px solid var(--edge-ctl); border-radius: var(--r-pill);
  cursor: pointer; transition: background var(--t-micro) var(--e-out);
}
.addr__zones button:hover { background: var(--surface-2); }
.addr__zones button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }

.col { display: grid; gap: var(--s6); align-content: start; min-width: 0; }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: var(--s5); translate: -50% 0;
  max-width: min(92vw, 420px); padding: var(--s3) var(--s4);
  background: var(--ink); color: var(--on-dark); border-radius: var(--r-pill);
  font-size: var(--fs-caption); box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-out);
}
.toast.is-on { opacity: 1; transform: none; }

/* ─────────── раскладка страницы ─────────── */

.layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 320px;
  gap: var(--s5);
  align-items: start;
  padding-block: var(--s5) var(--s8);
}
.layout--wide { grid-template-columns: 236px minmax(0, 1fr); }

.cat { position: sticky; top: 84px; }
.cat__title { font-size: var(--fs-caption); text-transform: none; color: var(--muted); padding: 0 var(--s3) var(--s2); }
.cat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cat__link {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  min-height: 44px;
  border-radius: var(--r-1);
  color: var(--ink); text-decoration: none; font-weight: 500;
  transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out);
}
.cat__link:hover { background: var(--surface); color: var(--accent); }
.cat__link[aria-current="page"] { background: var(--ink); color: var(--on-dark); }
.cat__link[aria-current="page"] .cat__ico { background: var(--accent); color: var(--on-dark); }
.cat__ico {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-1);
  background: var(--surface-2); color: var(--accent);
  display: grid; place-items: center;
  transition: background var(--t-micro) var(--e-out);
}
.cat__ico svg { width: 19px; height: 19px; }
/* продукт категории на пастельной подложке своего оттенка — как в Яндекс
   Лавке: подложка 48px, вырезанный продукт 56px выходит за неё, мягкая тень
   ставит его на подложку. Оттенки — только для подложек категорий, в
   остальном интерфейсе их нет */
.cat__ph {
  --ph: var(--surface-2);
  position: relative; flex: none;
  width: 48px; height: 48px; border-radius: var(--r-1);
  background: var(--ph);
  display: grid; place-items: center; color: var(--accent);
}
.cat__ph img {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 3px rgba(16, 23, 36, .18));
  transition: transform var(--t-micro) var(--e-out);
}
.cat__ph svg { display: none; width: 22px; height: 22px; }
.cat__ph.is-ico svg { display: block; }
.cat__link:hover .cat__ph img { transform: translate(-50%, -50%) scale(1.06); }
.cat__ph--ice { --ph: #fbe1e8; }
.cat__ph--pelmeni { --ph: #f5ead6; }
.cat__ph--fish { --ph: #fde3d8; }
.cat__ph--meat { --ph: #f1e4d9; }
.cat__ph--berry { --ph: #ebe2f7; }
.cat__ph--veg { --ph: #e1f1d9; }
.cat__ph--sweets { --ph: #f9e0ea; }
.cat__ph--cube { --ph: #dcf0e6; }
.cat__ph--other { --ph: #dde9f8; }

/* подкатегории: у открытой категории список выезжает вниз — высота
   раскрывается от нуля, пункты проявляются лесенкой, стрелка поворачивается.
   Закрытый список невидим и для клавиатуры (visibility) */
.cat__chev { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--muted); transition: transform 480ms var(--e-out); }
.cat__item.is-open .cat__chev { transform: rotate(180deg); }
.cat__link[aria-current="page"] .cat__chev { color: var(--muted-dark); }
.cat__link[aria-current="true"] { color: var(--ink); font-weight: 700; }
.cat__subwrap {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 520ms var(--e-out), visibility 0s linear 520ms;
}
.cat__item.is-open > .cat__subwrap { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 520ms var(--e-out), visibility 0s; }
.cat__subs { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 calc(var(--s3) + 48px + var(--s3)); }
.cat__subs li:first-child { padding-top: var(--s1); }
.cat__subs li:last-child { padding-bottom: var(--s2); }
.cat__subs li { opacity: 0; transform: translateY(-6px); transition: opacity 200ms ease, transform 200ms var(--e-out); }
.cat__item.is-open .cat__subs li {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--e-out) calc(140ms + var(--i) * 50ms), transform 460ms var(--e-out) calc(140ms + var(--i) * 50ms);
}
.cat__sub {
  display: flex; align-items: center; min-height: 36px; padding-inline: var(--s3); margin-left: calc(var(--s3) * -1);
  border-radius: var(--r-1); color: var(--ink); text-decoration: none; font-size: var(--fs-body);
  transition: color var(--t-micro) var(--e-out), background var(--t-micro) var(--e-out);
}
.cat__sub:hover { color: var(--accent); background: var(--surface-2); }
.cat__sub[aria-current="page"] { color: var(--accent); font-weight: 600; background: #eef1fd; }
.subchips { display: none; }
@media (max-width: 999px) {
  .cat__subwrap, .cat__chev { display: none; }
  .subchips:not([hidden]) {
    display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--s4) * -1) var(--s4); padding-inline: var(--s4);
  }
  .subchips::-webkit-scrollbar { display: none; }
  .subchip {
    flex: none; display: inline-flex; align-items: center; height: 40px; padding-inline: var(--s4);
    border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink);
    font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out);
  }
  .subchip[aria-current="page"] { background: var(--ink); color: var(--on-dark); }
}

/* каталог лентой на узких */
@media (max-width: 999px) {
  .layout, .layout--wide { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .cat { position: static; margin-inline: calc(var(--s4) * -1); }
  .cat__title { display: none; }
  .cat__list {
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; gap: var(--s2);
    padding-inline: var(--s4); scroll-padding-inline: var(--s4);
    scrollbar-width: none;
  }
  .cat__list::-webkit-scrollbar { display: none; }
  .cat__link { background: var(--surface); white-space: nowrap; }
}

/* ─────────── промо ─────────── */

.promo {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.promo__tile {
  position: relative; overflow: hidden;
  border-radius: var(--r-2);
  padding: var(--s5);
  min-height: 128px;
  /* minmax(0,1fr): без него неявная колонка растёт по min-content ряда
     превью (336px) и на 320 плитка режет и кадры, и текст */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between;
  /* row-gap: на узких экранах содержимое большой плитки выше её min-height,
     ряды сходились впритык — превью упирались в бейдж, число в превью */
  row-gap: var(--s3);
  text-decoration: none; color: inherit;
  transition: transform var(--t-micro) var(--e-out), box-shadow var(--t-micro) var(--e-out);
}
/* эффектов при наведении у плиток нет (решение владельца): глобальный a:hover
   красил текст в синий, и на синей плитке он пропадал. Цвета закреплены. */
a.promo__big, a.promo__big:hover, a.promo__big:focus-visible { color: var(--on-dark); }
a.promo__s1, a.promo__s1:hover, a.promo__s2, a.promo__s2:hover { color: var(--ink); }
.promo__big {
  grid-row: span 2;
  background: var(--accent); color: var(--on-dark);
  min-height: 240px;
  align-content: space-between;
}
/* середина большой плитки: три кадра того, на что скидка. Без них между
   бейджем и числом висело около 150px пустоты — критик назвал это первым */
.promo__thumbs { display: flex; gap: var(--s3); max-width: 276px; }
.promo__thumbs img {
  flex: 1 1 0; min-width: 0; width: auto; height: auto;
  aspect-ratio: 1 / 1; max-width: 84px;
  border-radius: var(--r-1); object-fit: cover;
  background: rgba(255, 255, 255, .12);
  transition: transform var(--t-enter) var(--e-out);
}

.promo__num {
  font-family: Geologica, sans-serif; font-weight: 800;
  font-size: clamp(52px, 3rem + 5vw, 100px); line-height: .84;
  letter-spacing: -.05em;
  /* line-height .84 меньше высоты глифов Geologica: верх цифр вылезал из
     строки на соседний ряд. Отступ возвращает глифам их место */
  padding-top: .1em;
  font-variant-numeric: tabular-nums;
}
.promo__big .promo__num { color: var(--frost); }
/* balance + неразрывные пробелы в разметке: число с единицей («2 часа») и
   сказуемое («вернём деньги») не разрываются переносом ни на одной ширине */
.promo__lead { font-size: var(--fs-title); font-family: Geologica, sans-serif; font-weight: 800; line-height: 1.04; letter-spacing: -.02em; max-width: 15ch; text-wrap: balance; }
.promo__note { font-size: var(--fs-body); opacity: .82; max-width: 34ch; }
/* заголовок и подпись всегда сидят на одном расстоянии: space-between родителя
   на 390 растягивал зазор в лаймовой плитке до 39px против 15px в белой —
   две соседние плитки одного типа читались как «одна доехала, вторая нет» */
.promo__s1, .promo__s2 { padding: var(--s4) var(--s5); align-content: start; }
.promo__s1 { background: var(--frost); color: var(--ink); }
.promo__s2 { background: var(--surface); color: var(--ink); }
.promo__s2 .promo__note { color: var(--muted); opacity: 1; }
.promo__tile .promo__lead + .promo__note { margin-top: var(--s2); }
.promo__tag {
  align-self: start; justify-self: start;
  font-size: var(--fs-caption); font-weight: 500;
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
}
.promo__s1 .promo__tag, .promo__s2 .promo__tag { background: rgba(16, 23, 36, .08); }

@media (max-width: 720px) {
  .promo { grid-template-columns: minmax(0, 1fr); }
  .promo__big { grid-row: auto; min-height: 232px; }
  .promo__tile { min-height: 140px; padding: var(--s4); }
}

/* ─────────── полки ─────────── */

.shelf { margin-bottom: var(--s7); }
.shelf__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  margin-bottom: var(--s4);
}
.shelf__more { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.shelf__more:hover { text-decoration: underline; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--s3);
}

/* Запасной список ссылок на товары: его отдаёт сервер тем, кто пришёл без
   JavaScript, скрипт при отрисовке сетки его убирает. Карточек здесь нет —
   только названия ссылками, чтобы каталог оставался проходимым. */
[data-cgrid-fallback] {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-bottom: var(--s3);
}
[data-cgrid-fallback] a { color: inherit; }
.js [data-cgrid-fallback] { display: none; }

/* ─────────── карточка ─────────── */

/* Карточка по образцу приложений доставки (2026-10-07, по просьбе владельца —
   «как у Самоката»): товар на светлой плашке, под ним название и вес, цена —
   внутри кнопки добавления. Радиус карточки r-2 при поле 8px даёт плашке
   внутри r-1: внутренний радиус = внешний минус поле, углы идут параллельно */
.card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  background: var(--surface);
  border-radius: var(--r-2);
  padding: var(--s2) var(--s2) var(--s3);
  border: 1px solid transparent;
  transition: border-color var(--t-micro) var(--e-out), box-shadow var(--t-micro) var(--e-out),
              transform var(--t-micro) var(--e-out);
}
/* без контура и тени при наведении (владелец, 2026-10-08) — только лёгкий подъём */
.card:hover { transform: translateY(-2px); }
/* наведение на карточку: подъём и тень; имя не подчёркиваем (просьба владельца, 2026-10-08) */
/* квадратная плашка, товар целиком по центру. Упаковки из 1С сняты на белом:
   multiply растворяет белый фон в плашке, и пачка стоит на ней, а не вклеена
   белым прямоугольником; прозрачный PNG ложится так же */
.card__media {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--photo);
  padding: var(--s3);
  margin-bottom: var(--s3);
}
.card__media img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; mix-blend-mode: multiply;
  transition: transform var(--t-enter) var(--e-out);
}
/* приближение картинки при наведении снято (владелец, 2026-10-08) */
/* z-index обязателен: картинка с transform на наведении становится слоем и
   без него ложится поверх бейджа */
.card__badge {
  position: absolute; z-index: 1; top: var(--s2); left: var(--s2);
  background: var(--frost); color: var(--ink);
  font-size: var(--fs-caption); font-weight: 700;
  padding: var(--s1) var(--s2); border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.card__name {
  font-size: var(--fs-body); font-weight: 500; line-height: 1.3; color: var(--ink);
  text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.card__name::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-2); }
.card__meta { margin-top: var(--s1); }
/* пустое место под карточку: квадрат плюс текстовый низ настоящей карточки —
   полка занимает свою высоту до отрисовки скриптом */
.skel { display: block; border-radius: var(--r-2); background: var(--surface); padding: var(--s2); }
.skel::before { content: ""; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-1); background: var(--surface-2); }
.skel::after { content: ""; display: block; height: 116px; }

/* растянутая ссылка названия накрывает карточку целиком — кнопка
   поднимается над ней, иначе клик по «+ цена» уходил бы на товар.
   align-self: end держит кнопки ряда на одной линии при разной длине имени */
.card__foot {
  align-self: end;
  margin-top: var(--s3);
  position: relative; z-index: 1;
}
/* старая цена на странице товара */
.card__old {
  display: block;
  font-size: var(--fs-caption); color: var(--muted);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}

/* кнопка-цена карточки: светлая пилюля «+ 303 ₽», в покое тихая — двадцать
   синих таблеток на экране забивали бы и цену, и лаймовый бейдж. Синюю
   заливку получает та карточка, к которой идёт курсор */
.padd {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; height: 44px; padding-inline: var(--s3);
  background: var(--surface-2); color: var(--ink);
  border: 0; border-radius: var(--r-pill);
  font: inherit; cursor: pointer;
  transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out),
              transform var(--t-micro) var(--e-out);
}
.padd svg { width: 14px; height: 14px; flex: none; }
.padd b { font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.padd s { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.padd:hover, .card:hover .padd { background: var(--accent); color: var(--on-dark); }
.padd:hover s, .card:hover .padd s { color: var(--on-dark); }
.padd:active { transform: scale(.96); background: var(--accent-press); }
.padd:focus-visible { outline-offset: 2px; border-radius: var(--r-pill); }

/* кнопка «В корзину» и тёмный счётчик — страница товара */
.card__add {
  position: relative; z-index: 1;
  min-width: 84px; height: 44px; padding-inline: var(--s4);
  border: 1px solid var(--accent); border-radius: var(--r-pill);
  background: var(--surface); color: var(--accent); font-weight: 500;
  cursor: pointer;
  transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out),
              transform var(--t-micro) var(--e-out);
}
.card__add:hover { background: var(--accent); color: var(--on-dark); }
.card__add:active { transform: scale(.96); }

/* степпер — сигнатурное состояние карточки: кнопка на месте превращается
   в счётчик того же размера */
.stepper {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 44px minmax(28px, auto) 44px;
  align-items: center;
  height: 44px;
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-pill);
}
/* проявляется только при смене кнопки на счётчик и обратно (класс ставит
   paintSlots). Раньше анимация висела на самом .stepper и проигрывалась у
   всех строк корзины на каждый «+» — список перерисовывается целиком */
.is-swap { animation: stepper-in 200ms ease-out; }
@keyframes stepper-in { from { opacity: 0; } to { opacity: 1; } }
.stepper button {
  height: 44px; width: 44px;
  background: none; border: 0; cursor: pointer; color: var(--on-dark);
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  transition: background var(--t-micro) var(--e-out);
}
.stepper button:hover { background: rgba(255, 255, 255, .16); }
.stepper__n { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper svg { width: 15px; height: 15px; }
/* светлый счётчик — карточка каталога и корзина: серая пилюля, тёмный текст */
.stepper--light { background: var(--surface-2); color: var(--ink); }
.stepper--light button { color: var(--ink); }
.stepper--light button:hover { background: var(--edge); }
.stepper--light button:active { background: var(--edge-ctl); color: var(--on-dark); }
.card .stepper--light { width: 100%; grid-template-columns: 44px minmax(28px, 1fr) 44px; }
/* число и цена за штуку в середине счётчика карточки */
.stepper__mid { display: grid; justify-items: center; line-height: 1.1; }
.stepper__mid small { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* ─────────── правая колонка: корзина ─────────── */

.side { position: sticky; top: 84px; display: grid; gap: var(--s3); }
.panel {
  background: var(--surface);
  border-radius: var(--r-2);
  padding: var(--s5);
}
.panel__head h2 { font-size: var(--fs-price); }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.deliv { display: grid; gap: var(--s2); }
.deliv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.deliv__row b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* корзина без условий доставки: фото, название, фасовка, ± и цена. Доставка,
   скидка и минимум показываются на следующем шаге — после «Продолжить» */
.mini-wrap { position: relative; margin-bottom: var(--s4); }
.mini { display: grid; gap: var(--s4); max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
/* полосы прокрутки нет: что список длиннее, показывает дымка снизу */
.mini::-webkit-scrollbar { display: none; }
/* дымка у нижнего края: строки, которые не поместились, растворяются в фон
   карточки, а не обрываются по букве. Класс is-more ставит скрипт по прокрутке:
   у последней строки дымка уходит — дальше листать некуда */
.mini-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--s7);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface));
  pointer-events: none; opacity: 0;
  transition: opacity var(--t-micro) var(--e-out);
}
.mini-wrap.is-more::after { opacity: 1; }

/* строка корзины — правая колонка каталога и оформление заказа */
.crow {
  position: relative;
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s3);
  align-items: stretch;
}
.crow__ph {
  display: block; width: 88px; height: 88px; padding: var(--s2);
  border-radius: var(--r-1); background: var(--photo);
}
.crow__ph img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.crow__body { min-width: 0; display: flex; flex-direction: column; }
/* поле справа под крестик: длинное название не подлезает под него */
.crow__name {
  padding-right: var(--s6);
  font-size: var(--fs-caption); font-weight: 500; line-height: 1.3; color: var(--ink);
  text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.crow__name:hover { color: var(--accent); }
.crow__unit { font-size: var(--fs-caption); color: var(--muted); }
.crow__line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-top: auto; padding-top: var(--s2);
}
/* старая цена — над новой, мелко и серым: в строку рядом с «−1+» две цены
   не помещаются в колонку 320px */
.crow__sum { display: grid; justify-items: end; line-height: 1.2; }
.crow__sum b { font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crow__sum s { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* крестик 32px, мишень 44px через ::before — угол строки не раздувается */
.crow__del {
  position: absolute; top: 0; right: 0;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-pill);
  color: var(--muted); cursor: pointer;
  transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out);
}
.crow__del::before { content: ""; position: absolute; inset: calc(var(--s2) * -1 + 2px); }
.crow__del:hover { background: var(--surface-2); color: var(--ink); }
.crow__x { width: 16px; height: 16px; transform: rotate(45deg); }
.crow__del:focus-visible { border-radius: var(--r-pill); outline-offset: 0; }

.total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.total b { font-family: Geologica, sans-serif; font-size: var(--fs-title); font-weight: 800; font-variant-numeric: tabular-nums; }
/* итог корзины — по центру над кнопкой: «Итого» мелко и серым, сумма крупно */
.panel--cart .total {
  flex-direction: column; align-items: center; gap: 0;
  padding-top: var(--s1);
  margin-bottom: var(--s3);
}
.panel--cart .total b { line-height: 1.15; }
.panel--cart .total b.is-bump { animation: bump var(--t-enter) var(--e-out); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 48px; padding-inline: var(--s5);
  background: var(--accent); color: var(--on-dark); font-weight: 500;
  border: 0; border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
  transition: background var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-out);
}
.btn:hover { background: var(--accent-press); color: var(--on-dark); }
.btn:active { transform: scale(.985); }
.btn--wide { width: 100%; }
.btn--ghost { background: var(--surface-2); color: var(--ink); }
.btn--ghost:hover { background: var(--edge); color: var(--ink); }
.btn[disabled] { background: var(--edge); color: var(--muted); cursor: not-allowed; transform: none; }

.empty { text-align: center; color: var(--muted); }
.empty__art {
  width: 64px; height: 64px; margin: var(--s2) auto var(--s3);
  border-radius: var(--r-2); background: var(--bg); color: var(--edge);
  display: grid; place-items: center;
}
.empty__art svg { width: 32px; height: 32px; }
.empty b { display: block; color: var(--ink); font-weight: 500; margin-bottom: var(--s1); }

/* нижняя панель вкладок и список документов в кабинете — только мобильная
   оболочка (assets/mobile.css). Панель рисует app.js на всех ширинах,
   список стоит в разметке account.html; на десктопе оба скрыты, их роль
   там выполняют кнопки шапки и футер с реквизитами */
.tabbar, .mlist { display: none; }

/* плавающая корзина на узких */
.cart-fab {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 50;
  display: none; align-items: center; gap: var(--s2);
  height: 52px; padding-inline: var(--s5);
  background: var(--ink); color: var(--on-dark); border: 0; border-radius: var(--r-pill);
  box-shadow: var(--sh-2); cursor: pointer; font-weight: 500; text-decoration: none;
}
.cart-fab b { font-variant-numeric: tabular-nums; font-weight: 700; }
/* без явного размера иконка растягивалась флексом на всю таблетку, и корзина
   на 390 читалась как чёрная полоса во всю ширину экрана */
.cart-fab svg { width: 20px; height: 20px; flex: none; }
.cart-fab:hover { color: var(--on-dark); background: var(--accent); }
@media (max-width: 1199px) {
  .side { display: none; }
}
/* кнопки корзины в шапке больше нет: на широких экранах корзина — правая
   колонка каталога, везде остальное — плавающая таблетка внизу справа.
   html.has-side ставит скрипт на страницах с правой колонкой */
.cart-fab.is-on { display: inline-flex; }
/* таблетка висит над содержимым: место под неё отдаётся заранее, иначе она
   срезает верх первой карточки. Признак стоит на <html> до первой отрисовки */
html:not(.cart-empty) body { padding-bottom: 84px; }
@media (min-width: 1200px) {
  html.has-side .cart-fab { display: none; }
  html.has-side:not(.cart-empty) body { padding-bottom: 0; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .layout { grid-template-columns: 236px minmax(0, 1fr); }
}

/* ─────────── условия доставки ─────────── */

.terms {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-2);
  padding: var(--s6);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s6);
  align-items: start;
}
.terms h2 { color: var(--on-dark); }
.terms__lead { color: var(--muted-dark); margin-top: var(--s3); max-width: 30ch; }
.terms__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: 0; }
.terms__list div { display: grid; gap: var(--s1); }
.terms__list dt { font-size: var(--fs-caption); color: var(--muted-dark); }
.terms__list dd {
  margin: 0; font-family: Geologica, sans-serif; font-weight: 700; font-size: var(--fs-price);
  font-variant-numeric: tabular-nums;
}
.terms__list dd .u { color: var(--frost); }
@media (max-width: 860px) {
  .terms { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s5); }
  .terms__list { gap: var(--s4); }
}

/* ─────────── подвал ─────────── */

/* подвал — как у Лавки: бренд и телефон сверху, под линией ровная сетка
   ссылок, под второй — мелкий текст и реквизиты. Серая подложка отделяет
   его от белой страницы */
/* Подвал по образцу Лавки и Самоката: низкий и тихий. Логотип и телефон,
   под ними ссылки серым в колонки по три строки без заголовков, затем
   категории одной строкой (их же сервер вписывает для робота) и реквизиты */
.foot { margin-top: var(--s8); background: #f4f6f9; padding-block: var(--s6) var(--s5); color: var(--muted); font-size: 15px; }
.foot__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--edge); }
.foot .foot__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font: 700 20px/1 Rubik, system-ui, sans-serif; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.foot__brand svg { width: 24px; height: 24px; color: var(--accent); }
.foot__call { display: grid; gap: 2px; text-align: right; font-size: 12px; }
.foot .foot__phone { font: 700 20px/1.2 Rubik, system-ui, sans-serif; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.foot .foot__phone:hover { color: var(--accent); }
.foot__app {
  display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding-inline: var(--s4);
  border: 0; border-radius: var(--r-1); background: var(--ink); color: var(--on-dark);
  font: 600 14px Rubik, system-ui, sans-serif; cursor: pointer;
  transition: background var(--t-micro) var(--e-out);
}
.foot__app:hover { background: var(--accent); }
.foot__app svg { width: 18px; height: 18px; }
.foot__app[hidden] { display: none; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); padding-block: var(--s5); border-bottom: 1px solid var(--edge); }
.foot__links ul { display: grid; gap: var(--s2); align-content: start; line-height: 1.35; }
.foot a { color: var(--muted); text-decoration: none; transition: color var(--t-micro) var(--e-out); }
.foot a:hover { color: var(--ink); }
.foot__fine { display: grid; gap: var(--s2); padding-top: var(--s4); font-size: 12px; line-height: 1.55; }
.foot__fine p { margin: 0; max-width: 160ch; }
.foot__cats { display: flex; flex-wrap: wrap; gap: 2px var(--s4); }
.foot__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding-top: var(--s3); font-size: 12px; }
.foot__bottom > span { color: var(--ink); }
.foot__bottom button { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; }
.foot__bottom button:hover { text-decoration: underline; }
@media (max-width: 999px) {
  .foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .foot__call { text-align: left; flex-basis: 100%; }
  .foot__links { gap: var(--s4); }
  .foot__links ul { gap: var(--s1); }
  .foot__links a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ─────────── страница категории ─────────── */

/* хлебные крошки сняты со всех страниц по просьбе владельца (2026-10-08):
   перегружают экран. Разметка и BreadcrumbList в JSON-LD для поисковиков
   остаются; вернуть — убрать первую строку */
.crumbs { display: none !important; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fs-caption); color: var(--muted); margin: 0 0 var(--s2); padding: 0; list-style: none; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.crumbs a span { border-bottom: 1px solid var(--edge-ctl); }
.crumbs a:hover span { color: var(--accent); border-color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--edge); }
/* каждая крошка — в одну строку: ряд коротких подписей держится именно этим,
   переносится при нехватке места весь ряд, а не слово внутри пункта */
.crumbs li { display: flex; align-items: center; white-space: nowrap; }
.crumbs__cur { display: inline-flex; align-items: center; min-height: 44px; }

/* шапка выдачи — одна строка: заголовок обычного размера, справа сортировка.
   Прежний блок (дисплейный h1, «Показано N из M», три ряда чипов) занимал
   ~330px над товарами; категории и так есть в левом меню */
.layout--cat .col { gap: var(--s4); }
.chead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-width: 0; }
.chead h1 { font-size: var(--fs-title); line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.chead__sort { flex: none; }
/* строка состояния видна только без выдачи: «Ищем похожее…», «Ничего не нашлось» */
.chead__state { color: var(--muted); margin: 0; }
.chead__state:empty { display: none; }
.chip {
  height: 44px; padding-inline: var(--s4);
  background: var(--surface); border: 1px solid var(--edge-ctl); border-radius: var(--r-pill);
  cursor: pointer; font-weight: 500;
  transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out);
}
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; min-height: 44px; }
[data-cgrid] { min-height: 70vh; align-content: start; }
.sel { position: relative; display: inline-flex; }
.sel select {
  appearance: none; height: 44px; padding: 0 40px 0 var(--s4);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b32de' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
  border: 1px solid var(--edge-ctl); border-radius: var(--r-pill);
  font: inherit; font-weight: 500; color: var(--ink); cursor: pointer;
}
.sel select:hover { background-color: var(--bg); }
/* сортировка в шапке выдачи — текстовая кнопка «Сначала популярные ⌄» без
   рамки: заливка появляется только под курсором. Список — нативный: на
   телефоне он открывается системным выбором, клавиатура работает сама */
.sel--text select {
  padding: 0 var(--s6) 0 var(--s3);
  background-color: transparent; border-color: transparent;
  background-position: right var(--s3) center;
}
.sel--text select:hover { background-color: var(--surface-2); }
.sel--text select:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }

.noresult { background: var(--surface); border-radius: var(--r-2); padding: var(--s7) var(--s5); text-align: center; }
.noresult > * { max-width: 46ch; margin-inline: auto; }

.cmore-wrap { text-align: center; margin-top: var(--s5); }
.cmore-wrap .btn { min-width: 220px; }

/* ─────────── оформление ─────────── */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s5); align-items: stretch; padding-block: var(--s5) var(--s8); }
@media (max-width: 999px) { .checkout { grid-template-columns: minmax(0, 1fr); } }

.form { display: grid; gap: var(--s5); align-content: start; }  /* рядом высокая корзина — строки не растягивать */
/* min-width: 0 — у fieldset браузерный min-content, из-за него на 390px страница ехала вбок */
.fset { background: var(--surface); border-radius: var(--r-2); padding: var(--s5); border: 0; margin: 0; min-width: 0; }
/* legend по умолчанию сидит на верхней кромке fieldset и наполовину вылезает
   из белой карточки; float + width возвращают его в обычный поток.
   :not(.vh) обязателен. Это правило специфичнее .vh и возвращало скрытому
   legend («Согласия» в оформлении) width: 100% поверх width: 1px — абсолютный
   блок во всю ширину контейнера, сдвинутый на отступ формы вправо, выносил
   страницу вбок: на 390px документ становился 422px. */
.fset legend:not(.vh) { float: left; width: 100%; padding: 0; margin-bottom: var(--s4); font-family: Geologica, sans-serif; font-weight: 700; font-size: var(--fs-title); letter-spacing: -.01em; }
.fset > legend ~ * { clear: both; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.fgrid--1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }
/* align-content: start — иначе поле с двумя элементами (label + select)
   растягивает свои строки на высоту соседа с подсказкой, и селект уезжает вниз */
.field { display: grid; gap: var(--s2); align-content: start; }
.field label { font-size: var(--fs-caption); color: var(--muted); }
.field input, .field textarea {
  height: 48px; padding: 0 var(--s4);
  font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--edge-ctl); border-radius: var(--r-1);
  transition: border-color var(--t-micro) var(--e-out), background var(--t-micro) var(--e-out);
}
.field textarea { height: auto; padding: var(--s3) var(--s4); resize: none; field-sizing: content; min-height: 80px; }
.field input:hover { background: var(--surface-2); }
.field input:focus, .field textarea:focus { background: var(--surface); border-color: var(--accent); outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.field .err { font-size: var(--fs-caption); color: var(--bad); display: none; }
.field.is-bad input, .field.is-bad textarea { border-color: var(--bad); background: var(--bad-bg); }
.field.is-bad .err { display: block; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2); }
/* grid, а не block: плитки одного ряда получают одинаковую высоту, и круг
   выбора у всех стоит на одной линии */
.slot { position: relative; display: grid; }
/* выбор виден не только цветом плитки: настоящий радиокруг слева, оформленный
   своими руками. Скрытый ввод проба «контрол» справедливо читала как
   «контрол оставлен браузеру» — а посетителю нужен видимый маркер выбора */
.slot input {
  position: absolute; z-index: 1; left: var(--s4); top: 50%; translate: 0 -50%;
  appearance: none; margin: 0; width: 18px; height: 18px;
  border: 1px solid var(--edge-ctl); border-radius: var(--r-pill);
  background: var(--surface); cursor: pointer;
  font: inherit; color: var(--ink);
  transition: border-color var(--t-micro) var(--e-out), background var(--t-micro) var(--e-out);
}
.slot input:checked { border-color: var(--frost); background: var(--frost); box-shadow: inset 0 0 0 4px var(--ink); }
.slot span {
  display: grid; gap: var(--s1);
  padding: var(--s3) var(--s4) var(--s3) 46px; min-height: 44px; align-content: center;
  background: var(--bg); border: 1px solid var(--edge-ctl); border-radius: var(--r-1);
  cursor: pointer; font-weight: 500;
  transition: border-color var(--t-micro) var(--e-out), background var(--t-micro) var(--e-out);
}
.slot span em { font-style: normal; font-size: var(--fs-caption); color: var(--muted); font-weight: 400; }
.slot:hover span { background: var(--surface-2); }
.slot input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.slot input:checked + span em { color: var(--muted-dark); }
.slot input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.sum { background: var(--surface); border-radius: var(--r-2); padding: var(--s5); align-self: stretch; }
.sum__rows { display: grid; gap: var(--s2); padding-block: var(--s4); border-top: 1px solid var(--edge); }
.sum__row { display: flex; justify-content: space-between; gap: var(--s3); color: var(--muted); }
.sum__row b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.sum__list { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.stepper--sm { height: 36px; grid-template-columns: 36px minmax(24px, auto) 36px; animation: none; }
.stepper--sm button { height: 36px; width: 36px; }
.stepper--sm svg { width: 13px; height: 13px; }

.done { background: var(--surface); border-radius: var(--r-2); padding: var(--s7) var(--s5); text-align: center; }
.done__mark {
  width: 64px; height: 64px; margin: 0 auto var(--s4);
  border-radius: var(--r-pill); background: var(--frost); color: var(--ink);
  display: grid; place-items: center;
}
.done__mark svg { width: 30px; height: 30px; }
.done p { max-width: 46ch; margin-inline: auto; color: var(--muted); margin-top: var(--s3); }
.done__id { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.done .btn { margin-top: var(--s5); }

.formerr {
  display: none;
  margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  border-left: 3px solid var(--bad); background: var(--bad-bg); border-radius: 0 var(--r-1) var(--r-1) 0;
}
.formerr.is-on { display: block; }

/* ─────────── согласия (152-ФЗ): чекбокс + подпись ─────────── */
.consent {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: var(--fs-caption); color: var(--muted); cursor: pointer;
}
.consent input {
  flex: 0 0 auto; margin: 2px 0 0; width: 18px; height: 18px;
  accent-color: var(--accent); cursor: pointer;
}
.consent input:disabled { cursor: not-allowed; }
.consent a { color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.consent a:hover { color: var(--accent); }

/* ─────────── личный кабинет ─────────── */
.acc-danger { margin-top: var(--s5); font-size: var(--fs-caption); color: var(--muted); }
.linkbtn--danger { color: var(--bad); }
.linkbtn--danger:hover { color: var(--bad); opacity: .8; }
.linkbtn:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }
[data-acc-step] + [data-acc-step] { margin-top: 0; }
[data-acc-step] { display: grid; gap: var(--s5); padding-block: var(--s4) var(--s8); }
[data-acc-step] .fset + .pagehead { margin-top: var(--s5); }

/* ─────────── вход первого экрана ─────────── */

/* overflow-anchor: без него якорь прокрутки цепляется за въезжающий блок,
   и перезагруженная страница встаёт на 20px ниже нуля — ровно на дистанцию входа */
.enter { animation: enter var(--t-enter) var(--e-out) both; overflow-anchor: none; }
@keyframes enter {
  from { opacity: 0; transform: translateY(var(--m-dist)); }
  to { opacity: 1; transform: none; }
}

/* проявление: класс ставит скрипт после отрисовки полки */
.rv { opacity: 0; transform: translateY(var(--m-dist)); overflow-anchor: none; }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-enter) var(--e-out) var(--rvd, 0ms),
              transform var(--t-enter) var(--e-out) var(--rvd, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  /* 1ms всё равно оставлял первый экран на стартовом кадре (сдвиг 20px,
     PSNR 11 против конца входа): вход выключается целиком, а не ускоряется */
  .enter { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* заголовок витрины держит ранг h1 каталога: два h1 разного кегля на соседних
   страницах читаются как сбой шкалы, а не как иерархия */
/* одна строка, а не две: подзаголовок стоит по базовой линии заголовка. Две
   строки над промо уводили первую полку с ценами под сгиб на 1440×900 */
.ptitle {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--s4); row-gap: var(--s1);
  margin-bottom: var(--s4);
}
.ptitle h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.015em; }
.ptitle .caption { max-width: 56ch; flex: 1 1 240px; }
/* на телефоне между подписью и промо висело 48px (gap колонки + margin) */
@media (max-width: 720px) { .ptitle { margin-bottom: 0; } }

/* ── добор после механической пробы ───────────────────────── */

/* заливка полей: белое на почти-белом даёт 1.11:1 — это не плоскость, а шум,
   и он «включается площадью» (проба «заливка»). Опора у поля одна и не зависит
   от размера: контур --edge-ctl 3.28:1 плюс пример ввода в placeholder. */
.search input, .field input, .field textarea, .sel select { background-color: transparent; }

/* мишень имени товара — растянутая ссылка (a.card__name::after) на всю
   карточку; кнопки ряда выравнивает .card__foot { align-self: end }. Две
   строки под имя больше не резервируются: вес встаёт сразу под названием */



/* якорь: липкая шапка на узких ширинах в две и три полосы */
@media (max-width: 999px) { html { scroll-padding-top: 150px; } }
@media (max-width: 600px) { html { scroll-padding-top: 190px; } }

/* первый экран на узком: лента категорий не должна съедать четверть экрана */
@media (max-width: 999px) {
  .cat__list { gap: var(--s1); }
  .cat__link { padding: var(--s2) var(--s3); }
  .cat__ico { width: 28px; height: 28px; }
  .cat__ico svg { width: 16px; height: 16px; }
}

/* место под то, что рисует скрипт: без него итог заказа въезжает
   в готовую страницу и даёт CLS 0.33 */
[data-sum] { min-height: 420px; }
[data-slots] { min-height: 96px; }
[data-cart-body] { min-height: 190px; }
[data-prod] { min-height: 560px; }
/* категории подвала приходят скриптом одной строкой мелким шрифтом — место
   под строку держим заранее, чтобы подвал не прыгал; на телефоне их три */
[data-foot-cats] { min-height: 19px; align-content: start; }
@media (max-width: 720px) { [data-foot-cats] { min-height: 57px; } }

/* ── страница товара ──────────────────────────────────────── */

.prod {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: var(--s6); align-items: start;
  padding-block: var(--s5) var(--s7);
}
.prod__media {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: var(--r-2); overflow: hidden; background: var(--surface);
}
.prod__media img { width: 100%; height: 100%; object-fit: cover; }
.prod__cat { font-size: var(--fs-caption); margin-bottom: var(--s2); }
.prod__cat a { color: var(--muted); }
.prod__cat a:hover { color: var(--accent); }
.prod h1 { letter-spacing: -.015em; }
.prod__unit { margin-top: var(--s2); }
.prod__buy {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4);
  margin-top: var(--s5); padding-block: var(--s5); border-block: 1px solid var(--edge);
}
.prod__price {
  font-family: Geologica, sans-serif; font-weight: 800;
  font-size: var(--fs-display); line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--s3);
}
.prod__price .card__old { font-family: Rubik, sans-serif; font-size: var(--fs-price); font-weight: 400; }
.prod__slot .card__add, .prod__slot .stepper { height: 48px; }
/* Заливка = ранг на экране, а не имя кнопки. Там, где кнопок двадцать, они
   обведённые: залитые таблетки забивали цену и лаймовый бейдж скидки. Там, где
   она одна и она же главное действие, она залита — контурная проигрывала по
   весу даже «Корзине» в шапке, и глаз уходил вверх вместо кнопки. */
.prod__slot .card__add {
  padding-inline: var(--s5); font-size: var(--fs-body);
  background: var(--accent); color: var(--on-dark);
}
.prod__slot .card__add:hover { background: var(--accent-press); border-color: var(--accent-press); }
.prod__desc { margin-top: var(--s5); max-width: 62ch; }
.prod__facts { margin-top: var(--s5); display: grid; gap: var(--s3); }
.prod__facts > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
.prod__facts dt { font-size: var(--fs-caption); color: var(--muted); }
.prod__facts dd { max-width: 52ch; }
.prod__void { grid-column: 1 / -1; }
/* три карточки на ширину страницы: в общей сетке каталога они растянулись бы
   на семь колонок по 178px, и название начинало резаться на третьей строке */
.shelf--also { padding-bottom: var(--s8); }
.shelf--also .grid { grid-template-columns: repeat(auto-fill, minmax(0, 264px)); }

@media (max-width: 900px) {
  .prod { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

/* ── пустая корзина: колонка сжимается, а не белеет ────────── */

/* признак стоит на <html> с первой отрисовки, поэтому обе высоты
   резервируются по факту, а не «на всякий случай» */
.cart-empty [data-cart-body] { min-height: 0; }
.cart-empty [data-sum] { min-height: 0; }
/* пустая корзина — та же панель, что и полная (владелец, 2026-10-08):
   рисунок и «пока пусто» по центру, внизу условия доставки и неактивная
   кнопка — на месте итога и «Продолжить» у полной */
.cvoid { display: none; }
.cart-empty .cvoid {
  display: flex; flex-direction: column; gap: var(--s5);
  flex: 1; min-height: 0;
}
.cvoid__in { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--s2); text-align: center; padding-block: var(--s4); }
.cvoid__art { width: 150px; height: auto; margin-bottom: var(--s3); }
.cvoid__lead { font-size: var(--fs-price); font-weight: 700; }
.cvoid__in .caption { max-width: 28ch; }
.cvoid .deliv { padding-top: var(--s4); border-top: 1px solid var(--edge); }
.cart-empty [data-cart-body] { display: none; }
.mini__void { font-size: var(--fs-caption); color: var(--muted); }

/* оформление: пустой корзины здесь не существует. Вместо формы и белой
   колонки итога — заглушка во всю ширину с входом обратно в каталог */
.voidcart { display: none; }
.cart-empty .voidcart {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--s5); align-items: start;
  background: var(--surface); border-radius: var(--r-2);
  padding: var(--s6); margin-block: var(--s5) var(--s8);
}
.cart-empty .checkout { display: none; }
.ch-t--void { display: none; }
.cart-empty .ch-t { display: none; }
.cart-empty .ch-t--void { display: inline; }
.voidcart__lead { font-size: var(--fs-title); font-weight: 700; margin-bottom: var(--s2); }
.voidcart__in .caption { max-width: 46ch; }
.voidcart__go { margin-top: var(--s5); }
/* пока везти нечего, левая колонка держит условия доставки — иначе под
   кнопкой оставалась белая дыра в половину панели */
.voidcart__deliv { margin-top: var(--s6); max-width: 42ch; }
/* семь ссылок приходят скриптом, поэтому место занято заранее: 7 строк по 44px
   и 6 зазоров по 4px */
.voidcart__cats { list-style: none; display: grid; gap: var(--s1); margin: 0; padding: 0; min-height: 332px; align-content: start; }
.voidcat {
  display: flex; align-items: center; gap: var(--s3); min-height: 44px;
  padding: var(--s2) var(--s3); border-radius: var(--r-1);
  color: var(--ink); text-decoration: none;
  transition: background var(--t-micro) var(--e-out);
}
.voidcat:hover { background: var(--bg); color: var(--accent); }
@media (max-width: 720px) {
  .cart-empty .voidcart { grid-template-columns: minmax(0, 1fr); padding: var(--s5); }
}

/* итог заказа идёт во всю высоту формы, а его содержимое липнет внутри */
.sum__in { position: sticky; top: 84px; }

/* мелкие утилиты вместо инлайновых стилей */
.crumbs--pad { padding-top: var(--s5); }
/* крошки скрыты — их отступ сверху переходит к заголовку страницы */
main[data-checkout] > .crumbs--pad + h1, .crumbs--pad + .pagehead, main[data-account] > .crumbs--pad ~ [data-acc-step] { margin-top: var(--s5); }
.field--wide { margin-top: var(--s4); }
.sel--full, .sel--full select { width: 100%; }
.noresult .btn, .empty__go { margin-top: var(--s4); }

/* ─────────── избранное, заказы, промокод, адрес ─────────── */

/* шапка: две ссылки-аккаунта вместо кнопки «Войти». Ниже 1200px они
   сжимаются до значков, но не исчезают: до избранного и заказов должно
   быть можно дойти с телефона, а лишней полосы шапке не нужно */
.hdr__inner { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; }
.hbtn--me { position: relative; padding-inline: var(--s3); }
.hbtn--me .hbtn__t { display: none; }
@media (min-width: 1200px) { .hbtn--me { padding-inline: var(--s4); } .hbtn--me .hbtn__t { display: inline; } }
.hbtn__n {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding-inline: 5px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--frost); color: var(--ink); border-radius: var(--r-pill);
}
@media (max-width: 999px) {
  .hdr__inner {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "logo addr fav ord cart" "search search search search search";
  }
  .hbtn--fav { grid-area: fav; }
  .hbtn--ord { grid-area: ord; }
}
@media (max-width: 600px) {
  /* три кнопки-значка — фиксированные 42px, адрес растянут под ними на
     все три колонки: иначе ширину колонки «Войти» задавал адрес (150px),
     и логотипу оставалось 88px — «ИзМорози» */
  .hdr__inner {
    grid-template-columns: minmax(0, 1fr) 42px 42px 42px;
    grid-template-areas: "logo fav ord cart" "search addr addr addr";
  }
  .hbtn--addr { max-width: 100%; }
  .hbtn--me, .hbtn--login { width: 42px; padding-inline: 0; justify-content: center; }
}

/* сердечко на кадре карточки: лежит выше растянутой ссылки, чтобы клик
   добавлял в избранное, а не открывал товар */
.fav {
  position: absolute; z-index: 2; top: var(--s2); right: var(--s2);
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: var(--surface); border: 0; border-radius: var(--r-pill);
  color: var(--muted); cursor: pointer;
  transition: color var(--t-micro) var(--e-out), background var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-out);
}
.fav svg { width: 18px; height: 18px; }
.fav:hover { color: var(--accent); }
.fav:active { transform: scale(.9); }
.fav.is-on { color: var(--bad); border-color: transparent; }
.fav.is-on svg { fill: currentColor; }
.fav:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.fav--big {
  position: static; width: 48px; height: 48px;
  border-color: var(--edge-ctl); margin-left: auto;
}
.fav--big svg { width: 22px; height: 22px; }
/* карточка целиком — ссылка; 36px сердечка на 5:4 кадре ей не мешают,
   но касание на телефоне должно доставать 44: расширяем зону касания */
@media (pointer: coarse) { .fav { width: 44px; height: 44px; } }

/* всплывашка адреса: улица + район. Подсказка появляется от ввода, поэтому
   строка под неё зарезервирована — окно не дёргается */
.addr__street { display: flex; gap: var(--s2); margin-top: var(--s3); }
.addr__street input {
  flex: 1; min-width: 0; height: 44px; padding: 0 var(--s3);
  font: inherit; font-size: var(--fs-caption); color: var(--ink);
  background: var(--bg); border: 1px solid var(--edge-ctl); border-radius: var(--r-1);
}
.addr__street input:focus { background: var(--surface); border-color: var(--accent); outline: none; }
.addr__street input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.addr__street .btn { padding-inline: var(--s3); height: 44px; }
.addr__pop .phint { min-height: 18px; margin-top: var(--s2); }
.addr__pop .caption + .caption { margin-top: var(--s3); }

/* подсказка под полем: зона доставки, промокод */
.phint { font-size: var(--fs-caption); color: var(--muted); min-height: 18px; }
.phint--ok { color: var(--ink); }
.phint--bad { color: var(--bad); }
.phint--wait { color: var(--muted); }

/* промокод: поле и кнопка одной строкой. Кнопка обведённая — на странице
   уже есть одна залитая: «Оформить» */
.promo-row { display: flex; gap: var(--s2); align-items: stretch; }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.promo-row input::placeholder { text-transform: none; letter-spacing: 0; }
.promo-row input.is-applied { border-color: var(--ink); background: var(--surface); }
.promo-row .btn { height: 48px; white-space: nowrap; }
.field--promo .phint { margin-top: 0; }

/* избранное: пустая страница — заглушка в тех же пропорциях, что voidcart */
.pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.pagehead .caption { margin-top: var(--s2); }
.void {
  background: var(--surface); border-radius: var(--r-2); padding: var(--s6);
  display: grid; gap: var(--s2); justify-items: start;
  margin-bottom: var(--s8);
}
.void__lead { font-size: var(--fs-title); font-weight: 700; }
.void .caption { max-width: 46ch; }
.void .btn { margin-top: var(--s3); }

/* заказы: список карточек, каждая — шапка, состав, факты, итог и повтор */
.orders { display: grid; gap: var(--s4); padding-bottom: var(--s8); min-height: 200px; }
.order { background: var(--surface); border-radius: var(--r-2); padding: var(--s5); }
.order__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.order__id { font-size: var(--fs-price); }
.order__head .caption { margin-top: var(--s1); }
.ostat {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s3);
  font-size: var(--fs-caption); font-weight: 500; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink);
}
.ostat--ok { background: var(--frost); }
.order__list { list-style: none; margin: var(--s4) 0 0; padding: var(--s4) 0; display: grid; gap: var(--s3); border-block: 1px solid var(--edge); }
.order__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.order__item img, .order__noimg { width: 40px; height: 40px; border-radius: var(--r-1); object-fit: cover; background: var(--bg); display: block; }
.order__iname { font-size: var(--fs-caption); }
.order__facts { display: grid; gap: var(--s2); margin: var(--s4) 0 0; }
.order__facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); font-size: var(--fs-caption); }
.order__facts dt { color: var(--muted); }
.order__facts dd { margin: 0; }
.order__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--edge); }
.order__sum { display: flex; align-items: baseline; gap: var(--s3); }
.order__sum b { font-family: Geologica, sans-serif; font-size: var(--fs-title); font-weight: 800; font-variant-numeric: tabular-nums; }
.order .btn svg { width: 18px; height: 18px; margin-right: var(--s2); }
.done__acts { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.done__acts .btn { margin-top: var(--s5); }

/* установка приложения: одна строка в подвале, показывается только когда
   браузер готов предложить установку */
.install { display: inline-flex; align-items: center; gap: var(--s2); padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; min-height: 24px; }
.install:hover { text-decoration: underline; }
.install svg { width: 18px; height: 18px; }

/* офлайн-страница */
.offline { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: var(--s3); padding-block: var(--s8); }
.offline__mark { width: 64px; height: 64px; margin: 0 auto var(--s2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); display: grid; place-items: center; }
.offline__mark svg { width: 30px; height: 30px; }
.offline p { max-width: 42ch; margin-inline: auto; color: var(--muted); }


/* ── шапка: «Войти» и локальный профиль ─────────────────────────────── */
.hbtn--login b { font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__pop { width: 300px; }
.me__form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.me__form input {
  height: 44px; width: 100%; padding-inline: var(--s4);
  background: var(--bg); border: 1px solid var(--edge-ctl); border-radius: var(--r-pill);
  font: inherit; color: var(--ink);
}
.me__form input:focus { background: var(--surface); border-color: var(--accent); outline: none; }
.me__form input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.me__form .btn { height: 44px; }
.me__links { margin-top: var(--s3); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--accent-press); }
@media (max-width: 600px) { .hbtn--login b { display: none; } }

/* условия доставки (срок, 149 ₽, бесплатно от…) показываются рядом с пустой
   корзиной как ориентир; когда товары есть — цифры доставки только на шаге
   оформления, после «Продолжить» (решение владельца) */
html:not(.cart-empty) .side .panel:not(.panel--cart) { display: none; } /* других панелей в .side больше нет — условия внутри пустой корзины */

/* подпись под «Продолжить»: порог заказа виден и когда он уже набран */
.mini__min { margin-top: var(--s3); text-align: center; }

/* ─────────── SEO-тексты: категория, «Как приготовить», блок и FAQ на главной ─────────── */
.ctext { color: var(--muted); max-width: 72ch; margin: 0 0 var(--s4); }
.prod__cook { margin-top: var(--s4); padding: var(--s4); background: var(--surface-2); border-radius: var(--r-2); }
.prod__cook h2 { font-size: var(--fs-body); font-weight: 700; margin: 0 0 var(--s2); }
.prod__cook p { margin: 0; }
.seo { display: grid; gap: var(--s5); margin-top: var(--s7); }
.seo h2 { font-size: var(--fs-title); font-weight: 700; margin: 0 0 var(--s3); }
.seo h3 { font-size: var(--fs-body); font-weight: 700; margin: var(--s4) 0 var(--s2); }
.seo p { margin: 0 0 var(--s3); max-width: 72ch; color: var(--ink); }
.seo ul { margin: 0 0 var(--s3); padding-left: 1.2em; max-width: 72ch; }
.faq { display: grid; gap: var(--s2); max-width: 72ch; }
.faq details { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-2); padding: 0 var(--s4); }
.faq summary { min-height: 52px; display: flex; align-items: center; font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; color: var(--muted); font-size: 22px; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 var(--s4); color: var(--muted); }

/* ─────────── плашка согласия на cookie (152-ФЗ) ─────────── */

.cookie {
  position: fixed; z-index: 70; left: 50%; bottom: var(--s4); translate: -50% 0;
  width: min(calc(100vw - 2 * var(--s4)), 720px);
  display: grid; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--surface); color: var(--ink); border: 1px solid var(--edge);
  border-radius: 20px; box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-out);
}
.cookie.is-on { opacity: 1; transform: none; }
.cookie__text { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.cookie__text a { color: var(--accent); }
.cookie__btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cookie__btns .btn { flex: 1 1 auto; }
@media (max-width: 720px) { .cookie { bottom: calc(var(--s3) + env(safe-area-inset-bottom)); } }

/* подсказки улиц под полем адреса (шапка и оформление): список из
   data/streets.json, район серой подписью справа */
.ssug-host { position: relative; }
.ssug {
  position: absolute; z-index: 40; left: 0; right: 0;
  max-height: 320px; overflow-y: auto; margin: 0; padding: var(--s1); list-style: none;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-1); box-shadow: var(--sh-2);
}
.ssug[hidden] { display: none; }
.ssug__i {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  min-height: 40px; padding: var(--s2) var(--s3); border-radius: var(--r-1);
  font-size: var(--fs-caption); color: var(--ink); cursor: pointer;
}
.ssug__i:hover, .ssug__i[aria-selected="true"] { background: var(--surface-2); }
.ssug__z { flex: none; color: var(--muted); font-size: 12px; }
.ssug--houses { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 2px; }
.ssug--houses[hidden] { display: none; }
.ssug--houses .ssug__i { justify-content: center; min-height: 40px; padding: var(--s2); }

/* ── оптовая цена: от 12 штук одного товара −10 % ───────────
   Синяя метка-плашка — тот же язык, что у выбранной подкатегории: это не
   акция (лаймовый бейдж), а постоянное правило магазина */
.card__opt {
  justify-self: start; align-self: start; width: fit-content;
  margin-top: var(--s1); padding: 3px 8px; border-radius: 6px;
  background: #eef1fd; color: var(--accent);
  font-size: 12px; font-weight: 500; line-height: 1.35;
}
.crow__opt { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--accent); }
.crow__opt.is-on { font-weight: 600; }
.stepper__mid small.is-opt { color: var(--accent); }
.prod__opt {
  flex: 1 0 100%; order: 9;
  padding: var(--s2) var(--s3); border-radius: 10px;
  background: #eef1fd; color: var(--accent); font-size: var(--fs-caption);
}
.prod__opt b { font-family: Geologica, sans-serif; font-weight: 700; font-size: 1.15em; }

/* горизонтальные ленты — только вбок (см. то же правило в mobile.css) */
@media (max-width: 999px) {
  .cat__list, .subchips:not([hidden]) { overflow-y: hidden; overscroll-behavior-x: contain; }
}

/* сердечко на карточке вдвое меньше: видимый кружок 24px с сердцем 13px.
   Сама кнопка остаётся 36px (44 под палец) и прозрачной — попадать в неё
   так же легко, рисует кружок ::before. Кружок стоит в 8px от угла кадра */
.card .fav { top: 2px; right: 2px; background: none; }
.card .fav::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px;
  margin: -12px 0 0 -12px; border-radius: 50%; background: var(--surface);
}
.card .fav svg { position: relative; width: 13px; height: 13px; }
@media (pointer: coarse) { .card .fav { top: -2px; right: -2px; } }

/* переход между страницами — короткое растворение вместо белой вспышки
   (Chrome, Edge, Safari 18.2+; остальные переходят как раньше) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
}

/* ── Карусель на главной (2026-10-08) ─────────────────────────────
   Заменила плитки .promo и отдельный заголовок .ptitle: h1 страницы теперь
   в первой карточке. На компьютере видно 4 карточки и край пятой, на телефоне
   3 и край четвёртой — ширина считается от полосы. Карточки тёмные
   («студия»), первая — морозное стекло. Источник макетов —
   design-mockups/hero-carousel/ (варианты A + H1-3). */
.car { position: relative; min-width: 0; }
.car__track {
  display: flex; gap: 12px;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.car__track::-webkit-scrollbar { display: none; }
.car__item { flex: 0 0 calc((100% - 3 * 12px - 44px) / 4); min-width: 0; scroll-snap-align: start; }
.car__card {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 3 / 4; border-radius: 18px;
  background: #0b1240; color: var(--on-dark); text-decoration: none;
}
.car__card:hover { color: var(--on-dark); }
.car__img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.car__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.car__text { padding: 14px 14px 0; display: grid; gap: 6px; }
.car__title {
  margin: 0; color: inherit; font-size: clamp(15px, .55rem + .7vw, 22px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; hyphens: manual;
}
.car__note { margin: 0; max-width: 24ch; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--muted-dark); }
.car__badge {
  justify-self: start; margin-top: var(--s1); padding: 2px 8px; border-radius: 999px;
  background: var(--frost); color: var(--ink);
  font: 700 12px/1.2 Rubik, sans-serif; font-variant-numeric: tabular-nums;
}
/* первая карточка: фон = цвет верха кадра (не мигает при загрузке),
   затемнение только под текстом — белый ≥ 4.5:1 по замеру пикселей */
.car__card--hero { background: rgb(13 34 120); }
.car__card--hero .car__img { z-index: -2; }
.car__card--hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(13 34 120 / .72) 0%, rgb(13 34 120 / .45) 40%, rgb(13 34 120 / 0) 62%);
}
.car__card--hero .car__title { text-shadow: 0 1px 10px rgb(0 0 0 / .28); }
.car__card--hero .car__note { color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .3); }
/* узкая карточка на компьютере: текст занимает верхние 62 % — продукты опускаем */
@media (min-width: 721px) and (max-width: 1700px) {
  .car__card--hero .car__img {
    top: 18%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10%);
  }
}
/* круглая кнопка листания садится на край ленты */
/* Стрелка — «выемка» цвета страницы на краю ленты, как у Самоката
   (владелец, 2026-10-08). Форма — одна SVG-маска: без швов между кусками.
   Заходит на 1px за край ленты, чтобы не просвечивал край карточки */
.car__btn {
  position: absolute; top: 50%; z-index: 2;
  width: 33px; height: 84px; margin-top: -42px;
  display: grid; place-items: center;
  padding: 0; border: 0;
  background: var(--bg); color: var(--muted); cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 84' preserveAspectRatio='none'%3E%3Cpath d='M32 0V84H31C31 72 3 70 3 42C3 14 31 12 31 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 84' preserveAspectRatio='none'%3E%3Cpath d='M32 0V84H31C31 72 3 70 3 42C3 14 31 12 31 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: color 150ms cubic-bezier(.22, 1, .36, 1);
}
.car__btn:hover { color: var(--ink); }
.car__btn:focus-visible { outline: none; color: var(--accent); }
.car__btn:focus-visible svg { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.car__btn[hidden] { display: none; }
.car__btn--next { right: -1px; padding-left: 6px; }
.car__btn--prev { left: -1px; padding-left: 6px; transform: scaleX(-1); } /* та же форма зеркально */
.car__btn--prev svg { transform: scaleX(-1); }
.car__btn svg { width: 20px; height: 20px; }
@media (hover: none) { .car__btn { display: none; } }
@media (max-width: 720px) {
  .layout > .col > .car { order: 2; }
  .car__track {
    gap: 8px; margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4);
    scroll-padding-inline: var(--s4);
  }
  .car__item { flex-basis: calc((100% - 2 * 8px - 26px) / 3); }
  .car__card { border-radius: 14px; }
  .car__btn { display: none; }
  .car__text { padding: 9px 8px 0; gap: 4px; }
  .car__title { font-size: 13px; line-height: 1.12; letter-spacing: -.01em; }
  .car__card--hero .car__title { font-size: 11.5px; letter-spacing: -.02em; }
  .car__note { display: none; }
  .car__badge { font-size: 11px; padding: 1px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .car__track { scroll-behavior: auto; }
  .car__img, .car__btn { transition: none; }
  .car__card:hover .car__img { transform: none; }
}
/* кегль — от ширины самой карточки: на 1280 она ~140px, на 1920 ~250px.
   В узкой карточке подпись не помещается рядом с картинкой — прячем */
@media (min-width: 721px) {
  .car__card { container-type: inline-size; }
  .car__title { font-size: clamp(13px, 10.4cqi, 22px); }
  .car__card--hero .car__title { font-size: clamp(12px, 9.4cqi, 20px); }
  @container (max-width: 170px) { .car__note { display: none; } }
}

/* Шапка по краю контента (владелец, 2026-10-08). На страницах с каталогом
   слева видимый край — значки категорий (отступ ссылки --s3), справа —
   текст панели «Доставка…» (отступ панели --s5). Шапка и подвал встают по ним же */
@media (min-width: 1000px) {
  body:has(.layout > .cat) .hdr__inner,
  body:has(.layout > .cat) .foot > .wrap { padding-left: calc(var(--s4) + var(--s3)); }
}
@media (min-width: 1200px) {
  body:has(.layout > .side) .hdr__inner,
  body:has(.layout > .side) .foot > .wrap { padding-right: calc(var(--s4) + var(--s5)); }
}

/* Панель корзины постоянной высоты (владелец, 2026-10-08): пустая и полная
   одного размера, от числа товаров не растёт и не сжимается — длинный
   список листается внутри. Полная — как в Лавке: срок и цена доставки
   с полоской до бесплатной, компактные строки, внизу кнопка с суммой */
.side .panel--cart {
  display: flex; flex-direction: column;
  height: min(664px, calc(100vh - 84px - var(--s5)));
}
html:not(.cart-empty) .panel--cart > .panel__head { display: none; }
html:not(.cart-empty) .panel--cart [data-cart-body] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel--cart .mini-wrap { flex: 1; min-height: 0; margin-bottom: 0; }
.panel--cart .mini { height: 100%; max-height: none; gap: 14px; align-content: start; }
.mtop { margin-bottom: var(--s4); }
.mtop__h { font-family: Geologica, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0 0 2px; }
.mtop__bar { height: 4px; border-radius: 4px; background: var(--surface-2); margin-top: var(--s3); overflow: hidden; }
.mtop__bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transform-origin: left; }
.mfoot { border-top: 1px solid var(--edge); padding-top: var(--s4); margin-top: var(--s3); }
.crow--x { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.crow--x .crow__ph { width: 56px; height: 56px; padding: 4px; border-radius: 12px; }
.crow--x .crow__name { padding-right: 0; font-size: 13px; line-height: 1.25; }
.crow__meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.crow__meta b { color: var(--ink); font-weight: 700; }
.crow__meta s { color: var(--muted); }
.crow--x .crow__opt { font-size: 12px; margin-top: 2px; }
/* счётчик в компактной строке уже: названию остаётся больше места */
.crow--x .stepper--sm { height: 32px; grid-template-columns: 30px minmax(18px, auto) 30px; }
.crow--x .stepper--sm button { width: 30px; height: 32px; }

/* кнопка «наверх» только для телефона — правила в mobile.css */
.totop { display: none; }

/* вход в оформлении: поля и кнопка шли вплотную — «Войти» прилипала к паролю */
#co-login-form { display: grid; gap: var(--s4); }
#co-login-form .btn { margin-top: var(--s1); }