.ugc{display:block}.ugc__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px}.ugc__heading{margin:0}.ugc__controls{display:flex;gap:12px}.ugc__control{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:rgb(var(--text-color, 18 18 18));background-color:transparent;border:1px solid rgba(var(--text-color, 18 18 18),.25);border-radius:var(--button-border-radius, 2px);transition:opacity .2s,background-color .2s,border-color .2s}.ugc__control:hover{background-color:rgba(var(--text-color, 18 18 18),.06)}.ugc__control svg{width:18px;height:18px}.ugc__control:disabled{opacity:.3;cursor:default;pointer-events:none}.ugc__list{display:flex;gap:16px;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.ugc__list::-webkit-scrollbar{display:none}.ugc__item{flex:0 0 calc((100% - 48px)/4);scroll-snap-align:start}.ugc__card{position:relative;display:block;width:100%;aspect-ratio:var(--ugc-card-ratio, 4 / 5);border:none;padding:0;border-radius:var(--block-border-radius-reduced, 12px);overflow:hidden;background-color:rgba(var(--text-color, 18 18 18),.06);cursor:pointer}.ugc__card video,.ugc__card img{width:100%;height:100%;object-fit:cover;pointer-events:none}.ugc__caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:24px 12px 12px;color:#fff;font-size:1.3rem;line-height:1.3;text-align:left;background:linear-gradient(to top,#0000008c,#0000);pointer-events:none}.ugc__play{display:flex;position:absolute;bottom:12px;right:12px;pointer-events:none;color:#000;width:40px;height:40px;align-items:center;justify-content:center;background-color:#fff;border-radius:100px}.ugc__play svg{width:20px;height:20px}.ugc__popup{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px 14px;visibility:hidden;pointer-events:none;background-color:#0009;opacity:0;transition:opacity .3s,visibility .3s}.ugc__popup.open{visibility:visible;pointer-events:all;opacity:1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.ugc__popup-inner{position:relative;width:min(100%,380px);aspect-ratio:9 / 16;max-height:calc(100dvh - 40px);opacity:0;transform:scale(.9);transition:transform .3s,opacity .3s}.ugc__popup.open .ugc__popup-inner{opacity:1;transform:scale(1)}.ugc__bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:6px;z-index:4}.ugc__bar{flex:1;height:3px;border-radius:3px;background-color:#ffffff59;overflow:hidden}.ugc__bar span{display:block;width:0;height:100%;border-radius:3px;background-color:#fff;transition:width .2s linear}.ugc__bar.no-transition span{transition:none}.ugc__head{position:absolute;top:28px;right:12px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4}.ugc__close,.ugc__toggle,.ugc__sound{width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background-color:#00000080;color:#fff;cursor:pointer;transition:background-color .3s}.ugc__close:hover,.ugc__toggle:hover,.ugc__sound:hover{background-color:#000c}.ugc__close svg,.ugc__toggle svg,.ugc__sound svg{width:22px;height:22px}.ugc__popup .icon--volume-off,.ugc__popup .icon--play,.ugc__popup.is-paused .icon--pause,.ugc__popup.muted .icon--volume-on{display:none}.ugc__popup.muted .icon--volume-off,.ugc__popup.is-paused .icon--play{display:block}.ugc__popup.is-image .ugc__sound{display:none}.ugc__stage{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;background-color:#000}.ugc__slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden}.ugc__slide.active{opacity:1;visibility:visible;cursor:pointer}.ugc__slide video,.ugc__slide img{width:100%;height:100%;object-fit:cover}.ugc__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;border:1px solid #fff;background-color:transparent;color:#fff;cursor:pointer;z-index:4;transition:opacity .3s,background-color .3s}.ugc__nav:hover{background-color:#fff3}.ugc__nav svg{width:24px;height:24px}.ugc__nav.is-disabled{opacity:.3;pointer-events:none}.ugc__nav--prev{left:-60px}.ugc__nav--next{right:-60px}@media screen and (max-width:989px){.ugc__nav{width:36px;height:36px;background-color:#00000073;border:none}.ugc__nav svg{width:20px;height:20px}.ugc__nav--prev{left:10px}.ugc__nav--next{right:10px}}@media screen and (max-width:989px){.ugc__item{flex-basis:calc((100% - 2 * 16px) / 3)}}@media screen and (max-width:749px){.ugc__header{margin:0 0 16px}.ugc__controls{display:none}.ugc__list{gap:12px}.ugc__item{flex-basis:calc((100% - 12px) / 2.2)}.ugc__card{border-radius:8px}.ugc__play{bottom:10px;right:10px;width:32px;height:32px}.ugc__play svg{width:16px;height:16px}.ugc__head{top:26px;right:10px;gap:10px}.ugc__close,.ugc__toggle,.ugc__sound{width:36px;height:36px}}
/*# sourceMappingURL=/cdn/shop/t/52/assets/eg-ugc.css.map */