.lp-ugc-reel{display:block;overflow:clip;position:relative;isolation:isolate}.lp-ugc-reel .lp-ugc-reel__track{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:var(--lp-space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:8%;padding:var(--lp-space-2) 8%;margin-inline:calc(-1 * var(--lp-gutter));scrollbar-width:none}.lp-ugc-reel__track::-webkit-scrollbar{display:none}.lp-ugc-reel__card{display:grid;gap:.6rem;scroll-snap-align:center;min-width:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease}.lp-ugc-reel__open{position:relative;display:block;width:100%;aspect-ratio:9 / 16;padding:0;border:0;overflow:hidden;border-radius:var(--lp-radius);background:var(--s-card);color:var(--s-text);cursor:pointer;box-shadow:0 0 0 1px var(--s-line),0 24px 48px -28px color-mix(in srgb,var(--lp-inverted-bg) 55%,transparent);transition:box-shadow .4s ease}.lp-ugc-reel__open:focus-visible{outline:3px solid var(--lp-accent-glow);outline-offset:3px}.lp-ugc-reel__poster,.lp-ugc-reel__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.lp-ugc-reel__video{opacity:0;transition:opacity .4s ease}.lp-ugc-reel__card.is-playing .lp-ugc-reel__video{opacity:1}.lp-ugc-reel__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:color-mix(in srgb,var(--lp-inverted-bg) 45%,transparent);color:var(--lp-inverted-text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translate(-50%,-50%);transition:opacity .3s ease,transform .3s ease}.lp-ugc-reel__play .lp-icon{width:1.25rem;height:1.25rem;margin-left:.15rem;fill:currentColor}.lp-ugc-reel__card.is-playing .lp-ugc-reel__play{opacity:0;transform:translate(-50%,-50%) scale(.8)}.lp-ugc-reel__open:hover .lp-ugc-reel__play{transform:translate(-50%,-50%) scale(1.08)}.lp-ugc-reel__meta{font-size:var(--lp-step--1);color:var(--s-muted);text-align:center}.lp-ugc-reel__meta strong{color:var(--s-text);font-weight:800;margin-right:.35rem}.lp-ugc-reel__card:not(.is-active){opacity:.6;transform:scale(.92)}.lp-ugc-reel__card.is-active .lp-ugc-reel__open{box-shadow:0 0 0 2px var(--s-accent, var(--lp-accent)),0 28px 56px -28px var(--lp-accent-glow)}.lp-ugc-reel__dots{display:flex;justify-content:center;gap:.5rem;margin-top:var(--lp-space-3)}.lp-ugc-reel__dot{width:.5rem;height:.5rem;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--s-text) 25%,transparent);cursor:pointer;transition:transform .3s ease,background-color .3s ease}.lp-ugc-reel__dot.is-active{background:var(--s-accent, var(--lp-accent));transform:scale(1.35)}.lp-ugc-reel__dot:before{content:"";position:absolute;top:-1rem;right:-1rem;bottom:-1rem;left:-1rem}.lp-ugc-reel__dot{position:relative}.lp-ugc-reel__ctas{justify-content:center;margin-top:var(--lp-space-4)}.lp-ugc-reel__viewer{width:min(100vw,56.25dvh);height:100dvh;max-width:100vw;max-height:100dvh;padding:0;border:0;background:transparent;color:var(--lp-inverted-text)}.lp-ugc-reel__viewer::backdrop{background:color-mix(in srgb,var(--lp-inverted-bg) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.lp-ugc-reel__stage{position:relative;width:100%;height:100%}.lp-ugc-reel__full{width:100%;height:100%;object-fit:contain;background:transparent}.lp-ugc-reel__progress{position:absolute;left:1rem;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));height:3px;border-radius:2px;background:color-mix(in srgb,var(--lp-inverted-text) 25%,transparent);overflow:hidden}.lp-ugc-reel__progress span{display:block;height:100%;width:0;background:var(--lp-inverted-text)}.lp-ugc-reel__caption{position:absolute;left:1rem;right:1rem;bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 1rem);font-size:var(--lp-step--1);text-shadow:0 1px 8px color-mix(in srgb,var(--lp-inverted-bg) 80%,transparent)}.lp-ugc-reel__caption:empty{display:none}.lp-ugc-reel__ctl{position:absolute;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:color-mix(in srgb,var(--lp-inverted-bg) 45%,transparent);color:var(--lp-inverted-text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}.lp-ugc-reel__ctl .lp-icon{width:1.2rem;height:1.2rem}.lp-ugc-reel__close{top:max(1rem,env(safe-area-inset-top));right:1rem}.lp-ugc-reel__mute{top:max(1rem,env(safe-area-inset-top));left:1rem}.lp-ugc-reel__toggle{top:calc(max(1rem,env(safe-area-inset-top)) + 3.25rem);left:1rem}.lp-ugc-reel__mute .lp-icon:last-child,.lp-ugc-reel__mute[aria-pressed=true] .lp-icon:first-child{display:none}.lp-ugc-reel__mute[aria-pressed=true] .lp-icon:last-child{display:block}.lp-ugc-reel__toggle .lp-icon:last-child,.lp-ugc-reel__viewer.is-paused .lp-ugc-reel__toggle .lp-icon:first-child{display:none}.lp-ugc-reel__viewer.is-paused .lp-ugc-reel__toggle .lp-icon:last-child{display:block}.lp-ugc-reel__jump{position:absolute;bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 3rem);display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem .3rem .3rem;border:0;border-radius:var(--lp-radius-pill);background:color-mix(in srgb,var(--lp-inverted-bg) 55%,transparent);color:var(--lp-inverted-text);font:800 var(--lp-step--1)/1 var(--lp-font-heading);letter-spacing:.04em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}.lp-ugc-reel__jump img{width:2rem;height:2rem;border-radius:50%;object-fit:cover}.lp-ugc-reel__jump--prev{left:1rem}.lp-ugc-reel__jump--next{right:1rem;flex-direction:row-reverse;padding:.3rem .3rem .3rem .8rem}.lp-ugc-reel__jump[hidden]{display:none}.lp-js .lp-fade:not(.is-visible) .lp-ugc-reel__card{opacity:0;transform:translateY(24px)}.lp-fade.is-visible .lp-ugc-reel__card{transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--lp-ugc-reel-i, 0) * .08s),opacity .5s ease calc(var(--lp-ugc-reel-i, 0) * .08s)}@media(min-width:48rem){.lp-ugc-reel .lp-ugc-reel__track{margin-inline:auto;padding-inline:0;overflow:visible;scroll-snap-type:none}.lp-ugc-reel--row .lp-ugc-reel__track{grid-auto-columns:minmax(0,1fr);gap:var(--lp-space-4);max-width:calc(var(--lp-ugc-reel-count, 4) * 16rem)}.lp-ugc-reel--row .lp-ugc-reel__card:not(.is-active){opacity:1;transform:none}.lp-ugc-reel--spotlight .lp-ugc-reel__track{display:block;position:relative;height:calc(var(--lp-ugc-reel-card, 16rem) * 16 / 9 + 3rem)}.lp-ugc-reel--spotlight .lp-ugc-reel__card{--k: var(--lp-ugc-reel-k, 0);--d: max(var(--k), -1 * var(--k));position:absolute;left:50%;top:0;width:var(--lp-ugc-reel-card, 16rem);margin-left:calc(-.5 * var(--lp-ugc-reel-card, 16rem));opacity:1;transform:translate(calc((var(--k) + var(--lp-ugc-reel-shift, 0)) * var(--lp-ugc-reel-card, 16rem) * .98)) scale(calc(1 - (min(var(--d),1)*.12)));z-index:calc(10 - var(--d));transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .4s ease,filter .4s ease}.lp-ugc-reel--spotlight .lp-ugc-reel__card:not(.is-active){filter:saturate(.85) brightness(.85);cursor:pointer}.lp-ugc-reel--spotlight .lp-ugc-reel__card:not(.is-active):hover{filter:none}.lp-ugc-reel--spotlight .lp-ugc-reel__card:not(.is-active) .lp-ugc-reel__meta{opacity:0}.lp-ugc-reel--spotlight .lp-ugc-reel__dots{display:none}.lp-js .lp-fade:not(.is-visible) .lp-ugc-reel--spotlight .lp-ugc-reel__card,.lp-js .lp-ugc-reel--spotlight.lp-fade:not(.is-visible) .lp-ugc-reel__card{transform:translate(calc((var(--k) + var(--lp-ugc-reel-shift, 0)) * var(--lp-ugc-reel-card, 16rem) * .98)) translateY(24px) scale(calc(1 - (min(var(--d),1)*.12)))}.lp-ugc-reel__viewer{width:min(56.25dvh,34rem);height:min(100dvh,60.4rem);border-radius:var(--lp-radius);overflow:hidden}}@media(min-width:64rem){.lp-ugc-reel--spotlight{--lp-ugc-reel-card: 17rem}}@media(prefers-reduced-motion:reduce){.lp-ugc-reel__card,.lp-ugc-reel__video,.lp-ugc-reel__play,.lp-ugc-reel__dot,.lp-ugc-reel__open{transition:none}.lp-js .lp-fade:not(.is-visible) .lp-ugc-reel__card{opacity:1;transform:none}}
/*# sourceMappingURL=/cdn/shop/t/328/assets/lp-ugc-reel.css.map */