.bec-fpv-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.bec-fpv-layer video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

/* Flatsome product image area is the ONLY hover trigger. */
.product-small .box-image {
    position: relative;
}

.product-small .box-image:hover > .bec-fpv-layer,
.product-small .box-image .bec-fpv-layer.is-playing {
    opacity: 1;
    visibility: visible;
}

/* Hide Flatsome's back/hover image only while our video is active. */
.product-small .box-image:has(> .bec-fpv-layer.is-playing) .back-image,
.product-small .box-image:has(> .bec-fpv-layer.is-playing) .image-fade,
.product-small .box-image:has(> .bec-fpv-layer.is-playing) .image-zoom {
    opacity: 0;
}

/* Swatches/buttons are never made part of the video layer's hit area. */
.bec-fpv-layer,
.bec-fpv-layer video {
    pointer-events: none !important;
}

@media (hover: none), (pointer: coarse) {
    .bec-fpv-layer {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bec-fpv-layer {
        transition: none;
    }
}