.video-frame-section{position:relative;overflow:hidden;background-color:var(--bg-color, #111);width:100%}.video-frame-section__bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.video-frame-section__bg img{width:100%;height:100%;object-fit:cover;display:block}.video-frame-section__inner{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;padding:40px 0}.video-frame-section__container{width:100%;max-width:var(--max-width, 900px);margin:0 auto;padding:0 var(--video-padding, 50px);box-sizing:border-box}.video-frame-section__frame{border:var(--frame-width, 4px) solid var(--frame-color, #fff);border-radius:var(--frame-radius, 16px);overflow:hidden;display:inline-block;width:100%;box-sizing:border-box}.video-frame-section__video-wrapper{position:relative;width:100%;aspect-ratio:9 / 16;background:#000;display:block}.video-frame-section__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.video-frame-section__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ffffff80;gap:12px}.video-frame-section__placeholder svg{width:64px;height:64px;opacity:.6}.video-frame-section__placeholder p{font-size:14px;margin:0;text-align:center;padding:0 20px}.video-frame-section__controls{position:absolute;bottom:16px;right:16px;display:flex;gap:10px;z-index:10}.video-ctrl{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:#0000008c;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s ease,transform .15s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.video-ctrl:hover{background:#000c;transform:scale(1.08)}.video-ctrl svg{width:22px;height:22px}@media screen and (max-width:749px){.video-frame-section__inner{padding:24px 0}.video-frame-section__container{padding:0 16px;max-width:100%}.video-frame-section__controls{bottom:12px;right:12px;gap:8px}.video-ctrl{width:40px;height:40px}.video-ctrl svg{width:20px;height:20px}}@media screen and (max-width:480px){.video-frame-section__inner{padding:16px 0}.video-frame-section__container{padding:0 12px}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/section-video-frame.css.map */