/*
 * Назначение файла: виджет рекомендаций «У нас есть все товары для бани» — страница товара 2026,
 * этап 11 (docs/product-2026/DECISIONS.md → «Виджет „У нас есть все товары для бани“»).
 *
 * Разметка — system/modules/products/views/widget.php, подгрузка — js/modules/recommend-widget.js.
 * Секция, заголовок, пилюли и слайдер — products-widget.css, tabs.css, product-slider.css эталона;
 * плитка — product-card-mini.css. Здесь — то, чего в них нет: сетка с подгрузкой, серые заготовки
 * плиток на время порции (решение заказчика 2026-10-11: страница не прыгает), кнопки перехода под
 * сеткой (2026-10-14), кнопка «Показать ещё» после ошибки запроса и поправки слайдера под монолит.
 * Подключать после product-card-mini.css.
 */

/* ---------- Сетка: 4 в ряд, на планшете 3, на телефоне 2 ----------
   Как сетка «Модификаций» (этап 8, мост): при 4 в ряд на 768 плитка выходит уже телефонной.
   Ячейки ряда одной высоты — цены и кнопки на одной линии. */
.recommend-widget__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--gap-base);
}

.recommend-widget__grid > div {
  min-width: 0;
}

@media (max-width: 1023px) {
  .recommend-widget__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .recommend-widget__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Запас на дозаполнение последнего ряда (правка заказчика 2026-10-15): обёртка с сервера скрыта, её
   клетки скрипт переносит в конец сетки и открывает столько, сколько не хватает до полного ряда.
   Не хватает запаса — плитки последнего неполного ряда скрыты (.is-trimmed, заказчик 2026-10-16) */
.recommend-widget__reserve,
.recommend-widget__grid > .recommend-widget__reserve-cell:not(.is-shown),
.recommend-widget__grid > .is-trimmed {
  display: none;
}

/* Метка «низ сетки близко» для IntersectionObserver — места не занимает */
.recommend-widget__sentinel {
  height: 1px;
  margin-top: -1px;
}

/* Плитки порции проявляются на месте заготовок, а не выскакивают (как кадр плитки каталога) */
.recommend-widget__grid > .is-arrived {
  animation: recommend-arrive 220ms var(--ease-out);
}

@keyframes recommend-arrive {
  from {
    opacity: 0;
  }
}

/* ---------- Заготовка плитки на время порции ----------
   Геометрия — маленькой плитки: рамка, поля 16 (12 на телефоне), квадрат фото, две строки названия,
   строка цены с кнопкой 32 px. Серые плашки и белая полоса слева направо за 1.8 с — как скелетон
   каталога (verstka-updated/documentation/visual-loading.md, мост «фаза 4»). */
.recommend-widget__skeleton {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  border: var(--border-base-light);
  border-radius: 10px;
  background-color: var(--color-light);
  overflow: hidden;
}

.recommend-widget__skeleton-img,
.recommend-widget__skeleton-line,
.recommend-widget__skeleton-price,
.recommend-widget__skeleton-btn {
  display: block;
  border-radius: 6px;
  background-color: #eef2f5;
}

.recommend-widget__skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
}

.recommend-widget__skeleton-line {
  height: 18px;
}

.recommend-widget__skeleton-line + .recommend-widget__skeleton-line {
  width: 70%;
  margin-top: 6px;
}

.recommend-widget__skeleton-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.recommend-widget__skeleton-price {
  width: 45%;
  height: 22px;
}

.recommend-widget__skeleton-btn {
  flex: 0 0 32px;
  height: 32px;
}

.recommend-widget__skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: recommend-shimmer 1.8s infinite ease-in-out;
}

@keyframes recommend-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 479px) {
  .recommend-widget__skeleton {
    padding: 12px;
  }
  .recommend-widget__skeleton-img {
    margin-bottom: 8px;
  }
}

/* ---------- Кнопки перехода под сеткой (правки заказчика 2026-10-14) ----------
   «Все товары категории» / «Перейти в каталог» — небольшие контурные, по центру; до последней порции
   скрыты атрибутом hidden (display: flex ниже перебил бы его, поэтому правило [hidden]). */
.recommend-widget__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.recommend-widget__links[hidden] {
  display: none;
}

/* ---------- «Показать ещё» — только после ошибки запроса ---------- */
.recommend-widget__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.recommend-widget__more .button {
  gap: 8px;
}

/* ---------- Режим «слайдер» ----------
   Монолит: .slick-slider { font-size: 0 } (style.css) — плитка наследовала бы 0. Плиток меньше,
   чем влезает: slick.css центрует ленту — ставим к левому краю (как «Дополнительные товары»). */
.recommend-widget .products-widget__slider {
  font-size: inherit;
}

.recommend-widget .products-widget__slider .slick-track {
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .recommend-widget__grid > .is-arrived {
    animation: none;
  }
  .recommend-widget__skeleton::after {
    animation: none;
    transform: none;
    opacity: 0.5;
  }
}