/* Melatone shop — single source of truth for product presentation.
   Linked LAST on every shop page so it resolves the two-card-system drift into one.
   Overrides existing classes (no DOM rename needed) per the design resolution. */
:root{
  --mlt-panel:#F7F2E9;      /* flat product-image ground everywhere */
  --mlt-card:#FCFAF3;
  --mlt-ink:#26221C;
  --mlt-muted:#6B6258;      /* body/label muted — WCAG-safe on cream (was #7C7468, failed) */
  --mlt-accent:#9C8E77;     /* DECORATIVE soft accent (borders, fills) — NOT for text on cream */
  --mlt-ink-accent:#6E6350; /* TEXT accent — same taupe family, darkened to pass 4.5:1 on cream */
  --mlt-hair:#E4DBCB;
  --mlt-rad:18px;
  --mlt-shadow:0 18px 42px -30px rgba(70,58,40,.42);
  --mlt-shadow-h:0 28px 54px -30px rgba(70,58,40,.5);
}

/* 1. ONE image rule: flat ground, trust the photo's baked shadow, never a CSS drop-shadow */
.prod-thumb-lg img,.shp-pcard .ph img,.shp-ccard .pimg img,.prod-thumb img,.prod-card .prod-thumb img{filter:none !important}
.panel-warm,.panel-stone{background:var(--mlt-panel) !important}
.prod-thumb-lg{background:var(--mlt-panel) !important;border-radius:22px !important;overflow:hidden}
.shp-ccard .pimg,.shp-pcard .ph,.prod-thumb{background:var(--mlt-panel) !important}

/* 2. ONE card: legacy .prod-card adopts the soft system — but NOT the dark editorial cards */
.prod-card:not(.prod-card--dark){background:var(--mlt-card) !important;border:none !important;border-radius:var(--mlt-rad) !important;box-shadow:var(--mlt-shadow) !important;transition:transform .2s,box-shadow .2s}
.prod-card:not(.prod-card--dark):hover{transform:translateY(-3px);box-shadow:var(--mlt-shadow-h) !important}

/* 3. ONE badge: soft cream pill, never a dark filled box. Both brandtag (grid + PDP hero) and save badge. */
.prod-badge,.prod-thumb .brandtag,.prod-thumb-lg .brandtag{background:rgba(252,250,243,.94) !important;color:var(--mlt-ink-accent) !important;border:1px solid var(--mlt-hair) !important;border-radius:999px !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:.06em}

/* 4. ONE add-to-basket colour: near-black */
.prod-add,.btn-primary{background:var(--mlt-ink) !important;border-radius:999px !important;color:#F7F2E9 !important}
.prod-add:hover,.btn-primary:hover{background:var(--mlt-ink-accent) !important}

/* 5. Accent TEXT uses the WCAG-safe ink-accent; decorative accents stay #9C8E77.
      nav-pill dropped from this sweep so it keeps nav.css's own compliant colour. */
.eyebrow,.eyebrow .rule,.concern-chip,.prod-detail-link,.prod-card:hover .prod-name,.prod-card:focus-within .prod-name,.so-tag{color:var(--mlt-ink-accent) !important}
.mlt-cart-count,.mlt-basket .mlt-cart-count{background:var(--mlt-accent) !important;color:#FBF7EF !important}
.concern-chip.is-active,.concern-chip[aria-pressed="true"]{color:#FAF7F2 !important;background:#1A1A1A !important;border-color:#1A1A1A !important}

/* 5b. Dark editorial cards ("Book a skin assessment" / "Ask before you start"): keep their dark ground + light text, winning over the sweeps above */
.prod-card--dark,.prod-card--dark:hover{background:#2B2723 !important;border:1px solid #2B2723 !important;box-shadow:var(--mlt-shadow) !important}
.prod-card--dark .eyebrow{color:#CEAE7C !important}
.prod-card--dark .prod-name,.prod-card--dark:hover .prod-name{color:#FAF7F2 !important}
.prod-card--dark .prod-desc{color:rgba(250,247,242,.72) !important}

/* 6. Usage-forward size selector: bold size name + WCAG-safe usage/price microcopy */
.size-opt{border:1.5px solid var(--mlt-hair) !important;border-radius:12px !important;padding:13px 20px !important;background:var(--mlt-card) !important;text-align:left !important}
.size-opt[aria-pressed="true"]{border-color:var(--mlt-ink) !important;background:#fff !important}
.size-opt .so-size{font-weight:600 !important;font-size:15px !important;color:var(--mlt-ink) !important;display:block}
.size-opt .so-price{font-size:12px !important;color:var(--mlt-muted) !important}
.size-opt .so-usage{display:block;font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:.02em;color:var(--mlt-ink-accent);font-weight:500;margin-top:2px}
.size-opt[aria-pressed="true"] .so-usage{color:var(--mlt-ink-accent)}

/* 7. Shop-scoped: unify legacy champagne-600 link utility to the WCAG-safe ink-accent */
.text-champagne-600{color:var(--mlt-ink-accent) !important}