/* ==========================================================================
   WV PDP Hero — Generic gallery column
   --------------------------------------------------------------------------
   Typical-ecommerce single-rectangle gallery. All product images (main
   + WC gallery) stack horizontally as scroll-snap slides; the browser
   handles touch / trackpad swipe via overflow-x: auto. A thumbnail
   strip below syncs with the carousel via wv-pdp-hero-generic.js
   (hidden when only 0 or 1 images).

   Aspect: 1:1 square. White background fills any space the image's
   natural aspect doesn't cover (object-fit: contain, no crop). Loaded
   on generic PDPs only.
   ========================================================================== */

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

/* ── Main rectangle: scroll-snap carousel ─────────────────────────── */

.wv-pdp-hero-generic__main {
  width: 100%;
  /* 5:4 — 20% shorter than the prior 1:1 square (designer call
     2026-06-02). Width still fills the column. */
  aspect-ratio: 5 / 4;
  background: #fff;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
}
.wv-pdp-hero-generic__main::-webkit-scrollbar {
  display: none;
}

.wv-pdp-hero-generic__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

/* 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 flex
   child of .slide, and the img's max-width: 100% / object-fit:
   contain rules then reference the picture (which sizes to
   intrinsic img content = full source width) instead of the slide.
   display: contents removes the picture from the layout tree so
   the img is treated as the immediate flex child — matches the
   pre-helper behavior. */
.wv-pdp-hero-generic__slide picture {
  display: contents;
}

.wv-pdp-hero-generic__slide-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* never crop; white surrounds short axis */
  display: block;
}

/* ── Thumb strip ──────────────────────────────────────────────────── */

.wv-pdp-hero-generic__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wv-pdp-hero-generic__thumbs::-webkit-scrollbar {
  display: none;
}

.wv-pdp-hero-generic__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-sm);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--wv-transition-fast);
}

.wv-pdp-hero-generic__thumb:hover {
  border-color: var(--wv-color-text-secondary);
}

.wv-pdp-hero-generic__thumb[aria-current="true"] {
  border-color: var(--wv-color-text-primary);
}

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

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