/* ============================================================================
   PRODUCT CARD — the site-wide canonical product-card system.
   Single source of truth (Director, 2026-07-11 — the ED-CARDS2 look, rolled out).
   The signature: white full-bleed image top  →  brand-tinted text body
   →  NO category badge on the card (P/POM/GSL shows on the product page,
   not the card)  →  hover-lift  →  rounded, clipped corners.

   Unifies the legacy product-card class systems that each lived in a separate
   inline stylesheet and none of which agreed:
     .product-card — shop category pages      (.thumb + .pill + .body)
     .prod-card    — shop storefront          (.prod-icon + .prod-badge + .prod-body)
     .cx-card      — condition pages          (.cx-img + .cx-pill + .cx-body)
     .cp-card      — contraception grid        (.cp-img + .cp-pill-* + .cp-body)
     .hb-card      — catalogue/taxonomy hubs  (.hb-img + .hb-body; already badge-less)
   The ED/WL hubs (#treatments .ds-card + .edp-media) are the reference look and
   stay defined in wl-ds.css — this sheet brings the other five into line.

   Injected on every nav-bearing page by build_public.py, AFTER the page's own
   inline <style>, so it wins the cascade; load-bearing props are flagged
   !important so link order can't break the look. Self-contained literal hex
   (no page-token dependency) so it works on every page regardless of its tokens.

   Brand tint:  body #e7f1ef · border #d3e4e0 · hover #e1eeea / border #bcdcd5
   ============================================================================ */

/* ── The card shell: tinted, rounded, clipped, lifts on hover ─────────────── */
.product-card,
.prod-card,
.cx-card,
.cp-card,
.hb-card {
  background: #e7f1ef !important;
  border: 1px solid #d3e4e0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;               /* clips the white image block to the rounded top */
}
.product-card:hover,
.prod-card:hover,
.cx-card:hover,
.cp-card:hover,
.hb-card:hover {
  border-color: #bcdcd5 !important;
  background: #e1eeea !important;
}

/* ── The image block: pure WHITE, full-bleed, flush, no divider ───────────── */
/*   (`:not(.cover)` leaves the condition-page cover-PHOTO tiles untouched.)    */
.product-card .thumb,
.prod-card .prod-icon,
.cx-img:not(.cover),
.cp-img,
.hb-img {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 0 !important;               /* kill the old hairline under the image */
}

/* category cards: let the pack shot fill more of the frame (beats inline 78%) */
.product-card .thumb { aspect-ratio: 4 / 3; padding: 14px 12px; }
.product-card .thumb img {
  max-width: 92% !important;
  max-height: 90% !important;
  width: auto; height: auto; object-fit: contain;
}
/* condition cards: nudge the pack shot up from 82% so it reads at grid density */
.cx-img:not(.cover) img { max-width: 90% !important; max-height: 90% !important; }
/* storefront icon/photo slot: a touch taller so the photo has room */
.prod-card .prod-icon { height: 150px; }
.prod-card .pimg { padding: 12px !important; }

/* ── The text body: brand tint (colour starts here, off the white image) ──── */
.product-card .body,
.prod-card .prod-body,
.cx-body,
.cp-body,
.hb-body {
  background: #e7f1ef !important;
}

/* ── Drop the category badge FROM THE CARD (it shows on the product page) ──── */
.product-card .pill,
.prod-card .prod-badge,
.cx-pill,
.cp-pill,
.cp-pill-p, .cp-pill-pom, .cp-pill-gsl {
  display: none !important;
}

/* ── Footer/divider hairlines: retint so they read on the tinted body ─────── */
.product-card .footer-row,
.prod-card .prod-foot {
  border-top-color: rgba(10,46,54,.10) !important;
}

/* Respect reduced motion (the cards' own hover-lift transitions stay in-page) */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover, .prod-card:hover, .cx-card:hover, .cp-card:hover, .hb-card:hover {
    transform: none !important;
  }
}