/* ============================================================
   LOLA — COLLECTION (GSAP-inspired pinned horizontal scroll)
   Progressive enhancement:
   - default  -> native horizontal scroll with snap (fast, no JS)
   - desktop  -> JS pins the section and scrubs the track (GPU)
   ============================================================ */

.collection-h { position: relative; overflow: hidden; }

/* Native horizontal scroll is the baseline (mobile / no-JS / reduced motion) */
.collection-h__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.collection-h__viewport::-webkit-scrollbar { display: none; }

/* Track: flex row that ignores the site's grid rules */
.collection-h__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 22px !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 32px !important;
}
.collection-h__track .product-card {
  flex: 0 0 auto;
  width: clamp(232px, 25vw, 342px);
  scroll-snap-align: start;
}

/* Pinned (desktop, GSAP active) */
.collection-h.is-pinned .collection-h__viewport {
  overflow: hidden;
  scroll-snap-type: none;
}
.collection-h.is-pinned .collection-h__track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Progress bar */
.collection-h__progress {
  height: 2px;
  background: var(--gray-light);
  margin: 36px 32px 0;
  overflow: hidden;
}
.collection-h__bar {
  height: 100%;
  width: 100%;
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Slightly tighter spacing when pinned */
.collection-h.is-pinned { padding-bottom: 90px; }

@media (max-width: 900px) {
  .collection-h__track { gap: 14px !important; padding: 0 16px !important; }
  .collection-h__track .product-card { width: 74vw; }
  .collection-h__progress { margin: 28px 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .collection-h.is-pinned .collection-h__track { transform: none !important; }
}