/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/








/* Ensure the wrapper sets up the stacking context */
.product-image-swap-wrapper {
    position: relative;
    overflow: hidden; /* Helps prevent content spilling out */
    display: block; /* Ensure it behaves like a block element */
    line-height: 0; /* Remove extra space below images */
}

/* Styles for the main image */
.product-image-swap-wrapper .main-product-image {
    position: relative;
    z-index: 2; /* Main image is on top initially */
    opacity: 1;
    transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
    width: 100%; /* Ensure image fills its container */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

/* Styles for the secondary image */
.product-image-swap-wrapper .secondary-product-image {
    position: absolute; /* Position it over the main image */
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1; /* Secondary image is below main image initially */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
    display: block;
}

/* On hover, swap the opacities */
.product-image-swap-wrapper:hover .main-product-image {
    opacity: 0; /* Hide main image */
}

.product-image-swap-wrapper:hover .secondary-product-image {
    opacity: 1; /* Show secondary image */
}

/* Ensure the entire product card is the hover target, not just the image */
/* You might need to adjust '.product' or '.astra-shop-loop-item' based on Astra's actual class for the product card */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap, /* Astra specific class for thumbnail wrap */
.woocommerce ul.products li.product .product-image-swap-wrapper {
    display: block; /* Ensure the image area is a block to properly contain the swap */
    position: relative; /* May be needed if not already set */
    overflow: hidden; /* Important for the images to not overlap if they're different sizes */
}

/* If the hover effect isn't triggering on the product image, it might be on the whole product card. */
/* Try applying the hover to the parent `.product` container if the above doesn't work. */
.woocommerce ul.products li.product:hover .main-product-image {
    opacity: 0;
}
.woocommerce ul.products li.product:hover .secondary-product-image {
    opacity: 1;
}