.ugc-carousel-section{overflow:hidden;position:relative}.ugc-carousel__header{text-align:center;margin-bottom:3rem}.ugc-carousel__title{margin-bottom:1rem}.ugc-carousel__description{max-width:600px;margin:0 auto;color:rgba(var(--color-foreground),.75)}.ugc-carousel{position:relative;width:100%;max-width:100%;max-height:60svh}.ugc-carousel__container{position:relative;display:flex;flex-direction:column;align-items:center}.ugc-carousel__track{position:relative;width:calc((60svh * 16) / 9);height:auto;aspect-ratio:16 / 9;perspective:1200px;perspective-origin:center center;display:flex;justify-content:center;align-items:center;cursor:grab;-webkit-user-select:none;user-select:none;transform:translateZ(0)}@media screen and (max-width: 768px){.ugc-carousel__track{width:100%;perspective:800px}}.low-end-device .ugc-carousel__track{perspective:none!important;transform:none!important}.ugc-carousel__track:active{cursor:grabbing}.ugc-carousel__item{position:absolute;width:auto;height:100%;max-height:60svh;aspect-ratio:9 / 19;transition:transform .4s ease-out,opacity .4s ease-out;transform-style:flat}@media screen and (min-width: 769px) and (prefers-reduced-motion: no-preference){.ugc-carousel__item:not(.low-end-device){transform-style:preserve-3d}}@media screen and (max-width: 768px){.ugc-carousel__item{transition:transform .3s ease-out,opacity .3s ease-out;transform-style:flat}}.ugc-carousel__item.low-end-device{transition:transform .2s ease-out,opacity .2s ease-out;transform-style:flat}.ugc-carousel__frame{position:relative;width:100%;height:auto;border-radius:80px;background:#000;box-shadow:0 4px 12px #0003;cursor:pointer;transition:transform .3s ease}@media (hover: hover) and (pointer: fine){.ugc-carousel__frame:hover{transform:translateY(-5px);box-shadow:0 8px 20px #0000004d}}@media screen and (max-width: 768px){.ugc-carousel__frame{box-shadow:0 2px 8px #00000026;border-radius:40px}}.low-end-device .ugc-carousel__frame{box-shadow:none;border:1px solid rgba(0,0,0,.1)}.low-end-device .ugc-carousel__frame:hover{transform:none}.ugc-carousel__frame-image{position:absolute;top:0;left:0;width:100%;height:auto;object-fit:cover;z-index:3;pointer-events:none}.ugc-carousel__content{position:relative;width:100%;height:100%;z-index:2;aspect-ratio:18 / 37}.ugc-carousel__stories-indicator{position:absolute;top:60px;left:20px;right:20px;display:flex;gap:4px;z-index:10}.ugc-carousel__story-bar{flex:1;height:3px;background:#ffffff4d;border-radius:2px;overflow:hidden;position:relative;--progress: 0%;will-change:auto}.ugc-carousel__story-bar.active{background:#fff9;will-change:auto}.ugc-carousel__story-bar.active:after{content:"";position:absolute;top:0;left:0;width:var(--progress, 0%);height:100%;background:#fff;transition:width .1s linear;border-radius:2px;transform:translateZ(0)}.ugc-carousel__story-bar.active.playing:after{transition:width .3s linear}.ugc-carousel__story-bar.completed{background:#fffc}.ugc-carousel__story-bar.completed:after{width:100%!important;background:#fff}.low-end-device .ugc-carousel__story-bar{will-change:auto!important}.ugc-carousel__videos{position:relative;width:100%;height:100%}.ugc-carousel__video{width:100%;height:100%;object-fit:cover;border-radius:40px;aspect-ratio:9 / 19}.ugc-carousel__fallback{width:100%;height:100%;object-fit:cover;border-radius:80px}.ugc-carousel__controls{position:absolute;bottom:40px;right:40px;display:flex;gap:8px;z-index:10}.ugc-carousel__mute-btn,.ugc-carousel__play-pause-btn{width:40px;height:40px;border-radius:50%;background:#0009;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}@media screen and (min-width: 769px){.ugc-carousel__mute-btn:not(.low-end-device),.ugc-carousel__play-pause-btn:not(.low-end-device){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}@media (hover: hover) and (pointer: fine){.ugc-carousel__mute-btn:hover,.ugc-carousel__play-pause-btn:hover{background:#000c}@media screen and (min-width: 769px){.ugc-carousel__mute-btn:hover:not(.low-end-device),.ugc-carousel__play-pause-btn:hover:not(.low-end-device){transform:scale(1.1)}}}.ugc-carousel__mute-btn svg,.ugc-carousel__play-pause-btn svg{width:20px;height:20px}.ugc-carousel__mute-btn .icon-sound-on,.ugc-carousel__play-pause-btn .icon-pause{display:none}.ugc-carousel__title-overlay{position:absolute;bottom:20px;left:20px;right:80px;z-index:10}.ugc-carousel__title-overlay h3{color:#fff;font-size:1rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.5);margin:0;line-height:1.3}.ugc-carousel__link{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;text-decoration:none}.ugc-carousel__navigation{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 2rem;pointer-events:none;z-index:3}.ugc-carousel__nav-btn{width:50px;height:50px;border-radius:50%;background:#ffffffe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;pointer-events:auto;box-shadow:0 4px 12px #00000026}.ugc-carousel__nav-btn:hover{background:#fff;transform:scale(1.1);box-shadow:0 6px 20px #0003}.ugc-carousel__nav-btn svg{width:24px;height:24px;color:#333}.ugc-carousel__nav-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.ugc-carousel__dots{display:flex;justify-content:center;gap:12px;margin-top:2rem}.ugc-carousel__dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(var(--color-foreground),.3);background:transparent;cursor:pointer;transition:all .3s ease}.ugc-carousel__dot:hover{border-color:rgba(var(--color-foreground),.6);transform:scale(1.2)}.ugc-carousel__dot.active{background:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground))}@media screen and (max-width: 767px){.ugc-carousel__header{margin-bottom:1rem}.ugc-carousel__item{width:auto;height:100%;max-height:60svh}.ugc-carousel__track{height:auto;aspect-ratio:9 / 12;perspective:600px}.ugc-carousel__frame,.ugc-carousel__video,.ugc-carousel__fallback{border-radius:35px}.ugc-carousel__navigation{display:none}.ugc-carousel__controls{bottom:15px;right:15px;gap:6px}.ugc-carousel__mute-btn,.ugc-carousel__play-pause-btn{width:35px;height:35px}.ugc-carousel__mute-btn svg,.ugc-carousel__play-pause-btn svg{width:16px;height:16px}.ugc-carousel__title-overlay{bottom:15px;left:15px;right:65px}.ugc-carousel__title-overlay h3{font-size:.9rem}.ugc-carousel__stories-indicator{top:45px;left:15px;right:15px}.ugc-carousel__dots{margin-top:1.5rem;gap:8px}.ugc-carousel__dot{width:10px;height:10px}}@media screen and (max-width: 480px){.ugc-carousel__item{width:auto}.ugc-carousel__track{perspective:none}.ugc-carousel__item{transform-style:flat!important}}@media (prefers-reduced-motion: reduce){.ugc-carousel__item{transition:opacity .3s ease!important;transform-style:flat!important}.ugc-carousel__frame:hover{transform:none!important}.ugc-carousel__story-bar.active:after{animation:none!important;width:100%!important}.ugc-carousel__mute-btn:hover,.ugc-carousel__play-pause-btn:hover{transform:none!important}}.low-end-device .ugc-carousel__item{transform-style:flat!important;transition:transform .2s ease,opacity .2s ease!important}.low-end-device .ugc-carousel__track{perspective:none!important}.low-end-device .ugc-carousel__story-bar.active:after{transition:none!important}.low-end-device .ugc-carousel__frame:hover{transform:none!important;box-shadow:0 2px 8px #00000026!important}.ugc-carousel__nav-btn:focus-visible,.ugc-carousel__dot:focus-visible,.ugc-carousel__mute-btn:focus-visible,.ugc-carousel__play-pause-btn:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.ugc-carousel__video:not([data-loaded]){background:#f5f5f5}.ugc-carousel__video:not([data-loaded]):after{content:"\26ac";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#999;animation:loading-pulse 1.5s ease-in-out infinite}@keyframes loading-pulse{0%,to{opacity:.3}50%{opacity:1}}.low-end-device .ugc-carousel__video:not([data-loaded]):after{animation:none;opacity:.5}@media (prefers-contrast: high){.ugc-carousel__frame{border:2px solid currentColor}.ugc-carousel__nav-btn{background:#fff;border:2px solid black}.ugc-carousel__dot{border-width:3px}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/ugc-carousel.css.map */