/* =====================================================
   Product Card Hover Image - Styles
   ===================================================== */

/* Make the image wrapper a positioning context */
li.product .et_shop_image {
  position: relative;
  overflow: hidden;
}

/* Hover image: sits on top of the main image, hidden by default */
li.product .et_shop_image .tdg-product-hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
  pointer-events: none;
}

/* Show hover image when hovering the product card */
li.product:hover .et_shop_image .tdg-product-hover-img {
  opacity: 1;
}

/* Keep the Divi overlay above the hover image */
li.product .et_shop_image .et_overlay {
  z-index: 2;
}