.hero-carousel { isolation: isolate; background: #e9eef2; }
.hero-carousel .hero-slide { position: absolute; inset: 0; display: block; margin: 0; opacity: 0; transition: opacity 325ms ease; pointer-events: none; }
.hero-carousel .hero-slide[hidden], .hero-carousel-controls[hidden] { display: none; }
.hero-carousel .hero-slide.is-active { z-index: 1; opacity: 1; }
.hero-carousel .hero-product-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; }
.hero-carousel .hero-slide-portrait .hero-product-image { object-fit: cover; }
.hero-carousel-controls { position: absolute; bottom: 12px; left: 12px; z-index: 2; display: flex; align-items: center; padding: 3px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; color: #fff; background: rgb(9 32 49 / 90%); }
.hero-carousel-controls button { display: grid; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; }
.hero-carousel-controls button:hover { background: rgb(255 255 255 / 16%); }
.hero-carousel-controls button:focus-visible { outline: 3px solid #ff9a66; outline-offset: 2px; }
.hero-carousel-controls button:disabled { cursor: wait; opacity: .55; }
.hero-carousel-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-carousel-count { min-width: 44px; font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.hero-carousel-controls .hero-carousel-toggle { width: auto; min-width: 66px; padding-inline: 12px; border-left: 1px solid rgb(255 255 255 / 22%); border-radius: 0 999px 999px 0; font-size: .78rem; font-weight: 700; }
@media (max-width: 600px) {
    .hero-carousel-controls { bottom: 10px; left: 10px; }
    .hero-carousel-controls button { height: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-carousel .hero-slide { transition: none; }
}