/* ==========================================================================
   МАГАЗИН ПЕЧАТНЫХ НАБОРОВ
   ==========================================================================
   Отдельным листом, как у игр: `frame.css` это каркас, и складывать в него
   всё подряд значит однажды не найти в нём ничего.

   ЗДЕСЬ ТОЛЬКО ТО, ЧЕГО В КАРКАСЕ НЕТ. Плитки товаров это `.art` и `.arts`,
   переключатели это `.chip`, кнопка покупки это `.btn--gold`, заголовок это
   `.mast` из набора настроек. Ни одного своего цвета, радиуса и шрифта: всё
   токенами, иначе магазин разъедется с остальным при первой же смене палитры.

   ПРЕФИКС КЛАССА ОБЩИЙ НА ВЕСЬ КАРКАС, и это не формальность: стили тут видны
   всем экранам сразу. Поэтому всё названо `shop-` или `shop__`, чтобы имя не
   встретилось с чужим.
   ========================================================================== */

/* ---------- витрина ---------- */

/* Цена «от» на плитке товара: под именем, тем же местом, что и всё вторичное. */
.shop__ot {
  display: block;
  font: 600 var(--t-label-s) var(--f-mono);
  color: var(--c-gold);
  margin-top: 2px;
}

.shop__pusto { padding: var(--s-8) 0; text-align: center; }

/*
 * СЕТКА ВИТРИНЫ СВОЯ, А НЕ КАРКАСНАЯ, и это не своеволие.
 *
 * `.arts` каркаса это жёсткие три колонки на любой ширине. Правило верное для
 * витрины игр: плиток пятнадцать, они равноправны, и три в ряд на телефоне там
 * читаются. Товару три в ряд на телефоне малы: обложка это половина решения о
 * покупке, и разглядеть её надо, а не угадать.
 *
 * Замеры витрин говорят одно и то же: на телефоне ДВЕ колонки, на широком три
 * или четыре, и больше четырёх в ряд не ставить, дальше сравнивать перестают.
 * Четыре берём потому, что каталог печатных наборов будет расти, а плотная
 * сетка помогает сравнивать; три оставляем планшету, где четыре уже тесно.
 */
.shop-setka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}

/*
 * ПЛИТКА ТОВАРА КВАДРАТНАЯ, в отличие от игровой. У игр обложки нарисованы
 * портретными, 0.8, и плитка под них. Обложки печатных наборов квадратные, и
 * портретная плитка срезала им бока. Обложка это половина решения о покупке,
 * срезать её нельзя.
 */
.shop-setka .art { aspect-ratio: 1; }
@media (min-width: 600px) {
  .shop-setka { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .shop-setka { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- страница товара ---------- */

/* Место под липкую полосу покупки. Своего отступа снизу у экранов нет: его
   даёт каркас под вкладки, и полоса встаёт поверх него. */
.shop-tovar { padding-bottom: 88px; }

/*
 * ТОВАР НА ДЕСКТОПЕ В ДВЕ КОЛОНКИ: галерея слева, решающее справа.
 *
 * Это раскладка, которую человек уже знает по любому магазину, и в ней ему не
 * приходится искать, где цена и где кнопка. Одна колонка на широком экране
 * оставляла правую половину пустой, а покупку уводила под сгиб.
 *
 * ГАЛЕРЕЯ ПРИЛИПАЕТ, пока читают описание: картинка это часть решения, и
 * терять её при прокрутке незачем. На телефоне липкости нет, там она только
 * съела бы экран.
 */
.shop-verkh { margin-bottom: var(--s-6); }

@media (min-width: 900px) {
  .shop-verkh {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
  .shop-verkh__levo { position: sticky; top: var(--s-4); }
}

/* Низ страницы в одну колонку, но не во всю ширину монитора: длинная строка
   читается плохо, и это верно и для описания товара. */
.shop-niz { max-width: 760px; }

/*
 * КАДР КВАДРАТНЫЙ, ПОТОМУ ЧТО КАРТИНКИ КВАДРАТНЫЕ: 1080 на 1080, все пятнадцать.
 * Стояло 4 к 3, и `object-fit: cover` срезал сверху и снизу по восьмой части
 * каждой. Владелец: «картинки будто не помещаются полностью в ячейку». Так и
 * было, и это не обман зрения.
 */
.shop-kadr {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-surface-high);
  cursor: zoom-in;
}
.shop-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-lenta {
  display: flex; gap: var(--s-2); margin: var(--s-2) 0 var(--s-4);
  overflow-x: auto; scrollbar-width: none;
}
.shop-lenta::-webkit-scrollbar { display: none; }
.shop-melkiy {
  width: 64px; height: 48px; flex: 0 0 auto; padding: 0;
  border: 2px solid transparent; border-radius: var(--r-sm);
  overflow: hidden; background: none; cursor: pointer; opacity: .55;
  transition: opacity .18s ease, border-color .18s ease;
}
.shop-melkiy img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-melkiy[aria-current="true"] { opacity: 1; border-color: var(--c-gold); }

.shop-otsenka {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font: 400 var(--t-body-s) var(--f-sans);
  margin-bottom: var(--s-3);
}
.shop-zvezda { color: var(--c-gold); }
.shop-zhar { display: flex; gap: 3px; align-items: center; margin-left: var(--s-2); }
.shop-zhar i {
  width: 6px; height: 6px; border-radius: 50%; display: block;
  background: var(--c-border-strong);
}
.shop-zhar i.na { background: var(--c-rose-400); }

.shop-podvodka {
  font: 400 var(--t-body-m) var(--f-sans); color: var(--c-muted);
  margin: 0 0 var(--s-5);
}

/* ---------- шаги выбора ---------- */

.shop-shag { margin-bottom: var(--s-5); }
.shop-shag__imya {
  font: 600 var(--t-label-s) var(--f-mono); letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--c-gold);
  margin: 0 0 var(--s-3);
}
.shop-melko { margin: var(--s-2) 0 0; font: 400 var(--t-body-s) var(--f-sans); }

/*
 * ВЫПАДАЮЩИЙ СПИСОК. Родной `select`, а не свой: он открывается колесом
 * системы, которое человек знает, доступен с клавиатуры и не требует от нас
 * ни списка, ни закрытия по щелчку мимо. Своего вида ему даём ровно столько,
 * чтобы он не выглядел чужим: фон, рамка и стрелка нашими токенами.
 */
.shop-vyibor {
  width: 100%;
  appearance: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-high);
  color: var(--c-text);
  font: 400 var(--t-body-m) var(--f-sans);
  padding: var(--s-3) var(--s-8) var(--s-3) var(--s-4);
  cursor: pointer;
  /* Стрелка рисунком в фоне: своего узла у select внутри нет. */
  background-image: linear-gradient(45deg, transparent 50%, var(--c-faint) 50%),
                    linear-gradient(135deg, var(--c-faint) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.shop-vyibor:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
/* Раскрытый список рисует система, и на тёмной теме он светлый: красим сами. */
.shop-vyibor option { background: var(--c-surface); color: var(--c-text); }

/*
 * НАБОР ВЫБИРАЕТСЯ КАРТОЧКОЙ, А НЕ ТОЧКОЙ В СТРОКЕ. Разница между наборами это
 * не «один против двух», а что человек получит; на карточку помещаются и цена,
 * и состав, и выгода, в строку с точкой только название.
 */
.shop-nabor {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: none; padding: var(--s-4); cursor: pointer;
  margin-bottom: var(--s-3); font: inherit; color: inherit;
  transition: border-color .18s ease, background-color .18s ease;
}
.shop-nabor[aria-pressed="true"] {
  border-color: var(--c-gold);
  background: linear-gradient(180deg, rgba(212,175,55,.07), transparent);
}
.shop-nabor__verkh { display: flex; align-items: baseline; gap: var(--s-3); }
.shop-nabor__imya { font: 600 var(--t-body-l) var(--f-sans); flex: 1; }
.shop-nabor__tsena { font: 700 var(--t-headline-s) var(--f-mono); white-space: nowrap; }
.shop-nabor__pod {
  display: block; font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted); margin-top: var(--s-1);
}
.shop-nabor__vyigoda {
  display: inline-block; margin-top: var(--s-2);
  font: 700 9px var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-gold); color: var(--c-on-gold);
  padding: 3px 8px; border-radius: 999px;
}

/* Языков десять, и горизонтальная прокрутка каркаса прячет восемь: там она
   рассчитана на пять групп игр. Язык файла это шаг покупки, он обязан быть
   виден целиком. */
.chips--perenos { flex-wrap: wrap; overflow-x: visible; }

/* ---------- обещания и характеристики ---------- */

.shop-obeshchaniya {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.shop-obeshchanie {
  padding: var(--s-3); border-radius: var(--r-md);
  background: var(--c-surface-high);
  text-align: center;
}
.shop-obeshchanie b {
  display: block; font: 600 var(--t-label-l) var(--f-sans); margin-bottom: 2px;
}
.shop-obeshchanie span { font: 400 var(--t-body-s) var(--f-sans); }

.shop-ryad {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border);
  font: 400 var(--t-body-m) var(--f-sans);
}
.shop-ryad__i { flex: 1; color: var(--c-muted); }
.shop-ryad__z { font-weight: 600; text-align: right; }

/* ---------- описание, состав, вопросы ---------- */

.shop-abzats {
  font: 400 var(--t-body-m) var(--f-sans); color: var(--c-muted);
  margin: 0 0 var(--s-3);
}
.shop-sostav { list-style: none; margin: 0; padding: 0; }
.shop-sostav li {
  position: relative; padding-left: var(--s-6); margin-bottom: var(--s-2);
  font: 400 var(--t-body-m) var(--f-sans);
}
.shop-sostav li::before {
  content: ''; position: absolute; left: 6px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold);
}

.shop-vopros { border-bottom: 1px solid var(--c-border); }
.shop-vopros summary {
  list-style: none; cursor: pointer; padding: var(--s-4) 0;
  font: 600 var(--t-body-m) var(--f-sans);
  display: flex; align-items: center; gap: var(--s-3);
}
.shop-vopros summary::-webkit-details-marker { display: none; }
.shop-vopros summary::after {
  content: ''; margin-left: auto; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid var(--c-faint); border-bottom: 2px solid var(--c-faint);
  transform: rotate(45deg); transition: transform .18s ease;
}
.shop-vopros[open] summary::after { transform: rotate(-135deg); }
.shop-vopros p {
  margin: 0 0 var(--s-4);
  font: 400 var(--t-body-m) var(--f-sans); color: var(--c-muted);
}

/* ---------- полоса покупки ---------- */

/*
 * ЦЕНА И КНОПКА ВСЕГДА НА ВИДУ, и полоса говорит, ЧТО именно куплено. На
 * длинной странице решение принимают внизу, а «Купить» без напоминания о
 * выбранном легко оказывается покупкой не того.
 *
 * СТОИТ НАД ВКЛАДКАМИ КАРКАСА, а не вместо них: снизу у телефона уже есть
 * плавающая полоса навигации, и перекрывать её нельзя, иначе из магазина будет
 * не выйти.
 */
/*
 * ПОКУПКА В ПРАВОЙ КОЛОНКЕ, НА ДЕСКТОПЕ. Кнопка видна без прокрутки, как и
 * положено: замеры говорят держать её над сгибом и с сильным контрастом.
 * На телефоне её нет вовсе, там работает липкая полоса; двух кнопок покупки на
 * одном экране быть не должно, человек начнёт гадать, чем они отличаются.
 */
.shop-kupitj { display: none; }

@media (min-width: 900px) {
  .shop-kupitj {
    display: block;
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--c-surface-high);
    margin-top: var(--s-4);
  }
  .shop-kupitj__chto {
    display: block; font: 400 var(--t-body-s) var(--f-sans); color: var(--c-muted);
    margin-bottom: 2px;
  }
  .shop-kupitj__tsena {
    display: block; font: 700 var(--t-headline-m) var(--f-mono);
    margin-bottom: var(--s-3);
  }
  .shop-kupitj .btn { width: 100%; }
}

.shop-polosa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-4);
  max-width: 1240px; margin-inline: auto;
  /* Запаса под нижнюю пилюлю больше нет: магазин записан в СТРАНИЦЫ, и пилюля
     на нём не рисуется. Оставить запас значило бы держать полосу висящей в
     воздухе над пустотой. */
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--c-bg) 62%, transparent);
  pointer-events: none;
}
.shop-polosa > * { pointer-events: auto; }
.shop-polosa__itog { flex: 1; min-width: 0; }
.shop-polosa__chto {
  display: block; font: 400 var(--t-body-s) var(--f-sans); color: var(--c-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-polosa__tsena { display: block; font: 700 var(--t-headline-s) var(--f-mono); }
.shop-polosa .btn { width: auto; flex: 0 0 auto; padding-inline: var(--s-6); }

/*
 * НА ШИРОКОМ ЭКРАНЕ ЛИПКОЙ ПОЛОСЫ НЕТ. Она нужна там, где страница длиннее
 * трёх экранов и кнопка ушла далеко вверх, то есть на телефоне. На десктопе
 * кнопка стоит в правой колонке и никуда не девается, а полоса поверх неё была
 * бы вторым предложением купить то же самое.
 */
@media (min-width: 900px) {
  .shop-polosa { display: none; }
}

/* ---------- лупа ---------- */

.shop-lupa img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
}
.shop-lupa__khod {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-3);
}
.shop-lupa__khod .btn { width: auto; padding-inline: var(--s-5); }


/* ==========================================================================
   УВЕЛИЧЕНИЕ КАРТИНКИ
   ==========================================================================
   Слой во весь экран, а не шторка. Шторка это лист снизу под текст и кнопки:
   она ограничена по высоте и оставляет страницу видимой сверху. Картинку
   смотрят иначе, во весь экран и на чёрном, и её таскают увеличенной.

   ВЫШЕ ВСЕГО, включая нашу шторку и навигацию: пока смотрят картинку, ничего
   другого на экране быть не должно.
   ========================================================================== */

.zoom {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  /* Почти сплошной. При .93 страница под слоем читалась насквозь, и картинка
     теряла края: глаз цеплялся за заголовок и цену, проступавшие сверху и снизу.
     Смотреть картинку надо на чёрном, а не поверх магазина. */
  background: rgba(0, 0, 0, .97);
  overscroll-behavior: contain;
  touch-action: none;          /* щипок наш, а не браузерный */
}
.zoom__pole {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.zoom__kadr {
  max-width: 100%; max-height: 100%;
  display: block;
  transform-origin: center center;
  transition: transform .16s ease-out;
  cursor: zoom-in;
  user-select: none; -webkit-user-drag: none;
}
/* Приближённой картинке курсор говорит, что её можно тащить, а щелчок отдалит. */
.zoom--blizko .zoom__kadr { cursor: grab; transition: none; }
.zoom--blizko .zoom__kadr:active { cursor: grabbing; }

.zoom__zakryitj,
.zoom__shag {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;      /* нижняя граница нажимаемой цели */
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #fff; cursor: pointer;
  font: 400 22px/1 var(--f-sans);
}
.zoom__zakryitj:hover,
.zoom__shag:hover { background: rgba(255, 255, 255, .18); }
.zoom__zakryitj {
  top: calc(var(--s-4) + env(safe-area-inset-top)); right: var(--s-4);
  font-size: 26px;
}
.zoom__shag--vlevo { left: var(--s-3); top: 50%; margin-top: -22px; }
.zoom__shag--vpravo { right: var(--s-3); top: 50%; margin-top: -22px; }

.zoom__schyot {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  text-align: center;
  font: 400 var(--t-body-s) var(--f-mono);
  color: rgba(255, 255, 255, .7);
}