/* ═══════════════════════════════════════════
   WV Product Card — Badges  (v1, non-frozen)
   ═══════════════════════════════════════════
   Companion to the FROZEN .wv-card product-card component in
   wv-components.css. Adds image-overlay badges only — it never
   restyles the frozen base.

   Slots:
     • First5 badge → top-LEFT  (.wv-card__badge--first5)
       Brand-identity marker. Shows on any product with a `first5-role`
       term, regardless of stock.
     • Sale badge   → top-RIGHT (.wv-card__badge--sale)
       Shows when on-sale AND in-stock. Shares the top-right corner with
       the frozen .wv-card__oos-badge, but the two are MUTUALLY EXCLUSIVE
       in markup (out-of-stock → OOS badge; in-stock + on-sale → Sale
       badge), so they never overlap. The right corner is the home for
       future promo badges — switch to a flex stack here when a second
       one is added.

   Art: assets/images/badges/badge-first5.*  /  badge-sale.*  (SVG
   preferred, else WebP/PNG). parts/product-card.php resolves the asset
   with a file_exists() guard, so a badge renders ONLY once its art is
   uploaded — this file is inert until then.

   CHANGELOG
   ─────────
   2026-06-16 (v1): Initial badge layer — First5 (top-left) + Sale
                    (top-right). Logic + scaffold; visible once art lands.
   ═══════════════════════════════════════════ */

.wv-card__badge {
  position: absolute;
  top: 10px;
  z-index: 4; /* above .wv-card__image-bg + .wv-card__image-link; OOS badge is z-index 3 */
  width: 52px;
  height: auto;
  max-height: 64px;
  pointer-events: none; /* clicks fall through to the product image link beneath */
}

.wv-card__badge--first5 {
  left: 10px;
}

.wv-card__badge--sale {
  right: 10px;
}