/*
 Theme Name: Divi Hover Second Image Child
 Theme URI: https://example.com/
 Description: Child theme for Divi to show the second WooCommerce product image on hover.
 Author: ChatGPT
 Template: Divi
 Version: 1.0
*/

/* WooCommerce: show second product image on hover in product loops */
.woocommerce ul.products li.product {
    position: relative;
}

/* Second image (from gallery) */
.woocommerce ul.products li.product a img.second-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

/* Main product image */
.woocommerce ul.products li.product a img.wp-post-image {
    transition: opacity .3s ease-in-out;
}

/* On hover: swap visibility */
.woocommerce ul.products li.product a:hover img.second-image {
    opacity: 1;
}
.woocommerce ul.products li.product a:hover img.wp-post-image {
    opacity: 0;
}


/* WooCommerce: show second product image on hover in product loops */
.woocommerce ul.products li.product {
    position: relative;
}

/* Second image (from gallery) */
.woocommerce ul.products li.product a img.second-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

/* Main product image */
.woocommerce ul.products li.product a img.wp-post-image {
    transition: opacity .3s ease-in-out;
}

/* On hover: swap visibility */
.woocommerce ul.products li.product a:hover img.second-image {
    opacity: 1;
}
.woocommerce ul.products li.product a:hover img.wp-post-image {
    opacity: 0;
}