hero-carousel{--hero-height-boost: 1;display:block;position:relative;overflow:hidden;width:100%;background:var(--color-pink-100);z-index:1;aspect-ratio:calc(var(--hero-ratio, 3.1676) / var(--hero-height-boost))}.hero__track,.hero__slide,.hero__link,.hero__image{height:100%}.hero__image{object-fit:cover}.hero__image--mobile{display:none}.hero__track{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);will-change:opacity}.hero__slide{grid-column:1;grid-row:1;position:relative;min-width:0;min-height:0;overflow:hidden;opacity:0;transition:opacity .9s var(--ease-soft);pointer-events:none}.hero__slide[data-active=true]{opacity:1;pointer-events:auto}.hero__link{display:block;height:100%}.hero__image{width:100%;height:100%;display:block;object-fit:cover}.hero__image{object-position:center top}.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;background:var(--color-blue-600);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--color-white);box-shadow:var(--shadow-md);z-index:2}.hero__arrow--prev{left:var(--sp-4)}.hero__arrow--next{right:var(--sp-4)}.hero__arrow svg{width:1.375rem;height:1.375rem}.hero__dots{position:absolute;bottom:var(--sp-4);left:50%;transform:translate(-50%);display:flex;gap:var(--sp-2);z-index:2}.hero__dots button{width:.75rem;height:.75rem;background:#fff9;border-radius:50%;transition:background var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-soft);border:0;padding:0;cursor:pointer}.hero__dots button[aria-selected=true]{background:var(--color-white);transform:scale(1.3)}.hero__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(prefers-reduced-motion:reduce){.hero__track{transition:none}}.hero__mobile{display:none;width:100%}.hero__mobile-link{display:block}.hero__mobile-img{width:100%;height:auto;display:block}@media(max-width:767px){.has-mobile-image hero-carousel{display:none}.has-mobile-image .hero__mobile{display:block}hero-carousel{aspect-ratio:calc(var(--hero-mobile-ratio, var(--hero-ratio, 3.1676)) / var(--hero-mobile-boost, var(--hero-height-boost)))}.hero__slide--has-mobile .hero__image--desktop{display:none}.hero__slide--has-mobile .hero__image--mobile{display:block}.hero__arrow{width:2.25rem;height:2.25rem}.hero__arrow--prev{left:var(--sp-2)}.hero__arrow--next{right:var(--sp-2)}.hero__dots button{width:.625rem;height:.625rem}}@media(max-width:479px){.hero__arrow{width:2rem;height:2rem}.hero__arrow svg{width:1.125rem;height:1.125rem}}
/*# sourceMappingURL=/cdn/shop/t/291/assets/section-hero-carousel.css.map */
