/* ════════════════════════════════════════════════════════════════
   Нова Маркет — «ночной рынок»: глубокий синий фон, тёплое янтарное
   золото (звезда), холодный синий для информации. Дизайн-система:
   токены → база → компоненты. Тёмная тема — витринная (по умолчанию),
   светлая включается по prefers-color-scheme и хранится в shop-theme.
   Мобильный-first: сетка товара 2 → 3 (@480) → 4 (@768) → 5 (@1080),
   цели нажатия 44 px, таб-бар < 768 px, цены — tabular-nums.
   Класс чата (/* ── чат ── */) перенесён дословно — токены каскадом.
   ════════════════════════════════════════════════════════════════ */

/* ─────────────── шрифт: self-hosted Inter Variable ─────────────── */
@font-face {
  font-family: "Inter Var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/shop/static/fonts/inter-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/shop/static/fonts/inter-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter Var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/shop/static/fonts/inter-var-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ─────────────── токены ───────────────
   Тёмная тема — витринная: живёт в :root и [data-theme="dark"],
   поэтому без JS (краулер) магазин выглядит как showcase.
   Светлая — только [data-theme="light"] (пре-пейнт-скрипт ставит
   её по prefers-color-scheme, переключатель — по shop-theme). */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1420;
  --surface: #151d2c;
  --surface-2: #1c2740;
  --surface-3: #243352;
  --text: #e8ecf3;
  --muted: #98a2b3;
  --border: #263349;
  --border-2: #33456a;
  --accent: #f5b301;
  --accent-hov: #ffc531;
  --accent-ink: #241a02;
  --accent-soft: rgba(245, 179, 1, .14);
  --info: #5ab0ff;
  --info-soft: rgba(90, 176, 255, .12);
  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, .12);
  --warn: #f5a623;
  --warn-soft: rgba(245, 166, 35, .12);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .12);
  --star: #f2b01e;
  --glass: rgba(21, 29, 44, .82);
  /* типографическая шкала: 12/13/14/16/18/22/28/36/44 */
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-44: 2.75rem;
  /* сетка отступов 4 px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px;
  --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .25);
  --sh-2: 0 8px 24px rgba(0, 0, 0, .35);
  --sh-pop: 0 12px 40px rgba(0, 0, 0, .5);
  --hdr-h: 60px;
  --tabbar-h: 56px;
  --max-w: 1280px;
  --font: "Inter Var", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* алиасы для непереписанных блоков (чат и т.п.) */
  --radius: var(--r-m);
  --radius-s: var(--r-s);
  --radius-l: var(--r-l);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #efefeb;
  --surface-3: #e5e5df;
  --text: #16181d;
  --muted: #5c6068;
  --border: #e3e3dd;
  --border-2: #d2d2ca;
  --accent: #e9a400;
  --accent-hov: #f5b301;
  --accent-ink: #241a02;
  --accent-soft: rgba(233, 164, 0, .14);
  --info: #1f6fed;
  --info-soft: rgba(31, 111, 237, .10);
  --ok: #1e9e5a;
  --ok-soft: rgba(30, 158, 90, .12);
  --warn: #b8860b;
  --warn-soft: rgba(184, 134, 11, .12);
  --danger: #d43c3c;
  --danger-soft: rgba(212, 60, 60, .10);
  --star: #c98a00;
  --glass: rgba(255, 255, 255, .88);
  --sh-1: 0 1px 2px rgba(22, 24, 29, .08);
  --sh-2: 0 8px 24px rgba(22, 24, 29, .13);
  --sh-pop: 0 12px 40px rgba(22, 24, 29, .18);
}

/* ─────────────── база ─────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font: 400 15px/1.55 var(--font);
  min-height: 100dvh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#app { display: flex; flex-direction: column; min-height: 100dvh; width: 100%; }
main, .main { flex: 1; width: 100%; }
h1, h2, h3, h4 { letter-spacing: -.018em; font-weight: 800; }
img, svg { vertical-align: middle; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); }
::selection { background: var(--accent-soft); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 768px) { .wrap { padding: 0 var(--s6); } }
.muted { color: var(--muted); }
.small { font-size: var(--fs-13); }
.num, .price, .card-price, .total-row .t-val, .buy-total .t-val,
.kv .v, .orow .o-price, .orow .o-no, .rail-btn .rail-price, .vtile .v-price {
  font-variant-numeric: tabular-nums;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 var(--r-s) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* мелочь */
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }
.hr { border: none; border-top: 1px solid var(--border); margin: var(--s3) 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; }

/* ─────────────── шапка ─────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-bottom: 1px solid var(--border);
}
.hdr-in {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: var(--hdr-h); padding-top: 6px; padding-bottom: 6px;
}
.brand {
  display: flex; align-items: center; gap: 9px; color: var(--text);
  font-weight: 800; font-size: 17px; white-space: nowrap; letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; font-weight: 400; color: var(--muted); }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ffc531, #b06b00);
  box-shadow: 0 2px 10px rgba(245, 179, 1, .35);
}
.logo-mark svg { color: var(--accent-ink); }
.hdr-nav { display: none; gap: 2px; }
@media (min-width: 960px) { .hdr-nav { display: flex; } }
.hdr-nav a {
  color: var(--muted); font-size: var(--fs-14); font-weight: 600;
  padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: var(--r-s); white-space: nowrap;
}
.hdr-nav a:hover, .hdr-nav a.on { color: var(--text); background: var(--surface-2); text-decoration: none; }

/* поиск: на десктопе — в строке, на мобиле — иконка → строка .exp */
.search { position: relative; flex: 1 1 240px; min-width: 0; order: 3; }
@media (min-width: 768px) { .search { order: 0; flex: 1 1 200px; max-width: 460px; } }
/* 960–1160px: навигация + поиск + действия в ОДНУ строку (перенос поиска
   на второй ряд выглядел сломанным заголовком) */
@media (min-width: 960px) and (max-width: 1160px) {
  .hdr-nav a { padding: 10px 8px; }
  .hdr-in { gap: 8px; }
}
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-s);
  padding: 0 12px; height: 44px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.search-box:focus-within {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-box .ic { color: var(--muted); flex: 0 0 auto; }
.search-box input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.search-box input::placeholder { color: var(--muted); }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 767px) {
  .search { display: none; flex-basis: 100%; order: 9; margin: 0 0 6px; }
  .search.exp { display: block; }
}
.search-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  box-shadow: var(--sh-2); overflow: hidden;
}
.search-hit {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 14px; min-height: 48px; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.search-hit:last-child { border-bottom: none; }
.search-hit:hover, .search-hit.sel { background: var(--surface-2); text-decoration: none; color: var(--text); }
.search-hit .st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.search-hit .sc { font-size: var(--fs-12); color: var(--muted); }
.search-empty { padding: 14px; color: var(--muted); font-size: var(--fs-14); }

.hdr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-s); display: grid; place-items: center;
  color: var(--muted); border: 1px solid transparent; flex: 0 0 auto;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
/* мобильная иконка поиска / десктопные дубли таб-бара */
@media (min-width: 768px) { .search-toggle { display: none; } }
@media (max-width: 767px) { .hide-m { display: none; } }
/* на телефоне шапка — одна строка: RU|EN остаётся в шапке (в футере его
   перекрывал липкий бар покупки), «Войти» становится иконкой */
@media (max-width: 767px) {
  .acct-chip { padding: 0 10px; }
  .acct-chip .acct-label { display: none; }
  .lang-ctl { gap: 0; }
  .lang-btn { padding: 8px 6px; }
}
/* раскрывающаяся строка поиска под шапкой (мобиль) */
.hdr .search-mobile:not([hidden]) { padding-bottom: 12px; }

/* переключатель RU | EN — сегмент, активная сторона залита янтарным */
.lang-ctl, .lang-seg {
  display: flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; flex: 0 0 auto;
}
.lang-ctl .lang-btn, .lang-seg button {
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: 700; color: var(--muted); letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.lang-ctl .lang-btn:hover, .lang-seg button:hover { color: var(--text); }
.lang-ctl .lang-btn.active, .lang-ctl .lang-btn.on,
.lang-seg button.active, .lang-seg button.on { background: var(--accent); color: var(--accent-ink); }
.lang-pill {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--border-2);
  font-size: var(--fs-13); font-weight: 700; color: var(--muted); letter-spacing: .02em;
}

.acct-chip {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--border-2); color: var(--text);
  font-size: var(--fs-14); font-weight: 600; max-width: 190px; white-space: nowrap;
}
.acct-chip:hover { background: var(--surface-2); text-decoration: none; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: var(--fs-13); font-weight: 800;
  background: var(--accent-soft); color: var(--accent);
}
.acct-chip .acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────── переключатель магазина RU ⇄ International ───────────────
   Заметная пилюля в шапке каждого магазина (intl раньше был невидимкой);
   на телефонах остаётся иконкой-глобусом с короткой подписью */
.store-select {
  height: 36px; padding: 0 26px 0 10px; border: 1px solid var(--line);
  border-radius: var(--r-s, 10px); background: var(--surface-1, transparent);
  color: var(--text); font: inherit; font-size: var(--fs-13, 13px); font-weight: 600;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
  max-width: 180px; text-overflow: ellipsis;
}
.store-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.store-select option { background: var(--surface-1, #fff); color: inherit; }
@media (max-width: 767px) { .store-select { max-width: 128px; } }
@media (max-width: 420px) { .store-select { max-width: 104px; height: 40px; } }
.ftr-col a > .ic { color: var(--muted); margin-right: 4px; vertical-align: -2px; }
.ftr-col a:hover > .ic { color: var(--accent); }

/* ─────────────── мобильный таб-бар (< 768) ─────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; min-height: var(--tabbar-h); padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.tabbar a .ic { color: var(--muted); }
.tabbar a.active, .tabbar a.active .ic, .tabbar a.on, .tabbar a.on .ic { color: var(--accent); }
@media (min-width: 768px) { .tabbar { display: none; } }
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  /* липкий бар покупки (product page) выше таб-бара: футер под ним не прятать */
  .ftr { padding-bottom: 96px; }
}

/* ─────────────── кнопки ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-s);
  font-weight: 700; font-size: 15px; border: 1px solid transparent;
  transition: transform .06s, box-shadow .15s, background .15s, border-color .15s, color .15s;
  user-select: none; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ic { flex: 0 0 auto; }
/* выключенная главная кнопка — не «полупрозрачное золото» (читалось как
   сломанная контрастная кнопка), а явный пунктирный заготовок: серый фон,
   приглушённый текст. Оживает — заливается янтарным */
.btn-primary[disabled] {
  opacity: 1; cursor: not-allowed;
  background: var(--surface-2); color: var(--muted);
  border: 1.5px dashed var(--border-2); box-shadow: none;
}
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: color-mix(in srgb, #000 18%, var(--accent));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-primary:hover:not([disabled]) { background: var(--accent-hov); }
.btn-ghost { background: var(--surface); border-color: var(--border-2); color: var(--text); box-shadow: var(--sh-1); }
.btn-ghost:hover:not([disabled]) { border-color: var(--accent); }
.btn-soft { background: var(--surface-2); color: var(--text); }
.btn-soft:hover:not([disabled]) { background: color-mix(in srgb, var(--surface-2) 80%, var(--border) 20%); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-warn { background: var(--warn-soft); color: var(--warn); }
.btn-demo { background: transparent; border: 1.5px dashed var(--border-2); color: var(--muted); }
.btn-demo:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-14); border-radius: 8px; }
.btn-lg { min-height: 52px; font-size: var(--fs-16); }

/* ─────────────── поля ─────────────── */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: var(--fs-13); font-weight: 700; margin-bottom: 6px; }
.input, .field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], textarea.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-s);
  font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .field input::placeholder, textarea.input::placeholder { color: var(--muted); }
.field input:focus, textarea.input:focus, .input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .hint, .field-hint { font-size: var(--fs-12); color: var(--muted); margin-top: 5px; }
.field .err-t { font-size: var(--fs-13); color: var(--danger); margin-top: 5px; }
.input-invalid { border-color: var(--danger) !important; }

.chk, .checkline {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 12px 2px; min-height: 44px; font-size: var(--fs-14);
}
.chk input, .checkline input {
  width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent);
  flex: 0 0 auto; cursor: pointer; touch-action: manipulation;
}

/* ─────────────── баннеры ─────────────── */
.banner {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--r-m); padding: 12px 14px; font-size: var(--fs-14); margin: 12px 0;
  border: 1px solid transparent;
}
.banner .ic { flex: 0 0 auto; margin-top: 1px; }
.banner b { font-weight: 700; }
.banner-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.banner-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
.banner-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.banner-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }

/* ─────────────── чипы: грамматика §7.3 ───────────────
   залитый янтарный = мерчандайзинг; контурный = атрибут;
   мягкая заливка = статус. Никогда не смешивать. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill); padding: 4px 11px;
  font-size: var(--fs-12); font-weight: 700; line-height: 1.25; white-space: nowrap;
  border: 1px solid transparent;
}
.chip .ic { flex: 0 0 auto; }
.chip-solid { background: var(--accent); color: var(--accent-ink); }
.chip-out { border-color: var(--border-2); color: var(--muted); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.chip-out b { color: var(--text); font-weight: 700; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-info { background: var(--info-soft); color: var(--info); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.chip-soft { background: var(--accent-soft); color: var(--accent); }
.chip-key { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
/* ряд фильтр-пилюль на страницах разделов */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

/* ── фильтр игр раздела (200+ нод в «Игровых ключах») ──────────────
   Свёрнутая строка = топ-12 + «Ещё N игр». Раскрытая панель ограничена
   по высоте и скроллится внутри себя, поэтому список товаров остаётся
   на экране — раньше 214 пилюль отодвигали его на несколько экранов. */
.pill-more { border-style: dashed; color: var(--muted); }
.pill-more:hover { color: var(--text); }
.node-panel { margin: -6px 0 14px; }
.node-search {
  width: 100%; max-width: 320px; box-sizing: border-box;
  padding: 9px 12px; margin: 0 0 10px;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.node-search:focus { outline: none; border-color: var(--accent); }
.node-list {
  max-height: 38vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px; margin: 0;
  border: 1px solid var(--border-2); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* ─────────────── бейджи карточки ─────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-pill); padding: 3px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.badge-region {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-2);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--text); border-radius: var(--r-pill); padding: 2px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.badge-instant {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--ok); border-radius: var(--r-pill); padding: 2px 9px;
  font-size: 11px; font-weight: 700;
}
.ribbon, .pbadge {
  position: absolute; top: 10px; left: 0; z-index: 2;
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px 4px 9px; border-radius: 0 8px 8px 0;
  box-shadow: var(--sh-1);
}

/* ─────────────── главная: герой ─────────────── */
.hero { position: relative; padding: clamp(24px, 5vw, 48px) 0 8px; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 78% at 72% -6%, var(--accent-soft), transparent 62%);
}
.hero > * { position: relative; }
.hero-title {
  font-size: clamp(var(--fs-28), 3.4vw + 1rem, var(--fs-44));
  line-height: 1.08; letter-spacing: -.025em; max-width: 720px;
}
.hero-sub { color: var(--muted); font-size: var(--fs-16); margin-top: 10px; max-width: 580px; }
/* compact hero (2026-10-05): Telegram rail must sit within the first
   screenful — less padding, smaller headline, search right under it */
.hero-compact { padding-top: 18px !important; padding-bottom: 14px !important; }
.hero-compact h1 { font-size: clamp(24px, 4.5vw, 34px); margin: 6px 0 10px; }
.hero-compact .hero-search { margin-top: 4px; }
.hero-kicker {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  color: var(--accent); font-weight: 800; font-size: var(--fs-13);
  letter-spacing: .05em; text-transform: uppercase;
}
.hero-search { margin-top: 20px; max-width: 620px; }
.hero-search .search-box {
  height: 52px; border-radius: var(--r-m);
  background: var(--surface-3); border: 1px solid var(--border-2); box-shadow: var(--sh-1);
}
.hero-search .search-box:focus-within { border-color: var(--accent); }
.hero-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  padding: 7px 13px; font-size: var(--fs-13); font-weight: 600; color: var(--muted);
}
.hero-chip .ic { color: var(--accent); }
.hero-skeleton { display: flex; flex-direction: column; gap: 12px; padding: var(--s8) 0; }

/* ─────────────── главная: полосы и сетки ─────────────── */
.vstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 16px; }
@media (min-width: 900px) { .vstrip { grid-template-columns: repeat(4, 1fr); } }
.vitem {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 10px 12px; min-height: 58px;
}
.vico {
  width: 36px; height: 36px; border-radius: var(--r-s); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.vico-pay { position: relative; }
.vico-pay .ic:last-child {
  position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; padding: 2.5px;
  background: var(--surface); border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--accent-soft);
}
.vitem b { display: block; font-size: var(--fs-13); line-height: 1.25; }
.vitem span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; }

.section-head, .section-h { display: flex; align-items: baseline; gap: 10px; margin: var(--s6) 0 var(--s3); }
.section-head h2, .section-h h2 { font-size: var(--fs-22); letter-spacing: -.02em; }
.section-head .cnt, .section-h .cnt { color: var(--muted); font-size: var(--fs-13); }
.see-all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  color: var(--info); font-size: var(--fs-14); font-weight: 700; min-height: 44px;
}
.see-all:hover { text-decoration: none; filter: brightness(1.12); }

/* плитки разделов на главной (Игры / Пополнения / Telegram / Ключи) */
.sec-tiles, .sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
@media (min-width: 900px) { .sec-tiles, .sec-grid { grid-template-columns: repeat(4, 1fr); } }
.sec-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 16px; min-height: 104px; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sec-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--sh-1); transform: translateY(-1px); text-decoration: none;
}
/* заголовок до двух строк: бейдж-счётчик прижат к верху строки, а не
   уезжает вниз вслед за второй строкой заголовка */
.sec-tile { overflow: hidden; }
.sec-tile .sec-top { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; }
/* long titles used to push past the card edge (owner, 2026-10-05):
   flex children refuse to shrink below content width without min-width:0
   + an anywhere wrap; the card itself clips anything residual */
.sec-tile .sec-top b { min-height: 2.6em; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.sec-tile .muted { overflow-wrap: anywhere; }
.sec-tile > b { display: block; font-size: 15px; line-height: 1.3; }
.sec-tile .muted { font-size: var(--fs-12); line-height: 1.4; }
.sec-n {
  margin-left: auto; align-self: flex-start; font-size: 11.5px; font-weight: 700;
  color: var(--muted); white-space: nowrap; flex: 0 0 auto;
  background: var(--surface-2); border-radius: var(--r-pill); padding: 3px 9px;
}

/* горизонтальная карусель-рельса: 4 карточки + «Все»; на мобиле — скролл */
.rail { margin: 4px 0 14px; }
.rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 236px);
  gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
/* затухание правого края скролл-рельсы: обрезанная посреди текста плитка
   выглядела сломанной — теперь она «намекает» на продолжение прокрутки
   (только пока рельса реально скроллится, т.е. <1080) */
@media (max-width: 1079.98px) {
  .rail-track, .gt-row:not(.wrap-row) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
}
.rail-track > * { scroll-snap-align: start; }
.rail-track::-webkit-scrollbar { height: 6px; }
.rail-track::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
@media (min-width: 1080px) {
  .rail-track { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow-x: visible; }
  .rail-track .rail-all { grid-column: auto; }
}
.rail-all {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--border-2); border-radius: var(--r-m); min-height: 140px;
  color: var(--muted); font-weight: 700; font-size: var(--fs-14); padding: 12px;
}
.rail-all:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* сетки товаров: 2 → 3 (@480) → 4 (@768) → 5 (@1080) */
.grid, .grid-prod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 480px) { .grid, .grid-prod { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .grid, .grid-prod { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1080px) { .grid, .grid-prod { grid-template-columns: repeat(5, 1fr); } }
/* товарный рельс (views.js railRow/intl): колонок не больше, чем карточек
   (--rail-n) — рельс из 2–4 товаров заполняет ряд по ширине, а не оставляет
   постоянные пустые слоты в общей 5-колоночной сетке */
.rail-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 480px) { .rail-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .rail-cards { grid-template-columns: repeat(var(--rail-n, 4), 1fr); gap: 14px; } }

/* сетка игровых плиток (хаб / «Популярные игры») */
.grid-games {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px; margin: 12px 0;
}
.game-tile, .gt-card { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.game-tile:hover, .gt-card:hover { text-decoration: none; }
.game-tile:hover b, .gt-card:hover .gt-name { color: var(--accent); }
.game-tile .gtile, .gtile-box .gtile { width: 100%; height: auto; border-radius: var(--r-m); }
.gtile-box { display: block; }
.game-tile b, .gt-name {
  font-size: var(--fs-13); font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;   /* резервируем две строки: цены «от» выравниваются в ряд */
}
.game-tile .from, .gt-from { font-size: var(--fs-12); color: var(--muted); }
.gt-from .price { font-size: var(--fs-13); }
/* «Популярные игры» на главной — горизонтальный скролл-ряд; на хабе — перенос */
.gt-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 136px);
  gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.gt-row > * { scroll-snap-align: start; }
.gt-row::-webkit-scrollbar { height: 6px; }
.gt-row::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.gt-row.wrap-row {
  grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  grid-auto-columns: auto; overflow-x: visible;
}
/* «Популярные игры» на главной: на широких экранах ряд заполняет всю
   ширину переносом (не обрывается пустотой на половине контейнера) */
@media (min-width: 1080px) {
  .pop-games .gt-row {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-columns: auto; overflow-x: visible;
  }
}

/* ─────────────── плитки-иконки (§4) ───────────────
   SVG генерирует Games.tile() в games.js: квадрат 96×96, градиент 135°,
   точечная решётка, монограмма (.gtile-mono) или эмодзи (.gtile-emoji),
   блик. На плитках ≥44px сверху лежит обложка-арт (.gtile-art, локальный
   SVG shop/static/img/n-{slug}.svg); CSS отвечает только за размер и
   радиус — глифы масштабирует viewBox. Малые контексты (≤24px) всегда
   получают монограмму (Games.mini) — без арта и эмодзи. */
.gtile { display: block; width: 100%; height: 100%; border-radius: var(--r-s); }
.gtile text { font-family: var(--font); }
/* обёртка «градиентная плитка + арт поверх»: обложка абсолютом заливает
   квадрат, при ошибке загрузки файла остаётся монограмма на градиенте */
.gtile.tw {
  position: relative; display: block; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: var(--r-s); background: var(--surface-2);
}
.gtile.tw > svg.gtile { position: absolute; inset: 0; width: 100%; height: 100%; }
.gtile-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: inherit;
}
.gtile.sm { width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto; }
/* малые контексты §4.7: пилюли, крошки, строки списка, поиск — 24px, без эмодзи */
.crumbs .gtile, .crumb .gtile, .search-hit .gtile, .key-row .gtile,
.pill .gtile, .chip .gtile, .vtile .gtile {
  width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto;
}
/* эмодзи-слой: вариант HTML-оверлея (span); внутри SVG размер задаёт
   атрибут font-size в юнитах viewBox — CSS его не трогает */
span.gtile-emoji {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 44px; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
}
.gtile:has(.gtile-emoji) .gtile-mono { display: none; } /* монограмма уступает эмодзи */
/* div-фолбэк (страховка без JS-генерации): градиент секции + 2 буквы;
   svg.gtile-fallback из games.js рисует себя сам и стилей не требует */
div.gtile-fallback, span.gtile-fallback {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: inherit; overflow: hidden; container-type: inline-size;
  background-image:
    radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.8px),
    linear-gradient(135deg, var(--g1, #8d99ae), var(--g2, #2b2d42));
  background-size: 13px 13px, 100% 100%;
  color: rgba(255, 255, 255, .95); font-weight: 800;
  font-size: clamp(12px, 26cqw, 44px);
  letter-spacing: .02em; text-transform: uppercase;
}
div.gtile-fallback::after, span.gtile-fallback::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, .14), transparent 70%);
}
.fb-games    { --g1: #e63946; --g2: #7a0c14; }
.fb-topups   { --g1: #1488cc; --g2: #062a45; }
.fb-telegram { --g1: #37aee2; --g2: #0f5c94; }
.fb-keys     { --g1: #f2a900; --g2: #b06b00; }

/* категорийные градиенты — последний рубеж фолбэка (сегодняшние .art-*) */
.art {
  position: absolute; inset: 0; display: grid; place-items: center;
  background-image:
    radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.6px),
    linear-gradient(135deg, var(--g1), var(--g2));
  background-size: 14px 14px, 100% 100%;
}
.art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, .18), transparent 70%);
}
.art > svg { width: 34%; height: 34%; color: rgba(255, 255, 255, .95); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22)); }
.art-stars        { --g1: #37aee2; --g2: #0f5c94; }
.art-premium      { --g1: #7e5cf0; --g2: #2b1a66; }
.art-steam        { --g1: #1b2838; --g2: #66c0f4; }
.art-giftcard     { --g1: #c8aa6e; --g2: #785a28; }
.art-subscription { --g1: #5865f2; --g2: #2b32b3; }
.art-donation     { --g1: #e63946; --g2: #7a0c14; }
.art-keys         { --g1: #f2a900; --g2: #b06b00; }
.art-other        { --g1: #8d99ae; --g2: #2b2d42; }
.art-mini {
  position: static; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-s); flex: 0 0 auto;
}
.art-mini::after { display: none; }
.art-mini > svg { width: 18px; height: 18px; filter: none; }
/* мини-плитка подсказок поиска: обёртка под 24px Games.autoTile */
.tile-mini { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; }
.tile-mini .gtile { border-radius: 6px; }

/* ─────────────── карточка товара (§7.3) ─────────────── */
.card, .pcard {
  display: flex; flex-direction: column; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  overflow: hidden; color: var(--text);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
a.card, a.pcard { text-decoration: none; }
.card:hover, .pcard:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: var(--sh-2); transform: translateY(-2px);
}
.card:focus-visible, .pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card-media, .pmedia {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--surface-2);
}
.card-media .gtile, .card-media .gtile-fallback, .pmedia .art { border-radius: 0; }
.card-media img, .pmedia img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease;
}
.card-media .gtile, .pmedia .art { transition: transform .25s ease; }
.card:hover .card-media img, .card:hover .card-media .gtile,
.pcard:hover .pmedia img, .pcard:hover .pmedia .art { transform: scale(1.02); }
.card-media .badge-region { position: absolute; top: 8px; right: 8px; z-index: 2; }
.card-media .ribbon, .card-media .pbadge { top: 10px; }
/* «KEY»-чипа на плитках раздела ключей — тот же сигнал, что и в хабе
   (/shop/games рендерит key-row с chip-key): единая подача каталога */
.card-media .tile-key {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 3px 9px; letter-spacing: .06em;
}

.card-body, .pcard-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; flex: 1; }
.card-title, .pcard-title {
  font-size: var(--fs-13); line-height: 1.35; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}
/* мета в одну строку: перенос («★ 4.9 (12) / Куплено 25 раз» в два ряда)
   сталкивал ценовой ряд на разных плитках рельсы на разную высоту */
.card-meta, .pcard-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-size: var(--fs-12); color: var(--muted); min-height: 18px;
  min-width: 0; overflow: hidden;
}
.card-meta .b-ico, .pcard-meta .b-ico {
  display: inline-flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-price-row { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
/* ценовой ряд пришит к низу карточки — как в секционных сетках; заголовок
   в 2 строки и разная длина метаданных больше не рвут ряд рельсы */
.card-body .card-price { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.price { font-size: var(--fs-18); font-weight: 800; letter-spacing: -.01em; }
.price .from { font-size: var(--fs-12); font-weight: 500; color: var(--muted); margin-right: 2px; }
.price-sub, .price-alt { font-size: var(--fs-12); color: var(--muted); }
.pcard-price { font-size: var(--fs-18); font-weight: 800; letter-spacing: -.01em; }
.pcard-price .from { font-size: var(--fs-12); font-weight: 500; color: var(--muted); margin-right: 1px; }
.pcard-price-alt { font-size: var(--fs-12); color: var(--muted); }
.pcard-foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 1px; }

/* звёзды рейтинга (SVG) */
.stars { display: inline-flex; gap: 1px; white-space: nowrap; vertical-align: -2px; }
.stars .st { color: var(--border-2); }
.stars .st.on { color: var(--star); }
.rate-num { font-weight: 700; font-size: var(--fs-12); margin-left: 3px; }
.rate-cnt { color: var(--muted); font-size: var(--fs-12); margin-left: 2px; }

/* категорийные пилюли (устаревшая главная; разделы теперь .sec-tile) */
.cat-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.cat-tile {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 8px 14px 8px 9px; min-height: 44px; font-size: var(--fs-14); font-weight: 600; color: var(--text);
  transition: border-color .15s, box-shadow .15s; scroll-snap-align: start;
}
.cat-tile:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--sh-1); }
.cat-tile.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cat-tile.active .cati, .cat-tile.active .cat-n { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); }
.cati {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent);
}
.cat-n {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 2px 7px;
}

/* ─────────────── страница узла /shop/g/{slug} ─────────────── */
.node-hero { position: relative; border-radius: var(--r-l); overflow: hidden; margin-top: 6px; }
.hero-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--wash, transparent), transparent);
}
.hero-game {
  position: relative; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: var(--s8) 20px; border-radius: var(--r-l);
  background: var(--wash, transparent);
}
.hero-game .gtile { width: 128px; height: 128px; flex: 0 0 auto; border-radius: var(--r-l); }
.hero-gtile { display: block; flex: 0 0 auto; }
.hero-gtile .gtile { width: 128px; height: 128px; border-radius: var(--r-l); }
.hero-game .hg-body, .hero-gt-info { flex: 1; min-width: 220px; }
.hero-game h1 { font-size: clamp(var(--fs-22), 2vw + 1rem, var(--fs-36)); letter-spacing: -.02em; }
.hero-game .tagline { color: var(--muted); margin-top: 2px; font-size: var(--fs-14); }
.hero-game .hg-meta, .hero-gt-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: var(--fs-13); color: var(--muted);
}
.hero-gt-meta .price { font-size: var(--fs-18); }
@media (max-width: 520px) {
  .hero-game { padding: 20px 14px; gap: 14px; }
  .hero-game .gtile, .hero-gtile .gtile { width: 88px; height: 88px; border-radius: var(--r-m); }
  .hero-game h1 { font-size: var(--fs-22); }
}
/* сетка страницы узла: обычная — поток, одиночный товар — контент слева,
   панель покупки справа (как на странице товара); на мобильном панель
   поднимается наверх заказом во flex-колонке */
.gg-grid { margin-top: 4px; }
.gg-single { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.gg-single #buy-panel-host { order: -1; }
@media (max-width: 899.98px) {
  .gg-single .buy-card { position: static; }   /* sticky не нужен в один столбец */
}
@media (min-width: 900px) {
  .gg-single { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; max-width: none; }
  .gg-single #buy-panel-host { order: 0; grid-column: 2; grid-row: 1; }
  .gg-single .gg-col-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 14px; }
}
.h-sm { font-size: var(--fs-16); margin-bottom: 8px; }
.region-hint { display: block; font-size: var(--fs-12); color: var(--muted); margin-top: 5px; }

/* гайд по активации (до покупки, §5) — раскрывашка <details> */
.guide { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 2px 14px; }
.guide summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer;
  font-weight: 700; font-size: var(--fs-14); color: var(--text); list-style: none;
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary .ic { color: var(--accent); flex: 0 0 auto; }
.guide summary b { color: var(--accent); }
.guide summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: var(--fs-18); font-weight: 400; }
.guide[open] summary::after { content: "–"; }
.guide-body { padding: 2px 2px 12px 24px; }
.guide-body h4 { font-size: var(--fs-14); margin-bottom: 6px; }
.guide-body ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); line-height: 1.55; }
.guide-body .region-hint { margin-top: 8px; }
.guide-sm { padding: 2px 12px; }
.guide-sm summary { min-height: 44px; font-size: var(--fs-13); }
.offer-guide { margin-bottom: 12px; }

/* тизер ключей на /shop/games: компактные строки. minmax(0,1fr), а не 1fr:
   у 1fr дорожка не сжимается ниже min-content, и строка с длинным именем
   («Age of Mythology: Retold» + цена + чип) распирала экран на мобиле (+449px) */
.key-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
@media (min-width: 700px) { .key-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.key-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px;
  border-bottom: 1px solid var(--border); color: var(--text); min-height: 56px;
}
.key-row:last-child { border-bottom: none; }
.key-row:hover { text-decoration: none; }
.key-row:hover .kr-name { color: var(--accent); }
.kr-name { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-price { font-size: var(--fs-14); white-space: nowrap; }

/* ─────────────── товар /shop/p/{id} ─────────────── */
.crumbs, .crumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--muted); margin: 14px 0 10px; flex-wrap: wrap; }
.crumbs a, .crumb a { color: var(--muted); }
.crumbs a:hover, .crumb a:hover { color: var(--info); }
.pp { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; padding-bottom: 170px; }
/* мобильный порядок: заголовок/медиа → панель покупки → описание/FAQ/отзывы;
   на десктопе pp-head и pp-main в колонке 1, buy-card — колонка 2 на обе строки */
@media (min-width: 768px) {
  .pp { grid-template-columns: minmax(0, 1fr) 380px; padding-bottom: 32px; }
  .pp-head, .pp-main { grid-column: 1; }
  .pp .buy-card { grid-column: 2; grid-row: 1 / span 2; }
}
/* ≥1024: шапка товара сама двухколоночная — обложка слева, заголовок со
   статистикой справа от неё. Раньше обложка 460px стояла под заголовком,
   и правые ~40% полосы пустовали на всю высоту страницы.
   grid-template-rows:auto 1fr — авто-ряды делили высоту 440px-обложки
   между заголовком и статистикой, и между ними повисал мёртвый зазор ~180px */
@media (min-width: 1024px) {
  .pp-head { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 28px; align-items: start; }
  .pp-head .pp-media { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .pp-title, .pp-stats { grid-column: 2; }
}
.pp-title { font-size: var(--fs-22); line-height: 1.22; letter-spacing: -.02em; margin: 2px 0 8px; }
@media (min-width: 768px) { .pp-title { font-size: var(--fs-28); } }
.pp-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); font-size: var(--fs-13); margin-bottom: 14px; }
.pp-stats .pp-fast { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 700; }
.pp-media { border-radius: var(--r-l); margin-bottom: 14px; aspect-ratio: 1 / 1; max-width: 460px; overflow: hidden; }

/* общая панель-«карточка» для контентных блоков.
   Внимание: .card — КАРТОЧКА ТОВАРА (§9.3); панели — .panel.
   .card без .card-media деградирует в панель (страховка :has). */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 18px;
}
.panel + .panel { margin-top: 14px; }
.panel h2 { font-size: var(--fs-18); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.panel h2 .ic { color: var(--accent); }
.card:not(:has(.card-media)):not(:has(.gtile)) {
  display: block; padding: 18px; overflow: visible;
}
.card:not(:has(.card-media)):not(:has(.gtile)) h2 { font-size: var(--fs-18); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card:not(:has(.card-media)):not(:has(.gtile)):hover {
  transform: none; box-shadow: var(--sh-1); border-color: var(--border);
}
.panel, .card:not(:has(.card-media)):not(:has(.gtile)) { box-shadow: var(--sh-1); }
.pp-desc { font-size: var(--fs-14); line-height: 1.62; }
.mini-rows { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--border); }
.mini-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.mini-row:last-child { border-bottom: none; }
.mini-row > .ic { flex: 0 0 auto; color: var(--accent); }
.mini-row b { display: block; font-size: var(--fs-14); }
.mini-row span { display: block; font-size: var(--fs-12); color: var(--muted); margin-top: 1px; }

/* ─────────────── панель покупки ─────────────── */
.buy, .buy-card { padding: 16px; box-shadow: var(--sh-1); }
.buy { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); }
@media (min-width: 768px) {
  .buy, .buy-card { position: sticky; top: calc(var(--hdr-h) + 14px); }
}
.buy-sec { margin-bottom: 18px; }
.buy-sec > .lbl {
  font-size: var(--fs-12); font-weight: 800; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.pillrow { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--r-s);
  padding: 8px 12px; min-height: 44px; font-size: var(--fs-14); font-weight: 600; color: var(--text);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.pill:hover { border-color: var(--accent); }
.pill.active, .pill-on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.pill .pill-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.pill.active .pill-sub, .pill-on .pill-sub { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }

/* сетка вариантов: тайлы номиналов (у PUBG — 29 шт., скролл + поиск) */
.variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px; }
.variant-scroll { max-height: 264px; overflow-y: auto; border-radius: var(--r-s); scrollbar-width: thin; }
.var-find { margin-bottom: 8px; }
.vtile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--r-s);
  padding: 9px 10px; min-height: 56px; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.vtile:hover { border-color: var(--accent); }
.vtile .v-lbl, .vtile .vt-label { font-size: var(--fs-13); font-weight: 600; line-height: 1.25; }
.vtile .v-sub { font-size: var(--fs-12); color: var(--muted); }
.vtile .v-price, .vtile .vt-price { font-size: var(--fs-12); font-weight: 700; color: var(--muted); }
.vtile.on, .vtile.active {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.vtile.on .v-lbl, .vtile.on .v-price, .vtile.active .v-lbl, .vtile.active .v-price,
.vtile.on .vt-label, .vtile.on .vt-price, .vtile.active .vt-label, .vtile.active .vt-price { color: var(--text); }

/* количество: пресеты + своё число */
.qty-row { display: flex; flex-wrap: wrap; gap: 8px; }
.qty-input { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty-input input { flex: 1; min-width: 0; }
.qty-input .unit { font-size: var(--fs-13); color: var(--muted); white-space: nowrap; }

.rcpt-check { display: flex; gap: 7px; align-items: center; font-size: var(--fs-13); margin-top: 7px; min-height: 20px; }
.rcpt-check.ok { color: var(--ok); }
.rcpt-check.bad { color: var(--danger); }
.rcpt-check.idle { color: var(--muted); }
.spin {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--border-2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.me-btn { font-size: var(--fs-13); color: var(--info); font-weight: 700; padding: 6px 10px; min-height: 34px; border-radius: 6px; }
.me-btn:hover { background: var(--info-soft); }

/* способ оплаты: карта скрыта при quote=0; в intl — только крипта;
   M-Pesa — видимо отключённая строка (никогда не кликабельна) */
.rail-row, .rail-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 420px) { .rail-row, .rail-grid { grid-template-columns: 1fr 1fr; } }
.rail-btn {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1.5px solid var(--border-2); background: var(--surface); border-radius: var(--r-s);
  padding: 10px 12px; min-height: 52px; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.rail-ico {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted);
  transition: background .12s, color .12s;
}
.rail-txt { min-width: 0; }
.rail-btn .rail-name { display: block; font-size: var(--fs-14); font-weight: 700; line-height: 1.2; }
.rail-btn .rail-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.rail-btn .rail-price { margin-left: auto; font-weight: 800; font-size: 15px; white-space: nowrap; }
.rail-btn.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.rail-btn.active .rail-ico { background: var(--accent); color: var(--accent-ink); }
.rail-btn[disabled], .rail-btn.rail-off, .rail-btn.rail-disabled {
  cursor: not-allowed; opacity: .55; border-style: dashed;
}
.rail-btn[disabled] .rail-price, .rail-btn.rail-off .rail-price,
.rail-btn.rail-disabled .rail-price { color: var(--muted); font-weight: 600; font-size: var(--fs-13); }
.rail-soon {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted);
  border: 1px dashed var(--border-2); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap;
}

.total-row, .buy-total { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 12px; }
.total-row .t-lbl, .buy-total .t-lbl { color: var(--muted); font-size: var(--fs-14); }
.total-row .t-val, .buy-total .t-val { font-size: var(--fs-22); font-weight: 800; letter-spacing: -.01em; }
.total-row .t-sub, .buy-total .t-sub, .total-sub { display: block; text-align: right; font-size: var(--fs-12); color: var(--muted); margin-top: 1px; }
.total-sub { margin: -6px 0 10px; }
/* подсказка под CTA: чего не хватает для активации (пустой @username) */
.cta-hint { text-align: center; font-size: var(--fs-12); color: var(--muted); margin-top: 8px; }
.cta-hint[hidden] { display: none; }
.pay-note { display: flex; gap: 7px; align-items: flex-start; font-size: var(--fs-12); color: var(--muted); margin-top: 10px; text-align: left; }
.pay-note .ic { flex: 0 0 auto; margin-top: 1px; color: var(--ok); }

/* мобильная липкая кнопка покупки — над таб-баром */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  transition: transform .25s ease, opacity .25s ease;
}
/* панель покупки в кадре — липкая кнопка уходит: двух золотых CTA с одним
   текстом на экране быть не должно (IntersectionObserver в views.js) */
.mcta.mcta-off { transform: translateY(130%); opacity: 0; pointer-events: none; }
.mcta .btn { width: 100%; }
.mcta .price-sub { text-align: center; margin-top: 4px; }
@media (min-width: 768px) { .mcta { display: none; } }
@media (max-width: 767px) {
  .mcta { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .pp { padding-bottom: 200px; }
}
/* подсветка панели покупки, когда липкая кнопка приводит к ней */
@keyframes panelflash {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  25% { box-shadow: 0 0 0 7px var(--accent-soft), var(--sh-2); border-color: var(--accent); }
  100% { box-shadow: var(--sh-1); }
}
.panel-flash { animation: panelflash 1.4s ease 1; }

/* ─────────────── отзывы ─────────────── */
.review { border-top: 1px solid var(--border); padding: 13px 0; }
.review:first-of-type { border-top: none; }
.review .r-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: var(--fs-13); }
.review .r-body { font-size: var(--fs-14); white-space: pre-wrap; word-break: break-word; }
.review .r-date { color: var(--muted); font-size: var(--fs-12); }
.star-row { display: flex; gap: 4px; margin: 8px 0 12px; }
.star-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--border-2); border-radius: 8px; transition: transform .1s, color .1s; }
.star-btn .st { fill: none; stroke: currentColor; }
.star-btn.on { color: var(--star); }
.star-btn.on .st { fill: currentColor; stroke: none; }
.star-btn:hover { transform: scale(1.12); }

/* ─────────────── FAQ ─────────────── */
.faq, .faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child, .faq > .faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; text-align: left; padding: 14px 2px; font-weight: 700; font-size: var(--fs-14);
  display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 44px;
}
.faq-q::after { content: "+"; font-size: var(--fs-18); color: var(--muted); font-weight: 400; }
.faq-item.open .faq-q::after { content: "–"; }
.faq-a { display: none; padding: 0 2px 14px; color: var(--muted); font-size: var(--fs-14); line-height: 1.6; }
.faq-item.open .faq-a { display: block; }

/* ─────────────── модалки ─────────────── */
.modal-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5, 8, 15, .64);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 16px;
  animation: fadein .15s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
.modal, .modal-card {
  width: 100%; max-width: 480px; max-height: calc(100dvh - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l);
  box-shadow: var(--sh-pop);
  display: flex; flex-direction: column; animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
.modal-head h3 { font-size: var(--fs-18); }
.modal-body { padding: 14px 18px; overflow-y: auto; }
.modal-x { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.modal-x:hover { background: var(--surface-2); color: var(--text); }

/* чекаут */
.sumline {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
  background: var(--surface-2); border-radius: var(--r-s); padding: 10px 12px;
  font-size: var(--fs-13); color: var(--muted); margin-bottom: 14px;
}
.sumline b { color: var(--text); }
.sumline .ic { color: var(--muted); }
.deliver-box {
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft);
  border-radius: var(--r-m); padding: 13px 14px; margin-bottom: 6px;
}
.deliver-box .d-lbl { font-size: 11.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.deliver-box .d-val { font-size: var(--fs-18); font-weight: 800; margin-top: 3px; word-break: break-word; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; min-width: 0; }
.promo-ok { display: flex; gap: 6px; align-items: center; font-size: var(--fs-13); font-weight: 700; margin-top: 6px; }
.promo-ok .ic { flex: 0 0 auto; }
.form-err { color: var(--danger); font-size: var(--fs-13); margin-top: 10px; white-space: pre-wrap; }
.mpesa-note { font-size: var(--fs-12); color: var(--muted); margin-top: 6px; }
.crypto-note { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-12); color: var(--muted); margin-top: 8px; }

/* ─────────────── страница заказа ─────────────── */
.order-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.order-ico {
  width: 54px; height: 54px; border-radius: var(--r-m); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-2); color: var(--muted);
}
.order-ico.t-ok { background: var(--ok-soft); color: var(--ok); }
.order-ico.t-info { background: var(--info-soft); color: var(--info); }
.order-ico.t-warn { background: var(--warn-soft); color: var(--warn); }
.order-ico.t-danger { background: var(--danger-soft); color: var(--danger); }
.order-h-title { font-size: var(--fs-22); letter-spacing: -.018em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-h-sub { color: var(--muted); font-size: var(--fs-14); margin-top: 2px; }
.order-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 900px) { .order-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: var(--s1) 0; font-size: var(--fs-14); border-bottom: 1px dashed var(--border); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; word-break: break-word; }
.kv .v .ic { color: var(--muted); }

.tl { list-style: none; margin: 4px 0; }
.tl li { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.tl li::before { content: ""; position: absolute; left: 12px; top: 30px; bottom: 2px; width: 2px; background: var(--border); }
.tl li:last-child::before { display: none; }
.tl .tl-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; z-index: 1;
  display: grid; place-items: center;
  background: var(--surface); color: var(--muted); border: 2px solid var(--border-2);
}
.tl li.done .tl-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tl li.now .tl-dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); animation: pulse 1.6s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50% { box-shadow: 0 0 0 7px transparent; }
}
.tl .tl-t { font-weight: 700; font-size: var(--fs-14); }
.tl .tl-d { color: var(--muted); font-size: var(--fs-12); margin-top: 1px; }

.status, .st-pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill);
  padding: 4px 11px; font-size: var(--fs-12); font-weight: 700; white-space: nowrap;
}
.st-muted { background: var(--surface-2); color: var(--muted); }
.st-warn { background: var(--warn-soft); color: var(--warn); }
.st-info { background: var(--info-soft); color: var(--info); }
.st-ok { background: var(--ok-soft); color: var(--ok); }
.st-danger { background: var(--danger-soft); color: var(--danger); }

.codes { display: flex; flex-direction: column; gap: 8px; }
.code-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px dashed var(--border-2);
  border-radius: var(--r-s); padding: 11px 12px;
}
.code-row code { flex: 1; font-size: var(--fs-14); font-weight: 600; word-break: break-all; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.copy-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: 7px 11px; font-size: var(--fs-13); font-weight: 600; min-height: 44px;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-btn.did { border-color: var(--ok); color: var(--ok); }

/* ─────────────── список заказов ─────────────── */
.orow {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 14px; color: var(--text); margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.orow:hover { border-color: var(--border-2); box-shadow: var(--sh-1); text-decoration: none; }
.orow .o-no { font-weight: 800; font-size: var(--fs-14); white-space: nowrap; }
.orow .o-t { flex: 1; min-width: 160px; font-size: var(--fs-14); }
.orow .o-meta { color: var(--muted); font-size: var(--fs-12); margin-top: 2px; }
.orow .o-right { display: flex; align-items: center; gap: 10px; }
.orow .o-price { font-weight: 800; white-space: nowrap; }
/* бейдж непрочитанных в строке заказа — единственный .badge вне карточки */
.orow .badge { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; background: var(--danger); color: #fff; letter-spacing: 0; text-transform: none; }

/* ─────────────── вход ─────────────── */
.auth-wrap { max-width: 420px; margin: 24px auto 40px; }
.auth-tabs, .tabs {
  display: flex; gap: 4px; background: var(--surface-2); border-radius: var(--r-s);
  padding: 4px; margin-bottom: 18px;
}
.auth-tabs > button, .tab {
  flex: 1; min-height: 44px; border-radius: 8px; font-weight: 700; font-size: var(--fs-14);
  color: var(--muted);
}
.auth-tabs > button.active, .tab.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.tg-widget-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 4px; min-height: 90px; }
.subtabs { display: flex; gap: 12px; margin-bottom: 14px; font-size: var(--fs-14); }
.subtabs button { color: var(--muted); font-weight: 700; padding: 6px 2px; border-bottom: 2px solid transparent; min-height: 44px; }
.subtabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ─────────────── аккаунт / инфо ─────────────── */
.acct-id { display: flex; gap: 14px; align-items: center; }
.acct-id .avatar { width: 52px; height: 52px; font-size: 20px; }
.acct-line { display: inline-flex; align-items: center; gap: 6px; }
.prose { max-width: 720px; }
.prose h1 { font-size: var(--fs-28); margin: 20px 0 14px; letter-spacing: -.02em; }
.prose h2 { font-size: var(--fs-18); margin: 20px 0 8px; }
.prose p, .prose li { color: var(--text); font-size: 15px; margin-bottom: 10px; line-height: 1.62; }
.prose ul { padding-left: 20px; }
.prose .muted { color: var(--muted); }
.steps { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 18px; }
.step .s-n {
  width: 34px; height: 34px; border-radius: var(--r-s); margin-bottom: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 800;
}
.step h3 { font-size: 15px; margin-bottom: 6px; }
.step p { font-size: var(--fs-13); color: var(--muted); }

/* ─────────────── чат ─────────────── */
.chat-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.chat-head {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 13px 16px; min-height: 52px; font-weight: 700; font-size: 14.5px; color: var(--text);
}
.chat-head:hover { background: var(--surface-2); }
.chat-head .chev { margin-left: auto; color: var(--muted); transition: transform .15s; }
.chat-panel.open .chat-head .chev { transform: rotate(180deg); }
.chat-head .online { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ok); }
.chat-head .online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.chat-body { display: none; }
.chat-panel.open .chat-body { display: block; }
.chat-msgs {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  height: 340px; overflow-y: auto; background: var(--bg);
  border-top: 1px solid var(--border);
}
.msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 14px; margin-top: 6px; word-break: break-word; white-space: pre-wrap; }
.msg-buyer { align-self: flex-start; background: var(--accent-soft); color: var(--text); border-bottom-left-radius: 4px; }
.msg-seller { align-self: flex-end; background: var(--surface); border: 1px solid var(--border); border-bottom-right-radius: 4px; }
.msg-system { align-self: center; background: none; color: var(--muted); font-size: 12px; padding: 4px 0; text-align: center; }
.msg-pending { opacity: .55; }
.msg-err { outline: 1px dashed var(--danger); }
.msg .m-time { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; text-align: right; }
.composer { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.composer textarea {
  flex: 1; min-width: 0; resize: none; min-height: 44px; max-height: 120px;
  border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; background: var(--surface);
}
.composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.send-btn {
  width: 44px; height: 44px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; flex: 0 0 auto;
}
.send-btn:hover { background: var(--accent-hov); }
.send-btn[disabled] { opacity: .5; }
.chat-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 14px; }

/* полноэкранный шит чата на мобильном */
@media (max-width: 767px) {
  .chat-panel.open {
    position: fixed; inset: 0; z-index: 80; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .chat-panel.open .chat-head { flex: 0 0 auto; border-bottom: 1px solid var(--border); }
  .chat-panel.open .chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .chat-panel.open .chat-msgs { flex: 1; height: auto; border-top: none; }
  .chat-panel.open .composer { flex: 0 0 auto; }
}

/* ─────────────── тосты ─────────────── */
#toast-root {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 120;
  display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex; gap: 10px; align-items: center;
  background: var(--text); color: var(--bg);
  border-radius: var(--r-s); padding: 12px 16px; font-size: var(--fs-14); font-weight: 500;
  box-shadow: var(--sh-pop); animation: toastin .2s ease-out;
}
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
.toast.err { background: var(--danger); color: #fff; }
.toast .t-ico { flex: 0 0 auto; display: grid; }
@media (max-width: 767px) {
  #toast-root { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
}

/* ─────────────── скелетоны и пустые состояния ─────────────── */
.skeleton, .sk { background: var(--surface-2); border-radius: 8px; position: relative; overflow: hidden; }
.skeleton::after, .sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 65%, transparent), transparent);
  animation: sksh 1.3s infinite;
}
@keyframes sksh { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-card, .skeleton-card { height: 320px; border-radius: var(--r-m); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.sk-in { margin: 14px; }
.empty { text-align: center; padding: var(--s12) 20px; color: var(--muted); }
.empty .e-ico {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 14px;
  background: var(--surface-2); color: var(--accent);
}
.empty h3 { color: var(--text); font-size: var(--fs-18); margin-bottom: 6px; }
.empty p { font-size: var(--fs-14); max-width: 420px; margin: 0 auto 14px; }
.spin-row { display: flex; justify-content: center; padding: var(--s12) 0; }

/* ─────────────── футер ─────────────── */
.ftr { border-top: 1px solid var(--border); margin-top: var(--s12); background: var(--surface); }
.ftr-in { display: flex; flex-wrap: wrap; gap: 24px; padding: 26px 0 18px; }
.ftr-col { min-width: 150px; flex: 1; }
.ftr-col h4 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; font-weight: 800; }
.ftr-col a { display: block; color: var(--text); font-size: var(--fs-14); padding: 4px 0; }
.ftr-col a:hover { color: var(--accent); }
.ftr-pays { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 14px; border-top: 1px solid var(--border); }
/* RU|EN в футере — компенсация сегмента, скрытого в мобильной шапке */
.ftr-lang { display: none; padding: 0 0 14px; }
@media (max-width: 767px) { .ftr-lang { display: flex; } }
.pay-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 13px 5px 9px; font-size: var(--fs-12); font-weight: 600; color: var(--muted);
  background: var(--surface);
}
.pay-chip .ic { color: var(--accent); }
.ftr-note { color: var(--muted); font-size: var(--fs-13); padding-bottom: 22px; }
.ftr-note a { font-weight: 700; }
.live-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--ok); font-weight: 700; }
.live-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* ─────────── доп-маркеры разметки views.js (комплемент для полноты контракта) ─────────── */
.pop-games { margin-top: var(--s4); }
.hero-intl h1 { font-size: var(--fs-28); }
.mpesa-strip { margin-top: var(--s4); }
.usdt-note, .total-note { margin-top: var(--s2); }
.pp-main, .pp-head { min-width: 0; }
.region-banner { margin: 0 0 var(--s3); align-items: flex-start; }
.ftr-col a.bot-link { color: var(--text); font-size: var(--fs-14); }
.ftr-col a.bot-link:hover { color: var(--accent); }

/* мобильная строка поиска: якорь для собственного попапа */
.search-mobile { position: relative; }

/* ─────────────── печатный чек (страница заказа, window.print) ───────────────
   Экран: чек скрыт. Печать: остаётся только чек — белый фон, системные
   цвета, без шапки/таб-бара/чата. Серверный PDF не нужен. */
.receipt { display: none; }

@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  body * { visibility: hidden; }
  #app .hdr, #app .ftr, .tabbar, .mcta, #toast-root, #modal-root { display: none !important; }
  #receipt, #receipt * { visibility: visible; }
  #receipt {
    display: block !important; position: absolute; inset: 0 auto auto 0; width: 100%;
    background: #fff !important; color: #000 !important; padding: 6mm 2mm;
    font: 13px/1.5 var(--font);
  }
  .rc-head { display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #000; padding-bottom: 8px; }
  .rc-brand { display: inline-flex; gap: 7px; align-items: center; font-size: 16px; font-weight: 800; }
  .rc-type { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
  .rc-no { font-size: 22px; margin: 14px 0 4px; letter-spacing: .02em; }
  .rc-rows { margin-top: 10px; border-top: 1px solid #000; }
  .rc-row { display: flex; justify-content: space-between; gap: 16px;
    padding: 7px 0; border-bottom: 1px dashed #999; font-size: 13px; }
  .rc-row span { color: #444; }
  .rc-row b { text-align: right; font-weight: 700; word-break: break-word; }
  .rc-note { margin-top: 12px; font-size: 11px; color: #444; }
}

/* ── real product photos on tiles (games: cover, brand logos: contain) ── */
.gtile-art.gtile-photo { object-fit: cover; }
.gtile-art.gtile-photo.contain { object-fit: contain; padding: 14%; }

/* cover-обложка плитки загрузилась — эмодзи-основа под ней гаснет:
   раньше эмодзи мигал до загрузки фото и просвечивал сквозь прозрачные
   места арта (логотипы contain этого класса не получают — им градиент нужен) */
.gtile.tw.art-in > svg.gtile { display: none; }

/* ── мобильная шапка: действия должны влезать в одну строку до 360px ──
   (замер 09-06: hdr-actions выступал на +9px и распирал страницу).
   Иконки 40px, язык компактнее, селектор магазина уже */
@media (max-width: 480px) {
  .hdr-actions { gap: 4px; }
  .hdr-actions .icon-btn { width: 40px; height: 40px; }
  .lang-btn { padding: 8px 5px; }
  .store-select { max-width: 108px; }
  .acct-chip { padding: 0 8px; height: 40px; }
}
/* плитки игр: 128px давало 4 душных колонки на широких телефонах —
   поднимаем минимум, строка становится просторнее (3 колонки @576, 2 @360) */
.gt-row.wrap-row { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
.grid-games { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
/* вошедший чип на телефоне — только аватар (имя до 190px + селектор +
   язык + 2 иконки = ~425px в строке 328px — распирало шапку) */
@media (max-width: 480px) {
  .acct-chip { padding: 0 6px; gap: 0; }
  .acct-chip .acct-name { display: none; }
}

/* ── узкие телефоны (≤360): шапка-одна-строка ──
   замер: actions 329px в строке 304px. Иконки 36, селектор 96, язык и
   счётчик компактнее */
@media (max-width: 360px) {
  .hdr-in { gap: 6px; }
  .hdr-actions { gap: 2px; }
  .hdr-actions .icon-btn { width: 36px; height: 36px; }
  .lang-btn { padding: 7px 4px; font-size: var(--fs-12); }
  .store-select { max-width: 96px; height: 36px; font-size: var(--fs-12); }
  .acct-chip { min-height: 36px; }
  .acct-chip .avatar { width: 26px; height: 26px; }
}

/* длинные разделы (ключи: 200+ игр) пагинируются по 24 + «показать ещё» */
.load-more { display: flex; justify-content: center; padding: 18px 0 8px; }
.load-more .btn { min-width: 220px; }

/* ── recipient choice (2026-10-05): «себе / другому» — two big tappable
   rows, the old bot pattern; the tiny «мне» chip was easy to miss ── */
.rcpt-choice { display: flex; flex-direction: column; gap: 8px; }
.rcpt-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-m); padding: 12px 14px; cursor: pointer;
  color: var(--text); text-align: left; font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.rcpt-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.rcpt-opt-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.rcpt-opt-ico { flex: 0 0 auto; color: var(--accent); display: flex; }
.rcpt-opt-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rcpt-opt-txt b { font-size: 14.5px; overflow-wrap: anywhere; }
.rcpt-opt-txt span { font-size: var(--fs-12); color: var(--muted); }
.rcpt-opt-check { flex: 0 0 auto; color: var(--accent); }