/* ==========================================================================
   Deadhead Chemist — core stylesheet
   Tokens, page chrome and the homepage component set. Every value here is
   carried over from the canvas design in _design-source/; treat that as the
   reference when changing anything.
   ========================================================================== */

:root {
  /* ground */
  --ink:        #08080A;
  --ink-panel:  #0E0E12;
  --ink-deep:   #121218;
  --ink-plum:   #0D0A16;
  --ivory:      #F3F0E7;
  --ivory-card: #FBF9F3;
  --ivory-warm: #FBF8F1;

  /* accents */
  --teal:       #3DE0C8;
  --teal-band:  #40E0CB;
  --teal-deep:  #06231F;
  --teal-ink:   #0C5F55;
  --teal-600:   #16A99B;
  --violet:     #6B3FD4;
  --violet-2:   #7B3FD6;
  --violet-ink: #2A1638;
  --lavender:   #A98BF5;
  --lav-light:  #CDB7FF;
  --blue:       #669AF5;
  --coral:      #FF7A66;
  --coral-lt:   #FF9C90;
  --amber:      #F3B45E;

  /* type colours */
  --text:       #F3F0E7;
  --text-dark:  #12110F;
  --text-dark2: #17151C;
  --muted:      #B6AEC4;
  --muted-2:    #A79FB5;
  --muted-3:    #8C849C;
  --muted-ink:  #6D6478;
  --muted-ink2: #4A4257;
  --danger:     #A2382C;
  --paper:      #F7F4FF;

  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cta:     "Anybody", "Archivo", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Unbounded", "Anybody", "Archivo", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  --shell:  1440px;
  --gutter: clamp(16px, 3vw, 40px);
  --sec-y:  clamp(38px, 4.4vw, 66px);

  --grad: linear-gradient(96deg, #3DE0C8 0%, #5BC8E8 24%, #8B6BF0 58%, #A98BF5 78%, #3DE0C8 100%);
  --grad-hero: linear-gradient(96deg, #3DE0C8 0%, #5BC8E8 38%, #8B6BF0 74%, #A98BF5 100%);
  --grad-text: linear-gradient(92deg, #3DE0C8 0%, #6FC9E8 34%, #A472F0 72%, #7B3FD6 100%);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 132px; }
html, body { margin: 0; padding: 0; background: var(--ink); }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}

img, svg, video { max-width: 100%; }
img { display: block; height: auto; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--lavender); }

button, input, select, textarea { font: inherit; color: inherit; }

*:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

input::placeholder, textarea::placeholder { color: var(--muted-3); }

::selection { background: rgba(61, 224, 200, .28); color: #fff; }

[hidden] { display: none !important; }

.dh-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.dh-skip {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--teal); color: var(--teal-deep);
  padding: 12px 18px; border-radius: 999px;
  font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.dh-skip:focus { top: 12px; color: var(--teal-deep); }

.dh-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.dh-sec   { padding: var(--sec-y) 0; }

[data-rail] { scrollbar-width: none; }
[data-rail]::-webkit-scrollbar { display: none; }

/* ── motion ───────────────────────────────────────────────────────────── */
a, button, select, summary, [role="tab"], label {
  transition: color .18s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .24s ease, transform .18s cubic-bezier(.2,.75,.3,1), opacity .18s ease;
}
button:hover, [role="tab"]:hover { transform: translateY(-1px); }
button:active, [role="tab"]:active { transform: translateY(0) scale(.985); }
button:disabled { opacity: .45; transform: none; cursor: not-allowed; }

[data-lift] {
  transition: transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease,
              background-color .3s ease, border-color .3s ease;
}
[data-lift]:hover { transform: translateY(-6px); }

.dh-card-media img { transition: transform .5s cubic-bezier(.2,.75,.3,1), filter .35s ease; }
[data-lift]:hover .dh-card-media img, a:hover > .dh-card-media img { transform: scale(1.045); }

input, textarea { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
input:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px rgba(61,224,200,.22); }

@keyframes dh-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dh-pop   { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes dh-drop  { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes dh-trace { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes dh-spin  { to { transform: rotate(360deg); } }
@keyframes dh-shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } }

/* scroll reveals — opt-in, and inert until the observer marks them ready */
.dh-reveal { opacity: 0; transform: translateY(18px); }
.js .dh-reveal { transition: opacity .62s cubic-bezier(.2,.75,.3,1), transform .62s cubic-bezier(.2,.75,.3,1); }
.dh-reveal.is-in { opacity: 1; transform: none; }
.dh-reveal[data-delay="1"] { transition-delay: .07s; }
.dh-reveal[data-delay="2"] { transition-delay: .14s; }
.dh-reveal[data-delay="3"] { transition-delay: .21s; }
.dh-reveal[data-delay="4"] { transition-delay: .28s; }
.dh-reveal[data-delay="5"] { transition-delay: .35s; }
html:not(.js) .dh-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .dh-reveal { opacity: 1; transform: none; }
}

/* ── typography helpers ───────────────────────────────────────────────── */
.dh-display {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 74%;
  font-variation-settings: 'wdth' 74;
  font-size: clamp(25px, 3.2vw, 42px);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dh-display--sm { font-size: clamp(22px, 2.7vw, 33px); letter-spacing: .05em; }
.dh-display--lg { font-size: clamp(30px, 3.9vw, 54px); font-stretch: 72%; font-variation-settings: 'wdth' 72; line-height: .92; letter-spacing: .025em; }

.dh-em {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-stretch: normal; font-variation-settings: normal;
  font-size: 1.12em; letter-spacing: -.01em; text-transform: none;
}

.dh-kicker {
  margin: 0;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--teal);
}
.dh-meta { font: 400 10.5px/1 var(--font-mono); letter-spacing: .09em; color: var(--muted-ink); }
.dh-lede { font-size: clamp(15px, 1.15vw, 17px); color: var(--muted); text-wrap: pretty; }

/* rule + centred heading */
.dh-headrule {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  margin-bottom: clamp(24px, 2.8vw, 38px);
}
.dh-headrule > span[aria-hidden] { height: 1.5px; flex: 1; max-width: 250px; }
.dh-headrule .r-l { background: linear-gradient(90deg, rgba(107,63,212,0), var(--violet)); }
.dh-headrule .r-r { background: linear-gradient(90deg, var(--teal-600), rgba(22,169,155,0)); }
.dh-headrule--dark .r-l { background: linear-gradient(90deg, rgba(169,139,245,0), var(--lavender)); }
.dh-headrule--dark .r-r { background: linear-gradient(90deg, var(--teal), rgba(61,224,200,0)); }
.dh-headrule .dh-display { text-align: center; }

.dh-headbar { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(22px, 2.4vw, 34px); }
.dh-headbar > .rule { height: 2px; flex: 1; background: rgba(243,240,231,.38); }
.dh-headbar--light > .rule { background: rgba(23,21,28,.38); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.dh-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px; border: 0; border-radius: 999px;
  font-family: var(--font-cta); font-weight: 800; font-size: 12.5px;
  letter-spacing: .13em; text-transform: uppercase; text-align: left;
  cursor: pointer; text-decoration: none;
}
/* Solid violet, flipping to teal under the pointer. Plain white on the
   violet — #F7F4FF was close enough to read as white in isolation and not
   next to one. On the teal it turns the theme's deep link purple (#5B2AAE),
   which is the shade that clears AA on that ground; var(--violet) itself is
   only 3.9:1 there. The homepage hero button keeps its canvas gradient. */
.dh-btn--grad:not(.dh-btn--hero) {
  background: var(--violet);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  transition: background-color .22s ease, color .22s ease, -webkit-text-fill-color .22s ease,
              box-shadow .3s ease, transform .24s cubic-bezier(.2,.75,.3,1);
}
.dh-btn--grad:not(.dh-btn--hero):hover,
.dh-btn--grad:not(.dh-btn--hero):focus-visible,
.dh-btn--grad:not(.dh-btn--hero):active {
  background: var(--teal);
  color: #5B2AAE;
  -webkit-text-fill-color: #5B2AAE;
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -14px rgba(61,224,200,.5);
}
/* The arrow is drawn with a literal stroke in the markup — a dark teal, which
   was chosen for the teal-on-hover state and is nearly invisible against the
   violet the button actually sits at. currentColor makes it follow the label
   through both states instead. */
.dh-btn--grad:not(.dh-btn--hero) svg { stroke: currentColor !important; }
.dh-btn--grad:not(.dh-btn--hero):active { transform: translateY(0) scale(.99); }

.dh-btn--hero {
  padding: 18px 28px; gap: 16px; font-size: 13px;
  background-image: var(--grad-hero); background-size: 220% 100%; background-position: 0% 50%;
  color: #0A1F2E; box-shadow: 0 14px 32px -16px rgba(91,200,232,.6);
  transition: background-position .5s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease,
              transform .24s cubic-bezier(.2,.75,.3,1);
}
.dh-btn--hero:hover { background-position: 100% 50%; transform: translateY(-2px); color: #0A1F2E; }

.dh-btn--ghost {
  background: transparent; border: 1px solid rgba(243,240,231,.34); color: var(--ivory);
}
.dh-btn--ghost:hover { border-color: var(--teal); color: var(--teal); background: rgba(61,224,200,.07); }

.dh-btn--ghost-dark {
  background: transparent; border: 1px solid rgba(23,21,28,.22); color: var(--text-dark2);
}
.dh-btn--ghost-dark:hover { border-color: var(--violet); color: var(--violet); background: rgba(107,63,212,.06); }

.dh-btn--solid { background: var(--violet); color: var(--paper); }
.dh-btn--solid:hover { background: #5B2AAE; color: var(--paper); }

.dh-btn--block { width: 100%; justify-content: space-between; }
.dh-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* On a phone every CTA drops a size: same pill, less air. The quick-add
   steppers stay ≥38px so the tap-target sweeps keep passing. */
@media (max-width: 700px) {
  .dh-btn { padding: 12px 20px; gap: 10px; font-size: 11.5px; }
  .dh-btn--hero { padding: 14px 22px; font-size: 12px; }
  .dh-qadd .go { padding: 12px 4px; font-size: 10.5px; }
  .dh-qadd .step { width: 38px; font-size: 15px; }
}

/* gradient-filled text link with trailing arrow */
.dh-glink {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background-color: transparent; cursor: pointer; padding: 0;
  font-family: var(--font-cta); font-weight: 800; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase;
  background-image: var(--grad); background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position .5s ease, gap .22s ease;
}
.dh-glink:hover { background-position: 100% 50%; gap: 14px; color: transparent; }
.dh-glink svg { flex: 0 0 auto; }

/* ── announcement ─────────────────────────────────────────────────────── */
.dh-announce { background: var(--violet); }
.dh-announce .dh-shell {
  padding-top: 11px; padding-bottom: 11px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.dh-announce-item {
  display: flex; align-items: center; gap: 10px; color: var(--paper);
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase;
}
.dh-announce-item svg { flex: 0 0 auto; }
.dh-announce-rot { position: relative; display: inline-grid; }
.dh-announce-rot > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(6px);
  transition: opacity .26s ease, transform .26s ease;
}
/* the incoming line waits for the outgoing one to clear, so the two never
   sit on top of each other mid-swap */
.dh-announce-rot > span.is-on { opacity: 1; transform: none; transition-delay: .3s; }
@media (max-width: 620px) { .dh-announce-item.is-secondary { display: none; } }

/* ── header ───────────────────────────────────────────────────────────── */
.dh-header { position: sticky; top: 0; z-index: 60; }

.dh-logoband {
  position: relative;
  background: radial-gradient(ellipse at 50% 128%, rgba(123,63,214,.3) 0%, rgba(102,154,245,.1) 44%, rgba(8,8,10,0) 70%), var(--ink);
  display: grid; place-items: center; overflow: hidden;
  height: 152px;
}
.dh-logoband > a { position: relative; z-index: 2; display: grid; place-items: center; padding: 0 var(--gutter); }
.dh-logomark { height: 124px; width: auto; }
@media (max-width: 1000px) { .dh-logoband { height: 104px; } .dh-logomark { height: 78px; } }

.dh-logoband::before, .dh-logoband::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-repeat: repeat;
}
.dh-logoband::before {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(243,240,231,.85) 0 50%, transparent 51%),
    radial-gradient(1px 1px   at 27% 68%, rgba(205,183,255,.7)  0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 41% 14%, rgba(243,240,231,.6) 0 50%, transparent 51%),
    radial-gradient(1px 1px   at 56% 78%, rgba(61,224,200,.55)  0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 68% 32%, rgba(243,240,231,.75) 0 50%, transparent 51%),
    radial-gradient(1px 1px   at 81% 60%, rgba(169,139,245,.7)  0 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 93% 26%, rgba(243,240,231,.5) 0 50%, transparent 51%),
    radial-gradient(1px 1px   at 8%  88%, rgba(123,63,214,.6)   0 50%, transparent 51%);
  background-size: 190px 150px, 240px 180px, 160px 210px, 280px 160px,
                   210px 190px, 170px 230px, 250px 170px, 200px 200px;
  animation: dh-star-drift 150s linear infinite;
}
.dh-logoband::after {
  background-image:
    radial-gradient(2px 2px at 22% 40%, rgba(243,240,231,.95) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 63% 20%, rgba(205,183,255,.9) 0 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 86% 72%, rgba(61,224,200,.85) 0 50%, transparent 51%);
  background-size: 420px 300px, 360px 260px, 480px 320px;
  animation: dh-twinkle 6.5s ease-in-out infinite;
}
@keyframes dh-star-drift { to { background-position: -190px -150px, -240px -180px, -160px -210px, -280px -160px, -210px -190px, -170px -230px, -250px -170px, -200px -200px; } }
@keyframes dh-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dh-logoband::before, .dh-logoband::after { animation: none; } }

/* scroll-driven collapse — CSS only where supported, JS fallback class otherwise */
@keyframes dh-band   { to { height: 62px; } }
@keyframes dh-mark   { to { height: 48px; } }
@keyframes dh-band-m { to { height: 56px; } }
@keyframes dh-mark-m { to { height: 42px; } }
@supports (animation-timeline: scroll()) {
  .dh-logoband { animation: dh-band linear both; animation-timeline: scroll(root block); animation-range: 0 180px; }
  .dh-logomark { animation: dh-mark linear both; animation-timeline: scroll(root block); animation-range: 0 180px; }
  @media (max-width: 1000px) {
    .dh-logoband { animation-name: dh-band-m; }
    .dh-logomark { animation-name: dh-mark-m; }
  }
}
@supports not (animation-timeline: scroll()) {
  .dh-logoband, .dh-logomark { transition: height .32s cubic-bezier(.2,.75,.3,1); }
  .is-scrolled .dh-logoband { height: 62px; }
  .is-scrolled .dh-logomark { height: 48px; }
  @media (max-width: 1000px) {
    .is-scrolled .dh-logoband { height: 56px; }
    .is-scrolled .dh-logomark { height: 42px; }
  }
}

.dh-menubar {
  background: rgba(61,224,200,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dh-menubar .dh-shell {
  display: flex; align-items: center; gap: clamp(8px, 1.6vw, 24px); height: 60px;
}

/* Mobile: fill the empty turquoise menubar with location / ETA / language */
.dh-menubar-info {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 158px);
  margin-right: 8px;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
@media (max-width: 1039px) {
  .dh-menubar-info.dh-only-mobile { display: flex !important; }
  .dh-menubar .dh-shell {
    gap: 6px; height: 56px;
    padding-left: 10px; padding-right: 6px;
  }
  /* Search stays on the bottom bar — free space for location + ETA. */
  .dh-menubar [data-open-search] { display: none !important; }
  .dh-menubar .dh-iconrow {
    gap: 0; margin-left: 0 !important; flex: 0 0 auto;
  }
  .dh-menubar .dh-iconbtn { width: 38px; height: 38px; }
  .dh-menubar .dh-iconrow > [data-lang-slot="menubar"] {
    display: inline-flex; position: relative; flex: 0 0 auto;
  }
}
.dh-menubar-ship {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-width: 0; overflow: hidden;
  color: var(--teal-deep);
}
.dh-menubar-ship .dh-locship-pin {
  width: 26px; height: 26px; flex: 0 0 auto;
  background: rgba(6, 35, 31, .14); color: var(--teal-deep);
}
.dh-menubar-ship-text {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 1px;
  min-width: 0; flex: 1 1 auto;
  overflow: hidden;
}
.dh-menubar-ship-text > strong {
  display: block; width: 100%; max-width: 100%;
  font: 700 11px/1.2 var(--font-body);
  color: var(--teal-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-menubar-ship .dh-locship-eta {
  display: flex; flex-direction: row; align-items: baseline; gap: 5px;
  width: 100%; max-width: 100%;
  padding: 0; border: 0;
  transition: opacity .28s ease, transform .28s ease;
}
.dh-menubar-ship .dh-locship-eta strong {
  font: 650 10px/1.2 var(--font-mono);
  letter-spacing: .02em;
  color: rgba(6, 35, 31, .9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-menubar-ship .dh-locship-eta .note {
  display: none; /* menubar is too tight for the courier subtitle */
}
.dh-menubar .dh-iconrow > [data-lang-slot="menubar"] .dh-langbtn {
  color: var(--teal-deep);
  width: auto; min-width: 36px; padding: 0 2px; gap: 2px;
}
.dh-menubar .dh-iconrow > [data-lang-slot="menubar"] .dh-langbtn:hover { color: #0B3B34; }
.dh-menubar .dh-iconrow > [data-lang-slot="menubar"] .dh-langcode {
  font: 700 10px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal-deep);
}
.dh-menubar .dh-iconrow > [data-lang-slot="menubar"] .dh-langmenu {
  left: 0; right: auto; top: calc(100% + 8px);
  background: #0E0E12; border-color: rgba(243,240,231,.16);
  z-index: 80;
}
.dh-nav {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.8vw, 30px);
}
.dh-navgroup { display: inline-flex; align-items: center; gap: 2px; position: relative; }

.dh-navlink {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 2px 12px;
  color: var(--teal-deep);
  font-family: var(--font-display); font-style: normal; font-weight: 500;
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  position: relative; white-space: nowrap; text-decoration: none;
}

.dh-navchev {
  display: grid; place-items: center;
  width: 26px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--teal-deep);
}
.dh-navchev svg { transition: transform .24s cubic-bezier(.2,.75,.3,1); }
.dh-navchev[aria-expanded="true"] svg { transform: rotate(180deg); }
.dh-navchev:hover { transform: none; }
.dh-navlink:hover { color: #0B3B34; transform: none; }
.dh-navlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--teal-deep); transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.2,.75,.3,1);
}
.dh-navlink:hover::after, .dh-navlink[aria-current]::after { transform: scaleX(1); }
.dh-navgroup:hover .dh-navlink::after, .dh-navgroup:focus-within .dh-navlink::after { transform: scaleX(1); }

.dh-iconrow { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.dh-iconbtn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; position: relative; color: var(--teal-deep);
}
.dh-iconbtn:hover { color: #0B3B34; }
.dh-badge {
  position: absolute; top: 5px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--violet); color: var(--paper);
  font: 600 10px/17px var(--font-mono); text-align: center;
}
.dh-badge.is-bump { animation: dh-badge-pop .34s cubic-bezier(.2,.75,.3,1); }
@keyframes dh-badge-pop { 0% { transform: scale(1); } 45% { transform: scale(1.5); } 100% { transform: scale(1); } }

@media (max-width: 1039px) { .dh-nav { display: none; } .dh-only-desktop { display: none !important; } }
@media (min-width: 1040px) { .dh-only-mobile { display: none !important; } }

/* mega menu */
.dh-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  border-radius: 0 0 26px 26px; overflow: hidden;
  background: var(--ink-panel);
  border-top: 1px solid rgba(243,240,231,.12);
  border-bottom: 1px solid rgba(243,240,231,.12);
  box-shadow: 0 26px 44px -20px rgba(0,0,0,.85);
  animation: dh-rise .2s ease both;
}
.dh-mega-grid {
  max-width: var(--shell); margin: 0 auto;
  padding: 34px var(--gutter) 38px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px;
}
.dh-mega-grid--wide { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.dh-mega-grid--reads { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr); gap: 26px; }
@media (max-width: 1080px) { .dh-mega-grid--reads { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.dh-mega h3 { margin: 0 0 14px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .17em; text-transform: uppercase; color: var(--teal); }
.dh-mega-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; color: var(--ivory); font-size: 14.5px; font-weight: 500;
}
.dh-mega-link:hover { color: var(--teal); }
.dh-mega-link span { font: 400 10.5px/1 var(--font-mono); color: var(--muted-3); }
.dh-chip {
  border: 1px solid rgba(205,183,255,.32); background: rgba(123,63,214,.14);
  color: #E8E2F2; border-radius: 999px; padding: 7px 13px;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .05em; cursor: pointer;
}
.dh-chip:hover { background: rgba(123,63,214,.3); color: #fff; }
.dh-mega-feature { border-left: 2px solid var(--violet); padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.dh-mega-feature .thumb { display: block; height: 108px; border-radius: 12px; overflow: hidden; background: #100C1C; }
.dh-mega-feature .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.75,.3,1); }
.dh-mega-feature:hover .thumb img { transform: scale(1.06); }
.dh-mega-feature h4 {
  margin: 0; font-family: var(--font-heading); font-weight: 900; font-stretch: 74%;
  font-variation-settings: 'wdth' 74; font-size: 27px; line-height: .94;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ivory);
}
.dh-mega-feature p { margin: 0; font-size: 13.5px; color: var(--muted-2); }
.dh-mega-feature .dh-glink { margin-top: auto; }
.dh-mega-card { display: block; color: var(--ivory); }
.dh-mega-card .thumb { display: block; height: 116px; margin-bottom: 12px; overflow: hidden; border-radius: 12px; background: #100C1C; }
.dh-mega-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.75,.3,1); }
.dh-mega-card:hover .thumb img { transform: scale(1.06); }
.dh-mega-card p.n {
  margin: 0 0 3px; font-family: var(--font-heading); font-weight: 800; font-stretch: 82%;
  font-size: 16.5px; letter-spacing: .03em; text-transform: uppercase;
}
.dh-mega-card p.d { margin: 0; font-size: 13px; color: var(--muted-2); }
.dh-mega-card:hover p.n { color: var(--teal); }

/* back to top — fixed bottom-right, stepped up on mobile so it never sits
   on the bottom navigation, and higher again where that corner is already
   taken (the shop's filter pill, the PDP's sticky buy bar) */
.dh-totop {
  position: fixed; z-index: 66; right: 16px; bottom: 20px;
  width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--violet); color: var(--paper);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
  animation: dh-rise .22s ease both;
  transition: background-color .2s ease, color .2s ease;
}
.dh-totop:hover, .dh-totop:active { background: var(--teal); color: #5B2AAE; }
.dh-totop[hidden] { display: none; }
@media (max-width: 1039px) {
  .dh-totop { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* the shop's floating Filters pill owns that spot when it is visible */
  body:has(.dh-filterfab:not([hidden])) .dh-totop { bottom: calc(146px + env(safe-area-inset-bottom)); }
  /* the PDP's sticky buy bar spans the bottom above the nav */
  body.pdp .dh-totop { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* language switcher — header dropdown and drawer chip row */
.dh-langslot { position: relative; display: inline-flex; }
.dh-langbtn { gap: 5px; width: auto; padding: 0 10px; }
.dh-langcode { font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; }
.dh-langmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
  min-width: 190px; padding: 8px; border-radius: 16px;
  background: var(--ink-panel); border: 1px solid rgba(243,240,231,.14);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.9);
}
.dh-langmenu [data-set-lang] {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px;
  padding: 9px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font-size: 13.5px; color: var(--muted-2); text-align: left;
}
.dh-langmenu [data-set-lang] .cd {
  font: 500 10px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted-3);
  width: 22px;
}
.dh-langmenu [data-set-lang]:hover { background: rgba(61,224,200,.1); color: var(--ivory); }
.dh-langmenu [data-set-lang][aria-selected="true"] { color: var(--teal); }
.dh-langmenu [data-set-lang][aria-selected="true"] .cd { color: var(--teal); }

.dh-drawer-lang { padding: 16px 0 4px; }
.dh-langhead {
  margin: 0 0 10px; font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
}
.dh-langchips { display: flex; flex-wrap: wrap; gap: 7px; }
.dh-langchips [data-set-lang] {
  min-width: 44px; min-height: 34px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(243,240,231,.2); background: none; color: var(--muted-2);
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em;
}
.dh-langchips [data-set-lang]:hover { border-color: var(--teal); color: var(--teal); }
.dh-langchips [data-set-lang][aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #0B0B0F; }

/* the admin's floating variant */
.dh-langfloat { position: fixed; z-index: 200; right: 14px; bottom: 14px; }
.dh-langfloat .dh-langbtn {
  display: inline-flex; align-items: center; min-height: 40px; border-radius: 999px;
  background: #17151C; border: 1px solid rgba(243,240,231,.2); color: #F3F0E7; cursor: pointer;
}
.dh-langfloat .dh-langmenu { top: auto; bottom: calc(100% + 10px); }

/* mobile drawer nav */
.dh-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.7); border: 0; }
.dh-drawer {
  /* Dark purple, not the near-black it was. --violet-ink and not --violet:
     every piece of type in here is unchanged, and on bright violet the two
     muted greys fall to 2.5:1 and 1.8:1 and the teal accent to 3.9:1. On
     #2A1638 they measure 6.5, 4.6 and 10.0 — so the ground changes and
     nothing else has to. */
  position: fixed; z-index: 91; inset: 10px 10px 10px auto;
  width: min(88vw, 370px); border-radius: 26px; overflow: hidden;
  background: var(--violet-ink); padding: 24px 22px;
  /* The faintest tone lifted two steps, and only inside the drawer. On the
     old near-black ground #8C849C measured 5.4:1; on the dark purple, under
     the translucent panels the Yours tab uses, it lands at 4.1. #968EA6 is
     the nearest shade that clears 4.5 on both the panel and the ground. */
  --muted-3: #968EA6;
  animation: dh-rise .22s ease both;
  /* the head and the tab strip hold still and the panels scroll under them --
     the Shop tab is several screens tall and scrolling the tabs away leaves
     no way back to the other two */
  display: flex; flex-direction: column;
}
.dh-drawer-head, .dh-dtabs { flex: 0 0 auto; }
.dh-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dh-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dh-drawer-head span { font: 500 11px/1 var(--font-mono); letter-spacing: .17em; text-transform: uppercase; color: var(--teal); }
.dh-drawer-link {
  display: block; padding: 12px 0; border-bottom: 1px solid rgba(243,240,231,.12);
  font-family: var(--font-serif); font-style: normal; font-weight: 400;
  font-size: 22px; letter-spacing: .01em;
  -webkit-text-stroke: .8px currentColor; paint-order: stroke fill; color: var(--ivory);
}
.dh-drawer-link:hover { color: var(--teal); }
.dh-drawer-sub { display: block; padding: 11px 0 11px 14px; font-size: 14.5px; color: var(--muted-2); border-bottom: 1px solid rgba(243,240,231,.07); }

/* ── the drawer's three tabs ───────────────────────────────────────────────
   Menu / Shop / Yours. The strip is sticky because the Shop tab is taller
   than the drawer and losing the tabs on the way down leaves no way back. */
.dh-dtabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: 14px;
  background: rgba(243,240,231,.06);
}
.dh-dtabs [role="tab"] {
  position: relative; min-height: 44px; padding: 10px 6px; border: 0; border-radius: 11px;
  background: none; cursor: pointer; color: var(--muted-2);
  font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background .16s ease, color .16s ease;
}
.dh-dtabs [role="tab"]:hover { color: var(--ivory); }
.dh-dtabs [role="tab"][aria-selected="true"] { background: var(--teal); color: #0B0B0F; }
.dh-dtabdot {
  position: absolute; top: 9px; right: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--coral);
}
.dh-dtabs [role="tab"][aria-selected="true"] .dh-dtabdot { background: #0B0B0F; }

.dh-dpanel[hidden] { display: none; }
.dh-dpanel > :first-child { margin-top: 0; }

/* the smaller print under the big serif links on the Menu tab */
.dh-drawer-minor { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 18px 0 4px; }
.dh-drawer-minor a { font-size: 13.5px; color: var(--muted-2); padding: 6px 0; }
.dh-drawer-minor a:hover { color: var(--teal); }

/* ── the Shop tab ─────────────────────────────────────────────────────── */
.dh-drawer-all {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; margin-bottom: 6px; padding: 13px 14px; border-radius: 13px;
  background: linear-gradient(120deg, rgba(61,224,200,.16), rgba(130,86,232,.16));
  border: 1px solid rgba(61,224,200,.28);
  font-family: var(--font-heading); font-weight: 800; font-stretch: 88%;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ivory);
}
.dh-drawer-all em { font: 400 11px/1 var(--font-mono); font-style: normal; color: var(--teal); }

.dh-drawer-shelf { border-bottom: 1px solid rgba(243,240,231,.1); }
.dh-drawer-cat {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 13px 2px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-weight: 800; font-stretch: 88%;
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--ivory);
}
.dh-drawer-cat > span {
  margin-left: auto; font: 400 10.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted-3);
}
.dh-drawer-cat.is-leaf > span { margin-right: 22px; }
.dh-drawer-cat .chev { flex: 0 0 auto; color: var(--teal); transition: transform .18s ease; }
.dh-drawer-cat[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dh-drawer-cat:hover, .dh-drawer-cat[aria-expanded="true"] { color: var(--teal); }
.dh-drawer-subs { padding: 0 0 10px; }
.dh-drawer-subs[hidden] { display: none; }
.dh-drawer-sub.is-all { color: var(--teal); }
.dh-drawer-subs .dh-drawer-sub:last-child { border-bottom: 0; }

/* ── the Yours tab ────────────────────────────────────────────────────── */
.dh-you-id {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 12px;
  border-radius: 15px; background: rgba(243,240,231,.05); border: 1px solid rgba(243,240,231,.1);
}
.dh-you-id .av {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--violet)); color: #0B0B0F;
  font-family: var(--font-heading); font-weight: 900; font-size: 17px;
}
.dh-you-id .t { flex: 1 1 auto; min-width: 0; }
.dh-you-id strong { display: block; font-size: 15px; color: var(--ivory); }
.dh-you-id em {
  display: block; font-style: normal; font-size: 12px; color: var(--muted-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dh-you-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.dh-you-tile {
  display: block; min-height: 68px; padding: 12px 10px; border-radius: 14px; text-align: left;
  background: rgba(243,240,231,.05); border: 1px solid rgba(243,240,231,.1);
  cursor: pointer; color: var(--muted-2);
}
.dh-you-tile strong {
  display: block; font-family: var(--font-heading); font-weight: 900;
  font-size: 22px; line-height: 1; color: var(--ivory);
}
.dh-you-tile span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted-3); }
.dh-you-tile:hover { border-color: rgba(61,224,200,.45); }
.dh-you-tile[disabled] { opacity: .45; cursor: default; }
.dh-you-tile[disabled]:hover { border-color: rgba(243,240,231,.1); }

.dh-you-h {
  margin: 0 0 10px; font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
}
.dh-you-recent { display: grid; gap: 8px; }
.dh-you-recent a {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px; border-radius: 13px; background: rgba(243,240,231,.04);
}
.dh-you-recent img { width: 52px; height: 52px; border-radius: 9px; object-fit: contain; background: #FFF; }
.dh-you-recent .n {
  font-size: 13.5px; line-height: 1.35; color: var(--ivory);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dh-you-recent .p { font: 400 12px/1 var(--font-mono); color: var(--teal); }
.dh-you-recent a:hover { background: rgba(61,224,200,.1); }

.dh-you-empty { margin: 4px 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.dh-you-cta { width: 100%; justify-content: center; }

/* Location + rotating delivery ETA — cart empty / filled turquoise panels */
.dh-shipband {
  margin: 0 0 14px; padding: 14px 16px;
  border-radius: 16px;
  background: var(--teal-band);
  color: var(--teal-deep);
}
.dh-empty--ship {
  background: var(--teal-band) !important;
  border: 0 !important;
  border-radius: 16px;
  color: var(--teal-deep);
}
.dh-empty--ship h3 { color: var(--teal-deep) !important; }
.dh-empty--ship p { color: rgba(6, 35, 31, .78) !important; }
.dh-locship {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 10px 12px; align-items: stretch;
  margin: 0; padding: 0;
  background: transparent; border: 0;
}
.dh-empty--ship .dh-locship { margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(6, 35, 31, .14); }
.dh-locship-loc,
.dh-locship-eta {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
}
.dh-locship-eta {
  flex-direction: column; gap: 2px;
  padding-left: 12px; border-left: 1px solid rgba(6, 35, 31, .16);
  transition: opacity .28s ease, transform .28s ease;
}
.dh-locship-eta.is-swap { opacity: 0; transform: translateY(5px); }
.dh-locship-eta.is-in { opacity: 1; transform: none; }
.dh-locship-pin {
  position: relative; flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(6, 35, 31, .12); color: var(--teal-deep);
}
.dh-locship-live {
  position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
  border-radius: 999px; background: #0B7A4B;
  box-shadow: 0 0 0 0 rgba(11, 122, 75, .55);
  animation: dh-locpulse 1.8s ease-out infinite;
}
@keyframes dh-locpulse {
  0% { box-shadow: 0 0 0 0 rgba(11, 122, 75, .5); }
  70% { box-shadow: 0 0 0 8px rgba(11, 122, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 122, 75, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-locship-live { animation: none; }
  .dh-locship-eta { transition: none; }
}
.dh-locship .kicker {
  display: block; margin: 0 0 3px;
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(6, 35, 31, .72);
}
.dh-locship-place strong,
.dh-locship-eta strong {
  display: block; font-size: 13px; line-height: 1.3; font-weight: 700;
  color: var(--teal-deep); letter-spacing: .01em;
}
.dh-locship-eta .note {
  display: block; margin-top: 2px;
  font: 400 11px/1.35 var(--font-mono); letter-spacing: .04em; color: rgba(6, 35, 31, .68);
}
@media (max-width: 380px) {
  .dh-locship { grid-template-columns: 1fr; }
  .dh-locship-eta {
    padding-left: 0; padding-top: 10px; border-left: 0;
    border-top: 1px solid rgba(6, 35, 31, .14);
  }
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.dh-hero {
  position: relative; background-color: var(--ink);
  background-image:
    linear-gradient(100deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.9) 32%, rgba(8,8,10,.45) 54%, rgba(8,8,10,.08) 74%, rgba(8,8,10,0) 100%),
    url('../assets/bg-hero.jpg?v=20260825h');
  background-image:
    linear-gradient(100deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.9) 32%, rgba(8,8,10,.45) 54%, rgba(8,8,10,.08) 74%, rgba(8,8,10,0) 100%),
    -webkit-image-set(
      url('../assets/bg-hero.webp?v=20260825h') type('image/webp'),
      url('../assets/bg-hero.jpg?v=20260825h') type('image/jpeg')
    );
  background-image:
    linear-gradient(100deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.9) 32%, rgba(8,8,10,.45) 54%, rgba(8,8,10,.08) 74%, rgba(8,8,10,0) 100%),
    image-set(
      url('../assets/bg-hero.webp?v=20260825h') type('image/webp'),
      url('../assets/bg-hero.jpg?v=20260825h') type('image/jpeg')
    );
  background-size: cover, 100% auto;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  overflow: hidden;
}
.dh-hero-orb {
  position: absolute; right: -4%; top: -22%;
  width: min(62vw, 860px); height: min(62vw, 860px); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(123,63,214,.3), rgba(102,154,245,.1) 44%, rgba(8,8,10,0) 70%);
  pointer-events: none;
}
.dh-hero-rings { position: absolute; right: 2%; top: -14%; width: min(60vw, 760px); height: auto; pointer-events: none; opacity: .42; }
.dh-hero-mol { position: absolute; left: -26px; bottom: -34px; width: clamp(120px, 13vw, 196px); height: auto; pointer-events: none; opacity: .26; }
.dh-hero-inner {
  position: relative; max-width: var(--shell); margin: 0 auto;
  padding: clamp(30px, 4vw, 60px) var(--gutter) clamp(18px, 2.2vw, 30px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 3vw, 48px);
}
.dh-hero-copy {
  flex: 1 1 420px; max-width: min(100%, 620px); min-width: min(100%, 320px);
  min-height: clamp(320px, 40vw, 560px);
  display: flex; flex-direction: column; justify-content: center;
  animation: dh-rise .6s ease both;
}
.dh-hero h1 {
  margin: 0;
  font-family: var(--font-heading); font-weight: 900;
  font-stretch: 70%; font-variation-settings: 'wdth' 70;
  font-size: clamp(42px, 6.2vw, 88px); line-height: .9;
  letter-spacing: .004em; text-transform: uppercase; text-wrap: balance;
}
.dh-hero h1 span { display: block; }
.dh-hero h1 .grad {
  width: fit-content;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dh-hero h1 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-stretch: normal; font-variation-settings: normal;
  font-size: 1.1em; letter-spacing: -.012em; text-transform: none; color: var(--teal);
}
.dh-rule-coral { width: 62px; height: 3px; margin: 26px 0 22px; background: var(--coral); }
.dh-hero p { margin: 0 0 30px; max-width: 34ch; }
.dh-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.dh-hero-second {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 0 9px;
  font-family: var(--font-cta); font-weight: 800; font-size: 13px;
  letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 1.5px solid transparent;
  border-image: var(--grad-hero) 1;
  background: var(--grad-hero); background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position .5s ease, gap .22s ease;
}
.dh-hero-second:hover { background-position: 100% 50%; gap: 14px; color: transparent; }

/* ── promise shelf ────────────────────────────────────────────────────── */
.dh-promises { position: relative; z-index: 2; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.dh-promises-grid {
  border-top: 1px solid rgba(169,139,245,.28);
  padding: clamp(10px, 1.1vw, 15px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(4px, .6vw, 10px);
}
.dh-promise {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(12px, 1.3vw, 17px) clamp(10px, 1.3vw, 18px);
  border-radius: 999px; background: transparent;
  transition: background .22s ease;
}
.dh-promise .ring {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 999px;
  border: 1.5px solid rgba(169,139,245,.5); display: grid; place-items: center;
  transition: border-color .22s ease;
}
.dh-promise .ring svg { stroke: var(--teal); transition: stroke .22s ease; }
.dh-promise .label {
  font-family: var(--font-heading); font-weight: 700; font-stretch: 98%;
  font-size: 13px; line-height: 1.42; text-align: center; color: #D8D2E4;
  text-wrap: pretty; transition: color .22s ease;
}
.dh-promise .bar {
  width: 44px; height: 2px; flex: 0 0 auto; margin-top: -4px; border-radius: 999px;
  background: rgba(61,224,200,.55); transition: background-color .22s ease, width .22s ease;
}
.dh-promise:hover { background: rgba(123,63,214,.10); }
.dh-promise:hover .ring { border-color: var(--lav-light); }
.dh-promise:hover .ring svg { stroke: #E8DEFF; }
.dh-promise:hover .label { color: var(--paper); }
.dh-promise:hover .bar { background: var(--lav-light); width: 56px; }

/* two across on every phone width — the hero shelf never drops to one column */
@media (max-width: 1039px) { .dh-promises-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── category tiles ───────────────────────────────────────────────────── */
.dh-catgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.dh-cat {
  position: relative; display: block; overflow: hidden;
  border-radius: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(150deg, #231A38, #12242B);
  aspect-ratio: .86 / 1; color: var(--ivory);
}
.dh-cat .dh-card-media { position: absolute; inset: 0; }
.dh-cat img { width: 100%; height: 100%; object-fit: cover; }
.dh-cat .veil {
  position: absolute; inset: auto 0 0 0; height: 54%;
  background: linear-gradient(180deg, rgba(8,8,10,0), rgba(8,8,10,.72) 50%, rgba(8,8,10,.95));
  pointer-events: none;
}
.dh-cat .cap { position: absolute; left: 18px; right: 18px; bottom: 17px; display: block; pointer-events: none; }
.dh-cat .cap .row { display: flex; align-items: center; gap: 12px; }
.dh-cat .cap .name {
  font-family: var(--font-heading); font-weight: 800; font-stretch: 82%;
  font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .055em; text-transform: uppercase;
}
.dh-cat .cap svg { margin-left: auto; transition: transform .28s cubic-bezier(.2,.75,.3,1); }
.dh-cat:hover .cap svg { transform: translateX(5px); }
.dh-cat .cap .bar { display: block; width: 56px; height: 3px; margin-top: 11px; transition: width .3s cubic-bezier(.2,.75,.3,1); }
.dh-cat:hover .cap .bar { width: 92px; }
.dh-cat .blurb { margin: 8px 0 0; font-size: 12.5px; color: rgba(243,240,231,.78); max-width: 30ch; }

/* ── product cards ────────────────────────────────────────────────────── */
.dh-prod {
  scroll-snap-align: start;
  border-radius: clamp(16px, 1.8vw, 20px);
  background: var(--ivory-card);
  border: 1px solid rgba(23, 21, 28, .1);
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
  transition: transform .3s cubic-bezier(.2,.75,.3,1), border-color .3s ease;
}
.dh-prod:hover { transform: translateY(-4px); border-color: rgba(107, 63, 212, .45); }
.dh-prod .dh-card-media {
  position: relative; margin: 8px 8px 0;
  border-radius: clamp(10px, 1.2vw, 14px); overflow: hidden;
  background: #FFFFFF;
  color: var(--text-dark); aspect-ratio: 1 / 1;
}
/* the packshots are photographed on white and are the whole product image, so
   they are contained rather than cropped */
.dh-prod .dh-card-media img { width: 100%; height: 100%; object-fit: contain; }
.dh-badge-tag {
  position: absolute; top: 12px; left: 12px; padding: 6px 13px; border-radius: 999px;
  font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  z-index: 2;
}
.dh-badge-sale    { background: var(--coral); color: #3B0F0A; }
.dh-badge-new     { background: var(--teal); color: var(--teal-deep); }
.dh-badge-limited { background: #EEE7FA; color: var(--violet-ink); }
.dh-badge-low     { background: #EEE7FA; color: var(--violet-ink); }

.dh-prod-body { padding: 16px 18px 12px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.dh-prod-kick { margin: 0; font: 500 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-ink); }
.dh-prod-title { margin: 0; font-size: 16px; line-height: 1.26; font-weight: 600; color: var(--text-dark); text-wrap: pretty; }
.dh-prod-title a { color: inherit; }
.dh-prod-title a:hover { color: var(--violet); }
.dh-prod-sku { margin: 0; font: 400 10.5px/1 var(--font-mono); letter-spacing: .09em; color: var(--muted-ink); }
.dh-prod-price { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.dh-prod-price .now { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--text-dark); }
.dh-prod-price .was { font-size: 13.5px; color: var(--muted-ink); text-decoration: line-through; }
.dh-prod-stock { margin: 4px 0 0; font: 400 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal-ink); }
.dh-prod-stock.is-low { color: var(--danger); }

.dh-stars { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.dh-stars .track {
  position: relative; display: inline-block; font-size: 14px; line-height: 1;
  letter-spacing: .11em; color: #A79BC0;
}
.dh-stars .fill {
  position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--violet);
}
.dh-stars .count { font: 400 11px/1 var(--font-mono); color: var(--muted-ink); }

/* the add-to-cart bar is a pill like every other button on the site; the
   overflow clip keeps the − and + caps inside the curve */
.dh-qopts {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0 14px 8px;
}
.dh-qopts .dh-qopt-select {
  width: 100%;
  margin: 0 0 4px;
}
.dh-qopt {
  border: 1px solid rgba(23,21,28,.2); background: rgba(251,248,242,.96); color: var(--ink);
  border-radius: 999px; padding: 6px 10px; cursor: pointer;
  font: 600 10px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.dh-qopt.is-on,
.dh-qopt[aria-pressed="true"] {
  border-color: var(--violet); background: rgba(107,63,212,.12); color: var(--violet);
}
.dh-qopt:disabled { opacity: .4; cursor: not-allowed; }
.dh-qadd {
  display: flex; align-items: stretch; margin: 0 14px 14px;
  margin-top: auto;
  background: var(--violet);
  border-radius: 999px; overflow: hidden;
}
.dh-qadd button { border: 0; background: none; cursor: pointer; color: var(--paper); }
.dh-qadd .step { width: 44px; font: 500 17px/1 var(--font-mono); }
.dh-qadd .step:first-child { border-radius: 999px 0 0 999px; }
.dh-qadd .step:last-child  { border-radius: 0 999px 999px 0; }
.dh-qadd .go {
  flex: 1; padding: 14px 6px;
  font-family: var(--font-cta); font-weight: 800; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.dh-qadd .go.is-need-opt,
.dh-qadd .go[aria-disabled="true"] { opacity: .78; }
.dh-qadd button:hover,
.dh-qadd button:active { background: var(--teal); color: #5B2AAE; transform: none; }

.dh-prod-tools { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 7px; z-index: 3; }
.dh-tool {
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(23,21,28,.14); background: rgba(251,248,242,.92);
  cursor: pointer; display: grid; place-items: center;
}
.dh-tool:hover { background: #fff; border-color: var(--violet); }
.dh-tool[aria-pressed="true"] { background: #EBE3F8; border-color: var(--violet); }
.dh-tool[aria-pressed="true"] svg { stroke: var(--violet); }
.dh-tool.is-wished svg { fill: var(--coral); stroke: var(--coral); }

/* rails */
.dh-railwrap { position: relative; }
.dh-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: clamp(10px, 1.2vw, 16px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.dh-railbtn {
  position: absolute; z-index: 3; top: 36%;
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(243,240,231,.28); background: var(--ink-panel);
  cursor: pointer; display: grid; place-items: center;
}
.dh-railbtn:hover { border-color: var(--teal); }
.dh-railbtn.prev { left: clamp(-21px, -1.4vw, -11px); }
.dh-railbtn.next { right: clamp(-21px, -1.4vw, -11px); }

/* tabs */
.dh-tabs { display: inline-flex; gap: 0; border: 1px solid rgba(243,240,231,.2); }
.dh-tab {
  border: 0; cursor: pointer; padding: 11px 20px; background: transparent; color: var(--muted);
  font-family: var(--font-cta); font-weight: 800; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.dh-tab[aria-selected="true"] { background: var(--ivory); color: var(--text-dark); }
.dh-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }

/* ── section grounds ──────────────────────────────────────────────────── */
.dh-sec--ivory { background: var(--ivory); color: var(--text-dark); }
.dh-sec--ink   { background: var(--ink); }
.dh-sec--panel { background: var(--ink-panel); }
.dh-sec--black { background: #000; }

.dh-sec--favourites {
  position: relative; isolation: isolate; background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(8,8,10,.82) 0%, rgba(8,8,10,.6) 55%, rgba(8,8,10,.78) 100%),
    url('../assets/bg-favourites.jpg');
  background-size: cover, cover; background-position: center, bottom center;
  background-repeat: no-repeat, no-repeat; overflow: hidden;
}
.dh-lattice { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: .16; }

/* ── kit bands ────────────────────────────────────────────────────────── */
.dh-kit { background: var(--teal-band); }
.dh-kit-teal { background: var(--teal-band); padding-bottom: clamp(30px, 4vw, 64px); }
.dh-kit-inner {
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(28px, 3.2vw, 50px) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 40px);
}
.dh-kit-inner.rev { flex-wrap: wrap-reverse; }
.dh-kit-art { position: relative; flex: 1 1 340px; min-width: min(100%, 260px); display: flex; justify-content: center; overflow: visible; }
.dh-kit-art > div { position: relative; width: min(112%, 520px); aspect-ratio: 1.05 / 1; background: transparent; }
.dh-kit-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dh-kit-copy { flex: 1 1 320px; min-width: min(100%, 280px); text-align: center; color: var(--teal-deep); }
.dh-kit-copy h2, .dh-kit-copy h3 {
  margin: 0 0 14px; font-family: var(--font-heading); font-weight: 900;
  font-stretch: 78%; font-variation-settings: 'wdth' 78;
  font-size: clamp(27px, 3.3vw, 42px); line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}
.dh-kit-copy .band {
  margin: 0; padding: 11px 0;
  border-top: 1.5px solid rgba(6,35,31,.5); border-bottom: 1.5px solid rgba(6,35,31,.5);
  font-family: var(--font-heading); font-weight: 800; font-size: 12.5px;
  letter-spacing: .05em; text-transform: uppercase;
}
.dh-kit-copy .tags { margin: 12px 0 0; font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(6,35,31,.86); }
.dh-kit-copy .body { margin: 16px auto 0; max-width: 42ch; font-size: 13.5px; line-height: 1.6; color: rgba(6,35,31,.84); text-wrap: pretty; }
.dh-kit-copy .dh-btn { margin-top: 20px; padding: 13px 24px; gap: 11px; font-size: 11.5px; }

.dh-kit-violet {
  position: relative; z-index: 1;
  margin-top: calc(-1 * clamp(30px, 4vw, 64px));
  border-radius: clamp(44px, 8vw, 140px) clamp(44px, 8vw, 140px) 0 0;
  overflow: hidden;
  box-shadow: 0 -2px 0 rgba(168,246,230,.55), 0 -26px 64px -30px rgba(64,224,203,.55);
  background: radial-gradient(140% clamp(90px, 12vw, 180px) at 50% 0, rgba(150,242,224,.2) 0%, rgba(150,242,224,0) 76%), var(--violet-2);
}
.dh-kit-violet .dh-kit-copy { color: var(--paper); }
.dh-kit-violet .dh-kit-copy .band { border-color: rgba(247,244,255,.45); }
.dh-kit-violet .dh-kit-copy .tags { color: rgba(247,244,255,.96); }
.dh-kit-steps { margin: 16px auto 0; padding: 0; list-style: none; max-width: 44ch; display: grid; gap: 7px; text-align: left; }
.dh-kit-steps li { display: flex; gap: 13px; align-items: baseline; }
.dh-kit-steps .no { flex: 0 0 auto; font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; color: var(--teal-band); }
.dh-kit-steps .tx { font-size: 13.5px; line-height: 1.55; color: rgba(247,244,255,.92); }
.dh-kit-steps .tx strong { font-weight: 700; color: var(--paper); }

/* ── benefit tiles (ivory) ────────────────────────────────────────────── */
.dh-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(4px, .6vw, 10px); }
@media (max-width: 759px) { .dh-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dh-benefit {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(22px, 2.4vw, 34px) clamp(12px, 1.6vw, 22px);
  border-radius: 12px; background: transparent; transition: background .22s ease;
}
.dh-benefit .ring {
  width: 76px; height: 76px; flex: 0 0 auto; border-radius: 999px;
  border: 2px solid #9A5BE8; display: grid; place-items: center; transition: border-color .22s ease;
}
.dh-benefit .ring svg { stroke: var(--violet-2); transition: stroke .22s ease; }
.dh-benefit .label {
  font-family: var(--font-heading); font-weight: 700; font-stretch: 98%;
  font-size: 13px; line-height: 1.42; text-align: center; color: var(--muted-ink2);
  text-wrap: pretty; transition: color .22s ease;
}
.dh-benefit .bar { width: 44px; height: 2px; flex: 0 0 auto; margin-top: -4px; border-radius: 999px; background: var(--violet-ink); transition: background-color .22s ease, width .22s ease; }
.dh-benefit:hover { background: rgba(123,63,214,.10); }
.dh-benefit:hover .ring { border-color: var(--violet-2); }
.dh-benefit:hover .ring svg { stroke: #5B2AAE; }
.dh-benefit:hover .label { color: #2E1157; }
.dh-benefit:hover .bar { background: var(--violet-2); width: 56px; }

.dh-h-violet {
  margin: 0 0 clamp(20px, 2.4vw, 34px);
  font-family: var(--font-heading); font-weight: 900; font-stretch: 86%;
  font-size: clamp(26px, 3.1vw, 40px); line-height: 1.05; letter-spacing: -.005em;
  text-align: center; color: var(--violet-2);
}

/* ── science split ────────────────────────────────────────────────────── */
.dh-science {
  position: relative; background-color: #0A0812;
  background-image:
    linear-gradient(90deg, rgba(8,8,10,.3) 0%, rgba(8,8,10,.12) 50%, rgba(8,8,10,.4) 100%),
    url('../assets/bg-science.jpg');
  background-size: cover, 100% auto; background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  min-height: clamp(330px, 34vw, 470px); overflow: hidden;
}
.dh-science-mol {
  position: absolute; right: clamp(8px, 3vw, 54px); top: 50%; transform: translateY(-50%);
  width: clamp(190px, 25vw, 360px); pointer-events: none; opacity: .85;
}
.dh-science-layer { position: absolute; inset: 0; display: flex; pointer-events: none; }
.dh-science-panel {
  flex: 1 1 52%; max-width: 680px; min-width: min(100%, 300px);
  background: var(--ivory);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  padding: clamp(26px, 3.2vw, 52px) clamp(80px, 10vw, 190px) clamp(26px, 3.2vw, 52px)
           max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  display: flex; flex-direction: column; justify-content: center;
  position: relative; pointer-events: auto;
}
.dh-science-panel h2 { margin: 0 0 18px; color: var(--text-dark); }
.dh-science-panel h2 em { color: var(--violet); }
.dh-science-panel p { margin: 0 0 24px; max-width: 34ch; font-size: 14px; color: var(--muted-ink2); text-wrap: pretty; }
.dh-science-panel .dh-btn { align-self: flex-start; padding: 15px 24px; }
.dh-seal { position: absolute; right: clamp(44px, 7vw, 130px); bottom: clamp(22px, 3vw, 46px); width: clamp(76px, 7.5vw, 104px); opacity: .38; }
.dh-seal-rot { animation: dh-spin 44s linear infinite; transform-origin: 60px 60px; }
@media (prefers-reduced-motion: reduce) { .dh-seal-rot { animation: none; } }
@media (max-width: 760px) {
  .dh-science-panel { clip-path: none; padding-right: clamp(20px, 8vw, 60px); max-width: 100%; }
  .dh-science-mol { opacity: .3; }
}

/* ── quality steps ────────────────────────────────────────────────────── */
.dh-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(18px, 2.2vw, 32px); }
.dh-steps li { border-top: 2px solid var(--ivory); padding: 18px 0 0; }
.dh-steps .no { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .16em; color: var(--lavender); margin-bottom: 12px; }
.dh-steps h3 {
  margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; font-stretch: 82%;
  font-size: clamp(18px, 1.7vw, 23px); letter-spacing: .04em; text-transform: uppercase; color: var(--ivory);
}
.dh-steps p { margin: 0; font-size: 14.5px; color: var(--muted-2); text-wrap: pretty; }

/* ── testimonial ──────────────────────────────────────────────────────── */
.dh-quote { position: relative; background: #000; overflow: hidden; }
.dh-quote-mol { position: absolute; right: -26px; top: -30px; width: clamp(140px, 15vw, 220px); pointer-events: none; opacity: .2; }
.dh-quote-inner {
  position: relative; max-width: var(--shell); margin: 0 auto;
  padding: clamp(24px, 2.8vw, 42px) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.6vw, 42px);
}
.dh-quote-mark { font-family: var(--font-heading); font-weight: 900; font-size: clamp(58px, 6.4vw, 98px); line-height: .62; color: var(--violet); flex: 0 0 auto; }
.dh-quote blockquote { flex: 1 1 320px; margin: 0; }
.dh-quote blockquote p {
  margin: 0 0 14px; font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2.4vw, 34px); line-height: 1.24; letter-spacing: -.008em;
  color: var(--ivory); text-wrap: pretty;
}
.dh-quote blockquote footer { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3); }
.dh-quote-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.dh-quote-side .rate { font-size: 19px; letter-spacing: .2em; color: #A98BF5; }
.dh-verified { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.dh-round {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(243,240,231,.26); background: transparent;
  cursor: pointer; display: grid; place-items: center;
}
.dh-round:hover { border-color: var(--teal); }
.dh-quote-fade { animation: dh-rise .34s ease both; }

/* ── UGC ──────────────────────────────────────────────────────────────── */
.dh-ugcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: clamp(8px, 1vw, 14px); }
.dh-ugc {
  overflow: hidden; border-radius: clamp(13px, 1.7vw, 20px);
  aspect-ratio: 1 / 1; border-top: 2px solid var(--violet-2); display: block; position: relative;
}
.dh-ugc img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.75,.3,1); }
.dh-ugc:hover img { transform: scale(1.07); }

/* ── loyalty ──────────────────────────────────────────────────────────── */
.dh-loyalty { background: var(--ink-panel); border-top: 1px solid rgba(243,240,231,.1); border-bottom: 1px solid rgba(243,240,231,.1); }
.dh-loyalty .dh-shell { padding-top: clamp(26px, 3vw, 46px); padding-bottom: clamp(26px, 3vw, 46px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 44px); }
.dh-perks { flex: 1 1 280px; margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: rgba(243,240,231,.12); }
.dh-perks li { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--ink-panel); }
.dh-perks span { font-size: 13.5px; font-weight: 500; color: var(--ivory); }

/* ── field guide cards ────────────────────────────────────────────────── */
.dh-artgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.dh-art {
  display: flex; align-items: stretch; overflow: hidden;
  border-radius: clamp(15px, 1.9vw, 22px); background: var(--ivory-card); color: var(--text-dark);
  transition: transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease;
}
.dh-art:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -26px rgba(0,0,0,.45); color: var(--text-dark); }
.dh-art .dh-card-media { flex: 0 0 44%; min-width: 0; min-height: 150px; position: relative; display: block; overflow: hidden; }
.dh-art .dh-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dh-art .body { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.dh-art .tag { font: 500 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-ink); }
.dh-art .title { font-size: 16.5px; line-height: 1.26; font-weight: 600; text-wrap: pretty; }
.dh-art .go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--violet);
  transition: gap .22s ease;
}
.dh-art:hover .go { gap: 13px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.dh-footer {
  position: relative; background-color: var(--ink);
  background-image:
    linear-gradient(92deg, rgba(8,8,10,.5) 0%, rgba(8,8,10,.8) 52%, rgba(8,8,10,.9) 100%),
    url('../assets/bg-footer.jpg');
  background-size: cover, cover; background-position: center, left center;
  background-repeat: no-repeat, no-repeat; color: var(--ivory); overflow: hidden;
}
.dh-footer-chain { position: absolute; left: -42px; top: 0; height: 100%; width: auto; pointer-events: none; opacity: .2; }
.dh-footer-logo { position: relative; max-width: var(--shell); margin: 0 auto; padding: clamp(30px, 3.6vw, 52px) var(--gutter) 0; display: grid; place-items: center; }
.dh-footer-logo img { width: clamp(132px, 15vw, 186px); height: auto; }
.dh-footer-cols {
  position: relative; max-width: var(--shell); margin: 0 auto;
  padding: clamp(24px, 2.8vw, 40px) var(--gutter) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(24px, 3vw, 42px);
}
.dh-footer-brand { grid-column: span 2; min-width: min(100%, 290px); }
.dh-footer-brand h2 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 800; font-stretch: 82%; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.dh-footer-brand p.sub { margin: 0 0 18px; font-size: 14px; color: rgba(255,255,255,.82); }
.dh-subscribe { margin: 0 0 8px; display: flex; align-items: stretch; max-width: 330px; border: 1px solid rgba(243,240,231,.26); }
.dh-subscribe input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 14px; color: var(--ivory); font-size: 14px; outline: none; }
.dh-subscribe button {
  width: 48px; flex: 0 0 auto; border: 0; cursor: pointer; display: grid; place-items: center;
  background-image: var(--grad); background-size: 220% 100%; background-position: 0% 50%;
  transition: background-position .5s ease;
}
.dh-subscribe button:hover { background-position: 100% 50%; }
.dh-subscribe-note { margin: 0 0 20px; font-size: 11.5px; color: rgba(255,255,255,.66); }
.dh-subscribed {
  margin: 0 0 14px; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px;
  border: 1px solid rgba(61,224,200,.5); font: 500 11.5px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.dh-socials { display: flex; gap: 6px; }
.dh-socials a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ivory); }
.dh-socials a:hover { color: var(--teal); }
.dh-footer-cols nav h2 { margin: 0 0 16px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.dh-footer-cols nav a { display: block; padding: 6px 0; font-size: 14px; color: #FFFFFF; }
.dh-footer-cols nav a:hover { color: var(--teal); transform: translateX(4px); }

.dh-footer-bottom { position: relative; background: var(--violet); margin-top: clamp(24px, 3vw, 38px); }
.dh-footer-bottom .dh-shell { padding-top: 22px; padding-bottom: 22px; }
.dh-footer-bottom .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.dh-footer-bottom p { margin: 0; font: 400 11.5px/1 var(--font-mono); letter-spacing: .07em; color: rgba(247,244,255,.9); }
.dh-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.dh-pay span { padding: 7px 11px; border-radius: 5px; background: var(--ivory); font: 600 9.5px/1 var(--font-mono); letter-spacing: .07em; color: var(--text-dark); }
.dh-age { display: flex; align-items: center; gap: 12px; }
.dh-age .tx { font: 400 10.5px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(247,244,255,.88); text-align: right; }
.dh-age .mark { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 999px; border: 1.5px solid rgba(247,244,255,.85); display: grid; place-items: center; font: 600 13px/1 var(--font-mono); color: var(--paper); }
.dh-legalrow { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.dh-legalrow a { font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(247,244,255,.9); }
.dh-legalrow a:hover { color: #fff; }

/* ── search overlay ───────────────────────────────────────────────────── */
.dh-overlay-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.74); border: 0; backdrop-filter: blur(2px); }
.dh-search {
  position: fixed; z-index: 101; left: 50%; top: clamp(16px, 7vh, 96px); transform: translateX(-50%);
  width: min(94vw, 760px); max-height: 82vh; display: flex; flex-direction: column;
  border-radius: 26px; overflow: hidden; background: var(--ink-panel);
  border: 1px solid rgba(243,240,231,.18); animation: dh-drop .2s ease both;
}
.dh-search-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(243,240,231,.14); }
.dh-search-head input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 17px; color: var(--ivory); }
.dh-search-head .esc { font: 400 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted-ink); }
.dh-search-body { overflow-y: auto; padding: 18px 22px 22px; min-height: 0; }
.dh-search-body h3 { margin: 0 0 12px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.dh-search-body h3 + h3 { margin-top: 24px; }
.dh-res { display: grid; gap: 8px; }
.dh-res a { display: flex; align-items: center; gap: 14px; padding: 10px; background: rgba(243,240,231,.05); color: var(--ivory); }
.dh-res a:hover { background: rgba(243,240,231,.11); color: var(--ivory); }
.dh-res .thumb { width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; background: linear-gradient(150deg, #231A38, #12242B); display: grid; place-items: center; }
.dh-res .thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.dh-res .thumb .tag { font: 500 9.5px/1 var(--font-mono); color: #E8E2F2; }
.dh-res .n { display: block; font-weight: 600; font-size: 14.5px; }
.dh-res .m { display: block; font: 400 11px/1.4 var(--font-mono); letter-spacing: .07em; color: var(--muted-3); }
.dh-nores { padding: 22px; background: rgba(123,63,214,.14); border: 1px solid rgba(123,63,214,.34); margin-bottom: 20px; }
.dh-nores p:first-child { margin: 0 0 6px; font-weight: 600; font-size: 15px; color: var(--ivory); }
.dh-nores p:last-child { margin: 0; font-size: 14px; color: var(--muted-2); }
.dh-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.dh-chiprow .dh-chip { padding: 9px 15px; font-size: 12px; }

/* ── cart drawer ──────────────────────────────────────────────────────── */
.dh-cart {
  position: fixed; z-index: 101; inset: 10px 10px 10px auto;
  width: min(94vw, 430px); border-radius: 26px; overflow: hidden;
  background: var(--ink-panel); display: flex; flex-direction: column;
  animation: dh-rise .22s ease both; box-shadow: -30px 0 70px -30px rgba(0,0,0,.95);
}
.dh-cart .seam { height: 3px; background: linear-gradient(90deg, #7B3FD6, #669AF5 42%, #3DE0C8); }
.dh-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; }
.dh-cart-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 900; font-stretch: 78%; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--ivory); }
.dh-ship { padding: 0 22px 18px; }
.dh-ship .track { height: 6px; background: rgba(243,240,231,.12); }
.dh-ship .bar { height: 100%; background: linear-gradient(90deg, #3DE0C8, #669AF5 55%, #7B3FD6); transition: width .45s cubic-bezier(.2,.75,.3,1); }
.dh-ship p { margin: 9px 0 0; font: 400 11.5px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--muted-3); }
.dh-cart-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 18px; }
.dh-line { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(243,240,231,.12); }
.dh-line .thumb { width: 70px; height: 70px; flex: 0 0 auto; overflow: hidden; border-radius: 8px; background: linear-gradient(150deg, #231A38, #12242B); }
.dh-line .thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.dh-line .n { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: var(--ivory); }
.dh-line .s { margin: 0 0 9px; font: 400 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted-ink); }
.dh-qty { display: inline-flex; align-items: center; border: 1px solid rgba(243,240,231,.24); border-radius: 999px; overflow: hidden; }
.dh-qty button { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font: 500 15px/1 var(--font-mono); color: var(--ivory); }
.dh-qty button:hover { color: var(--teal); }
.dh-qty span { min-width: 22px; text-align: center; font: 500 13px/1 var(--font-mono); color: var(--ivory); }
.dh-remove { border: 0; background: none; cursor: pointer; font: 400 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--coral-lt); padding: 8px 4px; }
.dh-remove:hover { color: #fff; }
.dh-cart-foot { border-top: 2px solid var(--ivory); padding: 18px 22px 22px; background: var(--ink); }
.dh-cart-foot .sum { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.dh-cart-foot .sum span:first-child { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3); }
.dh-cart-foot .sum span:last-child { font-family: var(--font-heading); font-weight: 900; font-size: 26px; color: var(--ivory); }
.dh-cart-foot .fine { margin: 0 0 16px; font-size: 12.5px; color: var(--muted-ink); }
.dh-empty { padding: 30px 22px; background: rgba(123,63,214,.12); border: 1px solid rgba(123,63,214,.32); }
.dh-empty h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 800; font-stretch: 82%; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; color: var(--ivory); }
.dh-empty p { margin: 0 0 18px; font-size: 14px; color: var(--muted-2); }

/* ── toast ────────────────────────────────────────────────────────────── */
.dh-toast {
  position: fixed; z-index: 130; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  background: var(--ink-panel); border: 1px solid rgba(61,224,200,.5); color: var(--ivory);
  animation: dh-drop .22s ease both; max-width: calc(100vw - 24px);
}
.dh-toast span { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; }
.dh-toast button { border: 0; background: none; cursor: pointer; font-family: var(--font-cta); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); padding: 6px 2px; }
@media (max-width: 1039px) { .dh-toast { bottom: 92px; } }

/* ── mobile navigation ────────────────────────────────────────────────── */
.dh-mobilenav {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(8, 8, 10, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(243, 240, 231, .14);
  padding-bottom: env(safe-area-inset-bottom);
}
.dh-mobilenav a,
.dh-mobilenav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 58px; padding: 8px 4px;
  background: none; border: 0; cursor: pointer;
  color: var(--muted-3); text-decoration: none;
}
.dh-mobilenav span:not(.dh-badge):not(.ic) {
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.dh-mobilenav .ic { position: relative; display: grid; place-items: center; }
.dh-mobilenav .dh-badge { top: -6px; right: -10px; }
.dh-mobilenav a:hover, .dh-mobilenav button:hover,
.dh-mobilenav a:active, .dh-mobilenav button:active { color: var(--teal); transform: none; }
.dh-mobilenav [aria-current="page"] { color: var(--teal); }
.dh-mobilenav [aria-current="page"] svg { stroke: var(--teal); }

.dh-mobilebar-spacer { height: calc(60px + env(safe-area-inset-bottom)); }
@media (min-width: 1040px) { .dh-mobilenav, .dh-mobilebar-spacer { display: none; } }

/* ── age gate ─────────────────────────────────────────────────────────── */
.dh-agegate { position: fixed; inset: 0; z-index: 200; background: rgba(4,4,6,.94); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; }
.dh-agegate .panel {
  width: min(94vw, 480px); background: var(--ink-panel);
  border: 1px solid rgba(169,139,245,.4); border-radius: 26px;
  padding: clamp(26px, 4vw, 40px); text-align: center; animation: dh-rise .3s ease both;
}
.dh-agegate img { width: 92px; margin: 0 auto 18px; }
.dh-agegate h2 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 900; font-stretch: 78%; font-size: clamp(24px, 4vw, 32px); letter-spacing: .05em; text-transform: uppercase; color: var(--ivory); }
.dh-agegate p { margin: 0 0 22px; font-size: 14px; color: var(--muted-2); }
.dh-agegate .acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dh-agegate .fine { margin: 20px 0 0; font: 400 11px/1.6 var(--font-mono); letter-spacing: .06em; color: var(--muted-ink); }

/* ── shared bits ──────────────────────────────────────────────────────── */
.dh-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-3); }
.dh-crumbs a { color: var(--muted-3); }
.dh-crumbs a:hover { color: var(--teal); }
.dh-crumbs li[aria-current] { color: var(--ivory); }

.dh-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: rgba(245,241,234,.06); border: 1px solid rgba(205,183,255,.3);
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory);
}

.dh-skeleton {
  background: linear-gradient(100deg, rgba(243,240,231,.06) 20%, rgba(243,240,231,.14) 40%, rgba(243,240,231,.06) 60%);
  background-size: 220% 100%; animation: dh-shimmer 1.4s linear infinite; border-radius: 10px;
}

.dh-panel {
  position: relative; padding: 1px; border-radius: clamp(22px, 2.4vw, 32px);
  background: linear-gradient(150deg, rgba(130,86,232,.75), rgba(102,154,245,.4) 42%, rgba(22,205,189,.6));
}
.dh-panel > .in { border-radius: clamp(21px, 2.4vw, 31px); background: var(--ink-panel); padding: clamp(22px, 2.6vw, 36px) clamp(18px, 2.2vw, 32px); position: relative; overflow: hidden; }
.dh-panel--light > .in { background: var(--ivory); color: var(--text-dark2); }

/* ── late additions: card plumbing the renderers depend on ────────────── */
.dh-prod .dh-card-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dh-stretch { position: absolute; inset: 0; z-index: 1; }
.dh-cat .dh-stretch { z-index: 3; }
.dh-prod .dh-badge-tag { z-index: 2; }
.dh-prod-tools { z-index: 4; }
.dh-qadd .go { text-align: center; }
.dh-grid > .dh-prod, .dh-rail > .dh-prod { min-width: 0; }
.dh-mega[hidden] { display: none; }
.dh-catgrid .dh-cat .dh-card-media img { width: 100%; height: 100%; object-fit: cover; }
.dh-headrule .dh-display { margin: 0; }
.dh-sec--ivory .dh-display, .dh-sec--ivory h2 { color: var(--text-dark); }
.dh-sec--ivory .dh-em { color: #7B3FD6; }
.dh-sec--ivory .dh-meta { color: var(--muted-ink); }

/* ── tap targets: keep every standalone control at or above the 24px AA bar ── */
.dh-glink { padding: 4px 0; }
.dh-chip { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.dh-prod-title a { display: inline-block; padding: 4px 0; margin: -4px 0; }
.dh-remove { min-height: 32px; }
.dh-clearall { min-height: 32px; }

/* ── mobile composition ───────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* the shelf is a wide still; on a narrow screen it has to be cropped rather
     than scaled to the full width, and the scrim turns vertical so the headline
     still reads and the promise shelf lands on solid ground */
  .dh-hero {
    background-image:
      linear-gradient(180deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.84) 20%, rgba(8,8,10,.34) 42%,
                      rgba(8,8,10,.62) 55%, rgba(8,8,10,.93) 66%, var(--ink) 78%),
      url('../assets/bg-hero.jpg?v=20260825h');
    background-image:
      linear-gradient(180deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.84) 20%, rgba(8,8,10,.34) 42%,
                      rgba(8,8,10,.62) 55%, rgba(8,8,10,.93) 66%, var(--ink) 78%),
      -webkit-image-set(
        url('../assets/bg-hero.webp?v=20260825h') type('image/webp'),
        url('../assets/bg-hero.jpg?v=20260825h') type('image/jpeg')
      );
    background-image:
      linear-gradient(180deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.84) 20%, rgba(8,8,10,.34) 42%,
                      rgba(8,8,10,.62) 55%, rgba(8,8,10,.93) 66%, var(--ink) 78%),
      image-set(
        url('../assets/bg-hero.webp?v=20260825h') type('image/webp'),
        url('../assets/bg-hero.jpg?v=20260825h') type('image/jpeg')
      );
    background-size: cover, cover;
    background-position: center, 64% 36%;
  }
  .dh-hero-copy { min-height: clamp(240px, 50vw, 360px); }
  .dh-hero-inner { padding-bottom: clamp(130px, 36vw, 210px); }
  .dh-hero-rings { opacity: .22; }
  .dh-hero-mol { opacity: .16; }

  .dh-cat .veil { height: 76%; }
  .dh-cat .blurb { margin-top: 6px; font-size: 12px; }
}

@media (max-width: 560px) {
  .dh-qadd .go { font-size: 10.5px; letter-spacing: .1em; padding: 13px 4px; }
  .dh-qadd .step { width: 38px; }
  .dh-prod-body { padding: 14px 14px 10px; }
  .dh-prod-price .now { font-size: 16.5px; }
  .dh-prod-stock { margin-left: 0 !important; }
  .dh-prod-body > div:last-of-type { flex-wrap: wrap; }
}

/* ── mix and match: six across on desktop, two on mobile ──────────────── */
.dh-mixbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: -14px 0 22px;
}
.dh-mixnote { margin: 0; font: 400 12.5px/1.5 var(--font-mono); letter-spacing: .07em; color: var(--muted-3); }

.dh-grid6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
@media (max-width: 1240px) { .dh-grid6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .dh-grid6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .dh-grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the cards sit narrower here than anywhere else, so tighten the type and clamp
   the long catalogue titles rather than letting a card run to five lines */
.dh-grid6 .dh-prod-body { padding: 13px 13px 10px; gap: 5px; }
.dh-grid6 .dh-prod-kick { font-size: 9px; letter-spacing: .14em; }
.dh-grid6 .dh-prod-title {
  font-size: 14px; line-height: 1.24;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dh-grid6 .dh-prod-sku { font-size: 9.5px; letter-spacing: .06em; }
.dh-grid6 .dh-prod-price .now { font-size: 16px; }
.dh-grid6 .dh-prod-price .was { font-size: 12px; }
.dh-grid6 .dh-prod-stock { font-size: 9.5px; }
.dh-grid6 .dh-stars .track { font-size: 12px; letter-spacing: .08em; }
.dh-grid6 .dh-stars .count { font-size: 10px; }
.dh-grid6 .dh-qopts { margin: 0 10px 6px; }
.dh-grid6 .dh-qadd { margin: 0 10px 10px; }
.dh-grid6 .dh-qadd .step { width: 34px; font-size: 15px; }
.dh-grid6 .dh-qadd .go { font-size: 10px; letter-spacing: .1em; padding: 12px 2px; }
.dh-grid6 .dh-tool { width: 32px; height: 32px; }
.dh-grid6 .dh-prod-tools { gap: 5px; top: 8px; right: 8px; }
.dh-grid6 .dh-badge-tag { top: 9px; left: 9px; padding: 5px 10px; font-size: 9px; }

/* ── text over imagery on small screens ───────────────────────────────────
   Captions on the category tiles and the promise shelf sit directly on the
   photograph. On a phone the tiles are short enough that a long caption rides
   up off the veil, so the veil runs the full height there and the type goes to
   plain white with a soft shadow to hold it. */
@media (max-width: 1039px) {
  .dh-cat { aspect-ratio: .8 / 1; }
  .dh-cat .veil {
    height: 100%;
    background: linear-gradient(180deg,
      rgba(8, 8, 10, .1) 0%, rgba(8, 8, 10, .45) 38%,
      rgba(8, 8, 10, .82) 64%, rgba(8, 8, 10, .95) 100%);
  }
  .dh-cat .cap .name,
  .dh-cat .blurb {
    color: #FFFFFF;
    text-shadow: 0 1px 10px rgba(8, 8, 10, .7);
  }
  .dh-cat .blurb { color: rgba(255, 255, 255, .92); }

  .dh-hero p.dh-lede { color: var(--ivory); text-shadow: 0 1px 12px rgba(8, 8, 10, .75); }
  .dh-promise .label {
    color: #FFFFFF;
    text-shadow: 0 1px 10px rgba(8, 8, 10, .8);
  }
  /* the gradient-filled secondary CTA loses too much on a busy photograph */
  .dh-hero-second {
    background: none; -webkit-text-fill-color: currentColor;
    color: var(--ivory); border-image: none; border-bottom-color: var(--teal);
    text-shadow: 0 1px 10px rgba(8, 8, 10, .8);
  }
}

/* ── category slider ──────────────────────────────────────────────────────
   Six tiles across on a desktop, two on a phone, each carrying a real product
   photograph from that shelf. The packshots are shot on white, so they sit in a
   white frame inside the dark tile rather than being keyed out. */
.dh-sliderwrap { position: relative; }

.dh-catslider {
  --slides: 6;
  --gap: clamp(10px, 1.2vw, 16px);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--slides) - 1) * var(--gap)) / var(--slides));
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px;
}
.dh-catslider::-webkit-scrollbar { display: none; }
@media (max-width: 1240px) { .dh-catslider { --slides: 4; } }
@media (max-width: 900px)  { .dh-catslider { --slides: 3; } }
@media (max-width: 680px)  { .dh-catslider { --slides: 2; } }

.dh-cattile {
  scroll-snap-align: start; position: relative; display: block; min-width: 0;
  border-radius: clamp(14px, 1.8vw, 20px); overflow: hidden;
  padding: 10px 10px 15px; color: var(--ivory);
  background: linear-gradient(165deg, rgba(123, 63, 214, .22), rgba(14, 14, 18, 1) 62%), var(--ink);
  border: 1px solid rgba(243, 240, 231, .12);
  transition: transform .3s cubic-bezier(.2,.75,.3,1), border-color .3s ease;
}
.dh-cattile:hover { transform: translateY(-5px); color: var(--ivory); }
.dh-cattile .shot {
  display: block; border-radius: clamp(9px, 1.1vw, 12px); overflow: hidden;
  background: #FFFFFF; aspect-ratio: 1 / 1; margin-bottom: 12px;
}
.dh-cattile .shot img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .45s cubic-bezier(.2,.75,.3,1);
}
.dh-cattile:hover .shot img { transform: scale(1.06); }
.dh-cattile .row { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.dh-cattile .name {
  font-family: var(--font-heading); font-weight: 800; font-stretch: 82%;
  font-size: clamp(12.5px, 1.05vw, 15px); letter-spacing: .05em; text-transform: uppercase;
}
.dh-cattile .row svg { margin-left: auto; flex: 0 0 auto; transition: transform .28s cubic-bezier(.2,.75,.3,1); }
.dh-cattile:hover .row svg { transform: translateX(4px); }
.dh-cattile .bar { display: block; width: 34px; height: 3px; margin: 9px 4px 0; transition: width .3s cubic-bezier(.2,.75,.3,1); }
.dh-cattile:hover .bar { width: 60px; }
.dh-cattile .n {
  display: block; margin: 8px 4px 0;
  font: 400 10px/1.4 var(--font-mono); letter-spacing: .08em; color: var(--muted-3);
}

/* the benefit tiles below the kit bands stay two-up on a phone */
@media (max-width: 459px) { .dh-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── carousels ────────────────────────────────────────────────────────────
   The mix-and-match shelf uses the same six-across density as the grid it
   replaced, but scroll-snaps so it can advance on its own. */
.dh-track {
  --slides: 6;
  --gap: clamp(8px, 1vw, 14px);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--slides) - 1) * var(--gap)) / var(--slides));
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 2px;
  max-width: none; /* never inherit package-tracking max-width from pages.css */
}
.dh-track::-webkit-scrollbar { display: none; }
.dh-track > * { scroll-snap-align: start; min-width: 0; }
.dh-track:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
@media (max-width: 1240px) { .dh-track--6 { --slides: 4; } }
@media (max-width: 900px)  { .dh-track--6 { --slides: 3; } }
@media (max-width: 680px)  { .dh-track--6 { --slides: 2; } }

/* the six-across cards keep the tighter type the old grid had */
.dh-track--6 .dh-prod-body { padding: 13px 13px 10px; gap: 5px; }
.dh-track--6 .dh-prod-kick { font-size: 9px; letter-spacing: .14em; }
.dh-track--6 .dh-prod-title {
  font-size: 14px; line-height: 1.24;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dh-track--6 .dh-prod-sku { font-size: 9.5px; letter-spacing: .06em; }
.dh-track--6 .dh-prod-price .now { font-size: 16px; }
.dh-track--6 .dh-prod-price .was { font-size: 12px; }
.dh-track--6 .dh-prod-stock { font-size: 9.5px; }
.dh-track--6 .dh-stars .track { font-size: 12px; letter-spacing: .08em; }
.dh-track--6 .dh-stars .count { font-size: 10px; }
.dh-track--6 .dh-qadd { margin: 0 10px 10px; }
.dh-track--6 .dh-qadd .step { width: 34px; font-size: 15px; }
.dh-track--6 .dh-qadd .go { font-size: 10px; letter-spacing: .1em; padding: 12px 2px; }
.dh-track--6 .dh-qopts { display: none !important; }
.dh-track--6 .dh-prod {
  min-height: 0;
}
.dh-track--6 .dh-prod-body { min-height: 0; }
.dh-track--6 .dh-tool { width: 32px; height: 32px; }
.dh-track--6 .dh-prod-tools { gap: 5px; top: 8px; right: 8px; }
.dh-track--6 .dh-badge-tag { top: 9px; left: 9px; padding: 5px 10px; font-size: 9px; }

/* the sliver of progress under an auto-playing track */
.dh-progress {
  height: 2px; margin-top: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(243, 240, 231, .12);
}
.dh-progress > span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--teal));
  transition: width .3s linear;
}
.dh-progress.is-idle > span { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .dh-progress { display: none; } }

/* ── payment marks ────────────────────────────────────────────────────────
   The three gateways carry their own logos rather than a text label. Each
   sits on an ivory chip so the brand colours read at any size, and the
   wordmark half inherits currentColor from the chip. */
.dh-paylogo { display: block; height: 17px; width: auto; color: var(--text-dark); }
.dh-paymark-text {
  display: inline-block; font: 700 10px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--text-dark);
}
.dh-pay span {
  display: inline-flex; align-items: center;
  padding: 7px 12px; border-radius: 7px; background: var(--ivory);
}
.dh-pay span:hover { background: #fff; }

/* ── the editorial block under the category slider ────────────────────────
   Long-form copy beside a column of the four numbers people actually ask
   about, so the section carries weight without becoming a wall of text. */
.dh-infoblock {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .78fr);
  gap: clamp(22px, 3.4vw, 56px); align-items: start;
}
.dh-infoblock > div > p {
  margin: 0 0 16px; max-width: 62ch;
  font-size: 16.5px; line-height: 1.72; color: var(--muted-ink2);
  text-wrap: pretty;
}
.dh-infoblock strong { color: var(--text-dark); font-weight: 700; }

.dh-infofacts { display: grid; gap: 1px; background: rgba(23, 21, 28, .12); border-radius: 18px; overflow: hidden; }
.dh-fact { background: var(--ivory-card); padding: clamp(16px, 1.8vw, 22px); }
.dh-fact .n {
  display: block; margin-bottom: 5px;
  font-family: var(--font-heading); font-weight: 900;
  font-stretch: 74%; font-variation-settings: 'wdth' 74;
  font-size: clamp(26px, 2.9vw, 38px); line-height: 1;
  letter-spacing: .02em; color: #6B3FD4;
}
.dh-fact .l { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted-ink); }

@media (max-width: 900px) {
  .dh-infoblock { grid-template-columns: minmax(0, 1fr); }
  .dh-infofacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .dh-infofacts { grid-template-columns: minmax(0, 1fr); }
}

/* ── the shop mega menu ───────────────────────────────────────────────────
   Eleven shelves, each with its sub-shelves beneath it, laid out as columns
   that reflow rather than a fixed grid — the catalogue decides how many. */
.dh-mega-grid--shop { grid-template-columns: minmax(0, 1fr) minmax(0, .32fr); gap: 30px; }
.dh-mega-shelves {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 26px; align-items: start;
}
.dh-mega-shelf { min-width: 0; break-inside: avoid; }
.dh-mega-link.is-shelf {
  padding: 0 0 6px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(243, 240, 231, .16);
  font-family: var(--font-cta); font-weight: 800; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.dh-mega-link.is-shelf:hover { color: var(--paper); }
.dh-mega-link.is-shelf span,
.dh-mega-sub span {
  font: 400 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted-3);
}
.dh-mega-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 13.5px; color: var(--ivory);
}
.dh-mega-sub:hover { color: var(--teal); }
@media (max-width: 1080px) {
  .dh-mega-grid--shop { grid-template-columns: minmax(0, 1fr); }
  .dh-mega-grid--shop .dh-mega-feature { display: none; }
}
.dh-drawer-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dh-drawer-sub span { font: 400 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted-3); }

/* a price range needs to stay on one line and not crowd the strike-through */
.dh-prod-price .now { white-space: nowrap; }
.dh-grid[data-cols="6"] .dh-prod-price .now,
.dh-track--6 .dh-prod-price .now { font-size: 14.5px; letter-spacing: -.01em; }

/* ── a second photograph on a card ────────────────────────────────────────
   The alternate shot is stacked under the first and fades up on hover or
   keyboard focus. Touch devices get no hover, so the stepper button below is
   the real control there — and it is what makes this reachable by keyboard and
   assistive tech everywhere. */
.dh-card-media.has-alt img.alt {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #FFFFFF;
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .dh-prod:hover .dh-card-media.has-alt:not(.is-stepped) img.alt,
  .dh-prod:focus-within .dh-card-media.has-alt:not(.is-stepped) img.alt { opacity: 1; }
}

/* the stepper: always present, but out of the way until it is wanted */
.dh-shotbtn {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(23, 21, 28, .14);
  background: rgba(251, 248, 242, .94);
  color: var(--text-dark);
  opacity: .55; transition: opacity .25s ease, background .25s ease;
}
.dh-shotbtn .n { font: 500 9.5px/1 var(--font-mono); letter-spacing: .06em; }
.dh-shotbtn:hover, .dh-shotbtn:focus-visible { opacity: 1; background: #fff; }
.dh-prod:hover .dh-shotbtn { opacity: 1; }

/* on a touch screen it is the only way in, so it never dims */
@media (hover: none), (pointer: coarse) {
  .dh-shotbtn { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dh-card-media.has-alt img.alt { transition: none; }
}

/* ── cart drawer: a light surface ─────────────────────────────────────────
   The drawer is where money gets committed, so it reads as paper rather than
   as another dark overlay. Applied on every page, including the homepage, so
   the chrome stays identical site-wide. */
.dh-cart { background: var(--ivory); color: var(--text-dark); }
.dh-cart-head h2 { color: var(--text-dark); }
.dh-cart .dh-iconbtn,
.dh-cart .dh-cart-close { color: var(--violet); }
.dh-cart .dh-iconbtn:hover,
.dh-cart .dh-cart-close:hover { color: #2E1157; }
.dh-cart .dh-ship .track { background: rgba(23, 21, 28, .12); }
.dh-cart .dh-ship p { color: var(--muted-ink); }
.dh-cart .dh-shipband,
.dh-cart .dh-empty--ship {
  margin-left: 0; margin-right: 0;
}
.dh-cart .dh-empty--ship {
  background: var(--teal-band);
  border: 0;
}
.dh-cart .dh-empty--ship h3 { color: var(--teal-deep); }
.dh-cart .dh-empty--ship p { color: rgba(6, 35, 31, .78); }
.dh-cart .dh-line { border-bottom-color: rgba(23, 21, 28, .12); }
.dh-cart .dh-line .thumb { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(23, 21, 28, .08); }
.dh-cart .dh-line .n { color: var(--text-dark); }
.dh-cart .dh-line .s { color: var(--muted-ink); }
.dh-cart .dh-line-total {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--text-dark);
}
.dh-cart .dh-qty { border-color: rgba(23, 21, 28, .2); }
.dh-cart .dh-qty button,
.dh-cart .dh-qty span { color: var(--text-dark); }
.dh-cart .dh-qty button:hover { color: var(--violet); }
.dh-cart .dh-remove { color: var(--violet); }
.dh-cart .dh-remove:hover { color: #2E1157; }
.dh-cart .dh-remove--x {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; min-height: 40px; padding: 0;
}
.dh-cart-foot {
  border-top: 2px solid var(--text-dark);
  background: var(--ivory-card);
}
.dh-cart-foot .sum span:first-child { color: var(--muted-ink); }
.dh-cart-foot .sum span:last-child { color: var(--text-dark); }
.dh-cart-foot .fine { color: var(--muted-ink); }
.dh-cart .dh-empty { background: rgba(107, 63, 212, .07); border-color: rgba(107, 63, 212, .28); }
.dh-cart .dh-empty h3 { color: var(--text-dark); }
.dh-cart .dh-empty p { color: var(--muted-ink2); }
.dh-cart .dh-glink { background-image: linear-gradient(96deg, #6B3FD4 0%, #5B2AAE 42%, #0C6F66 100%); }