/* ═══════════════════════════════════════════
   WV PDP Hero — Badges  (v1, non-frozen)
   ═══════════════════════════════════════════
   First5 (top-left) + Sale / Out-of-Stock (top-right) overlaid on the PDP main
   product image. Mirrors the product-card badge system at PDP scale. Markup:
   parts/pdp-hero-badges.php. Live toggle (Sale/OOS): wv-pdp-hero-info.js.

   Positioning parents (made relative here): the GENERIC hero anchors on
   .wv-pdp-hero-generic__gallery — its __main is a horizontal scroll-carousel, so
   badges can't live inside it or they'd scroll away; the FIRST5/Bundle hero
   anchors on .wv-pdp-generic__main-image (a single image box).

   CHANGELOG
   ─────────
   2026-06-16 (v1): First5 + Sale + OOS, mobile-first sizing.
   ═══════════════════════════════════════════ */

.wv-pdp-hero-generic__gallery,
.wv-pdp-generic__main-image {
  position: relative;
}

.wv-pdp-hero__badge,
.wv-pdp-hero__oos-badge {
  position: absolute;
  top: 12px;
  z-index: 4;            /* above the image; below any modal/overlay */
  pointer-events: none;  /* clicks fall through to the image/gallery */
}

/* Ribbon art (First5 / Sale). Mobile-first: smaller on phones, larger desktop. */
.wv-pdp-hero__badge {
  width: 96px;
  max-width: 96px;
  height: auto;
}

.wv-pdp-hero__badge--first5 { left: 12px; }
.wv-pdp-hero__badge--sale   { right: 12px; }

/* The frozen global `img { display: block }` reset is author-origin, so it
   overrides the UA `[hidden] { display: none }` — re-assert it so the JS
   toggle (el.hidden = true) actually hides the Sale badge <img>. */
.wv-pdp-hero__badge[hidden] {
  display: none;
}

/* Out-of-stock pill — text; typography from .wv-label-reg (applied in markup),
   so no font/color is redeclared here. Background + shape only, matching the
   product-card OOS badge treatment. */
.wv-pdp-hero__oos-badge {
  right: 12px;
  background: var(--wv-color-placeholder);
  padding: 6px 12px;
  border-radius: var(--wv-radius-pill);
}

@media (min-width: 768px) {
  .wv-pdp-hero__badge {
    width: 120px;
    max-width: 120px;
  }
}