/* ============================================================
   Magellan Longevity — Product economics badges
   Injected by js/product-enrich.js onto product cards (.card),
   PDP buy boxes (.buybox) and per-molecule pages (public/m/).
   Dark-theme pill strip that reads as a distinct "economics"
   row regardless of whether the surrounding card is light or dark.
   Self-contained: defines its own --me-* vars (with site-palette
   fallbacks) so it renders correctly even where the page does
   not expose the storefront's :root variables.
   ============================================================ */
:root{
  --me-bg:#0d2b2e;            /* navy strip background */
  --me-bg2:#123b40;           /* slightly lighter for gradient */
  --me-line:rgba(255,255,255,.10);
  --me-ink:#eaf6f9;           /* light text on the strip */
  --me-mut:#9fc3c9;           /* muted light text */
  --me-star:#e8a838;          /* gold star + price/serving accent */
  --me-prime:#3fd0c9;         /* teal Prime accent */
  --me-prime-bg:rgba(63,208,201,.14);
}

/* The strip itself */
.me-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  margin:4px 0 2px;
  padding:7px 10px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--me-bg),var(--me-bg2));
  border:1px solid var(--me-line);
  font-size:12px;
  line-height:1.2;
  color:var(--me-ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
/* tighter variant for dense grids if a host sets it */
.me-badges.me-compact{padding:5px 8px;gap:6px 8px;font-size:11.5px}

/* generic badge cell */
.me-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  font-weight:600;
}

/* rating */
.me-rating .me-star{color:var(--me-star);font-size:12.5px;line-height:1}
.me-rating .me-rval{color:var(--me-ink);font-weight:800}
.me-rating .me-rcount{color:var(--me-mut);font-weight:500}

/* thin separators between cells */
.me-sep{
  width:1px;
  height:12px;
  background:var(--me-line);
  display:inline-block;
  flex:0 0 auto;
}

/* price-per-serving */
.me-pps .me-pval{color:var(--me-star);font-weight:800}
.me-pps .me-plabel{color:var(--me-mut);font-weight:500}

/* Prime pill */
.me-prime{
  color:var(--me-prime);
  font-weight:800;
  background:var(--me-prime-bg);
  border:1px solid rgba(63,208,201,.30);
  border-radius:20px;
  padding:2px 8px;
  letter-spacing:.02em;
}
.me-prime .me-check{font-weight:900}

/* sample-data flag (only shown for source:"sample") */
.me-sample{
  color:var(--me-mut);
  font-weight:600;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.85;
  cursor:help;
  border-bottom:1px dotted var(--me-mut);
}

/* on the PDP buy box the strip can span full width with a touch more room */
.buybox .me-badges{margin:10px 0 4px;font-size:12.5px}

/* respect users who prefer less motion / high contrast: nothing animates,
   but ensure text stays legible if a host forces a light filter */
@media (prefers-contrast:more){
  .me-badges{border-color:rgba(255,255,255,.25)}
}