.op-ugc{min-width:0;margin-top:4px;--op-ugc-gutter: 20px;--op-ugc-card: var(--ugc-ugc_card_width_mobile);--op-ugc-skel-a: var(--ugc-ugc_skel_color);--op-ugc-skel-b: var(--ugc-ugc_skel_shine)}.op-ugc .op-ugc__inner{display:flex;flex-direction:column;gap:10px;margin-inline:calc(var(--op-ugc-gutter) * -1)}.op-ugc .op-ugc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 var(--op-ugc-gutter)}.op-ugc .op-ugc__title{margin:0;font-family:var(--font-heading--family, inherit);font-weight:600;color:var(--op-title_color)}.op-ugc .op-ugc__sub{margin:4px 0 0;color:var(--op-meta_color);line-height:1.5}.op-ugc .op-ugc__nav{display:none;gap:8px;flex:none}.op-ugc .op-ugc__arrow{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--ugc-ugc_skel_color);border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:opacity .2s ease,background-color .2s ease}.op-ugc .op-ugc__arrow:hover:not(:disabled){background:var(--ugc-ugc_skel_color)}.op-ugc .op-ugc__arrow:disabled{opacity:.35;cursor:default}.op-ugc .op-ugc__rail{display:flex;gap:10px;margin:0;padding:0 var(--op-ugc-gutter);list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--op-ugc-gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}.op-ugc .op-ugc__rail::-webkit-scrollbar{display:none}.op-ugc .op-ugc__rail:focus-visible{outline:2px solid var(--op-title_color);outline-offset:4px}.op-ugc .op-ugc__card{position:relative;flex:0 0 var(--op-ugc-card);aspect-ratio:9 / 16;border-radius:var(--ugc-ugc_radius);overflow:hidden;scroll-snap-align:start;background:var(--op-ugc-skel-a);isolation:isolate}@supports (-moz-appearance: none){.op-ugc .op-ugc__card{border-radius:0}.op-ugc .op-ugc__card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;border-radius:var(--ugc-ugc_radius);box-shadow:0 0 0 var(--ugc-ugc_radius) var(--op-bg_color, #fff)}}.op-ugc .op-ugc__skel{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent 30%,var(--op-ugc-skel-b) 50%,transparent 70%) no-repeat,var(--op-ugc-skel-a);background-size:200% 100%,auto;background-position:150% 0,0 0;animation:op-ugc-shimmer 1.4s ease-in-out infinite;transition:opacity .35s ease}@keyframes op-ugc-shimmer{to{background-position:-50% 0,0 0}}.op-ugc .op-ugc__card.is-ready .op-ugc__skel{opacity:0;animation:none}.op-ugc .op-ugc__card video,.op-ugc .op-ugc__card .op-ugc__poster{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}.op-ugc .op-ugc__card.is-ready video,.op-ugc .op-ugc__card.is-ready .op-ugc__poster{opacity:1}.op-ugc .op-ugc__card noscript video{opacity:1}.op-ugc .op-ugc__btn{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}.op-ugc .op-ugc__btn:focus-visible{outline:3px solid #fff;outline-offset:-5px;border-radius:var(--ugc-ugc_radius)}.op-ugc .op-ugc__icon{position:absolute;display:none;place-items:center;border-radius:50%;background:#1715128c}.op-ugc .op-ugc__icon--play{top:50%;left:50%;width:52px;height:52px;transform:translate(-50%,-50%)}.op-ugc .op-ugc__icon--expand{top:8px;right:8px;width:28px;height:28px}.op-ugc .op-ugc__card[data-state=paused] .op-ugc__icon--play,.op-ugc .op-ugc__card.is-ready .op-ugc__icon--expand{display:grid}.op-ugc .op-ugc__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px 12px 12px;background:linear-gradient(to top,rgba(23,21,18,.7),transparent);color:#fff;font-weight:600;line-height:1.35;pointer-events:none;opacity:0;transition:opacity .35s ease}.op-ugc .op-ugc__card.is-ready .op-ugc__cap{opacity:1}.op-ugc .op-ugc__hint{position:absolute;inset:auto 0 14px;text-align:center;color:var(--op-meta_color)}@media(prefers-reduced-motion:reduce){.op-ugc .op-ugc__skel{animation:none}.op-ugc .op-ugc__skel,.op-ugc .op-ugc__card video,.op-ugc .op-ugc__card .op-ugc__poster,.op-ugc .op-ugc__cap{transition:none}}@media(min-width:750px){.op-ugc{--op-ugc-gutter: 0px;--op-ugc-card: var(--ugc-ugc_card_width_desktop)}}@media(hover:hover)and (pointer:fine){.op-ugc .op-ugc__nav.is-scrollable{display:flex}}.op-ugc-lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:grid;place-items:center;touch-action:none;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.op-ugc-lb[hidden]{display:none}.op-ugc-lb .op-ugc-lb__shade{position:absolute;top:0;right:0;bottom:0;left:0;background:#0b0a09;opacity:0;transition:opacity .25s ease}.op-ugc-lb .op-ugc-lb__stage{position:relative;width:100%;height:100%;display:grid;place-items:center;transform:translateY(24px) scale(.96);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease;will-change:transform}.op-ugc-lb.is-open .op-ugc-lb__shade{opacity:1}.op-ugc-lb.is-open .op-ugc-lb__stage{transform:none;opacity:1}.op-ugc-lb.is-dragging .op-ugc-lb__shade,.op-ugc-lb.is-dragging .op-ugc-lb__stage{transition:none}.op-ugc-lb video{display:block;width:100%;height:100%;max-width:100vw;max-height:100vh;max-height:100dvh;object-fit:contain;pointer-events:none}.op-ugc-lb .op-ugc-lb__ctl{position:absolute;z-index:2;top:calc(12px + env(safe-area-inset-top,0px));display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#1715128c;color:#fff;cursor:pointer}.op-ugc-lb .op-ugc-lb__ctl:focus-visible{outline:3px solid #fff;outline-offset:2px}.op-ugc-lb .op-ugc-lb__close{right:calc(12px + env(safe-area-inset-right,0px))}.op-ugc-lb .op-ugc-lb__mute{left:calc(12px + env(safe-area-inset-left,0px))}.op-ugc-lb .op-ugc-lb__mute svg{display:none}.op-ugc-lb .op-ugc-lb__mute.is-muted [data-on],.op-ugc-lb .op-ugc-lb__mute:not(.is-muted) [data-off]{display:block}.op-ugc-lb .op-ugc-lb__paused{position:absolute;top:50%;left:50%;display:none;place-items:center;width:68px;height:68px;border-radius:50%;background:#1715128c;color:#fff;transform:translate(-50%,-50%);pointer-events:none}.op-ugc-lb.is-paused .op-ugc-lb__paused{display:grid}.op-ugc-lb .op-ugc-lb__bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:36px calc(12px + env(safe-area-inset-right,0px)) calc(26px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));background:linear-gradient(to top,rgba(11,10,9,.75),transparent);color:#fff;font-variant-numeric:tabular-nums;font-size:12.5px;touch-action:none}.op-ugc-lb .op-ugc-lb__skip{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}.op-ugc-lb .op-ugc-lb__skip:focus-visible{outline:3px solid #fff;outline-offset:-2px}.op-ugc-lb .op-ugc-lb__time{flex:none;min-width:3.2em;text-align:center}.op-ugc-lb .op-ugc-lb__seek{flex:1 1 auto;min-width:0;height:32px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:none;-webkit-appearance:none;appearance:none;--op-ugc-pct: 0%}.op-ugc-lb .op-ugc-lb__seek:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px}.op-ugc-lb .op-ugc-lb__seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#fff var(--op-ugc-pct),rgba(255,255,255,.35) var(--op-ugc-pct))}.op-ugc-lb .op-ugc-lb__seek::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,#fff var(--op-ugc-pct),rgba(255,255,255,.35) var(--op-ugc-pct))}.op-ugc-lb .op-ugc-lb__seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:#fff}.op-ugc-lb .op-ugc-lb__seek::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}.op-ugc-lb .op-ugc-lb__hint{position:absolute;z-index:3;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translate(-50%);width:40px;height:4px;border-radius:2px;background:#ffffff8c;pointer-events:none}@media(hover:hover)and (pointer:fine){.op-ugc-lb .op-ugc-lb__hint{display:none}}@media(prefers-reduced-motion:reduce){.op-ugc-lb .op-ugc-lb__shade,.op-ugc-lb .op-ugc-lb__stage{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/79/assets/op-ugc-rail.css.map */