/* SliceDash Pizza — design tokens.
   Тёмная витрина: фон каталога #101217, карточка 202×329 r32,
   цена-пилюля #27272B r9999 12/20, бейдж r16, кнопка корзины h52, сторис 193×241 r24 */
:root {
  --bg: #000;
  --board: #101217;
  --card: #27272b;
  --card-2: #181a1f;
  --text: #fff;
  --muted: #9d9d9d;
  --accent: #ff5722;
  --accent-hover: #ff7043;
  --badge: #ff3d7f;
  --pill: #27272b;
  --r-card: 32px;
  --r-img: 24px;
  --r-story: 24px;
  --container: 1092px;
  --sidebar: 190px;
  --header-h: 76px;
  --card-w: 202px;
  --live: #22c55e;
  --live-dim: rgba(34, 197, 94, .3);
}

* { box-sizing: border-box; }
/* место под вертикальный скроллбар резервируем сразу: иначе первый кадр
   (пустой DOM, документ ниже вьюпорта) шире итогового на ширину скроллбара,
   и в момент рендера каталога вся центрированная вёрстка прыгает влево */
html { overflow-x: clip; scrollbar-gutter: stable; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  height: 44px; font-size: 14px; color: #d3d3d5; position: relative;
}
.topbar__nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.topbar__nav a:hover { color: #fff; }
/* Пункт «Live Kitchen»: точка 9×9 слева от текста, пульсирует прозрачностью
   заливки — 2s ease-in-out infinite, как в референсе (там точка красная,
   у нас зелёная #22C55E). В виджете те же keyframes крутятся за 1.25s. */
.topbar__nav .live { position: relative; padding-left: 14px; }
.topbar__nav .live::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--live);
  animation: live-pulse 2s ease-in-out infinite;
}
.topbar__nav .live[aria-pressed="true"] { color: #fff; }

@keyframes live-pulse {
  0%   { background: var(--live); }
  50%  { background: var(--live-dim); }
  100% { background: var(--live); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar__nav .live::before, .livecam__dot { animation: none; }
}
.topbar__lang {
  position: absolute; right: 32px; display: flex; align-items: center; gap: 6px;
  background: none; border: 0; color: #d3d3d5; font-size: 14px;
}

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: var(--bg); }
.header__inner {
  max-width: var(--container); margin: 0 auto; padding: 12px 0;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 26px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo {
  width: auto; height: 44px; flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.brand__sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.delivery { font-size: 15px; }
.delivery__line { color: #e6e6e6; }
.delivery__city { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; }
.delivery__meta { color: #e6e6e6; font-weight: 600; font-size: 15px; margin-top: 3px; }
.rating::after { content: " \2605"; color: #ffc531; }
.header__actions { display: flex; gap: 10px; justify-self: end; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px;
  border: 0; border-radius: 9999px; background: var(--pill); color: #fff; font-weight: 500; font-size: 16px;
  transition: background .15s ease, transform .1s ease;
}
.btn:active { transform: scale(.98); }
.btn--accent { background: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ghost { background: var(--card); }
.btn--ghost:hover { background: #323238; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { background: var(--card); color: var(--muted); cursor: not-allowed; }
.btn[disabled]:hover { background: var(--card); }
.btn[disabled]:active { transform: none; }

/* ---------- бургер и мобильное меню ----------
   Эталон отдаёт телефону сплошной лист во весь экран: строки 56px, шрифт 20/600,
   отступ слева 48px (колонка под значок), группы разделены линией
   rgba(255,255,255,.3), появление — простое затухание.
   Мы берём ту же геометрию строк, но лист держим панелью под шапкой на
   затемнённой подложке: контент занимает не весь экран, и остаток внизу
   работает как область «тапнул мимо — закрылось». */
.burger {
  display: none; width: 44px; height: 44px; flex: none; padding: 0;
  border: 0; border-radius: 12px; background: none; color: #fff; place-items: center;
}
.burger:active { background: rgba(255, 255, 255, .08); }
.burger__box { position: relative; display: block; width: 22px; height: 16px; }
.burger__box i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .16s ease;
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 7px; }
.burger__box i:nth-child(3) { top: 14px; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.msheet { display: none; }

@media (max-width: 720px) {
  .burger { display: grid; }

  /* подложка на весь экран ниже шапки: шапка остаётся сверху, потому что
     в ней же живёт кнопка, которая меню и закрывает */
  .msheet {
    display: block; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
    z-index: 39; background: rgba(0, 0, 0, .55);
    opacity: 0; transition: opacity .26s ease-out;
  }
  .msheet.is-open { opacity: 1; }

  .msheet__panel {
    max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
    background: #171717; padding-bottom: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    transform: translateY(-12px);
    transition: transform .26s cubic-bezier(.2, .8, .3, 1);
  }
  .msheet.is-open .msheet__panel { transform: none; }

  .msheet__group { padding: 4px 0; }
  .msheet__group + .msheet__group { border-top: 1px solid rgba(255, 255, 255, .3); }

  .msheet__link {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 16px 20px 16px 48px;
    font-size: 20px; font-weight: 600; line-height: 24px; color: #fff;
  }
  .msheet__link:active { background: rgba(255, 255, 255, .06); }
  /* точка трансляции садится в ту самую колонку под значок */
  .msheet__link.live::before {
    content: ""; position: absolute; left: 27px; top: 50%; margin-top: -4.5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--live);
    animation: live-pulse 2s ease-in-out infinite;
  }

  .msheet__title {
    margin: 8px 0 2px; padding: 0 20px 0 48px;
    font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted);
  }
  .msheet__check { flex: none; color: var(--accent); opacity: 0; }
  .msheet__link--lang[aria-current="true"] .msheet__check { opacity: 1; }

  .msheet__meta { display: flex; flex-direction: column; padding: 12px 20px 12px 48px; }
  .msheet__city { font-size: 20px; font-weight: 700; line-height: 24px; }
  .msheet__eta { margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--muted); }
}

@media (prefers-reduced-motion: reduce) {
  .msheet, .msheet__panel, .burger__box i { transition: none; }
  .msheet__link.live::before { animation: none; }
}

/* ---------- stories ---------- */
.stories { max-width: var(--container); margin: 6px auto 24px; display: flex; gap: 12px; }
.story {
  position: relative; width: 193px; height: 241px; border-radius: var(--r-story); overflow: hidden;
  flex: none; background: var(--card); cursor: pointer; border: 0; padding: 0; color: inherit;
  transition: box-shadow .3s ease;
}
/* мягкое свечение по контуру карточки на ховере: тонкий световой кант плюс
   размытый ореол. Без transform — плашка не должна дёргаться под курсором. */
.story:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 0 24px 4px rgba(255, 255, 255, .22);
}
/* картинка на всю плашку, подпись — CSS-лейбл слева снизу */
.story__img { width: 100%; height: 100%; object-fit: cover; }
/* затемнение снизу, чтобы подпись читалась на любой картинке */
.story::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 100%); pointer-events: none;
}
.story__label {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  font-size: 15px; font-weight: 700; line-height: 1.2; text-align: left; color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

/* ---------- board ---------- */
.board { background: var(--board); border-radius: 0 0 60px 60px; padding-bottom: 64px; }
.board__inner { max-width: var(--container); margin: 0 auto; }
.catnav {
  position: sticky; top: var(--header-h); z-index: 30; background: var(--board);
  padding: 16px 0 12px; display: flex; gap: 8px; align-items: center;
}
.catnav__more { position: relative; }
.catnav__more .catnav__item { display: inline-flex; align-items: center; gap: 4px; }
.catnav__drop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
  background: #1f2026; border-radius: 20px; padding: 8px; min-width: 200px;
  display: grid; gap: 2px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.catnav__drop .catnav__item { width: 100%; text-align: left; }
.catnav__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.catnav__list::-webkit-scrollbar { display: none; }
.catnav__item {
  flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 9999px;
  background: transparent; color: #e6e6e6; font-size: 16px; font-weight: 500; white-space: nowrap;
}
.catnav__item:hover { background: var(--card); }
.catnav__item[aria-current="true"] { background: #fff; color: #101217; font-weight: 600; }

.board__cols { display: grid; grid-template-columns: 1fr var(--sidebar); gap: 24px; align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 68px); display: grid; gap: 12px; }
/* баннер сайдбара: картинка на всю карточку, поверх — текст и мелкая строка внизу */
.banner {
  position: relative; border-radius: var(--r-story); overflow: hidden;
  aspect-ratio: 282 / 365; padding: 16px 14px 0; color: #fff;
  display: flex; flex-direction: column; background: var(--card);
}
.banner__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.banner__title {
  position: relative; z-index: 1;
  font-size: 18px; font-weight: 700; line-height: 1.15; margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.banner__sub {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 400; margin: 0; opacity: .9;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
/* вариант glass: картинка (парящий объект) остаётся во всю карточку, а текст
   переезжает в матовую стеклянную плашку у нижнего края. Объект по композиции
   заходит на верхнюю границу плашки, поэтому backdrop-filter реально размывает
   его нижнюю часть — как в референсе с надувной буквой за стеклом. */
.banner--glass { padding: 0; color: #1a1a1a; }
/* кадрируем сцену выше центра, чтобы низ объекта заходил за верхний край плашки */
.banner--glass .banner__img { object-position: center 20%; }
.banner__glass {
  position: absolute; z-index: 1; left: 7%; right: 7%; bottom: 12px; height: 48%;
  border-radius: 16px; padding: 14px 14px 12px;
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 6px 18px rgba(0, 0, 0, .06);
  display: flex; flex-direction: column;
}
.banner--glass .banner__title { color: #1a1a1a; text-shadow: none; }
.banner--glass .banner__sub { color: #1a1a1a; text-shadow: none; opacity: .72; }
.banner__brand {
  position: absolute; left: 14px; bottom: 12px;
  width: 26px; height: 26px; object-fit: contain;
  /* кремовая часть знака почти сливается с матовым стеклом — отделяем тенью */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}
/* мелкий юридический текст в баннере не используется — поле legal убрано из данных,
   правило оставлено на случай возврата дисклеймера в конкретной юрисдикции */
.banner__legal {
  z-index: 1;
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  font-size: 5px; line-height: 1.25; font-weight: 400; color: rgba(255,255,255,.55); margin: 0;
}
/* вариант dark: текст рисуется прямо на картинке (без стеклянной плашки) —
   сцена держит спокойные верхние ~32% кадра пустыми под заголовок/подпись. */
.banner--dark .banner__img { object-fit: cover; object-position: center 40%; }
.banner--dark .banner__title { color: #fff; font-size: 18px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.banner--dark .banner__sub { color: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 500; text-shadow: none; opacity: 1; }

/* ---------- catalog ---------- */
.promo-row { display: flex; gap: 8px; margin-bottom: 30px; }
.promo {
  width: 140px; height: 224px; background: var(--card); border-radius: var(--r-card); padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; color: inherit; text-align: center;
  transition: transform .3s ease;
}
/* содержимое уезжает вниз — карточка целиком, без масштабирования картинки */
.promo:hover { transform: translateY(2px); }
.promo img { width: 116px; height: 116px; object-fit: cover; border-radius: var(--r-img); }
.promo__name { font-size: 14px; font-weight: 500; line-height: 1.2; flex: 1; }
.promo__price {
  font-size: 14px; font-weight: 500; background: var(--card-2); border-radius: 9999px; padding: 9px 12px;
}

/* contain-intrinsic-size с одним значением длины применяется к ОБЕИМ осям,
   поэтому пропущенные рендером категории заявляли ширину 900px, она становилась
   min-content колонки .board__main и раздувала грид 1fr+190 за пределы контейнера
   (878 -> 900, сайдбар вылезал на 22px). Ширину отдаём авто, придерживаем только высоту. */
.cat {
  scroll-margin-top: calc(var(--header-h) + 70px);
  content-visibility: auto;
  contain-intrinsic-width: none;
  contain-intrinsic-height: auto 900px;
}
.cat__title { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 20px; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, var(--card-w));
  justify-content: space-between; gap: 24px 22px;
}

.card {
  position: relative; border: 0; background: none; padding: 0 0 8px; color: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: var(--r-card);
  min-height: 329px;
  transition: background-color .3s ease, transform .3s ease;
}
/* hover как у эталона (замер в tmp/research-hover.md): сама карточка стоит,
   вниз уезжает только картинка — там два вложенных контейнера изображения
   по translateY(4px), суммарно 8px; бейдж лежит во внешнем и едет на 4px.
   Тайминг у всех — transform .3s ease, без задержки, вход и выход симметричны */
.card:hover .card__media { transform: translateY(8px); }
.card:hover .card__tag { transform: translateY(4px) rotate(-6deg); }
.card__media {
  transition: transform .3s ease;
  width: 100%; aspect-ratio: 1; border-radius: var(--r-img); overflow: hidden; background: transparent;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__name { font-size: 20px; font-weight: 600; line-height: 1.3; padding: 0 8px; }
/* значки после названия — часть строки заголовка */
.pt-icons { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.pt-icons svg { display: block; width: 16px; height: 16px; }
.pt-emoji { font-size: 16px; line-height: 1; }
.card__price {
  font-size: 16px; font-weight: 500; background: var(--pill); border-radius: 9999px; padding: 12px 20px;
  margin-top: auto; transition: background-color .2s ease;
}
/* пилюля подсвечивается только под самим курсором, лёгким осветлением */
.card__price:hover { background: #35353c; }

/* hero-карточка как у эталона: сплошной цвет товара на всю карточку,
   картинка встык к верхнему краю без своего скругления — верхние углы режет
   сама карточка (r32 + overflow hidden), поэтому стыка и тёмных зарубок нет */
.card--hero {
  padding: 0 0 16px; gap: 12px;
  overflow: hidden;
  background-color: var(--hero);
  background-image: none;
}
.card--hero .card__media { border-radius: 0; }
/* у hero эталон двигает карточку целиком на 2px и гасит смещение картинки,
   поэтому картинка едет вместе с карточкой, а не отдельно от неё */
.card--hero:hover { transform: translateY(2px); }
.card--hero:hover .card__media { transform: none; }
.card--hero:hover .card__tag { transform: rotate(-6deg); }
.card--hero .card__price { background: rgba(0, 0, 0, .28); }
.card--hero .card__price:hover { background: rgba(0, 0, 0, .45); }
.card--theme-dark .card__name, .card--theme-dark .card__price { color: #101217; }

/* бейдж: слева сверху и с наклоном, как у эталона —
   top 12 / left 10 от картинки, rotate(-6deg), высота 30, r16, 14/18, letter-spacing -0.32 */
.card__tag {
  position: absolute; top: 12px; left: 10px; z-index: 2;
  transform: rotate(-6deg); transform-origin: 50% 50%;
  transition: transform .3s ease;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; max-height: 30px; padding: 6px 12px; border-radius: 16px;
  font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -0.32px;
  background: var(--badge); color: #fff; white-space: nowrap; text-transform: lowercase;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .5);
}
.card__tag[data-tag="best price" i] { background: #ffd600; color: #101217; }

/* ---------- modal ---------- */
/* Затемнение страницы. Значения сняты с референса (research-cart2.md §b):
   rgba(0,0,0,.64) и opacity .3s ease-out — тайминг совпадает с выездом ящика,
   поэтому фон и панель гаснут одной волной. */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.64); z-index: 50;
  opacity: 0; transition: opacity .3s ease-out;
}
.overlay.is-on { opacity: 1; }
.modal {
  position: fixed; z-index: 60; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.97); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  width: min(1000px, calc(100vw - 40px)); height: min(680px, calc(100vh - 60px));
  background: #1f2026; border-radius: var(--r-card);
}
.modal.is-open { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.modal__close {
  position: absolute; top: 6px; right: -52px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 16px;
}
.modal__body { display: grid; grid-template-columns: 1.1fr 1fr; height: 100%; border-radius: var(--r-card); overflow: hidden; }
.modal__media {
  background: #16181d; display: grid; place-items: center; padding: 28px;
  position: relative; --media-w: 400px;
}
/* масштаб по выбранному размеру: --psize ставит app.js, ступени сняты с эталона */
.modal__media > img, .halves {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--media-w);
  transform: scale(var(--psize, 1)); transform-origin: 50% 50%;
  transition: transform .25s ease-in-out;
}
.modal__media.no-anim > img, .modal__media.no-anim .halves { transition: none; }

/* превью половинок: две зоны по 50% с overflow hidden, внутри полноразмерная картинка */
.halves { aspect-ratio: 1; }
.halves__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.halves__side { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.halves__side--l { left: 0; }
.halves__side--r { right: 0; }
/* max-width: none — иначе базовый сброс img обрезает картинку по ширине зоны */
.halves__side img { position: absolute; top: 0; width: 200%; max-width: none; height: 100%; object-fit: contain; }
.halves__side--l img { left: 0; }
.halves__side--r img { left: -100%; }
.halves__split {
  position: absolute; left: 50%; top: 6%; bottom: 6%; width: 0;
  border-left: 1px dashed rgba(255, 255, 255, .35);
}
/* пунктирные окружности — подсказка про размеры крупнее выбранного */
.rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; }
.rings .ring {
  grid-area: 1 / 1;
  width: calc(var(--media-w) * var(--k)); height: calc(var(--media-w) * var(--k));
}
.modal__side { display: flex; flex-direction: column; min-height: 0; padding: 28px 28px 0; }
.modal__scroll { overflow-y: auto; padding-right: 8px; flex: 1; }
.modal__scroll::-webkit-scrollbar { width: 6px; }
.modal__scroll::-webkit-scrollbar-thumb { background: #3a3a3f; border-radius: 6px; }
.modal__title { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.modal__subtitle { font-size: 14px; color: var(--muted); font-weight: 400; margin: 0 0 10px; }
.modal__composition { font-size: 14px; line-height: 1.45; color: #dcdcdc; font-weight: 400; margin: 0 0 18px; }

.seg { display: flex; background: #16181d; border-radius: 9999px; padding: 4px; margin-bottom: 8px; }
.seg__item {
  flex: 1; height: 40px; border: 0; border-radius: 9999px; background: transparent;
  color: #e4e4e4; font-size: 14px; font-weight: 500;
}
.seg__item[aria-pressed="true"] { background: #3d3f47; color: #fff; }
.seg:empty { display: none; }

.addons { margin-top: 22px; }
.addons__title { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.addons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.addon {
  border: 2px solid transparent; background: #27272b; border-radius: 20px; padding: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: inherit;
}
.addon[aria-pressed="true"] { border-color: var(--accent); }
.addon img { width: 76px; height: 76px; object-fit: contain; }
.addon__name { font-size: 12px; line-height: 1.2; font-weight: 400; flex: 1; }
.addon__price { font-size: 14px; font-weight: 600; }
.modal__cta { padding: 18px 0 22px; background: #1f2026; }

/* ---------- builders ---------- */
.builder:empty { display: none; }
.builder { margin-top: 18px; }
.builder__title { font-size: 18px; font-weight: 700; margin: 18px 0 12px; }
.builder__back {
  background: none; border: 0; padding: 0; color: var(--accent); font-size: 14px; font-weight: 600;
}

.bslots { display: grid; gap: 8px; }
.bslot {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: #16181d; border: 2px solid transparent; border-radius: 16px; padding: 8px 10px; color: inherit;
}
.bslot[aria-pressed="true"] { border-color: var(--accent); }
.bslot__thumb {
  width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--card); overflow: hidden;
}
.bslot__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bslot__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bslot__text b { font-size: 14px; font-weight: 600; }
.bslot__text i { font-size: 12px; font-style: normal; font-weight: 400; color: var(--muted); }

.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bpick {
  border: 2px solid transparent; background: #27272b; border-radius: 20px; padding: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: inherit;
}
.bpick[aria-pressed="true"] { border-color: var(--accent); }
.bpick img { width: 72px; height: 72px; object-fit: contain; }
.bpick__name { font-size: 12px; line-height: 1.2; font-weight: 400; flex: 1; }
.bpick__price { font-size: 13px; font-weight: 600; }
.bpick__price--delta { color: var(--accent); }

.bslots--three { gap: 10px; }
.tslot {
  display: flex; gap: 10px; background: #16181d; border-radius: 16px; padding: 10px;
}
.tslot > img { width: 68px; height: 68px; flex: none; border-radius: 12px; object-fit: cover; background: var(--card); }
.tslot__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.tslot__name { font-size: 15px; font-weight: 600; }
.tslot__meta { font-size: 12px; font-style: normal; font-weight: 400; color: var(--muted); }
.tslot__comp { font-size: 12px; font-weight: 400; line-height: 1.35; color: #c9c9c9; margin: 2px 0 6px; }
.tslot__replace {
  border: 0; border-radius: 9999px; padding: 8px 16px; font-size: 14px; font-weight: 500;
  background: rgba(255, 87, 34, .18); color: var(--accent-hover);
}
.tslot__replace:hover { background: rgba(255, 87, 34, .3); }

.deal-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.deal-price b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.deal-price__old {
  font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, .6);
  text-decoration-line: line-through; text-decoration-color: rgba(255, 87, 34, .8); text-decoration-thickness: 2px;
}
.btn:disabled { background: #3a3a40; cursor: default; }

/* ---------- cart ----------
   Ширина и движение — по замерам референса (research-cart2.md §b): панель 430px,
   едет ровно на свою ширину (translateX(100%)) за 300ms cubic-bezier(.5,1,.5,1),
   закрытие анимируется тем же переходом в обратную сторону. Контент страницы при
   этом не сдвигается: скролл гасится overflow:hidden на body, ширина не меняется. */
.cart {
  position: fixed; z-index: 60; top: 0; right: 0; height: 100vh; width: 430px;
  background: #16181d; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.5, 1, .5, 1);
  will-change: transform;
}
.cart.is-open { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; }
.cart__head h2 { font-size: 24px; margin: 0; }
.cart__close { background: none; border: 0; color: var(--muted); font-size: 16px; }
/* переключатель Classic / Extended: пилюля 28px на тёмной подложке, активный — светлая пилюля */
.cartswitch {
  display: inline-flex; margin-left: auto; margin-right: 14px; padding: 2px; height: 28px;
  border-radius: 9999px; background: #23252b;
}
.cartswitch__item {
  height: 24px; padding: 0 10px; border: 0; border-radius: 9999px; background: none;
  color: var(--muted); font-size: 12px; line-height: 24px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.cartswitch__item:hover { color: #fff; }
.cartswitch__item[aria-pressed="true"] { background: #3d3f47; color: #fff; }
/* тело ящика — обёртка над полосой доставки, списком и допродажами; в v1 она
   прозрачная для раскладки (колонка с тем же flex), скроллится только список */
.cart__body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart__list { flex: 1; overflow-y: auto; padding: 6px 24px; display: grid; gap: 16px; align-content: start; }
/* пустая корзина: иллюстрация во всю ширину ящика + заголовок и подпись по центру.
   Пропорции с референса (research-cart2.md §a): картинка в край панели, зазор до
   текста 64px, заголовок 24/28/700, подпись 16/20/500 при 60% белого. */
.cart__list.is-empty { align-content: center; }
.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.cart-empty__img {
  display: block; width: calc(100% + 48px); max-width: none; margin: 0 -24px; height: auto;
}
.cart-empty__text { padding: 0 30px; text-align: center; }
.cart-empty__text h3 { margin: 0 0 8px; font-size: 24px; line-height: 28px; font-weight: 700; }
.cart-empty__text p { margin: 0; font-size: 16px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.cart-line img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--card); }
.cart-line__name { font-size: 15px; font-weight: 600; }
.cart-line__meta { font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.3; }
.cart-line__price { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cart-line__qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cart-line__qty button {
  width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--card); font-size: 15px; line-height: 1;
}
/* допродажи: под списком, над итогом; карточка 280x108 r12 на фоне --card-2 */
.upsell { flex: none; padding: 4px 0 10px; }
.upsell__title { font-size: 20px; font-weight: 600; line-height: 24px; margin: 12px 24px 10px; }
/* Ряд — горизонтальный слайдер: нативный скролл со snap по началу карточки
   (на тач-устройствах свайп работает сам), на десктопе поверх него — протяжка
   мышью через pointer events (в референсе слайдер тоже тянется мышью и на
   отпускании доводится до границы слайда). */
.upsell__row {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 0 24px 4px; scroll-snap-type: x mandatory; scroll-padding-left: 24px;
  overscroll-behavior-x: contain; cursor: grab;
}
.upsell__row::-webkit-scrollbar { display: none; }
.upsell__row.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.upsell__row.is-dragging * { pointer-events: none; }
/* плитка категории: 80x108, иконка 72x72 и подпись — первые слайды ряда */
.upsell-tile {
  flex: none; width: 80px; height: 108px; scroll-snap-align: start;
  background: var(--card-2); border: 0; border-radius: 12px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  color: inherit; font: inherit; text-align: center; cursor: pointer;
  transition: background .15s ease;
}
.upsell-tile:hover { background: #1f222a; }
.upsell-tile img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.upsell-tile span { font-size: 14px; line-height: 18px; font-weight: 500; }
.upsell-card {
  flex: none; width: 280px; height: 108px; scroll-snap-align: start;
  background: var(--card-2); border-radius: 12px; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
}
.upsell-card img {
  width: 92px; height: 92px; border-radius: 8px; object-fit: cover; flex: none; background: var(--card);
}
.upsell-card__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.upsell-card__name { font-size: 14px; font-weight: 500; line-height: 18px; }
.upsell-card__price { font-size: 16px; font-weight: 500; font-style: normal; }
.upsell-card__add {
  width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 20px; line-height: 1;
  display: grid; place-items: center; transition: background .15s ease;
}
.upsell-card__add:hover { background: var(--accent-hover); }
.upsell-card__add:active { transform: scale(.94); }

/* Шторка категории. Геометрия и тайминги сняты с референса (research-cart2.md §c):
   затемнение rgba(0,0,0,.4) только по ширине ящика, панель 9px 9px 0 0,
   padding 0 24px 40px, выезд снизу за 300ms cubic-bezier(.5,1,.5,1). */
.catsheet { position: absolute; inset: 0; z-index: 20; }
.catsheet__scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .3s ease-out;
}
.catsheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 76%;
  display: flex; flex-direction: column;
  background: var(--card-2); border-radius: 9px 9px 0 0; padding: 0 24px 40px;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.5, 1, .5, 1);
  will-change: transform;
}
.catsheet.is-open .catsheet__scrim { opacity: 1; }
.catsheet.is-open .catsheet__panel { transform: none; }
.catsheet__close {
  position: absolute; top: 16px; right: 16px; width: 14px; height: 20px; padding: 0;
  border: 0; background: none; color: #fff; display: grid; place-items: center;
}
.catsheet__close:hover { color: var(--muted); }
.catsheet__title { margin: 48px 0 8px; font-size: 20px; line-height: 24px; font-weight: 600; }
.catsheet__list { overflow-y: auto; scrollbar-width: none; }
.catsheet__list::-webkit-scrollbar { display: none; }
.catrow { display: flex; align-items: center; height: 64px; }
.catrow img { width: 64px; height: 64px; flex: none; border-radius: 12px; object-fit: cover; }
.catrow__name { flex: 1; min-width: 0; padding: 0 12px; font-size: 16px; line-height: 20px; font-weight: 500; }
.catrow__add {
  flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 9999px;
  background: var(--card); color: #fff; font-size: 12px; line-height: 16px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px; transition: background .15s ease;
}
.catrow__add:hover { background: #323238; }
.catrow__add:active { transform: scale(.94); }
.catrow__qty {
  flex: none; display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 16px; font-weight: 500;
}
.catrow__qty button {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--card); color: #fff; font-size: 14px; line-height: 1;
}
.catrow__qty button:hover { background: #323238; }

/* прогресс до бесплатной доставки: строка 13/18 + полоска 4px под шапкой корзины.
   В референсе такого блока нет (там просто минимальная сумма заказа), поэтому типографику
   берём из его футера: 12-14px/500, заливка — акцент витрины. */
.ship { flex: none; padding: 2px 24px 14px; display: grid; gap: 8px; }
.ship__text { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--muted); }
.ship__text b { color: #fff; font-weight: 600; }
.ship.is-done .ship__text { color: var(--live); }
.ship__bar { height: 4px; border-radius: 9999px; background: #23252b; overflow: hidden; }
.ship__fill {
  display: block; height: 100%; width: 0; border-radius: 9999px;
  background: var(--accent); transition: width .3s ease-in-out, background .2s ease-in-out;
}
.ship.is-done .ship__fill { background: var(--live); }

/* промокод: безрамочное поле во всю ширину + оранжевая ссылка «Apply» справа,
   ошибка 12/16 под полем — как в референсе */
.cart__foot { padding: 18px 24px 24px; border-top: 1px solid #23252b; display: grid; gap: 14px; }
.pcode { display: grid; gap: 6px; }
.pcode__field { position: relative; display: flex; align-items: center; }
.pcode__input {
  flex: 1; min-width: 0; height: 20px; padding: 0 90px 0 0;
  border: 0; background: none; color: #fff;
  font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 500;
}
.pcode__input::placeholder { color: var(--muted); }
.pcode__input:focus { outline: none; }
.pcode__apply {
  position: absolute; right: 0; top: 0; width: 80px; height: 20px; padding: 0; border: 0;
  background: none; text-align: right;
  color: #ff8800; font-size: 14px; line-height: 20px; font-weight: 500;
}
.pcode__apply:hover { color: var(--accent-hover); }
.pcode__error { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: #ff323b; }
.pcode__chip {
  display: flex; align-items: center; gap: 8px; align-self: start;
  height: 28px; padding: 0 6px 0 10px; border-radius: 9999px; background: var(--card);
  font-size: 12px; line-height: 16px;
}
.pcode__chip b { font-weight: 600; letter-spacing: .02em; }
.pcode__chip span { color: var(--muted); font-weight: 400; }
.pcode__chip button {
  width: 18px; height: 18px; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 10px; line-height: 1;
  display: grid; place-items: center;
}
.pcode__chip button:hover { background: rgba(255, 255, 255, .24); }

/* подытоги над «Order total»: 12/14 600, как в футере референса */
.cart__sums { display: grid; gap: 6px; }
.cart__sums div { display: flex; justify-content: space-between; font-size: 12px; line-height: 14px; font-weight: 600; }
.cart__sums span:first-child { color: var(--muted); }
.cart__sums .is-free b, .cart__sums .is-discount b { color: var(--live); }
.cart__total { display: flex; justify-content: space-between; font-size: 16px; }

/* ---------- footer ---------- */
.footer { background: var(--bg); padding: 44px 0 64px; }
.footer__inner { max-width: var(--container); margin: 0 auto; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-size: 14px; color: var(--muted); font-weight: 400; }
.footer__cols h4 { color: #fff; font-size: 14px; margin: 0 0 12px; font-weight: 600; }
.footer__cols a { display: block; padding: 4px 0; }
.footer__cols a:hover { color: #fff; }
.footer__stats {
  display: flex; gap: 60px; margin-top: 40px; padding-top: 28px; border-top: 1px solid #1c1e24;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.stat span { font-size: 13px; color: var(--muted); font-weight: 400; }
.stat__prev { opacity: .7; }
.footer__bottom {
  display: flex; align-items: baseline; gap: 20px; margin-top: 32px; flex-wrap: wrap;
}
.footer__brand { font-size: 14px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.footer__legal { font-size: 12px; color: #6a6a6a; line-height: 1.5; font-weight: 400; margin: 0; flex: 1; min-width: 260px; }
.footer__credit { font-size: 12px; color: #6a6a6a; line-height: 1.5; font-weight: 400; margin: 16px 0 0; }
.footer__credit a { color: #6a6a6a; }
.footer__credit a:hover { color: #fff; }

/* ---------- stories viewer ---------- */
/* Бокс слайда: высота = 100vh - 100px, ширина = высота * 360/557 (0.6463). */
.sv {
  position: fixed; inset: 0; z-index: 1100; background: #333;
  user-select: none; -webkit-tap-highlight-color: transparent;
  --sv-w: calc((100vh - 100px) * 0.6463);
}
.sv[hidden] { display: none; }
/* подложка — размытая увеличенная копия обложки текущей сторис */
.sv__bg {
  position: fixed; inset: -60px; pointer-events: none;
  background-image: linear-gradient(rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .9) 100%), var(--sv-cover, none);
  background-size: cover; background-position: center;
  opacity: .56; filter: blur(30px);
}
.sv__stage {
  position: absolute; left: 50%; top: 50px; transform: translateX(-50%);
  height: calc(100vh - 100px); width: var(--sv-w);
  border-radius: 12px; overflow: hidden; background: #000; cursor: pointer;
}
.sv__slide { position: absolute; inset: 0; }
.sv__slide img, .sv__slide video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.sv__slide img { z-index: 1; }
.sv__slide video { z-index: 2; }

.sv__head {
  position: absolute; inset: 0 0 auto 0; z-index: 5; pointer-events: none;
  padding: 8px 8px 32px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .104) 0%, rgba(0, 0, 0, 0) 100%);
}
.sv__bars { display: flex; height: 3px; }
.sv__bars i {
  flex: 1; height: 3px; margin: 0 2px; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, .6);
}
.sv__bars i:first-child { margin-left: 0; }
.sv__bars i:last-child { margin-right: 0; }
.sv__bars i[data-state="done"] { background: #fff; }
.sv__bars i[data-state="current"] {
  background: linear-gradient(to right, #fff var(--tick, 0%), rgba(255, 255, 255, .6) 0);
}
.sv__ctrls { display: flex; height: 32px; margin-top: 8px; }
.sv__pause {
  pointer-events: auto; margin-left: auto;
  width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 9999px;
  background: transparent; color: #fff; cursor: pointer;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
}
.sv__pause:active { opacity: .5; }
.sv__pause svg { display: block; }

.sv__cta {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 35px; z-index: 6;
  width: 72%; height: 66px; border-radius: 33px; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #18181f; font-weight: 700; font-size: 16px;
  font-family: inherit; text-decoration: none; cursor: pointer;
}
.sv__cta:active { opacity: .85; }
.sv__cta[hidden] { display: none; }

.sv__close {
  position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #c2c2c4; cursor: pointer;
}
.sv__close:active { opacity: .5; }

.sv__prev, .sv__next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 36px; height: 29px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #fff; cursor: pointer;
}
.sv__prev { right: calc(50% + var(--sv-w) / 2 + 36px); }
.sv__next { left: calc(50% + var(--sv-w) / 2 + 36px); }
.sv__prev:disabled, .sv__next:disabled { color: #464646; cursor: not-allowed; }

.story[data-read="true"] { opacity: .6; }

@media (max-width: 700px) {
  .sv { --sv-w: 100vw; }
  .sv__stage { top: 0; left: 0; transform: none; width: 100%; height: 100dvh; border-radius: 0; }
  .sv__prev, .sv__next { display: none; }
}

/* ---------- live kitchen ----------
   Маленькое окно 320×180 (16:9) в левом нижнем углу, отступ 10px.
   Разворот — не Fullscreen API, а переход width/left/top 0.3s ease-in-out
   у того же fixed-элемента + подложка rgba(0,0,0,.7), которая всплывает за 200ms.
   Карточка 16:9 центрируется по вертикали внутри позиционера. */
.livecam-backdrop {
  position: fixed; inset: 0; z-index: 1990;
  background: rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .2s ease-in-out;
}
.livecam-backdrop.is-on { opacity: 1; }

.livecam {
  position: fixed; z-index: 2000;
  left: 10px; right: auto; top: auto; bottom: 10px;
  width: 320px; height: 180px;
  display: flex; align-items: center; justify-content: center;
  transition: width .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out,
              top .3s ease-in-out, bottom .3s ease-in-out, height .3s ease-in-out;
}
.livecam__card {
  position: relative; width: 100%; height: 100%;
  border-radius: 12px; overflow: hidden; background: #171717;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .45);
}
.livecam__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* градиент под шапкой — тот же радиальный «купол», что и в референсе,
   только развёрнут вниз, потому что шапка у нас сверху */
.livecam__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle farthest-side at 50% 100%,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .33) 66%, rgba(0, 0, 0, .66) 100%);
}
.livecam__head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 36px; padding: 10px 84px 10px 14px;
  display: flex; align-items: center;
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -.12px;
  color: #fff;
}
.livecam__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livecam__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px;
  background: var(--live);
  animation: live-pulse 1.25s infinite;
}

.livecam__controls {
  position: absolute; top: 6px; right: 8px; z-index: 3;
  display: flex; gap: 2px;
  opacity: 0; transition: opacity .3s ease-in-out;
}
.livecam:hover .livecam__controls,
.livecam:focus-within .livecam__controls,
.livecam.is-full .livecam__controls { opacity: 1; }

.livecam__btn {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .5); color: #fff;
  transition: background .15s ease-in-out, transform .1s ease-in-out;
}
.livecam__btn:hover { background: rgba(0, 0, 0, .8); transform: scale(1.06); }
.livecam__btn--collapse { display: none; }
.livecam.is-full .livecam__btn--collapse { display: grid; }
.livecam.is-full .livecam__btn--expand { display: none; }

/* развёрнутое состояние: 60% ширины окна, по центру, высота ограничена вьюпортом */
.livecam.is-full {
  left: calc(50% - 30vw); right: auto; top: 10px; bottom: 10px;
  width: 60vw; height: calc(100vh - 20px);
}
.livecam.is-full .livecam__card {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  max-height: 100%; max-width: calc((100vh - 20px) * 16 / 9);
}
.livecam.is-full .livecam__head { height: 44px; padding: 12px 96px 12px 18px; font-size: 14px; }
.livecam.is-full .livecam__btn { width: 30px; height: 30px; }
.livecam.is-full .livecam__controls { top: 9px; right: 12px; }

@media (max-width: 1000px) {
  .livecam.is-full { left: calc(50% - 47vw); width: 94vw; }
}
@media (max-width: 700px) {
  .livecam { left: 8px; right: 8px; bottom: 8px; width: auto; height: auto; aspect-ratio: 16 / 9; }
  /* aspect-ratio сбрасываем: иначе он пересчитывает ширину от высоты
     и развёрнутое окно вылезает за экран */
  .livecam.is-full {
    left: 8px; right: 8px; top: 10px; bottom: 10px;
    width: auto; height: calc(100dvh - 20px); aspect-ratio: auto;
  }
  .livecam__controls { opacity: 1; }
}

/* Телефон, развёрнутое окно: именно во весь экран, а не та же карточка чуть
   иначе поставленная — иначе кнопка «развернуть» выглядит сломанной, ведь
   маленькое окно и так во всю ширину. Кадр показываем целиком (contain) на
   чёрном фоне: обрезать кухню по краям ради заполнения экрана незачем.
   Высота — 100dvh: при 100vh нижняя кромка с кнопками уезжала бы под
   адресную строку. Верхний отступ шапки и кнопок учитывает вырез экрана. */
@media (max-width: 720px) {
  .livecam.is-full {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 100dvh; aspect-ratio: auto;
    touch-action: none; /* свайп по кадру не должен листать страницу под ним */
  }
  .livecam.is-full .livecam__card {
    width: 100%; height: 100%; max-width: none; max-height: none;
    aspect-ratio: auto; border-radius: 0; background: #000; box-shadow: none;
  }
  .livecam.is-full .livecam__video { object-fit: contain; }
  .livecam.is-full .livecam__head {
    height: auto; padding: calc(12px + env(safe-area-inset-top)) 104px 12px 16px;
  }
  .livecam.is-full .livecam__controls {
    top: calc(10px + env(safe-area-inset-top)); right: 12px; gap: 6px;
  }
  .livecam.is-full .livecam__btn { width: 36px; height: 36px; border-radius: 8px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1140px) {
  .board__inner, .header__inner, .stories, .footer__inner { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1000px) {
  .board__cols { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .modal__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .modal__media { padding: 16px; --media-w: 220px; }
}
@media (max-width: 720px) {
  /* Телефон. Базовое правило всей секции: ни одна строка не держит фикс. ширину
     в пикселях — иначе flex/grid без wrap отдаёт min-content шире 390px, Chrome
     раздвигает layout viewport (innerWidth становился 619) и отзумливает страницу. */

  /* topbar скрыт, шапка ужимается до 64px. --header-h держит и высоту шапки,
     и sticky-top у .catnav, и scroll-margin у секций: если оставить 76px,
     между шапкой и навигацией остаётся 12px щель, сквозь которую видно карточки. */
  :root { --header-h: 64px; --card-w: 150px; }
  /* резерв под скроллбар нужен только десктопу; на телефоне он оверлейный */
  html { scrollbar-gutter: auto; }
  .topbar { display: none; }
  .header__inner { grid-template-columns: auto 1fr; gap: 12px; }
  .header__actions .btn--ghost { display: none; }
  .header__actions .btn { height: 44px; padding: 0 16px; font-size: 15px; }
  .delivery { display: none; }
  .brand { gap: 10px; }
  .brand__logo { height: 36px; }
  .brand__name { font-size: 20px; }
  .brand__sub { font-size: 11px; }

  /* сторис: три резиновые плашки в ряд (эталон на 390 держит ~96×128),
     ряд скроллится пальцем, если сторис станет больше трёх */
  .stories {
    gap: 8px; margin-bottom: 16px;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .stories::-webkit-scrollbar { display: none; }
  .story {
    width: auto; height: auto; min-width: 0;
    flex: 0 0 calc((100% - 16px) / 3);
    aspect-ratio: 193 / 241; scroll-snap-align: start;
  }
  .story__label { left: 10px; right: 10px; bottom: 10px; font-size: 12px; }

  /* навигация категорий: один ряд во всю ширину с горизонтальным скроллом.
     Кнопку More прячем — на телефоне app.js кладёт все категории в сам ряд,
     иначе последняя видимая пилюля обрезалась о край выпадашки («Snac»). */
  .catnav { padding: 12px 0 10px; }
  .catnav__more { display: none; }
  .catnav__list { flex: 1; min-width: 0; }
  .catnav__item { height: 36px; padding: 0 14px; font-size: 15px; }

  /* колонка каталога — грид-айтем: без min-width:0 её min-content
     (ряд промо) снова растянет колонку шире экрана */
  .board__main { min-width: 0; }
  .board { border-radius: 0 0 32px 32px; padding-bottom: 40px; }

  /* промо: как в эталоне — три резиновые колонки вместо flex 3×140px */
  .promo-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin-bottom: 22px;
  }
  .promo { width: auto; height: auto; min-width: 0; padding: 10px; gap: 6px; }
  .promo img { width: 100%; height: auto; aspect-ratio: 1; }
  .promo__name { font-size: 12px; }
  .promo__price { font-size: 12px; padding: 7px 10px; }

  /* каталог: 2 резиновые колонки. 16 + 169 + 20 + 169 + 16 = 390 — ровно те же
     169px и gap 20, что меряются в эталоне на 390 */
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px; justify-content: stretch;
  }
  /* min-height 329 остался от десктопной карточки: на телефоне контент
     занимает ~250px, а margin-top:auto у цены растягивал остаток в пустоту —
     отсюда огромные вертикальные дыры между рядами */
  .card { width: auto; min-width: 0; min-height: 0; gap: 8px; padding-bottom: 4px; }
  .card__media { aspect-ratio: 1; }
  .card__name { font-size: 15px; line-height: 1.25; padding: 0 6px; }
  .card__price { font-size: 14px; padding: 8px 16px; }
  .card__tag {
    top: 8px; left: 8px; padding: 4px 10px;
    min-height: 26px; max-height: 26px; font-size: 12px; line-height: 16px;
  }
  .cat__title { font-size: 24px; margin: 24px 0 14px; }
  /* оценка высоты для content-visibility снималась с десктопа (4 колонки);
     на двух колонках секция вдвое выше, и заниженная оценка гоняет скролл */
  .cat { contain-intrinsic-height: auto 1400px; }

  .cart { width: 100%; }
  /* на телефоне ящик во весь экран, и картинка в край съедала бы весь первый
     экран — прижимаем её и сокращаем зазор, чтобы текст остался виден */
  .cart-empty { gap: 24px; }
  .cart-empty__img { width: 100%; max-width: 300px; margin: 0; }

  .modal {
    width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; top: 0; left: 0; transform: translateY(12px);
  }
  /* .modal.is-open из базовой части специфичнее (0,2,0) любого правила
     .modal внутри медиа-блока, поэтому её transform перебиваем здесь же:
     иначе translate(-50%,-50%) при top/left:0 уносит окно за левый верхний угол */
  .modal.is-open { transform: none; }
  .modal__body { border-radius: 0; }
  .modal__close { top: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,.18); }
  .modal__side { padding: 20px 16px 0; }
  .modal__cta { padding: 14px 0 18px; }
  .addons__grid, .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* окно трансляции висит z-index 2000 над всем: над открытой корзиной оно
     накрывает футер с промокодом и итогом, над карточкой — кнопку «в корзину» */
  /* и над открытым меню — иначе окно (z-index 2000) накрывает его пункты;
     после закрытия меню окно возвращается на место само */
  body:has(#cart.is-open) .livecam,
  body:has(#productModal.is-open) .livecam,
  body:has(#mobileMenu:not([hidden])) .livecam,
  body:has(.sv:not([hidden])) .livecam { display: none; }
  /* плавающий контакт тоже убираем: он висит поверх затемнённого остатка и
     перехватывает тап, которым меню закрывают */
  body:has(#mobileMenu:not([hidden])) .wa-float { display: none; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__stats { gap: 24px 32px; flex-wrap: wrap; }
  .footer__legal { min-width: 0; }
}

/* ---------- skeleton ----------
   Статическая заглушка в index.html: держит первый кадр в тех же габаритах,
   что и отрисованная витрина, чтобы при появлении данных ничего не прыгало.
   Снимать её кодом не нужно — все контейнеры ниже app.js перетирает
   через innerHTML/textContent, вместе с содержимым уходит и скелетон. */
.sk {
  display: block; flex: none; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  animation: sk-pulse 1.6s ease-in-out infinite;
}
@keyframes sk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}
.sk--nav    { height: 14px; border-radius: 7px; }
.sk--story  { width: 193px; height: 241px; border-radius: var(--r-story); }
.sk--pill   { height: 40px; border-radius: 9999px; }
.sk--promo  { width: 140px; height: 224px; border-radius: var(--r-card); }
.sk--card   { height: 329px; border-radius: var(--r-card); }
.sk--banner { aspect-ratio: 282 / 365; border-radius: var(--r-story); }
.sk--title  { width: 210px; height: 43px; border-radius: 10px; margin: 30px 0 20px; }
.sk--name   { width: 148px; height: 26px; border-radius: 8px; }
.sk--sub    { width: 116px; height: 13px; border-radius: 6px; }
.sk--meta   { width: 54px; height: 16px; border-radius: 6px; display: inline-block; vertical-align: middle; }
.sk--meta-sm { width: 38px; }

/* Мобильный скелетон. Габариты выше сняты с десктопной витрины; на телефоне
   плашки резиновые, и фиксированные 193/140/329px снова задавали бы min-content
   шире экрана — первый кадр отзумливал бы страницу до прихода данных.
   Блок стоит в самом конце файла: правила .sk--* объявлены ниже секции
   responsive, поэтому при равной специфичности перебить их можно только здесь. */
@media (max-width: 720px) {
  .sk--story {
    width: auto; height: auto; min-width: 0;
    flex: 0 0 calc((100% - 16px) / 3); aspect-ratio: 193 / 241;
  }
  .sk--promo { width: auto; height: auto; min-width: 0; aspect-ratio: 117 / 197; }
  .sk--card  { height: auto; aspect-ratio: 169 / 244; }
  .sk--title { width: 160px; height: 33px; margin: 24px 0 14px; }
}

/* ---------- переключатель языка ----------
   Кнопка стояла абсолютом в топбаре; позиционирование переезжает на обёртку,
   чтобы выпадашка висела под кнопкой, а не под всем топбаром. */
.langpick { position: absolute; right: 32px; top: 0; bottom: 0; display: flex; align-items: center; }
.topbar__lang {
  position: static; right: auto; padding: 0;
  border-radius: 8px; transition: color .15s ease;
}
.topbar__lang:hover { color: #fff; }
.topbar__lang-caret { opacity: .7; margin-left: -2px; }
.topbar__lang[aria-expanded="true"] .topbar__lang-caret { transform: rotate(180deg); }
.langpick__drop {
  position: absolute; top: calc(100% - 4px); right: 0; z-index: 45;
  min-width: 168px; padding: 6px; display: grid; gap: 2px;
  background: #1c1c20; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.langpick__drop button {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: #d3d3d5; font-size: 14px; text-align: left;
}
.langpick__drop button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.langpick__drop button[aria-selected="true"] { color: #fff; font-weight: 600; }
/* галочка у активного языка — псевдоэлементом, чтобы не плодить разметку */
.langpick__drop button::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: 0; flex: none;
}
.langpick__drop button[aria-selected="true"]::before { opacity: 1; }

/* ---------- контактный баннер сайдбара ----------
   Тот же стеклянный вариант, но вся карточка — ссылка, а вместо фирменного
   знака у подзаголовка стоит глиф WhatsApp. */
.banner--link { text-decoration: none; cursor: pointer; }
.banner--link:hover .banner__glass { background: rgba(255, 255, 255, .58); }
.banner__sub { display: flex; align-items: center; gap: 6px; }
.banner__wa { flex: none; color: #25d366; }

/* ---------- портфолио-контакт в подвале ----------
   Тёмная карточка, у которой светится только правый край: слой ::before —
   меш-градиент из четырёх размытых пятен плюс диагональный «шёлковый» пробег,
   слой ::after — полутоновая точечная сетка поверх него. Оба слоя срезаны
   маской, чтобы левая половина под текстом осталась чистой темнотой. */
.contact {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 36px; padding: 30px 32px; border-radius: 24px;
  background: #101217;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 26px 60px -34px rgba(0, 0, 0, .95);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
/* Пятна намеренно вылезают за карточку (inset с отрицательными значениями),
   иначе blur() размажет собственный край слоя в видимую полосу. */
.contact::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -55% -18% -55% 34%;
  background:
    /* шёлковые диагональные пробеги поверх пятен */
    linear-gradient(122deg, rgba(255, 255, 255, 0) 34%, rgba(255, 214, 190, .24) 45%, rgba(255, 255, 255, 0) 57%),
    linear-gradient(122deg, rgba(255, 255, 255, 0) 62%, rgba(255, 176, 214, .13) 70%, rgba(255, 255, 255, 0) 80%),
    /* меш: оранжевый → коралл → маджента → фиолет по диагонали к углу */
    /* по вертикали слой в 2.1 раза выше карточки, поэтому видимая полоса —
       это 26…74 % его высоты; центры пятен расставлены именно по ней */
    radial-gradient(48% 30% at 60% 30%, #ff6a1f 0%, rgba(255, 106, 31, 0) 76%),
    radial-gradient(44% 28% at 88% 47%, #ff6b5e 0%, rgba(255, 107, 94, 0) 76%),
    radial-gradient(46% 27% at 54% 65%, #e85d9c 0%, rgba(232, 93, 156, 0) 76%),
    radial-gradient(46% 30% at 86% 78%, #7c4dff 0%, rgba(124, 77, 255, 0) 74%),
    /* тёплая подложка, чтобы стыки пятен не уходили в серость */
    radial-gradient(95% 60% at 104% 46%, rgba(255, 96, 48, .72) 0%, rgba(230, 70, 90, .28) 54%, rgba(255, 96, 48, 0) 84%),
    linear-gradient(118deg,
      rgba(124, 77, 255, 0) 28%,
      rgba(232, 93, 156, .5) 54%,
      rgba(255, 107, 94, .55) 74%,
      rgba(255, 87, 34, .5) 100%);
  filter: blur(30px) saturate(1.5) brightness(1.06);
  -webkit-mask-image: linear-gradient(to left, #000 36%, rgba(0, 0, 0, .74) 50%, rgba(0, 0, 0, .3) 64%, transparent 80%);
  mask-image: linear-gradient(to left, #000 36%, rgba(0, 0, 0, .74) 50%, rgba(0, 0, 0, .3) 64%, transparent 80%);
}
/* Полутон: 2px точка на сетке 11px, гаснет к центру карточки. */
.contact::after {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .28) 1px, transparent 1.5px);
  background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(to left, #000 32%, transparent 68%);
  mask-image: linear-gradient(to left, #000 32%, transparent 68%);
}
.contact__text { position: relative; z-index: 2; min-width: 0; max-width: 60%; }
.contact__title { margin: 0 0 10px; font-size: 26px; font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: #fff; }
.contact__desc { margin: 0; font-size: 16px; line-height: 1.55; color: #c9c9cc; font-weight: 400; }
.contact__action { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; flex: none; }
/* Белая кнопка с тёмным текстом: единственный вариант, который не спорит с
   оранжево-фиолетовым фоном и держит контраст на любой его точке. */
.contact__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 9999px;
  background: #fff; color: #101217; font-size: 16px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .22);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.contact__btn:hover { background: #f2f2f4; box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .78), 0 2px 6px rgba(0, 0, 0, .24); }
.contact__btn:active { transform: translateY(1px); }
.contact__phone { font-size: 13px; color: rgba(255, 255, 255, .76); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* ---------- плавающая кнопка WhatsApp ----------
   Правый нижний угол (левый занят окном трансляции). z-index ниже подложки
   модалки/корзины (50) — открытые слои её накрывают, отдельно прятать не нужно,
   на телефоне добавлены явные правила, потому что там слои во всю ширину. */
.wa-float {
  position: fixed; z-index: 45; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 22px; border-radius: 9999px;
  background: #25d366; color: #fff; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: background .15s ease, opacity .2s ease, visibility .2s ease;
}
.wa-float:hover { background: #1eb955; }
/* уходит, пока в кадре виден «настоящий» контактный блок (баннер сайдбара или
   карточка подвала) — их наблюдает IntersectionObserver в app.js */
.wa-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.wa-float svg { flex: none; }
.wa-float__label { font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; }

@media (max-width: 900px) {
  .contact { flex-direction: column; align-items: stretch; gap: 18px; padding: 26px 22px; }
  .contact__title { font-size: 23px; }
  .contact__text { max-width: 100%; }
  .contact__action { justify-items: stretch; }
  .contact__btn { width: 100%; }
  .contact__phone { text-align: center; }
  /* в колонку — свечение уезжает вниз, под кнопку; пятна пересобраны под
     другую форму слоя, иначе от них остаётся бурая дымка */
  .contact::before {
    inset: 26% -30% -55% -30%;
    background:
      linear-gradient(152deg, rgba(255, 255, 255, 0) 40%, rgba(255, 214, 190, .22) 52%, rgba(255, 255, 255, 0) 64%),
      linear-gradient(152deg, rgba(255, 255, 255, 0) 66%, rgba(255, 176, 214, .12) 74%, rgba(255, 255, 255, 0) 84%),
      radial-gradient(38% 40% at 70% 44%, #ff6a1f 0%, rgba(255, 106, 31, .6) 42%, rgba(255, 106, 31, 0) 80%),
      radial-gradient(36% 40% at 90% 56%, #ff6b5e 0%, rgba(255, 107, 94, .6) 42%, rgba(255, 107, 94, 0) 80%),
      radial-gradient(40% 42% at 50% 56%, #e85d9c 0%, rgba(232, 93, 156, .62) 42%, rgba(232, 93, 156, 0) 80%),
      radial-gradient(38% 42% at 18% 48%, #7c4dff 0%, rgba(124, 77, 255, .6) 42%, rgba(124, 77, 255, 0) 78%),
      radial-gradient(120% 55% at 62% 62%, rgba(255, 96, 48, .5) 0%, rgba(230, 70, 90, .24) 56%, rgba(255, 96, 48, 0) 86%),
      linear-gradient(28deg,
        rgba(124, 77, 255, 0) 26%,
        rgba(232, 93, 156, .45) 52%,
        rgba(255, 107, 94, .5) 72%,
        rgba(255, 87, 34, .45) 100%);
    -webkit-mask-image: linear-gradient(to top, #000 44%, rgba(0, 0, 0, .76) 58%, rgba(0, 0, 0, .3) 72%, transparent 88%);
    mask-image: linear-gradient(to top, #000 44%, rgba(0, 0, 0, .76) 58%, rgba(0, 0, 0, .3) 72%, transparent 88%);
  }
  .contact::after {
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 78%);
    mask-image: linear-gradient(to top, #000 30%, transparent 78%);
  }
}

@media (max-width: 720px) {
  .langpick { right: 12px; }
  .wa-float {
    height: 52px; padding: 0 18px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* открытые слои на телефоне занимают весь экран, поэтому кнопку убираем
     теми же правилами, что и окно трансляции */
  body:has(#cart.is-open) .wa-float,
  body:has(#productModal.is-open) .wa-float,
  body:has(.sv:not([hidden])) .wa-float { display: none; }
}

@media (max-width: 400px) {
  .wa-float { width: 52px; padding: 0; justify-content: center; }
  .wa-float__label { display: none; }
}

/* ---------- подсказка про португальскую версию ----------
   Узкая полоса под шапкой на английской странице. Только предложение перейти —
   редиректа нет, выбор языка остаётся за адресом страницы. */
.langhint {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 44px 9px 16px; position: relative;
  background: #1c1c20; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
  font-size: 14px;
}
.langhint__link { color: #fff; font-weight: 600; text-decoration: none; }
.langhint__link:hover { color: var(--accent-hover); }
.langhint__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: #9d9d9d; font-size: 13px;
}
.langhint__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* пункты переключателя языка стали ссылками — сбрасываем оформление ссылки */
.langpick__drop a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px;
  color: #d3d3d5; font-size: 14px; text-decoration: none;
}
.langpick__drop a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.langpick__drop a[aria-selected="true"] { color: #fff; font-weight: 600; }
.langpick__drop a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: 0; flex: none;
}
.langpick__drop a[aria-selected="true"]::before { opacity: 1; }


/* ==================== cart v2: строки-опции ====================
   Второй вариант корзины (включается классом cart--v2, см. cartVariant в app.js).
   Механика — «вся оплата внутри корзины»: каждая настройка живёт строкой 56px
   «иконка + текст + контрол/шеврон» и открывает маленькую модалку, после чего
   сворачивается в результат. Оформление — токены витрины: поверхности
   #1f2026/#16181d, радиусы 16, акцент --accent, шрифт 15/13. */

/* блоки одного варианта прячем стилями — узлы общие для обоих */
.cart:not(.cart--v2) .cart__v2 { display: none !important; }
.cart--v2 .cart__v1 { display: none !important; }
/* в v2 скроллится всё тело ящика: опции сверху и снизу едут вместе со списком */
.cart--v2 .cart__body {
  display: block; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px;
  scrollbar-width: thin; scrollbar-color: #3a3a3f transparent;
}
.cart--v2 .cart__list { overflow: visible; flex: none; padding-top: 10px; }
.cart--v2 .cart__list.is-empty { padding-top: 0; }
.cart--v2 .cart-empty { gap: 12px; padding: 4px 0 8px; }
.cart--v2 .cart-empty__img { width: 100%; max-width: 240px; margin: 0 auto; }
.cart--v2 .cart-empty__text h3 { font-size: 20px; line-height: 24px; }
.cart--v2 .cart-empty__text p { font-size: 14px; line-height: 18px; }
.cart--v2 .upsell { padding-bottom: 4px; }
.cart__grip { display: none; }

.optcard {
  margin: 0 16px 10px; background: #1f2026; border-radius: 16px; overflow: hidden;
}
#v2Top { margin-top: 2px; padding: 8px; }
#v2Top .optrow { padding: 0 8px; border-radius: 12px; }
#v2Top .optrow:hover { background: rgba(255, 255, 255, .04); }
.optcard > .optrow + .optrow { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

.optrow {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 0 16px; border: 0; background: none; color: inherit; text-align: left;
  font: inherit; cursor: pointer; transition: background .15s ease;
}
.optrow:hover { background: rgba(255, 255, 255, .03); }
.optrow--static { cursor: default; }
.optrow--static:hover { background: none; }
.optrow--tall { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.optrow__icon { width: 22px; height: 22px; flex: none; color: var(--muted); }
.optrow__icon svg { width: 22px; height: 22px; display: block; }
.optrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.optrow__title { font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.optrow__title .is-dim { color: var(--muted); font-weight: 400; }
/* название точки самовывоза может быть длинным — даём ему две строки */
.optrow__title--wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.optrow__title.is-accent { color: var(--accent); }
.optrow__sub { font-size: 13px; line-height: 16px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.optrow__sub a { color: var(--accent); font-weight: 500; }
.optrow__sub a:hover { color: var(--accent-hover); }
.optrow__chev { flex: none; width: 16px; height: 16px; color: var(--muted); }
/* строка со ссылкой рядом: контейнер — div, кликабельная часть — кнопка внутри */
.optrow__main {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 56px;
  padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.optrow__link {
  flex: none; font-size: 13px; font-weight: 500; color: var(--accent); white-space: nowrap;
}

/* сегмент «Delivery / Pickup»: две кнопки по половине и бегунок, который едет
   transform'ом за 250ms (не left — иначе рисуется без композитора) */
.seg2 {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 40px;
  margin-bottom: 6px; padding: 3px; border-radius: 12px; background: #16181d;
}
.seg2__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 9px; background: #3d3f47;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.seg2[data-active="pickup"] .seg2__thumb { transform: translateX(100%); }
.seg2__item {
  position: relative; z-index: 1; border: 0; background: none; color: #c7c7cb;
  font-size: 13px; font-weight: 500; border-radius: 9px; transition: color .2s ease;
}
.seg2__item[aria-selected="true"] { color: #fff; }
.seg2__item b { color: var(--accent); font-weight: 600; margin-left: 4px; }
.seg2__item[aria-selected="true"] b { color: #ffb08a; }

/* степпер строки (приборы) — те же кружки, что у позиций корзины */
.stepper { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.stepper button {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--card); color: #fff; font-size: 16px; line-height: 1;
  transition: background .15s ease, opacity .15s ease;
}
.stepper button:hover { background: #323238; }
.stepper button.is-off { opacity: .35; cursor: default; }
.stepper button.is-off:hover { background: var(--card); }
.stepper b { min-width: 16px; text-align: center; font-size: 15px; font-weight: 600; }

/* тумблер 40×24 в акценте витрины */
.toggle { position: relative; flex: none; width: 40px; height: 24px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track {
  position: absolute; inset: 0; border-radius: 12px; background: #3a3a40;
  transition: background .25s ease;
}
.toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* кольцо прогресса до бесплатной доставки: 48px, stroke-dashoffset едет .4s */
.ring {
  margin: 12px 16px 6px; padding: 10px 14px; border-radius: 16px; background: #1f2026;
  display: flex; align-items: center; gap: 12px;
}
.ring svg { width: 48px; height: 48px; flex: none; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: #2b2d34; stroke-width: 4; }
.ring__fill {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset .4s ease, stroke .3s ease;
}
.ring__text { margin: 0; min-width: 0; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--muted); }
.ring__text b { color: #fff; font-weight: 600; }
.ring.is-done { background: rgba(34, 197, 94, .12); }
.ring.is-done .ring__fill { stroke: var(--live); }
.ring.is-done .ring__text { color: var(--live); font-weight: 600; }

/* итоги v2 — те же 12/14 600, что и в v1, но в карточке */
.cart__sums--v2 { margin: 6px 16px 0; padding: 12px 16px 0; gap: 8px; }
.cart__sums--v2 div { font-size: 13px; line-height: 16px; }
.cart__sums--v2 .is-off b { color: var(--live); }

/* липкий низ: слева «Total / сумма», справа контекстная кнопка */
.stickyfoot {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #16181d; border-top: 1px solid #23252b;
  box-shadow: 0 -12px 24px rgba(0, 0, 0, .25);
}
.stickyfoot__total { display: flex; flex-direction: column; gap: 1px; flex: none; min-width: 72px; }
.stickyfoot__total span { font-size: 12px; line-height: 14px; color: var(--muted); font-weight: 500; }
.stickyfoot__total b { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; }
.stickyfoot__total.is-hidden { visibility: hidden; }
.stickyfoot__btn { flex: 1; justify-content: center; min-width: 0; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.stickyfoot__btn[disabled] { opacity: .9; }

/* тост внутри ящика — над липким низом, не шире панели */
.cart__toast {
  position: absolute; left: 16px; right: 16px; bottom: 96px; z-index: 15;
  padding: 10px 14px; border-radius: 12px; background: #2a2b31; color: #fff;
  font-size: 13px; line-height: 18px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.cart__toast.is-on { opacity: 1; transform: none; }

/* ---------- универсальная модалка строк-опций ----------
   Окно 440px по центру поверх корзины (z 70 > ящика 60); появление —
   scale(.97)+opacity 200ms, как у карточки товара. */
.optmodal { position: fixed; inset: 0; z-index: 70; }
.optmodal__scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .25s ease-out;
}
.optmodal__panel {
  position: absolute; top: 50%; left: 50%; width: min(440px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column;
  background: #1f2026; border-radius: 24px; padding: 24px 24px 20px;
  transform: translate(-50%, -50%) scale(.97); opacity: 0;
  transition: transform .2s ease, opacity .2s ease; will-change: transform;
}
.optmodal.is-open .optmodal__scrim { opacity: 1; }
.optmodal.is-open .optmodal__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.optmodal__grip { display: none; }
.optmodal__close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 13px;
}
.optmodal__close:hover { background: rgba(255, 255, 255, .16); }
.optmodal__title { margin: 0 40px 16px 0; font-size: 22px; line-height: 26px; font-weight: 700; }
.optmodal__title.is-error { color: #ff5c63; }
.optmodal__body {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3a3a3f transparent;
}
.optmodal__actions { display: flex; gap: 10px; margin-top: 6px; }
.optmodal__actions .btn { flex: 1; justify-content: center; height: auto; min-height: 48px; padding: 8px 14px; line-height: 1.2; text-align: center; }
.optmodal__hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); font-weight: 400; }
.optmodal__error { margin: -4px 0 0; font-size: 13px; line-height: 16px; font-weight: 500; color: #ff5c63; }

/* поля: заливка #16181d, радиус 12, рамка появляется на фокусе/ошибке */
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > span { font-size: 12px; line-height: 14px; font-weight: 500; color: var(--muted); }
.fld input, .fld textarea {
  width: 100%; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid transparent; background: #16181d; color: #fff;
  font: inherit; font-size: 15px; font-weight: 500; outline: none;
  transition: border-color .15s ease;
}
.fld textarea { height: 120px; padding: 12px 14px; resize: none; line-height: 1.4; }
.fld input::placeholder, .fld textarea::placeholder { color: #6b6b70; font-weight: 400; }
.fld input:focus, .fld textarea:focus { border-color: var(--accent); }
.fld.is-error input, .fld.is-error textarea { border-color: #ff323b; }
.fld__counter { align-self: flex-end; font-size: 12px; color: var(--muted); font-weight: 400; }
.fld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* наличные: поле «сдача с» и кнопка «без сдачи» в одну строку по нижнему краю */
.fld-grid--cash { align-items: end; }
.fld-grid--cash .btn { height: 48px; justify-content: center; padding: 0 12px; font-size: 14px; white-space: nowrap; }
.btn--ghost[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* список с радио-галками: точки самовывоза, слоты времени, оплата */
.chooser { display: flex; flex-direction: column; gap: 6px; }
.chooser__item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 8px 12px; border: 1.5px solid transparent; border-radius: 14px;
  background: #16181d; color: inherit; text-align: left; font: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.chooser__item:hover { background: #1b1d23; }
.chooser__item[aria-checked="true"] { border-color: var(--accent); }
.chooser__mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #3d3f47;
  display: grid; place-items: center; transition: background .15s ease, border-color .15s ease;
}
.chooser__mark svg { width: 12px; height: 12px; opacity: 0; transition: opacity .15s ease; }
.chooser__item[aria-checked="true"] .chooser__mark { background: var(--accent); border-color: var(--accent); }
.chooser__item[aria-checked="true"] .chooser__mark svg { opacity: 1; }
.chooser__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chooser__text b { font-size: 15px; line-height: 20px; font-weight: 600; }
.chooser__text span { font-size: 13px; line-height: 16px; color: var(--muted); font-weight: 400; }
.chooser__aside { flex: none; font-size: 13px; color: var(--muted); font-weight: 500; }

/* чипы дней — ряд со скроллом, активный в акценте */
.days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; flex: none; }
.days::-webkit-scrollbar { display: none; }
.days__chip {
  flex: none; min-width: 64px; height: 52px; padding: 0 12px; border: 0; border-radius: 12px;
  background: #16181d; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; line-height: 16px; font-weight: 600; transition: background .15s ease;
}
.days__chip span { font-size: 12px; font-weight: 400; color: var(--muted); }
.days__chip[aria-pressed="true"] { background: var(--accent); }
.days__chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .8); }
.slots {
  display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #3a3a3f transparent; padding-right: 4px;
}
.slots .chooser__item { min-height: 46px; }

/* сводка демо-заказа */
.summary { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #16181d; }
.summary div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; }
.summary div span:first-child { color: var(--muted); font-weight: 400; flex: none; }
.summary div span:last-child { text-align: right; font-weight: 500; min-width: 0; }
.summary div.is-total { border-top: 1px solid #23252b; padding-top: 6px; margin-top: 2px; font-size: 15px; }
.summary div.is-total span:last-child { font-weight: 700; }
.summary ul { margin: 0; padding: 0 0 0 16px; font-size: 13px; line-height: 18px; }

/* телефон, v2: плашка «My order · $N» внизу */
.mbar {
  position: fixed; left: 12px; right: 12px; z-index: 45;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 12px; height: 56px; padding: 0 16px 0 12px;
  border: 0; border-radius: 9999px; background: var(--accent); color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font: inherit;
}
.mbar__count {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-size: 14px; font-weight: 700;
}
.mbar__label { flex: 1; text-align: left; font-size: 16px; font-weight: 600; }
.mbar__sum { font-size: 16px; font-weight: 700; }

@media (max-width: 720px) {
  /* корзина v2 — лист снизу: 12px зазор сверху, скруглённый верх, драг-полоска,
     выезд снизу тем же переходом, что и вбок у v1 */
  .cart--v2 {
    top: 12px; height: calc(100dvh - 12px); border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .cart--v2.is-open { transform: none; }
  .cart--v2 .cart__grip {
    display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px;
    background: rgba(255, 255, 255, .25); flex: none;
  }
  .cart--v2 .cart__head { padding-top: 10px; }
  .cart__head { padding-left: 16px; padding-right: 16px; }
  .cartswitch { margin-right: 10px; }
  .cartswitch__item { padding: 0 8px; font-size: 11px; }
  .cart__toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .mbar { display: flex; }
  body:has(#cart.is-open) .mbar,
  body:has(#productModal.is-open) .mbar,
  body:has(#mobileMenu:not([hidden])) .mbar,
  body:has(.sv:not([hidden])) .mbar { display: none; }
  /* плашка занимает низ — контакт и окно трансляции приподнимаем над ней */
  body.has-mbar .wa-float { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.has-mbar .livecam:not(.is-full) { bottom: 76px; }

  /* модалки опций — лист снизу */
  .optmodal__panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 92dvh;
    border-radius: 20px 20px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .optmodal.is-open .optmodal__panel { transform: none; }
  .optmodal__grip {
    display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px;
    background: rgba(255, 255, 255, .25); flex: none;
  }
  .optmodal__close { top: 14px; }
  .optmodal__title { font-size: 20px; line-height: 24px; }
  .slots { max-height: 44dvh; }
}