.banner-carousel{width:100%;margin:0 auto;position:relative}.banner-carousel__viewport{width:100%;overflow:hidden;position:relative;background:#f5f5f5;aspect-ratio:3 / 1}.banner-carousel__track{position:relative;display:flex;height:100%;transition:transform .5s ease-in-out;will-change:transform}.banner-carousel__slide{min-width:100%;max-width:100%;width:100%;height:100%;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center}.banner-carousel__link{display:flex;width:100%;height:100%;align-items:center;justify-content:center;outline:none;position:relative}.banner-carousel__link:focus-visible{outline:2px solid #005fcc;outline-offset:2px}.banner-carousel__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.banner-carousel__img--desktop{display:block}.banner-carousel__img--mobile{display:none}.banner-carousel__cta{position:absolute;bottom:60px;left:50%;transform:translate(-50%);z-index:4;pointer-events:none}.banner-carousel__button{display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;transition:all .3s ease;cursor:pointer;pointer-events:auto;text-align:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;white-space:nowrap;box-shadow:0 4px 12px #00000026}.banner-carousel__button--primary{background:var(--btn-bg, #000);color:var(--btn-text, #fff);border:2px solid var(--btn-bg, #000)}.banner-carousel__button--primary:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 6px 16px #00000040}.banner-carousel__button--secondary{background:#fffffff2;color:var(--btn-outline, #000);border:2px solid var(--btn-outline, #000);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.banner-carousel__button--secondary:hover{background:var(--btn-outline, #000);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #00000040}.banner-carousel__button:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.banner-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);border:none;cursor:pointer;background:#00000073;color:#fff;padding:12px 16px;border-radius:50%;z-index:1;font-size:18px;transition:all .2s ease;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.banner-carousel__arrow--prev{left:18px}.banner-carousel__arrow--next{right:18px}.banner-carousel__arrow:hover{background:#000000b3;transform:translateY(-50%) scale(1.1)}.banner-carousel__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}.banner-carousel__dots{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:1;padding:0}.banner-carousel__dot{width:32px;height:2px;padding:0;border:none;cursor:pointer;background:#fff6;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;border-radius:2px}.banner-carousel__dot:before{content:"";position:absolute;top:-20px;left:-10px;right:-10px;bottom:-20px;background:transparent}.banner-carousel__dot.is-active{background:#fff;width:40px;height:3px}.banner-carousel__dot:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:4px}@media (max-width: 768px){.banner-carousel__viewport{aspect-ratio:1.5 / 1}.banner-carousel__img{object-fit:cover;object-position:center}.banner-carousel__img--desktop{display:none}.banner-carousel__img--mobile{display:block}.banner-carousel__slide:not(:has(.banner-carousel__img--mobile)) .banner-carousel__img--desktop{display:block}.banner-carousel__arrow{padding:8px 10px;font-size:16px;min-width:40px;min-height:40px}.banner-carousel__arrow--prev{left:8px}.banner-carousel__arrow--next{right:8px}.banner-carousel__dots{bottom:12px;gap:10px}.banner-carousel__dot{width:24px}.banner-carousel__dot.is-active{width:32px}.banner-carousel__cta{bottom:50px}.banner-carousel__button{padding:12px 24px;font-size:14px}}@media (prefers-reduced-motion: reduce){.banner-carousel__track,.banner-carousel__arrow,.banner-carousel__dot,.banner-carousel__button{transition-duration:.01ms!important}}@media (prefers-contrast: high){.banner-carousel__arrow{background:#000000e6;border:2px solid #fff}.banner-carousel__dot{background:#fffc}.banner-carousel__dot.is-active{background:#fff;border:1px solid #000}}@media (hover: hover){.banner-carousel__dot:hover{background:#ffffffb3;transform:scaleX(1.1)}}
/*# sourceMappingURL=/cdn/shop/t/122/assets/banner-carousel.css.map */