/* TIM PLAY — сайт (широкая главная). Визуал = наша тема theme-playful:
   тёмно-сине-фиолетовый фон-градиент, циан/оранж/золото акценты, лого TIM ▶ PLAY. */

/* ⭐ Спрятанное атрибутом hidden ДОЛЖНО быть спрятано — всегда и везде. Браузерное
   правило [hidden]{display:none} слабее любого нашего класса, поэтому блок с
   display:grid/flex оставался видимым, хотя код его «спрятал» (так на главной
   показались подписки сразу двух регионов). Одно правило на весь сайт вместо
   перечисления классов по одному (§0cc). */
[hidden] { display: none !important; }

:root {
  --bg: #070817;
  --panel: #141a30;
  --panel-soft: #1b2340;
  --panel-border: rgba(118, 206, 255, 0.22);
  --panel-border-hover: rgba(93, 231, 255, 0.55);
  --text: #fffdf8;
  --muted: #d4d8ef;
  --muted-soft: #8f9ab9;
  --accent: #ff7a2f;
  --cyan: #5de7ff;
  --gold: #ffd166;
  --radius: 16px;
  /* Ширина контента (сужена 11.08.2026 по просьбе владельца: было
     clamp(1200px, 78vw, 1640px) — на ноутбуке контент занимал экран почти край в край,
     поля оставались по 40px, и подробные карточки выглядели растянутыми).
     Теперь на любом экране остаются поля: 86vw, но не уже 960px и не шире 1200px.
     1200 — привычный потолок витрин (у конкурентов 1120–1250); выше начинается
     «полотно», которое трудно читать. Проверено замером: 1280 → 1101, 1440 → 1200,
     1920 и 2560 → 1200 (было 1200 / 1200 / 1497 / 1640). */
  --maxw: clamp(960px, 86vw, 1200px);
  /* Кнопки — 1:1 стиль Telegram-магазина (единый источник, см. §0d).
     Кнопка «в корзину» = game-detail-cart/parsed-product-detail-buy (brand-checkout-fix.css):
     циан→синий→фиолет, белый текст. Активная вкладка = subscription-term-tab.is-active
     (subscription-detail.css): бирюза→синий. Раньше веб рисовал плоский синий и фиолет — не ТГ. */
  --tg-cart-grad: linear-gradient(100deg, #5de7ff, #4e80ff 58%, #6c5dff);
  --tg-cart-in: linear-gradient(100deg, #f3d575, #f7b84d 54%, #61d5ff);
  --tg-cart-shadow: 0 18px 38px rgba(78, 128, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  --tg-seg-grad: linear-gradient(90deg, rgba(93, 231, 255, 0.94), rgba(78, 128, 255, 0.96));
  --tg-seg-shadow: 0 12px 28px rgba(78, 128, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  /* Спокойный акцент главной/хрома — один кобальтовый синий (вместо кислотной бирюзы). */
  --blue: #3f6bff;
  --blue-2: #6c8bff;
  --blue-soft: rgba(63, 107, 255, 0.14);
  --blue-line: rgba(63, 107, 255, 0.4);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top — чтобы якорные переходы (#playstation, #services) не прятали
   заголовок секции под sticky-шапку. Один механизм на все якоря (десктоп 70px + воздух). */
/* scroll-behavior НЕ ставим глобально: плавный скролл к якорю ПРИ ЗАГРУЗКЕ страницы
   (URL с #reviews) на iOS Safari ломался — контент «уезжал вверх», страница пустая.
   Плавность делаем точечно в JS на клик; при загрузке — мгновенный переход + чистим #. */
html { background: #10131f; scroll-padding-top: 86px; }
body {
  position: relative; min-height: 100vh; color: var(--text); background: #10131f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  /* Прижимаем подвал вниз: страница — колонка на всю высоту окна, footer уходит вниз */
  display: flex; flex-direction: column;
  /* Закрытая панель мобильного меню стоит справа ЗА экраном (position:fixed + transform)
     и в Chrome/Android распирала документ до 730px при экране 390 — страницу можно было
     утащить вбок в пустоту (в Safari бага нет, поэтому он и не всплывал). clip, а НЕ
     hidden: hidden создаёт контекст прокрутки и ломает position:sticky у шапки. */
  overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1050px 600px at 78% -12%, rgba(63, 107, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #171d31 0%, #131829 46%, #10131f 100%);
  background-repeat: no-repeat; background-size: 100% 100%;
}
body > * { position: relative; z-index: 1; }
/* ТОЛЬКО боковые поля — shorthand `padding: 0 …` обнулял бы вертикальный padding
   у элементов с двумя классами (напр. `.h-sec.container`) и ломал отступы секций. */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
a { color: inherit; text-decoration: none; }
/* «PlayStation» в заголовке — один сдержанный сине-сиреневый тон (без радуги). */
.grad { background: none; -webkit-text-fill-color: #93a9ff; color: #93a9ff; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* --- Логотип TIM ▶ PLAY --- */
/* Размер задан ОДИН раз на всей ссылке: буквы наследуют его, значок считает свою высоту
   от него же (1em) и потому всегда пропорционален надписи — в шапке, в подвале и на
   телефоне. Раньше размеры значка были вписаны числами в разметку, по копии на место,
   и в подвале он выглядел мелким рядом с буквами. */
.logo { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: 0.6px; font-size: 23px; }
.logo__word { color: var(--text); }
.logo__play { height: 1em; width: auto; }
.logo__play { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }

/* --- Шапка --- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 11, 24, 0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 18px; height: 70px; }
.search {
  /* min-width: 0 — без него поиск не сжимается уже своего содержимого, и шапка
     переполняется: правые кнопки (корзина, «Войти») уезжают за край экрана. */
  flex: 1 1 auto; min-width: 0; max-width: 440px; display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 0 14px; height: 42px;
}
.search .ic { color: var(--muted-soft); }
.search__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font-size: 15px; }
.search__input::placeholder { color: var(--muted-soft); }
.region-switch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 12px; height: 42px; padding: 0 14px; font-size: 15px; font-weight: 600;
}
.region-switch .ic { color: var(--blue-2); }
/* Название региона видно ВСЕГДА: по клику «PlayStation» в меню покупатель попадает сразу
   в витрину региона, и первым делом должен понять, в каком он и что регион можно сменить.
   Один флажок без подписи этого не говорит. Место в шапке освобождает поиск (min-width:0)
   и перенос поиска на вторую строку на узких экранах. */
@media (min-width: 861px) and (max-width: 1379px) {
  .region-switch { padding: 0 11px; gap: 7px; font-size: 14px; }
}
.region-switch__ico { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.region-switch__caret { color: var(--muted-soft); }
.region-switch-wrap { position: relative; }
.region-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 40; box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
.region-menu[hidden] { display: none; }
.region-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--muted); font-size: 15px; font-weight: 600; }
.region-menu a:hover { background: var(--panel-soft); color: var(--text); }
.region-menu a.is-active { color: var(--blue-2); }
.region-menu__ico { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.site-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Кнопка «Войти» отделена от иконок (профиль/избранное/корзина), чтобы корзина не липла к ней. */
.site-header__actions .btn { margin-left: 12px; }
/* Иконка шапки. Работает и на ссылке, и на КНОПКЕ (чат — button): у кнопки браузер
   рисует свой светлый фон и рамку, поэтому сбрасываем их прямо здесь, а не отдельным
   правилом под каждую новую кнопку. */
.hicon { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); width: 44px; height: 44px; border-radius: 12px; transition: color .2s, background .2s;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.hicon:hover { color: var(--blue-2); background: var(--panel-soft); }
.hicon .ic { width: 24px; height: 24px; stroke-width: 1.8; }

/* --- Кнопки --- */
.btn { display: inline-block; padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .15s, box-shadow .2s; white-space: nowrap; }
/* Вторичная кнопка шапки («Войти»/«Кабинет»). Заливной primary там был самым ярким
   пятном страницы и перетягивал внимание с покупки: вход нужен только на оплате. */
.btn--ghost { color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); }
.btn--ghost:hover { color: var(--text); background: rgba(255,255,255,0.09); }

/* ═══ ГЛАВНАЯ (index.html) — «магазин цифровых товаров», PlayStation-флагман ═══ */
/* Навигация в шапке + анимация плей в лого (наведи — подлетает к надписи) */
.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-drop { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-radius: 9px; cursor: pointer; transition: color .15s, background .15s; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-caret { font-size: 10px; color: var(--muted-soft); transition: transform .2s; }
.nav-drop:hover .nav-caret { transform: rotate(180deg); }
/* Выпадающее меню — раскрывается по наведению (десктоп). Невидимый «мост» ::before
   закрывает зазор между пунктом и меню, чтобы hover не прерывался при переходе курсора. */
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 224px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 40; }
.nav-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-drop:hover .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.nav-menu a:hover { background: var(--panel-soft); color: var(--text); }
/* ЕДИНАЯ иконка-плашка для всех пунктов — один размер и форма (чтобы не «прыгали»).
   Флаги заполняют плашку (цвет = смысл региона), сервисные значки монохромные (не рябят). */
.nav-menu-ico, .nav-menu-svg, .nav-menu-em { width: 30px; height: 30px; flex: 0 0 auto; box-sizing: border-box; border-radius: 8px; background: rgba(255,255,255,0.05); }
.nav-menu-svg { padding: 6px; fill: #c3ccE6; stroke: none; }
/* «Все сервисы» — аккуратная акцентная кнопка-плитка (не инородная линия со стрелкой) */
/* «Все сервисы» — скромная ссылка (синий текст + стрелка), без яркой плитки-заливки */
.nav-menu-all { justify-content: flex-start; margin-top: 2px; padding: 8px 10px !important; background: transparent; color: var(--blue-2) !important; font-weight: 700; }
/* Под-пункты — тонкая вертикальная линия-гид слева (вложенность), без загнутого уголка */
.nav-acc-inner { overflow: hidden; margin-left: 26px; padding-left: 16px; border-left: 1.5px solid rgba(255,255,255,0.1); }
/* Бургер и мобильные элементы меню — на десктопе скрыты (меню = выпадашки по наведению) */
.nav-toggle, .nav-close, .nav-mobile-extra, .nav-backdrop, .nav-title { display: none; }
/* Значки пунктов нужны только выдвижной панели на телефоне: в горизонтальной строке
   меню они бы дробили её на пёстрые кусочки. Файл один, показ решает ширина экрана. */
.nav-ico { display: none; }
.nav-toggle { width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text); cursor: pointer; border-radius: 12px; }
.nav-toggle:hover { background: var(--panel-soft); }
.nav-toggle svg, .nav-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.logo__play { transition: transform .38s cubic-bezier(.34,1.56,.64,1), filter .3s; will-change: transform; }
.logo:hover .logo__play { transform: translateX(4px) scale(1.2) rotate(-4deg); filter: drop-shadow(0 0 9px rgba(91,131,255,0.6)); }

/* Hero */
.h-hero { position: relative; min-height: 580px; display: flex; align-items: center; overflow: hidden; }
/* Фон hero — движущаяся стена обложек горячих новинок (наполняется скриптом из API) */
.h-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0.3; filter: blur(1px); }
.h-hero-bg-row { display: flex; gap: 12px; height: 100%; width: max-content; animation: h-marquee 75s linear infinite; }
.h-hero-bg-row img { height: 100%; width: clamp(108px, 12vw, 150px); object-fit: cover; border-radius: 12px; display: block; }
.h-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(1000px 640px at 24% 42%, rgba(13,17,30,0.5), rgba(13,17,30,0.88) 76%),
    linear-gradient(180deg, rgba(13,17,30,0.62) 0%, rgba(13,17,30,0.42) 46%, #10131f 98%); }
@keyframes h-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .h-hero-bg-row { animation: none; } }
.h-hero-inner { position: relative; z-index: 4; max-width: 560px; padding: 50px 0 70px; }
.h-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-2); margin-bottom: 20px; }
.h-eyebrow::before { content: ""; width: 26px; height: 1px; background: rgba(123,155,255,0.5); }
.h-h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.03; font-weight: 850; letter-spacing: -0.03em; text-wrap: balance; }
.h-g { color: var(--gold); }
.h-lead { margin-top: 20px; font-size: clamp(15.5px, 1.5vw, 18px); color: var(--muted); max-width: 44ch; }
.h-lead b { color: #cdd5ea; font-weight: 700; }
.h-stats { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.h-stat b { display: block; font-size: 21px; font-weight: 850; letter-spacing: -0.02em; }
.h-stat span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-soft); }
.h-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.h-btn { height: 52px; padding: 0 26px; display: inline-flex; align-items: center; gap: 8px; border-radius: 13px; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.h-btn-1 { color: #fff; background: linear-gradient(135deg, #4f7cff, #3a5bff); box-shadow: 0 16px 34px rgba(79,124,255,0.32); transition: filter .2s; }
.h-btn-1:hover { filter: brightness(1.06); }
.h-btn-2 { color: var(--text); background: rgba(255,255,255,0.045); border: 1px solid var(--line-2); }

/* Летающие продукты */
.h-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.h-tile { position: absolute; pointer-events: auto; will-change: transform; }
.h-in { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 20px;
  background: linear-gradient(160deg, rgba(30,38,62,0.97), rgba(17,22,38,0.97)); border: 1px solid var(--line-2);
  box-shadow: 0 22px 46px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform .25s, border-color .25s; animation: h-float var(--d,8s) ease-in-out infinite; animation-delay: var(--dl,0s); }
.h-in::before { content:""; position:absolute; inset:0; border-radius:20px; background: radial-gradient(circle at 50% 24%, var(--glow), transparent 64%); }
.h-in .ic { position: relative; z-index:1; width: 50%; height: 50%; fill: #eef2fb; stroke: none; }
.h-in.h-card { border-radius: 14px; }
.h-in.h-card svg { position: relative; z-index:1; width: 78%; height: auto; }
.h-tile::after { content: attr(data-label); position: absolute; left:-16px; right:-16px; top: calc(100% + 9px); text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.h-tile:hover .h-in { transform: translateY(-6px) scale(1.05); border-color: var(--tint); }
.h-tile:hover::after { color: var(--text); }
@keyframes h-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* PlayStation-флагман — плитка с переворотом (сзади выбор региона) */
.h-ps { right: 10%; top: 18%; width: 190px; z-index: 3; perspective: 950px; }
.h-flip { position: relative; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.15,.2,1); }
.h-ps:hover .h-flip { transform: rotateY(180deg); }
.h-face { position: absolute; inset: 0; border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(123,155,255,0.55); box-shadow: 0 36px 74px rgba(43,88,255,0.42), inset 0 1px 0 rgba(255,255,255,0.2); overflow: hidden; }
.h-front { display: grid; place-items: center; background: linear-gradient(155deg, #2f5dff, #1a2b86); transform: translateZ(1px); }
.h-front::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 16%, rgba(255,255,255,0.24), transparent 58%); }
.h-front .ic { position: relative; z-index:1; width: 72%; height: 72%; fill: #fff; stroke: none; }
.h-back { transform: rotateY(180deg) translateZ(1px); background: linear-gradient(160deg, #26317e, #131a3c); display: flex; flex-direction: column; justify-content: center; padding: 18px 16px; }
.h-bt { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb0e6; margin: 0 3px 8px; }
.h-bl { display: flex; flex-direction: column; gap: 4px; }
.h-bl a { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: #fff; padding: 6px 11px; border-radius: 9px; background: rgba(255,255,255,0.06); transition: background .15s, transform .15s; }
.h-bl a::after { content: "›"; color: rgba(255,255,255,0.5); font-size: 15px; line-height: 1; }
.h-bl a:hover { background: rgba(123,155,255,0.42); transform: translateX(2px); }
.h-bl a:hover::after { color: #fff; }
.h-cap { position: absolute; left:-16px; right:-16px; top: calc(100% + 9px); text-align: center; font-size: 13px; font-weight: 700; color: #cdd5ea; }
@media (prefers-reduced-motion: reduce) { .h-in { animation: none; } .h-flip { transition: none; } .logo:hover .logo__play { transform: none; } }

/* Секции главной */
.h-sec { padding-top: 22px; padding-bottom: 30px; }
/* --- Раздел PlayStation на главной: переключатель региона + полка + цены «от» --- */
/* Полки на главной и в хабе PlayStation: горизонтальные отступы даёт .container, свои
   обнуляем — иначе полка съезжает на 24px вправо от заголовков секции (.shelf держит
   padding: 20px 24px для страниц региона, где полка стоит сама по себе). */
body.home .container .shelf { padding-left: 0; padding-right: 0; }
/* На главной карточки игр чуть меньше, чем в разделе региона: иначе обложки перевешивают
   соседние блоки (подписки, пополнение) и всё остальное «теряется» рядом с ними. */
/* Оба класса body — чтобы перебить правило .region-page ниже по файлу (та же вес-группа) */
body.home.region-page .parser-game-card-shelf { flex: 0 0 140px; width: 140px; min-width: 140px; }
body.home.region-page .parser-game-card-shelf .parser-game-cover { width: 140px; height: 202px; }
@media (max-width: 680px) {
  body.home.region-page .parser-game-card-shelf { flex: 0 0 140px; width: 140px; min-width: 140px; }
  body.home.region-page .parser-game-card-shelf .parser-game-cover { width: 140px; height: 202px; }
}
.h-hits:empty { display: none; }
/* Переключатель регионов — ПО ЦЕНТРУ над обеими колонками: он управляет и играми,
   и подписками сразу, поэтому не должен «принадлежать» левой стороне. */
/* Шапка раздела: заголовок слева, переключатель ПО ЦЕНТРУ строки (три колонки,
   боковые равны). Убирает пустую полосу между первым экраном и товарами. */
.h-sec-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.h-ps-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Описание региона — только на телефоне (см. комментарий в index.html) */
.h-reg-note { display: none; margin: 0; font-size: 13px; color: var(--muted-soft); text-align: center; }
@media (max-width: 900px) {
  /* Переключатель регионов — ВО ВСЮ ШИРИНУ строки (12.08). Было `justify-items: center`:
     полоса сжималась до содержимого и стояла криво посередине, а вкладки лепились друг
     к другу. Тянем и саму полосу (`.h-ps-bar`), и вкладки внутри неё — иначе `width:100%`
     считается от сжатого родителя и ничего не даёт. */
  .h-sec-top { grid-template-columns: 1fr; gap: 10px; justify-items: stretch; }
  .h-sec-top > div:first-child { justify-self: start; }
  .h-ps-bar { width: 100%; align-items: stretch; }
  .h-regtabs { width: 100%; }
  .h-reg-note { display: block; }
}
.h-regtabs { display: inline-flex; gap: 6px; padding: 5px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
/* Кнопки регионов и подпись под ними тоже рисует скрипт — держим их место заранее, иначе
   при обновлении страницы вся витрина под ними подскакивает (см. резерв #h-hits ниже). */
#h-regtabs:empty { min-height: 52px; }
#h-reg-note:empty { min-height: 20px; }
@media (min-width: 1100px) { #h-reg-note:empty { min-height: 0; } }
.h-regtab {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .18s, color .18s;
}
.h-regtab img { border-radius: 4px; flex: none; }
.h-regtab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.h-regtab.is-active { color: #fff; background: linear-gradient(135deg, #4e80ff, #3b66e0); box-shadow: 0 8px 20px rgba(78,128,255,0.28); }
/* Короткая выгода региона — прямо в кнопке («Хит», «На русском»). Раньше рядом с
   переключателем висела длинная поясняющая строка — она читалась как случайный текст. */
.h-regtab-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--muted-soft); white-space: nowrap; }
.h-regtab.is-active .h-regtab-tag { background: rgba(255,255,255,0.2); color: #fff; }
/* ===== КАРТА НОМИНАЛА — рисуем стилями, а не фотографией =====
   Раньше на месте номиналов стояли готовые картинки-баннеры: под каждый номинал Турции
   лежал свой файл, у Индии его не было вовсе, а новый номинал из Google-таблицы выходил
   без картинки. Теперь карта собирается из цвета бренда + логотипа + номинала, поэтому
   любой номинал рисуется сам и весит ноль. Разметку даёт site/codes.js (§0cc: фото-плитки
   .h-card-img/.h-card-list и ряды .h-topup удалены, а не оставлены рядом).
   Цвет бренда — ЕДИНСТВЕННОЕ отличие карт: меняется здесь, во всех разделах сразу. */
/* Цвет направления — ОДНА таблица на весь сайт: её берут и карта номинала, и плитка
   раздела (свечение, надпись). Второй список цветов не заводим (§0cc).
   --c1/--c2 — сама карта, --glow — отблеск плитки, --acc — цвет надписи над названием
   (у тёмных брендов вроде Roblox сам --c1 на тёмном фоне не читается). */
[data-brand] { --c1: #2a5cf0; --c2: #0b1a52; --glow: rgba(42,92,240,0.20); --acc: #8aa8ff; }
[data-brand="in"] { --c1: #f0871f; --c2: #5a2a06; --glow: rgba(240,135,31,0.18); --acc: #ffb066; }
[data-brand="rbx"] { --c1: #3b4250; --c2: #11151d; --glow: rgba(214,72,72,0.16); --acc: #ff8080; }
[data-brand="apple"] { --c1: #7e8794; --c2: #20242c; --glow: rgba(160,172,190,0.14); --acc: #cfd6e0; }
[data-brand="steam"] { --c1: #2f5a86; --c2: #0b1420; --glow: rgba(80,150,220,0.18); --acc: #7fc2ff; }
/* Направления без карты (игры, подписки) — те же переменные, свои оттенки. */
[data-brand="games"] { --glow: rgba(63,107,255,0.18); --acc: #8aa8ff; }
[data-brand="sharing"] { --glow: rgba(150,110,255,0.18); --acc: #b79bff; }
[data-brand="psplus"] { --glow: rgba(255,196,60,0.14); --acc: #ffd166; }
[data-brand="ea"] { --glow: rgba(120,90,230,0.18); --acc: #a48cff; }
/* ВАЖНО: собственные --c1/--c2 здесь НЕ объявляем — они перебили бы значения из общей
   таблицы выше (собственное свойство элемента сильнее унаследованного), и карты всех
   брендов стали бы синими. Запасной цвет — только для карты без data-brand. */
.tcard:not([data-brand]) { --c1: #2a5cf0; --c2: #0b1a52; }
.tcard {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1.58 / 1; padding: 9px 11px; border-radius: 13px; overflow: hidden;
  color: #fff; isolation: isolate;
  background: linear-gradient(135deg, var(--c1), var(--c2) 78%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.22);
}
/* Блик и диагональная «голограмма» — тоже стилями: карта выглядит как пластик, а не плашка */
.tcard::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,0.28), transparent 60%); }
.tcard::after { content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: -30%; left: -22%; width: 50%; height: 170%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); }
.tcard-logo { position: absolute; right: -6px; bottom: -8px; width: 50%; opacity: 0.16; z-index: 0;
  filter: brightness(0) invert(1); }
.tcard-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.tcard-top img { width: 14px; height: 14px; border-radius: 3px; }
/* Номинал не должен вылезать из карты: размер считается от ШИРИНЫ САМОЙ КАРТЫ (cqw),
   а не от ширины окна — после сужения полосы контента плитки стали уже, а шрифт остался
   прежним, и «2000 ₺» обрезался. Потолок держит крупный номинал на больших картах. */
.tcard { container-type: inline-size; }
.tcard-nom { position: relative; z-index: 2; font-weight: 900; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(17px, 21cqw, 27px); white-space: nowrap; }
.tcard-cur { font-size: 0.44em; font-weight: 800; opacity: 0.85; margin-left: 0.16em; }

/* Плитка витрины: карта + строка «цена / в корзину». Внешней рамки нет намеренно —
   рамка вокруг карты давала «рамку в рамке». */
.nom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.nom { display: flex; flex-direction: column; gap: 7px; transition: transform .18s; }
.nom:hover { transform: translateY(-3px); }
.nom-art { display: block; }
.nom:hover .tcard { box-shadow: 0 14px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.3); }
.nom-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 2px; min-height: 30px; }
.nom-price { font-size: 15px; font-weight: 850; color: var(--text); }
/* Покупка прямо с витрины: кнопка-корзина → после добавления счётчик «− N +».
   Прежний голый «+» не читался как корзина и не позволял взять несколько карт. */
.nom-cart { flex: none; width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer;
  color: #fff; display: grid; place-items: center; background: var(--tg-cart-grad);
  box-shadow: 0 6px 14px rgba(78,128,255,0.28); transition: filter .15s; }
.nom-cart:hover { filter: brightness(1.08); }
.nom-cart svg { width: 17px; height: 17px; }
.nom-qty { flex: none; display: inline-flex; align-items: center; gap: 2px; border-radius: 9px;
  background: var(--tg-cart-in); box-shadow: 0 6px 14px rgba(120,100,40,0.2); }
.nom-qty button { width: 28px; height: 30px; border: 0; background: transparent; cursor: pointer;
  color: #23201a; font-size: 17px; font-weight: 800; line-height: 1; border-radius: 9px; }
.nom-qty button:hover { background: rgba(0,0,0,0.08); }
.nom-qty b { min-width: 15px; text-align: center; color: #23201a; font-size: 14px; font-weight: 900; }
/* Последняя ячейка — переход на подробную страницу. Стоит в сетке, поэтому ряд без дыр. */
.nom-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 1.58 / 1; border-radius: 13px; border: 1px dashed var(--line-2); color: var(--blue-2);
  font-size: 14px; font-weight: 800; text-align: center; transition: border-color .18s, background .18s, color .18s; }
.nom-more span { font-size: 11.5px; font-weight: 600; color: var(--muted-soft); }
.nom-more:hover { border-color: var(--blue-line); background: var(--blue-soft); color: var(--text); }
/* Телефон: лента со свайпом. Сеткой 11 номиналов растягивали блок на два экрана. */
@media (max-width: 640px) {
  .nom-grid { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 2px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nom-grid::-webkit-scrollbar { display: none; }
  .nom-grid > * { flex: 0 0 44%; scroll-snap-align: start; }
}
/* ===== Каталог направлений (/codes) =====
   Общая страница раздела — это ВЫБОР направления, а не все номиналы подряд: раньше здесь
   лежало 20 карт (на телефоне два экрана пролистывания), и для поиска она дублировала
   подробные страницы. Плитка: карта-образец, надзаголовок, название, пояснение, «от N ₽». */
.cdir-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.cdir-head .psub-subtitle { margin: 0 auto; max-width: 560px; }
/* Заголовок раздела крупнее общего .psub-title (32px): на широкой странице раздела он
   стоит один посреди пустоты и терялся, а на подробной странице товара тот же размер
   уместен — там рядом картинка и блок покупки. Правило одно на все три раздела, поэтому
   «Пополнение» и «Подписки PlayStation» больше не выглядят разного размера. */
.cdir-head .psub-title { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; margin-bottom: 12px; }
/* Пилюли-преимущества под подписью: короткие обещания раздела (текст — site_content.py) */
.head-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
/* На странице ТОВАРА заголовок и подпись стоят по левому краю колонки — пилюли встают
   туда же (владелец, 11.08: по центру они висели отдельно от текста). По центру они
   остаются на страницах-разделах, где по центру стоит весь заголовочный блок. */
.psub-main .head-badges, .psub-hero-info .head-badges { justify-content: flex-start; }
/* Строгое условие товара (site_content: поле notice) — «регион аккаунта должен совпадать».
   Не пилюля-обещание, а предупреждение, поэтому вид другой: янтарный знак и рамка.
   Кричащего красного нет намеренно — это условие покупки, а не ошибка. */
.head-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; max-width: 460px;
  padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(255, 209, 102, 0.28);
  background: rgba(255, 209, 102, 0.07); color: var(--muted); font-size: 13px; line-height: 1.45; }
.head-notice span { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--gold); color: #1a1205; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.head-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.035);
  font-size: 13px; font-weight: 700; color: var(--muted); }
.head-badges span::before { content: "✓"; color: var(--accent-2); font-weight: 900; }
/* Телефон: пилюли в рамках занимали три рваных ряда и съедали половину первого экрана
   (владелец, 12.08). Текст остаётся тот же, но идёт ровной сеткой в две колонки без
   рамок — как обещания в блоке покупки. Высота падает примерно вдвое, и глаз читает
   список сверху вниз, а не «лесенкой». Правило ОДНО на все страницы товаров. */
@media (max-width: 680px) {
  /* Снизу отступа НЕТ: расстояние до следующего блока задаёт раскладка страницы (её
     gap). Свой margin здесь складывался с ним и с отступом шапки — до выбора региона
     набегало 64px пустоты (замер на EA Play, владелец 12.08). Где пилюли и выбор лежат
     в ОДНОМ контейнере (карты App Store) и gap между ними не действует, отступ даёт
     сам выбор — правило .head-text + .psub-pick ниже. */
  /* Раскладка потоком, а не сеткой 2×2. Сетка делила ширину поровну независимо от длины
     подписи: у страниц с ТРЕМЯ галочками третья висела одна в половине строки, а текст
     внутри ячейки ещё и центрировался (наследовал выравнивание заголовка) — подписи
     ломались посреди слова и стояли вразнобой (замечание владельца 13.08). Теперь каждая
     галочка занимает ровно свою ширину, они идут слева направо и переносятся как текст. */
  .head-badges { display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: 6px 16px; margin: 12px 0 0; text-align: left; }
  .head-badges span { align-items: flex-start; gap: 5px; padding: 0; border: 0; background: transparent;
    font-size: 12.5px; font-weight: 600; line-height: 1.3; }
  .head-badges span::before { font-size: 11px; line-height: 1.45; }
}
/* Надзаголовок — спокойный синий нашей палитры. Оранжевый тут был взят с чужого сайта:
   у нас акцент раздела — синий, оранжевое золото работает только на кнопке «в корзине». */
.cdir-kicker { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--blue-2); margin-bottom: 10px; }
.cdir-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 44px; }
/* Плитка направления. Раньше это была ровная тёмная карточка — все пять выглядели
   одинаково, и страница читалась списком, а не витриной. Теперь у плитки цвет её
   направления (--glow/--acc из общей таблицы выше) и градиент в стиле карточек регионов
   на главной, чтобы раздел выглядел продолжением нашей главной. */
.cdir { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 22px; border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 60%);
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.cdir::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 16% -12%, var(--glow), transparent 64%); }
.cdir > * { position: relative; }
.cdir:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow: 0 22px 46px rgba(0,0,0,0.36); }
/* Карта товара — крупно и с лёгким наклоном: покупатель видит, ЧТО получит
   (значок валюты этого не показывает). */
.cdir-art { display: block; width: 178px; margin-bottom: 20px; transform: rotate(-3deg);
  transition: transform .25s; }
.cdir:hover .cdir-art { transform: rotate(-3deg) translateY(-2px) scale(1.03); }
.cdir-art .tcard { border-radius: 14px; padding: 11px 13px; }
.cdir-art .tcard-top { font-size: 10px; gap: 5px; }
.cdir-art .tcard-top img { width: 14px; height: 14px; }
.cdir-art .tcard-nom { font-size: 25px; }
.cdir-over { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--acc); }
.cdir-name { font-size: 23px; font-weight: 850; margin: 6px 0 4px; color: var(--text); }
/* Белая строка под названием: из чего выбирать внутри направления (тарифы, номиналы,
   регионы) — раньше это приходилось угадывать по серому пояснению. */
.cdir-sub { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.cdir-note { font-size: 13.5px; line-height: 1.45; color: var(--muted-soft); }
/* Что входит — галочками, как в карточках подписок: раздел должен отвечать на вопросы,
   а не только звать нажать. */
.cdir-feats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.cdir-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600;
  line-height: 1.4; color: var(--muted); }
.cdir-feats li::before { content: "✓"; flex: 0 0 auto; color: var(--accent-2); font-weight: 900; }
/* Подвал плитки прижат вниз: у карточек разной длины «от N ₽» стоит на одной линии */
.cdir-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 20px; }
.cdir-from { font-size: 13px; color: var(--muted-soft); }
.cdir-from b { font-size: 24px; font-weight: 900; color: var(--text); margin-left: 5px; letter-spacing: -0.4px; }
.cdir-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--muted); transition: border-color .18s, color .18s, background .18s; }
.cdir:hover .cdir-arrow { border-color: var(--blue-line); color: #fff; background: var(--blue-soft); }
@media (max-width: 900px) { .cdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) { .cdir-grid { grid-template-columns: 1fr; } .cdir { padding: 16px; } }

/* У «Турции» и «Индии» вместо фирменной полоски — крупный флаг: полоска нужна главным
   заголовкам блоков (Игры/Подписки/Коды), а внутри раздела она дробит и шумит. */
#h-topups .h-two-col .h-block-head h3::before { display: none; }
.h-flag { width: 26px; height: 26px; border-radius: 5px; }
.h-hits-empty { color: var(--muted-soft); font-size: 14px; padding: 18px 0; }
/* Блоки внутри раздела PlayStation: у каждого типа товара свой заголовок и свой язык
   (игры — обложки, подписки — карточки тарифов, пополнение — номиналы). */
.h-block { margin-top: 26px; }
/* Всё в строке заголовка выравнивается по ЦЕНТРУ: при baseline полоска-отбивка, бейдж
   и ссылка «Все игры» съезжали друг относительно друга на 3–4px и строка «плясала». */
.h-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.h-block-head h3 { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(17px, 1.8vw, 21px); font-weight: 850; letter-spacing: -0.01em; }
/* Сам заголовок блока — тоже переход в раздел (владелец 12.08: «нажимаю на Игры — хочу
   попасть в игры»). Ссылку вешает home.js на готовую разметку, адрес берёт у кнопки
   справа — то есть перехода по-прежнему ДВА вида, но адрес один и разойтись не может. */
.h-head-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; }
.h-head-link:hover { color: var(--cyan); }
/* Фирменная отбивка слева — та же полоска, что у заголовков полок (.shelf__title) */
.h-block-head h3::before { content: ""; flex: none; width: 4px; height: 1.05em; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 18px rgba(93,231,255,0.5); }
/* ——— ЕДИНЫЙ переход в полный раздел (§0cc) ———
   Было четыре разных способа уйти в раздел: большая синяя кнопка «Смотреть все», бледная
   ссылка-стрелка «Все игры →», ячейка «Ещё 5 →» и ячейка «Подробнее →» — раздел выглядел
   вразнобой, и было неясно, куда нажимать. Теперь способ ОДИН на весь сайт: кнопка-пилюля
   справа от заголовка блока. Стрелку рисует CSS — в тексте ссылки её писать не нужно.
   Ячейка в конце сетки («Ещё N →», .nom-more) осталась только там, где остаток реально
   есть: показали все номиналы — ячейки нет вовсе. */
.sec-all { display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--blue-2); background: var(--blue-soft); border: 1px solid var(--blue-line);
  white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.sec-all::after { content: "→"; transition: transform .2s; }
.sec-all:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.sec-all:hover::after { transform: translateX(3px); }
/* Заголовок секции с кнопкой справа (Позиции, Отзывы) — общий, а не только для Позиций. */
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Две колонки раздела PlayStation: слева игры, справа подписки. Покупатель PlayStation
   мыслит категориями «игры / подписки / карты пополнения» — раскладка повторяет это.
   На телефоне колонки складываются друг под друга. */
.h-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: stretch; margin-top: 18px; }
/* Колонки БЕЗ панели-рамки: рамки есть у карточек внутри, и панель поверх них давала
   «рамку в рамке». Разделяют заголовок с фирменной полоской и воздух между колонками. */
.h-two-col { min-width: 0; display: flex; flex-direction: column; }

/* Игры на главной: СЕТКА в два ряда (вровень с блоком подписок справа).
   Обложкам заданы фиксированные размеры выше — здесь только раскладка. */
/* РОВНО 4 колонки × 2 ряда (8 карточек) — не «сколько влезет»: два ряда игр должны
   вставать вровень с двумя рядами карточек подписок справа. Карточка тянется по ширине
   колонки, а высота обложки ФИКСИРОВАННАЯ — иначе Safari растягивает картинку в столб. */
/* Ряды делят высоту поровну (1fr), а сама сетка растягивается на всю колонку — поэтому
   блоки «Игры» и «Подписки» ВСЕГДА заканчиваются на одной линии, без подгонки пикселей. */
/* РОВНО 3 колонки × 2 ряда (6 карточек). Было 4 — после сужения полосы контента на
   карточку оставалось ~115px, обложка выходила почти квадратной. container-type нужен
   обложке ниже: её высота считается от ширины САМОЙ СЕТКИ, а не от ширины окна. */
.h-games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px;
  container-type: inline-size; }

/* Место под витрину флагмана занимаем ЗАРАНЕЕ. Карточки рисует скрипт, и до его работы
   блоки имели нулевую высоту: всё, что ниже (шеринг, коды пополнения, отзывы), скакало
   вниз в момент отрисовки — это и было заметное «мигание» полки при обновлении страницы.
   Числа — замеренные высоты готовых блоков на трёх ширинах; резерв снимается сам, как
   только внутрь попали карточки (:empty перестаёт совпадать). */
#h-hits:empty { min-height: 262px; }
#h-subs:empty { min-height: 344px; }
@media (min-width: 700px) {
  #h-hits:empty { min-height: 265px; }
  #h-subs:empty { min-height: 166px; }
}
@media (min-width: 1100px) {
  #h-hits:empty { min-height: 617px; }
  #h-subs:empty { min-height: 577px; }
}
/* Карточка игры подпрыгивает при наведении — как карточки подписок и карт пополнения,
   чтобы вся витрина реагировала одинаково. */
.h-games-grid .game-card { transition: transform .18s; }
.h-games-grid .game-card:hover { transform: translateY(-3px); }
body.home.region-page .h-games-grid .parser-game-card-shelf { flex: none; width: 100%; min-width: 0; }
/* Обложка — ФИКСИРОВАННАЯ высота (не auto: Safari тянет картинку в столб). Значение
   подобрано так, чтобы два ряда игр заканчивались вровень с двумя рядами подписок. */
/* Высота обложки — ФИКСИРОВАННАЯ и ОДИНАКОВАЯ везде (Safari тянет картинку при auto).
   Колонки выравниваются не размером товара, а вспомогательным блоком — см. .h-share-how. */
/* Высота обложки = ширина колонки × 1.4 (пропорция обложек PS Store), посчитанная от
   ширины СЕТКИ (100cqw), а не от ширины окна: привязка к vw держала высоту прежней,
   когда колонка сузилась, и обложки становились почти квадратными. Значение вычисленное,
   а НЕ auto — иначе Safari растягивает картинку в столб (см. память по вёрстке). */
body.home.region-page .h-games-grid .parser-game-cover {
  width: 100%; height: clamp(150px, calc((100cqw - 24px) / 3 * 1.4), 250px);
}

/* Текстовая часть карточки игры на главной — компактная и ОДИНАКОВОЙ высоты:
   название максимум в две строки, мелкий жанр. Иначе ряды «пляшут» по высоте. */
/* Название ВСЕГДА занимает две строки (даже если короткое) — иначе карточки в ряду
   получаются разной высоты. Длинное обрезается МНОГОТОЧИЕМ, а не обрывается на полуслове. */
/* ⚠️ Именно height (не min/max): пробовал 12.08 заменить на пару min-height+max-height —
   их перебивает правило карточки из /tg/parsed-card-final-style.css, и ряды стали разной
   высоты (16px против 31px). Жёсткая высота в два ряда + обрезка по двум строкам —
   единственное, что держит ряды ровными. */
.h-games-grid .parser-game-name { font-size: 13.5px; line-height: 1.25; height: 2.5em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* «от 1490 ₽» в узкой карточке ломалось на две строки — держим цену в одну. Строка цены
   переносится целиком (wrap), иначе пилюля скидки вылезала за край карточки на 5px. */
.h-games-grid .parser-store-price { font-size: 15px; white-space: nowrap; }
.h-games-grid .parser-card-price-line { flex-wrap: wrap; row-gap: 2px; }
.h-games-grid .parser-discount-pill { font-size: 9.5px; padding: 2px 6px; }
/* На главной карточка игры — только суть: обложка, цена, название. Язык, жанр, тариф,
   пилюля «до релиза» и зачёркнутая цена убраны: они удлиняют карточку и делают ряды
   разной высоты. !important — в parsed-card-final-style.css эти элементы объявлены
   с !important, обычным правилом их не скрыть. */
body.home.region-page .h-games-grid .parser-discount-pill,
body.home.region-page .h-games-grid .parser-old-price,
body.home.region-page .h-games-grid .parser-card-localization,
body.home.region-page .h-games-grid .parser-card-meta,
body.home.region-page .h-games-grid .parser-genre-pill,
body.home.region-page .h-games-grid .parser-subscription-tier,
body.home.region-page .h-games-grid .preorder-release { display: none !important; }
.h-games-grid .parser-card-info { gap: 4px; }

/* На телефоне та же разметка становится каруселью: пальцем листать привычнее,
   и раздел не растёт в высоту. Отдельного мобильного блока не заводим (§0cc). */
@media (max-width: 900px) {
  .h-games-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .h-games-grid::-webkit-scrollbar { display: none; }
  .h-games-grid > .game-card { scroll-snap-align: start; }
  /* В карусели карточка снова фиксированной ширины (иначе flex сожмёт её в ноль) */
  body.home.region-page .h-games-grid .parser-game-card-shelf { flex: 0 0 132px; width: 132px; }
  body.home.region-page .h-games-grid .parser-game-cover { width: 132px; height: 190px; }
}
/* Подписки на главной — сетка 2×2 внутри своей колонки. Селектор из двух классов, чтобы
   перебить .websub-grid (auto-fill 340px) — иначе карточки становятся узкими и название
   тарифа обрезается прямо в баннере. */
.websub-grid.websub-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Карточки НЕ растягиваем на высоту колонки: пробовал (grid-auto-rows: 1fr) — внутри
   появлялась пустая полоса между баннером и ценой, карточка выглядела надутой.
   Высоту колонок сводит пропорция баннера ниже. */
/* Пропорция баннера подгоняет высоту блока подписок под соседний блок игр — так две
   колонки заканчиваются примерно на одной линии без подбора пикселей. Было 11/5 (низкий
   баннер) под четыре ряда мелких обложек; с тремя колонками игр обложки стали выше, и
   баннер поднят до 4/3. Меняешь число колонок игр — проверь и эту пропорцию. */
/* Только на широком экране: на телефоне карточка идёт во всю ширину, и квадратный
   баннер занял бы пол-экрана — там остаётся низкий 11/5. */
@media (min-width: 901px) { .websub-grid-home .websub-card-img { aspect-ratio: 4 / 3; } }
@media (max-width: 900px) { .websub-grid-home .websub-card-img { aspect-ratio: 11 / 5; } }
/* На телефоне карточка тарифа идёт во всю ширину, баннер низкий — и крупная цифра срока
   («1М») наезжала прямо на слово ESSENTIAL. Цифра здесь второстепенна (срок написан
   словами рядом с ценой), поэтому мельче и правее. */
@media (max-width: 680px) {
  .websub-grid-home .websub-banner-num { font-size: min(40px, 26cqw); right: 7%; opacity: 0.13; }
}
/* Рамка у карточки тарифа ОСТАЁТСЯ: без неё баннер, цена и название начинают
   смешиваться с соседними карточками (проверено — владелец вернул). Убрана только
   внешняя подложка блока Позиций и панели-колонки. */

/* Растягивание последней карточки убрано: без подложки горизонтальная карточка
   распадалась на баннер и текст. Все тарифы — одинаковые вертикальные карточки,
   а место под ними занимает пояснение П2/П3. */

@media (max-width: 560px) {
  .websub-grid.websub-grid-home { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .h-two { grid-template-columns: 1fr; gap: 30px; } }

/* Позиции — акцентная плашка внутри раздела PlayStation: тёплая подсветка отделяет её
   от обычных полок, чтобы «в 2–3 раза дешевле» читалось как особое предложение. */
/* Позиции отделяются от «личного аккаунта» БЕЗ рамок: тонкая линия сверху, больше
   воздуха и собственный флажок над заголовком — тот же приём, что «● Флагман» у
   PlayStation. Так два блока читаются как разные, но в одном ритме. */
.h-share { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line); }
.h-sec-flag.is-warm { color: #ffcf70; }

.h-share-h { font-size: clamp(19px, 2.2vw, 26px); font-weight: 850; letter-spacing: -0.02em; }
/* Главное различие разделов: PlayStation — покупка на ЛИЧНЫЙ аккаунт, Позиции — доступ
   на ОБЩЕМ. Мелкая метка стоит у каждого заголовка «Игры»/«Подписки», чтобы это читалось
   в самом блоке, а не только в шапке раздела. */
.h-acc-tag { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  color: var(--blue-2); background: rgba(78,128,255,0.14); border: 1px solid rgba(123,155,255,0.3); white-space: nowrap; }
.h-acc-tag.is-shared { color: #ffcf70; background: rgba(255,207,112,0.12); border-color: rgba(255,207,112,0.35); }
.h-share-sub { color: var(--muted); font-size: 14px; margin-top: 5px; max-width: 62ch; }
.h-share .shelf { padding-top: 14px; padding-bottom: 4px; }
/* Пояснение П2/П3 — две карточки с круглым бейджем. Стоит ВНУТРИ колонки подписок и
   занимает место, которое оставалось под тарифами (владелец: карточки не растягивать). */
/* Пояснение П2/П3 забирает остаток высоты правой колонки — так низ обеих колонок
   совпадает при любом наполнении, и при этом не растягиваются ни игры, ни тарифы. */
/* Пояснение П2/П3 — ОДНА плитка размером с соседнюю карточку тарифа: рамка только
   снаружи, внутри две подсказки без своих рамок. */
.h-share-how { display: flex; flex-direction: column; justify-content: center; gap: 14px;
  height: 100%; padding: 16px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.025); }
.h-share-way { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none; }
.h-share-badge { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  font-size: 12.5px; font-weight: 900; letter-spacing: -0.2px; color: #17120a;
  background: linear-gradient(135deg, #ffd98a, #f7b52e); }
.h-share-badge.is-p3 { color: #fff; background: linear-gradient(135deg, #4e80ff, #3b66e0); }
.h-share-way b { display: block; font-size: 13px; font-weight: 800; margin-bottom: 2px; }
.h-share-way > div > span { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* Подраздел внутри секции (Позиции внутри PlayStation): заголовок уровнем ниже h2,
   отбивка сверху — чтобы читался как часть раздела, а не как новая категория. */
.h-sub { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.h-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.h-sub-h { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -0.01em; }
.h-sub-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #ffcf70; background: rgba(255,207,112,0.12); border: 1px solid rgba(255,207,112,0.35); }
.h-sub-more { font-size: 14px; font-weight: 700; color: var(--blue-2); }
.h-sub-more:hover { color: var(--text); }
.h-sub-sub { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 70ch; }
/* Кнопка «Все номиналы» под колонкой региона — во всю её ширину */
@media (max-width: 680px) {
  .h-ps-bar { gap: 10px; }
  .h-regtabs { width: 100%; gap: 4px; padding: 4px; }
  /* Три равные вкладки во всю ширину — ряд читается как один переключатель, а не как
     кнопки, слипшиеся слева. Флаг и название стоят вплотную и вместе центрированы в
     пилюле (владелец 12.08: «Турция сильно отъезжает от флажка»). Метка региона
     («Хит», «UA») ОСТАЁТСЯ и на телефоне — по ней покупатель отличает СНГ (владелец:
     «UA всегда оставляем»); чтобы всё влезло на узком экране, метка мельче. */
  .h-regtab { flex: 1 1 0; min-width: 0; justify-content: center; gap: 5px; padding: 11px 3px; font-size: 13.5px; }
  .h-regtab img { width: 17px; height: 17px; }
  .h-regtab-tag { font-size: 8.5px; padding: 1px 4px; letter-spacing: 0.02em; }

  /* ⭐ Переход в раздел — ШИРОКОЙ кнопкой ПОД содержимым блока, а не капсулой справа от
     заголовка (владелец 12.08). Причина: на телефоне капсула теснила заголовок с бейджем
     «личный аккаунт», строка ломалась на два этажа и читалась как две кнопки подряд.
     Внизу же кнопка стоит там, где человек дочитал полку, и попадает под большой палец.
     Разметку не трогаем (§0cc): `display: contents` распускает строку заголовка, и
     порядком управляем как у обычных элементов колонки. */
  .h-two-col > * { order: 2; }                       /* содержимое блока */
  .h-block-head { display: contents; }
  .h-block-head h3 { order: 1; margin-bottom: 12px; }
  .h-block-head .sec-all { order: 3; width: 100%; justify-content: center; margin-top: 18px;
    padding: 13px 16px; border-radius: 14px; font-size: 14.5px; background: transparent; }
}
.h-sec-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-2); margin-bottom: 6px; }
.h-sec-h { font-size: clamp(24px, 2.8vw, 32px); font-weight: 850; letter-spacing: -0.02em; }
.h-sec-sub { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.h-ps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 20px; }
/* Все блоки регионов — единый синий вид; на hover меняются (ярче + подъём + свечение) */
.h-reg { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(43,88,255,0.15), rgba(43,88,255,0.02) 58%); border: 1px solid rgba(123,155,255,0.32); transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; cursor: pointer; }
.h-reg:hover { transform: translateY(-4px); border-color: rgba(123,155,255,0.8); background: linear-gradient(160deg, rgba(79,124,255,0.3), rgba(63,107,255,0.06) 58%); box-shadow: 0 22px 46px rgba(43,88,255,0.22); }
.h-reg-cover { position: absolute; inset: 0; z-index: 0; border-radius: 20px; }
.h-reg:hover { transform: translateY(-4px); border-color: rgba(123,155,255,0.55); background: linear-gradient(170deg, rgba(79,124,255,0.1), rgba(255,255,255,0.02)); }
.h-reg-top { display: flex; align-items: flex-start; gap: 14px; }
.h-fl { width: 45px; height: 30px; margin-top: 2px; border-radius: 8px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 3px 10px rgba(0,0,0,0.32); }
.h-fl svg { width: 100%; height: 100%; display: block; filter: saturate(0.92); }
.h-fl.h-globe { display: grid; place-items: center; background: linear-gradient(150deg, #2f52e6, #16205a); }
.h-fl.h-globe svg { width: 62%; height: 62%; fill: none; stroke: #e2e9ff; stroke-width: 1.5; stroke-linecap: round; filter: none; }
.h-reg-top b { font-size: 19px; line-height: 1.1; letter-spacing: -0.01em; }
.h-reg-top .h-d { display:block; font-size:12.5px; color: var(--muted-soft); margin-top:4px; }
.h-tag { margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--blue-2); background: var(--blue-soft); border-radius:999px; padding:4px 9px; }
/* Подразделы региона — строками «что это · от какой цены», а не одинаковыми чипами:
   по чипам «Игры · Подписки · Пополнение» нельзя было понять ни разницы регионов, ни
   того, сколько это стоит (§0cc: старый .h-chip удалён вместе с разметкой). */
/* Строки идут сразу под описанием региона (не прижаты к низу): у регионов разное число
   подразделов, и прижатие к низу оставляло в карточках рваные дыры по центру. */
.h-links { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
.h-rlink { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid transparent; transition: color .15s, border-color .15s, background .15s; }
.h-rlink b { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; }
.h-rlink:hover { color: var(--text); border-color: rgba(123,155,255,0.5); background: var(--blue-soft); }
/* ——— Страница-указатель /playstation ———
   Она отвечает на «что тут есть и сколько стоит», поэтому вся её вёрстка — это цифры,
   короткие доводы и ответы на вопросы. Товарных полок на ней нет (их место — регионы). */
.ps-pulse { margin-top: 12px; font-size: 15px; color: var(--muted); }
.ps-pulse b { color: var(--text); font-weight: 850; }
.ps-nums { position: relative; z-index: 1; display: flex; gap: 8px; }
.ps-num { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); font-size: 11px; color: var(--muted-soft); }
.ps-num b { font-size: 17px; font-weight: 850; color: var(--text); }
.ps-num.is-hot b { color: var(--accent); }
.ps-why { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ps-why li { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ps-why li::before { content: "✓"; flex: 0 0 auto; color: var(--blue-2); font-weight: 900; }
/* Примеры товаров (Позиции): те же карточки, что везде — они доказывают цену, а не
   заменяют витрину, поэтому их всего четыре и они не листаются. */
.ps-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ps-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ps-q { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.ps-q b { font-size: 15px; font-weight: 800; color: var(--text); }
.ps-q span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 920px) {
  .ps-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-faq { grid-template-columns: 1fr; }
}

 .h-pos-main span { display:block; font-size:13px; color:var(--muted); margin-top:3px; }

/* Другие сервисы — плитки по значимости.
   Steam (главный из «других») занимает две колонки и выше ростом, работающие сервисы —
   обычные плитки, а «скоро» ужаты в одну строку: место на экране распределено по тому,
   что реально можно купить. Прежняя полоса Steam во всю ширину и плитка «Все сервисы»
   (вела в никуда, href="#") удалены. */
.h-top.is-feat { grid-column: span 2; padding: 24px; gap: 18px;
  background: linear-gradient(120deg, rgba(43,88,255,0.16), rgba(255,255,255,0.02) 80%);
  border-color: rgba(123,155,255,0.34); }
.h-top.is-feat:hover { border-color: rgba(123,155,255,0.6); }
.h-top.is-feat .h-badge { width: 58px; height: 58px; border-radius: 15px; }
.h-top.is-feat .h-badge .ic { width: 30px; height: 30px; }
.h-top.is-feat .h-top-name { font-size: 19px; }
.h-top.is-feat .h-top-txt { flex: 1; }
.h-feat-perk { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--blue-2); background: rgba(79,124,255,0.14);
  border: 1px solid rgba(123,155,255,0.3); border-radius: 999px; padding: 9px 15px; white-space: nowrap; flex: 0 0 auto; }
.h-top.is-small { padding: 13px 16px; gap: 11px; }
.h-top.is-small .h-badge { width: 38px; height: 38px; border-radius: 10px; }
.h-top.is-small .h-badge .ic { width: 19px; height: 19px; }
.h-top.is-small .h-top-name { font-size: 14px; }
.h-soon-row { grid-column: span 2; display: flex; flex-wrap: wrap; gap: 12px; }
.h-soon-item { flex: 1 1 160px; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 15px; border-radius: 14px; background: rgba(255,255,255,0.02);
  border: 1px dashed var(--line-2); color: var(--muted-soft); font-size: 13.5px; font-weight: 600; }
.h-soon-item .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; opacity: 0.75; }
.h-soon-item b { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-soft); background: rgba(255,255,255,0.07); border-radius: 999px; padding: 2px 7px; margin-left: auto; }

/* Другие сервисы */
.h-top-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
/* min-width:0 обязателен: плитка — ячейка сетки, а у ячеек ширина по умолчанию не может
   стать меньше содержимого (min-width:auto). На узком телефоне (320px) плитка Steam из-за
   этого раздувалась до 331px при колонке в 288 и утаскивала всю страницу вбок — экран
   можно было проскроллить в пустоту. Ставим ноль → содержимое переносится внутри плитки. */
.h-top { min-width: 0; display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:16px; background:rgba(255,255,255,0.045); border:1px solid var(--line); transition: transform .2s, border-color .2s; }
.h-top:not(.is-soon):hover { transform: translateY(-3px); border-color: var(--line-2); }
.h-badge { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background: rgba(255,255,255,0.05); }
.h-badge .ic { width:23px; height:23px; fill:#eef2fb; stroke:none; }
.h-top-txt { min-width: 0; }
.h-top-name { display:inline-flex; align-items:center; gap:7px; font-size:15.5px; font-weight:700; color: var(--text); }
.h-top-txt span { display:block; font-size:12px; color:var(--muted-soft); margin-top:2px; }
.h-soon { font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color: var(--muted-soft); background: rgba(255,255,255,0.08); border-radius:999px; padding:2px 7px; white-space:nowrap; }

/* Отзывы */
/* Четыре отзыва — ровным рядом (было три в ряд, и четвёртый висел один снизу) */
.h-reviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
@media (max-width: 1100px) { .h-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .h-reviews { grid-template-columns: 1fr; } }
.h-review { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.h-review:hover { border-color: var(--line-2); transform: translateY(-3px); }
.h-review-head { display: flex; align-items: center; gap: 12px; }
.h-review-ava { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 18px; font-weight: 800; color: #fff; background: var(--a, var(--blue)); }
.h-review-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h-review-who b { font-size: 15px; color: var(--text); }
.h-review-stars { font-size: 13px; letter-spacing: 2px; color: #ffcf70; }
.h-star-off { color: rgba(255,255,255,0.22); }
.h-review-text { margin: 0; flex: 1; font-size: 14px; line-height: 1.55; color: var(--muted); }
.h-review-item { font-size: 12px; color: var(--muted-soft); padding-top: 12px; border-top: 1px solid var(--line); }

/* Как проходит оформление — метка сверху, 3 шага в ряд (колонки одинаковой ширины) */
.h-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 30px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.015); }
.h-howto-l { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-soft); }
.h-step { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.h-step b { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue-2); font-size: 12px; font-weight: 800; }

@media (max-width: 980px) {
  /* Мобильное меню: бургер в шапке, «Войти» уходит в панель, меню = выезжающая справа панель */
  .nav-toggle { display: inline-flex; }
  .site-header__actions .btn { display: none; }
  /* z-index 25: над контентом (z1), но ПОД слоем шапки (z30), внутри которой лежит панель —
     иначе подложка перекрывала бы саму панель и «замутняла» её. */
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(6,8,16,0.62); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  /* Меню — карточка у правого края, по ВЫСОТЕ посередине экрана (решение владельца
     12.08): выезжает от бургера, но приходит под палец, а не остаётся вверху. Высота —
     по содержимому, экран лишь ограничивает её; длинное меню внутри прокручивается.
     Закрытая панель уезжает за край и не ловит клики (visibility + pointer-events) —
     та же ловушка, что была в Telegram-магазине с поповером регионов. */
  .site-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; right: 10px; top: 50%; width: min(84vw, 312px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 52px 10px 12px; z-index: 100; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6);
    visibility: hidden; pointer-events: none;
    transform: translate(calc(100% + 20px), -50%);
    transition: transform .32s cubic-bezier(.4,0,.2,1), visibility .32s;
  }
  body.nav-open .site-nav {
    visibility: visible; pointer-events: auto;
    transform: translate(0, -50%);
  }
  /* Размытие фона шапки на телефоне ОТКЛЮЧЕНО совсем — и вот почему (проверено в браузере,
     а не по наитию): backdrop-filter делает шапку системой отсчёта для вложенных элементов,
     из-за чего выдвижная панель меню перестаёт быть «привязанной к экрану» и своей
     закрытой позицией за правым краем распирает страницу до 730px при экране 390 — её
     можно было утащить вбок в пустоту. Замер: с размытием 730, без него 390.
     Взамен фон шапки делаем плотным, чтобы содержимое под ней не просвечивало. */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0b0b18; }
  .nav-close { display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; background: var(--panel-soft); color: var(--text); border-radius: 10px; cursor: pointer; }
  /* Шапка панели — «начало»: заголовок слева, крестик справа */
  .nav-title { display: block; position: absolute; top: 19px; left: 16px; font-size: 17px; font-weight: 800; color: var(--text); }
  .nav-drop { position: static; width: 100%; }
  /* Телефон: меню ПЛОСКОЕ — четыре раздела одинаковыми пунктами, каждый ведёт сразу в
     свой раздел. Разворот групп убран (решение владельца 11.08): лишний тап между
     человеком и товаром, а сами подпункты дублируют то, что уже есть внутри раздела.
     Значок слева даёт строке опору для глаза — без него это был столбик одинакового
     текста (владелец, 12.08). Значок приходит из NAV (site_content), один источник. */
  .nav-drop > .nav-link, .site-nav > .nav-link {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 10px; border-radius: 12px;
    font-size: 15.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text);
  }
  .nav-ico { display: block; width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain;
    filter: brightness(0) invert(1); opacity: 0.72; }
  .nav-drop > .nav-link:hover, .site-nav > .nav-link:hover { background: var(--panel-soft); color: var(--text); }
  .nav-caret, .nav-menu { display: none; }
  /* «Отзывы» на телефоне живут в служебной сетке ниже — в списке разделов их не показываем,
     чтобы одна и та же ссылка не стояла дважды. */
  .site-nav > .nav-link--reviews { display: none; }
  .nav-mobile-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  /* Служебное — сеткой 2×2: занимает две строки вместо четырёх и держит корзину со
     счётчиком под пальцем (шапка под панелью не видна). */
  .nav-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  /* overflow + min-width: длинная подпись («Поддержка») на узком телефоне вылезала за
     рамку плитки — замер по границам, глазом на 390px этого не видно. */
  .nav-tile { display: flex; align-items: center; gap: 8px; padding: 10px 9px; min-width: 0; overflow: hidden;
    border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255,255,255,0.03);
    font-size: 13px; font-weight: 700; color: var(--muted); text-align: left; cursor: pointer;
    white-space: nowrap; }
  .nav-tile:hover { background: var(--panel-soft); color: var(--text); }
  .nav-tile .nav-ico { width: 17px; height: 17px; opacity: 0.6; }
  .nav-tile__count { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; display: grid;
    place-items: center; border-radius: 999px; background: var(--blue-2); color: #0a0f1f;
    font-size: 11px; font-weight: 900; }
  .nav-tile__count[hidden] { display: none; }
  .nav-mobile-extra .btn { text-align: center; }
  .nav-hours { margin: 2px 0 0; text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--muted-soft); }
}
/* Узкие телефоны (320–360): в плитке остаётся ~75px на подпись — ужимаем шрифт и отступы,
   иначе «Поддержка» не помещается рядом со значком. */
@media (max-width: 380px) {
  .nav-tile { gap: 6px; padding: 10px 7px; font-size: 12.2px; }
  .nav-tile .nav-ico { width: 16px; height: 16px; }
}
@media (max-width: 920px) { .h-field { display: none; } .h-hero-inner { max-width: none; padding: 0; } .h-hero { min-height: 0; padding: 30px 0 38px; } .h-ps-grid, .h-top-grid, .h-reviews { grid-template-columns: 1fr; } .h-pos { flex-wrap: wrap; } .h-pos-side { width: 100%; justify-content: space-between; } .h-top.is-feat { flex-wrap: wrap; } .h-feat-perk { width: 100%; text-align: center; }
  /* ⚠️ Обязательно вместе с «одной колонкой»: плитки Steam и «скоро» просят две колонки
     (grid-column: span 2). Если это не снять, сетка МОЛЧА создаёт вторую колонку — на
     телефоне она получалась шириной 54px, и в неё падал App Store: текст вылезал из
     плитки на соседнюю (владелец 12.08: «блок App Store выглядит ужасно»). */
  .h-top.is-feat, .h-soon-row { grid-column: auto; }
  /* «Скоро» — по одному в строку: вдвоём в ряд названия («Google Play», «Nintendo
     eShop») ломались на две строки и ряд выглядел рваным. */
  .h-soon-item { flex: 1 1 100%; } }

/* --- Подвал: колонки со ссылками, режим работы, дисклеймер ---
   Был одной строкой копирайта: покупателю неоткуда узнать про режим работы и связь, а
   поисковику — про остальные разделы. Разметку отдаёт сервер (site_content.render_footer),
   поэтому у всех страниц он одинаковый. */
.site-footer { border-top: 1px solid var(--line); margin-top: auto; padding: 40px 0 28px; color: var(--muted-soft); font-size: 13.5px; }
.foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 30px; }
.foot-col h3 { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
/* Логотип исключён намеренно: он тоже ссылка в колонке, и правило ниже ломало его —
   display:block гасил выравнивание по центру (значок ▶ съезжал вверх) и зазор между
   словами, а font:inherit сбивал кегль с 23px до 13.5px подвала. Логотип на сайте ОДИН
   (site_content.render_logo), значит и вид у него один — колонка его не переопределяет. */
.foot-col a:not(.logo), .foot-col button {
  display: block; padding: 4px 0; color: var(--muted-soft); background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; transition: color .2s;
}
.foot-col a:not(.logo):hover, .foot-col button:hover { color: var(--blue-2); }
.foot-about .logo { margin-bottom: 12px; }
.foot-note { color: var(--muted-soft); line-height: 1.55; padding: 3px 0; max-width: 44ch; }
.foot-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.foot-bottom a { color: var(--muted-soft); transition: color .2s; }
.foot-bottom a:hover { color: var(--blue-2); }
.foot-legal { font-size: 12px; color: rgba(143,154,185,0.75); line-height: 1.5; }
@media (max-width: 900px) { .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr; } }

/* --- Карусель слайдов (слайдер + точки + автолистание) --- */
.hero-carousel { padding: 22px 24px 2px; }
/* Стык карусели и полок — без разделительной линии на всю ширину (скрытая граница/тень) */
main#shelves, main#shelves > .shelf:first-child { border: 0; box-shadow: none; background: transparent; }
#hero-carousel { border: 0; box-shadow: none; }
.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.hero-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.22); cursor: pointer; transition: width .25s, background .25s; }
.hero-dot.is-active { width: 22px; border-radius: 999px; background: #ff7a2f; }
.hero-carousel__row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; cursor: grab; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.hero-carousel__row::-webkit-scrollbar { display: none; }
.hero-carousel__row.is-drag { cursor: grabbing; user-select: none; }
/* Слайд соразмерен полосе контента: 440px занимали 42% суженного контейнера, и карусель
   читалась как «две картинки», а не как лента. */
.hero-slide { position: relative; flex: 0 0 auto; width: clamp(280px, 30vw, 400px); aspect-ratio: 1 / 1; scroll-snap-align: start; border-radius: 18px; overflow: hidden; border: 1px solid rgba(93,231,255,0.2); }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-slide__pill { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 8px; background: linear-gradient(90deg, #5de7ff, #4e80ff 48%, #ff7a2f); color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 3px 12px rgba(0,0,0,0.32); }

/* --- Страница региона: заголовок + полки игр --- */
.region-hero { padding: 26px 24px 4px; }
.region-back { color: var(--muted-soft); font-size: 14px; transition: color .2s; }
.region-back:hover { color: var(--cyan); }
.region-empty { padding: 44px 24px; color: var(--muted); }

.shelf { padding: 20px 24px; }
.shelf__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.shelf__title { display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 1.15; font-weight: 900; margin: 0; }
/* Отбивка заголовка полки — 1:1 из ТГ (.shelf-title::before): cyan→оранж, синее свечение */
.shelf__title::before { content: ""; flex: none; width: 4px; height: 22px; border-radius: 999px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 18px rgba(93, 231, 255, 0.5); }
/* Название полки — ссылка на страницу полки (провал в полку, как в Telegram) */
.shelf__title a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.shelf__title a:hover { color: var(--cyan); }
.shelf__more { color: var(--accent-2); font-size: 22px; font-weight: 900; transition: transform .2s; }
.shelf__title a:hover .shelf__more { transform: translateX(3px); }
.shelf__nav { display: flex; gap: 8px; }
.shelf__navbtn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.05); color: var(--muted); cursor: pointer; border: 0; transition: background .2s, color .2s; }
.shelf__navbtn:hover { background: rgba(93,231,255,0.14); color: var(--cyan); }
.shelf__navbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 680px) { .shelf__nav { display: none; } }
/* Полка и карточка — ТОЧНО как в Telegram-магазине (parser-hydration.css / parsed-card-final-style.css) */
.shelf__row {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 4px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-width: none;
}
.shelf__row::-webkit-scrollbar { display: none; }
.shelf__row.is-drag { cursor: grabbing; user-select: none; }
/* ——— Мост к стилям карточек Telegram (/tg/parser-hydration.css + parsed-card-final-style.css) ———
   Сама карточка (.parser-game-card и вложенные) стилизуется файлами ТГ — один источник вида.
   Здесь только то, что в ТГ живёт в style.css: недостающие переменные и базовые правила
   .game-cover-badge / .game-price / .game-tag, плюс режим сетки для страницы полки.

   ⚠️ ЗНАЧЕНИЯ БЕРЁМ ИЗ АКТИВНОЙ ТЕМЫ static/theme-playful.css, а не из базового style.css:
   тема переопределяет цвета, и настоящий вид элемента в магазине задаёт именно она.
   Бейдж «ПРЕДЗАКАЗ» уже дважды получался чужим, потому что копировался базовый градиент
   var(--accent)→var(--accent-2) — на сайте это оранжевый→циан, а утверждённый вид другой:
   циан → синий → оранжевый. Правило: сверять с theme-playful.css. */
:root { --accent-2: #5de7ff; }
.parser-game-card { text-decoration: none; }
.game-cover-badge { position: absolute; top: 8px; left: 8px; z-index: 3; border-radius: 8px; padding: 5px 7px; background: linear-gradient(90deg, #5de7ff, #4e80ff 48%, #ff7a2f); color: #fff; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.game-price { margin: 10px 0 4px; color: var(--text); font-size: 17px; line-height: 1.1; font-weight: 900; }
.game-tag { display: inline-flex; align-items: center; border-radius: 8px; padding: 5px 8px; margin-top: 8px; background: rgba(93,231,255,0.11); color: #dff8ff; font-size: 11px; font-weight: 800; }

/* Чтобы drag-скролл не превращался в «перенос» ссылки/картинки браузером */
.shelf__row, .hero-carousel__row { user-select: none; }
.parser-game-card, .hero-slide, .parser-game-card img, .hero-slide img { -webkit-user-drag: none; }
.parser-game-card img { pointer-events: none; }

/* Базовый слой подписок из ТГ style.css (subscription-list-layout.css его только
   переопределяет — без базы капсулы схлопываются). */
.sub-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 18px; background: rgba(13,23,40,0.95); margin-bottom: 12px; }
.sub-tab { border: 0; padding: 14px 8px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 900; cursor: pointer; }
.sub-tab.is-active { border-radius: 14px; background: var(--tg-seg-grad); box-shadow: var(--tg-seg-shadow); color: #fff; }
.sub-list { display: grid; gap: 10px; }
.sub-card { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--panel-border); border-radius: 18px; padding: 14px; background: rgba(13,23,40,0.92); cursor: pointer; text-align: left; }
.sub-title { color: var(--text); font-size: 15px; line-height: 1.25; font-weight: 900; }
.sub-meta { margin-top: 4px; color: var(--muted-soft); font-size: 13px; }
.sub-price { color: var(--accent-2); font-size: 15px; font-weight: 900; white-space: nowrap; }

/* Подписки на вебе (по референсу конкурента ту.png): одна мягкая панель, карточки
   тарифов на её фоне БЕЗ собственных рамок, много воздуха, синие галочки-чекбоксы. */
/* Подписки — как обычная полка (без панели-обёртки): заголовок вровень с другими полками */
.websub-panel { border: 0; padding: 0 0 10px; background: transparent; }
/* Верх: заголовок слева, переключатели сроков — по ЦЕНТРУ (grid 1fr auto 1fr) */
.websub-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 22px; }
.websub-top .shelf__title { margin: 0; grid-column: 1; }
/* Вкладки сроков — заметная тёмная pill-группа по центру */
.websub-tabs { grid-column: 2; justify-self: center; display: inline-flex; max-width: none; margin: 0; gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: rgba(8, 14, 28, 0.8); }
.websub-tabs .sub-tab { padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 800; color: var(--muted-soft); white-space: nowrap; }
.websub-tabs .sub-tab.is-active { color: #fff; background: var(--tg-seg-grad); box-shadow: var(--tg-seg-shadow); }
/* Сетка тарифов: четыре тарифа (Essential, Extra, Deluxe, EA Play) ОДНИМ рядом. Отдельного
   блока под EA Play больше нет — одна карточка в трёхколоночной сетке оставляла две трети
   ширины пустыми (§0cc: убрано вместе с .websub-grid-ea и .websub-ea-head). */
.websub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: stretch; }
/* ЕДИНАЯ карточка тарифа: баннер, цена со сроком, название и СОСТАВ тарифа — покупатель
   выбирает по тому, что входит, а не по названию (раньше состав был скрыт совсем). */
.websub-card { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px; text-align: left; cursor: pointer; border: 1px solid var(--panel-border); border-radius: 16px; background: rgba(255,255,255,0.02); transition: transform .15s, border-color .15s; font-family: inherit; position: relative; }
.websub-card:hover { transform: translateY(-2px); border-color: var(--panel-border-hover); }
/* Стрелка — в правом верхнем углу: карточка переносит состав на вторую строку, и в
   потоке стрелка уезжала бы под список. */
.websub-card::after { content: "›"; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: 26px; color: var(--muted-soft); font-weight: 400; line-height: 1; }
.websub-card-img { flex: 0 0 112px; width: 112px; aspect-ratio: 3 / 2; border-radius: 11px; overflow: hidden; }
/* Баннер тарифа — цвет по тарифу, название, цифра срока фоном. Небольшой аккуратный текст. */
.websub-banner { container-type: inline-size; position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 0 12px; }
.websub-banner-num { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); font-size: min(64px, 46cqw); font-weight: 900; line-height: 1; opacity: 0.16; pointer-events: none; }
.websub-banner-brand { position: relative; font-size: 8.5px; font-weight: 800; letter-spacing: 0.2px; opacity: 0.85; }
.websub-banner-name { position: relative; font-size: 16px; font-weight: 900; letter-spacing: 0.2px; line-height: 1; }
.websub-banner-essential { background: linear-gradient(135deg, #eef2f8, #c6d0df); color: #1a2233; }
.websub-banner-extra { background: linear-gradient(135deg, #ffd23f, #f0a500); color: #241a00; }
.websub-banner-deluxe { background: linear-gradient(135deg, #14140f, #2d2716 70%); color: #ffcf45; }
.websub-banner-ea { background: linear-gradient(135deg, #3a2fb0, #6a45e0); color: #fff; }
.websub-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Цена и название — ТОЧНО как у карточек игр (эталон parser-hydration.css): один шрифт */
/* Цена и подпись срока — flex с переносом: сама цена («от 1690 ₽») НИКОГДА не рвётся
   посередине, при нехватке места вниз уходит только подпись срока. В узкой карточке
   главной цена ломалась на «от 1690» и «₽» отдельной строкой. */
.websub-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px;
  font-size: 18px; font-weight: 900; letter-spacing: -0.25px; color: #fff; white-space: nowrap; }
/* nowrap: в узкой карточке «за 12 месяцев» ломалось на «за 12» + «месяцев» отдельной строкой. */
.websub-card-term { font-size: 12px; font-weight: 700; color: var(--muted-soft); white-space: nowrap; }
.websub-card-name { font-size: 14px; font-weight: 900; letter-spacing: -0.1px; color: #fff; }
/* Состав тарифа: галочка + строка. На телефоне — двумя колонками, чтобы десять
   возможностей не превращали карточку в простыню. Строки, которых нет в младшем
   тарифе, подсвечены — сразу видно, за что доплата. */
/* align-content: start — иначе в высокой карточке grid растягивает строки по всей
   свободной высоте и список выглядит рассыпанным. */
.websub-card-feats { flex: 1 0 100%; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 3px 12px; margin: 2px 2px 0; padding: 10px 0 2px; border-top: 1px solid rgba(255,255,255,0.07); list-style: none; }
.websub-card-feats li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.websub-card-feats li::before { content: "✓"; flex: 0 0 auto; color: var(--accent-2); font-weight: 900; }
.websub-card-feats li.is-new { color: #fff; font-weight: 800; }
.websub-card-feats li.is-new::before { color: var(--accent); }
/* Десктоп — крупные ВЕРТИКАЛЬНЫЕ карточки в стиле карточек игр:
   большой баннер тарифа сверху, под ним цена и название (на телефоне — компактные горизонтальные). */
@media (min-width: 781px) {
  /* Четыре тарифа в ряд: столбцы уже, поэтому баннер ниже, а состав идёт одной колонкой. */
  .websub-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .websub-card { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 18px; }
  .websub-card:hover { transform: translateY(-3px); }
  .websub-card-img { flex: none; width: 100%; aspect-ratio: 2 / 1; border-radius: 0; }
  .websub-card::after { display: none; }
  .websub-card-body { padding: 14px 16px 10px; gap: 4px; }
  /* Цена крупнее названия и заметна рядом с большим баннером тарифа: на десктопе 23px
     терялись под цветной картинкой, а цена — то, ради чего человек смотрит карточку. */
  .websub-card-price { font-size: 29px; }
  .websub-card-price .websub-card-term { font-size: 13px; }
  .websub-card-name { font-size: 16px; }
  .websub-card-feats { grid-template-columns: 1fr; margin: 0; padding: 10px 16px 16px; border-top: 0; }
  .websub-banner { padding: 0 18px; gap: 5px; }
  /* Цифра срока — фоном справа. Уже названия тарифа: на широкой карточке (три тарифа в
     ряд, без EA Play) она наезжала на слово ESSENTIAL. */
  .websub-banner-num { font-size: min(92px, 38cqw); right: 4%; }
  .websub-banner-brand { font-size: 11px; }
  .websub-banner-name { font-size: 26px; }
}
/* Промежуточная ширина: четыре колонки уже не помещаются — по две в ряд. */
@media (min-width: 781px) and (max-width: 1120px) {
  .websub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .websub-top { grid-template-columns: 1fr; }
  .websub-top .shelf__title, .websub-tabs { grid-column: 1; justify-self: start; }
  .websub-grid { grid-template-columns: 1fr; }
  .websub-card { padding-right: 34px; }
  /* Сроки (1 / 3 / 12 месяцев) — тремя равными долями ВО ВСЮ ширину, как переключатель
     регионов на главной. Раньше это был ряд по содержимому: на узком телефоне (320px)
     три вкладки складывались в 335px при колонке 288 и утаскивали страницу вбок. */
  .websub-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .websub-tabs .sub-tab { padding: 10px 4px; font-size: 12.5px; }
}

/* Детальная тарифа: компактная колонка по центру, картинка среднего размера */
/* Детальная подписки — раскладка по референсу конкурентов: hero из 3 зон
   (картинка · инфо+сроки · панель покупки), ниже «Уровни подписки», ниже «Что входит». */
body.region-page .subscription-detail { max-width: var(--maxw); margin: 0 auto; }
/* Hero: широкая картинка | центр (название+сроки) | панель покупки справа */
/* Три зоны: картинка | заголовок и выбор | покупка. Картинка гибкая, а не 400px фикс:
   после сужения контента (11.08) она съедала середину — на 1280 под заголовок
   оставалось 305px, и «Пополнение кошелька PSN · Турция» ломалось на три строки. */
.psub-hero { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) minmax(250px, 300px); gap: 24px; align-items: start; margin-bottom: 34px; }
.psub-hero-img { border: 1px solid var(--panel-border); border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 11; background: rgba(8,15,30,0.6); }
.psub-hero-img .websub-banner { width: 100%; height: 100%; }
.psub-hero-info { min-width: 0; }
/* Условие покупки карты («кошелёк только турецкого аккаунта») стоит ПОД блоком покупки —
   значит и на широком экране оно живёт в его колонке, третьей. Пустой слот (у товара нет
   условия) не занимает место.
   ⚠️ grid-column ТОЛЬКО в широком медиа: на телефоне шапка распущена (display:contents),
   и «третья колонка» молча создавала третью колонку у всей страницы — вся раскладка
   разъезжалась в три ряда (проверено на живой странице, не на глаз). */
@media (min-width: 901px) {
  .subscription-detail-topup .head-notice-slot { grid-column: 3; }
}
.subscription-detail-topup .head-notice-slot:empty { display: none; }
.subscription-detail-topup .head-notice-slot .head-notice { max-width: none; margin-top: 12px; }
/* Карты пополнения: слева — выбранная карта КРУПНО (та же нарисованная карта, что в
   витрине, увеличенная). Фотография карты тут больше не показывается (§0cc). */
.psub-hero-card .tcard { border-radius: 20px; padding: 16px 20px; }
.psub-hero-card .tcard-nom { font-size: clamp(34px, 4vw, 52px); }
.psub-hero-card .tcard-top { font-size: 12px; gap: 7px; }
.psub-hero-card .tcard-top img { width: 18px; height: 18px; }
/* Вкладки региона (App Store) */
.psub-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.psub-region { border: 1px solid var(--panel-border); border-radius: 10px; padding: 9px 14px; background: rgba(13,23,40,0.6); color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; }
.psub-region.is-active { color: #fff; border-color: transparent; background: var(--tg-seg-grad); box-shadow: var(--tg-seg-shadow); }
/* Номиналы на подробной странице: карта = выбор номинала. Кнопки «+» здесь нет —
   покупка одна, в блоке справа (там же количество), иначе два разных пути в корзину. */
.nom-grid-page { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; margin-bottom: 34px; }
.nom-pick { cursor: pointer; border-radius: 15px; padding: 5px; border: 1px solid transparent; transition: border-color .15s, background .15s, transform .18s; }
.nom-pick .nom-buy { justify-content: center; padding: 0; }
.nom-pick .nom-price { font-size: 13.5px; }
.nom-pick:hover { border-color: var(--line-2); background: rgba(255,255,255,0.03); }
.nom-pick.is-active { border-color: var(--panel-border-hover); background: var(--blue-soft); }
@media (max-width: 680px) {
  /* ⭐ Номиналы на телефоне — компактные ПИЛЮЛИ, а не десять одинаковых карт (владелец,
     12.08: «много одинаковых карточек, кнопку видно только в самом низу»). Карта-картинка
     на странице ОДНА — вверху, и она меняется при выборе; в списке от неё нужна только
     цифра номинала и цена. Тот же приём, что в Telegram-магазине, где номиналы —
     ряд вкладок над картой. Данные и разметка общие (§0cc), меняется только вид. */
  .nom-grid-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin-bottom: 24px; }
  .nom-grid-page > * { flex: none; }
  .nom-grid-page .nom-pick { padding: 8px 6px 7px; border: 1px solid var(--line-2);
    border-radius: 13px; background: rgba(255,255,255,0.03); gap: 2px; text-align: center; }
  .nom-grid-page .nom-pick .tcard { aspect-ratio: auto; padding: 0; border-radius: 0;
    background: none; box-shadow: none; align-items: center; }
  .nom-grid-page .nom-pick .tcard::before, .nom-grid-page .nom-pick .tcard::after,
  .nom-grid-page .nom-pick .tcard-logo, .nom-grid-page .nom-pick .tcard-top { display: none; }
  .nom-grid-page .nom-pick .tcard-nom { font-size: 17px; color: var(--text); }
  .nom-grid-page .nom-pick .nom-buy { min-height: 0; }
  .nom-grid-page .nom-pick .nom-price { font-size: 12.5px; color: var(--muted-soft); font-weight: 800; }
  .nom-grid-page .nom-pick.is-active { border-color: var(--panel-border-hover); background: var(--blue-soft); }
  .nom-grid-page .nom-pick.is-active .nom-price { color: var(--text); }
}
.psub-buy .topup-qty-row { margin: 0 0 14px; }
.psub-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 4px 0 8px; }
.psub-subtitle { color: var(--muted); font-size: 15px; line-height: 1.5; margin-bottom: 18px; max-width: 460px; }
.psub-buy { border: 1px solid var(--panel-border); border-radius: 20px; padding: 22px; background: rgba(16,22,40,0.55); }
.psub-price { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -0.5px; margin-bottom: 4px; }
.psub-price-term { color: var(--muted-soft); font-size: 13px; margin-bottom: 16px; }
/* Кнопка покупки и сердечко — ОДНОЙ строкой, одинаково у игры, подписки и карт (§0cc).
   «В избранное» отдельной полосой во всю ширину съедало целый этаж блока ради
   второстепенного действия; подпись у сердечка теперь всплывающая — значок понятен сам.
   Ширину кнопке задаёт flex, а не width:100%: иначе она считает её от всего блока и
   упирается в рамку. Кегль 15px — чтобы надпись не жалась к краям в узкой колонке. */
.psub-buy-row { display: flex; align-items: stretch; gap: 10px; }
.psub-buy-row .subscription-cart-button { flex: 1 1 auto; width: auto; min-width: 0; min-height: 54px; font-size: 15px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.psub-fav { flex: 0 0 auto; width: 50px; display: grid; place-items: center;
  border: 1px solid var(--panel-border); border-radius: 14px;
  background: rgba(255,255,255,0.04); color: var(--muted);
  font-family: inherit; cursor: pointer; transition: color .18s, border-color .18s; }
.psub-fav:hover, .psub-fav.is-fav { color: var(--cyan); border-color: var(--blue-line); }
/* Выгода длинного срока — считает subs.js по ценам, не пишется руками. */
.psub-save { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px;
  font-size: 13.5px; font-weight: 700; color: var(--muted); }
.psub-save b { padding: 3px 9px; border-radius: 999px; background: rgba(126,231,135,0.14);
  color: #7ee787; font-size: 12.5px; font-weight: 900; }
/* Пилюли-преимущества внутри блока покупки — столбиком, рядом с кнопкой. */
.psub-buy-badges { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Пусто — нет и разделителя: на карточке игры пилюли приходят с сервера, и до их
   появления (или если у страницы их нет) висела бы голая черта под кнопками. */
.psub-buy-badges:empty { display: none; }
/* display задан явно: на телефоне общие пилюли переходят в сетку 2×N, а здесь, рядом с
   кнопкой покупки, они должны остаться столбиком на всю ширину блока. */
.psub-buy-badges .head-badges { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin: 0; }
.psub-buy-badges .head-badges span { justify-content: flex-start; border: 0; background: transparent;
  padding: 0; font-size: 13px; color: var(--muted); }

/* «Что будет после оплаты» — три коротких шага под кнопкой покупки (TimFlow). Пилюли-
   обещания на этом месте заменены ими: они хвалили магазин, а человеку важнее понимать,
   что произойдёт дальше. Развёрнутые те же шаги — в блоке «Как проходит оформление». */
.buyflow { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.buyflow-step { display: flex; align-items: center; gap: 10px; }
.buyflow-num { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-2); font-size: 11px; font-weight: 900; }
.buyflow-text b { font-size: 13px; font-weight: 600; color: var(--muted); }
/* На странице кодов шаги стоят прямо в блоке покупки (без слота-обёртки) — им нужен
   тот же отступ и разделитель, что даёт .psub-buy-badges остальным страницам. */
.psub-buy > .buyflow { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.psub-feats-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; margin: 0 0 18px; }
/* Блок «Уровни подписки» (.psub-tier*) удалён 11.08.2026: тариф выбирается обычными
   карточками .websub-card — тем же видом, что на витрине и в разделе (§0cc). */
/* «Что входит» — фичи в 2 колонки */
.psub-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.psub-feat { display: flex; gap: 12px; align-items: flex-start; }
.psub-feat-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: rgba(78,128,255,0.16); display: grid; place-items: center; font-size: 16px; }
.psub-feat-title { font-weight: 800; font-size: 14px; }
.psub-feat-text { color: var(--muted-soft); font-size: 13px; line-height: 1.35; }
@media (max-width: 900px) {
  .psub-hero { grid-template-columns: 1fr; }
  .psub-feats { grid-template-columns: 1fr; }
}
/* ——— Страница подписки ———
   Раскладка от 11.08.2026 (после разбора владельца): шапка раздела → МАГАЗИННЫЙ БЛОК
   (слева выбор региона/срока/тарифа, справа липкая панель покупки) → две колонки
   «что входит» и «как оформляем» → вопросы.
   Главное правило: выбор и цена ВСЕГДА видны вместе. До этого тарифы стояли отдельной
   секцией ниже, и человек переключал тариф, когда цена с кнопкой уже ушли за экран.
   Большой декоративной карты тарифа в шапке НЕТ: она была самым крупным элементом
   страницы и повторяла текст рядом. Картинка осталась мелкой меткой на карточках выбора. */
.psub-head { max-width: 760px; margin-bottom: 26px; }
.psub-head .psub-title { margin-bottom: 10px; }
/* Подпись раздела уже отделена отступом самого блока — свой нижний отступ у неё лишний,
   иначе между шапкой и выбором тарифа получалась дыра под сто пикселей. */
.psub-head .psub-subtitle { margin-bottom: 0; }
/* Панель покупки СТОИТ НА МЕСТЕ. Липкой (sticky) она была недолго — владелец отверг:
   блок, который едет за прокруткой, на короткой странице только отвлекает, у других
   страниц сайта покупка тоже статична. Не возвращать. */
/* Две колонки страницы: слева всё о товаре, справа покупка — прижата к верху, вровень
   с заголовком (правый верх экрана раньше пустовал). */
.psub-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 330px);
  gap: 30px; align-items: start; }
.psub-main { min-width: 0; }
/* Внутри левой колонки картинка и выбор идут двумя зонами (третья зона — покупка —
   переехала в правую колонку страницы). */
.psub-hero-2 { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); margin-bottom: 34px; }
/* Название выбранного тарифа: заметно, но тише H1 раздела над ним. */
.psub-tier-title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 850; margin: 0 0 6px; }
/* Метка «на ваш личный аккаунт» — НА карте тарифа, слева вверху (как бейдж «ПРЕДЗАКАЗ»
   на обложке игры). Подложка тёмная и непрозрачная: карты тарифов бывают и светлые
   (Essential), и жёлтые (Extra) — прозрачный бейдж на них терялся. */
.psub-hero-img { position: relative; }
.psub-acc-badge { position: absolute; z-index: 2; top: 10px; left: 10px;
  padding: 5px 10px; border-radius: 999px; background: rgba(8, 12, 24, 0.82);
  border: 1px solid rgba(255,255,255,0.16); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.psub-pick-title { font-size: 20px; font-weight: 850; margin: 0 0 14px; }
/* Выбор региона и срока — с подписями: без них два ряда кнопок читались как одна каша. */
.psub-pick + .psub-pick { margin-top: 14px; }
.psub-pick-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-soft); margin-bottom: 8px; }
.psub-regions { margin-bottom: 0; }
/* Вкладка срока несёт свою цену — сравнение видно до клика. */
.psub-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.psub-term { display: grid; gap: 2px; padding: 9px 16px; border: 1px solid var(--panel-border); border-radius: 12px;
  background: rgba(13,23,40,0.6); color: var(--muted); cursor: pointer; text-align: left; }
.psub-term b { font-size: 13px; font-weight: 800; }
.psub-term i { font-style: normal; font-size: 14px; font-weight: 900; color: var(--text); }
.psub-term.is-active { color: #fff; border-color: transparent; background: var(--tg-seg-grad); box-shadow: var(--tg-seg-shadow); }
.psub-term.is-active i { color: #fff; }
/* Переключатели тарифов: цветная метка тарифа, название, чем отличается от младшего, цена.
   Идут ОДНОЙ колонкой рядом с блоком покупки — так карточка шире, состав читается в строку,
   и все три тарифа видны вместе с ценой справа. */
/* Тарифы идут ОДНОЙ колонкой внутри левой половины: в ряд по три им не хватало ширины
   (состав ломался), а «сколько влезет» давало кривой ряд 2+1. Широкая строка-карточка
   читается лучше всего: метка слева, состав в строку, цена справа от него. */
.psub-tiers { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 46px; }
.psub-tier { position: relative; display: flex; gap: 16px; align-items: center; padding: 14px 16px; text-align: left;
  border: 1px solid var(--panel-border); border-radius: 18px; background: rgba(13,23,40,0.5);
  cursor: pointer; transition: border-color .2s, transform .15s, box-shadow .2s; }
.psub-tier:hover { transform: translateY(-2px); border-color: var(--panel-border-hover); }
/* Единственный тариф (EA Play) — не переключатель, а карточка-описание: не жмётся и не
   подпрыгивает под курсором, чтобы не обещать выбор, которого нет. */
.psub-tier.is-static { cursor: default; }
.psub-tier.is-static:hover { transform: none; border-color: var(--blue-line); }
.psub-tier.is-active { border-color: var(--blue-line); box-shadow: 0 0 0 1px var(--blue-line) inset; background: rgba(21,32,58,0.6); }
/* Метка тарифа — та же карта, что на витрине, но мелкая: узнаваемость есть, а спорить
   с текстом за внимание она уже не может. */
.psub-tier-ban { flex: 0 0 104px; height: 64px; border-radius: 12px; overflow: hidden; }
.psub-tier-ban .websub-banner { width: 100%; height: 100%; padding: 0 11px; gap: 2px; }
.psub-tier-ban .websub-banner-brand { font-size: 7.5px; }
.psub-tier-ban .websub-banner-name { font-size: 14px; }
.psub-tier-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.psub-tier-name { font-size: 17px; font-weight: 850; color: var(--text); }
/* Состав в карточке-переключателе идёт В СТРОКУ (карточка широкая, столбик растягивал её). */
.psub-tier-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.psub-tier-feats li { display: flex; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.psub-tier-feats li::before { content: "✓"; color: var(--accent-2); font-weight: 900; }
/* «Всё из младшего тарифа» — строка-основа, тише прибавки этого тарифа. */
.psub-tier-feats li.is-base { color: var(--muted-soft); font-weight: 700; }
.psub-tier-feats li.is-base::before { content: "+"; color: var(--muted-soft); }
.psub-tier-price { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -0.3px; }
.psub-tier-price i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted-soft); margin-left: 7px; }
/* Две колонки: состав тарифа и шаги оформления — рядом, а не полотном друг под другом. */
.psub-cols { display: grid; gap: 34px; align-items: start; }
.psub-cols .psteps, .psub-cols .psub-col { margin: 0; padding: 0; max-width: none; width: auto; }
/* Состав — плашками в рамке (строка «иконка + название + пояснение» сплошным списком
   превращалась в текст, который не читают). Число колонок НЕ трогаем: базовые две
   колонки нужны страницам карт пополнения, где блок идёт во всю ширину. Одну колонку
   включаем только внутри .psub-cols — там блок занимает половину экрана. */
.psub-feat { padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.02); }
.psub-cols .psub-feats { grid-template-columns: 1fr; gap: 10px; }
/* Шаги оформления — нумерованный список; внутри колонки идёт одной колонкой. */
.psteps { margin: 44px auto 8px; }
.psteps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 44px; }
.pstep { display: flex; gap: 14px; align-items: flex-start; }
.pstep-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-2); font-size: 13px; font-weight: 900; }
.pstep-body { display: block; min-width: 0; }
.pstep-body b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.pstep-body span { color: var(--muted-soft); font-size: 14px; line-height: 1.5; }
@media (min-width: 1100px) {
  /* Длинный состав тарифа — в две колонки внутри своей половины (см. is-two в subs.js) */
  .psub-cols .psub-feats.is-two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .psub-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; }
  /* Шаги вне колонок (страницы игр/карт) остаются в две колонки, внутри колонки — в одну. */
  .psteps-list { grid-template-columns: 1fr 1fr; }
  .psub-cols .psteps-list { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* ⭐ ПРАВИЛО СТРАНИЦ ТОВАРА НА ТЕЛЕФОНЕ: сначала ВСЕ выборы, сразу за ними цена и кнопка.
     Одно на обе страницы — подписку (регион, срок, тариф) и карты пополнения (номинал),
     потому что беда у них общая, а не своя у каждой (§0b).

     На компьютере выбор и покупка видны ОДНОВРЕМЕННО: слева выбор, справа панель покупки.
     На телефоне «одновременно» не бывает — есть только порядок сверху вниз. Панель покупки
     раньше стояла ВЫШЕ выбора (чтобы не оказаться в самом низу), и получалось так: человек
     доходит до тарифов или номиналов, переключает — а итоговая цена и кнопка уже уехали на
     пол-экрана вверх. Это ровно та беда «выбираю вслепую», ради которой раскладку и
     переделывали. Липкую панель не возвращаем — владелец её отверг (едет за прокруткой,
     отвлекает, на остальных страницах покупка статична).

     Цену в момент выбора показывает сама карточка тарифа и сама плитка номинала, поэтому
     вслепую не выбираешь и до панели покупки.

     display:contents поднимает детей колонки/шапки на уровень страницы, поэтому порядком
     можно управлять без второй разметки (§0cc). */
  /* Порядок на телефоне (владелец, 12.08): КАРТИНКА тарифа → заголовок «Купить подписку…»
     → выбор (регион, срок) → тарифы → покупка. Картинка первой — как в Telegram и как
     на карточке игры: страница товара начинается с товара, а не с текста. Раскладку
     распускаем целиком (display:contents), поэтому порядком управляем без второй
     разметки (§0cc): картинка и правая часть шапки становятся обычными строками. */
  .psub-layout { grid-template-columns: 1fr; gap: 24px; }
  .psub-main, .psub-hero-2 { display: contents; }
  .psub-hero-img { order: 1; }
  /* Телефон: шаг между блоками задаёт ТОЛЬКО gap раскладки (24px). Собственный нижний
     отступ шапки складывался с ним и раздвигал заголовок и выбор региона. */
  .psub-head { order: 2; margin-bottom: 0; }
  /* Выбор внутри той же колонки, что и текст шапки (карты App Store): здесь gap не
     действует — отступ даёт сам блок выбора. */
  .head-text + .psub-pick { margin-top: 16px; }
  .psub-hero-info { order: 3; }
  .psub-pick-title { order: 4; }
  .psub-tiers { order: 5; margin-bottom: 0; }
  .psub-buy { order: 6; }
  /* Название тарифа и его подпись в шапке скрыты: то же самое уже написано в заголовке
     страницы («Купить подписку EA Play») и на самой карте тарифа — три раза подряд одно
     и то же занимало целый экран телефона, а до выбора региона надо было мотать. */
  .psub-hero-info > .psub-tier-title, .psub-hero-info > .psub-subtitle { display: none; }
  /* Карты пополнения: то же правило. Здесь выбор — сетка номиналов, и она лежит НЕ внутри
     шапки, поэтому колонкой делаем всю страницу, а шапку распускаем (display:contents). */
  .subscription-detail-topup { display: flex; flex-direction: column; }
  .subscription-detail-topup .psub-hero { display: contents; }
  .subscription-detail-topup .head-crumbs { order: 1; }
  .subscription-detail-topup .psub-hero-card { order: 2; }
  .subscription-detail-topup .psub-hero-info { order: 3; }
  .subscription-detail-topup .psub-noms-title { order: 4; }
  .subscription-detail-topup .nom-grid-page { order: 5; }
  .subscription-detail-topup .psub-buy { order: 6; }
  .subscription-detail-topup .head-notice-slot { order: 7; }
  /* Правил для блока «Как это работает» здесь больше нет: блок удалён (вопросы внизу
     рисует сервер, отдельной секцией вне этой раскладки). Заодно ушла причина, по которой
     заголовок «Выберите номинал» уезжал вниз: он несёт и класс .psub-feats-title, и
     правило order:7 било по нему сильнее собственного order:4. */
  /* Планшет: карта тарифа не во всю ширину (на широком экране квадрат в 700px — это уже
     не картинка товара, а плакат). Телефонный квадрат — ниже, в блоке страницы товара. */
  .subscription-detail .psub-hero-img { max-width: 380px; }
  .psub-tier { gap: 12px; padding: 12px; }
  /* Метка уже — название тарифа в ней тоже мельче, иначе «ESSENTIAL» обрезалось. */
  .psub-tier-ban { flex-basis: 84px; height: 52px; }
  .psub-tier-ban .websub-banner { padding: 0 8px; }
  .psub-tier-ban .websub-banner-name { font-size: 11px; }
  .psub-tier-ban .websub-banner-brand { font-size: 6.5px; }
}
/* Счётчик количества на страницах карт пополнения — 1:1 из ТГ (style.css) */
.topup-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; }
.topup-qty-label { color: rgba(237,243,255,0.7); font-size: 14px; font-weight: 800; }
.topup-qty-controls { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.045); }
.topup-qty-btn { width: 34px; height: 34px; border: 0; border-radius: 11px; background: rgba(93,231,255,0.14); color: #9fe9ff; font-size: 19px; font-weight: 900; line-height: 1; cursor: pointer; }
.topup-qty-btn:active { background: rgba(93,231,255,0.26); }
.topup-qty-value { min-width: 34px; text-align: center; color: #fffdf8; font-size: 16px; font-weight: 900; }

/* --- Детальная страница игры (3 колонки + панель покупки) --- */
/* Страница полки (провал в полку): крошки + заголовок + сетка карточек */
#section { padding: 20px 0 46px; }
.section-title { display: flex; align-items: center; gap: 12px; font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 20px; }
.section-title::before { content: ""; flex: none; width: 5px; height: 0.95em; border-radius: 999px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 18px rgba(93, 231, 255, 0.5); }
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 20px 14px; }
/* Карточки в сетке (страница полки) — во всю ширину ячейки, обложка по пропорции ТГ */
.section-grid .parser-game-card { width: 100%; }
.section-grid .parser-game-cover { width: 100%; height: auto; aspect-ratio: 148 / 214; }
@media (max-width: 680px) { .section-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* Карточки в полках-каруселях на вебе чуть крупнее телеграмных 148px (телефонный размер) */
body.region-page .parser-game-card-shelf { flex: 0 0 178px; width: 178px; min-width: 178px; }
/* обложка — ФИКСИРОВАННЫЕ width×height (как в Telegram, static/parser-hydration.css).
   НЕ aspect-ratio + height:auto: в Safari картинка (height:100%) при авто-высоте
   контейнера тянется в столб. Фикс-высота работает во всех браузерах. */
body.region-page .parser-game-card-shelf .parser-game-cover { width: 178px; height: 257px; }
/* Мобайл: карточки полок = эталон Telegram-мини-аппа: планшет 148×214, телефон 132×190. */
@media (max-width: 680px) {
  body.region-page .parser-game-card-shelf { flex: 0 0 148px; width: 148px; min-width: 148px; }
  body.region-page .parser-game-card-shelf .parser-game-cover { width: 148px; height: 214px; }
}
@media (max-width: 430px) {
  body.region-page .parser-game-card-shelf { flex: 0 0 132px; width: 132px; min-width: 132px; }
  body.region-page .parser-game-card-shelf .parser-game-cover { width: 132px; height: 190px; }
  body.region-page .parser-store-price { font-size: 16px; }
}

/* Полка карт пополнения: те же плитки .nom, что в разделе пополнений и на главной
   (рисует codes.js), только выстроены в листающийся ряд, а не сеткой. Старые плитки
   .topup-card с фотокартинками из Telegram удалены (§0cc): на сайте карты нарисованы
   стилями, и два разных вида одного товара сбивали покупателя. */
.topup-row { display: flex; }
.topup-row.nom-grid { grid-template-columns: none; }
.topup-row .nom { flex: 0 0 178px; width: 178px; }

/* Кубики позиций П2/П3 (шеринг): сетка 2 равных колонки, одинаковая высота, вровень с
   кнопкой. В ТГ grid включён только под .sharing-pos-card — на сайте задаём напрямую. */
body.region-page .sharing-pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
body.region-page .sharing-pos-grid.is-single { grid-template-columns: 1fr; }
body.region-page .sharing-pos { height: 100%; box-sizing: border-box; }
body.region-page .sharing-pos-desc { min-height: 2.6em; }  /* выровнять по строкам описания */

/* Объяснялки Позиций (что такое П2/П3, правила пользования). Текст и разметку даёт
   ОБЩИЙ модуль /tg/sharing-text.js — тот же, что в Telegram; внутренние элементы
   (.sharing-explain-item, -tag, -main, -warning) стилизует /tg/sharing-detail.css.
   Здесь только то, чего в Telegram нет: карточка-обёртка под ширину сайта и более
   крупный текст (на экране компьютера телефонные 13px читаются мелко). */
body.region-page .sharing-explain-card,
body.region-page .sharing-rules-card {
  margin-top: 14px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
}
body.region-page .sharing-explain-card .detail__h,
body.region-page .sharing-rules-card .detail__h { margin-top: 0; margin-bottom: 12px; font-size: 20px; }
body.region-page .sharing-explain-lead { font-size: 15px; }
body.region-page .sharing-explain-text span,
body.region-page .sharing-explain-main,
body.region-page .sharing-explain-warning,
body.region-page .sharing-rules-list li { font-size: 14px; line-height: 1.55; }
body.region-page .sharing-explain-text strong { font-size: 15px; }
body.region-page .sharing-explain-item { margin-bottom: 14px; }

/* Остаток подписки на полке Позиций: вместо обложки — фирменная карта тарифа (её же
   рисует полка подписок). Карточка полки вытянута по вертикали (2:3), и раскладка
   широкой карты в ней разъезжалась: название сидело мелким кеглем у самого верха, а
   цифра срока разрасталась во всю карту у нижнего края — два пятна по краям и пустая
   середина (владелец, 11.08).

   Композиция вертикальной карты: ОДИН центральный блок — срок, бренд, тариф. Срок
   остаётся крупным (это то, чем остаток отличается от обычной подписки), но уже не
   спорит с названием: он стоит НАД ним и приглушён, как цифра на подарочной карте.
   Углы карты отданы бейджам — позиция П2/П3 сверху, платформа снизу, — поэтому весь
   текст живёт по центру, где ничего не перекрывает. */
.parser-game-card .websub-banner {
  align-items: center; justify-content: center; text-align: center; padding: 30px 10px 26px; gap: 1px;
}
/* Цифра встаёт В ПОТОК (не абсолютом): так блок центрируется целиком, а двузначный срок
   («11М») не выходит за край, как раньше при position:absolute с привязкой к краям. */
.parser-game-card .websub-banner-num {
  position: static; transform: none; left: auto; right: auto; top: auto; bottom: auto;
  font-size: 27cqw; opacity: 0.5; letter-spacing: -1.5px; margin-bottom: 3px;
}
.parser-game-card .websub-banner-num.is-long { font-size: 23cqw; }
.parser-game-card .websub-banner-name { font-size: 20px; }
.parser-game-card .websub-banner-brand { font-size: 9.5px; opacity: 0.75; }

/* Заголовок страницы подписки на общем аккаунте не должен липнуть к карте тарифа. */
.subscription-detail .psub-main > .detail__title { margin-bottom: 18px; }

/* Ссылка под объяснялкой на карточке товара: ведёт на полную страницу с правилами. */
.sharing-explain-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--cyan); font-size: 14px; font-weight: 600; text-decoration: none;
}
.sharing-explain-more:hover { text-decoration: underline; }

/* Страница «Что такое позиции (П2 и П3)?»: два объяснения (игры и подписки) рядом,
   правила — во всю ширину под ними. На телефоне всё в одну колонку. */
.sharing-explain-page { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.sharing-explain-page > .detail__title,
.sharing-explain-page > .sharing-explain-intro { grid-column: 1 / -1; }
.sharing-explain-page > .sharing-explain-intro { margin-bottom: 8px; }
@media (max-width: 860px) {
  .sharing-explain-page { grid-template-columns: 1fr; }
}

.detail { padding-top: 12px; padding-bottom: 46px; }
.crumbs { color: var(--muted-soft); font-size: 13px; margin: 6px 0 20px; }
.crumbs a { color: var(--muted-soft); }
.crumbs a:hover, .crumbs span { color: var(--muted); }

/* Обложка и блок покупки чуть уже, середине (название, платформа, язык) достаётся
   больше: на суженном контенте (11.08) под название оставалось 377px. */
.detail__hero { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.detail__cover { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(93,231,255,0.24); aspect-ratio: 3 / 4; }
.detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__title { font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; line-height: 1.12; }
.detail__meta { margin-top: 16px; }
.detail__rate { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,209,102,0.12); color: var(--gold); font-size: 13px; font-weight: 700; }
.detail__specs { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.detail__spec { display: flex; flex-direction: column; gap: 4px; }
.detail__spec-l { color: var(--muted-soft); font-size: 13px; }
.detail__spec-v { font-size: 15px; font-weight: 600; }

/* Блок покупки игры — ТОТ ЖЕ, что у подписки (.psub-buy): цена, подпись, выгода, широкая
   кнопка, «В избранное» отдельной строкой, гарантии внизу. Своей раскладки у игры больше
   нет (§0cc): были две разные панели покупки на одном сайте, и у игры кнопка теснилась
   сердечком в одну строку. Здесь остаётся только то, чего у подписки не бывает.
   Отсчёт «до конца скидки» до секунды удалён — срок теперь стоит датой в .psub-save. */
.detail__buy { position: sticky; top: 86px; }
.detail__old { color: var(--muted-soft); font-size: 15px; }
/* Скидка подписчику (EA Play / PS Plus) в блоке покупки: цена подписчика, название и
   процент. Цвет — по подписке, как на плитках полки (жёлтый PS Plus, красный EA Play). */
.psub-subdisc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 14px;
  padding: 10px 12px; border-radius: 12px; font-size: 13px;
  border: 1px solid rgba(245,179,1,0.35); background: rgba(245,179,1,0.10); }
.psub-subdisc.is-ea { border-color: rgba(255,71,71,0.35); background: rgba(255,71,71,0.10); }
.psub-subdisc.is-trial { border-color: var(--line-2); background: rgba(255,255,255,0.04); }
.psub-subdisc-price { font-size: 18px; font-weight: 900; color: #f5b301; }
.psub-subdisc.is-ea .psub-subdisc-price { color: #ff4747; }
.psub-subdisc-name { color: var(--muted); font-weight: 700; }
.psub-subdisc-pct { margin-left: auto; font-weight: 900; color: var(--muted-soft); }
/* «Эта игра есть дешевле» — та же игра в соседнем регионе и на общем аккаунте
   (Позиции). Строки одинаковой формы: значок раздела, название и чей аккаунт, цена.
   Зелёная — только та, что действительно дешевле открытой карточки; остальные читаются
   как спокойная справка, без ложного обещания выгоды. */
.detail__twin { margin: 0 0 14px; display: flex; flex-direction: column; gap: 7px; }
.detail__twin-title { color: var(--muted-soft); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.detail__twin-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.035); color: var(--muted); }
.detail__twin-link:hover { border-color: var(--panel-border-hover); }
.detail__twin-link.is-cheaper { border-color: rgba(126,231,135,0.4); background: rgba(126,231,135,0.10); }
.detail__twin-ico { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; border-radius: 4px; }
.detail__twin-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.detail__twin-text b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.detail__twin-text span { font-size: 11.5px; color: var(--muted-soft); }
.detail__twin-money { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.detail__twin-price { font-size: 15px; font-weight: 900; color: #a6e7ad; white-space: nowrap; }
/* Насколько дешевле — цифрой под ценой: выгода читается без счёта в уме. */
.detail__twin-save { font-size: 11.5px; font-weight: 800; color: #7ee787; }
/* Отсчёт до релиза внутри блока покупки: вид задаёт /tg/parser-hydration.css, здесь
   только место в колонке и кегль цифр под её ширину (в мини-аппе блок во весь экран). */
.psub-buy .preorder-timer { margin: 0 0 14px; padding: 12px 12px 10px; }
.psub-buy .preorder-timer-title { margin-bottom: 9px; }
.psub-buy .preorder-timer-grid { gap: 6px; }
.psub-buy .preorder-timer-cell { padding: 9px 2px; border-radius: 11px; }
.psub-buy .preorder-timer-num { font-size: 19px; }
.psub-buy .preorder-timer-lbl { font-size: 9.5px; }
.detail__twin-arrow { color: var(--muted-soft); font-size: 15px; }
/* ─────────────────────────────────────────────────────────────────────────────
   КНОПКИ САЙТА — один источник вида (§0cc).

   Было: градиент кнопки скопирован в стилях 14 раз, и текст на нём задавался то
   белым, то почти чёрным (#06122b) — отсюда разнобой на экранах и нечитаемая
   кнопка «Отправить отзыв». Кнопки экрана оплаты вообще оформлялись файлами
   Telegram-магазина (/tg/cart.css подключается ПОСЛЕ этого файла и перебивал его).

   Стало: вид описан здесь один раз. Старые имена классов оставлены как ХУКИ ДЛЯ JS
   (скрипты ищут кнопки по ним) и просто перечислены в группах — своих описаний
   вида у них больше нет. Новая разметка использует .ui-btn + модификатор.

   font-family: inherit обязателен — в WebKit кнопка НЕ наследует шрифт страницы. */
.ui-btn,
.subscription-cart-button, .acc-login-btn, .acc-empty-btn, .acc-order-codes-btn,
.rvf-send, .cart-login-form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1.2;
  text-align: center; text-decoration: none; white-space: nowrap;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
/* Главное действие экрана. Белый текст — единственный правильный на этом градиенте. */
.ui-btn--primary,
.subscription-cart-button, .acc-login-btn, .acc-empty-btn, .acc-order-codes-btn,
.rvf-send, .cart-login-form button {
  color: #fff; background: var(--tg-cart-grad); box-shadow: var(--tg-cart-shadow);
}
/* Второстепенное действие: рядом с главным не спорит за внимание. */
.ui-btn--ghost {
  color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2); box-shadow: none;
}
.ui-btn--block, .acc-login-btn, .acc-empty-btn, .acc-order-codes-btn { width: 100%; }
.ui-btn--sm, .rvf-send, .acc-order-codes-btn {
  min-height: 42px; padding: 10px 16px; border-radius: 10px; font-size: 14px;
}
/* Крупная — покупка: главный поступок на странице товара, потому и заметнее прочих. */
.ui-btn--lg, .subscription-cart-button {
  min-height: 54px; border-radius: 14px; padding: 12px 14px; font-size: 16px; font-weight: 900;
}
.ui-btn:hover, .subscription-cart-button:hover, .acc-login-btn:hover, .acc-empty-btn:hover,
.acc-order-codes-btn:hover, .rvf-send:hover, .cart-login-form button:hover {
  transform: translateY(-1px); filter: brightness(1.06);
}
.ui-btn:active, .subscription-cart-button:active, .acc-login-btn:active,
.acc-empty-btn:active, .acc-order-codes-btn:active, .rvf-send:active,
.cart-login-form button:active { transform: translateY(1px) scale(0.99); }
/* Недоступная кнопка. Прозрачностью её гасить НЕЛЬЗЯ: тёмный текст на приглушённом
   градиенте пропадал совсем. Вместо этого — ровный тихий фон и читаемая подпись,
   чтобы человек видел, что кнопка есть, просто пока не активна. */
.ui-btn:disabled, .subscription-cart-button:disabled, .acc-login-btn:disabled,
.acc-empty-btn:disabled, .acc-order-codes-btn:disabled, .rvf-send:disabled,
.cart-login-form button:disabled {
  color: var(--muted-soft); background: rgba(255, 255, 255, 0.07);
  box-shadow: none; cursor: not-allowed; transform: none; filter: none;
}

.detail__h { margin-top: 34px; margin-bottom: 14px; font-size: 22px; font-weight: 700; }
.detail__eds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 28px; }
.edcard { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid var(--panel-border); cursor: pointer; text-align: left; width: 100%; color: inherit; font: inherit; transition: border-color .2s, background .2s; }
.edcard:hover { border-color: var(--panel-border-hover); }
.edcard.is-active { border-color: #4e80ff; background: rgba(78,128,255,0.12); }
.edcard__cover { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--panel-border); }
.edcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edcard__name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.edcard__price { margin-top: 4px; font-size: 16px; font-weight: 800; color: #fff; }

.detail__shots { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; cursor: grab; padding-bottom: 8px; user-select: none; }
.detail__shots::-webkit-scrollbar { display: none; }
.detail__shots img { flex: 0 0 auto; width: 460px; max-width: 82%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--panel-border); }

.detail__contents-box { margin-top: 4px; }
.detail__contents { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.detail__contents-empty { color: var(--muted); font-size: 15px; }

@media (max-width: 980px) {
  .detail__hero { grid-template-columns: 260px 1fr; }
  .detail__buy { grid-column: 1 / -1; position: static; }
}
/* ⭐⭐ СТРАНИЦА ТОВАРА НА ТЕЛЕФОНЕ — ОДНА раскладка на игру, подписку и карту пополнения
   (замечания владельца 12.08). До этого телефон получал десктопную раскладку в три
   колонки, просто сплюснутую в одну, и все жалобы шли из этого: вытянутая обложка в
   треть экрана, мелкий заголовок, характеристики столбиком «ярлык сверху — значение
   снизу» (справа оставалась пустая половина) и длинная простыня из одинаковых карт
   номиналов, за которой не видно кнопки.

   Эталон — Telegram-магазин (там раскладка сразу телефонная): КВАДРАТНАЯ картинка во всю
   ширину, крупное название, характеристики строками «ярлык слева — значение справа»,
   выбор компактными пилюлями. Правила ниже приводят сайт к тому же виду и делают это
   ОДНИМ блоком на все страницы товара (§0b) — своей мобильной вёрстки у каждой страницы
   нет. На компьютере ничего не меняется. */
@media (max-width: 680px) {
  .detail__hero { grid-template-columns: 1fr; }
  /* 1. Обложка — квадрат во всю ширину. object-position сверху: у портретных обложек
     PS Store название игры вверху, и при обрезке до квадрата оно должно остаться. */
  .detail__cover { max-width: none; aspect-ratio: 1 / 1; border-radius: 20px; }
  .detail__cover img { object-position: center top; }
  /* 2. Название крупнее — как в Telegram (там clamp(28px, 7vw, 44px)) */
  .detail__title { font-size: clamp(26px, 7.4vw, 36px); }
  .detail__meta { margin-top: 12px; }
  /* 3. Характеристики — компактным списком строк, а не столбиком пар */
  .detail__specs { margin-top: 14px; gap: 0; border: 1px solid var(--line); border-radius: 16px; }
  .detail__spec { flex-direction: row; align-items: center; justify-content: space-between;
    gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
  .detail__spec:last-child { border-bottom: 0; }
  .detail__spec-v { text-align: right; }
  /* 4. Издания игры — в одну колонку (в две они сжимались до нечитаемых) */
  .detail__eds { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }

  /* 5. Подписка: карта тарифа — тоже КВАДРАТ во всю ширину и с крупным названием
     (решение владельца 12.08; прежнее «не шире 300px» на телефоне отменено — оно
     оставляло вверху страницы узкую полоску). Название тарифа — главное на карте,
     цифра срока остаётся фоном: раньше «12М» кричала, а «EA PLAY» едва читалась. */
  .subscription-detail .psub-hero-img { max-width: none; aspect-ratio: 1 / 1; border-radius: 22px; }
  .psub-hero-img .websub-banner { padding: 0 22px; gap: 8px; }
  .psub-hero-img .websub-banner-name { font-size: clamp(30px, 9.5vw, 46px); }
  .psub-hero-img .websub-banner-brand { font-size: 14px; }
  .psub-hero-img .websub-banner-num { font-size: min(150px, 42cqw); opacity: 0.14; }
}

/* --- Адаптив шапки/подвала --- */
/* Мобильная шапка — две ровные строки:
   1) логотип слева, действия (профиль/корзина/Войти) справа;
   2) переключатель региона + поиск во всю оставшуюся ширину.
   margin-right:auto у логотипа съедает свободное место строки 1 → регион и поиск
   гарантированно переносятся на строку 2 (без «расходящихся» элементов). */
/* Поиск — ВСЕГДА второй строкой (кроме телефона, у него своя раскладка ниже). Ширина
   шапки ограничена контейнером (--maxw), а не экраном: сколько бы ни было пикселей у
   монитора, логотип, меню, регион и кнопки занимают те же ~1030px, и поиску в первой
   строке остаётся ~120px — поле сжималось в квадрат с одной лупой. Верхней границы у
   правила поэтому нет: на широком мониторе места ему не появляется в принципе. */
@media (min-width: 681px) {
  /* padding-top/bottom, НЕ shorthand: .site-header__inner — это одновременно .container,
     а `padding: 10px 0` обнулило бы его боковые отступы и поиск вылез бы за края. */
  .site-header__inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .search { order: 3; flex: 1 1 100%; max-width: none; }
}
/* Планшет и узкий ноутбук: тут первой строке не хватало пары десятков пикселей (940 из
   976), и иконки с «Войти» уезжали на собственную третью строку — шапка занимала три
   этажа вместо двух. Ужимаем меню и кнопки ровно на этих ширинах, шире они не нужны. */
@media (min-width: 681px) and (max-width: 1120px) {
  .site-nav > .nav-drop > .nav-link, .site-nav > .nav-link { padding-left: 7px; padding-right: 7px; font-size: 13.8px; }
  .site-nav { gap: 0; }
  .site-header__actions { gap: 2px; }
  .site-header__actions .btn { margin-left: 6px; }
  .hicon { width: 40px; height: 40px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 128px; }
  /* Вертикальный зазор строк задаём НЕ через gap, а полем самих элементов второй строки:
     между строками стоит невидимый разделитель (::after ниже), и общий row-gap считался
     бы дважды — шапка получала двойной отступ над поиском. */
  .site-header__inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 0 10px; }
  .logo { margin-right: auto; }
  .site-header__actions { order: 1; margin-left: 0; }
  .site-header__actions .btn { margin-left: 4px; padding: 10px 16px; }
  /* компактнее лого/иконки — чтобы строка 1 (лого+действия) влезала и на узких телефонах */
  .logo { font-size: 20px; }
  .hicon { width: 40px; height: 40px; }
  /* Шапка телефона — РОВНО ДВЕ строки (12.08):
       1) логотип + значки,
       2) кнопка региона (там, где регион есть) + поиск на весь остаток.
     Было: поиску задана ширина во всю строку (flex-basis 100%), поэтому он ВСЕГДА
     переносился ПОД кнопку региона, справа от неё оставалась пустая полоса в пол-шапки,
     а шапка занимала три этажа. Просто «сжать поиск» нельзя: тогда на страницах без
     региона (главная) он запрыгивал бы в первую строку и превращался в щель. Поэтому
     перенос строки задаём явно — пустым элементом во всю ширину сразу после значков;
     дальше регион и поиск сами делят вторую строку, а где региона нет, поиск занимает
     её целиком (просьба владельца: на главной поиск должен быть широким). */
  .site-header__inner::after { content: ""; flex: 1 0 100%; order: 1; height: 0; }
  .region-switch-wrap { order: 2; flex: 0 0 auto; margin-top: 10px; }
  .search { order: 3; flex: 1 1 0; min-width: 0; max-width: none; margin-top: 10px; }
  /* Кнопка региона на телефоне компактнее — освобождает место строке поиска */
  .region-switch { padding: 0 10px; gap: 6px; font-size: 14px; }
  .region-switch__ico { width: 20px; height: 20px; }
  .search { padding: 0 12px; gap: 8px; }
  .search__input { font-size: 14px; }
  /* Воздух между крупными блоками главной — чтобы секции не липли друг к другу */
  .h-sec { padding-top: 26px; padding-bottom: 34px; }
  /* Оптическая правка: над «ФЛАГМАН» кнопки hero дают свечение (box-shadow) вниз и
     зазор кажется меньше; над «ЕЩЁ»/«howto» сверху резкий край карточки без свечения —
     тот же px читается БОЛЬШЕ. Уменьшаем реальный отступ этих секций, чтобы НА ГЛАЗ
     расстояние совпало со стыком у ФЛАГМАН (владелец: важно визуально, не по цифрам). */
  #services.h-sec { padding-top: 20px; }
  /* «Как это работает» — в колонку (в ряд шаги рассыпались) */
  .h-howto { grid-template-columns: 1fr; gap: 14px; padding: 22px; }

  /* Три обещания первого экрана (моментально · часы · СБП) — ОДНОЙ строкой из трёх
     равных колонок. Было: крупные надписи в 21px переносились «полторы строки», справа
     оставалась пустая половина, и блок съедал первый экран телефона (владелец 12.08).
     Смысл не режем — уменьшаем кегль и раскладываем поровну; разделители-полоски
     показывают, что это три разных обещания, а не один абзац. */
  /* Колонки по содержимому, а не равные: «10:00–21:00 МСК» длиннее соседей, и в равной
     трети экрана эта строка обрезалась (проверено на 320–430px). */
  .h-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between;
    gap: 0; margin-top: 20px; }
  .h-stat { padding: 0 10px; }
  .h-stat:first-child { padding-left: 0; }
  .h-stat + .h-stat { border-left: 1px solid var(--line); }
  /* Главная строка — В ОДНУ строку (nowrap): «10:00–21:00 МСК» переносилось, и три
     колонки вставали разной высоты, как рваный текст. Кегль считаем от ширины экрана,
     чтобы на узких телефонах строка не обрезалась. */
  .h-stat b { font-size: clamp(11.5px, 3.45vw, 14px); white-space: nowrap; letter-spacing: -0.01em; line-height: 1.2; }
  .h-stat span { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.04em; line-height: 1.25; }
}
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .h-stat { padding: 0 7px; }
}

/* ── Корзина сайта (cart.js + /tg/cart.css) ─────────────────────────────────
   Бейдж-счётчик на иконке корзины в шапке (все страницы). Страница корзины
   переиспользует /tg/cart.css; `.cart-page` там рассчитан на нижнее меню
   мини-аппа ТГ — на сайте его нет, поэтому центрируем и убираем лишний низ. */
.cart-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--tg-cart-grad);
  color: #fff; font-size: 10px; font-weight: 900; line-height: 1;
  box-shadow: 0 2px 8px rgba(78,128,255,0.45);
}
.cart-main { padding: 24px 24px 60px; }
/* Миниатюра услуги (помощь с профилем): значок вместо обложки — товара с картинкой тут нет. */
.cart-item-cover.is-service { display: grid; place-items: center; color: var(--cyan);
  background: linear-gradient(150deg, rgba(93,231,255,0.16), rgba(78,128,255,0.10));
  border: 1px solid rgba(93,231,255,0.28); }
/* 720, а не 640: после сужения контента узкая колонка посреди страницы выглядела
   потерянной, а позиции заказа с миниатюрой и ценой в 640px жались. */
body.cart-page-body .cart-page { max-width: 720px; margin: 0 auto; padding-bottom: 0; }
/* Вид кнопки «Оформить» и галочек задаёт /tg/checkout-polish-2.css — тот же файл, что в
   мини-аппе (подключён в cart.html). Своей копии этих правил здесь больше нет (§0cc):
   она повторяла цвет кнопки и всё равно не давала правильную галочку. */
/* Товар в корзине → кнопка «Перейти в корзину», ЗОЛОТОЕ состояние 1:1 из ТГ
   (brand-checkout-fix.css .game-detail-cart.is-in-cart): золото + тёмный текст. */
.subscription-cart-button.is-in-cart {
  background: var(--tg-cart-in);
  color: #06111f;
  box-shadow: 0 18px 38px rgba(243, 213, 117, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

/* ── Живой поиск (region.js renderSearchView, вид как страница полки) ─────────── */
.search-web { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 14px; }
.search-web-bar { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; }
.search-web-bar .ic { color: var(--muted-soft); flex: 0 0 auto; }
.search-web-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font-size: 16px; }
.search-web-input::placeholder { color: var(--muted-soft); }
.search-web-regions { display: flex; gap: 6px; margin: 0; }
.search-web-status { color: var(--muted-soft); font-size: 14px; font-weight: 700; margin: 0 2px 16px; min-height: 18px; }

/* ── Избранное: кнопка на странице товара + сетка карточек в кабинете ────────────
   Кнопка одна на весь сайт (.psub-fav) — и у игры, и у подписки; отмеченное состояние
   красит её и заливает сердечко. */
.psub-fav.is-fav { color: #ff5d7a; border-color: rgba(255, 93, 122, 0.5); }
.psub-fav.is-fav svg { fill: #ff5d7a; }
/* Гостю сердечка нет (решение владельца 12.08): избранное — то, ради чего заводят
   аккаунт. Признак входа — класс на <html> (ставится до отрисовки), поэтому правило
   одно на весь сайт: и у игры, и у подписки, и у любой будущей страницы товара. */
html.auth-no .psub-fav { display: none; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 18px 14px; }
.fav-card { position: relative; }
.fav-card-link { display: block; color: inherit; }
.fav-card-cover { position: relative; width: 100%; aspect-ratio: 148 / 214; border-radius: 12px; overflow: hidden; background: rgba(8,15,30,0.6); border: 1px solid var(--panel-border); }
/* Пометка раздела на обложке (Турция / СНГ / Индия / Шеринг) — та же роль и то же место,
   что в Telegram-магазине: одна игра, отмеченная в двух регионах, даёт две записи. */
.fav-region-badge { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: rgba(10,16,32,0.72);
  border: 1px solid rgba(255,255,255,0.22); overflow: hidden; }
.fav-region-badge img { width: 20px; height: 20px; object-fit: contain; display: block; }
.fav-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-card-name { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fav-card-price { margin-top: 3px; font-size: 14px; font-weight: 900; color: #fff; }
.fav-card-remove { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(8,12,24,0.72); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.fav-card-remove:hover { background: rgba(255, 93, 122, 0.85); }

/* ── Личный кабинет (account.js) — веб-макет: контент | рейл ──────────────────── */
.account-main { padding: 24px 24px 60px; }
.account-main .crumbs { margin-bottom: 4px; }
.account-page-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 12px 0 22px; }
.acc-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
/* Гость: в кабинете только вход (избранное и историю даёт аккаунт) — колонка одна и по
   центру, форма входа выше промокода новичка. Пустой слот промокода места не занимает. */
.acc-wrap.is-guest { grid-template-columns: min(560px, 100%); justify-content: center; }
.acc-wrap.is-guest .acc-rail { order: -1; }
.acc-wrap.is-guest .acc-main:empty, .acc-wrap.is-guest #promo-welcome-slot:empty { display: none; }
.acc-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.acc-rail { display: flex; flex-direction: column; gap: 24px; }
.acc-panel { border: 1px solid var(--panel-border); border-radius: 20px; padding: 22px; background: rgba(16,22,40,0.55); }
.acc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.acc-panel-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; }
.acc-count { font-size: 13px; font-weight: 800; color: var(--cyan); background: rgba(93,231,255,0.12); border-radius: 999px; padding: 4px 10px; }
.acc-profile { text-align: center; }
.acc-avatar { width: 76px; height: 76px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #5de7ff, #4e80ff 60%, #6c5dff); box-shadow: 0 12px 30px rgba(78,128,255,0.35); }
.acc-profile-name { font-size: 20px; font-weight: 900; color: var(--text); }
.acc-profile-sub { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.acc-login-btn { width: 100%; }
.acc-login-btn:hover { filter: brightness(1.06); }
.acc-login-note { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--muted-soft); }
.acc-login-form { display: flex; flex-direction: column; gap: 10px; }
.acc-login-input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,0.14)); background: rgba(255,255,255,0.04); color: var(--text); font-size: 15px; outline: none; transition: border-color .2s; }
.acc-login-input::placeholder { color: var(--muted-soft); }
.acc-login-input:focus { border-color: #4e80ff; }
.acc-logout-btn { width: 100%; min-height: 44px; border: 1px solid var(--border, rgba(255,255,255,0.16)); border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 800; color: var(--muted); background: transparent; transition: border-color .2s, color .2s; }
.acc-logout-btn:hover { border-color: #4e80ff; color: var(--text); }
/* Кнопка входа в шапке: подпись по состоянию (класс на <html> ставится ДО отрисовки —
   убирает мигание «Войти»→«Кабинет»). По умолчанию показан «Войти». */
.js-auth-link .lbl-account { display: none; }
html.auth-yes .js-auth-link .lbl-login { display: none; }
html.auth-yes .js-auth-link .lbl-account { display: inline; }

/* Страница отзывов /reviews */
.reviews-main { padding-top: 22px; padding-bottom: 60px; }
.rev-summary { text-align: center; margin: 16px auto 28px; }
.rev-summary__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #ffcf70; margin-bottom: 10px; }
.rev-summary__score { font-size: 44px; font-weight: 900; color: var(--text); line-height: 1.1; }
.rev-summary__sub { margin: 12px auto 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--muted-soft); }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rev-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; }
.rev-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rev-ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #fff; flex: 0 0 auto; }
.rev-ava--1 { background: linear-gradient(135deg, #ff9f45, #ff6a3d); }
.rev-ava--2 { background: linear-gradient(135deg, #5de7ff, #4e80ff); }
.rev-ava--3 { background: linear-gradient(135deg, #7ee787, #3fbf6f); }
.rev-ava--4 { background: linear-gradient(135deg, #c08cff, #7b5dff); }
.rev-ava--5 { background: linear-gradient(135deg, #ff8ac0, #ff5d9e); }
.rev-name { font-weight: 800; color: var(--text); font-size: 15px; }
.rev-date { font-size: 12px; color: var(--muted-soft); margin-top: 2px; }
.rev-stars { color: #ffc24b; letter-spacing: 2px; font-size: 15px; margin-bottom: 10px; }
.rev-text { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; flex: 1 1 auto; }
.rev-item { font-size: 12.5px; color: var(--muted-soft); border-top: 1px solid var(--panel-border); padding-top: 10px; }
/* «✓ покупка подтверждена» — только у отзывов, привязанных к оплаченному заказу. У
   перенесённых из Telegram-канала заказа нет, и бейджа не будет: обещать проверку там,
   где её не было, нельзя. */
.rev-verified { display: block; margin-top: 6px; color: #7ee787; font-weight: 700; }
.rev-policy { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 640px; margin: 0 auto 26px; padding: 10px 16px; background: rgba(126, 231, 135, 0.08); border: 1px solid rgba(126, 231, 135, 0.25); border-radius: 12px; font-size: 13px; line-height: 1.4; color: var(--muted); text-align: center; }
.rev-policy__ic { color: #7ee787; font-weight: 900; }
.rev-note { text-align: center; margin: 36px auto 0; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--muted-soft); }
.rev-note a { color: var(--blue-2, #76ceff); font-weight: 700; text-decoration: none; }
.rev-note a:hover { text-decoration: underline; }
@media (max-width: 640px) { .rev-summary__score { font-size: 36px; } .rev-grid { grid-template-columns: 1fr; } }
.acc-links { display: flex; flex-direction: column; gap: 8px; }
.acc-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); color: inherit; transition: border-color .2s, background .2s; }
.acc-link:hover { border-color: var(--panel-border-hover); background: rgba(93,231,255,0.06); }
.acc-link-btn { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.acc-link-ico { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(93,231,255,0.1); color: var(--cyan); }
.acc-link-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.acc-link-title { font-size: 15px; font-weight: 700; color: var(--text); }
.acc-link-sub { font-size: 12.5px; color: var(--muted-soft); }
.acc-link-arrow { color: var(--muted-soft); font-size: 22px; flex: 0 0 auto; }
.acc-empty { text-align: center; padding: 22px 16px; }
.acc-empty-ico { font-size: 34px; margin-bottom: 8px; opacity: 0.9; }
.acc-empty-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.acc-empty p { font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 340px; margin: 0 auto; }
.acc-empty-btn { margin-top: 16px; }
@media (max-width: 900px) {
  .acc-wrap { grid-template-columns: 1fr; }
  .acc-rail { order: -1; }
}

/* ── Выпадающий поиск в шапке (search-suggest.js) ───────────────────────────── */
.search-backdrop { position: fixed; inset: 0; top: 70px; z-index: 20; background: rgba(6,8,16,0.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: min(calc(100vw - 32px), 1160px); max-height: 74vh; overflow-y: auto;
  z-index: 31; padding: 14px; border: 1px solid var(--panel-border); border-radius: 20px;
  background: linear-gradient(180deg, rgba(20,27,48,0.98), rgba(12,17,32,0.98));
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ss-all {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; cursor: pointer;
  background: var(--blue-soft); color: var(--blue-2); font-size: 15px; font-weight: 800; text-align: left;
  border: 1px solid var(--blue-line); transition: background .15s, color .15s;
}
.ss-all:hover { background: var(--blue); color: #fff; }
.ss-all-arr { font-size: 18px; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 12px; }
.ss-card { display: block; color: inherit; }
.ss-cover { width: 100%; aspect-ratio: 148 / 214; border-radius: 10px; overflow: hidden; background: rgba(8,15,30,0.6); border: 1px solid var(--panel-border); }
.ss-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-price { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 900; color: #fff; }
.ss-disc { font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(90deg,#5de7ff,#4e80ff); border-radius: 6px; padding: 2px 6px; }
.ss-name { margin-top: 3px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-card:hover .ss-name { color: var(--text); }
.ss-empty { padding: 20px 8px; text-align: center; color: var(--muted-soft); font-size: 14px; font-weight: 700; }
/* Разделы сайта в выдаче (подписки, пополнения) — строкой над товарами: их ищут словами
   («пс плюс», «стим»), которых нет в каталоге игр, и найтись они должны первыми. */
.ss-secs { display: grid; gap: 8px; margin-bottom: 18px; }
.ss-sec { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
  background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--text); transition: background .2s, border-color .2s; }
.ss-sec:hover { background: rgba(63,107,255,0.24); border-color: var(--blue); }
.ss-sec-txt { display: grid; gap: 2px; min-width: 0; }
.ss-sec-txt b { font-size: 14.5px; font-weight: 800; }
.ss-sec-txt span { font-size: 12.5px; color: var(--muted-soft); }
.ss-sec-price { margin-left: auto; font-size: 14px; font-weight: 900; color: var(--blue-2); white-space: nowrap; }
/* Метка региона на обложке — только когда ищем сразу в двух регионах (с главной):
   одна и та же игра стоит в Турции и СНГ по-разному, и покупатель выбирает по цене. */
.ss-cover { position: relative; }
.ss-reg { position: absolute; left: 6px; top: 6px; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: #fff;
  background: rgba(8,12,26,0.82); border: 1px solid rgba(255,255,255,0.18); }

/* ── Оформление на сайте: гейт входа в корзине + коды на экране результата (Этап 2) ── */
.cart-login-gate { margin-top: 16px; padding: 18px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--panel-border); }
.cart-login-title { font-size: 17px; font-weight: 800; color: var(--text); }
.cart-login-sub { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cart-login-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cart-login-form input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); color: var(--text);
  font-size: 15px; }
.cart-login-form input::placeholder { color: var(--muted-soft); }
.cart-login-note { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.cart-codes { margin: 18px auto 6px; max-width: 480px; text-align: left; padding: 18px;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-border); }
.cart-codes-head { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.cart-code-title { margin: 14px 0 6px; font-size: 14px; font-weight: 800; color: var(--muted); }
.cart-code-instr { margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ── Код + кнопка «Скопировать» (site/codes-view.js) ──
   Код — это деньги: выделять его пальцем на телефоне мучительно, а ошибка при ручном
   наборе стоит покупателю активации. Поэтому копирование — отдельным действием. */
.code-pin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); }
.code-pin-value { flex: 1 1 160px; min-width: 0; font-family: Consolas, Menlo, monospace;
  font-size: 17px; font-weight: 800; letter-spacing: .5px; color: var(--text);
  word-break: break-all; user-select: all; }
.code-copy { flex: 0 0 auto; }
.code-copy.is-done { color: #7ee787; border-color: rgba(126,231,135,0.45);
  background: rgba(126,231,135,0.10); }

/* ── Инструкция активации: обычный нумерованный список, а не эмодзи-цифры ── */
.code-guide { margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.code-guide-h { font-weight: 800; color: var(--text); }
.code-guide-steps { margin: 8px 0 0; padding-left: 20px; }
.code-guide-steps li { margin: 5px 0; }
.code-guide-tail { margin: 10px 0 0; }
.code-guide-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  color: var(--text); background: rgba(255, 196, 105, 0.10);
  border: 1px solid rgba(255, 196, 105, 0.28); }
.code-guide-warn b { color: #ffc469; }

/* ── Знак результата оплаты (рисуем сами, без эмодзи) ── */
.result-mark { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; }
.result-mark svg { width: 30px; height: 30px; }
.result-mark--ok { color: #37d67a; background: rgba(55, 214, 122, 0.12);
  border: 1px solid rgba(55, 214, 122, 0.35); }
.result-mark--bad { color: #ff6b81; background: rgba(255, 107, 129, 0.12);
  border: 1px solid rgba(255, 107, 129, 0.35); }
.result-mark--wait { color: #ffc469; background: rgba(255, 196, 105, 0.12);
  border: 1px solid rgba(255, 196, 105, 0.32); }
/* Часам нужен циферблат — рисуем окружностью вокруг стрелок. */
.result-mark--wait svg { border: 2.4px solid currentColor; border-radius: 50%;
  width: 26px; height: 26px; padding: 1px; }

/* ── История заказов в кабинете (Этап 2) ── */
.acc-orders { display: flex; flex-direction: column; gap: 12px; }
.acc-order { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2); }
.acc-order-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc-order-id { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .3px; }
.acc-order-badge { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.acc-order-ok { color: #0a2a12; background: linear-gradient(90deg,#7ef0a6,#37d67a); }
.acc-order-wait { color: #2a230a; background: linear-gradient(90deg,#ffe08a,#f7b84d); }
.acc-order-bad { color: #fff; background: rgba(255,255,255,0.12); }
.acc-order-items { margin: 8px 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.acc-order-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc-order-date { font-size: 12.5px; color: var(--muted-soft); }
.acc-order-sum { font-size: 15px; font-weight: 800; color: var(--text); }
.acc-order-codes-btn { margin-top: 12px; }
.acc-order-codes { margin-top: 12px; }

/* ——— Форма отзыва (кабинет и экран после оплаты, site/review.js) ——— */
/* Второстепенная кнопка: рядом с «Показать коды» (яркой) она не должна спорить за
   внимание — код покупателю нужен сейчас, отзыв подождёт. */
.acc-order-review-btn { margin-top: 10px; width: 100%; padding: 10px; cursor: pointer;
  border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text);
  background: transparent; border: 1px solid var(--panel-border); }
.acc-order-review-btn:hover { border-color: var(--accent); color: var(--accent); }
.rvf { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--panel-border); }
.rvf-h { font-size: 14.5px; font-weight: 800; }
/* Звёзды + подсказка в одну строку: подсказка исчезает, как только оценка поставлена. */
.rvf-rate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rvf-stars { display: flex; gap: 2px; }
.rvf-star { padding: 0 2px; font-size: 30px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--line-2);
  transition: color .15s, transform .15s; }
.rvf-star:hover { color: #ffcf70; transform: scale(1.12); }
.rvf-star.is-on { color: #ffcf70; }
.rvf-hint { font-size: 12.5px; color: var(--muted-soft); }
.rvf-name, .rvf-text { width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--text);
  background: var(--bg); border: 1px solid var(--panel-border); font: inherit; font-size: 14px; }
.rvf-text { resize: vertical; }
.rvf-gift { margin: 0; font-size: 12.5px; color: #7ee787; }
.rvf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rvf-note { font-size: 12.5px; color: var(--muted); }
/* Форма под экраном «Оплата прошла» — тот же вид, но выравнена по левому краю: экран
   результата центрирует текст, а поля ввода по центру читаются криво.
   Отделена чертой и приглушена: на этом экране главное — код и инструкция к нему,
   отзыв здесь уместен, но спорить за внимание с покупкой он не должен. */
.checkout-review { max-width: 480px; margin: 26px auto 0; padding-top: 20px;
  text-align: left; border-top: 1px solid var(--line-2); }
.checkout-review .rvf { background: transparent; border: 0; padding: 0; }
.rvf-done { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px;
  color: var(--muted); background: rgba(126, 231, 135, 0.08);
  border: 1px solid rgba(126, 231, 135, 0.25); }

/* Строки скидки/итога в корзине сайта (промокод) */
.cart-total-discount span { color: #7ef0a6; }
.cart-total-grand { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.cart-total-grand strong { font-size: 18px; }

/* ── Онлайн-чат поддержки (виджет на всех страницах, site/support-chat.js) ───────────
   Кнопка-пузырь в правом нижнем углу + панель диалога. Переписка хранится у нас на
   сервере; окно менеджера (Telegram/CRM) фронт не касается. */
.sc-root { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
/* Ловушка: атрибут hidden НЕ прячет элемент, если ему задан display (flex/grid) —
   правило класса перебивает браузерное [hidden]{display:none}. Поэтому гасим явно,
   иначе закрытая панель и форма ввода у гостя остаются на экране. */
.sc-panel[hidden], .sc-form[hidden], .sc-gate[hidden], .sc-badge[hidden] { display: none; }
.sc-bubble { position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; font-size: 24px;
  background: var(--tg-cart-grad); box-shadow: var(--tg-cart-shadow); }
.sc-bubble:hover { filter: brightness(1.06); }
.sc-root.is-open .sc-bubble { display: none; }
.sc-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: #fff; background: #e5484d; box-shadow: 0 0 0 2px var(--bg); }
.sc-panel { width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--panel-border); border-radius: 18px; background: var(--panel);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45); }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.sc-title { font-size: 15px; font-weight: 800; color: var(--text); }
.sc-sub { margin-top: 2px; font-size: 12px; color: var(--muted-soft); }
.sc-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; }
.sc-feed { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sc-msg { max-width: 82%; }
.sc-msg-user { align-self: flex-end; text-align: right; }
.sc-msg-manager { align-self: flex-start; }
.sc-bubble-text { padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); text-align: left;
  word-break: break-word; }
.sc-msg-user .sc-bubble-text { color: #06122b; background: var(--tg-cart-grad); border: 0; }
.sc-time { margin-top: 3px; font-size: 11px; color: var(--muted-soft); }
.sc-note { align-self: center; font-size: 12.5px; color: var(--muted-soft); text-align: center; }
.sc-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.sc-form textarea { flex: 1; min-width: 0; resize: none; padding: 11px 13px; border-radius: 12px;
  font: inherit; font-size: 14px; color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2); max-height: 120px; }
.sc-form textarea::placeholder { color: var(--muted-soft); }
.sc-form button { width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 16px; color: #06122b; background: var(--tg-cart-grad); box-shadow: var(--tg-cart-shadow); }
.sc-form button:disabled { opacity: .6; cursor: default; }
.sc-gate { padding: 16px; border-top: 1px solid var(--line); }
.sc-gate p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sc-gate-btn { display: inline-block; margin-top: 12px; padding: 10px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 800; text-decoration: none; color: #06122b;
  background: var(--tg-cart-grad); box-shadow: var(--tg-cart-shadow); }
@media (max-width: 560px) {
  .sc-root { right: 14px; bottom: 14px; }
  .sc-panel { height: min(70vh, 480px); }
}

/* ─── Плавающая корзина (только телефон) ────────────────────────────────────
   Рисуется, когда в корзине есть товары (cart.js → updateFab). Стоит НАД кнопкой чата
   в том же углу: два кружка рядом дрались бы за палец. На компьютере не нужна — там
   корзина в шапке всегда на виду, экран не мотается. */
.cart-fab { display: none; }
@media (max-width: 680px) {
  .cart-fab {
    position: fixed; right: 20px; bottom: 94px; z-index: 59;
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
    color: #fff; background: var(--tg-cart-grad); box-shadow: var(--tg-cart-shadow);
  }
  .cart-fab svg { width: 24px; height: 24px; }
  .cart-fab-n {
    position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    font-size: 12px; font-weight: 900; color: #fff; background: #e5484d;
    box-shadow: 0 0 0 2px var(--bg);
  }
}
@media (max-width: 560px) { .cart-fab { right: 14px; bottom: 86px; } }

/* ─── Юридические документы (/terms, /privacy) ──────────────────────────────
   Одна страница site/legal.html на оба документа; текст — из общего с Telegram
   источника (static/legal-text.js). Читаемая колонка, а не вся ширина экрана. */
.legal-main { padding-bottom: 60px; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.legal-tab { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  text-decoration: none; color: var(--muted); background: var(--panel);
  border: 1px solid var(--panel-border); }
.legal-tab:hover { border-color: var(--panel-border-hover); color: var(--text); }
.legal-tab.is-active { color: #06122b; background: var(--tg-seg-grad);
  border-color: transparent; box-shadow: var(--tg-seg-shadow); }
.legal-doc { max-width: 780px; }
.legal-doc .legal-title { font-size: 30px; font-weight: 900; color: var(--text); margin-bottom: 22px; }
.legal-doc h3 { margin: 30px 0 10px; font-size: 17px; font-weight: 800; color: var(--text); }
.legal-doc p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.legal-doc ul { margin: 0 0 12px; padding-left: 20px; }
.legal-doc li { margin-bottom: 7px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.legal-updated { max-width: 780px; margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted-soft); }
@media (max-width: 560px) {
  .legal-doc .legal-title { font-size: 24px; }
  .legal-doc p, .legal-doc li { font-size: 14.5px; }
}

/* Согласие с документами под кнопкой оплаты (тот же смысл, что в Telegram-корзине). */
.cart-legal-note { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.6;
  color: var(--muted-soft); text-align: center; }
.cart-legal-note a { color: var(--blue-2); text-decoration: underline; }

/* ===== Приветственная скидка новичку (promo-welcome.js) =====
   Один вид на все места показа: главная, корзина, кабинет. Синий акцент — наш (§дизайн),
   а не «распродажный» красный: это подарок, а не уценка. */
.promo-w { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 14px 18px; border-radius: 16px;
  border: 1px solid var(--blue-line); background: var(--blue-soft); }
.promo-w-ico { font-size: 22px; line-height: 1; }
.promo-w-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; min-width: 0; }
.promo-w-body b { font-size: 15px; font-weight: 800; color: var(--text); }
.promo-w-cond { font-size: 13px; color: var(--muted); line-height: 1.4; }
/* Сам код — моноширинный и выделен: его читают глазами и иногда переносят руками. */
.promo-w-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  font-weight: 800; letter-spacing: 0.06em; color: #fff; padding: 7px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.07); border: 1px dashed var(--blue-line); white-space: nowrap; }
.promo-w-act { flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: 11px; cursor: pointer;
  font-size: 14px; font-weight: 800; color: #0b1020; background: linear-gradient(135deg, #5de7ff, #7b8cff);
  text-decoration: none; display: inline-flex; align-items: center; }
.promo-w-act:hover { filter: brightness(1.06); }
/* В корзине баннер стоит внутри карточки формы — там свои поля, поэтому отступ снизу
   меньше, чем на странице. */
.cart-form-card .promo-w { margin-bottom: 14px; }
@media (max-width: 640px) {
  .promo-w { gap: 10px; padding: 13px 14px; }
  .promo-w-act { width: 100%; justify-content: center; }
}

/* ===== Пополнение Steam на сайте (/topups/steam) =====
   Саму страницу рисует общий модуль Telegram-магазина (/tg/steam-topup.js + steam-topup.css).
   Здесь — только различия веб-версии: страница живёт внутри .container с шапкой сайта. */
.steam-page { padding-bottom: 56px; }
.steam-page .steam-topbar { display: none; }        /* «назад» на сайте дают крошки */
/* Заголовок на сайте крупнее телефонного (в Telegram он 31px на узкий экран): здесь
   вокруг него простор широкой страницы, и мелкий заголовок терялся. */
.steam-page .steam-title { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; }
/* Пилюли с сервера — под заголовком, по центру (вся страница Steam центрирована).
   Ширина ограничена, чтобы четыре пилюли ложились двумя ровными парами, а не «три и
   одна»: в широкую строку три влезали, а четвёртая уезжала одна и выглядела обрубком. */
.steam-hero .head-badges { justify-content: center; margin: 14px auto 0; max-width: 330px; }
/* Страница Steam центрирована — крошки над ней тоже (у остальных страниц
   раздела они слева, поэтому селектор именной, а не по любому .crumbs в #topup). */
.steam-crumbs { max-width: 560px; margin: 0 auto; }
.steam-auth-note { max-width: 560px; margin: 14px auto 0; padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--blue-line); background: var(--blue-soft); color: var(--muted);
  font-size: 13.5px; line-height: 1.45; }
.steam-auth-note a { color: var(--blue-2); font-weight: 700; }

/* ——— Тексты страницы с сервера (site_content.py) ——— */
/* Блок виден, пока не отработал JS: он же и есть контент для поисковика. Дальше
   topup.js переносит эти узлы в карточку — второй раз текст нигде не пишется. */
.page-head { padding-top: 8px; }
.page-head .psub-title { margin-top: 0; }

/* Частые вопросы. Отвечают на то, что люди дописывают к запросу в поиске
   («как купить в россии», «нужен ли пароль») — и снимают страх того, кто платит. */
/* Ширину блока задаёт .container — свой max-width здесь центрировал бы вопросы,
   и левый край не совпадал бы с «Как это работает». Ограничиваем только строку текста. */
/* Нижняя линия последнего вопроса УБРАНА: сразу под ней идёт линия подвала, и две
   параллельные черты в паре пикселей друг от друга читались как ошибка вёрстки. Список
   закрывает линия подвала, а отступ до неё увеличен. */
.faq { margin: 40px auto 52px; }
.faq-item, .faq-title { max-width: 760px; }
.faq-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; margin-bottom: 18px; }
.faq-item { padding: 16px 0; border-top: 1px solid var(--line); }
/* На широком экране вопросы шли одной колонкой в левой половине, а правая пустовала —
   раскладываем в две колонки. Правило одно на весь сайт: блок вопросов везде общий. */
@media (min-width: 900px) {
  .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 52px; align-items: start; }
  .faq-title { grid-column: 1 / -1; }
  .faq-item { max-width: none; }
}
.faq-q { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.faq-a { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ——— Страница подписок (/podpiski/ps-plus, /podpiski/ea-play) ——— */
/* Карточки тарифов рисует общий модуль shelf.js — здесь только выбор региона и отступы. */
.subs-head { margin-bottom: 18px; }
/* Иконка направления в плитке раздела (там, где нет карты номинала или баннера тарифа). */
/* Направления без карты (игры, подписки): иконка того же роста, что карта,
   на цветной подложке направления — чтобы плитки в ряду не были разновысокими. */
.cdir-flag { width: 78px; height: 78px; border-radius: 20px; padding: 14px; box-sizing: content-box;
  background: linear-gradient(150deg, var(--glow), rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent); }
.cdir-from i { font-style: normal; font-size: 12px; opacity: 0.75; margin-left: 4px; }
/* Баннер тарифа внутри плитки раздела: он рассчитан на широкую карточку, здесь ужимаем
   (как уже сделано для карты номинала выше). */
.cdir-art .websub-banner { width: 178px; height: 110px; border-radius: 15px; padding: 0 14px; gap: 4px; }
.cdir-art .websub-banner-brand { font-size: 10px; }
.cdir-art .websub-banner-name { font-size: 21px; }

/* Пока идёт живой поиск по каталогу PS Store (несколько секунд) — честная строка вместо
   пустой панели. Разделы к этому моменту уже показаны. */
.ss-wait { padding: 18px 8px; text-align: center; color: var(--muted-soft); font-size: 13.5px; font-weight: 700; }
.ss-cap { margin: 0 2px 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); }

/* Предупреждение о нерабочем времени — над кнопкой оплаты, там, где человек решает.
   Заметное, но не тревожное: заказ принимается, вопрос только в часе выдачи. Цвет тот
   же, что у предупреждения о консоли (.cart-console-alert), — второго «жёлтого» в
   магазине быть не должно. */
.cart-hours-note {
  margin: 14px 2px 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 207, 107, .28);
  background: rgba(255, 207, 107, .08);
  color: #ffcf6b;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}