/* Jantel WooCommerce Hover Image 1.1.0 */

.jwh-hover-wrap {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.jwh-hover-original {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity .35s ease, visibility 0s linear .35s !important;
}

.jwh-hover-original img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.jwh-hover-secondary {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 3 !important;
    transition: opacity .35s ease, visibility 0s linear .35s !important;
}

.jwh-hover-secondary img.jwh-hover-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    margin: 0 !important;
}

.jwh-hover-wrap:hover .jwh-hover-original {
    opacity: 0 !important;
    visibility: hidden !important;
}

.jwh-hover-wrap:hover .jwh-hover-secondary {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity .35s ease !important;
}

/* Los botones de Jantel quedan por encima del efecto. */
.product .jwh-hover-wrap {
    z-index: 1;
}

/* No activarlo en pantallas táctiles. */
@media (hover: none), (pointer: coarse) {
    .jwh-hover-secondary {
        display: none !important;
    }
}