/* ==========================================================================
   Deadhead Chemist — light ground
   Every page except the homepage sits on warm off-white. The homepage keeps the
   original dark treatment untouched, and so do the pieces that are meant to read
   as dark inserts everywhere: the framed page hero, the testimonial band, the
   footer, and every overlay (search, cart, quick view, compare, age gate).
   Loads after pages.css.
   ========================================================================== */

:root {
  /* neutral text roles — the dark defaults */
  --body-strong: #F3F0E7;
  --body-copy:   #B6AEC4;
  --body-muted:  #A79FB5;
  --body-faint:  #8C849C;
  --body-rule:   rgba(243, 240, 231, .14);
  --body-line:   rgba(243, 240, 231, .1);
  --body-card:   rgba(243, 240, 231, .03);
  --body-accent: #3DE0C8;
  --body-link:   #3DE0C8;
}

body:not(.home) {
  --ground:      #F0EBE1;
  --surface:     #FBF8F1;
  --body-strong: #17151C;
  --body-copy:   #3A3442;
  --body-muted:  #4A4257;
  --body-faint:  #6D6478;
  --body-rule:   rgba(23, 21, 28, .16);
  --body-line:   rgba(23, 21, 28, .1);
  --body-card:   rgba(23, 21, 28, .03);
  --body-accent: #6B3FD4;
  --body-link:   #5B2AAE;

  background: var(--ground);
  color: var(--body-strong);
}

/* ── grounds ──────────────────────────────────────────────────────────── */
body:not(.home) .dh-sec--ink,
body:not(.home) .dh-sec--panel { background: var(--ground); }
body:not(.home) .dh-sec--panel { border-top-color: var(--body-line) !important; }
body:not(.home) .dh-sec--ivory { background: var(--surface); }

/* the drawn chemistry plate flips to its light rendering */
body:not(.home) [data-chem="dark"]::before { background-color: #12110F; opacity: .05; }
body:not(.home) [data-chem="dark"]:hover::before { opacity: .09; }

/* ── type ─────────────────────────────────────────────────────────────── */
body:not(.home) .dh-display,
body:not(.home) h1, body:not(.home) h2, body:not(.home) h3, body:not(.home) h4 { color: var(--body-strong); }
body:not(.home) .dh-em { color: var(--body-accent); }
body:not(.home) .dh-kicker { color: var(--body-accent); }
/* the variant picker's label is teal by default, which is 1.4:1 on the light
   ground -- it reads on the homepage's dark ground and nowhere else */
body:not(.home) .dh-fieldlabel { color: var(--body-accent); }
body:not(.home) .dh-meta { color: var(--body-faint); }
body:not(.home) .dh-lede { color: var(--body-copy); }
body:not(.home) a { color: var(--body-link); }
body:not(.home) a.dh-btn--grad:not(.dh-btn--hero),
body:not(.home) a.dh-btn--grad:not(.dh-btn--hero):visited {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
body:not(.home) a.dh-btn--grad:not(.dh-btn--hero):hover,
body:not(.home) a.dh-btn--grad:not(.dh-btn--hero):focus-visible,
body:not(.home) a.dh-btn--grad:not(.dh-btn--hero):active {
  color: #5B2AAE;
  -webkit-text-fill-color: #5B2AAE;
}
body:not(.home) a:hover { color: #2E1157; }
body:not(.home) .dh-headbar > .rule { background: var(--body-rule); }
body:not(.home) .dh-headrule .r-l { background: linear-gradient(90deg, rgba(107,63,212,0), var(--violet)); }
body:not(.home) .dh-headrule .r-r { background: linear-gradient(90deg, var(--teal-600), rgba(22,169,155,0)); }
body:not(.home) .dh-crumbs, body:not(.home) .dh-crumbs a { color: var(--body-faint); }
body:not(.home) .dh-crumbs li[aria-current] { color: var(--body-strong); }
body:not(.home) .dh-crumbs a:hover { color: var(--body-accent); }

/* the gradient is painted through the text, so the colour has to stay
   transparent -- `body:not(.home) a` above would otherwise fill it in solid */
body:not(.home) .dh-glink {
  background-image: linear-gradient(96deg, #6B3FD4 0%, #5B2AAE 42%, #0C6F66 100%);
  color: transparent;
}
body:not(.home) .dh-glink:hover { color: transparent; }
/* inside the dark chrome it keeps the homepage gradient */
body:not(.home) .dh-header .dh-glink,
body:not(.home) .dh-mega .dh-glink,
body:not(.home) .dh-drawer .dh-glink,
body:not(.home) .dh-footer .dh-glink,
body:not(.home) .dh-search .dh-glink,
body:not(.home) .dh-cart .dh-glink,
body:not(.home) .dh-quick .dh-glink,
body:not(.home) .dh-plp-hero .dh-glink,
body:not(.home) .dh-quote .dh-glink { background-image: var(--grad); color: transparent; }
body:not(.home) .dh-verified { color: #0C6F66; }

/* ── surfaces ─────────────────────────────────────────────────────────── */
body:not(.home) .dh-box {
  background: var(--surface);
  border-color: var(--body-line);
  color: var(--body-strong);
}
body:not(.home) .dh-box > h2, body:not(.home) .dh-box > h3 { color: var(--body-strong); }
body:not(.home) .dh-box p, body:not(.home) .dh-box span { color: inherit; }

body:not(.home) .dh-panel > .in { background: var(--surface); color: var(--body-strong); }
body:not(.home) .dh-emptystate > .in { background: var(--surface); }
body:not(.home) .dh-emptystate h2 { color: var(--body-strong); }
body:not(.home) .dh-emptystate p { color: var(--body-muted); }
body:not(.home) .dh-empty {
  background: rgba(123, 63, 214, .07);
  border-color: rgba(123, 63, 214, .26);
}
body:not(.home) .dh-empty h3 { color: var(--body-strong); }
body:not(.home) .dh-empty p { color: var(--body-muted); }

body:not(.home) .dh-lab > .in { background: var(--surface); }
body:not(.home) .dh-lab h3 { color: var(--body-strong); }
body:not(.home) .dh-lab p { color: var(--body-muted); }
body:not(.home) .dh-lab .batch { color: #0C6F66; }
body:not(.home) .dh-lab .seal circle,
body:not(.home) .dh-lab .seal g { stroke: var(--violet); }
body:not(.home) .dh-lab .seal text { fill: var(--violet); }

body:not(.home) .dh-note {
  background: rgba(123, 63, 214, .07);
  border-color: rgba(123, 63, 214, .28);
  color: var(--body-muted);
}
body:not(.home) .dh-note strong { color: var(--body-strong); }

/* ── steps, tables, lists ─────────────────────────────────────────────── */
body:not(.home) .dh-steps li { border-top-color: var(--body-strong); }
body:not(.home) .dh-steps .no { color: var(--violet); }
body:not(.home) .dh-steps h3 { color: var(--body-strong); }
body:not(.home) .dh-steps p { color: var(--body-muted); }

body:not(.home) .dh-table th { color: var(--body-faint); border-bottom-color: var(--body-line); }
body:not(.home) .dh-table td { color: var(--body-muted); border-bottom-color: var(--body-line); }

body:not(.home) .dh-editorial p,
body:not(.home) .dh-editorial ul,
body:not(.home) .dh-editorial ol { color: var(--body-copy); }
body:not(.home) .dh-editorial h2, body:not(.home) .dh-editorial h3 { color: var(--body-strong); }
body:not(.home) .dh-editorial blockquote {
  color: var(--body-strong);
  border-left-color: var(--violet);
  background: rgba(123, 63, 214, .06);
}
body:not(.home) .dh-editorial hr { border-top-color: var(--body-line); }

body:not(.home) .dh-seopicks a { color: var(--violet); }
body:not(.home) .dh-seo-pdp h2 { color: var(--body-strong); }
body:not(.home) .dh-seo-blurb { color: var(--body-muted); }

body:not(.home) .dh-faqlist details { border-bottom-color: var(--body-line); }
body:not(.home) .dh-faqlist summary { color: var(--body-strong); }
body:not(.home) .dh-faqlist summary::after { color: var(--violet); }
body:not(.home) .dh-faqlist .a { color: var(--body-muted); }

body:not(.home) .dh-acc { border-top-color: var(--body-line); }
body:not(.home) .dh-acc details { border-bottom-color: var(--body-line); }
body:not(.home) .dh-acc summary { color: var(--body-strong); }
body:not(.home) .dh-acc summary::after { color: var(--violet); }
body:not(.home) .dh-acc .panel { color: var(--body-muted); }
body:not(.home) .dh-acc dt { color: var(--body-faint); }
body:not(.home) .dh-acc dd { color: var(--body-strong); }

/* The long product copy sits on the light body surface. h5 is not in the
   blanket `body:not(.home) h1..h4` rule above, so it has to name its own
   colour or it keeps the dark theme's ivory on an off-white panel. */
body:not(.home) .dh-prosecopy p,
body:not(.home) .dh-prosecopy li { color: var(--body-muted); }
body:not(.home) .dh-prosecopy h4,
body:not(.home) .dh-prosecopy h5 { color: var(--body-strong); }
body:not(.home) .dh-prosecopy.is-clamped::after {
  /* the buy column has no ground of its own, so this fades into --ground */
  background: linear-gradient(180deg, rgba(240,235,225,0), rgba(240,235,225,.97));
}
body:not(.home) .dh-prosetable { border-color: var(--body-line); }
body:not(.home) .dh-prosetable th,
body:not(.home) .dh-prosetable td { border-bottom-color: var(--body-line); }
body:not(.home) .dh-prosetable th { color: var(--body-strong); background: rgba(23,21,28,.05); }
body:not(.home) .dh-prosetable td { color: var(--body-muted); }
body:not(.home) .dh-prosemore { color: var(--violet); }

body:not(.home) .dh-statgrid .dh-stat { border-top-color: var(--body-strong); }
body:not(.home) .dh-stat .n { color: var(--body-strong); }
body:not(.home) .dh-stat .l { color: var(--body-faint); }

/* ── controls ─────────────────────────────────────────────────────────── */
body:not(.home) .dh-input,
body:not(.home) .dh-select,
body:not(.home) .dh-textarea {
  background: var(--surface);
  border-color: rgba(23, 21, 28, .2);
  color: var(--body-strong);
  color-scheme: light;
}
body:not(.home) .dh-input::placeholder,
body:not(.home) .dh-textarea::placeholder { color: #6D6478; }
body:not(.home) .dh-input:focus-visible,
body:not(.home) .dh-select:focus-visible,
body:not(.home) .dh-textarea:focus-visible { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(107,63,212,.16); }
body:not(.home) .dh-field > span { color: var(--body-faint); }

body:not(.home) .dh-btn--ghost { border-color: rgba(23, 21, 28, .24); color: var(--body-strong); }
body:not(.home) .dh-btn--ghost:hover { border-color: var(--violet); color: var(--violet); background: rgba(107,63,212,.06); }

body:not(.home) .dh-pager button { border-color: rgba(23, 21, 28, .22); color: var(--body-strong); }
body:not(.home) .dh-pager button[aria-current="page"] { background: var(--violet); border-color: var(--violet); color: var(--paper); }
body:not(.home) .dh-pagewrap > p { color: var(--body-faint); }

body:not(.home) .dh-radio { border-color: rgba(23, 21, 28, .2); }
body:not(.home) .dh-radio.is-on { border-color: var(--violet); background: rgba(107,63,212,.07); }
body:not(.home) .dh-radio strong { color: var(--body-strong); }
body:not(.home) .dh-radio span { color: var(--body-muted); }
body:not(.home) .dh-radio .p { color: var(--body-strong); }
body:not(.home) .dh-radio input { accent-color: var(--violet); }

body:not(.home) .dh-tabsbar { border-bottom-color: var(--body-line); }
body:not(.home) .dh-tabsbar button { color: var(--body-faint); }
body:not(.home) .dh-tabsbar button[aria-selected="true"] { color: var(--violet); border-bottom-color: var(--violet); }

body:not(.home) .dh-steps-nav .s { border-color: rgba(23,21,28,.18); color: var(--body-faint); }
body:not(.home) .dh-steps-nav .s.is-on { border-color: var(--violet); color: var(--violet); background: rgba(107,63,212,.08); }
body:not(.home) .dh-steps-nav .s.is-done { border-color: rgba(107,63,212,.4); color: var(--violet); }

body:not(.home) .dh-round { border-color: rgba(23,21,28,.24); }
body:not(.home) .dh-round svg { stroke: var(--body-strong); }
body:not(.home) .dh-qty { border-color: rgba(23,21,28,.24); }
body:not(.home) .dh-qty button, body:not(.home) .dh-qty span { color: var(--body-strong); }
body:not(.home) .dh-qty button:hover { color: var(--violet); }
body:not(.home) .dh-wishbtn { border-color: rgba(23,21,28,.24); }
body:not(.home) .dh-wishbtn svg { stroke: var(--body-strong); }
body:not(.home) .dh-remove { color: var(--violet); }
body:not(.home) .dh-remove:hover { color: #2E1157; }
body:not(.home) .dh-remove--x {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  color: var(--violet);
}
body:not(.home) .dh-remove--x svg { stroke: currentColor; }
body:not(.home) .dh-cart .dh-iconbtn,
body:not(.home) .dh-cart-close {
  color: var(--violet);
}
body:not(.home) .dh-cart .dh-iconbtn:hover,
body:not(.home) .dh-cart-close:hover {
  color: #2E1157;
}
body:not(.home) .dh-cart .dh-line-total {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--text-dark);
}
body:not(.home) .dh-cart .dh-remove--x { color: var(--violet); }

body:not(.home) .dh-pill {
  background: rgba(23, 21, 28, .04);
  border-color: rgba(107, 63, 212, .3);
  color: var(--body-strong);
}

/* ── cart / summary rows ──────────────────────────────────────────────── */
body:not(.home) .dh-cartrow { border-bottom-color: var(--body-line); }
body:not(.home) .dh-cartrow h3 { color: var(--body-strong); }
body:not(.home) .dh-sumline { color: var(--body-muted); }
body:not(.home) .dh-sumline.total { border-top-color: var(--body-strong); color: var(--body-strong); }
body:not(.home) .dh-ship .track { background: rgba(23, 21, 28, .1); }
body:not(.home) .dh-ship p { color: var(--body-faint); }

/* ── product detail ───────────────────────────────────────────────────── */
body:not(.home) .dh-buy h1,
body:not(.home) .dh-buy-title { color: var(--body-strong); }
body:not(.home) .dh-buy .price .now { color: var(--body-strong); }
body:not(.home) .dh-buy .price .was { color: var(--body-faint); }
body:not(.home) .dh-buy .tax { color: var(--body-faint); }
body:not(.home) .dh-buy .desc { color: var(--body-copy); }
/* Variant controls — hard purple so `button { color: inherit }` / ivory defaults cannot win. */
body:not(.home) .dh-variant,
body.pdp .dh-variant {
  border-color: rgba(107, 63, 212, .45) !important;
  background: rgba(107, 63, 212, .1) !important;
  color: #6B3FD4 !important;
  -webkit-text-fill-color: #6B3FD4 !important;
}
body:not(.home) .dh-variant[aria-pressed="true"],
body.pdp .dh-variant[aria-pressed="true"] {
  border-color: #6B3FD4 !important;
  background: rgba(107, 63, 212, .22) !important;
  color: #5B2AAE !important;
  -webkit-text-fill-color: #5B2AAE !important;
}
body:not(.home) .dh-variant:disabled,
body.pdp .dh-variant:disabled {
  opacity: .45;
  color: #6D6478 !important;
  -webkit-text-fill-color: #6D6478 !important;
  border-color: rgba(23, 21, 28, .18) !important;
  background: transparent !important;
}
body:not(.home) .dh-varselect,
body:not(.home) .dh-qopt-select,
body.pdp .dh-varselect {
  border-color: #6B3FD4 !important;
  color: #6B3FD4 !important;
  -webkit-text-fill-color: #6B3FD4 !important;
  background-color: #fff !important;
}
body:not(.home) .dh-qopt {
  border-color: rgba(107, 63, 212, .4);
  color: #6B3FD4 !important;
  -webkit-text-fill-color: #6B3FD4 !important;
  background: rgba(107, 63, 212, .08);
}
body:not(.home) .dh-qopt.is-on,
body:not(.home) .dh-qopt[aria-pressed="true"] {
  border-color: #6B3FD4;
  background: rgba(107, 63, 212, .18);
  color: #5B2AAE !important;
  -webkit-text-fill-color: #5B2AAE !important;
}

/* Mobile: hide inline chips — variation sheet opens from Add / Select option. */
@media (max-width: 860px) {
  .dh-variants,
  body:not(.home) .dh-variants,
  body.pdp .dh-variants,
  .dh-qopts,
  .dh-prod .dh-qopts,
  .dh-quick .dh-variants,
  .dh-varselect,
  .dh-qopt-select,
  body:not(.home) .dh-varselect,
  body.pdp .dh-varselect,
  #dh-var-label { display: none !important; }
}
@media (min-width: 861px) {
  .dh-varselect,
  .dh-qopt-select { display: none !important; }
  .dh-variants,
  body:not(.home) .dh-variants,
  body.pdp .dh-variants { display: flex !important; }
  .dh-prod .dh-qopts > .dh-qopt { display: inline-flex; }
}
body:not(.home) .dh-trustrow { border-top-color: var(--body-line); }
body:not(.home) .dh-trustrow strong { color: var(--body-strong); }
body:not(.home) .dh-trustrow span { color: var(--body-muted); }
body:not(.home) .dh-trustrow svg { stroke: var(--violet); }
body:not(.home) .dh-thumb { border-color: rgba(23,21,28,.14); }
body:not(.home) .dh-thumb[aria-current="true"] { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(107,63,212,.28); }
body:not(.home) .dh-sticky-buy {
  background: rgba(251, 248, 241, .97);
  border-color: rgba(23, 21, 28, .16);
}
body:not(.home) .dh-sticky-buy .p { color: var(--body-strong); }
body:not(.home) .dh-sticky-buy .n { color: var(--body-faint); }

body:not(.home) .dh-scorebox { background: var(--surface); border-color: var(--body-line); }
body:not(.home) .dh-scorebox .big { color: var(--body-strong); }
body:not(.home) .dh-bars .r { color: var(--body-faint); }
body:not(.home) .dh-bars .t { background: rgba(23, 21, 28, .1); }
body:not(.home) .dh-review { border-bottom-color: var(--body-line); }
body:not(.home) .dh-review h4 { color: var(--body-strong); }
body:not(.home) .dh-review p { color: var(--body-muted); }
body:not(.home) .dh-review .who { color: var(--body-faint); }

/* ── 404 ──────────────────────────────────────────────────────────────── */
body:not(.home) .dh-404 .code {
  background: linear-gradient(92deg, #6B3FD4 0%, #5B2AAE 45%, #0C6F66 100%);
  -webkit-background-clip: text; background-clip: text;
}
body:not(.home) .dh-404 p { color: var(--body-muted); }

/* ── things that stay dark on a light page ────────────────────────────── */
body:not(.home) .dh-plp-hero .dh-plp-copy h1,
body:not(.home) .dh-plp-hero .dh-pill { color: var(--ivory); }
body:not(.home) .dh-plp-hero .dh-plp-copy > p { color: var(--muted); }
body:not(.home) .dh-plp-hero .dh-pill { background: rgba(245,241,234,.06); border-color: rgba(205,183,255,.3); }
body:not(.home) .dh-plp-hero [data-chem="dark"]::before,
body:not(.home) .dh-quote [data-chem="dark"]::before { background-color: #F3F0E7; opacity: .1; }
body:not(.home) .dh-quote blockquote p { color: var(--ivory); }
body:not(.home) .dh-quote blockquote footer { color: var(--muted-3); }
body:not(.home) .dh-quote .dh-round svg { stroke: var(--ivory); }
body:not(.home) .dh-quote .dh-round { border-color: rgba(243,240,231,.26); }
body:not(.home) .dh-quote .dh-verified { color: var(--teal); }
body:not(.home) .dh-sec--favourites .dh-display,
body:not(.home) .dh-sec--favourites h2,
body:not(.home) .dh-sec--favourites .dh-stat .n { color: var(--ivory); }
body:not(.home) .dh-sec--favourites .dh-kicker { color: var(--teal); }
body:not(.home) .dh-sec--favourites .dh-stat { border-top-color: var(--ivory); }
body:not(.home) .dh-sec--favourites .dh-stat .l { color: var(--muted-3); }

/* Dark inserts on a light page re-declare the neutral roles, so any inline
   var(--body-*) inside them keeps reading light without further overrides. */
body:not(.home) .dh-plp-hero,
body:not(.home) .dh-merch,
body:not(.home) .dh-quote,
body:not(.home) .dh-sec--favourites,
body:not(.home) [data-dark-tile] {
  --body-strong: #F3F0E7;
  --body-copy:   #B6AEC4;
  --body-muted:  #A79FB5;
  --body-faint:  #8C849C;
  --body-rule:   rgba(243, 240, 231, .16);
  --body-line:   rgba(243, 240, 231, .1);
  --body-accent: #3DE0C8;
  --body-link:   #3DE0C8;
}

/* carousel progress rail on the light pages */
body:not(.home) .dh-progress { background: rgba(23, 21, 28, .12); }

/* ── the dark chrome is the same on every page ─────────────────────────────
   Header, mega menus, mobile drawer and bottom bar, footer and every overlay
   are dark surfaces wherever they appear, so the light ground must not reach
   inside them. The blanket `body:not(.home) h2` and `body:not(.home) a` rules
   above out-specify the component colours on their own, so the chrome both
   re-declares the neutral roles and restates the handful of colours those two
   rules would otherwise capture. */
body:not(.home) .dh-header,
body:not(.home) .dh-mega,
body:not(.home) #dh-mobilenav,
body:not(.home) .dh-drawer,
body:not(.home) .dh-mobilenav,
body:not(.home) .dh-footer,
body:not(.home) .dh-search,
body:not(.home) .dh-cart,
body:not(.home) .dh-quick,
body:not(.home) .dh-compare-modal,
body:not(.home) .dh-comparebar,
body:not(.home) .dh-agegate,
body:not(.home) #dh-toast-host {
  --body-strong: #F3F0E7;
  --body-copy:   #B6AEC4;
  --body-muted:  #A79FB5;
  --body-faint:  #8C849C;
  --body-rule:   rgba(243, 240, 231, .16);
  --body-line:   rgba(243, 240, 231, .1);
  --body-card:   rgba(243, 240, 231, .03);
  --body-accent: #3DE0C8;
  --body-link:   #3DE0C8;
}

/* mega menus */
body:not(.home) .dh-mega h3 { color: var(--teal); }
/* :not(.dh-glink) — that one paints gradient text through a transparent colour */
body:not(.home) .dh-mega a:not(.dh-glink),
body:not(.home) .dh-mega-link { color: var(--ivory); }
body:not(.home) .dh-mega a:not(.dh-glink):hover,
body:not(.home) .dh-mega-link:hover { color: var(--teal); }
body:not(.home) .dh-mega-feature h4 { color: var(--ivory); }
body:not(.home) .dh-mega-feature p { color: var(--muted-2); }
body:not(.home) .dh-mega-card p.n { color: var(--ivory); }
body:not(.home) .dh-mega-card p.d { color: var(--muted-2); }
body:not(.home) .dh-mega-card:hover p.n { color: var(--teal); }

/* mobile drawer and the fixed bottom bar */
body:not(.home) .dh-drawer h2,
body:not(.home) .dh-drawer h3,
body:not(.home) .dh-drawer-head { color: var(--ivory); }
body:not(.home) .dh-drawer a,
body:not(.home) .dh-drawer-link { color: var(--ivory); }
body:not(.home) .dh-drawer a:hover,
body:not(.home) .dh-drawer-link:hover { color: var(--teal); }
body:not(.home) .dh-drawer a.dh-drawer-sub { color: var(--muted-2); }
/* The drawer is a dark overlay on every page, so its three tabs have to
   restate what `body:not(.home) a` and the neutral roles would otherwise take
   from them. chrome.mjs diffs these against the homepage. */
body:not(.home) .dh-drawer .dh-dtabs [role="tab"] { color: var(--muted-2); }
body:not(.home) .dh-drawer .dh-dtabs [role="tab"]:hover { color: var(--ivory); }
body:not(.home) .dh-drawer .dh-dtabs [role="tab"][aria-selected="true"] { color: #0B0B0F; }
body:not(.home) .dh-drawer a.dh-drawer-all,
body:not(.home) .dh-drawer .dh-drawer-cat { color: var(--ivory); }
body:not(.home) .dh-drawer .dh-drawer-cat:hover,
body:not(.home) .dh-drawer .dh-drawer-cat[aria-expanded="true"],
body:not(.home) .dh-drawer a.dh-drawer-sub.is-all { color: var(--teal); }
body:not(.home) .dh-drawer .dh-drawer-cat > span { color: var(--muted-3); }
body:not(.home) .dh-drawer .dh-drawer-minor a { color: var(--muted-2); }
body:not(.home) .dh-drawer .dh-drawer-minor a:hover { color: var(--teal); }
body:not(.home) .dh-langmenu [data-set-lang] { color: var(--muted-2); }
body:not(.home) .dh-langmenu [data-set-lang]:hover { color: var(--ivory); }
body:not(.home) .dh-langmenu [data-set-lang][aria-selected="true"] { color: var(--teal); }
body:not(.home) .dh-drawer .dh-langhead { color: var(--teal); }
body:not(.home) .dh-drawer .dh-langchips [data-set-lang] { color: var(--muted-2); }
body:not(.home) .dh-drawer .dh-langchips [data-set-lang]:hover { color: var(--teal); }
body:not(.home) .dh-drawer .dh-langchips [data-set-lang][aria-pressed="true"] { color: #0B0B0F; }
body:not(.home) .dh-drawer a.dh-you-id,
body:not(.home) .dh-drawer .dh-you-tile { color: var(--muted-2); }
body:not(.home) .dh-drawer .dh-you-id strong,
body:not(.home) .dh-drawer .dh-you-tile strong,
body:not(.home) .dh-drawer .dh-you-recent .n { color: var(--ivory); }
body:not(.home) .dh-drawer .dh-you-id .av { color: #0B0B0F; }
body:not(.home) .dh-drawer .dh-you-id em,
body:not(.home) .dh-drawer .dh-you-tile span { color: var(--muted-3); }
body:not(.home) .dh-drawer .dh-you-h,
body:not(.home) .dh-drawer .dh-you-recent .p { color: var(--teal); }
body:not(.home) .dh-drawer .dh-you-empty { color: var(--muted-2); }
body:not(.home) .dh-drawer a.dh-you-cta { color: var(--ivory); }
body:not(.home) .dh-mobilenav a,
body:not(.home) .dh-mobilenav button { color: var(--muted-3); }
body:not(.home) .dh-mobilenav a:hover,
body:not(.home) .dh-mobilenav button:hover,
body:not(.home) .dh-mobilenav [aria-current="page"] { color: var(--teal); }

/* footer */
body:not(.home) .dh-footer h2,
body:not(.home) .dh-footer h3,
body:not(.home) .dh-footer-brand h2 { color: var(--ivory); }
body:not(.home) .dh-footer-cols nav h2 { color: var(--teal); }
body:not(.home) .dh-footer-cols nav a { color: #FFFFFF; }
body:not(.home) .dh-footer-cols nav a:hover { color: var(--teal); }
body:not(.home) .dh-footer-brand p.sub { color: rgba(255, 255, 255, .82); }
body:not(.home) .dh-footer a { color: #FFFFFF; }
body:not(.home) .dh-footer a:hover { color: var(--teal); }
body:not(.home) .dh-footer-bottom p { color: rgba(247, 244, 255, .9); }
body:not(.home) .dh-legalrow a { color: rgba(247, 244, 255, .9); }
body:not(.home) .dh-legalrow a:hover { color: #fff; }
body:not(.home) .dh-socials a { color: var(--ivory); }
body:not(.home) .dh-subscribe input { color: var(--ivory); }
body:not(.home) .dh-subscribe-note { color: rgba(255, 255, 255, .66); }

/* overlays */
body:not(.home) .dh-search h2,
body:not(.home) .dh-search h3,
body:not(.home) .dh-cart h2,
body:not(.home) .dh-cart h3,
body:not(.home) .dh-quick h2,
body:not(.home) .dh-quick h3,
body:not(.home) .dh-compare-modal h2,
body:not(.home) .dh-compare-modal h3,
body:not(.home) .dh-agegate h2 { color: var(--ivory); }
body:not(.home) .dh-search a,
body:not(.home) .dh-cart a,
body:not(.home) .dh-quick a,
body:not(.home) .dh-compare-modal a { color: var(--ivory); }
body:not(.home) .dh-search a:hover,
body:not(.home) .dh-cart a:hover,
body:not(.home) .dh-quick a:hover,
body:not(.home) .dh-compare-modal a:hover { color: var(--teal); }

/* the sticky bar itself: teal band, deep-teal type, exactly as on the homepage */
body:not(.home) .dh-announce-item,
body:not(.home) .dh-announce a { color: var(--paper); }
body:not(.home) .dh-navlink { color: var(--teal-deep); }
body:not(.home) .dh-navlink:hover { color: #0B3B34; }
body:not(.home) .dh-iconbtn { color: var(--teal-deep); }
body:not(.home) .dh-iconbtn:hover { color: #0B3B34; }
body:not(.home) .dh-logoband a { color: var(--ivory); }
body:not(.home) .dh-skip { color: var(--ink); }

/* ── components that carried a dark-theme colour onto the light ground ──── */

/* status pills: the dark palette's teal/lavender/coral wash out on off-white */
body:not(.home) .dh-status.ok   { background: rgba(12, 111, 102, .12); color: #0A5A53; }
body:not(.home) .dh-status.go   { background: rgba(107, 63, 212, .12); color: #5B2AAE; }
body:not(.home) .dh-status.wait { background: rgba(162, 56, 44, .12);  color: #8E3025; }

/* filter chips are pale ivory on violet by default -- unreadable on paper */
body:not(.home) .dh-chip {
  border-color: rgba(107, 63, 212, .34);
  background: rgba(107, 63, 212, .08);
  color: #3C2170;
}
body:not(.home) .dh-chip:hover,
body:not(.home) .dh-chip[aria-pressed="true"] { background: var(--violet); color: var(--paper); }

/* the grid/list toggle label sat a hair under the AA bar */
body:not(.home) .dh-seg button { color: #5A5268; }
body:not(.home) .dh-seg button[aria-pressed="true"] { color: var(--paper); }

/* ...but a chip inside the dark chrome keeps the homepage treatment */
body:not(.home) .dh-mega .dh-chip,
body:not(.home) .dh-search .dh-chip,
body:not(.home) .dh-drawer .dh-chip,
body:not(.home) .dh-cart .dh-chip,
body:not(.home) .dh-plp-hero .dh-chip {
  border-color: rgba(205, 183, 255, .32);
  background: rgba(123, 63, 214, .14);
  color: #E8E2F2;
}
body:not(.home) .dh-mega .dh-chip:hover,
body:not(.home) .dh-search .dh-chip:hover,
body:not(.home) .dh-drawer .dh-chip:hover,
body:not(.home) .dh-cart .dh-chip:hover,
body:not(.home) .dh-plp-hero .dh-chip:hover { background: rgba(123, 63, 214, .3); color: #fff; }

/* the shop mega keeps the dark chrome's colours on a light page */
/* these have to out-specify `body:not(.home) .dh-mega a:not(.dh-glink)` above,
   which is (0,3,1) — hence the extra .dh-mega qualifier */
body:not(.home) .dh-mega a.dh-mega-link.is-shelf { color: var(--teal); }
body:not(.home) .dh-mega a.dh-mega-link.is-shelf:hover { color: var(--paper); }
body:not(.home) .dh-mega a.dh-mega-sub { color: var(--ivory); }
body:not(.home) .dh-mega a.dh-mega-sub:hover { color: var(--teal); }
body:not(.home) .dh-mega a.dh-mega-link.is-shelf span,
body:not(.home) .dh-mega a.dh-mega-sub span { color: var(--muted-3); }

/* the cart drawer is a light surface on every page, so the light ground must
   not repaint its type back to ivory */
body:not(.home) .dh-cart {
  --body-strong: #17151C;
  --body-copy:   #3A3442;
  --body-muted:  #4A4257;
  --body-faint:  #6D6478;
  --body-accent: #6B3FD4;
  --body-link:   #5B2AAE;
}
body:not(.home) .dh-cart h2,
body:not(.home) .dh-cart h3 { color: var(--text-dark); }
/* Text links in the drawer stay purple; gradient CTAs keep white label + icon. */
body:not(.home) .dh-cart a:not(.dh-btn) { color: #5B2AAE; }
body:not(.home) .dh-cart a:not(.dh-btn):hover { color: #2E1157; }
body:not(.home) .dh-cart a.dh-btn--grad,
body:not(.home) .dh-cart a.dh-btn--grad:visited {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
body:not(.home) .dh-cart a.dh-btn--grad:hover,
body:not(.home) .dh-cart a.dh-btn--grad:focus-visible,
body:not(.home) .dh-cart a.dh-btn--grad:active {
  color: #5B2AAE;
  -webkit-text-fill-color: #5B2AAE;
}
body:not(.home) .dh-cart .dh-glink { color: transparent; }