/*
 * Назначение файла: маленькая плитка товара — модификатор product-card--mini.
 *
 * Страница товара 2026, этап 8.4 (DECISIONS.md → «Плитка в блоках страницы товара», заказчик
 * 2026-10-10): все блоки товаров страницы товара — «Модификации», «Дополнительные товары»,
 * «Может понадобиться», «Вы смотрели»; её же берёт этап 11. Разметка —
 * system/components/catalog/views/prod_list.php. Вид — плитка виджета эталона .simple-card
 * (verstka-updated/css/modules/products-widget.css): рамка, фото 1:1 с линией снизу, название,
 * строка «цена — кнопка-иконка 32×32».
 *
 * Плитка каталога не меняется: всё здесь — под модификатором. Подключать ПОСЛЕ product-card.css
 * (от него — основа .product-card, бейджи и описание с подсказкой) и product-slider.css (у того
 * своя .product-card карусели products-section с теми же именами элементов).
 *
 * Корзина: кнопка .addtocart в коробке .product-card__cart-box; класс in-cart (ставит addToCart()
 * в script2.js) красит её в зелёный, следующий клик ведёт в /cart. Счётчика
 * нет (заказчик, 2026-10-21).
 */

/* ---------- Плитка ---------- */
.product-card--mini {
  flex: initial;
  height: 100%;
  min-width: 0;
  padding: 16px;
  border: var(--border-base-light);
  border-radius: 10px;
  background-color: var(--color-light);
  box-shadow: none;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card--mini:hover {
    border-color: var(--color-accent-hover);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05);
  }
}

/* ---------- Фото: квадрат, целиком, линия снизу (эталон) ---------- */
.product-card--mini .product-card__media {
  position: relative;
  margin-bottom: 12px;
}

.product-card--mini .product-card__image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border-bottom: var(--border-base);
  background-color: var(--color-light);
  overflow: hidden;
}

.product-card--mini .product-card__img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* Бейджи «Акция» / «Хит» — вид плитки каталога, угол фото */
.product-card--mini .product-card__badges {
  top: 0;
  left: 0;
}

/* ---------- Название (до 3 строк — product-card.css) и описание ---------- */
.product-card--mini .product-card__title {
  flex-grow: 0;
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.product-card--mini .product-card__title a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card--mini .product-card__title a:hover {
    color: var(--color-accent);
  }
}

/* Описание — строка с многоточием и подсказка полного текста, как в плитке каталога
   (product-card.css, card-description.js) */
.product-card--mini .product-card__description-wrapper {
  margin-top: 6px;
}

/* ---------- Цена и кнопка: одна строка внизу ---------- */
/* Слабина плитки (высота ряда — по самой длинной) собирается над строкой цены — у соседей в ряду
   цены и кнопки на одной линии. Тесно (плитка в два ряда на телефоне, счётчик шире кнопки) —
   сначала старая цена уходит НАД новой (wrap-reverse: новая остаётся на линии кнопки; у цен
   основа 0 и ширина не меньше самой длинной цены), и только если не влезает и новая — кнопка
   встаёт строкой ниже, к правому краю. */
.product-card--mini .product-card__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.product-card--mini .product-card__prices {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 2px;
  line-height: var(--lh-tight);
}

.product-card--mini .product-card__price-current {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  white-space: nowrap;
}

.product-card--mini .product-card__price-old {
  font-size: var(--fs-md);
  color: var(--color-gray);
  text-decoration: line-through;
  white-space: nowrap;
}

/* ---------- Кнопка-иконка: корзина, переход на товар, «Добавить к товару» ---------- */
.product-card--mini .product-card__cart {
  flex: none;
  margin: 0 0 0 auto;
}

.product-card--mini .product-card__cart-btn {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: var(--color-accent);
  color: var(--color-light);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.product-card--mini .product-card__cart-btn img {
  display: block;
  width: 16px;
  height: 16px;
}

/* Нажатие подтверждается до того, как отработает обработчик (эталон) */
.product-card--mini .product-card__cart-btn:active {
  transform: scale(0.92);
}

@media (hover: hover) and (pointer: fine) {
  .product-card--mini .product-card__cart-btn:hover {
    background-color: var(--color-accent-hover);
  }
}

.product-card--mini .product-card__cart-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Запрос в корзину (.animation ставит addToCart()): кольцо загрузки — мост, раздел 10
   «Каталог 2026»; иконка гаснет, второй клик не уходит */
.product-card--mini .addtocart.animation {
  pointer-events: none;
}
.product-card--mini .addtocart.animation > img {
  opacity: 0;
}

/* ---------- В корзине: зелёная кнопка ---------- */
/* Счётчика у маленькой плитки нет (заказчик, 2026-10-21; было — зелёный счётчик [−] [N] [+]):
   in-cart (ставит addToCart() в script2.js) красит кнопку в зелёный «В корзине» плитки каталога,
   иконка та же (галочку в корзине заказчик отклонил, 2026-10-21). Следующий клик addToCart()
   уводит в /cart. Размер кнопки не меняется — цена слева не сдвигается. */
.product-card--mini .product-card__cart-box {
  position: relative;
  width: 32px;
  height: 32px;
}

.product-card--mini .product-card__cart-box > .product-card__cart-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.product-card--mini .product-card__cart-btn.in-cart {
  background-color: var(--badge-green);
}

@media (hover: hover) and (pointer: fine) {
  .product-card--mini .product-card__cart-btn.in-cart:hover {
    /* на 10% темнее --badge-green, как «В корзине» плитки каталога */
    background-color: #00a844;
  }
}

/* ---------- «Добавить к товару» (группы допов с галочкой, вариант Б) ---------- */
/* Квадрат тех же размеров, что кнопка корзины: «+», выбран — зелёный с «✓» (цвет «В корзине»
   плитки каталога). Вид — вариант А (заказчик, 2026-10-11, прототип из трёх: А квадрат,
   Б кнопка с текстом, В раскрытие в «✓ Добавлено»). Подпись «Добавлено» в разметке есть для
   скринридеров и вариантов с текстом, на экране скрыта (font-size: 0). Прежняя галочка движка скрыта внутри label, доступна с клавиатуры; её ловит
   controlRelatedProducts() (script2.js). */
.product-card--mini .product-card__pick {
  user-select: none;
}

.product-card--mini .product-card__pick:has(.product-card__pick-input:checked) {
  background-color: var(--badge-green);
}

@media (hover: hover) and (pointer: fine) {
  .product-card--mini .product-card__pick:has(.product-card__pick-input:checked):hover {
    /* на 10% темнее --badge-green, как «В корзине» плитки каталога */
    background-color: #00a844;
  }
}

.product-card--mini .product-card__pick:has(.product-card__pick-input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.product-card--mini .product-card__pick-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.product-card--mini .product-card__pick-add,
.product-card--mini .product-card__pick-added svg {
  display: flex;
  transition:
    opacity var(--dur-exit) var(--ease-out),
    transform var(--dur-exit) var(--ease-out);
}

/* Подпись «Добавлено» — для вариантов с текстом; в базе — только «✓» */
.product-card--mini .product-card__pick-added {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.product-card--mini .product-card__pick-added svg {
  opacity: 0;
  transform: scale(0.8);
}

.product-card--mini .product-card__pick:has(.product-card__pick-input:checked) .product-card__pick-add {
  opacity: 0;
  transform: scale(0.8);
}

.product-card--mini .product-card__pick:has(.product-card__pick-input:checked) .product-card__pick-added svg {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
}

/* ---------- Телефон: плитка в два ряда (сетка) и полторы (слайдер) ---------- */
@media (max-width: 479px) {
  .product-card--mini {
    padding: 12px;
  }
  .product-card--mini .product-card__media {
    margin-bottom: 8px;
  }
  .product-card--mini .product-card__title {
    font-size: var(--fs-lg);
  }
  .product-card--mini .product-card__prices {
    column-gap: 8px;
  }
  .product-card--mini .product-card__price-current {
    font-size: var(--fs-lg);
  }
}

/* ---------- Без движения: остаются только проявление и угасание ---------- */
@media (prefers-reduced-motion: reduce) {
  .product-card--mini .product-card__pick-add,
  .product-card--mini .product-card__pick-added svg {
    transform: none;
  }
  .product-card--mini .product-card__cart-btn:active {
    transform: none;
  }
}