/* css/redesign-game-product.css
   Фаза 2 редизайна (docs/REDESIGN_PLAN.md): страница игры (список товаров,
   инлайн-разворачивание вариантов) и страница товара, под Graphite/Gold.
   Переопределения через --rd-* токены поверх css/base.css — сама разметка
   не переписана, только новые визуальные классы (см.
   js/shared/navigation.js toggleInlineVariants, js/core/productPage.js). */

#gamePage,
#productDetailPage {
  font-family: var(--rd-font-family);
}
/* Заголовки экранов — display-роль (--rd-font-display, Manrope):
   крупный редкий текст, ради контраста с Inter в остальном интерфейсе.
   balance не даёт длинному названию игры повиснуть одним словом на
   второй строке. */
#gamePage #gameTitle,
#productDetailPage .product-detail-title {
  color: var(--rd-text);
  font-family: var(--rd-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: var(--rd-leading-tight);
  text-wrap: balance;
}

/* ===== Страница игры: карточки товаров =====
   Фото на всю ширину карточки (без внутренних полей), текст и кнопка —
   тоже на всю ширину, слева выровнены; padding переехал с .product-card
   на текстовый блок, т.к. фото должно упираться в края карточки. */
#gamePage .product-card {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
  position: relative;
  padding: 0;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#gamePage .product-card:hover {
  border-color: var(--rd-border-gold);
}
#gamePage .product-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0;
}
#gamePage .product-card-img {
  border-radius: 0;
  /* Тонкая светлая обводка по краю фото: картинка упирается в края карточки
     без единой границы, и верх карточки визуально "отваливался" от тёмной
     панели. Чисто белый с низкой альфой, не тонированный нейтральный —
     тонированный подхватывает цвет подложки и читается как грязь по кромке. */
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
}
#gamePage .product-name {
  color: var(--rd-text);
  padding: 0 16px;
  margin-top: 14px;
}
#gamePage .product-price {
  color: var(--rd-gold);
  padding: 0 16px;
  /* margin-top:auto перенесён СЮДА с кнопки: раньше к низу карточки
     прижималась только кнопка, а цена шла сразу за названием — и при названии
     в две строки цена в соседних карточках одного ряда стояла на разной
     высоте (замер: y=509 против y=533). Теперь свободное место уходит над
     ценой, и блок "цена + кнопка" целиком прижат к низу. */
  margin-top: auto;
  /* Цифры цены меняются на месте (выбор варианта, пересчёт скидки) —
     пропорциональные цифры при этом дёргали ширину строки. */
  font-variant-numeric: tabular-nums;
}
#gamePage .product-price .price-muted {
  color: var(--text-secondary);
  font-weight: 400;
}
#gamePage .product-card .btn {
  background: var(--rd-gold);
  color: var(--rd-on-gold);
  border-radius: 8px;
  width: calc(100% - 32px);
  /* Прижимает к низу карточки (card — flex-column, см. #gamePage
     .product-card выше) уже margin-top:auto на #gamePage .product-price выше:
     блок "цена + кнопка" едет к низу целиком. Здесь margin-top должен быть 0 —
     два auto по вертикали поделили бы свободное место между собой, и цена с
     кнопкой снова разъехались бы. */
  margin: 0 16px 16px;
  padding: 8px 25px;
}
#gamePage .product-card .btn:hover:not(:disabled) {
  background: oklch(0.82 0.1 85);
}
/* Товар без заданной цены ("Недоступен", см. js/shared/navigation.js). Правило
   .btn:disabled из css/base.css сюда не долетает — у селектора выше выше
   специфичность, поэтому неактивная кнопка оставалась полноценно золотой. */
#gamePage .product-card .btn:disabled {
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Инлайн-разворачивание вариантов — не модалка (см. toggleInlineVariants).
   Панель вынута из потока и наложена на низ самой карточки: раньше она
   вставлялась обычным блоком и растягивала карточку, а вместе с ней и весь
   ряд флекс-сетки — кнопки трёх соседних карточек, которых пользователь не
   трогал, уезжали вниз на ~94px, и следующий клик попадал мимо. Родитель
   .product-card уже position:relative + overflow:hidden, поэтому панель
   ограничена карточкой и ничего не перекрывает снаружи. */
#gamePage .inline-variants {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Панель накрывает карточку целиком, а не только её низ: при выравнивании
     по нижнему краю её верхняя граница вставала посреди строки названия
     товара и срезала её пополам — выглядело как баг вёрстки. Целиком —
     карточка честно переключается в режим "выбери комплект". */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  overflow-y: auto;
  padding: 16px;
  background: var(--rd-panel);
  animation: heroEnter 0.2s ease backwards;
}
/* Кнопка "Добавить" — тоже .btn внутри .product-card, поэтому получала
   `margin: auto 16px 16px` (то самое margin-top:auto, которым кнопки карточек
   прижимаются к низу) и распирала панель на всю её высоту. Внутри панели
   прижимать нечего — сбрасываем. */
#gamePage .inline-variants .btn {
  margin: 0;
  width: 100%;
}
#gamePage .inline-variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
#gamePage .inline-variant-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--rd-panel-header);
  border: 1.5px solid var(--rd-border);
  color: var(--rd-text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
#gamePage .inline-variant-tile:hover {
  border-color: var(--rd-gold);
  transform: translateY(-2px);
}
#gamePage .inline-variant-name {
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
}
#gamePage .inline-variant-price {
  font-size: 0.85em;
  font-weight: 800;
  color: var(--rd-gold);
}
/* Обёртка под золотую змейку (см. css/redesign-motion.css .rd-snake) —
   кольцо рисуется на самой обёртке, поэтому у select больше нет своего
   border (задваивало бы обводку), только внутренний radius чуть меньше
   обёртки, чтобы кольцо не срезалось по углам. */
#gamePage .inline-variant-select-wrap {
  border-radius: 10px;
  padding: 2px;
  margin-bottom: 8px;
}
#gamePage .inline-variant-select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  /* appearance:auto (нативный вид select) рисует поле с собственными
     краями поверх системной темы — не совпадает с border-radius обёртки,
     из-за чего золотое кольцо визуально "не совпадало" с самим полем. */
  appearance: none;
  -webkit-appearance: none;
  /* Ручная стрелка вместо убранной нативной (appearance:none её тоже
     скрывает) — тот же line-стиль, что и остальные SVG-иконки редизайна. */
  background: var(--rd-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right: 32px;
  color: var(--rd-text);
  border: none;
  display: block;
}
#gamePage .inline-variant-add {
  width: 100%;
  background: var(--rd-gold);
  color: var(--rd-on-gold);
  border-radius: 8px;
}
/* Акцент на кнопке "Добавить" сразу после раскрытия выбора комплекта
   (см. toggleInlineVariants) — та же змейка-пульс, что и у cartWidget
   (см. .rd-cart-pulse, css/redesign-motion.css), чтобы взгляд сразу
   попадал на следующий шаг, а не терялся в раскрывшейся панели. */
#gamePage .inline-variant-add.rd-cart-pulse {
  animation: rd-cart-pulse 0.9s ease-out;
}

/* ===== Страница товара ===== */
#productDetailPage .product-detail {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
}
#productDetailPage .product-detail-image > div,
#productDetailPage .product-detail-image {
  border-radius: var(--rd-radius-card);
}
/* Крупная цена — единственное место карточки товара, где display-роль
   оправдана размером. tabular-nums обязателен: значение пересчитывается
   на месте при выборе варианта/скидки, и пропорциональные цифры дёргали
   бы ширину строки на каждом клике. */
#productDetailPage .product-price-large {
  color: var(--rd-gold);
  font-family: var(--rd-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* Кто продавец по конкретному предложению — требование раскрытия для сделок
   Сервиса P2P (docs/legal/oferta.html п. 3.6): покупатель должен видеть до
   старта сделки, что стороной договора является другой пользователь, а не
   магазин. Один класс на карточку в каталоге и на страницу товара. */
.product-card .product-seller-note,
#productDetailPage .product-seller-note {
  color: var(--rd-text-muted);
  font-size: 0.78em;
  line-height: 1.4;
  margin: 2px 0 6px;
}

/* Значок "продавец верифицирован" — см. js/profile/p2p/verifiedBadge.js */
.p2p-verified-seller-badge {
  display: inline-block;
  margin-left: 6px;
  color: var(--rd-status-done, #00b894);
  font-weight: 600;
}

#productDetailPage .product-detail-description {
  color: var(--rd-text-muted);
  font-size: 0.92em;
  line-height: 1.5;
  white-space: pre-line;
  margin: 4px 0 4px;
}

/* Отображение вариантов "все комплекты сразу" (product.variantDisplay ===
   'list') — сетка плиток вместо списка обычных radio. Радио визуально
   спрятан (не display:none — иначе теряется фокус с клавиатуры и клик по
   плитке не переключает выбор через связанный label), сама плитка —
   <label>, клик по ней нативно переключает input[type=radio]. */
#productDetailPage .variant-tile-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}
#productDetailPage .variant-tile-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#productDetailPage .variant-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--rd-border);
  background: var(--rd-panel-header);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
#productDetailPage .variant-tile:hover {
  border-color: var(--rd-border-gold);
}
#productDetailPage .variant-tile-name {
  font-weight: 600;
  color: var(--rd-text);
  font-size: 0.95em;
}
#productDetailPage .variant-tile-price {
  color: var(--rd-text-muted);
  font-size: 0.85em;
}
/* Выбранная плитка — "золотая змейка" (.rd-snake из redesign-motion.css,
   уже общий мотив для важных CTA/полей в редизайне) вместо статичной
   рамки. Кольцо у .rd-snake всегда присутствует и анимируется (фаза
   синхронизирована через syncSnakesIn(detailPage) ниже по файлу), но цвета
   градиента по умолчанию прозрачные — им становится золото, только когда
   связанный радио выбран, иначе все невыбранные плитки светились бы. */
#productDetailPage .variant-tile.rd-snake {
  --rd-snake-c1: transparent;
  --rd-snake-c2: transparent;
}
#productDetailPage .variant-tile-input:checked + .variant-tile.rd-snake {
  --rd-snake-c1: oklch(0.78 0.1 85 / 0.15);
  --rd-snake-c2: oklch(0.78 0.1 85);
}
#productDetailPage .variant-tile-input:checked + .variant-tile {
  border-color: transparent;
  background: oklch(0.3 0.05 85 / 0.15);
  box-shadow: 0 0 16px oklch(0.78 0.1 85 / 0.35);
}
#productDetailPage .variant-tile-input:checked + .variant-tile .variant-tile-name,
#productDetailPage .variant-tile-input:checked + .variant-tile .variant-tile-price {
  color: var(--rd-gold);
}
#productDetailPage .variant-tile-input:focus-visible + .variant-tile {
  outline: 2px solid var(--rd-gold);
  outline-offset: 2px;
}
#productDetailPage .product-buy-panel .btn {
  background: var(--rd-gold);
  color: var(--rd-on-gold);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#productDetailPage .product-buy-panel .btn .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#productDetailPage .product-buy-panel .btn:hover {
  background: oklch(0.82 0.1 85);
}
/* appearance:auto (нативный вид select) рисует собственную рамку поверх
   нашего rd-snake-redwhite кольца — не совпадает с border-radius обёртки,
   визуально "рассинхронизировано". Тот же фикс, что и у
   .inline-variant-select (css/redesign-game-product.css выше). */
#productDetailPage .rd-variant-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 32px 10px 12px;
  border: none;
  border-radius: 8px;
  background: var(--rd-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--rd-text);
}
/* Без max-width: строка короткая (одно предложение) и должна вставать по
   ширине панели — заодно совпадая по левому и правому краю с плашкой
   ограничения над ней. Ограничение в 460px осталось от прежнего длинного
   текста в два предложения и ломало короткий пополам при свободном месте. */
#productDetailPage .product-delivery-disclaimer {
  margin-top: 16px;
  font-size: 0.85em;
  line-height: 1.6;
  color: var(--rd-text-muted);
}
#productDetailPage .product-info-section {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
}
#productDetailPage .product-info-section h3 {
  color: var(--rd-text);
}

/* Модалка подтверждения начала P2P-сделки (js/core/productPage.js,
   confirmP2PDealStart) — обычная .rd-modal, тут только список пунктов. */
.p2p-deal-notice {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--rd-text-muted);
  font-size: 0.88em;
  line-height: 1.5;
}
.p2p-deal-notice li::marker {
  color: var(--rd-gold);
}

/* ===== Узкий экран =====
   .grid из css/base.css ниже 400px схлопывается в одну колонку — на типовом
   телефоне (360 CSS-px) карточка товара занимала весь экран целиком: квадратное
   фото на всю ширину плюс название, цена и кнопка, то есть один товар на
   пролистывание. Для списка игр на главной это уместно (карточка = крупная
   афиша), для списка комплектов внутри игры — нет: сравнить цены соседних
   комплектов невозможно, не листая. Возвращаем две колонки и поджимаем
   внутренние поля, иначе "В корзину" не помещается в строку. */
@media (max-width: 400px) {
  #gamePage #productsGrid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  #gamePage .product-name,
  #gamePage .product-price {
    padding: 0 12px;
  }
  #gamePage .product-card .btn {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 8px 10px;
  }
}

/* Заголовки экранов на узком экране: 32px названия игры съедали две строки
   первого экрана до того, как покажется хоть один товар, а название товара в
   24px разъезжалось на три строки и отодвигало цену с кнопкой за сгиб.
   Названия у нас длинные («Артефакт «Молот Бога грома» (Еженедельная
   покупка)»), поэтому размер тут решает не косметику, а то, видно ли цену. */
@media (max-width: 600px) {
  #gamePage #gameTitle {
    font-size: var(--rd-text-xl);
  }
  #productDetailPage .product-detail-title {
    font-size: var(--rd-text-lg);
    margin-bottom: 12px;
  }
}