/* ==========================================================================
   MIROLINE — карточка товара и сетка товаров
   ========================================================================== */

.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8) var(--grid-gap);
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
}

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

.product__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--c-surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.product__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-base) var(--ease),
              transform 400ms var(--ease);
}

/* Видно только первое фото; при активном мини-слайдере — текущее (is-current) */
.product__img:not(:first-child) { opacity: 0; }

.product__media[data-slider] .product__img { opacity: 0; }
.product__media[data-slider] .product__img.is-current { opacity: 1; }

/* Точки-индикатор мини-слайдера; тёмная подложка — чтобы читались на любом фото */
.product__dots {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .3125rem;
  padding: .3125rem .4375rem;
  border-radius: var(--radius-pill);
  background: rgb(28 24 21 / .25);
  pointer-events: none;
}

.product__dot {
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--c-bg);
  opacity: .45;
  transition: opacity var(--t-fast) var(--ease);
}

.product__dot.is-current { opacity: 1; }

@media (hover: hover) {
  .product:hover .product__img { transform: scale(1.02); }
}

/* --- Бейджи --------------------------------------------------------------- */

.badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  padding: .3125rem var(--sp-2);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--c-bg);
  color: var(--c-ink);
  border-radius: var(--radius-sm);
}

.badge--hit {
  background: var(--c-ink);
  color: var(--c-bg);
}

/* Уменьшенный бейдж — для мест, где снимок сильно меньше карточной сетки
   (строка корзины: 80 px против 300+). Характер каталожного бейджа сохранён —
   те же прописные и та же плашка, — но разрядка почти снята: на 8 px шаг
   каталога растянул бы слово на всю миниатюру. */
.badge--mini {
  padding: .125rem .25rem;
  font-size: .5rem;
  letter-spacing: .03em;
  line-height: 1.25;
  border-radius: .1875rem;
}

/* Несколько стикеров: контейнер занимает позицию одиночного бейджа,
   сами бейджи складываются в столбик. Вид одного бейджа не меняется. */
.product__badges {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}

.product__badges .badge {
  position: static;
}

/* --- Избранное ------------------------------------------------------------- */

.product__fav {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--c-ink);
  background: rgba(250, 247, 242, .88);
  border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.product__fav:hover {
  background: var(--c-bg);
  color: var(--c-accent);
}

.product__fav[aria-pressed="true"] { color: var(--c-accent); }

.product__fav[aria-pressed="true"] svg path {
  fill: currentColor;
  stroke: currentColor;
}

/* --- Текстовая часть -------------------------------------------------------- */

.product__title {
  margin: var(--sp-4) 0 var(--sp-2);
  /* семейство задаём явно: в сетках это h3, а в избранном h2 —
     иначе название набралось бы антиквой заголовков */
  font-family: var(--f-text);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  /* Место под две строки резервируется всегда. Одного line-clamp ниже мало:
     он держит верхнюю границу, а карточка с однострочным названием всё равно
     выходила на строку короче соседнего ряда (352 против 372 px на 390px). */
  min-height: 2.8em;
}

.product__title a {
  text-decoration: none;
  /* ограничение в две строки, чтобы карточки в ряду были одной высоты */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}

.price {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price--old {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.product__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}

.rating {
  color: var(--c-neutral);
  font-weight: 500;
  white-space: nowrap;
}

.rating--new {
  color: var(--c-accent);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- Расцветки ------------------------------------------------------------- */

.product__colors {
  display: flex;
  gap: .3125rem;
  margin-top: var(--sp-3);
}

.product__colors li {
  width: .6875rem;
  height: .6875rem;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgba(28, 24, 21, .16);
}

/* --- Кнопка в корзину ------------------------------------------------------- */

.product__add {
  width: 100%;
  margin-top: var(--sp-4);
}

/* На десктопе кнопка появляется по наведению, чтобы сетка оставалась спокойной.
   На тач-устройствах она видна всегда — там наведения нет. */
@media (hover: hover) and (min-width: 768px) {
  .product__add {
    opacity: 0;
    transform: translateY(.25rem);
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
  }

  .product:hover .product__add,
  .product__add:focus-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

.product__add[data-added] {
  border-color: var(--c-success);
  color: var(--c-success);
}

/* Метка кончившегося товара занимает место кнопки. В отличие от неё видна
   всегда, а не по наведению: это состояние товара, а не действие, и покупатель
   должен видеть его сразу в выдаче. */
.product__out {
  width: 100%;
  margin-top: var(--sp-4);
  color: var(--c-ink-2);
  border-color: var(--c-line);
  cursor: default;
}