/* ============================================================
   Product recommendations — "You May Also Love" carousel.
   Reuses the unified product-card + the generic [data-carousel]
   behaviour in global.js. Tokens only.
   ============================================================ */

/* Hidden until populated (SSR-performed or JS-injected) to avoid an empty gap */
.lh-recs { display: none; }
.lh-recs--ready { display: block; padding-block: var(--section-pad-top) var(--section-pad-bottom); border-top: 1px solid var(--border-subtle); }

/* ---- Carousel ---- */
.lh-recs__carousel { position: relative; }
.lh-recs__track {
  display: grid;
  grid-auto-flow: column;
  /* 2 cards per view on mobile (phone card spacing, tokens.css --card-gap-x);
     --lh-recs-cols per view on desktop (below). */
  grid-auto-columns: calc((100% - var(--card-gap-x)) / 2);
  gap: var(--card-gap-x);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.lh-recs__track::-webkit-scrollbar { display: none; }
.lh-recs__cell { scroll-snap-align: start; }

.lh-recs__arrow {
  position: absolute;
  top: calc(50% - var(--space-8));
  z-index: 2;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  color: var(--text-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-recs__arrow:hover:not(:disabled) { color: var(--color-primary); border-color: var(--color-primary); }
.lh-recs__arrow:disabled { opacity: 0.35; cursor: default; }
.lh-recs__arrow--prev { left: calc(-1 * var(--space-5)); }
.lh-recs__arrow--next { right: calc(-1 * var(--space-5)); }

.lh-recs__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .lh-recs__track { grid-auto-columns: calc((100% - var(--grid-gap)) / 2); gap: var(--grid-gap); }
}
@media (min-width: 1024px) {
  .lh-recs__track {
    grid-auto-columns: calc((100% - (var(--lh-recs-cols, 4) - 1) * var(--grid-gap-lg)) / var(--lh-recs-cols, 4));
    gap: var(--grid-gap-lg);
  }
  .lh-recs__arrow { display: grid; }
}