.oji-v4 .ugc{padding:9rem 6vw;background:var(--oji-v4-cream);overflow:hidden}.oji-v4 .ugc__inner{max-width:1240px;margin:0 auto}.oji-v4 .ugc__head{max-width:40rem;margin-bottom:3.5rem}.oji-v4 .ugc__head .h2{margin-bottom:0}.oji-v4 .ugc__reel-wrap{position:relative;margin-inline:-6vw}.oji-v4 .ugc__reel{display:flex;gap:1rem;list-style:none;margin:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-block:.5rem;padding-inline:6vw;scroll-padding-inline:6vw;scrollbar-width:none}.oji-v4 .ugc__reel::-webkit-scrollbar{display:none}.oji-v4 .ugc__reel:focus-visible{outline:2px solid var(--oji-v4-olive);outline-offset:2px}.oji-v4 .ugc__card{position:relative;flex:0 0 auto;width:min(70vw,300px);aspect-ratio:9 / 16;scroll-snap-align:start;border-radius:var(--oji-v4-radius-md);overflow:hidden;background:var(--oji-v4-pine);box-shadow:inset 0 0 0 1px var(--oji-v4-paper-line);transition:transform .4s var(--oji-v4-ease-out),box-shadow .4s var(--oji-v4-ease-out)}.oji-v4 .ugc__card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(to top,rgba(32,38,26,.62) 0%,transparent 42%);pointer-events:none}.oji-v4 .ugc__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.oji-v4 .ugc__handle{position:absolute;left:1rem;top:1rem;z-index:2;font-family:var(--oji-v4-mono);font-size:11.5px;letter-spacing:.08em;color:var(--oji-v4-cream-text)}.oji-v4 .ugc__btn{position:absolute;bottom:.85rem;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:#20261a8c;color:var(--oji-v4-cream-text);box-shadow:inset 0 0 0 1px #f2efe447;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .25s var(--oji-v4-ease-out),transform .25s var(--oji-v4-ease-out)}.oji-v4 .ugc__btn:hover{background:#20261abf}.oji-v4 .ugc__btn:focus-visible,.oji-v4 .ugc__arrow:focus-visible{outline:2px solid var(--oji-v4-cream-text);outline-offset:2px}.oji-v4 .ugc__btn--play{left:.85rem}.oji-v4 .ugc__btn--mute{right:.85rem}.oji-v4 .ugc__icon{width:1.05rem;height:1.05rem}.oji-v4 .ugc__icon--pause,.oji-v4 .ugc__icon--sound-on,.oji-v4 .ugc__card.is-playing .ugc__icon--play{display:none}.oji-v4 .ugc__card.is-playing .ugc__icon--pause{display:block}.oji-v4 .ugc__card.is-unmuted .ugc__icon--sound-off{display:none}.oji-v4 .ugc__card.is-unmuted .ugc__icon--sound-on{display:block}.oji-v4 .ugc__arrow{display:none;position:absolute;top:50%;z-index:4;width:3rem;height:3rem;padding:0;border:1px solid var(--oji-v4-paper-line);border-radius:50%;align-items:center;justify-content:center;background:var(--oji-v4-cream);color:var(--oji-v4-olive);box-shadow:0 4px 16px #20261a1a;transform:translateY(-50%);transition:background .25s var(--oji-v4-ease-out),color .25s var(--oji-v4-ease-out),transform .25s var(--oji-v4-ease-out)}.oji-v4 .ugc__arrow svg{width:1.25rem;height:1.25rem}.oji-v4 .ugc__arrow:hover:not(:disabled){background:var(--oji-v4-olive);color:var(--oji-v4-cream)}.oji-v4 .ugc__arrow:disabled{opacity:.35;cursor:default}.oji-v4 .ugc__arrow--prev{left:clamp(1rem,3vw,3rem)}.oji-v4 .ugc__arrow--next{right:clamp(1rem,3vw,3rem)}@media(hover:hover)and (min-width:1024px){.oji-v4 .ugc__card:hover{transform:scale(1.015);box-shadow:inset 0 0 0 1px var(--oji-v4-paper-line),0 8px 24px #20261a24}}@media(min-width:1024px){.oji-v4 .ugc__card{width:300px}.oji-v4 .ugc__arrow{display:inline-flex}.oji-v4 .ugc__reel{padding-inline:max(6vw,calc((100% - 1240px)/2 + 6vw));scroll-padding-inline:max(6vw,calc((100% - 1240px)/2 + 6vw))}.oji-v4 .ugc__head{margin-left:auto;margin-right:auto;text-align:center}}@media(max-width:620px){.oji-v4 .ugc{padding-left:5vw;padding-right:5vw;padding-top:5.5rem;padding-bottom:5.5rem}.oji-v4 .ugc__reel-wrap{margin-inline:-5vw}.oji-v4 .ugc__reel{padding-inline:5vw;scroll-padding-inline:5vw}}@media(prefers-reduced-motion:reduce){.oji-v4 .ugc__card,.oji-v4 .ugc__btn,.oji-v4 .ugc__arrow{transition:none}.oji-v4 .ugc__reel{scroll-behavior:auto}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/oji-v4-ugc.css.map */