/*
Theme Name: StepChild
Theme URI: https://roseavenue.co.za/
Description: Divi child theme with a simple WooCommerce secondary-image hover for product cards.
Author: Rose Avenue
Version: 1.0.1
Template: Divi
Text Domain: stepchild
*/

/* Keep the alternate photo bounded to the product image area. */
.woocommerce ul.products li.product {
  position: relative;
}

.woocommerce ul.products li.product .ra-secondary-product-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.woocommerce ul.products li.product .ra-secondary-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.woocommerce ul.products li.product .et_shop_image:hover ~ .ra-secondary-product-image {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.woocommerce ul.products li.product .et_shop_image img {
  transition: opacity 0.25s ease !important;
}

.woocommerce ul.products li.product .et_shop_image:hover img {
  opacity: 0;
}

/* Suppress the mispositioned secondary layer from the old WPZOOM plugin. */
.woocommerce ul.products li.product .wpzoom-secondary-image-container {
  display: none !important;
}