/* ==========================================================================
   WV PDP Hero — F5 / Bundle gallery column
   --------------------------------------------------------------------------
   Bespoke design: large main-image rectangle (16:9) + horizontal thumb
   strip (3:2 tiles) with prev/next arrow controls. Class names stay on
   the legacy .wv-pdp-generic__* namespace pending a site-wide BEM rename.

   Loaded on F5 and Bundle PDPs only (the generic template uses
   parts/pdp-hero-generic.php + wv-pdp-hero-generic.css instead).
   ========================================================================== */

.wv-pdp-generic__gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wv-pdp-generic__main-image {
  display: block;
  width: 100%;
  /* 16:9 = ~21% shorter than the previous 7:5. Fixed across all products
     and image aspects (template is non-dynamic per spec). object-fit:
     cover on the inner img centers content; whatever doesn't fit at the
     sides gets cropped. */
  aspect-ratio: 16 / 9;
  border-radius: var(--wv-radius-lg);
  overflow: hidden;
  background: var(--wv-color-surface);
}

/* The WebP mu-plugin wraps wp_get_attachment_image output in
   <picture><source><img></picture> when a .webp sibling exists.
   Without intervention the picture becomes the immediate child of
   .main-image and the img's width: 100% / height: 100% then
   reference the picture (which sizes to intrinsic img content =
   full source width) instead of the 16:9 main-image container.
   object-fit: cover stops cropping correctly. display: contents
   removes the picture from the layout tree so the img is treated
   as the immediate child — matches the pre-helper behavior. */
.wv-pdp-generic__main-image picture {
  display: contents;
}

.wv-pdp-generic__main-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-pdp-generic__thumbs-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wv-pdp-generic__thumbs-carousel {
  flex: 1;
  min-width: 0;
}

.wv-pdp-generic__thumb {
  width: 100%;
  /* 3:2 = 33% shorter than the previous 1:1. Fixed across all products
     and image aspects (template is non-dynamic per spec). */
  aspect-ratio: 3 / 2;
  border-radius: var(--wv-radius-lg);
  overflow: hidden;
  background: var(--wv-color-surface);
}

/* Picture wrapper from the WebP mu-plugin — flatten so thumb-img's
   width/height percentages reference the 3:2 thumb container. */
.wv-pdp-generic__thumb picture {
  display: contents;
}

.wv-pdp-generic__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-pdp-generic__thumbs-carousel .wv-carousel__track > * {
  flex: 0 0 calc(50% - 8px);
}