/* =============================================
   WC Featured Video – Frontend
   ============================================= */

/* ── Poster wrapper (visible before click) ── */
.wc-fv-poster-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    float: left;
}

/* ── Orientation: poster inherits aspect ratio from parent slide ── */
.wc-fv-orient-portrait .wc-fv-video-active {
    aspect-ratio: 9 / 16;
}

.wc-fv-orient-landscape .wc-fv-video-active {
    aspect-ratio: 16 / 9;
}

.wc-fv-orient-square .wc-fv-video-active {
    aspect-ratio: 1 / 1;
}

.wc-fv-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

/* ── Play button overlay ── */
.wc-fv-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.2s ease, opacity 0.2s ease;
    outline: none;
}

.wc-fv-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.wc-fv-play-btn svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* ── Video container (shown after click) ── */
.wc-fv-video-active {
    position: relative;
    width: 100%;
    background: #000;
}

.wc-fv-video-active iframe,
.wc-fv-video-active video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Smooth FlexSlider height transition ── */
.woocommerce-product-gallery .flex-viewport {
    transition: height 0.35s ease;
}

/* ── Prevent WooCommerce zoom / lightbox on video slides ── */
.wc-fv-slide .zoomImg,
.wc-fv-slide .woocommerce-product-gallery__trigger {
    display: none !important;
}

.wc-fv-slide {
    cursor: default !important;
}

/* Keep the poster wrapper interactive, block the zoom layer */
.wc-fv-slide .zoom {
    pointer-events: none;
}

.wc-fv-poster-wrap,
.wc-fv-video-active {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.wc-fv-slide iframe,
.wc-fv-slide video {
    pointer-events: auto;
}

/* ── Gallery nav thumbnails ── */
.flex-control-thumbs img[src^="data:image/svg"] {
    object-fit: cover;
}