/* WC 360° Video v2.7 */

/* ── SHOP PAGE LOOP ──────────────────────────── */
.wc360-loop-wrap{
    position:relative;width:100%;
    padding-bottom:100%;height:0;
    background:#111;overflow:hidden;border-radius:inherit;
}
.wc360-loop-wrap video,
.wc360-loop-wrap iframe{
    position:absolute;top:0;left:0;width:100%;height:100%;border:none;
}
.wc360-loop-video{object-fit:cover;pointer-events:none;}
.wc360-loop-iframe{pointer-events:none;}
.wc360-loop-badge{
    position:absolute;top:8px;left:8px;
    background:rgba(0,0,0,.65);color:#fff;
    font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;
    pointer-events:none;z-index:5;
}

/* ── SINGLE PRODUCT — OVERLAY on FlexSlider slide ── */
/*
   Lumilux FlexSlider: .woocommerce-product-gallery__image
   contains <a><img>. We keep that intact and overlay video on top.
*/
.wc360-slide-active{
    position:relative !important;
    overflow:hidden !important;
}

/* Video overlay — fills slide completely */
.wc360-video-overlay{
    position:absolute;
    top:0;left:0;
    width:100% !important;
    height:100% !important;
    object-fit:contain;
    background:#000;
    z-index:10;
    display:block;
    cursor:pointer;
}

/* iFrame overlay (YouTube/Vimeo) */
.wc360-iframe-overlay{
    position:absolute;
    top:0;left:0;
    width:100% !important;
    height:100% !important;
    border:none;
    z-index:10;
}

/* 360° badge on main slide */
.wc360-badge-overlay{
    position:absolute;
    top:12px;left:12px;
    background:rgba(0,0,0,.7);color:#fff;
    font-size:11px;font-weight:700;
    padding:3px 10px;border-radius:20px;
    pointer-events:none;z-index:15;
    letter-spacing:.3px;
}

/* Mute button */
.wc360-mute-overlay{
    position:absolute;
    bottom:12px;right:12px;
    background:rgba(0,0,0,.6);
    border:none;color:#fff;
    font-size:15px;width:36px;height:36px;
    border-radius:50%;cursor:pointer;
    z-index:15;padding:0;line-height:36px;
    text-align:center;transition:background .2s;
}
.wc360-mute-overlay:hover{background:rgba(0,0,0,.9);}

/* ── THUMBNAIL STRIP 360° badge ─────────────── */
.flex-control-thumbs li{
    position:relative;
}
.wc360-thumb-badge{
    position:absolute;
    bottom:3px;left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    background:rgba(0,0,0,.75);color:#fff;
    font-size:8px;font-weight:700;
    padding:1px 6px;border-radius:10px;
    pointer-events:none;white-space:nowrap;
    z-index:10;letter-spacing:.3px;
}

/* ── Responsive ──────────────────────────────── */
@media(max-width:768px){
    .wc360-badge-overlay{font-size:10px;padding:2px 7px;}
    .wc360-mute-overlay{width:30px;height:30px;font-size:13px;line-height:30px;}
}