.cls-ugc{--cls-ugc-gutter: 16px;--cls-ugc-gap: 8px;--cls-ugc-n: var(--cls-ugc-n-mob, 1.8);--cls-ugc-radius: 8px;display:block;padding-top:var(--cls-ugc-pt, 32px);padding-bottom:var(--cls-ugc-pb, 32px);background:#fff;color:#111;overflow:hidden}.cls-ugc *,.cls-ugc *:before,.cls-ugc *:after{box-sizing:border-box}.cls-ugc__inner{max-width:calc(1300px + 2 * var(--cls-ugc-gutter));margin:0 auto;padding:0 var(--cls-ugc-gutter)}.cls-ugc__head{margin-bottom:16px}.cls-ugc__title{margin:0 0 10px;font-family:inherit;font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.01em;text-transform:none;color:#111}.cls-ugc__badge{display:inline-flex;align-items:center;gap:6px;margin:0;padding:3px 14px 3px 10px;border:1.5px solid transparent;border-radius:999px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#962fbf,#d62976 45%,#fa7e1e 80%,#feda75) border-box;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0}.cls-ugc__badge span{background:linear-gradient(90deg,#962fbf,#d62976 50%,#fa7e1e);-webkit-background-clip:text;background-clip:text;color:transparent}.cls-ugc__ig{flex:none;display:block;width:16px;height:16px}.cls-ugc__track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--cls-ugc-gap) * (var(--cls-ugc-n) - 1)) / var(--cls-ugc-n));gap:var(--cls-ugc-gap);margin:0 calc(-1 * var(--cls-ugc-gutter));padding:0 var(--cls-ugc-gutter);scroll-padding:0 var(--cls-ugc-gutter);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline:none}.cls-ugc__track::-webkit-scrollbar{display:none}.cls-ugc__track:focus-visible{box-shadow:0 0 0 2px #111 inset;border-radius:var(--cls-ugc-radius)}.cls-ugc__item{min-width:0;scroll-snap-align:start}.cls-ugc__card{position:relative;aspect-ratio:9 / 16;border-radius:var(--cls-ugc-radius);overflow:hidden;background:#efebe7;cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate}.cls-ugc__cover,.cls-ugc__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.cls-ugc__cover{z-index:1;transition:opacity .2s ease}.cls-ugc__card[data-ugc-frame]>.cls-ugc__cover:not(.cls-ugc__frame){opacity:0}.cls-ugc__card[data-ugc-frame].is-frame-fallback:not(.is-started)>.cls-ugc__cover{opacity:1}.cls-ugc__frame{opacity:0;pointer-events:none}.cls-ugc__frame.is-ready{opacity:1}.cls-ugc__video{z-index:0;background:transparent}.cls-ugc__card.is-started .cls-ugc__video{background:#000}.cls-ugc__card.is-started .cls-ugc__cover{opacity:0;pointer-events:none}.cls-ugc__play,.cls-ugc__mute{position:absolute;z-index:2;bottom:10px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:50%;background:#1e1e1e6b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;cursor:pointer;transition:opacity .2s ease,background-color .2s ease}.cls-ugc__play{left:10px;width:44px;height:44px}.cls-ugc__mute{right:10px;width:40px;height:40px}.cls-ugc__mute[hidden]{display:none}.cls-ugc__play svg{width:22px;height:22px}.cls-ugc__mute svg{width:20px;height:20px}.cls-ugc__play:hover,.cls-ugc__mute:hover{background:#1e1e1e99}.cls-ugc__play:focus-visible,.cls-ugc__mute:focus-visible{outline:2px solid #fff;outline-offset:2px}.cls-ugc__icon-pause,.cls-ugc__icon-muted,.cls-ugc__card.is-playing .cls-ugc__icon-play{display:none}.cls-ugc__card.is-playing .cls-ugc__icon-pause{display:block}.cls-ugc__card.is-playing .cls-ugc__play{opacity:.55}.cls-ugc__card.is-playing:hover .cls-ugc__play,.cls-ugc__card.is-playing .cls-ugc__play:focus-visible{opacity:1}.cls-ugc__card.is-muted .cls-ugc__icon-sound{display:none}.cls-ugc__card.is-muted .cls-ugc__icon-muted{display:block}.cls-ugc__card.is-loading .cls-ugc__play:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:cls-ugc-spin .8s linear infinite}@keyframes cls-ugc-spin{to{transform:rotate(360deg)}}.cls-ugc__caption{margin:8px 2px 0;font-size:13px;line-height:1.35;color:#444}.cls-ugc__card--placeholder{cursor:default;display:grid;place-items:end start}.cls-ugc__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;fill:#c9c1b9;background:#efebe7}.cls-ugc__placeholder-note{position:relative;margin:10px;padding:4px 8px;border-radius:4px;background:#ffffffe6;font-size:12px;color:#333}.cls-ugc__nav{display:flex;align-items:center;gap:4px;margin-top:10px}.cls-ugc__nav.is-static{visibility:hidden}.cls-ugc__arrow{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#222;cursor:pointer}.cls-ugc__arrow svg{width:10px;height:10px}.cls-ugc__arrow:disabled{color:#bdbdbd;cursor:default}.cls-ugc__arrow:not(:disabled):hover{background:#f2f2f2}.cls-ugc__arrow:focus-visible{outline:2px solid #111;outline-offset:1px}.cls-ugc__bar{position:relative;flex:1;height:20px;cursor:pointer;touch-action:none}.cls-ugc__bar:before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:6px;background:#ececec}.cls-ugc__thumb{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;width:30%;border-radius:6px;background:#2a2a2a;will-change:transform}@media(min-width:750px){.cls-ugc{--cls-ugc-gutter: 32px;--cls-ugc-gap: 12px;--cls-ugc-n: var(--cls-ugc-n-desk, 3.4);--cls-ugc-radius: 10px}.cls-ugc__track{margin:0;padding:0;scroll-padding:0}.cls-ugc__title{font-size:34px}.cls-ugc__head{margin-bottom:20px}.cls-ugc__nav{margin-top:14px}}@media(prefers-reduced-motion:reduce){.cls-ugc__track{scroll-behavior:auto}.cls-ugc__cover,.cls-ugc__play,.cls-ugc__mute{transition:none}}.cls-ugc.cls-ugc--in-product{--cls-ugc-gutter: 0px;background:transparent}.cls-ugc--in-product .cls-ugc__head{margin-bottom:12px}.cls-ugc--in-product .cls-ugc__title{font-size:22px;margin-bottom:8px}.cls-ugc--in-product .cls-ugc__nav{margin-top:8px}@media(min-width:750px){.cls-ugc.cls-ugc--in-product{--cls-ugc-gutter: 0px;--cls-ugc-gap: 10px}.cls-ugc--in-product .cls-ugc__title{font-size:24px}.cls-ugc--in-product .cls-ugc__head{margin-bottom:14px}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/cls-ugc-videos.css.map */