/* Карточка товара. Figma: Card prewiew 611:1853 (334×477).
   Общий блок для главной (Screen 2/pc 611:3866) и страницы каталога (Catalog/pc 611:3961) —
   под MODX это один чанк товара. */

/* --- Карточка товара (Card prewiew 611:1853) --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 334px;
  min-height: 477px;
  padding-bottom: 15px; /* 477 − (360 + 18 + 24 + 8 + 19 + 14 + 19): базовый нижний отступ */
  cursor: pointer; /* клик по карточке ведёт на товар, не только по названию */
  border-radius: var(--r-card);
  overflow: hidden;
}

/* `display: flex` в правиле выше сильнее презентационного `display: none`, который
   браузер даёт атрибуту `hidden`. Без этой строки фильтр каталога расставлял
   `hidden`, а сетка продолжала показывать все 30 карточек. */
.card[hidden] {
  display: none;
}

.card__media {
  position: relative;
  width: 334px;
  height: 360px;
  border-radius: var(--r-card);
  background: var(--white);
  overflow: hidden;
  flex-shrink: 0;
}

/* Клиентские фото — полный кадр студии. Прежний кроп из Figma (w 157% / left −31%)
   был под макетный ассет и срезал крышку флакона и верх спрея. Селектор `>`
   обязателен: сердце лежит в том же `.card__media`, без него раздувается. */
.card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Кнопка «в избранное» (.heart-card в css/ui-kit.css): left 266, top 30 */
.card__like {
  left: 266px;
  top: 30px;
}

/* Название: в потоке под фото, зазор 378 − 360 = 18px, Rubik Bold 20px, uppercase, по центру */
.card__title {
  margin: 18px 0 0;
  width: 100%;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--black);
}

/* Дозировка и цена столбиком: у клиентских товаров описание вида
   «Спрей назальный, 10+10 mg, 15 ml, 1 шт.» с ценой требует 272px при 251px карточки,
   и в один ряд они не встают. Раньше строка держалась `white-space: nowrap`, а
   `overflow: hidden` карточки срезал её с обеих сторон. Отступ 12px, а не 16px:
   при 16px самое длинное описание рвалось на две строки. */
.card__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}

.card__dose,
.card__price {
  margin: 0;
  font-size: 16px;
  text-align: center;
}

.card__price {
  white-space: nowrap;
}

/* «Есть в наличии»: зазор от ряда дозировки/цены 443 − 429 = 14px, центрировано по ширине
   содержимого. `margin-top: auto` держит подпись у нижнего края: описание в две строки
   иначе опускало её ниже, чем у соседей по ряду. */
.card__stock {
  margin: auto auto 0;
  padding-top: 14px;
  width: fit-content;
  font-size: 16px;
  white-space: nowrap;
  opacity: 0.5;
}
/* Название — ссылка на страницу товара. Цвет и начертание задаёт .card__title,
   ссылка их наследует, поэтому подчёркивание снимается только при наведении. */
.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link:hover,
.card__link:focus-visible {
  color: var(--brand);
}

/* Наведение на карточку (Figma Card prewiew hov 611:1862): поверх фото ложится
   размывающая вуаль, из-под неё выезжает кнопка «Добавить в корзину». Вуаль
   закрывает фото ниже сердечка: left 0, top 83, 334×277. */
.card__veil {
  position: absolute;
  left: 0;
  top: 83px;
  width: 100%;
  height: 277px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Кнопка (611:1868): left 81, top 271, высота 44, ширина по содержимому */
.card__add {
  position: absolute;
  left: 81px;
  top: 271px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--brand-20);
  backdrop-filter: blur(5px);
  font-family: inherit;
  font-size: 14px;
  color: var(--brand);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.card:hover .card__veil,
.card:focus-within .card__veil,
.card:hover .card__add,
.card:focus-within .card__add {
  opacity: 1;
}

.card:hover .card__add,
.card:focus-within .card__add {
  pointer-events: auto;
}

.card__add:active {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .card__veil,
  .card__add {
    transition: none;
  }
}

@media (max-width: 1199px) {
  /* Тизер на главной: в mb-макете из десяти карточек видны первые четыре, остальное
     открывает кнопка «Показать все товары».
     Правило привязано к .catalog__grid — глобальный вариант скрывал в каталоге
     26 товаров из 30 и требовал обратного display: block в каждой полной сетке.

     Считаем только видимые карточки. `nth-of-type` считал по позиции в разметке и не
     видел фильтра табов: капсулы стоят на местах 3, 7 и 10, поэтому при выборе
     «Капсулы» две из трёх оставались за правилом и в сетке висела одна карточка.
     Тот же приём, что у центровки хвоста в catalog.css. */
  .catalog__grid > .card:nth-child(n + 5 of .card:not([hidden])) {
    display: none;
  }
}