/* ================================================
   Product Hover Second Image — hover.css
   BeTheme + Elementor + WooCommerce compatible
   ================================================ */

/* --- 1. Image wrapper ko relative + overflow hidden banao --- */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
}

/* --- 2. Primary image (pehli wali) — normal position, slow zoom on hover --- */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img.wp-post-image,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link img.wp-post-image,
ul.products li.product .woocommerce-LoopProduct-link img.wp-post-image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.6s ease !important;
    backface-visibility: hidden;
}

/* --- 3. Primary image fades out + zooms on hover --- */
.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link img.wp-post-image,
.woocommerce-page ul.products li.product:hover .woocommerce-LoopProduct-link img.wp-post-image,
ul.products li.product:hover .woocommerce-LoopProduct-link img.wp-post-image {
    opacity: 0;
    transform: scale(1.07);
}

/* --- 4. Second image wrap — perfectly overlaid on top of first image --- */
.phi-second-wrap {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    line-height: 0;
}

/* --- 5. Second image — hidden, zoomed in, ready to appear --- */
.phi-second-wrap img.phi-second-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity 0.5s ease, transform 0.6s ease !important;
    backface-visibility: hidden;
}

/* --- 6. Second image appears + zooms to normal on hover --- */
ul.products li.product:hover .phi-second-wrap img.phi-second-img,
.woocommerce ul.products li.product:hover .phi-second-wrap img.phi-second-img,
.woocommerce-page ul.products li.product:hover .phi-second-wrap img.phi-second-img {
    opacity: 1;
    transform: scale(1);
}

/* --- 7. BeTheme specific fix --- */
.products .product .image-fade_in_back img,
.products .product figure img {
    transition: opacity 0.5s ease, transform 0.6s ease !important;
}

/* --- 8. Elementor widget fix --- */
.elementor-widget-woocommerce-products ul.products li.product .woocommerce-LoopProduct-link {
    position: relative;
    overflow: hidden;
    display: block;
}

.elementor-widget-woocommerce-products ul.products li.product:hover .woocommerce-LoopProduct-link img.wp-post-image {
    opacity: 0;
    transform: scale(1.07);
}

.elementor-widget-woocommerce-products ul.products li.product:hover .phi-second-wrap img.phi-second-img {
    opacity: 1;
    transform: scale(1);
}