/* =========================================================
   Featured products slider — auto-play marquee.
   Reversed direction vs. brand-strip: items drift rightward.
   Seamless loop trick: each card uses margin-right (not flex
   `gap`) for spacing, so every card occupies the same fixed
   "slot" of (card-width + margin). The template renders THREE
   copies of the items, the track scrolls one copy's worth per
   cycle (translate -100% / 3 → 0). Three copies (not two) are
   needed because viewports wider than one copy (~2080px) would
   expose the track's right edge with only two — the third
   copy keeps the band populated at every translate value.
   animation-fill-mode: backwards pins the track at the `from`
   keyframe before the first paint, so the band is already
   populated at t=0. No price, no buttons. Pause on hover /
   focus-within.
   ========================================================= */

/* Section spacing override — tighter than standard .mz-section */
.mz-featured-slider-section { padding-bottom: 0; }

/* Full-bleed marquee band below the section head.
   Edge fades hide the pop-in/pop-out at the viewport boundary
   and absorb the trailing margin-right on the very last card. */
.mz-slider {
  position: relative;
  overflow: hidden;
  padding: var(--s-6) 0 var(--s-9);
}
.mz-slider::before,
.mz-slider::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.mz-slider::before { left:  0; background: linear-gradient(to right, var(--paper), transparent); }
.mz-slider::after  { right: 0; background: linear-gradient(to left,  var(--paper), transparent); }

/* Track — three identical sets of cards side by side. No `gap`: the
   inter-card spacing lives on each card's margin-right so every card
   is a uniform 260px slot; the track is 3 × N × slot wide and the
   keyframe `-100% / 3` lands precisely on the second copy's start. */
.mz-slider__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
}

/* Card — reuses .mz-part skin (border, background, padding, flex column).
   Fixed width + uniform margin-right makes every card a 260px slot. */
.mz-slider__card {
  flex: 0 0 240px;
  margin-right: var(--s-5);
}

/* Marquee animation. animation-fill-mode: backwards forces the `from`
   keyframe to apply before the first paint, killing the one-frame flash
   of "natural transform" some engines show on infinite animations. */
.mz-slider--marquee .mz-slider__track {
  animation: mz-slider-marquee 38s linear infinite;
  animation-fill-mode: backwards;
  will-change: transform;
}
.mz-slider--marquee:hover               .mz-slider__track,
.mz-slider--marquee .mz-slider__track:focus-within {
  animation-play-state: paused;
}
/* User toggle — sticky pause from the visible toggle button. Takes
   precedence over the IntersectionObserver-driven `.is-offscreen` state. */
.mz-slider--marquee.is-paused .mz-slider__track {
  animation-play-state: paused;
}
/* IntersectionObserver — pause + release `will-change` when off-screen. */
.mz-slider--marquee.is-offscreen .mz-slider__track {
  animation-play-state: paused;
  will-change: auto;
}

@keyframes mz-slider-marquee {
  from { transform: translate3d(calc(-100% / 3), 0, 0); }
  to   { transform: translate3d(0,              0, 0); }
}

/* Reduced motion — kill animation, fall back to static overflow scroll */
@media (prefers-reduced-motion: reduce) {
  .mz-slider--marquee .mz-slider__track { animation: none; }
  .mz-slider {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .mz-slider::before,
  .mz-slider::after { width: 32px; }
  /* No animation to pause — hide the toggle button entirely. */
  .mz-marquee-toggle { display: none; }
}

/* Narrow screens — slightly narrower cards. The slot ratio stays
   uniform so -50% remains the exact second-copy offset. */
@media (max-width: 680px) {
  .mz-slider__card { flex-basis: 200px; }
  .mz-slider--marquee .mz-slider__track { animation-duration: 30s; }
}