/* ============================================================================
   ВИТРИНА WILDBERRIES — стили страницы

   Общий каркас (шапка, герой, футер, CTA, .btn--wb) — в css/site.css,
   токены и компоненты — в css/design-system.css. Оба подключаются раньше.
   Здесь только каталог и карточка товара в нём.
   ========================================================================= */

/* ═══ Карточка товара в каталоге ══════════════════════════════════════════
   Это НЕ системный .card: у товара есть фото на всю ширину, поэтому padding
   живёт во внутреннем .product__body, а сама карточка обрезает содержимое.
   ======================================================================== */
.catalog{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.product{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
  transition:border-color .18s ease;
}
.product:hover{border-color:var(--border-strong)}
/* Рамка 3:4 — родной формат карточек Wildberries (900×1200). Совпадение
   пропорций рамки и исходника означает, что cover ничего не режет: слайд
   встаёт впритык, без обрезанного заголовка сверху и плашек снизу.
   Меняя это значение, проверьте все карточки каталога разом. */
.product__media{
  aspect-ratio:3/4;
  background:var(--panel);
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--border);
  position:relative;
}

/* Для изображений, у которых пропорции НЕ 3:4, — вписываем целиком вместо
   обрезки. Так лежит фото прибора с прозрачным фоном (device-hero.png,
   348×1085): cover обрезал бы его до середины корпуса.
   background-origin + padding дают поля, чтобы картинка не упиралась в края. */
.product__media--fit{
  background-size:contain;
  background-repeat:no-repeat;
  background-origin:content-box;
  padding:18px;
}

/* Чип-категория поверх фото: белая заливка вместо тени — тень в системе одна */
.product__media .chip{
  position:absolute;top:14px;left:14px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);
}
.product__body{display:flex;flex-direction:column;gap:12px;padding:24px;flex:1}
.product__body .body{flex:1}
.product__stock{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--font);color:var(--accent)}
.product__stock .mark{width:8px;height:8px}
/* Товара ещё нет в продаже. Акцентный синий читается как «есть в наличии»,
   поэтому статус приглушаем — иначе метка спорит с собственным текстом. */
.product__stock--soon{color:var(--text-faint)}
.product__stock--soon .mark{background:var(--border-strong)}
.product__price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-top:2px}
/* Цена в карточке мельче системной .price (40px): та рассчитана на герой */
.product__price{font:800 26px/1 var(--font);letter-spacing:-.02em}
.product__price-old{font:600 15px var(--font);color:var(--text-faint);text-decoration:line-through}

/* Кнопки внизу карточки: растянуты на всю ширину, прижаты друг к другу */
.product__actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.product__cta{width:100%;height:52px;padding:0 20px}