.video-carousel{--video-carousel-gap: .8rem;--video-carousel-items: 4;--video-carousel-items-mobile: 3;--video-carousel-ratio: 9 / 16;--video-carousel-radius: 1.6rem;--video-player-width: 30rem;display:block;position:relative}.video-carousel__viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.video-carousel__viewport::-webkit-scrollbar{display:none}.video-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--video-carousel-items) - 1) * var(--video-carousel-gap)) / var(--video-carousel-items));gap:var(--video-carousel-gap);margin:0;padding:0}.video-carousel__item{min-width:0;scroll-snap-align:start}.video-carousel__trigger{appearance:none;-webkit-appearance:none;display:block;position:relative;width:100%;height:auto;aspect-ratio:var(--video-carousel-ratio);margin:0;padding:0;border:var(--video-carousel-border-width, 0px) solid var(--video-carousel-border-color, transparent);border-radius:var(--video-carousel-radius);background:rgba(var(--color-foreground),.06);overflow:hidden;line-height:0;white-space:normal;cursor:pointer}.video-carousel__preview{display:block;width:100%;height:100%;object-fit:cover}.video-carousel__nav{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;padding:0;transform:translateY(-50%);border:1px solid rgba(var(--color-border),var(--color-border-alpha));border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;transition:opacity var(--duration-default) ease}.video-carousel__nav--prev{inset-inline-start:-.6rem}.video-carousel__nav--next{inset-inline-end:-.6rem}.video-carousel .video-carousel__nav[disabled]{opacity:0;pointer-events:none}.video-carousel[data-overflow=false] .video-carousel__nav,.no-js .video-carousel__nav{display:none}.video-player{--video-player-gap: 1.6rem;--video-player-top-room: 1.6rem;position:fixed;z-index:40;bottom:calc(var(--video-player-offset, 0px) + var(--video-player-gap));width:min(var(--video-player-width, 30rem),calc(100vw - 3.2rem),calc((100vh - var(--video-player-offset, 0px) - var(--video-player-gap) - var(--video-player-top-room)) * var(--video-carousel-ratio, 9 / 16)));width:min(var(--video-player-width, 30rem),calc(100vw - 3.2rem),calc((100svh - var(--video-player-offset, 0px) - var(--video-player-gap) - var(--video-player-top-room)) * var(--video-carousel-ratio, 9 / 16)));opacity:0;transform:translateY(1.2rem) scale(.98);transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1);pointer-events:none}.video-player[data-position=bottom-right]{inset-inline-end:1.6rem}.video-player[data-position=bottom-left]{inset-inline-start:1.6rem}.video-player.is-open{opacity:1;transform:none;pointer-events:auto}.video-player__frame{position:relative;aspect-ratio:var(--video-carousel-ratio, 9 / 16);border-radius:1.6rem;overflow:hidden;background:#000;box-shadow:0 1.2rem 3.2rem #00000047}.video-player__video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.video-player__close{position:absolute;top:.8rem;inset-inline-end:.8rem;z-index:2;display:flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;padding:0;border:0;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;transition:background-color var(--duration-default) ease}.video-player__close:hover{background:#000c}body.video-player-lock{position:fixed;width:100%;overflow:hidden}@media screen and (max-width:767.98px){.video-carousel__track{grid-auto-columns:calc((100% - (var(--video-carousel-items-mobile, 3) - 1) * var(--video-carousel-gap)) / var(--video-carousel-items-mobile, 3))}.video-carousel__nav{width:2.8rem;height:2.8rem;box-shadow:0 .2rem .8rem #00000024}.video-carousel__nav--prev{inset-inline-start:-1rem}.video-carousel__nav--next{inset-inline-end:-1rem}.video-player{--video-player-gap: 2rem;--video-player-offset: 0px;bottom:var(--video-player-gap)}}@media(prefers-reduced-motion:reduce){.video-carousel__viewport{scroll-behavior:auto}.video-player{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-product-video-carousel.css.map */