/* ==========================================================================
   Steam-Discount — theme.css: то, чего не было в статичном макете и что появилось в теме.
   Стили макета (tokens, base, components, page-*.css) лежат рядом без изменений.
   Только переменные из tokens.css; медиазапросы — min-width 768 и 1200.
   ========================================================================== */

/* Столбец отбора в подборке: в макете выделялась только комиссия, в теме акцент бывает на оплате, лимитах и сроке */
.sg-row__pay.is-accent, .sg-row__pm.is-accent, .sg-row__lim.is-accent { box-shadow: inset 4px 0 0 0 var(--sg-accent); }
.sg-row > td.sg-row__pm.is-accent, .sg-row > td.sg-row__lim.is-accent { padding-left: 12px; }

/* Разделы игр и кошельков: вместо комиссии и суммы — «что пополняет» и «как зачисляют» */
.sg-table--games .sg-row__com, .sg-table--games .sg-row__pay { font-size: var(--sg-ui-size); line-height: 22px; }
.sg-table--games .sg-row__com .sg-slot--more { margin-top: 4px; }

/* Указатель обзоров и 404: цифры под описанием сервиса */
.sg-cat__tools { display: grid; gap: var(--sg-space-16); }
.sg-cat__tools > * { min-width: 0; }
.sg-cat__nums { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--sg-ink); }
.sg-page-catalog .sg-rating__found { margin-top: var(--sg-space-16); }
.sg-review time { color: var(--sg-quiet); }
.sg-review .sg-card__id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* Инструменты */
.sg-tool__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--sg-space-12); }
.sg-tool__copied { color: var(--sg-accent); font-size: var(--sg-small-size); line-height: var(--sg-small-lh); }
.sg-tool__q { margin-top: var(--sg-space-16); }
.sg-page-tool .sg-hero .sg-rating { margin-top: var(--sg-space-20); }
.sg-page-tool .sg-hero .sg-section__foot { margin-top: var(--sg-space-16); }

/* Конструктор сравнения: от двух до четырёх столбцов */
.sg-build__picks { display: grid; gap: var(--sg-space-12); padding: var(--sg-pad); }
.sg-build__picks > * { min-width: 0; }
.sg-build__out { overflow-x: auto; }
.sg-vs--n3 { min-width: 560px; }
.sg-vs--n4 { min-width: 720px; }
.sg-vs--n3 .sg-vs__head, .sg-vs--n3 .sg-vs__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-vs--n4 .sg-vs__head, .sg-vs--n4 .sg-vs__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-vs__col { min-width: 0; display: grid; gap: 4px; align-content: start; justify-items: start; }
.sg-vs__col.is-best { color: var(--sg-ink); }
.sg-build__act { display: flex; flex-wrap: wrap; gap: 8px; }

/* Страница без таблицы рейтинга: панель сравнения не нужна, отступ под неё не оставляем */
.sg-404 .sg-lead { color: var(--sg-muted); }
.sg-404__code { padding: 8px 12px; }

/* Приёмка 09.10.2026. Обзор, ширина 320: кнопка «На сайт <длинное название>» не помещалась в строку и раздвигала страницу */
.sg-co-hero__act, .sg-co-cta { grid-template-columns: minmax(0, 1fr); }
.sg-co-hero__act .sg-btn, .sg-co-cta .sg-btn { white-space: normal; text-align: center; padding-block: 7px; }
.sg-co-hero__act .sg-btn--primary, .sg-co-cta .sg-btn--primary { padding-block: 6px 8px; }

@media (min-width: 768px) {
  /* Калькулятор и подбор: панель раскрыта (is-open) ради телефона; на широком экране поля региона и способа оплаты
     встают в общую сетку, а не столбиком в одной ячейке */
  .sg-calc__more.is-open .sg-calc__more-in { display: contents; }
  .sg-calc--nomode .sg-field-wrap { grid-column: span 2; }
  .sg-co-hero__act { grid-template-columns: auto auto; }
  .sg-co-cta { grid-template-columns: minmax(0, 1fr) auto; }
  .sg-co-hero__act .sg-btn, .sg-co-cta .sg-btn { white-space: nowrap; padding-block: 0; }
  .sg-co-hero__act .sg-btn--primary, .sg-co-cta .sg-btn--primary { padding-block: 0 2px; }
  .sg-cat__tools { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: end; }
  .sg-build__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sg-pad-md); }
  .sg-vs--n3 .sg-vs__head, .sg-vs--n3 .sg-vs__row { grid-template-columns: 200px repeat(3, minmax(0, 1fr)); }
  .sg-vs--n4 .sg-vs__head, .sg-vs--n4 .sg-vs__row { grid-template-columns: 200px repeat(4, minmax(0, 1fr)); }
  .sg-vs--n4 { min-width: 900px; }
}

@media (min-width: 1200px) {
  /* Подбор: переключателя «Что считаем» нет — четыре столбца вместо пяти */
  .sg-calc--nomode { grid-template-columns: 300px 236px minmax(168px, 1fr) minmax(168px, 1fr); }
  .sg-calc--nomode .sg-field-wrap { grid-column: auto; }
  .sg-build__picks { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--sg-pad-lg); }
  .sg-row > td.sg-row__pay.is-accent, .sg-row > td.sg-row__pm.is-accent, .sg-row > td.sg-row__lim.is-accent { background: var(--sg-surface); box-shadow: none; }
  .sg-vs--n3 .sg-vs__head, .sg-vs--n3 .sg-vs__row { grid-template-columns: 260px repeat(3, minmax(0, 1fr)); }
  .sg-vs--n4 .sg-vs__head, .sg-vs--n4 .sg-vs__row { grid-template-columns: 220px repeat(4, minmax(0, 1fr)); }
}

/* Название «STEAM-DISCOUNT» длиннее рабочего из макета: на узких экранах (320–374) шапка не помещалась на 9 px. */
@media (max-width: 374px) {
  .sg-header__in { gap: var(--sg-space-8); }
  .sg-header .sg-brand__name { font-size: 11px; }
}

/* ---- Вёрстка ПК и телефон, 14.10.2026 ---- */
/* Закрытый ответ FAQ убираем из раскладки явно: Chrome отдаёт ему старую геометрию поверх соседних вопросов. */
.sg-faq__item:not([open]) > .sg-faq__a { display: none; }

/* Сравнение без расчёта (обе стороны не называют комиссию): формы нет — два результата на всю ширину, без пустой половины. */
.sg-paircalc:not(:has(.sg-paircalc__form)) { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 767px) {
  /* Подборки раздела и «В каких подборках»: цифры справа съедали строку — название сжималось до 55 px и шло по слову в столбик (360–430).
     На телефоне цифры уходят второй строкой под название. */
  .sg-links__row--s:has(.sg-links__n) { grid-template-columns: 32px minmax(0, 1fr) 16px; grid-template-areas: "ico body go" "ico n go"; row-gap: 2px; }
  .sg-links__row--s:has(.sg-links__n) .sg-links__ico { align-self: start; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Калькулятор раздела (768–1023): итог в узкой третьей колонке давал блок в 6 строк и пустоту над полями — итог переносим строкой ниже. */
  .sg-calc--row { grid-template-columns: 240px minmax(0, 1fr); }
  .sg-calc--row .sg-calc__result { grid-column: 1 / -1; }
}