/* Base styles */
.product-image-swap {
    position: relative;
    display: block;
    width: 100%;
}

.product-image-swap img {
    display: block;
    width: 100%;
}

.product-image-swap .swap-image {
    display: none;
}

/* Enable swap effect only on devices that support hover */
@media (hover: hover) {
    .product-image-swap .swap-image {
        display: block;
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity .3s;
    }

    /* Trigger swap on product card hover */
    .products.woocommerce .repeater-item:hover .product-image-swap .swap-image {
        opacity: 1;
    }
}