.ugc{display:block;--ugc-per-view: 4;--ugc-per-view-mobile: 1;--ugc-ratio: 9 / 16;--ugc-radius: 16px;--ugc-gap: 12px}.ugc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-block-end:18px}.ugc__head-text{min-width:0}.ugc__heading{margin:0;font-size:clamp(1.25rem,3vw,1.875rem);line-height:1.15}.ugc__sub{margin:6px 0 0;font-size:var(--font-size--xs, .875rem);color:rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, .65))}.ugc__arrows{display:none;flex-shrink:0;gap:8px}@media screen and (min-width:750px){.ugc__arrows{display:flex}}.ugc__arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid rgb(var(--color-foreground-rgb) / .18);border-radius:50%;background:var(--color-background);color:var(--color-foreground);cursor:pointer;transition:background var(--animation-speed, .2s) var(--animation-easing, ease),color var(--animation-speed, .2s) var(--animation-easing, ease),opacity var(--animation-speed, .2s) var(--animation-easing, ease)}.ugc__arrow svg{width:18px;height:18px}.ugc__arrow:hover:not([disabled]){background:var(--color-foreground);color:var(--color-background)}.ugc__arrow[disabled]{opacity:.3;cursor:default}.ugc__track{display:grid;grid-auto-flow:row;grid-template-columns:repeat(var(--ugc-per-view-mobile),minmax(0,1fr));gap:var(--ugc-gap)}@media screen and (min-width:750px){.ugc__track{grid-template-columns:repeat(var(--ugc-per-view),minmax(0,1fr))}}.ugc__track--slider{grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--ugc-per-view-mobile) - 1) * var(--ugc-gap)) / var(--ugc-per-view-mobile));grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding-block-end:2px}.ugc__track--slider::-webkit-scrollbar{display:none}@media screen and (min-width:750px){.ugc__track--slider{grid-auto-columns:calc((100% - (var(--ugc-per-view) - 1) * var(--ugc-gap)) / var(--ugc-per-view));grid-template-columns:none}}.ugc__track--slider:focus-visible{outline:2px solid var(--color-foreground);outline-offset:4px}.ugc__item{scroll-snap-align:start;min-width:0}.ugc__media{position:relative;aspect-ratio:var(--ugc-ratio);border-radius:var(--ugc-radius);overflow:hidden;background:rgb(var(--color-foreground-rgb) / .06);isolation:isolate}.ugc__media :is(video,img,iframe,svg){width:100%;height:100%;object-fit:cover;display:block;border:0}.ugc__embed,.ugc__placeholder{position:absolute;top:0;right:0;bottom:0;left:0}.ugc__badge{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:3;padding:4px 10px;border-radius:999px;background:#0000008c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.ugc__play,.ugc__sound{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:#00000080;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;transition:opacity var(--animation-speed, .2s) var(--animation-easing, ease),transform var(--animation-speed, .2s) var(--animation-easing, ease)}.ugc__play{top:0;right:0;bottom:0;left:0;margin:auto;width:54px;height:54px}.ugc__play svg{width:22px;height:22px;margin-inline-start:3px}.ugc__play:hover{transform:scale(1.06)}.ugc__item[data-playing] .ugc__play{opacity:0;pointer-events:none}.ugc__sound{inset-block-end:10px;inset-inline-end:10px;width:34px;height:34px}.ugc__sound svg{width:16px;height:16px}.ugc__sound .ugc__sound-on{display:none}.ugc__sound[aria-pressed=true] .ugc__sound-on{display:block}.ugc__sound[aria-pressed=true] .ugc__sound-off{display:none}.ugc__meta{padding-block-start:10px}.ugc__caption{margin:0;font-size:var(--font-size--xs, .8125rem);line-height:1.35;color:var(--color-foreground)}.ugc__author{margin:3px 0 0;font-size:.6875rem;color:rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, .65))}.ugc__shop{display:flex;align-items:center;gap:8px;margin-block-start:9px;padding:6px;border:1px solid rgb(var(--color-foreground-rgb) / .12);border-radius:10px;text-decoration:none;color:inherit;transition:border-color var(--animation-speed, .2s) var(--animation-easing, ease)}.ugc__shop:hover{border-color:rgb(var(--color-foreground-rgb) / .35)}.ugc__shop img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex-shrink:0}.ugc__shop-text{display:flex;flex-direction:column;min-width:0;flex:1;font-size:.6875rem;line-height:1.25}.ugc__shop-text strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ugc__shop-cta{flex-shrink:0;padding:5px 10px;border-radius:999px;background:var(--color-foreground);color:var(--color-background);font-size:.625rem;font-weight:700}.ugc__dots{display:flex;justify-content:center;gap:6px;margin-block-start:14px}.ugc__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgb(var(--color-foreground-rgb) / .22);cursor:pointer;transition:width var(--animation-speed, .2s) var(--animation-easing, ease),background var(--animation-speed, .2s) var(--animation-easing, ease)}.ugc__dot[aria-selected=true]{width:20px;border-radius:999px;background:var(--color-foreground)}.ugc__empty{padding:28px 0;text-align:center;color:rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, .65))}@media(prefers-reduced-motion:reduce){.ugc__track--slider{scroll-behavior:auto}.ugc__play:hover{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/39/assets/ugc-video.css.map */