social-video.social-video-card{display:block;width:100%;height:100%}.social-video-card__media{position:relative;overflow:hidden;width:100%;padding-bottom:var(--social-video-ratio, 177.78%);border-radius:var(--social-video-radius, 1.2rem);background:#000}.social-video-card__video,.social-video-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover}.social-video-card__placeholder .placeholder-svg{width:100%;height:100%}.social-video-card__gradient{position:absolute;inset-inline:0;z-index:2;pointer-events:none}.social-video-card__gradient--top{top:0;height:32%;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent)}.social-video-card__gradient--bottom{bottom:0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}.social-video-card__open{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}.social-video-card__header{position:absolute;top:0;inset-inline:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;pointer-events:none}.social-video-card__footer{position:absolute;bottom:0;inset-inline:0;z-index:4;padding:1rem;pointer-events:none}.social-video-card__icon,.social-video-card__volume{display:inline-flex;align-items:center;justify-content:center;padding:.4rem;border:0;background:transparent;color:#fff;cursor:pointer;pointer-events:auto}.social-video-card__icon svg,.social-video-card__volume svg{width:var(--social-icon-size, 2rem);height:var(--social-icon-size, 2rem);fill:currentColor;color:#fff}.social-video-card__volume{filter:drop-shadow(0 .1rem .2rem rgba(0,0,0,.4))}.social-video-card__volume-icon--unmuted,.social-video-card__volume[data-volume=unmuted] .social-video-card__volume-icon--muted{display:none}.social-video-card__volume[data-volume=unmuted] .social-video-card__volume-icon--unmuted{display:block}@media(hover:hover)and (pointer:fine){.social-video-card__volume{opacity:0;transition:opacity var(--duration-default) ease}.social-video-card:hover .social-video-card__volume,.social-video-card:focus-within .social-video-card__volume{opacity:1}}.social-video-card__caption{display:flex;align-items:center;gap:.6rem;color:#fff}.social-video-card__avatar{flex-shrink:0;width:var(--social-avatar-size, 3rem);height:var(--social-avatar-size, 3rem);border-radius:50%;object-fit:cover}.social-video-card__handle{margin:0;font-size:1.25rem;font-weight:600;line-height:1.1;color:#fff;text-shadow:0 .1rem .3rem rgba(0,0,0,.4)}.social-reel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:0;background:#000000db;opacity:0;visibility:hidden;transition:opacity var(--duration-default) ease,visibility var(--duration-default) ease}.social-reel.is-open{opacity:1;visibility:visible}.social-reel__stage{position:relative;height:100vh;max-height:100dvh;aspect-ratio:9 / 16;max-width:100%;overflow:hidden;border-radius:0;background:#000;box-shadow:0 2rem 6rem #00000080}.social-reel__video{display:block;width:100%;height:100%;object-fit:cover}.social-reel__iframe{display:none;width:100%;height:100%;border:0}.social-reel__caption{position:absolute;bottom:0;inset-inline:0;z-index:2;display:flex;align-items:center;gap:.6rem;padding:1.4rem;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}.social-reel__avatar{width:3.2rem;height:3.2rem;border-radius:50%;object-fit:cover}.social-reel__handle{margin:0;font-weight:600}.social-reel__close,.social-reel__nav{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border:0;border-radius:50%;background:#ffffffeb;color:#111;cursor:pointer;transition:background var(--duration-short) ease,transform var(--duration-short) ease}.social-reel__close svg,.social-reel__nav svg{width:1.8rem;height:1.8rem;fill:currentColor}.social-reel__close:hover,.social-reel__nav:hover{background:#fff;transform:scale(1.05)}.social-reel__close{top:1.4rem;right:1.4rem}.social-reel__nav{top:50%;transform:translateY(-50%)}.social-reel__nav:hover{transform:translateY(-50%) scale(1.05)}.social-reel__nav[disabled]{opacity:.4;pointer-events:none}.social-reel__prev{inset-inline-start:.6rem}.social-reel__next{inset-inline-end:.6rem}@media screen and (min-width:750px){.social-reel{padding:2rem}.social-reel__stage{height:min(88vh,90rem);max-height:none;border-radius:1.4rem}.social-reel__prev{inset-inline-start:1.4rem}.social-reel__next{inset-inline-end:1.4rem}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-social-video.css.map */