/*
 * carousel.css — base styles for the shared carousel engine (js/carousel.js).
 *
 * The track scrolls NATIVELY: the browser owns touch, so swiping is 100%
 * reliable — the JS never intercepts the finger. A 'scroller' rail free-glides
 * (scroll-snap: none) and gets an extra JS "turbo" momentum boost on top of the
 * native fling; a 'slideshow' snaps hard (scroll-snap: x mandatory) to rest on
 * exactly one slide.
 *
 * The PAGE owns card width (e.g. .carousel-card { flex-basis: 82% } to peek the
 * next card) and slide height; this file only wires the native-scroll mechanics
 * and the module's own controls (dots / arrows) in the site's monochrome tokens.
 * It restyles nothing global. Requires css/tokens.css for the vars below (each
 * has a safe fallback so the file also works standalone).
 */

/* The scroll/track container. Native horizontal scroll with a hidden scrollbar.
   scroll-behavior stays auto (never native smooth on the track) so advances go
   through scrollIntoView({behavior}) and the JS turbo boost, uncontested.
   touch-action: pan-x pan-y — the browser drives HORIZONTAL swipes on the rail
   AND lets VERTICAL drags scroll the page through it (critical for the tall hero
   slideshow: 'pan-x' alone blocked scrolling the page when the finger started on
   the photo). It disambiguates by the gesture's initial direction. */
.carousel-track {
  display: flex;
  gap: var(--carousel-gap, 16px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.carousel-track::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Snap feel per mode. A slideshow snaps hard (mandatory) so it always rests on
   exactly one slide; a scroller has NO snap (free glide) — the chosen "turbo"
   feel, where a fling coasts freely and the JS boost carries it further. */
.carousel--slideshow {
  scroll-snap-type: x mandatory;
}
.carousel--scroller {
  scroll-snap-type: none;
}

/* Slides snap to the track start (slideshow); cards free-glide (scroller, no
   snap). Width comes from the page in both cases. */
.carousel-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.carousel-card {
  scroll-snap-align: none;
  flex: 0 0 auto;
}

/* ---- dots ---------------------------------------------------------------- */
.carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill, 0);
  background: var(--line, #e6e6e6);
  cursor: pointer;
  transition:
    background 0.25s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    width 0.25s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.carousel-dot:hover {
  background: var(--sage, #141414);
}
.carousel-dot.is-active,
.carousel-dot[aria-current='true'] {
  width: 22px;
  background: var(--sage-deep, #000000);
}

/* ---- arrows -------------------------------------------------------------- */
/* Default placement: one centered row right after the track. A page that wants
   the arrows somewhere else (e.g. sharing a row with the dots) passes arrowsInto
   and this wrapper is never created. */
.carousel-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 0;
}
.carousel-arrows:empty {
  display: none;
}

/* prev · dots · next in ONE flex row, whichever order the engine appended them.
   `order` is resolved along the WRITING direction, so prev lands toward the
   track's start — physically right on this RTL site, left in LTR — matching the
   direction its chevron points and the direction it scrolls. `order` is inert
   outside a flex container, so these rules are safe wherever the controls land. */
.carousel-arrow--prev {
  order: -1;
}
.carousel-dots {
  order: 0;
}
.carousel-arrow--next {
  order: 1;
}

.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink, #141414);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e6e6);
  border-radius: var(--radius-pill, 0);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  cursor: pointer;
  transition:
    background 0.2s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    border-color 0.2s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    transform 0.2s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.carousel-arrow:hover {
  background: var(--sage-tint, #f0f0f0);
  border-color: var(--sage, #141414);
}
.carousel-arrow:active {
  transform: scale(0.94);
}
.carousel-arrow[disabled] {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}
/* The chevron itself. An SVG path is immune to bidi mirroring (unlike `‹` / `›`),
   so the direction drawn here is the direction the shopper sees on an RTL page. */
.carousel-arrow-icon {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* ---- reduced motion: kill smooth scroll + transitions ------------------- */
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    scroll-behavior: auto;
  }
  .carousel-dot,
  .carousel-arrow {
    transition: none;
  }
}