/* Final homepage product-matrix poster rules.
   The series posters are finished visual assets, so the browser must never
   crop, stretch, scale-hover, or mask them at any viewport size. */
#products #productSeriesTrack.carousel-track {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(20px, 2.2vw, 48px) !important;
  padding: 0 clamp(16px, 4vw, 88px) 36px !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-padding-inline: clamp(16px, 4vw, 88px) !important;
  background: #ffffff !important;
}

#products #productSeriesTrack .product-hero-card.series-card,
#products #productSeriesTrack .product-hero-card.series-card.carousel-card,
#products #productSeriesTrack .product-hero-card.series-card.product {
  flex: 0 0 clamp(360px, 22vw, 620px) !important;
  width: clamp(360px, 22vw, 620px) !important;
  min-width: clamp(360px, 22vw, 620px) !important;
  max-width: min(620px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  contain: none !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  scroll-snap-align: start !important;
}

#products #productSeriesTrack .product-hero-card.series-card::before,
#products #productSeriesTrack .product-hero-card.series-card::after,
#products #productSeriesTrack .product-hero-logo,
#products #productSeriesTrack .product-hero-copy {
  display: none !important;
  content: none !important;
}

#products #productSeriesTrack .product-hero-card.series-card > img:not(.product-hero-logo) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
}

#products #productSeriesTrack .product-hero-card.series-card:hover > img:not(.product-hero-logo),
#products #productSeriesTrack .product-hero-card.series-card:focus-visible > img:not(.product-hero-logo) {
  transform: none !important;
  filter: none !important;
}

@media (min-width: 1600px) {
  #products #productSeriesTrack .product-hero-card.series-card,
  #products #productSeriesTrack .product-hero-card.series-card.carousel-card,
  #products #productSeriesTrack .product-hero-card.series-card.product {
    flex-basis: clamp(430px, 20vw, 620px) !important;
    width: clamp(430px, 20vw, 620px) !important;
    min-width: clamp(430px, 20vw, 620px) !important;
  }
}

@media (max-width: 720px) {
  #products #productSeriesTrack.carousel-track {
    padding-inline: var(--pm-edge, 24px) !important;
    scroll-padding-inline: var(--pm-edge, 24px) !important;
  }

  #products #productSeriesTrack .product-hero-card.series-card,
  #products #productSeriesTrack .product-hero-card.series-card.carousel-card,
  #products #productSeriesTrack .product-hero-card.series-card.product {
    flex-basis: min(82vw, 420px) !important;
    width: min(82vw, 420px) !important;
    min-width: min(82vw, 420px) !important;
    max-width: min(82vw, 420px) !important;
  }
}

/* Large-screen final override: fit a whole number of poster cards in view.
   This prevents the right edge from exposing a cropped half-card on wide screens. */
@media (min-width: 1200px) {
  #products #productSeriesTrack.carousel-track {
    --series-edge: clamp(16px, 2.4vw, 56px);
    --series-gap: clamp(16px, 1.15vw, 28px);
    --series-visible: 4;
    gap: var(--series-gap) !important;
    padding-inline: var(--series-edge) !important;
    scroll-padding-inline: var(--series-edge) !important;
  }

  #products #productSeriesTrack .product-hero-card.series-card,
  #products #productSeriesTrack .product-hero-card.series-card.carousel-card,
  #products #productSeriesTrack .product-hero-card.series-card.product {
    flex: 0 0 calc((100vw - (var(--series-edge) * 2) - (var(--series-gap) * (var(--series-visible) - 1))) / var(--series-visible)) !important;
    width: calc((100vw - (var(--series-edge) * 2) - (var(--series-gap) * (var(--series-visible) - 1))) / var(--series-visible)) !important;
    min-width: calc((100vw - (var(--series-edge) * 2) - (var(--series-gap) * (var(--series-visible) - 1))) / var(--series-visible)) !important;
    max-width: none !important;
  }
}

@media (min-width: 1680px) {
  #products #productSeriesTrack.carousel-track {
    --series-visible: 5;
  }
}

/* Desktop alignment fix: keep the poster rail inside the centered content
   container instead of pulling it to the viewport edge. */
@media (min-width: 721px) {
  #products #productSeriesTrack.carousel-track {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: var(--series-edge, clamp(16px, 2.4vw, 56px)) !important;
    scroll-padding-inline: var(--series-edge, clamp(16px, 2.4vw, 56px)) !important;
  }
}

@media (min-width: 1200px) {
  #products #productSeriesTrack .product-hero-card.series-card,
  #products #productSeriesTrack .product-hero-card.series-card.carousel-card,
  #products #productSeriesTrack .product-hero-card.series-card.product {
    flex-basis: calc((100% - (var(--series-edge) * 2) - (var(--series-gap) * (var(--series-visible) - 1))) / var(--series-visible)) !important;
    width: calc((100% - (var(--series-edge) * 2) - (var(--series-gap) * (var(--series-visible) - 1))) / var(--series-visible)) !important;
    min-width: calc((100% - (var(--series-edge) * 2) - (var(--series-gap) * (var(--series-visible) - 1))) / var(--series-visible)) !important;
  }
}

/* Mobile alignment fix: center the rail in the section while still leaving a
   small glimpse of the next poster as a swipe cue. */
@media (max-width: 720px) {
  #products #productSeriesTrack.carousel-track {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--pm-edge, 22px) !important;
    padding-right: var(--pm-edge, 22px) !important;
    scroll-padding-left: var(--pm-edge, 22px) !important;
    scroll-padding-right: var(--pm-edge, 22px) !important;
    gap: 12px !important;
  }

  #products #productSeriesTrack .product-hero-card.series-card,
  #products #productSeriesTrack .product-hero-card.series-card.carousel-card,
  #products #productSeriesTrack .product-hero-card.series-card.product {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}