/* General Styles for Product Image Area */
.product-card .product-image {
  position: relative; /* Needed for absolute positioning */
  overflow: hidden; /* Hide overflowing slides/images */
  aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
  background-color: #f0f0f0; /* Placeholder background */
}

/* Base image style (single image or first image before hover) */
.product-card .product-image > img:not(.desktop-hover-img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Swiper container styles (Mobile only via media query below) */
.product-image .swiper-container {
  width: 100%;
  height: 100%;
  display: none; /* Hidden by default, enabled on mobile */
}

.product-image .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee; /* Slide background */
}

.product-image .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* Prevent dragging image itself on mobile */
  user-select: none;
  -webkit-user-drag: none;
}

/* Swiper Pagination dots */
.product-image .swiper-pagination {
  position: absolute;
  bottom: 10px !important; /* Position dots at the bottom */
  left: 50% !important;
  transform: translateX(-50%);
  width: auto !important; /* Allow dots to take natural width */
  display: none; /* Hidden by default, enabled on mobile */
}

.product-image .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: background-color 0.3s ease;
}

.product-image .swiper-pagination-bullet-active {
  background-color: rgba(255, 255, 255, 1);
}

/* Desktop Hover Effect Styles */
@media (min-width: 769px) {
  /* Hide Swiper elements on desktop */
  .product-image.has-multiple-images .swiper-container,
  .product-image.has-multiple-images .swiper-pagination {
    display: none !important;
  }

  /* Style the fallback images used for desktop hover */
  .product-image.has-multiple-images .desktop-hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Hide both initially */
    pointer-events: none;
    transition: opacity 0.4s ease-in-out; /* Smooth transition */
    z-index: 1;
    display: block !important; /* Ensure they are block elements */
  }

  /* Show the first desktop image by default */
  .product-image.has-multiple-images .desktop-img-1 {
    opacity: 1;
    z-index: 2; /* Above the second image */
  }

  /* On hover over the product card, fade out first, fade in second */
  .product-card:hover .product-image.has-multiple-images .desktop-img-1 {
    opacity: 0;
    z-index: 1;
  }

  .product-card:hover .product-image.has-multiple-images .desktop-img-2 {
    opacity: 1;
    z-index: 3; /* Ensure second is on top when hovered */
  }
}

/* Mobile Swipe Gallery Styles */
@media (max-width: 768px) {
  /* Hide desktop fallback images on mobile */
  .product-image.has-multiple-images .desktop-hover-img {
    display: none !important;
  }

  /* Show Swiper elements on mobile */
  .product-image.has-multiple-images .swiper-container,
  .product-image.has-multiple-images .swiper-pagination {
    display: block; /* Or flex/grid as needed by Swiper */
  }
  .product-image.has-multiple-images .swiper-pagination {
    display: flex; /* Make pagination dots visible */
    justify-content: center;
  }

  /* Hide the single static image if Swiper is active */
  .product-image.has-multiple-images > img:not(.desktop-hover-img) {
    display: none;
  }
}