/* Мобильная витрина «Биг Техно Клаб». Токены — та же система, что на десктопе
   (index.html/catalog.html): --ink-*, --panel-*, --hairline, красный акцент.
   Тема хранится в localStorage["btc-theme"] и атрибуте data-theme на <html> —
   один ключ с десктопом, переход десктоп↔мобила тему сохраняет. */
:root {
  --bg: #ffffff; --panel-solid: #ffffff; --panel-2: #fbfbfb;
  --ink: #111111; --ink-2: #4a4a4a; --ink-3b: #6a6a6a; --ink-3: #767676; --ink-4: #9b9b9b;
  --hairline: #e3e3e3; --hairline-2: #ebebeb; --soft: #f4f4f4;
  --plate-a: #fafafa; --plate-b: #ececec; --photo-plate: transparent;
  --grip: #dcdcdc; --badge-ink: #2e2e2e;
  --accent-text: #dd0a0a; --accent-text-2: #a80808; --accent-soft: #ffe9e9;
  --accent-grad: linear-gradient(180deg, rgba(255,58,40,1), rgba(196,8,8,1));
  --btn-solid-bg: #111111; --btn-solid-ink: #ffffff;
  --slab: linear-gradient(180deg, #2c2c2e, #101011);
  --sheet-shadow: rgba(0,0,0,.14);
  --scrim: rgba(12,12,14,.52);
  --tap: rgba(17,17,17,.06);
  --r-lg: 20px; --r-md: 14px; --r-sm: 11px;
  --tabbar-h: 60px;
}
[data-theme="dark"] {
  --bg: #0e0e10; --panel-solid: #17171a; --panel-2: #141417;
  --ink: #f4f4f5; --ink-2: #c2c2c6; --ink-3b: #a6a6ae; --ink-3: #9a9aa2; --ink-4: #8e8e94;
  --hairline: #2e2e33; --hairline-2: #26262a; --soft: #212125;
  /* --photo-plate: подложка под фото товара. Фото поставщика — JPEG с белым фоном,
     на тёмной плите он светит рваным белым прямоугольником; светлая подложка
     сливает фото с карточкой. В светлой теме токен transparent. */
  --plate-a: #232327; --plate-b: #1a1a1d; --photo-plate: #f5f5f6;
  --grip: #3a3a40; --badge-ink: #f4f4f5;
  --accent-text: #ff7a68; --accent-text-2: #ff9c8e; --accent-soft: #3a1614;
  --btn-solid-bg: #f4f4f5; --btn-solid-ink: #111111;
  --slab: linear-gradient(180deg, #26262a, #1c1c20);
  --sheet-shadow: rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.66);
  --tap: rgba(255,255,255,.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.45;
  overscroll-behavior-y: none;
}
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
a { color: var(--accent-text); text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; font-weight: 800; }
button { font: inherit; color: inherit; border: 0; background: none; margin: 0; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 6px; }

.app { max-width: 520px; margin: 0 auto; position: relative; min-height: 100dvh; }

/* ---------- Верхняя панель ---------- */
.appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--panel-solid); border-bottom: 1px solid var(--hairline);
  padding: 8px 12px;
}
.appbar-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.logo-mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo-word { height: 12px; flex: 0 1 auto; min-width: 0; }
.appbar-title {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icon-btn {
  flex-shrink: 0; width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 12px;
  color: var(--ink-2); cursor: pointer; transition: background .16s, color .16s;
}
.icon-btn:active { background: var(--tap); }
.icon-btn svg { width: 20px; height: 20px; }

.search-wrap { position: relative; margin-top: 8px; }
.search-wrap svg { position: absolute; left: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--ink-4); pointer-events: none; }
.search {
  width: 100%; height: 46px; display: block;
  background: var(--soft); border: 1px solid var(--soft); border-radius: 13px;
  padding: 0 40px 0 38px; font-size: 16px; color: var(--ink); font-family: inherit;
  outline: none; transition: border-color .16s, background .16s;
}
.search::placeholder { color: var(--ink-4); }
.search:focus { border-color: var(--ink); background: var(--panel-solid); }
.search-clear { position: absolute; right: 2px; top: 1px; }

/* ---------- Контент и таббар ---------- */
.screen { padding: 12px 12px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px); }
.stack { display: flex; flex-direction: column; gap: 12px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--panel-solid); border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-height: var(--tabbar-h);
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  cursor: pointer; transition: color .16s;
}
.tab svg { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .tab-dot { opacity: 1; transform: none; }
.tab-dot {
  position: absolute; top: 5px; width: 22px; height: 3px; border-radius: 999px;
  background: var(--accent-text); opacity: 0; transform: scaleX(.3);
  transition: opacity .2s, transform .2s cubic-bezier(.2,.8,.2,1);
}
.tab-badge {
  position: absolute; top: 8px; left: 50%; margin-left: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent-text); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.tab-badge.is-bump { animation: btcPop .34s cubic-bezier(.2,.8,.2,1); }

/* ---------- Кирпичи ---------- */
.card {
  background: var(--panel-solid); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px;
}
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3b); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sec-head h2 { font-size: 19px; }
.sec-more { font-size: 12px; font-weight: 700; color: var(--ink-3); flex-shrink: 0; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 13px 16px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; cursor: pointer; text-align: center;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), filter .16s, background .16s;
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--accent-grad); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.btn-ghost { background: var(--soft); border: 1px solid var(--hairline); color: var(--ink); }
.btn-outline { background: var(--panel-solid); border: 1px solid var(--ink); color: var(--ink); }
.btn-solid { background: var(--btn-solid-bg); color: var(--btn-solid-ink); border: 1px solid transparent; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-sm { min-height: 44px; padding: 10px 14px; font-size: 13px; border-radius: var(--r-sm); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--panel-solid); border: 1px solid var(--hairline); color: var(--ink-2);
  transition: background .16s, color .16s, border-color .16s, transform .14s;
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--btn-solid-bg); border-color: var(--btn-solid-bg); color: var(--btn-solid-ink); }
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 12px 2px; margin: 0 -12px; }
.chip-row::-webkit-scrollbar { display: none; }

.badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 999px;
}
/* Бейдж лежит ПОВЕРХ фото, а подложка фото в тёмной теме светлая — цвета тут
   не токенами, иначе «Под заказ» пропал бы на светлой плите. */
.badge-stock { color: #fff; background: linear-gradient(180deg, rgba(255,58,40,.94), rgba(196,8,8,.94)); border: 1px solid rgba(255,255,255,.28); }
.badge-order { color: #2e2e2e; background: #fff; border: 1px solid rgba(17,17,17,.14); }

/* ---------- Сетка товаров ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 10px; cursor: pointer;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), border-color .16s;
}
.pcard:active { transform: scale(.98); }
.pcard-media {
  position: relative; height: 116px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--hairline-2);
  background: var(--photo-plate, transparent) linear-gradient(180deg, var(--plate-a), var(--plate-b));
  display: flex; align-items: center; justify-content: center;
}
.pcard-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.pcard-media .nophoto { font-size: 10px; color: var(--ink-4); }
.pcard-name {
  font-size: 13px; font-weight: 700; line-height: 1.3; margin-top: 9px; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-sub { font-size: 11px; color: var(--ink-3b); margin-top: 4px; min-height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pcard-price { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pcard-foot { display: flex; gap: 6px; margin-top: 9px; }
.pcard-foot .btn { flex: 1; }
.fav {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; cursor: pointer; color: var(--ink-3);
  background: var(--panel-solid); border: 1px solid var(--hairline);
  transition: color .16s, transform .16s;
}
.fav[aria-pressed="true"] { color: var(--accent-text); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.fav:active { transform: scale(.9); }
.fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- Главная ---------- */
.hero { position: relative; overflow: hidden; padding: 0; }
/* Фото сборки — квадратный шаблон поставщика 600×600 (проверено), рамка 1/1
   + contain, чтобы корпус и плашку ТТХ не резало сверху/снизу. */
/* D03 (10.09.2026): aspect-ratio:1/1 + max-height:30vh сжимали ширину БЛОКА
   вместе с высотой (браузер пересчитывает width под клэмпнутый height) — на
   390×844 бокс выходил 253px при карточке 358px, справа пустая полоса.
   Высота теперь фиксированная (не vh, не aspect-ratio), ширина — вся карточка;
   contain внутри полной ширины сам центрирует квадратное фото по горизонтали. */
.hero-media { position: relative; width: 100%; height: 220px; background: linear-gradient(180deg, var(--plate-a), var(--plate-b)); }
.hero-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-body { padding: 14px 16px 16px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text);
  background: var(--accent-soft); border-radius: 999px; padding: 5px 10px;
}
.hero h1 { font-size: 25px; line-height: 1.12; margin: 10px 0 0; }
.price-xl { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-old { font-size: 13px; color: var(--ink-4); text-decoration: line-through; }

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat-tile {
  position: relative; overflow: hidden; min-height: 92px; border-radius: 16px;
  padding: 13px; display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; color: #fff; border: 1px solid var(--hairline);
  background: #1a1a1d; transition: transform .14s cubic-bezier(.2,.8,.2,1);
}
.cat-tile:active { transform: scale(.97); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.25), rgba(10,10,12,.82)); }
.cat-tile span { position: relative; z-index: 1; }
.cat-tile b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.cat-tile i { font-style: normal; font-size: 11px; color: rgba(255,255,255,.72); }
/* Плитка со своим кадром (kb/category-tiles.md): пропорция 7/4 из макета, кадр
   целиком без обреза, фон плитки = фон кадра, тёмный скрим заменён на подклад
   слева сверху под текст. Светлая в обеих темах — как плита фото товара. */
.cat-tile-own { background: #f0f0f1; color: #111111; justify-content: flex-start; align-items: flex-start; text-align: left; aspect-ratio: 7 / 4; min-height: 0; border-color: rgba(17,17,17,.06); }
.cat-tile-own img { opacity: 1; object-fit: contain; object-position: right bottom; inset: auto 0 0 auto; width: 78%; height: 78%; }
.cat-tile-own::after { background: linear-gradient(112deg, rgba(240,240,241,.96) 0%, rgba(240,240,241,.72) 30%, rgba(240,240,241,0) 58%); }
.cat-tile-own i { color: #5a5a60; }

.tier-card {
  display: flex; gap: 12px; align-items: center; padding: 10px;
  background: var(--panel-solid); border: 1px solid var(--hairline);
  border-radius: 16px; cursor: pointer; transition: transform .14s cubic-bezier(.2,.8,.2,1);
}
.tier-card:active { transform: scale(.985); }
/* Квадрат 84×84 под квадратное фото сборки (проверено, 600×600) + contain —
   не режем корпус/плашку ТТХ, как и в .hero-media выше. */
.tier-thumb { flex: 0 0 84px; height: 84px; border-radius: 11px; overflow: hidden; background: linear-gradient(180deg, var(--plate-a), var(--plate-b)); }
.tier-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tier-body { flex: 1; min-width: 0; }
.tier-body b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.tier-body i { font-style: normal; display: block; font-size: 11.5px; color: var(--ink-3b); margin-top: 2px; }
.tier-body em { font-style: normal; display: block; font-size: 12.5px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }

.slab { background: var(--slab); color: #fff; border-radius: var(--r-lg); padding: 20px 16px; }
.slab h2 { font-size: 21px; }
.slab p { font-size: 13px; color: #b0b0b0; margin: 9px 0 0; }
.accent-slab { background: var(--accent-grad); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: var(--r-lg); padding: 20px 16px; }

/* Тёмная секция-акцент главной: шаги заказа + стена брендов. Одна поверхность
   верхнего уровня, внутри нейтральные плитки без своих теней и рамок (D06). */
.band { background: var(--slab); border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: var(--r-lg); padding: 20px 16px; }
.band h2 { font-size: 20px; line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.band p { font-size: 13px; line-height: 1.5; color: #b0b0b0; margin: 8px 0 0; }
.band hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 22px 0 20px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.step { border-radius: 14px; background: rgba(255,255,255,.06); padding: 14px 12px 16px; }
.step span { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #8e8e94; }
.step b { display: block; font-size: 14px; margin-top: 8px; }
.step i { display: block; font-style: normal; font-size: 12px; line-height: 1.45; color: #b0b0b0; margin-top: 5px; }
/* Высота ряда фиксирована — лента не двигает контент при загрузке логотипов. */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 8px; }
.marquee-row { display: flex; width: max-content; gap: 8px; }
.brand { flex: 0 0 106px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.brand i { display: block; width: calc(100% - 18px); height: 30px; font-style: normal; font-size: 12px; font-weight: 800; line-height: 30px; text-align: center; color: #fff; background-repeat: no-repeat; background-position: center center; background-size: contain; filter: brightness(0) invert(1); overflow: hidden; }
@keyframes btcBrandsA { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes btcBrandsB { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@media (prefers-reduced-motion: reduce) {
  .marquee-row { animation: none !important; }
  .marquee { overflow-x: auto; }
}

.rowlist { display: flex; flex-direction: column; }
.rowlist > * { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 13.5px; border-bottom: 1px solid var(--hairline-2); }
.rowlist > *:last-child { border-bottom: 0; }

.trust { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 12px; margin: 0 -12px; }
.trust::-webkit-scrollbar { display: none; }
.trust span, .trust-link {
  white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  background: var(--soft); border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 12px;
}
.trust-link { cursor: pointer; }

/* ---------- Быстрые ссылки: сервис/B2B с главной (E02) ---------- */
.qlinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qlink {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--panel-solid); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 14px; min-height: 44px; cursor: pointer; text-align: left;
  transition: transform .14s cubic-bezier(.2,.8,.2,1);
}
.qlink:active { transform: scale(.97); }
.qlink svg { width: 22px; height: 22px; color: var(--accent-text); }
.qlink span { font-size: 13px; font-weight: 700; }

.foot { font-size: 11px; color: var(--ink-3); text-align: center; line-height: 1.65; padding: 10px 4px 0; }
.foot a, .foot-link { color: var(--ink-3); cursor: pointer; text-decoration: underline; }

/* ---------- Каталог ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 20; margin: -12px -12px 0; padding: 8px 12px;
  background: var(--bg); border-bottom: 1px solid var(--hairline-2);
  display: flex; gap: 8px; align-items: center;
}
.toolbar .chip { flex: 0 0 auto; }
.result-line { font-size: 12px; color: var(--ink-3); padding: 10px 2px 0; }
.skel { border-radius: 12px; background: linear-gradient(90deg, var(--soft), var(--hairline-2), var(--soft)); background-size: 200% 100%; animation: btcShimmer 1.2s linear infinite; }
.empty { text-align: center; padding: 34px 12px; }
.empty b { display: block; font-size: 16px; }
.empty p { font-size: 13px; color: var(--ink-3); margin: 8px 0 16px; line-height: 1.5; }

/* ---------- Товар ---------- */
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--photo-plate, transparent) linear-gradient(180deg, var(--plate-a), var(--plate-b)); }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; object-fit: contain; padding: 10px; display: block; }
.gallery-count { position: absolute; right: 10px; bottom: 10px; background: rgba(17,17,17,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.gallery-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
/* D01 (10.09.2026): реальный фон под точками — не фон приложения (светлая/тёмная
   тема), а сама фотка товара (обычно белый JPEG у поставщика) и её леттербокс на
   --plate-a/--plate-b, тёмный в тёмной теме. Плоский тёмный rgba(17,17,17,..) тонет
   именно в леттербоксе тёмной темы; светлый вариант тонет обратно в белом фото.
   Кольцо на точке контрастно на любой подложке без привязки к теме. */
.gallery-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(17,17,17,.4); box-shadow: 0 0 0 1px rgba(255,255,255,.75); transition: background .15s, transform .15s; }
.gallery-dots i.is-on { background: rgba(17,17,17,.92); box-shadow: 0 0 0 1px rgba(255,255,255,.9); transform: scale(1.25); }
.specs { width: 100%; border-collapse: collapse; font-size: 13px; }
.specs th, .specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--hairline-2); vertical-align: top; }
.specs th { font-weight: 600; color: var(--ink-3); width: 47%; padding-right: 10px; }
.specs td { font-weight: 700; }
.buybar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: 35; max-width: 520px; margin: 0 auto; padding: 8px 12px 10px;
  background: var(--panel-solid); border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px;
}
.buybar-row { display: flex; align-items: center; gap: 12px; }
.buybar-note { font-size: 11px; line-height: 1.35; color: var(--ink-3); }
.buybar .price-xl { font-size: 20px; flex-shrink: 0; }
.buybar .btn { flex: 1; }

/* ---------- Корзина и форма ---------- */
.cart-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hairline-2); }
.cart-thumb { flex: 0 0 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--hairline-2); background: var(--photo-plate, transparent) linear-gradient(180deg, var(--plate-a), var(--plate-b)); }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: 11px; overflow: hidden; }
.qty button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; color: var(--ink-2); }
.qty button:active { background: var(--tap); }
.qty span { min-width: 30px; text-align: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

.field { display: block; }
.field + .field { margin-top: 12px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3b); margin-bottom: 5px; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 13px;
  font-size: 16px; font-weight: 600; font-family: inherit; line-height: 1.35;
  color: var(--ink); background: var(--soft);
  border: 1px solid var(--hairline); border-radius: 12px; outline: none;
  transition: border-color .16s, background .16s;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ink); background: var(--panel-solid); }
.field input[aria-invalid="true"] { border-color: var(--accent-text); }
.field .err { font-size: 12px; font-weight: 600; color: var(--accent-text); margin-top: 5px; }
.total-row { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--ink); }
.legal { font-size: 11px; color: var(--ink-3); margin-top: 12px; line-height: 1.55; }

/* ---------- Шторка ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 50; background: var(--scrim);
  opacity: 0; transition: opacity .24s ease-out;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.scrim.is-open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-width: 520px; margin: 0 auto; max-height: 86dvh;
  display: flex; flex-direction: column;
  background: var(--panel-solid); border-top: 1px solid var(--hairline);
  border-radius: 22px 22px 0 0; box-shadow: 0 -14px 34px var(--sheet-shadow);
  transform: translateY(102%); transition: transform .3s cubic-bezier(.2,.85,.25,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-open { transform: translateY(0); }
.sheet-head { flex-shrink: 0; padding: 8px 14px 10px; border-bottom: 1px solid var(--hairline-2); touch-action: none; }
.sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--grip); margin: 0 auto 8px; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-title h2 { font-size: 17px; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; }
.sheet-foot { flex-shrink: 0; padding: 10px 14px 14px; border-top: 1px solid var(--hairline-2); display: flex; gap: 10px; }
.sheet-foot .btn { flex: 1; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  padding: 11px 2px; cursor: pointer; text-align: left; font-size: 14.5px; font-weight: 600;
  border-bottom: 1px solid var(--hairline-2);
}
.opt:last-child { border-bottom: 0; }
.opt-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: transparent; transition: background .16s, border-color .16s, color .16s; }
.opt[aria-checked="true"] .opt-mark, .opt[aria-selected="true"] .opt-mark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.opt-mark svg { width: 13px; height: 13px; }
.opt-count { margin-left: auto; font-size: 12px; color: var(--ink-4); font-weight: 700; }

.toast {
  position: fixed; left: 50%; transform: translate(-50%, 14px);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); z-index: 60;
  background: var(--btn-solid-bg); color: var(--btn-solid-ink);
  font-size: 13px; font-weight: 700; padding: 11px 16px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.24); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(.2,.8,.2,1);
  max-width: 88vw; text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@keyframes btcPop { 0% { transform: scale(1) } 45% { transform: scale(1.3) } 100% { transform: scale(1) } }
@keyframes btcShimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@keyframes btcFade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.screen { animation: btcFade .26s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* FPS сборок: числа из независимых тестов (builds.json → fpsMeta.sources),
   рядом обязателен дисклеймер и ссылка на источник. */
.fps { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tier-body .fps { display: block; margin-top: 3px; }
.hero-body .fps, .screen > div > .fps { color: var(--ink-2); }
.fps-note { font-size: 11px; line-height: 1.5; color: var(--ink-3); margin: 12px 2px 0; }
.fps-note a { color: var(--ink-3); text-decoration: underline; }
img.lazy { opacity: 0; }
img { transition: opacity .25s ease-out; }

/* Иконка внутри кнопки не должна растягиваться флексом. */
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.sec-more svg { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; }
.tier-card > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-4); }
.opt > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-4); }
.rowlist > * > :last-child { text-align: right; max-width: 62%; }
.cart-row > div > div:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.screen { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px); }