/* Image swap effect for Topseller and Premium cards */
.hover-container {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1; /* Base z-index for the wrapper */
}

/* Product label (Topseller / Top Choice / Premium) */
.product-special-heading {
  color: #888;
  font-size: 1.25rem;
  font-variant: all-small-caps;
  position: absolute;
  z-index: 5; /* Above media, but below global UI overlays */
  pointer-events: none; /* Do not block clicks on the product card */
  transition: color 0.3s ease;
}

/* Turn label text white on hover */
.product-container:hover .product-special-heading,
.hover-container:hover .product-special-heading {
  color: #ffffff !important;
}

/* Positioning for second and third labels (stacked) */
.product-special-heading + .product-special-heading {
  top: 50px; /* Offset for the second label */
}

.product-special-heading + .product-special-heading + .product-special-heading {
  top: 85px; /* Offset for the third label */
}

/* Main image inside the hover wrapper */
.hover-container .swap-target {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease-out;
  position: relative;
  z-index: 1; /* Base image layer */
}

/* Grid of hover slices above the base image */
.hover-slices {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  z-index: 2; /* Slices above the main image */
  height: 100%;
}

/* Each slice spans full height */
.hover-slices .slice {
  height: 100%;
}

/* Wrapper for video-based hover (Top Choice) */
.video-hover-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Video layer used on hover */
.video-hover-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1; /* Keep labels and UI above the video */
}