/*
 * Only cards that frontend.js confirms have a product Hover Video receive
 * these classes. Products without a video keep Nayla's native behavior.
 */
.nayla-single-product.leon-nphv-ready .product-image {
    position: relative;
}

.nayla-single-product.leon-nphv-ready .leon-nphv-video {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    object-fit: cover;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.nayla-single-product.leon-nphv-ready.leon-nphv-playing .leon-nphv-video {
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms ease;
}

/* Nayla normally hides the front image on hover to reveal gallery image #2.
 * Video products must keep the normal thumbnail visible underneath until the
 * video is actually ready, preventing a flash of the gallery image.
 */
.nayla-single-product.leon-nphv-ready:hover img.product-image-front {
    visibility: visible !important;
}

@media (hover: none), (pointer: coarse) {
    .nayla-single-product.leon-nphv-ready .leon-nphv-video {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nayla-single-product.leon-nphv-ready .leon-nphv-video {
        display: none !important;
    }
}