/* ============================================================
   Secondary product image on hover — shop archives (v1.5.40+).

   PHP enqueues this on shop / product_cat / product_tag /
   post_type_archive=product. JS injects an <img class=
   "wlpp-secondary-img"> inside each .products li.product's image
   container; this CSS handles the cross-fade on hover.

   Mobile is gated server-side (wp_is_mobile early-returns) AND
   client-side (display:none below 768px) — belt + braces, since
   wp_is_mobile is UA-based and unreliable.
   ============================================================ */

/* The card's image container needs to anchor the absolute overlay
   and clip overflow so the secondary doesn't bleed past the
   primary. Divi uses .et_shop_image; vanilla WC uses
   .woocommerce-loop-product__link / .woocommerce-LoopProduct-link.
   Cover all three. */
.products li.product .et_shop_image,
.products li.product .woocommerce-loop-product__link,
.products li.product a.woocommerce-LoopProduct-link {
    position: relative;
    overflow: hidden;
}

/* Hide Divi's default product-card overlay (the white + icon panel
   that fades in on hover). With the secondary image active, the
   overlay double-stacks the hover effect; cleanest UX is one or the
   other. This rule is in the secondary-image stylesheet on purpose
   so toggling the feature off in the admin (which stops loading
   this file) instantly restores Divi's default overlay. */
.products li.product .et_overlay {
    display: none !important;
}

.wlpp-secondary-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 2;
}

.products li.product:hover .wlpp-secondary-img {
    opacity: 1;
}

@media (max-width: 768px) {
    .wlpp-secondary-img {
        display: none;
    }
}