/* Product Image Gallery */
/**
 * =================================================================================
 * WooCommerce Product Image Slideshow CSS (v2 - Improved)
 * =================================================================================
 *
 * Styles for the automatic cross-fade animation on product cards.
 * v2: Adds aspect-ratio for layout stability and object-fit for image consistency.
 */

/* 1. Wrapper Styling */
/* Set up the container to hold the layered images and maintain its shape. */
.product-image-wrapper {
  position: relative;
  display: block;
  overflow: hidden;

  /* Modern CSS for a perfect square aspect ratio. */
  aspect-ratio: 1 / 1;

  /* Fallback for older browsers (padding-top hack for 1:1 ratio). */
  height: 0;
  padding-top: 100%;
}

/* 2. Image Layering & Fit */
/* Position both images within the wrapper and ensure they cover the area. */
.product-image-wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Make image fill the wrapper's height */
  object-fit: cover; /* Ensures image covers the area without distortion */
  transition: opacity 1s ease-in-out;
}

/* 3. Animation Logic */
/* By default, the secondary image is hidden. */
.product-image-wrapper .secondary-product-image {
  opacity: 0;
}

/* Only apply animation when the 'has-gallery-animation' class is present. */
.has-gallery-animation .main-product-image {
  animation: crossfade 10s infinite;
}

.has-gallery-animation .secondary-product-image {
  animation: crossfade-secondary 10s infinite;
}

/* 4. Keyframes for the Cross-Fade Effect (Unchanged) */
/* Defines the 10-second animation cycle for the main image. */
@keyframes crossfade {
  0%,
  40% {
    opacity: 1;
  } /* Main image visible for 4s */
  50%,
  90% {
    opacity: 0;
  } /* Main image hidden for 4s */
  100% {
    opacity: 1;
  } /* Loop back to visible */
}

/* Defines the 10-second animation cycle for the secondary image. */
@keyframes crossfade-secondary {
  0%,
  40% {
    opacity: 0;
  } /* Secondary image hidden for 4s */
  50%,
  90% {
    opacity: 1;
  } /* Secondary image visible for 4s */
  100% {
    opacity: 0;
  } /* Loop back to hidden */
}