/* Витрина маркетплейса: шапка, фильтры, две дорожки бесконечной ленты
   и карточки товаров. Геометрия (--card-h / --card-gap / --lane-h)
   приходит из feed.js — там единственный источник правды, чтобы
   пиксельная арифметика пула и CSS не разъехались.

   Цвета витрины — переменные --shop-*, их подставляет feed.js из shops.js.
   Фирменные цвета берутся только из tokens.css (--player-1/2, --radius-*, --fs-*). */

.shop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--shop-bg);
  color: var(--shop-text);
  font-family: var(--font-brand);

  /* Локальные производные витрины. --shop-line и --shop-shadow
     пересчитывает feed.js из цвета текста магазина. */
  --shop-line: rgba(10, 10, 10, 0.14);
  --shop-shadow: rgba(10, 10, 10, 0.09);
  /* Текст на акцентной заливке. Это оформление вымышленной витрины,
     к фирменной палитре отношения не имеет. */
  --shop-on-accent: #ffffff;

  /* Радиус размытия ленты. См. блок «Размытие фона» ниже. */
  --feed-blur: 5px;
}

/* ---------- Шапка магазина (декоративная) ---------- */

.shop__header {
  flex: 0 0 auto;
  height: 104px;
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 0 var(--gap-md);
  background: var(--shop-header-bg);
  color: var(--shop-header-text);
}

.shop__brand {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex: 0 0 auto;
  min-width: 300px;
}

/* Логотипы витрин горизонтальные (пропорции примерно от 4:1 до 6:1).
   Квадратная ячейка сжимала их до нечитаемой полоски — задаём высоту,
   ширину отдаём содержимому. */
.shop__logo {
  height: 44px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
}

/* Название внутри логотипа уже нарисовано буквами. Текстовый дубликат
   показываем только если картинка не загрузилась. */
.shop__brand.has-logo .shop__name {
  display: none;
}

.shop__name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.shop__search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  height: 60px;
  padding-left: 22px;
  border-radius: var(--radius-sm);
  background: var(--shop-bg);
  color: var(--shop-text);
  overflow: hidden;
}

.shop__search-icon {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: 0.45;
}

.shop__search-icon::after {
  content: '';
  position: absolute;
  right: -9px;
  bottom: -5px;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.shop__search-text {
  flex: 1 1 auto;
  font-size: 24px;
  color: var(--shop-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop__search-btn {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 32px;
  background: var(--shop-accent);
  color: var(--shop-on-accent);
  font-size: 22px;
  font-weight: 700;
}

.shop__menu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.shop__menu-item {
  font-size: 20px;
  white-space: nowrap;
  opacity: 0.85;
}

/* ---------- Баннер ---------- */

.shop__banner {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gap-md);
  background: var(--shop-accent);
  color: var(--shop-on-accent);
}

.shop__banner-text {
  font-size: 24px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Тело: фильтры + лента ---------- */
/* 1080 − 104 (шапка) − 56 (баннер) − 40 (отступы) = 880 = --lane-h */

.shop__body {
  flex: 1 1 auto;
  display: flex;
  gap: var(--gap-md);
  padding: 20px var(--gap-md);
  min-height: 0;
}

/* ---------- Колонка фильтров (декоративная) ---------- */

/* Колонка фильтров НЕ размывается. Клиент попросил размыть только ленту
   карточек: интерфейс магазина — поиск, фильтры, шапка — должен оставаться
   резким, иначе кадр перестаёт читаться как настоящая выдача ритейлера,
   а в этом весь смысл демонстрации. */
.shop__filters {
  flex: 0 0 296px;
  width: 296px;
  padding: var(--gap-sm) 20px;
  border-radius: var(--radius-md);
  background: var(--shop-surface);
  overflow: hidden;
}

.filters__head {
  font-size: 28px;
  margin-bottom: var(--gap-sm);
}

.filters__block {
  padding: 14px 0;
  border-top: 1px solid var(--shop-line);
}

.filters__title {
  font-size: 20px;
  margin-bottom: 10px;
}

.filters__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.filters__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filters__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--shop-line);
  border-radius: 5px;
  background: var(--shop-bg);
}

.filters__item:first-child .filters__box {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
}

.filters__label {
  font-size: 19px;
  color: var(--shop-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filters__price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filters__price-field {
  flex: 1 1 0;
  padding: 8px 10px;
  border: 2px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  font-size: 19px;
  text-align: center;
}

.filters__price-dash {
  color: var(--shop-muted);
}

.filters__slider {
  position: relative;
  height: 4px;
  margin: 18px 4px 6px;
  border-radius: 2px;
  background: var(--shop-line);
}

.filters__slider::before,
.filters__slider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid var(--shop-accent);
  border-radius: 50%;
  background: var(--shop-bg);
  transform: translateY(-50%);
}

.filters__slider::before {
  left: 0;
}

.filters__slider::after {
  right: 22%;
}

/* ---------- Лента: две дорожки ---------- */

.feed {
  flex: 1 1 auto;
  display: flex;
  gap: var(--gap-md);
  min-width: 0;
}

.feed__lane {
  position: relative;
  flex: 1 1 0;
  height: var(--lane-h);
  min-width: 0;
  overflow: hidden;
  /* Дорожка не влияет на раскладку соседей и не перерисовывает их. */
  contain: layout paint style;
  --lane-accent: var(--shop-accent);
}

/* Текст на цвете игрока. Правило простое и переживает любую смену палитры:
   светлый акцент — тёмный текст, тёмный акцент — белый.
   Electric Violet тёмный, на нём белый даёт 5,57:1. Бирюзовый Sea Green очень
   светлый: белым по нему кнопка «В корзину» и плашка «Промо» просто исчезли бы
   (около 1,5:1), поэтому пишем тёмным из палитры. */
.feed__lane--p1 {
  --lane-accent: var(--player-1);
  --lane-on-accent: var(--brand-paper);
}

.feed__lane--p2 {
  --lane-accent: var(--player-2);
  --lane-on-accent: var(--brand-ink);
}

/* ---------- Размытие фона (правка клиента) ---------- */
/*
   «Заблюрить задний фон со скролом карточек товара». Во время забега глаз
   должен идти на карточки игроков, а фоновая лента — пёстрая, с ценами и
   названиями — перетягивала внимание на себя.

   Вторым заходом: «блюр сильный и на всю страницу, сделать блюр с меньшим
   процентом и только на область где располагаются карточки товаров».
   Отсюда 5px вместо 7px (разбор радиуса ниже). Вторая половина правки —
   про область — к этому моменту уже сделана: под фильтрами размытия больше
   нет, шапка и баннер под него никогда не попадали, и фильтр висит ровно
   на дорожках с товарами. Проверено дифом, а не на слово (см. ниже).

   Размытие висит на ДОРОЖКЕ ЦЕЛИКОМ (.feed__track), а не на каждой карточке:
   один фильтр = одна поверхность композитора на дорожку (две на экран),
   внутри которой карточки по-прежнему только двигаются своими transform.
   Вариант «blur на каждом слоте пула» проверен замером и по цене кадра
   оказался НЕ хуже — то есть выбор сделан не ради скорости. Причины две:
   размытая дорожка читается как одно связное поле (у поштучного размытия
   каждая карточка расплывается сама по себе и теряет силуэт), и поверхностей
   композитора остаётся 2, а не 12 — это запас для машины слабее нашей, где
   лишние поверхности стоят дороже.

   Карточка игрока лежит в .feed__player, СОСЕДНЕМ слое (z-index 3), поэтому
   остаётся резкой сама собой: фильтр до неё не достаёт. Фоновые слоты едут
   сквозным потоком и уходят ЗА промо — именно размытие и делает это
   допустимым: перекрытая карточка читается как фон, а не как обрезок.

   Радиус 5px (было 7px — клиент попросил «блюр с меньшим процентом»).
   Подобран по кадрам гонки на всех пяти витринах, а не на глаз: снимали
   раскадровку hud при 3/4/5/6/7px и сравнивали одну и ту же карточку в
   натуральную величину.
     3–4px — название (26px) читается целиком («Смарт-часы Nordis Pulse
             46 мм»), цена тоже: фон снова спорит с промо, то есть размытие
             перестаёт делать свою работу;
     5px   — название смазано в ленту, цена (36px, жирная, чёрным по белому —
             «7 890 ₽» на витрине АвтоБум) распадается в пятно и не читается,
             а картинка товара, цветная кнопка, бейдж скидки и силуэт карточки
             остаются чёткими. Витрина по-прежнему узнаётся как выдача
             маркетплейса — в этом весь смысл демонстрации: промо живёт
             в настоящей ленте ритейлера;
     6–7px — то же по смыслу, но картинка товара уже мылится; разница с 5px
             видна и ничего не даёт, а клиенту нужен более слабый блюр;
     9–10px — карточки расплываются в пятна, выдача перестаёт читаться
             как выдача.
   Итого 5px — самый слабый радиус, при котором текст фоновых карточек ещё
   не читается. Ниже начинается тот эффект, ради которого размытие и вводили.

   Радиус — единственное, что здесь менялось: слой фильтра остался тем же
   (одна поверхность на дорожку), поэтому кадр от правки может стать только
   дешевле — блюр меньшего радиуса требует меньшей выборки.

   ЧТО РАЗМЫВАЕТСЯ, А ЧТО НЕТ (проверено пиксельным дифом кадра с блюром
   и без него: меняются только два прямоугольника дорожек, x 368…1884,
   y 182…1057, за вычетом мест, где стоят карточки игроков):
     дорожки с товарами — да, 5px (--feed-blur). Дорожка и есть область
                          карточек товаров: она начинается под баннером,
                          справа от колонки фильтров, и заканчивается у
                          нижнего края экрана;
     колонка фильтров   — НЕТ. Пробовали размывать (4px), заказчик попросил
                          вернуть резкость: фильтры и поиск — часть интерфейса
                          магазина, а не лента товаров;
     шапка и баннер     — НЕТ. Шапка несёт логотип и название магазина —
                          именно они делают кадр «выдачей конкретного
                          ритейлера», а не абстрактной сеткой карточек.
                          Замылить их значит убить то, ради чего стенд и
                          показывают. Плюс шапка отделена от тела полосой HUD
                          и читается как рамка, а не как часть выдачи;
                          баннер во время забега вообще закрыт полосой HUD.
     карточки игроков   — НЕТ, они и есть главное.
   Итог: резкими остаются игровая рамка (шапка + HUD) и две промо-карточки,
   мягким — всё, что является лентой ритейлера.
*/

.feed__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: blur(var(--feed-blur));
}

/* Мягкие края дорожки, чтобы карточки не обрезались резко.
   Статичные слои, в кадре не пересчитываются. */
.feed__lane::before,
.feed__lane::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 56px;
  z-index: 2;
  pointer-events: none;
}

.feed__lane::before {
  top: 0;
  background: linear-gradient(to bottom, var(--shop-bg), transparent);
}

.feed__lane::after {
  bottom: 0;
  background: linear-gradient(to top, var(--shop-bg), transparent);
}

/* Карточка из пула: позиционируется только transform.
   Селектор специфичнее .card, иначе position:relative у карточки
   вернёт слот в общий поток.
   В кадре меняется только transform, поэтому и will-change ровно один. */
.feed__track > .feed__slot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  backface-visibility: hidden;
}

/* Карточка игрока стоит В ленте, отдельным слоем поверх трека: фоновые
   слоты проезжают под ней, а рамка и мягкая тень промо ложатся поверх
   дорожки, а не подрезаются соседним слотом. */
.feed__player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  will-change: transform;
  backface-visibility: hidden;
}

/* ---------- Карточка товара ---------- */

.card {
  position: relative;
  display: flex;
  gap: 20px;
  height: var(--card-h);
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--shop-surface);
  color: var(--shop-text);
  box-shadow: 0 2px 10px var(--shop-shadow);
  overflow: hidden;
  /* Карточка изолирована: перерисовка одной не трогает остальные. */
  contain: layout paint style;
  /* Акцент карточки: цвет дорожки, если карточка внутри дорожки. */
  --card-accent: var(--lane-accent, var(--shop-accent));
  --card-on-accent: var(--lane-on-accent, var(--shop-on-accent));
}

.card--empty {
  visibility: hidden;
}

/* --- Медиа --- */

.card__media {
  position: relative;
  flex: 0 0 auto;
  width: 176px;
  /* Высоту не фиксируем: карточка игрока съедает 10px на рамку,
     медиа тянется по кросс-оси и ничего не переполняет. */
  align-self: stretch;
  border-radius: var(--radius-sm);
  background: var(--shop-bg);
  overflow: hidden;
}

.card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
}

/* Картинка не загрузилась или ещё грузится — показываем нейтральную плашку.
   Никаких «сломанных» иконок: <img> просто прозрачен. */
.card--noimg .card__img {
  opacity: 0;
}

/* Фон плашки — фон медиа-блока: без картинки поле остаётся тем же
   светлым прямоугольником, что и с картинкой, лента не «дырявится». */
.card__placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Нейтральный «значок изображения», нарисованный целиком в CSS:
   ни одного внешнего файла, нечему сломаться. */
.card__placeholder::before {
  content: '';
  position: absolute;
  top: 28%;
  left: 22%;
  width: 56%;
  height: 44%;
  border: 4px solid var(--shop-muted);
  border-radius: 10px;
  opacity: 0.34;
}

.card__placeholder::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 32%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--shop-muted);
  opacity: 0.34;
}

.card__discount {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--shop-promo);
  color: var(--shop-on-accent);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.card__badges {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  max-width: calc(100% - 16px);
}

.card__badge {
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--badge-color, var(--shop-accent));
  color: var(--shop-on-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

/* --- Текст --- */

.card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.card__title {
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  /* Ровно две строки: высота карточки фиксирована, лента не должна «дышать». */
  height: calc(var(--fs-body) * 2.4);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--shop-muted);
}

.card__star {
  color: var(--shop-promo);
  font-size: 22px;
  line-height: 1;
}

.card__rating-value {
  font-weight: 700;
  color: var(--shop-text);
  font-size: 20px;
}

.card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.card__prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.card__price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.card__old {
  font-size: 20px;
  color: var(--shop-muted);
  text-decoration: line-through;
  white-space: nowrap;
}

/* Кнопка «В корзину» — обязательный элемент карточки. */
.card__buy {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 26px;
  border-radius: var(--radius-sm);
  background: var(--shop-accent);
  color: var(--shop-on-accent);
  font-size: 23px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- Карточка игрока: три обязательных признака --- */
/* 1) рамка акцентного цвета игрока, 2) плашка «Промо», 3) перекрашенная кнопка. */

.card__promo {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 18px 8px;
  border-bottom-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  background: var(--card-accent);
  color: var(--card-on-accent);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.card--promo {
  /* 1. Рамка акцентного цвета. */
  border: 5px solid var(--card-accent);
  background: var(--shop-bg);
  box-shadow: 0 10px 34px var(--shop-shadow);
}

.card--promo .card__promo {
  /* 2. Плашка «Промо» в углу. */
  display: block;
}

.card--promo .card__buy {
  /* 3. Перекрашенная кнопка «В корзину». */
  background: var(--card-accent);
  color: var(--card-on-accent);
}

.card--promo .card__media {
  background: var(--shop-surface);
}

.card--promo .card__title {
  /* Место под плашку «Промо». */
  padding-right: 118px;
}