/* Native scrolling keeps the featured collection usable with touch and a trackpad. */
.product-carousel{min-width:0;max-width:100%;--carousel-gap:23px}
.product-carousel .carousel-toolbar{display:flex;align-items:center;gap:18px;margin:24px 0 20px;min-width:0}
.product-carousel .carousel-toolbar .filter-bar{margin:0;min-width:0}
.product-carousel .carousel-footer{display:flex;align-items:center;gap:28px;min-width:0;margin-top:20px}
.product-carousel .carousel-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}
.product-carousel .carousel-controls button{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);border:0;border-radius:50%;box-shadow:none}
.product-carousel .carousel-controls button svg{width:20px;height:20px}
.product-carousel .carousel-controls button:disabled{opacity:.3;cursor:not-allowed}
.product-carousel .carousel-position{min-width:76px;text-align:center;white-space:nowrap;color:var(--fg);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.product-carousel .carousel-progress{flex:1;min-width:24px;height:2px;overflow:hidden;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.product-carousel .carousel-progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width 200ms ease}
.product-carousel .filter-bar button:disabled{opacity:.35;box-shadow:none;cursor:not-allowed}
.product-carousel .filter-bar button:disabled:hover{background:var(--surface)}
.product-carousel .release-grid.carousel-track{
  display:grid;grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * var(--carousel-gap)) / 4);
  gap:var(--carousel-gap);align-items:start;width:100%;min-width:0;max-width:100%;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:auto;scroll-padding-inline:6px;
  /* Room inside the scrolling box for focus rings. */
  padding:6px 6px 10px;margin:-6px -6px 0;width:calc(100% + 12px);max-width:calc(100% + 12px);
  scrollbar-width:none;
}
.product-carousel .carousel-track::-webkit-scrollbar{display:none}
.product-carousel .carousel-track>.release-card{scroll-snap-align:start;scroll-margin-inline:0;min-width:0}
.product-carousel .carousel-track>[hidden]{display:none!important}
.product-carousel .carousel-track .release-art{aspect-ratio:1}
.product-carousel .carousel-track .release-art>a:focus-visible{outline-offset:-4px}
/* Offscreen carousel items must not depend on a page-level entrance observer. */
.product-carousel .carousel-track>.reveal.is-pending{opacity:1;transform:none}
.product-carousel .carousel-track>.motion-running{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
.product-carousel .carousel-track:focus-visible{outline:1px solid var(--muted);outline-offset:4px}
@media(max-width:1100px){
  .product-carousel .release-grid.carousel-track{grid-auto-columns:calc((100% - var(--carousel-gap)) / 2)}
}
@media(max-width:600px){
  .product-carousel{--carousel-gap:14px}
  .product-carousel .carousel-toolbar{align-items:flex-end;gap:10px;margin:20px 0 18px}
  .product-carousel .carousel-toolbar .filter-bar{gap:6px}
  .product-carousel .carousel-toolbar .filter-bar button{min-height:40px;padding:8px 11px;font-size:9px}
  .product-carousel .carousel-footer{gap:18px;margin-top:16px}
  .product-carousel .carousel-controls{gap:8px}
  .product-carousel .carousel-position{min-width:66px;font-size:12px}
  .product-carousel .release-grid.carousel-track{grid-auto-columns:86%}
  .product-carousel .section-heading{align-items:flex-start;flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){.product-carousel .carousel-track{scroll-behavior:auto}.product-carousel .carousel-progress>span{transition:none}}
[data-motion="reduced"] .product-carousel .carousel-track{scroll-behavior:auto}
[data-motion="reduced"] .product-carousel .carousel-progress>span{transition:none}
@media(forced-colors:active){
  .product-carousel .carousel-controls button{border:1px solid ButtonText}
  .product-carousel .carousel-controls button:disabled,.product-carousel .filter-bar button:disabled{opacity:1;color:GrayText;border-color:GrayText}
}