/* deinehaut — brand overlay on Dawn
 * Tokens, monospace ingredient data, refined typography, accent colors per product.
 */

/* ── Self-hosted brand typefaces (variable woff2, fully local) ──────────────
 * The display serif used to be a macOS-only system font ('Iowan Old Style')
 * with no @font-face, so it silently fell back to Georgia/Times off-Mac.
 * Now all four faces are real, self-hosted variable fonts. No third-party CDN.
 */
@font-face { font-family: 'Fraunces';       font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/fraunces-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces';       font-style: italic; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/fraunces-wght-italic.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/hanken-grotesk-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/hanken-grotesk-wght-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat';         font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/caveat-wght-normal.woff2') format('woff2'); }

:root {
  /* Surfaces — tiered so consecutive sections read as layered, not one flat wash */
  --dh-cream: #F5F0E6;        /* surface 0  */
  --dh-parchment: #EFE7D6;    /* surface ½  (new mid tier) */
  --dh-sand: #ECE0C7;         /* surface 1  */
  --dh-ivory: #F5F0E6;
  --dh-charcoal: #1F1D1A;
  --dh-ink: #15120E;          /* true warm near-black — the contrast anchor */
  --dh-graphite: #46433D;     /* darkened from #5A5751 → passes contrast on cream */
  --dh-line: rgba(31, 29, 26, 0.12);
  --dh-line-strong: rgba(31, 29, 26, 0.22);
  --dh-ochre: #B8895A;
  --dh-sage: #7B9683;
  --dh-terracotta: #B85543;
  --dh-terracotta-ink: #8F3D2E; /* darker terracotta for accent text on cream (passes contrast) */
  --dh-slate: #6B7A86;
  --dh-moss: #5B7A52;
  --dh-star: #C7913F;

  /* Type — distinctive, self-hosted; Inter/system kept only as graceful fallback */
  --dh-sans: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --dh-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --dh-display-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --dh-signature: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  /* Make Dawn's heading/body inherit the new sans (overrides the inline Inter vars) */
  --font-body-family: var(--dh-sans);
  --font-heading-family: var(--dh-sans);

  /* Depth — soft layered light for surfaces, cards and floating elements */
  --dh-shadow-card: 0 1px 2px rgba(31, 29, 26, 0.05), 0 12px 32px -12px rgba(31, 29, 26, 0.18);
  --dh-shadow-float: 0 2px 6px rgba(31, 29, 26, 0.07), 0 28px 60px -20px rgba(31, 29, 26, 0.30);
  --dh-grain-opacity: 0.04;
}

/* Refined letter-spacing — technical sans-serif feel */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: -0.02em;
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 { letter-spacing: -0.035em; line-height: 1.02; }
h2, .h2 { letter-spacing: -0.025em; line-height: 1.08; }

/* h0 — editorial display scale for hero only */
.rich-text__heading.h0 {
  font-size: clamp(2.8rem, 1.2rem + 5.6vw, 6.2rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
  font-weight: 600;
  max-width: 22ch;
}

body {
  font-feature-settings: "ss01", "cv11";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display serif (Fraunces): high optical size + a touch of SOFT for editorial warmth,
   WONK off for restraint. Targets the large serif display headlines only. */
.dh-reader__title,
.dh-founder__headline,
.dh-faq__title,
.dh-reviews__title,
.dh-compare__title,
.rich-text__heading.h0,
.dh-manifesto__headline {
  font-variation-settings: "opsz" 144, "SOFT" 12, "WONK" 0;
}

/* Brand wordmark — always lowercase */
.dh-wordmark {
  font-family: inherit;
  text-transform: lowercase;
  letter-spacing: -0.04em;
  font-weight: 600;
}

/* Monospace ingredient tables */
.dh-mono,
.rte table,
.product-information__description table {
  font-family: var(--dh-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  font-feature-settings: "tnum", "zero";
}

.rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.rte table th,
.rte table td {
  text-align: left;
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--dh-line);
  vertical-align: top;
}

.rte table th {
  font-family: var(--dh-sans);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--dh-graphite);
}

.rte ul {
  list-style: none;
  padding: 0;
}

.rte ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--dh-line);
  font-family: var(--dh-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.rte ul li strong {
  color: var(--dh-charcoal);
  font-weight: 600;
}

.rte h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dh-graphite);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.rte em {
  color: var(--dh-graphite);
  font-style: normal;
  font-size: 0.88em;
}

/* Product page hierarchy */
.product__title h1,
.product__title h2 {
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--dh-charcoal);
}

/* Buttons — flatter, more editorial */
.button,
.button--primary,
.button--secondary {
  border-radius: 0;
  letter-spacing: -0.005em;
  font-weight: 500;
  padding: 1.1rem 2rem;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease,
              color 200ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

/* Header — quieter */
.header__heading-link {
  text-transform: lowercase;
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* Per-product accent stripes (matches cremes.png tube labels) */
[data-product-handle="foundation"] .price__container .price-item,
.product--foundation .price__container .price-item {
  border-left: 3px solid var(--dh-ochre);
  padding-left: 0.75rem;
}

[data-product-handle="tone"] .price__container .price-item,
.product--tone .price__container .price-item {
  border-left: 3px solid var(--dh-sage);
  padding-left: 0.75rem;
}

[data-product-handle="clear"] .price__container .price-item,
.product--clear .price__container .price-item {
  border-left: 3px solid var(--dh-terracotta);
  padding-left: 0.75rem;
}

[data-product-handle="reset"] .price__container .price-item,
.product--reset .price__container .price-item {
  border-left: 3px solid var(--dh-slate);
  padding-left: 0.75rem;
}

[data-product-handle="biome"] .price__container .price-item,
.product--biome .price__container .price-item {
  border-left: 3px solid var(--dh-moss);
  padding-left: 0.75rem;
}

/* Calmer section transitions */
.section,
.shopify-section {
  scroll-margin-top: 6rem;
}

/* Smooth in-page anchor jumps (e.g. buy-card rating → reviews) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Reduce visual noise — quiet Dawn defaults */
.card-information {
  font-feature-settings: "ss01";
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .card,
  .card__media {
    transition-duration: 280ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ============================================================
 * Gated commerce — foundation/tone/clear are locked until the
 * customer purchases the Discovery Box. Triggered by absence of
 * `dh--box-owner` class on <body> (see layout/theme.liquid).
 * ============================================================ */

.dh--no-box .card-wrapper:has(a[href$="/products/foundation"]),
.dh--no-box .card-wrapper:has(a[href$="/products/tone"]),
.dh--no-box .card-wrapper:has(a[href$="/products/clear"]),
.dh--no-box .card-wrapper:has(a[href$="/products/reset"]),
.dh--no-box .card-wrapper:has(a[href$="/products/biome"]),
.dh--no-box .grid__item:has(a[href$="/products/foundation"]),
.dh--no-box .grid__item:has(a[href$="/products/tone"]),
.dh--no-box .grid__item:has(a[href$="/products/clear"]),
.dh--no-box .grid__item:has(a[href$="/products/reset"]),
.dh--no-box .grid__item:has(a[href$="/products/biome"]) {
  position: relative;
  opacity: 0.55;
  filter: grayscale(35%);
  transition: opacity 250ms ease, filter 250ms ease;
}

.dh--no-box .card-wrapper:has(a[href$="/products/foundation"]):hover,
.dh--no-box .card-wrapper:has(a[href$="/products/tone"]):hover,
.dh--no-box .card-wrapper:has(a[href$="/products/clear"]):hover,
.dh--no-box .card-wrapper:has(a[href$="/products/reset"]):hover,
.dh--no-box .card-wrapper:has(a[href$="/products/biome"]):hover,
.dh--no-box .grid__item:has(a[href$="/products/foundation"]):hover,
.dh--no-box .grid__item:has(a[href$="/products/tone"]):hover,
.dh--no-box .grid__item:has(a[href$="/products/clear"]):hover,
.dh--no-box .grid__item:has(a[href$="/products/reset"]):hover,
.dh--no-box .grid__item:has(a[href$="/products/biome"]):hover {
  opacity: 0.7;
  filter: grayscale(15%);
}

/* Lock badge overlay */
.dh--no-box .card-wrapper:has(a[href$="/products/foundation"])::after,
.dh--no-box .card-wrapper:has(a[href$="/products/tone"])::after,
.dh--no-box .card-wrapper:has(a[href$="/products/clear"])::after,
.dh--no-box .card-wrapper:has(a[href$="/products/reset"])::after,
.dh--no-box .card-wrapper:has(a[href$="/products/biome"])::after,
.dh--no-box .grid__item:has(a[href$="/products/foundation"])::after,
.dh--no-box .grid__item:has(a[href$="/products/tone"])::after,
.dh--no-box .grid__item:has(a[href$="/products/clear"])::after,
.dh--no-box .grid__item:has(a[href$="/products/reset"])::after,
.dh--no-box .grid__item:has(a[href$="/products/biome"])::after {
  content: "🔒 Erst nach der deinehaut Lernreise";
  position: absolute;
  inset: auto 0 1.25rem 0;
  margin: 0 1rem;
  padding: 0.6rem 1rem;
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  font-family: var(--dh-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
  z-index: 4;
  border-radius: 0;
}

/* Per-tube accent stripe on the lock badge — matches cremes.png */
.dh--no-box .card-wrapper:has(a[href$="/products/foundation"])::after,
.dh--no-box .grid__item:has(a[href$="/products/foundation"])::after {
  border-top: 3px solid var(--dh-ochre);
}
.dh--no-box .card-wrapper:has(a[href$="/products/tone"])::after,
.dh--no-box .grid__item:has(a[href$="/products/tone"])::after {
  border-top: 3px solid var(--dh-sage);
}
.dh--no-box .card-wrapper:has(a[href$="/products/clear"])::after,
.dh--no-box .grid__item:has(a[href$="/products/clear"])::after {
  border-top: 3px solid var(--dh-terracotta);
}
.dh--no-box .card-wrapper:has(a[href$="/products/reset"])::after,
.dh--no-box .grid__item:has(a[href$="/products/reset"])::after {
  border-top: 3px solid var(--dh-slate);
}
.dh--no-box .card-wrapper:has(a[href$="/products/biome"])::after,
.dh--no-box .grid__item:has(a[href$="/products/biome"])::after {
  border-top: 3px solid var(--dh-moss);
}

/* Locked product page: dim CTA + show gate banner above buy buttons */
.dh--no-box[class*="product--foundation"],
.dh--no-box[class*="product--tone"],
.dh--no-box[class*="product--clear"],
.dh--no-box[class*="product--reset"],
.dh--no-box[class*="product--biome"] {
  /* Hook for product-template overrides if/when added. */
}

/* ============================================================
 * Hero — editorial rhythm. Single column, left-aligned, tight.
 * ============================================================ */

.rich-text .rich-text__blocks {
  max-width: 64rem;
}

/* Caption / eyebrow above the hero headline */
.rich-text__caption {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--dh-graphite);
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 4rem;
}

.rich-text__caption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.8rem;
  height: 1px;
  background: var(--dh-charcoal);
}

/* Subhead under the big headline — first text block (excludes rating) */
.rich-text__text:not(.rich-text__text--rating) > p {
  font-size: clamp(1.6rem, 1.4rem + 0.4vw, 1.85rem);
  line-height: 1.5;
  max-width: 48ch;
  color: rgba(31, 29, 26, 0.78);
  margin-top: 1.8rem;
}

/* Button row — sit them side by side, generous spacing */
.rich-text__buttons {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 0.75rem !important;
  margin-top: 2.4rem !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
}

.rich-text__buttons--multiple > * {
  flex-grow: 0 !important;
  min-width: 0 !important;
}

.rich-text__buttons .button {
  font-size: 1.45rem;
  width: auto;
}

.rich-text__buttons .button--primary,
.rich-text__buttons .button:not(.button--secondary) {
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  border: none;
  box-shadow: none;
  padding: 1.15rem 2.1rem;
}

.rich-text__buttons .button--primary:hover,
.rich-text__buttons .button:not(.button--secondary):hover {
  background: var(--dh-ochre);
  color: var(--dh-cream);
}

.rich-text__buttons .button--secondary {
  background: transparent;
  color: var(--dh-charcoal);
  border: 1px solid var(--dh-line-strong);
  padding: 1.15rem 2.1rem;
}

.rich-text__buttons .button--secondary:hover {
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  border-color: var(--dh-charcoal);
}

/* Rating row under buttons */
.rich-text__text--rating {
  margin-top: 1.8rem !important;
}

.rich-text__text--rating > p {
  font-size: 1.45rem !important;
  color: var(--dh-charcoal) !important;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum", "ss01";
  max-width: none !important;
  margin: 0 !important;
  line-height: 1.5;
}

.rich-text__text--rating .dh-rating__stars {
  color: var(--dh-star);
  letter-spacing: 0.08em;
  font-size: 1.05em;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: -1px;
}

.rich-text__text--rating > p strong {
  font-weight: 600;
  color: var(--dh-charcoal);
  margin-right: 0.15rem;
}

/* ============================================================
 * Trust quadrant — sections/dh-trust-quadrant.liquid
 * Four trust signals as a full-section 2x2 grid.
 * Icon + title per cell, centered vertically and horizontally.
 * Terracotta "+" anchors the inner crosshair; thin ochre
 * hairlines span the section.
 * ============================================================ */

.dh-trust-quadrant-section {
  padding-top: 0;
  padding-bottom: 0;
}

.dh-trust-quadrant {
  width: 100%;
  background: #ECE0C7;
}

.dh-trust-quadrant__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}

.dh-trust-quadrant__cell {
  position: relative;
  min-height: 160px;
  padding: 2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  border-right: 1px solid var(--dh-cream);
  border-bottom: 1px solid var(--dh-cream);
}

.dh-trust-quadrant__cell:nth-child(2n) {
  border-right: none;
}

.dh-trust-quadrant__cell:nth-child(n+3) {
  border-bottom: none;
}

.dh-trust-quadrant__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--dh-ochre);
}

.dh-trust-quadrant__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

/* Duo layout — two glyphs separated by a small "+" */
.dh-trust-quadrant__icon--duo {
  width: auto;
  gap: 0.5rem;
}

.dh-trust-quadrant__icon--duo svg {
  width: 2.2rem;
  height: 2.2rem;
}

.dh-trust-quadrant__icon-plus {
  font-family: var(--dh-mono);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--dh-terracotta);
  line-height: 1;
}

/* Flag — full-colour exception, kill the ochre tint inherited
   from the wrapper. */
.dh-trust-quadrant__icon--flag {
  color: inherit;
  width: 2.8rem;
}

.dh-trust-quadrant__title {
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--dh-charcoal);
  margin: 0;
  text-transform: none;
  max-width: 18ch;
  text-wrap: balance;
}

/* Terracotta "+" at the cross intersection — tan-filled disc
   masks the cream hairline crossover so the glyph reads cleanly. */
.dh-trust-quadrant__grid::after {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dh-mono);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--dh-terracotta);
  background: #ECE0C7;
  border-radius: 50%;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 750px) {
  .dh-trust-quadrant__cell {
    min-height: 200px;
    padding: 2.8rem 2rem;
    gap: 1.4rem;
  }

  .dh-trust-quadrant__icon {
    width: 3rem;
    height: 3rem;
  }

  .dh-trust-quadrant__icon--duo {
    width: auto;
    gap: 0.7rem;
  }

  .dh-trust-quadrant__icon--duo svg {
    width: 2.8rem;
    height: 2.8rem;
  }

  .dh-trust-quadrant__icon-plus {
    font-size: 1.4rem;
  }

  .dh-trust-quadrant__icon--flag {
    width: 3.4rem;
  }

  .dh-trust-quadrant__title {
    font-size: 1.75rem;
  }

  .dh-trust-quadrant__grid::after {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 2.4rem;
  }
}

/* ============================================================
 * Featured collection — calmer cards, restored Dawn defaults
 * with editorial pricing labels.
 * ============================================================ */

.card-wrapper {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card-wrapper:hover {
  transform: translateY(-2px);
}

.card__heading {
  text-transform: lowercase;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: 1.85rem !important;
}

.card__information .price__regular .price-item {
  font-feature-settings: "tnum", "ss01";
  font-weight: 500;
  font-size: 1.5rem;
}

/* Section heading rhythm — bigger h2 across the page */
.title.h1,
.section-header__title.h1,
.title-wrapper-with-link h2 {
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.4rem);
  letter-spacing: -0.035em;
  font-weight: 600;
}

/* Tighten product-grid section title block */
.title-wrapper-with-link {
  margin-bottom: 2.5rem;
}

/* Quiet the secondary subtitle text under section titles */
.section-header__title + .rte,
.title-wrapper + .rte {
  color: var(--dh-graphite);
  max-width: 48ch;
}

/* ============================================================
 * dh-hero — mobile-first product hero, Grüns-inspired rhythm.
 * Stacked on mobile (text → image), two-column on desktop.
 * ============================================================ */

.dh-hero-section {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--dh-terracotta);
}

.dh-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 28% at 50% 6%, rgba(255, 230, 200, 0.18) 0%, rgba(255, 230, 200, 0) 70%),
    linear-gradient(
      180deg,
      var(--dh-terracotta) 0%,
      var(--dh-terracotta) 14%,
      #C26050 18%,
      #D27D6D 22%,
      #E3A28C 25%,
      #EFC2AC 28%,
      #F4DECB 31%,
      var(--dh-ivory) 34%,
      var(--dh-ivory) 100%
    );
}

.dh-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 3.6rem;
  padding-bottom: 0;
  max-width: 130rem;
}

.dh-hero__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  max-width: 56rem;
}

.dh-hero__eyebrow {
  font-family: var(--dh-sans);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 1.6rem 0;
}

/* Rosacea-symptom chips — replace the old eyebrow */
.dh-hero__headline {
  font-size: clamp(3.4rem, 2.2rem + 4.8vw, 6.8rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
  text-shadow: 0 1px 2px rgba(31, 29, 26, 0.18);
}

.dh-hero__sub {
  font-size: clamp(1.55rem, 1.4rem + 0.4vw, 1.85rem);
  line-height: 1.5;
  color: #FFFFFF;
  margin: 1.8rem auto 0 auto;
  max-width: 44ch;
  text-align: center;
}

/* Center the headline as the title block. */
.dh-hero__headline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Top CTA — pill button positioned directly under the subhead.
 * Mirrors .dh-buy-card__cta visually but uses a distinct class so
 * the bottom buy-card button can evolve independently. */
.dh-hero__top-cta {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  max-width: 38rem;
  padding: clamp(0.85rem, 0.75rem + 0.3vw, 1.1rem) 2rem;
  margin-top: 2.4rem;
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  font-family: var(--dh-sans);
  font-size: clamp(1.45rem, 1.3rem + 0.3vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--dh-charcoal);
  border-radius: 999px;
  line-height: 1.2;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease,
              border-color 200ms ease;
}

.dh-hero__top-cta-line {
  display: block;
}

.dh-hero__top-cta-line--sub {
  font-weight: 400;
  font-size: 0.86em;
  opacity: 0.82;
}

.dh-hero__top-cta:hover,
.dh-hero__top-cta:focus-visible {
  background: var(--dh-ochre);
  border-color: var(--dh-ochre);
  color: var(--dh-cream);
  transform: translateY(-1px);
}

/* Top rating row — stars + label. The label already contains the `·`
 * dot separator between the score and the review count. */
.dh-hero__top-rating {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 0.7rem;
  margin: 1.2rem 0 0 0;
  font-family: var(--dh-sans);
  font-size: 1.35rem;
  color: var(--dh-charcoal);
  font-feature-settings: "tnum", "ss01";
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.dh-hero__top-rating-stars {
  color: var(--dh-star);
  letter-spacing: 0.08em;
  font-size: 1.45rem;
  line-height: 1;
}

/* Inline marquee inside the hero — credentials drift past as light
 * foreground text over the warm hero gradient. No band, no borders,
 * no ivory edge fades (those bled across the terracotta and made the
 * strip read as a sunken divider). */
.dh-hero__marquee {
  margin: 1.8rem calc(50% - 50vw) 0;
  width: 100vw;
  max-width: none;
  position: relative;
  z-index: 2;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  padding-block: clamp(0.6rem, 0.5rem + 0.4vw, 0.95rem);
}

.dh-hero__marquee .dh-marquee__item {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: clamp(0.85rem, 0.78rem + 0.28vw, 1rem);
  opacity: 1;
}

.dh-hero__marquee .dh-marquee__sep {
  color: #fff;
  opacity: 0.7;
}

.dh-hero__marquee::before,
.dh-hero__marquee::after {
  display: none;
}

.dh-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.4rem;
  width: 100%;
}

.dh-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.55rem 2rem;
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid var(--dh-charcoal);
  border-radius: 999px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease,
              color 200ms ease;
  text-align: center;
  line-height: 1.2;
}

.dh-hero__cta:hover {
  background: var(--dh-ochre);
  border-color: var(--dh-ochre);
  color: var(--dh-cream);
  transform: translateY(-1px);
}

.dh-hero__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2rem;
  background: transparent;
  color: var(--dh-charcoal);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: underline;
  text-decoration-color: var(--dh-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  border: none;
  transition: text-decoration-color 200ms ease, color 200ms ease;
}

.dh-hero__secondary:hover {
  color: var(--dh-ochre);
  text-decoration-color: var(--dh-ochre);
}

.dh-hero__rating {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.6rem 0 0 0;
  font-size: 1.4rem;
  color: var(--dh-charcoal);
  font-feature-settings: "tnum", "ss01";
  line-height: 1.4;
}

.dh-hero__stars {
  color: var(--dh-star);
  letter-spacing: 0.06em;
  font-size: 1.6rem;
  line-height: 1;
}

.dh-hero__rating-text {
  color: var(--dh-charcoal);
}

.dh-hero__steps {
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--dh-line);
  max-width: 56rem;
}

.dh-hero__steps-label {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 1.4rem 0;
}

.dh-hero__step-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dh-hero-step;
}

.dh-hero__step {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--dh-charcoal);
}

.dh-hero__step-num {
  flex-shrink: 0;
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--dh-ochre);
  font-variant-numeric: tabular-nums;
  padding-top: 0.2rem;
  min-width: 2.6rem;
}

.dh-hero__step-label {
  flex: 1 1 auto;
}

.dh-hero__badge {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  z-index: 2;
  display: inline-block;
  padding: 0.7rem 1.2rem;
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  font-family: var(--dh-mono);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  border-radius: 2px;
  transform: rotate(-3deg);
  transform-origin: top left;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(31, 29, 26, 0.18);
}

.dh-hero__media {
  position: relative;
  left: 50%;
  margin: 1.6rem 0 0;
  margin-left: -50vw;
  width: 100vw;
  max-width: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dh-hero__media::after {
  content: none;
}

.dh-hero__media img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: cover;
}

/* ---- Hero gallery (diashow) ---- */
.dh-hero__gallery {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.dh-hero__slides {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dh-hero__slides::-webkit-scrollbar {
  display: none;
}

.dh-hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dh-hero__slide img {
  display: block;
  width: 100%;
  max-width: 56rem;
  height: auto;
  object-fit: contain;
}

.dh-hero__thumbs {
  display: flex;
  gap: 0.9rem;
  padding: 0 1rem;
}

.dh-hero__thumb {
  flex: 0 0 auto;
  width: 6.4rem;
  height: 4.8rem;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(31, 29, 26, 0.14);
  border-radius: 0.6rem;
  background: rgba(245, 240, 230, 0.6);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.dh-hero__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dh-hero__thumb:hover,
.dh-hero__thumb:focus-visible {
  border-color: rgba(31, 29, 26, 0.45);
  outline: none;
}

.dh-hero__thumb.is-active {
  border-color: #1f1d1a;
  box-shadow: 0 0 0 1px #1f1d1a inset;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .dh-hero__slides {
    scroll-behavior: auto;
  }
}

/* Tablet — start to lay out two columns at ~750px */
@media (min-width: 750px) {
  .dh-hero__inner {
    padding-top: 5.6rem;
    gap: 3rem;
  }

  .dh-hero__content {
    max-width: 62rem;
  }

  .dh-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    gap: 1.2rem;
  }

  .dh-hero__cta {
    width: auto;
    padding: 1.4rem 2.6rem;
  }

  .dh-hero__media img,
  .dh-hero__slide img {
    max-width: 72rem;
  }

  .dh-hero__thumb {
    width: 7.2rem;
    height: 5.4rem;
  }

  .dh-hero__steps {
    margin-top: 3.2rem;
  }

  .dh-hero__step {
    font-size: 1.6rem;
  }

  .dh-hero__badge {
    top: 1.6rem;
    left: 1.6rem;
    font-size: 1.1rem;
    padding: 0.9rem 1.4rem;
  }
}

/* Desktop — full two-column hero */
@media (min-width: 990px) {
  .dh-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    padding-top: 7.2rem;
    padding-bottom: 4rem;
    min-height: clamp(54rem, 70vh, 78rem);
  }

  .dh-hero__content {
    flex: 0 1 56rem;
    max-width: 56rem;
  }

  .dh-hero__headline {
    font-size: clamp(5rem, 2rem + 4vw, 7.6rem);
    max-width: 14ch;
  }

  .dh-hero__media {
    flex: 1 1 auto;
    margin-top: 0;
    margin-right: -2rem;
    align-self: stretch;
    align-items: center;
  }

  .dh-hero__media img,
  .dh-hero__slide img {
    max-width: 78rem;
    margin-left: auto;
  }

  .dh-hero__badge {
    top: 2.4rem;
    left: 0;
    font-size: 1.15rem;
    padding: 1rem 1.6rem;
  }
}

@media (min-width: 1200px) {
  .dh-hero__media {
    margin-right: -4rem;
  }
  .dh-hero__media img,
  .dh-hero__slide img {
    max-width: 88rem;
  }
}

/* ============================================================
 * Mobile — hide the entire nav (menu drawer, search, account, cart icons).
 * Logo stays. Below 990px Dawn shows the hamburger drawer; we kill it.
 * ============================================================ */

@media (max-width: 989px) {
  .header__icons,
  .header__icon,
  .header__menu-item,
  .header__inline-menu,
  header-drawer,
  .menu-drawer-container,
  .header__active-menu-item,
  details-modal.header__search {
    display: none !important;
  }

  .header {
    grid-template-columns: 1fr auto 1fr !important;
    justify-items: center;
  }

  .header__heading,
  .header__heading-link {
    margin: 0 auto;
  }
}

/* ============================================================
 * dh-scroll-reader — long-form section with scroll-highlighted
 * paragraphs, a bottom progress bar, and a sticky purchase CTA.
 * Replaces the old "Das System" multicolumn block.
 * ============================================================ */

.dh-reader {
  /* Background comes from the section's color_scheme — do not hardcode.
   * See agentic/principles/design.md "Verifying surface rhythm". */
  padding: clamp(4rem, 3rem + 3vw, 7rem) 0 clamp(7rem, 5rem + 6vw, 12rem);
  position: relative;
}

.dh-reader__inner {
  max-width: 78rem;
  margin: 0 auto;
  /* Symmetric gutters now that the step counter lives inline with the
     eyebrow (no left margin badge to clear). */
  padding: 0 clamp(2rem, 1.5rem + 1vw, 3rem);
}

.dh-reader__eyebrow {
  font-family: var(--dh-mono);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 2.4rem 0;
  position: relative;
  padding-top: 1.4rem;
}

.dh-reader__eyebrow::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-terracotta);
  border-radius: 1px;
  margin-bottom: 1.2rem;
}

.dh-reader__title {
  font-family: var(--dh-display-serif);
  font-size: clamp(3.2rem, 2rem + 4vw, 5.6rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-weight: 600;
  color: var(--dh-charcoal);
  margin: 0 0 clamp(4rem, 3rem + 2vw, 7rem) 0;
  max-width: 18ch;
  text-wrap: balance;
}

/* Scroll-reader laid out around a literal vertical axis — the spine
   line runs through all four step nodes so the "Vier Achsen" metaphor
   is visible, not just lexical. */
.dh-reader__steps {
  list-style: none;
  padding: 0 0 0 5.4rem;
  margin: 0;
  counter-reset: dh-step;
  position: relative;
}

.dh-reader__steps::before {
  content: '';
  position: absolute;
  left: 1.6rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(184, 85, 67, 0) 0%,
    rgba(184, 85, 67, 0.22) 8%,
    rgba(184, 85, 67, 0.22) 92%,
    rgba(184, 85, 67, 0) 100%
  );
  pointer-events: none;
}

.dh-reader__step {
  position: relative;
  padding: clamp(2.4rem, 2rem + 1vw, 3.2rem) 0;
  border-bottom: 1px solid rgba(184, 85, 67, 0.14);
  counter-increment: dh-step;
  opacity: 1;
}

.dh-reader__step:last-child {
  border-bottom: none;
}

/* Spine node — circular badge that sits on the axis line at the y of
   each step's label row. Outlined by default, fills with terracotta
   once the step has been read or is currently active. */
.dh-reader__step::before {
  content: counter(dh-step, decimal-leading-zero);
  position: absolute;
  left: -5.4rem;
  top: clamp(2.1rem, 1.6rem + 1vw, 2.9rem);
  width: 3.2rem;
  height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dh-ivory);
  color: var(--dh-terracotta);
  border: 1px solid var(--dh-terracotta);
  border-radius: 999px;
  font-family: var(--dh-mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-weight: 600;
  line-height: 1;
  z-index: 2;
  transition: background 360ms ease,
              color 360ms ease,
              box-shadow 360ms ease,
              border-color 360ms ease;
}

/* Read state — past steps fill in to show progress along the axis. */
.dh-reader__step.is-read::before {
  background: var(--dh-terracotta);
  color: #FFFFFF;
  border-color: var(--dh-terracotta);
}

/* Active state — filled node + soft halo + brighter watermark. */
.dh-reader__step.is-active::before {
  background: var(--dh-terracotta);
  color: #FFFFFF;
  border-color: var(--dh-terracotta);
  box-shadow: 0 0 0 6px rgba(184, 85, 67, 0.14);
}

/* Step label row — terracotta to match palette. The old inline counter
   badge is replaced by the spine node, so hide its ::before. */
.dh-reader__step-label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dh-terracotta-ink);
  margin-bottom: 1.1rem;
  font-feature-settings: "tnum";
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.dh-reader__step-label::before {
  display: none;
}

.dh-reader__step-headline {
  font-family: var(--dh-display-serif);
  font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--dh-charcoal);
  margin: 0 0 1.2rem 0;
  position: relative;
  z-index: 1;
}

.dh-reader__step-body {
  font-size: clamp(1.65rem, 1.4rem + 0.5vw, 1.9rem);
  line-height: 1.55;
  color: var(--dh-charcoal);
  margin: 0;
  max-width: 56ch;
  position: relative;
  z-index: 1;
}

.dh-reader__step-body em {
  color: var(--dh-graphite);
  font-style: normal;
  font-size: 0.92em;
}

/* Lead sentence stands alone above the actives table. */
.dh-reader__step-body > p {
  margin: 0;
}

/* Actives — one row per Wirkstoff, hairline-separated (no heavy box; it
   clashed with the editorial spine layout). The mono name + Dosis is a
   terracotta micro-term that never wraps; its effect follows beneath in
   graphite. Three-tone hierarchy: charcoal lead → terracotta term →
   graphite effect. */
.dh-reader__step-body ul {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
}

/* Compound .dh-reader__step-body.rte (both classes on the same div) so these
   beat the global `.rte ul li` flex/mono rule and keep the actives stacked:
   mono terracotta term on its own line, italic body-font comment beneath. */
.dh-reader__step-body.rte li {
  display: block;
  margin: 0;
  padding: 1.05rem 0;
  font-family: inherit;
  font-size: 0.82em;
  line-height: 1.5;
  font-style: italic;
  letter-spacing: 0;
  color: var(--dh-graphite);
  border-top: 1px solid var(--dh-line);
  border-bottom: 0;
}

.dh-reader__step-body.rte li:last-child {
  border-bottom: 1px solid var(--dh-line);
}

.dh-reader__step-body.rte li strong {
  display: block;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  font-family: var(--dh-mono);
  font-weight: 500;
  font-size: 0.92em;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--dh-terracotta-ink);
  font-variant-numeric: tabular-nums;
}

/* Scroll-highlight — JS toggles .is-active on the step nearest the viewport
   centre via IntersectionObserver. Dim siblings only when one is active so
   the initial (pre-scroll) state stays untouched. The active badge picks
   up a soft halo (no scale — would shift adjacent text). */
.dh-reader__steps:has(.dh-reader__step.is-active) .dh-reader__step:not(.is-active) {
  opacity: 0.36;
}


/* Fly-in — each step starts slightly below + dimmed and settles into
   place when it enters the viewport. Triggered per-step by JS adding
   .is-revealed so steps layer in one after another as the user scrolls.
   .dh-reader__steps owns the initial state so unrevealed steps stay
   hidden until the observer fires. */
.dh-reader__step {
  opacity: 0;
  transform: translateY(44px) scale(0.985);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 50% 0%;
  will-change: opacity, transform;
}

.dh-reader__step.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Once revealed, the active-state dimming takes over for any non-active
   siblings (handled by the :has() rule above). The .is-revealed override
   wins for the active step because the :has() rule excludes it. */
.dh-reader__steps:has(.dh-reader__step.is-active) .dh-reader__step.is-revealed:not(.is-active) {
  opacity: 0.36;
}

@media (prefers-reduced-motion: reduce) {
  .dh-reader__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dh-reader__step-label::before {
    transition: none;
  }
}

/* ============================================================
 * Hero layout v2 — single-column flow on all viewports.
 * Order: symptom chips → headline → subhead → credentials →
 * BUY CARD → image → method steps. Image stacks above steps.
 * Overrides the legacy two-column desktop rules above.
 * ============================================================ */

.dh-hero__inner {
  flex-direction: column !important;
  align-items: stretch;
  gap: 0 !important;
  max-width: 84rem !important;
  margin: 0 auto;
  min-height: 0 !important;
}

.dh-hero__content {
  display: flex;
  flex-direction: column;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

.dh-hero__media {
  position: relative;
  left: 50%;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  margin-top: clamp(3.2rem, 2.4rem + 1.5vw, 5.6rem) !important;
  margin-bottom: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  align-items: stretch;
  justify-content: center;
  padding: 0 !important;
}

.dh-hero__media img,
.dh-hero__slide img {
  display: block;
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
}

.dh-hero__headline {
  max-width: 22ch;
}

@media (min-width: 750px) {
  .dh-hero__inner {
    padding-top: 5.6rem;
  }
}

@media (min-width: 990px) {
  .dh-hero__inner {
    padding-top: 7.2rem;
    padding-bottom: 4rem;
  }

  .dh-hero__headline {
    font-size: clamp(4.4rem, 2rem + 3.4vw, 6.4rem);
    max-width: 22ch;
  }
}

/* ============================================================
 * Buy card — the prominent conversion block in the hero.
 * Lists what's included, big CTA, rating + social proof below.
 * ============================================================ */

/* Editorial buy panel — no border, no shadow, transparent. Sits as a content
   area within the hero's canvas. Visual structure carried by typography and
   the hairline row dividers in the includes list. */
.dh-buy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.8rem, 1.4rem + 0.8vw, 2.6rem);
  margin-top: clamp(2.4rem, 2rem + 1vw, 3.2rem);
  padding: clamp(2.4rem, 2rem + 1.4vw, 3.6rem) 0 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--dh-line);
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  max-width: 62rem;
  position: relative;
}

/* ---- Scroll-reveal entrance for the hero buy card panel ----
   Starts slightly below and dimmed; lifts into place with an expo ease.
   The top hairline grows in from the centre so the panel reads as
   "settling" rather than popping. */
.dh-buy-card[data-dh-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.dh-buy-card[data-dh-reveal]::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--dh-line);
  transform: translateX(-50%);
  transition: width 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
  pointer-events: none;
}

.dh-buy-card[data-dh-reveal] {
  border-top-color: transparent;
}

.dh-buy-card[data-dh-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.dh-buy-card[data-dh-reveal].is-revealed::before {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .dh-buy-card[data-dh-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    border-top-color: var(--dh-line);
  }
  .dh-buy-card[data-dh-reveal]::before {
    display: none;
  }
}

.dh-buy-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding-bottom: clamp(1.8rem, 1.6rem + 0.4vw, 2.4rem);
  border-bottom: 1px solid var(--dh-line);
}

.dh-buy-card__title-block {
  min-width: 0;
}

.dh-buy-card__name {
  font-size: clamp(2rem, 1.6rem + 0.8vw, 2.6rem);
  margin: 0;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--dh-charcoal);
  line-height: 1.1;
}

.dh-buy-card__sub {
  font-family: var(--dh-sans);
  font-size: 1.25rem;
  color: var(--dh-graphite);
  margin: 0.4rem 0 0 0;
  letter-spacing: 0.02em;
}

.dh-buy-card__price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.dh-buy-card__price {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.6rem, 2rem + 1.2vw, 3.2rem);
  font-weight: 500;
  color: var(--dh-charcoal);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  line-height: 1;
}

.dh-buy-card__price-meta {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  color: var(--dh-graphite);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.dh-buy-card__includes-header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0 0 1.4rem 0;
}

.dh-buy-card__includes-heading {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--dh-graphite);
  font-weight: 500;
  margin: 0;
}

.dh-buy-card__includes-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--dh-sans);
  font-size: 1.1rem;
  color: var(--dh-graphite);
  margin: 0;
  letter-spacing: 0.005em;
  font-style: italic;
  line-height: 1.4;
}

.dh-buy-card__includes-hint-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--dh-line-strong);
  border-radius: 999px;
  font-family: var(--dh-mono);
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dh-charcoal);
  line-height: 1;
  flex-shrink: 0;
}

.dh-buy-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Items are two-column rows: name on the left, volume on the right.
   No marker — the row separator dividers carry the visual rhythm. */
.dh-buy-card__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.55rem);
  line-height: 1.5;
  color: var(--dh-charcoal);
  padding: 0.9rem 0;
  border: none;
  border-bottom: 1px solid var(--dh-line);
  font-family: var(--dh-sans);
  font-feature-settings: "ss01";
}

.dh-buy-card__item:last-child {
  border-bottom: none;
}

.dh-buy-card__item-name {
  flex: 1 1 auto;
  min-width: 0;
}

.dh-buy-card__item-volume {
  flex-shrink: 0;
  font-family: var(--dh-mono);
  font-size: 0.92em;
  color: var(--dh-graphite);
  letter-spacing: 0;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* Expandable cream row — clicking the summary reveals the ingredient list. */
.dh-buy-card__item--expandable {
  padding: 0;
}

.dh-buy-card__details {
  width: 100%;
}

.dh-buy-card__details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 0.9rem 0;
  font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.55rem);
  line-height: 1.5;
  color: var(--dh-charcoal);
  font-family: var(--dh-sans);
  font-feature-settings: "ss01";
  transition: color 200ms ease;
}

.dh-buy-card__details > summary::-webkit-details-marker {
  display: none;
}

.dh-buy-card__details > summary:hover .dh-buy-card__item-name,
.dh-buy-card__details[open] > summary .dh-buy-card__item-name {
  color: var(--dh-ochre);
}

/* The per-row expand affordance — a small +/− pill that reads unambiguously
   as a tap target, with an inverted open state for clear two-state feedback. */
.dh-buy-card__chevron {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-left: 0.8rem;
  position: relative;
  background: rgba(184, 137, 90, 0.10);
  border: 1px solid rgba(184, 137, 90, 0.24);
  border-radius: 999px;
  transition: background 200ms ease, border-color 200ms ease;
}

.dh-buy-card__chevron::before,
.dh-buy-card__chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 1.6px;
  background: var(--dh-ochre);
  border-radius: 1px;
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms ease;
}

.dh-buy-card__chevron::before {
  transform: translate(-50%, -50%);
}

.dh-buy-card__chevron::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.dh-buy-card__details[open] .dh-buy-card__chevron {
  background: var(--dh-ochre);
  border-color: var(--dh-ochre);
}

.dh-buy-card__details[open] .dh-buy-card__chevron::before,
.dh-buy-card__details[open] .dh-buy-card__chevron::after {
  background: var(--dh-cream);
}

.dh-buy-card__details[open] .dh-buy-card__chevron::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Subtle row hover (desktop) / active (mobile) — reinforces that the row is interactive. */
.dh-buy-card__details > summary:hover .dh-buy-card__chevron,
.dh-buy-card__details > summary:focus-visible .dh-buy-card__chevron {
  background: rgba(184, 137, 90, 0.18);
  border-color: rgba(184, 137, 90, 0.36);
}

/* Expanded ingredient panel — pharmaceutical spec-sheet feel. */
.dh-buy-card__ingredients {
  margin: 0.6rem 0 1.6rem 0;
  padding: 1.4rem clamp(1.2rem, 1rem + 0.6vw, 1.8rem) 1.2rem;
  background: linear-gradient(180deg, rgba(245, 240, 230, 0.55) 0%, rgba(245, 240, 230, 0.32) 100%);
  border: 1px solid var(--dh-line);
  border-radius: 0.8rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  animation: dhBuyCardReveal 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dhBuyCardReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dh-buy-card__ingredients-label {
  font-family: var(--dh-mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--dh-graphite);
  font-weight: 500;
  margin: 0 0 1rem 0;
  padding: 0 0 0.7rem 0;
  border-bottom: 1px solid var(--dh-line);
}

.dh-buy-card__ingredient-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 0;
}

@media (min-width: 600px) {
  .dh-buy-card__ingredient-list {
    grid-template-columns: 1fr 1fr;
  }
}

.dh-buy-card__ingredient {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted rgba(31, 29, 26, 0.16);
  min-width: 0;
}

.dh-buy-card__ingredient:last-child {
  border-bottom: 0;
}

.dh-buy-card__ingredient--single {
  grid-template-columns: 1fr;
}

.dh-buy-card__ingredient-name {
  font-family: var(--dh-sans);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--dh-charcoal);
  font-weight: 500;
  letter-spacing: -0.005em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dh-buy-card__ingredient-value {
  font-family: var(--dh-mono);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--dh-ochre);
  letter-spacing: 0;
  font-feature-settings: "tnum", "zero";
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/* Tighten the dotted dividers when stacked into a single column on mobile
   — the last row of column 1 should not show a divider in the desktop grid either. */
@media (min-width: 600px) {
  .dh-buy-card__ingredient:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

/* Pills row above the price (Gratis Versand, etc.) */
.dh-buy-card__pills {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.dh-buy-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dh-sans);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  font-weight: 500;
  color: var(--dh-charcoal);
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--dh-line-strong);
  border-radius: 999px;
  background: transparent;
  line-height: 1.2;
  white-space: nowrap;
}

.dh-buy-card__pill-check {
  color: var(--dh-terracotta);
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1;
}

.dh-buy-card__cta {
  display: block;
  width: 100%;
  padding: clamp(1.6rem, 1.4rem + 0.4vw, 2rem) 2rem;
  background: var(--dh-terracotta);
  color: #FFFFFF;
  font-size: clamp(1.5rem, 1.3rem + 0.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--dh-terracotta);
  border-radius: 999px;
  line-height: 1.2;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease,
              border-color 200ms ease;
  box-shadow: none;
}

.dh-buy-card__cta-line {
  display: block;
}

.dh-buy-card__cta-line--sub {
  margin-top: 0.2em;
  font-weight: 400;
  font-size: 0.6em;
  letter-spacing: 0.01em;
  opacity: 0.88;
}

.dh-buy-card__cta:hover {
  background: #A04534;
  border-color: #A04534;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.dh-buy-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
  margin-top: 0.4rem;
}

.dh-buy-card__rating {
  font-size: 1.35rem;
  color: var(--dh-charcoal);
  margin: 0;
  font-feature-settings: "tnum", "ss01";
  letter-spacing: 0.01em;
}

.dh-buy-card__stars {
  color: var(--dh-terracotta);
  letter-spacing: 0.06em;
  margin-right: 0.5rem;
}

.dh-buy-card__assurance {
  font-family: var(--dh-sans);
  font-size: 1.2rem;
  color: var(--dh-graphite);
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.dh-buy-card__assurance--proof {
  color: var(--dh-charcoal);
  font-weight: 500;
}

/* (header is always center-stacked on every viewport now) */

/* ============================================================
 * Buy card — editorial polish layer (rating row, price trio,
 * consolidated trust cluster). Mobile-first; desktop inherits.
 * ============================================================ */

/* Rating row — quiet eyebrow at the top of the card. Links to #reviews. */
.dh-buy-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--dh-sans);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--dh-charcoal);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast, 150ms) ease;
}
.dh-buy-card__rating:hover .dh-buy-card__rating-count,
.dh-buy-card__rating:focus-visible .dh-buy-card__rating-count {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.dh-buy-card__rating:focus-visible {
  outline: 2px solid var(--dh-terracotta);
  outline-offset: 4px;
  border-radius: 4px;
}
.dh-buy-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--dh-terracotta);
}
.dh-buy-card__stars svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: currentColor;
  display: block;
}
.dh-buy-card__rating-value {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--dh-charcoal);
}
.dh-buy-card__rating-sep {
  color: rgba(31, 29, 26, 0.4);
  margin: 0 0.05rem;
}
.dh-buy-card__rating-count {
  color: rgba(31, 29, 26, 0.68);
  letter-spacing: 0.005em;
}

/* Price trio — Statt €152 einzeln · €109 · Du sparst €43,
   baseline-aligned, balanced typography. No big-number display. */
.dh-buy-card__price-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  width: 100%;
  margin: 0;
}
.dh-buy-card__price-row .dh-buy-card__price-anchor {
  font-family: var(--dh-sans);
  font-size: 1.25rem;
  color: rgba(31, 29, 26, 0.55);
  letter-spacing: -0.005em;
  font-weight: 400;
  line-height: 1.2;
}
.dh-buy-card__price-row .dh-buy-card__price-anchor s {
  text-decoration: line-through;
  text-decoration-color: rgba(31, 29, 26, 0.35);
  text-decoration-thickness: 1px;
}
.dh-buy-card__price-row .dh-buy-card__price-savings {
  font-family: var(--dh-mono);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-terracotta);
  font-weight: 600;
  background: none;
  padding: 0;
  border-radius: 0;
  line-height: 1.2;
}

/* Credential pair — pharmacist + lab development, anchored to the price.
   Pulled up under €189 so the price reads as earned, not bare. */
.dh-buy-card__credentials {
  list-style: none;
  margin: calc(clamp(1.8rem, 1.4rem + 0.8vw, 2.6rem) * -0.55) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.dh-buy-card__credential {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--dh-sans);
  font-size: 1.05rem;
  line-height: 1.4;
  color: rgba(31, 29, 26, 0.78);
  letter-spacing: 0.005em;
}
.dh-buy-card__credential-check {
  display: inline-block;
  width: 0.7rem;
  height: 0.42rem;
  border-left: 1.5px solid var(--dh-terracotta);
  border-bottom: 1.5px solid var(--dh-terracotta);
  transform: rotate(-45deg) translateY(-0.15rem);
  flex-shrink: 0;
}
@media (max-width: 380px) {
  .dh-buy-card__credential {
    font-size: 1rem;
  }
}

/* Value block — two-column grid: price + rating on the left, the
   credential pair on the right, split by a hairline divider. Replaces
   the old all-centered stack so price, rating and credentials read as
   two balanced groups instead of four lines down one axis. */
.dh-buy-card__value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
  width: 100%;
  text-align: left;
  margin-top: 0.2rem;
}
.dh-buy-card__value-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.dh-buy-card__value .dh-buy-card__price-row {
  justify-content: flex-start;
  margin: 0;
}
.dh-buy-card__value .dh-buy-card__rating {
  flex-wrap: wrap;
}
.dh-buy-card__value .dh-buy-card__rating-sep {
  display: none;
}
.dh-buy-card__value .dh-buy-card__credentials {
  margin: 0;
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
  border-left: 1px solid var(--dh-line);
  align-items: flex-start;
}
.dh-buy-card__value .dh-buy-card__credential {
  align-items: flex-start;
}
.dh-buy-card__value .dh-buy-card__credential-check {
  margin-top: 0.35rem;
}

/* Trust cluster — checks + closing proof line, one group, no dividers */
.dh-buy-card__trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
}
.dh-buy-card__trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  font-family: var(--dh-sans);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--dh-charcoal);
}
.dh-buy-card__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.dh-buy-card__trust-check {
  display: inline-block;
  width: 0.7rem;
  height: 0.42rem;
  border-left: 1.5px solid var(--dh-terracotta);
  border-bottom: 1.5px solid var(--dh-terracotta);
  transform: rotate(-45deg) translateY(-0.15rem);
  flex-shrink: 0;
}
.dh-buy-card__trust-proof {
  margin: 0;
  font-family: var(--dh-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(31, 29, 26, 0.62);
  font-style: italic;
  letter-spacing: 0.005em;
}

@media (max-width: 380px) {
  .dh-buy-card__trust-list {
    gap: 0.45rem 1rem;
    font-size: 1.05rem;
  }
}

/* ============================================================
 * dh-compare — deinehaut vs Andere Marken.
 * True 3-column table at every viewport — label | ours | theirs.
 * Mobile: tight, centered cells. Desktop: airy. No icons.
 * ============================================================ */

.dh-compare-section {
  margin: 0 !important;
  padding: 0 !important;
  /* Background inherits from color_scheme — do not hardcode.
   * See agentic/principles/design.md "Verifying surface rhythm". */
}

.dh-compare {
  padding: 6rem 0 7rem;
  /* Background inherits from color_scheme — do not hardcode. */
}

.dh-compare__inner {
  max-width: 92rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}

.dh-compare__head {
  max-width: 72rem;
  margin: 0 auto 3.6rem;
  text-align: center;
}

.dh-compare__eyebrow {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 1.6rem;
  position: relative;
  padding-top: 1.4rem;
}

.dh-compare__eyebrow::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.2rem;
  /* Centre in desktop centered-head context; left-aligns naturally in mobile left context */
  margin-left: auto;
  margin-right: auto;
}

.dh-compare__title {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--dh-charcoal);
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

.dh-compare__intro {
  font-size: clamp(1.4rem, 1.3rem + 0.3vw, 1.7rem);
  line-height: 1.55;
  color: var(--dh-graphite);
  margin: 1.6rem auto 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Table card — 3-column grid at every viewport */
.dh-compare__scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dh-compare__table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(31, 29, 26, 0.05);
  background: color-mix(in oklab, var(--dh-terracotta) 62%, var(--dh-cream) 38%);
  border-radius: 6px;
  overflow: hidden;
  min-width: 44rem;
}

.dh-compare__head-row {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) 1fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid rgba(31, 29, 26, 0.06);
}

.dh-compare__head-spacer {
  /* empty left column */
}

.dh-compare__head-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--dh-mono);
  font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.25rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245, 240, 230, 0.78);
  padding: 1.6rem 0.6rem;
  text-wrap: balance;
}

.dh-compare__head-cell--solution {
  background: var(--dh-cream);
  color: var(--dh-charcoal);
  font-weight: 700;
  box-shadow: inset 0 2px 0 var(--dh-ochre);
}

.dh-compare__row {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid rgba(31, 29, 26, 0.06);
  gap: 0;
}

.dh-compare__label {
  display: flex;
  align-items: center;
  font-family: var(--dh-mono);
  font-size: clamp(1.1rem, 0.95rem + 0.3vw, 1.4rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(245, 240, 230, 0.85);
  padding: 1.8rem 0.6rem 1.8rem 1.2rem;
  text-wrap: balance;
}

.dh-compare__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.8rem 0.8rem;
}

/* Hide per-cell tags — column headers carry the labels */
.dh-compare__tag {
  display: none;
}

.dh-compare__text {
  font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.8rem);
  line-height: 1.3;
  margin: 0;
  color: var(--dh-charcoal);
  text-wrap: balance;
  letter-spacing: -0.005em;
}

.dh-compare__cell--solution {
  background: var(--dh-cream);
}

.dh-compare__cell--solution .dh-compare__text {
  color: var(--dh-charcoal);
  font-weight: 600;
}

.dh-compare__cell--problem .dh-compare__text {
  color: rgba(245, 240, 230, 0.78);
  font-weight: 400;
}

/* Footer */
.dh-compare__footer {
  margin-top: 3.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.dh-compare__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.55rem 3rem;
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid var(--dh-charcoal);
  border-radius: 999px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease,
              color 200ms ease;
  line-height: 1.2;
}

.dh-compare__cta:hover {
  background: var(--dh-ochre);
  border-color: var(--dh-ochre);
  color: var(--dh-cream);
  transform: translateY(-1px);
}

.dh-compare__footnote {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dh-graphite);
  margin: 0;
}

/* Tablet+ */
@media (min-width: 750px) {
  .dh-compare {
    padding: 8rem 0 9rem;
  }

  .dh-compare__inner {
    max-width: 110rem;
    padding: 0 2rem;
  }

  .dh-compare__head {
    margin-bottom: 5rem;
  }

  .dh-compare__head-row {
    grid-template-columns: 14rem 1fr 1fr;
  }

  .dh-compare__head-cell {
    padding: 2rem 0.8rem;
  }

  .dh-compare__row {
    grid-template-columns: 14rem 1fr 1fr;
  }

  .dh-compare__label {
    padding: 2.4rem 0.6rem 2.4rem 2rem;
  }

  .dh-compare__cell {
    padding: 2.4rem 1rem;
  }

  .dh-compare__footer {
    flex-direction: row;
    justify-content: center;
    gap: 2.4rem;
  }
}

@media (min-width: 990px) {
  .dh-compare__inner {
    max-width: 120rem;
  }

  .dh-compare__head-row {
    grid-template-columns: 18rem 1fr 1fr;
  }

  .dh-compare__row {
    grid-template-columns: 18rem 1fr 1fr;
  }

  .dh-compare__label {
    padding: 2.8rem 0.6rem 2.8rem 2rem;
  }

  .dh-compare__cell {
    padding: 2.8rem 1.2rem;
  }
}

/* ============================================================
 * Hero "So funktioniert's" — closes the curiosity loop opened
 * by the subhead. Sits directly under the image, before the
 * benefit bullets. Mobile-first, centered, hairline-flanked
 * eyebrow reads as an intentional editorial divider.
 * ============================================================ */

.dh-hero__how {
  margin: 2.8rem auto 0;
  max-width: 52ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
}

.dh-hero__how-label {
  font-family: var(--dh-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dh-charcoal);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.dh-hero__how-label::before,
.dh-hero__how-label::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--dh-ochre);
  opacity: 0.65;
}

.dh-hero__how-beats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 52ch;
  width: 100%;
}

.dh-hero__how-beat {
  font-family: var(--dh-sans);
  font-size: clamp(1.4rem, 1.3rem + 0.3vw, 1.65rem);
  line-height: 1.55;
  color: var(--dh-charcoal);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--beat-index, 0) * 220ms);
  will-change: opacity, transform;
}

.dh-hero__how.is-revealed .dh-hero__how-beat {
  opacity: 1;
  transform: translateY(0);
}

.dh-hero__how-beat--accent {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dh-hero__how-beat--accent::before {
  content: '✦';
  color: var(--dh-ochre);
  margin-right: 0.5rem;
  font-weight: 500;
  display: inline-block;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .dh-hero__how-beat {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
 * Hero setup line + value bullets
 * Sits between the credentials line and the buy card.
 * ============================================================ */

.dh-hero__setup {
  font-family: var(--dh-sans);
  font-size: clamp(1.4rem, 1.3rem + 0.3vw, 1.65rem);
  line-height: 1.5;
  color: var(--dh-charcoal);
  margin: 2.6rem 0 0 0;
  max-width: 54ch;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
}

.dh-hero__setup:first-of-type::before {
  content: '';
  display: block;
  width: 2.8rem;
  height: 2px;
  background: var(--dh-ochre);
  margin-bottom: 1.2rem;
  border-radius: 1px;
}

.dh-hero__setup + .dh-hero__setup {
  margin-top: 1.2rem;
}

.dh-hero__setup--bridge {
  color: var(--dh-charcoal);
  font-weight: 600;
}

.dh-benefits {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 60rem;
}

.dh-benefit {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  font-family: var(--dh-sans);
  font-size: clamp(1.45rem, 1.35rem + 0.3vw, 1.65rem);
  line-height: 1.45;
  color: var(--dh-charcoal);
}

/* ---- Sequential scroll-reveal for hero benefits ----
   Each item starts dim + slightly translated. When the list enters the
   viewport, items reveal one after another via per-index transition delay.
   The icon also brightens in step with the text. */
.dh-benefits[data-dh-reveal] .dh-benefit {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.dh-benefits[data-dh-reveal] .dh-benefit:nth-child(1) { transition-delay: 0ms; }
.dh-benefits[data-dh-reveal] .dh-benefit:nth-child(2) { transition-delay: 180ms; }
.dh-benefits[data-dh-reveal] .dh-benefit:nth-child(3) { transition-delay: 360ms; }
.dh-benefits[data-dh-reveal] .dh-benefit:nth-child(4) { transition-delay: 540ms; }
.dh-benefits[data-dh-reveal] .dh-benefit:nth-child(5) { transition-delay: 720ms; }

.dh-benefits[data-dh-reveal].is-revealed .dh-benefit {
  opacity: 1;
  transform: translateY(0);
}

/* Icon picks up its terracotta tint in sync with the text. */
.dh-benefits[data-dh-reveal] .dh-benefit .dh-benefit__icon-wrap {
  color: color-mix(in srgb, var(--dh-terracotta) 40%, transparent);
  transition: color 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dh-benefits[data-dh-reveal].is-revealed .dh-benefit .dh-benefit__icon-wrap {
  color: var(--dh-terracotta);
}

@media (prefers-reduced-motion: reduce) {
  .dh-benefits[data-dh-reveal] .dh-benefit,
  .dh-benefits[data-dh-reveal] .dh-benefit .dh-benefit__icon-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.dh-benefit__icon-wrap {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dh-terracotta);
  margin-top: 0.05em;
}

.dh-benefit__icon {
  width: 100%;
  height: 100%;
  display: block;
}

.dh-benefit__text {
  flex: 1 1 auto;
  min-width: 0;
}

.dh-benefit__label {
  font-weight: 600;
  color: var(--dh-charcoal);
  letter-spacing: -0.005em;
}

.dh-benefit__body {
  color: var(--dh-graphite);
  font-weight: 400;
}

.dh-benefit__sub {
  display: block;
  font-size: 0.82em;
  color: var(--dh-graphite);
  margin-top: 0.35rem;
  letter-spacing: 0.01em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

/* ============================================================
 * Product header — sits between the hero image and the bullets.
 * Stars + rating row on top, big "deinehaut Lernreise" title below.
 * Models the Grüns hero pattern.
 * ============================================================ */

.dh-product-header {
  margin: clamp(2.4rem, 2rem + 1vw, 3.6rem) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dh-product-header__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--dh-sans);
  font-size: 1.35rem;
  color: var(--dh-charcoal);
  margin: 0;
  font-feature-settings: "tnum", "ss01";
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.dh-product-header__stars {
  color: var(--dh-star);
  letter-spacing: 0.08em;
  font-size: 1.45rem;
  line-height: 1;
}

.dh-product-header__title {
  font-size: clamp(3rem, 2rem + 2.2vw, 4.4rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 600;
  color: var(--dh-charcoal);
  margin: 0;
}

.dh-product-header__sub {
  font-family: var(--dh-sans);
  font-size: clamp(1.35rem, 1.25rem + 0.3vw, 1.55rem);
  color: var(--dh-graphite);
  margin: 0;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

/* Rating + customer quote — one calm block, hairline separator below */
.dh-product-header__panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0 0 1.4rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dh-line);
  max-width: 56rem;
  margin: 0 0 1.4rem 0;
}

/* Description hugs the title, then a hairline closes the block off. */
.dh-product-header__sub {
  margin: 0.6rem 0 0 0;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--dh-line);
  max-width: 56rem;
}

.dh-product-header__panel .dh-product-header__rating {
  margin: 0;
}

.dh-product-header__quote {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--dh-sans);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--dh-charcoal);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dh-product-header__quote p {
  margin: 0;
  font-style: italic;
  max-width: 46ch;
  color: var(--dh-charcoal);
  font-weight: 400;
}

.dh-product-header__quote-author {
  font-style: normal;
  font-family: var(--dh-mono);
  font-size: 1rem;
  color: var(--dh-graphite);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.dh-product-header__quote-author::before {
  content: '';
  display: inline-block;
  width: 1.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ============================================================================
 * POLISH PASS — mobile-first design refinements
 * Applied to: hero, trust strip, scroll reader, outcome, why-we-exist,
 * comparison ("der unterschied"). No copy changes.
 * Strategy: a small set of design primitives (surfaces, eyebrows, accents),
 * applied consistently. Refinement, not decoration.
 * ========================================================================== */

/* --- Shared design tokens for the polish pass --- */
:root {
  --dh-surface-soft: linear-gradient(180deg, #FBF7EC 0%, #F1EAD9 100%);
  --dh-surface-elevated: linear-gradient(180deg, #FDF9EF 0%, #F4EEDE 100%);
  --dh-shadow-card-sm: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -16px rgba(31,29,26,0.22), 0 1px 2px -1px rgba(31,29,26,0.06);
  --dh-shadow-card-md: 0 1px 0 rgba(255,255,255,0.65) inset, 0 22px 48px -28px rgba(31,29,26,0.30), 0 2px 6px -2px rgba(31,29,26,0.06);
  --dh-shadow-card-lg: 0 1px 0 rgba(255,255,255,0.7) inset, 0 32px 64px -32px rgba(31,29,26,0.35), 0 3px 10px -3px rgba(31,29,26,0.08);
  --dh-ring-focus: 0 0 0 3px rgba(184, 137, 90, 0.35);
}

/* --- Mobile-first focus rings (consistent across CTAs) --- */
@media (max-width: 989px) {
  .dh-hero__cta:focus-visible,
  .dh-buy-card__cta:focus-visible,
  .dh-compare__cta:focus-visible {
    outline: none;
    box-shadow: var(--dh-ring-focus);
  }
}

/* ============================================================
 * HERO — mobile polish
 * ============================================================ */

@media (max-width: 989px) {
  /* Hero image frame — bump shadow on mobile so it feels more like a designed object */
  .dh-hero__media {
    box-shadow: var(--dh-shadow-card-md) !important;
    border-color: var(--dh-line-strong) !important;
  }

  /* Product header rating — small ochre tick after rating number */
  .dh-product-header__rating span:last-of-type {
    position: relative;
  }

  /* Product header title — the new invitation copy is longer than the
     old "deinehaut Lernreise" two-word title, so tune scale + wrapping
     for mobile so it leads cleanly into the bullets without dominating. */
  .dh-product-header__title {
    font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
    line-height: 1.08;
    text-wrap: balance;
    max-width: 18ch;
  }

  /* Buy card — its own checkout section: subtle lifted cream surface,
     soft hairline edge, ochre tick anchor. Reads as a destination, not a
     floating sales card. No internal dividers — type rhythm does the work. */
  .dh-buy-card {
    margin-top: 2.8rem !important;
    padding: clamp(2.4rem, 2rem + 1.4vw, 3rem) clamp(1.8rem, 1.4rem + 1vw, 2.4rem) clamp(2.2rem, 1.8rem + 1.2vw, 2.8rem) !important;
    background: #FBF6E9 !important;
    border: 1px solid var(--dh-line) !important;
    border-top: none !important;
    border-radius: 1.2rem !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
                0 18px 36px -28px rgba(31,29,26,0.18) !important;
    gap: 1.6rem !important;
    position: relative;
  }

  /* Ochre tick — small editorial gesture marking the card as a section,
     mirroring the page-wide eyebrow pattern (reader, compare, box…). */

  /* Includes block — no extra top padding, the card's own padding owns the rhythm */
  .dh-buy-card__includes {
    margin-top: 0;
  }

  /* Includes header — heading + plus-hint already inline, just tighten */
  .dh-buy-card__includes-header {
    align-items: center;
    margin-bottom: 1.2rem !important;
  }

  /* Pills — slightly tinted bg so they feel anchored to the elevated surface */
  .dh-buy-card__pills {
    margin-top: 0.6rem;
  }
  .dh-buy-card__pill {
    background: rgba(245, 240, 230, 0.7);
    border-color: var(--dh-line);
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
  }

}

/* Two-column price head (left/right) — works at every viewport. */
.dh-buy-card__price-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
}

.dh-buy-card__price-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.dh-buy-card__price-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
  text-align: right;
}

.dh-buy-card__price-label {
  font-family: var(--dh-mono);
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dh-graphite);
  font-weight: 500;
  line-height: 1;
}

/* Price anchor — small struck-through "Statt €152 einzeln" next to the label.
   Loss-aversion + price-anchoring stack: shows that €109 is a relief, not a cost. */
.dh-buy-card__price-anchor {
  font-family: var(--dh-sans);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--dh-graphite);
  letter-spacing: -0.005em;
  font-weight: 500;
}

.dh-buy-card__price-anchor s {
  text-decoration: line-through;
  text-decoration-color: rgba(31, 29, 26, 0.42);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0;
}

/* Savings note — quiet ochre mono caption under €109, no filled pill */
.dh-buy-card__price-savings {
  display: inline-flex;
  align-items: center;
  font-family: var(--dh-mono);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-ochre);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

@media (max-width: 989px) {
  .dh-buy-card__price-anchor {
    font-size: 1.1rem;
  }
  .dh-buy-card__price-savings {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
  }
}

/* Price meta — horizontal trust strip directly under the price.
   Single row when it fits, wraps gracefully when it doesn't.
   No circles around the ✓: keeps the strip compact and elegant. */
.dh-buy-card__price-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 1.2rem;
  width: 100%;
}

.dh-buy-card__price-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--dh-sans);
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--dh-charcoal);
  font-weight: 500;
  letter-spacing: -0.003em;
  white-space: nowrap;
}

.dh-buy-card__price-meta-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--dh-ochre);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.dh-buy-card__price-meta-label {
  letter-spacing: -0.003em;
}

@media (max-width: 989px) {
  .dh-buy-card__price-meta {
    gap: 0.2rem 1rem;
  }
  .dh-buy-card__price-meta-item {
    font-size: 1.05rem;
  }
}

/* Below 380px the three items can't all fit on one line —
   tighten further and let the row wrap to a max of 2 lines. */
@media (max-width: 380px) {
  .dh-buy-card__price-meta {
    gap: 0.15rem 0.7rem;
  }
  .dh-buy-card__price-meta-item {
    font-size: 1rem;
  }
}

/* Reopen the @media block for any subsequent mobile-only rules in this region */
@media (max-width: 989px) {

  /* CTA — add a thin right chevron, subtle inset highlight, deeper press */
  .dh-buy-card__cta {
    position: relative;
    padding-right: 4rem !important;
    box-shadow: 0 14px 28px -14px rgba(31, 29, 26, 0.45), 0 2px 4px -2px rgba(31, 29, 26, 0.18) !important;
    background: var(--dh-charcoal) !important;
    border-color: var(--dh-charcoal) !important;
  }
  .dh-buy-card__cta::after {
    content: '';
    position: absolute;
    right: 1.8rem;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dh-buy-card__cta:hover::after,
  .dh-buy-card__cta:active::after {
    transform: translateY(-50%) translateX(3px) rotate(45deg);
  }
  .dh-buy-card__cta:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px -10px rgba(31, 29, 26, 0.5), 0 1px 2px -1px rgba(31, 29, 26, 0.2) !important;
  }

  /* Footer — refined typographic rhythm, no internal divider */
  .dh-buy-card__footer {
    margin-top: 0.6rem;
    padding-top: 0;
    gap: 0.5rem;
  }
  .dh-buy-card__assurance--proof {
    font-weight: 500;
    color: var(--dh-charcoal);
  }

  /* Benefits — each row gets a subtle hairline below, generous vertical rhythm */
  .dh-benefits {
    gap: 0 !important;
    margin-top: 2.4rem !important;
  }
  .dh-benefit {
    padding: 1.6rem 0;
    border-bottom: 1px solid rgba(184, 85, 67, 0.16);
    align-items: center;
    gap: 1.6rem;
  }
  .dh-benefit:last-child {
    border-bottom: none;
  }
  .dh-benefit__icon-wrap {
    width: 3.8rem;
    height: 3.8rem;
    background: rgba(184, 85, 67, 0.08);
    border: 1px solid rgba(184, 85, 67, 0.22);
    border-radius: 999px;
    color: var(--dh-terracotta);
    padding: 0.85rem;
    box-sizing: border-box;
    margin-top: 0;
  }
  .dh-benefit__label {
    font-size: 1.55rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.005em;
  }
}

/* ============================================================
 * DAWN MULTICOLUMN (Trust strip + Why we exist) — mobile polish
 * Hairline dividers when stacked, mono-uppercase titles, ochre accent.
 * ============================================================ */

/* Positioning lede between section title and the grid */
.multicolumn__lede {
  max-width: 54rem;
  margin: 0 0 3.6rem;
}
.multicolumn__lede p {
  margin: 0;
  font-family: var(--dh-sans);
  font-size: clamp(1.5rem, 1.4rem + 0.3vw, 1.7rem);
  line-height: 1.55;
  color: var(--dh-graphite);
}

/* Mobile: align the lede under the heading text. The title carries
   title-wrapper--self-padded-mobile (+1.5rem), so without this the lede
   would sit 1.5rem further left and look like it hugs the panel edge. */
@media (max-width: 749px) {
  .multicolumn__lede {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 989px) {
  .multicolumn .page-width {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  /* Section title — give it a serial eyebrow rhythm */
  .multicolumn .title-wrapper-with-link {
    margin-bottom: 2.4rem;
    position: relative;
  }
  .multicolumn .title-wrapper-with-link::before {
    content: '';
    display: block;
    width: 2.4rem;
    height: 2px;
    background: var(--dh-ochre);
    border-radius: 1px;
    margin-bottom: 1.2rem;
  }
  .multicolumn .title {
    font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-weight: 600;
    color: var(--dh-charcoal);
    text-wrap: balance;
  }

  /* Multicolumn list — vertical stack with hairline dividers between items */
  .multicolumn-list {
    gap: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .multicolumn-list__item {
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--dh-line);
  }
  .multicolumn-list__item:last-child {
    border-bottom: none;
  }
  .multicolumn-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .multicolumn-card__info {
    padding: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  /* Per-item title — mono uppercase spec label */
  .multicolumn-card .inline-richtext,
  .multicolumn-card__info > h3 {
    font-family: var(--dh-sans) !important;
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: var(--dh-charcoal) !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 0.6rem 0 !important;
    text-transform: none !important;
    position: relative;
    padding-left: 2.4rem;
  }
  /* Ochre serial dot before each item title */
  .multicolumn-card .inline-richtext::before,
  .multicolumn-card__info > h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 1.4rem;
    height: 2px;
    background: var(--dh-ochre);
    border-radius: 1px;
  }
  .multicolumn-card__info .rte,
  .multicolumn-card__info > p {
    font-family: var(--dh-sans) !important;
    font-size: 1.35rem !important;
    line-height: 1.5 !important;
    color: var(--dh-graphite) !important;
    margin: 0 !important;
    padding-left: 2.4rem;
  }
  .multicolumn-card__info .rte p {
    margin: 0 !important;
  }
  /* Hide any default link arrows / Dawn underlines that aren't needed here */
  .multicolumn-card__info .link {
    display: none;
  }
}

/* ============================================================
 * SCROLL READER ("Das System") — mobile polish
 * Make the step counter feel editorial: large mono number + label.
 * ============================================================ */

@media (max-width: 749px) {
  .dh-reader {
    padding-top: clamp(4.4rem, 3.5rem + 3vw, 6rem);
  }
  .dh-reader__inner {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }
  .dh-reader__eyebrow {
    font-size: 1rem;
    margin-bottom: 1.6rem;
    letter-spacing: 0.24em;
    padding-top: 1.2rem;
  }
  .dh-reader__eyebrow::before {
    width: 2rem;
    height: 2px;
    margin-bottom: 1rem;
  }
  .dh-reader__title {
    font-size: clamp(2.8rem, 1.6rem + 5vw, 4.4rem);
    line-height: 1.06;
    margin-bottom: 3.2rem;
    max-width: 16ch;
    letter-spacing: -0.02em;
  }

  /* Each step: tighter vertical padding on mobile. */
  .dh-reader__steps {
    padding-left: 4.4rem;
  }
  .dh-reader__steps::before {
    left: 1.2rem;
  }
  .dh-reader__step {
    padding: 1.8rem 0;
  }
  .dh-reader__step::before {
    left: -4.4rem;
    top: 1.4rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.78rem;
  }
  .dh-reader__step.is-active::before {
    box-shadow: 0 0 0 5px rgba(184, 85, 67, 0.14);
  }
  .dh-reader__step-label {
    font-size: 1rem;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
  }
  .dh-reader__step-headline {
    font-size: 1.85rem;
    line-height: 1.18;
    margin-bottom: 0.9rem;
  }
  .dh-reader__step-body {
    font-size: 1.5rem;
    line-height: 1.55;
  }
  .dh-reader__step-body ul {
    margin-top: 1.4rem;
  }
  .dh-reader__step-body li {
    padding: 1rem 0;
  }

}

/* ============================================================
 * COMPARISON ("der unterschied") — mobile polish
 * Make the "our side" feel chosen: subtle ochre wash on the solution column.
 * ============================================================ */

@media (max-width: 989px) {
  .dh-compare {
    padding: 4.4rem 0 5.6rem;
  }
  .dh-compare__inner {
    padding: 0 1.6rem;
  }
  .dh-compare__head {
    margin-bottom: 2.6rem;
    text-align: left;
  }
  /* On mobile: eyebrow keeps the block-above treatment, left-aligned */
  .dh-compare__eyebrow {
    padding-top: 1.2rem;
    margin: 0 0 1.4rem;
  }
  .dh-compare__eyebrow::before {
    width: 2rem;
    height: 2px;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
  }
  .dh-compare__title {
    font-size: clamp(2.6rem, 1.8rem + 3vw, 3.8rem);
    line-height: 1.04;
    text-wrap: balance;
  }
  .dh-compare__intro {
    text-align: left;
    margin: 1.4rem 0 0 0;
  }

  /* ── Mobile: horizontal-scroll 3-column grid ──────────────────── */
  .dh-compare__table {
    border-radius: 8px;
    border-color: rgba(31, 29, 26, 0.12);
    overflow: hidden;
    background: var(--dh-cream);
  }

  .dh-compare__head-row {
    padding: 1rem 0;
  }

  /* Cream table bg on mobile flips header/label text to dark.
     Solution header already sets charcoal; the problem header inherits
     the light-on-dark base color and would vanish on cream. */
  .dh-compare__head-cell--problem {
    color: var(--dh-graphite);
  }

  .dh-compare__row {
    padding: 1.4rem 0;
  }

  .dh-compare__label {
    padding: 0 0.5rem 0 1rem;
    font-size: 1.05rem;
    color: var(--dh-charcoal);
  }

  .dh-compare__cell {
    padding: 0 0.6rem;
  }

  .dh-compare__text {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  .dh-compare__cell--solution .dh-compare__text {
    color: var(--dh-charcoal);
    font-weight: 600;
  }

  .dh-compare__cell--problem .dh-compare__text {
    color: rgba(31, 29, 26, 0.72);
    font-weight: 400;
  }

  /* Footer CTA — match buy card CTA depth */
  .dh-compare__footer {
    margin-top: 2.8rem;
  }
  .dh-compare__cta {
    padding: 1.5rem 2.6rem;
    box-shadow: 0 14px 28px -14px rgba(31, 29, 26, 0.4), 0 2px 4px -2px rgba(31, 29, 26, 0.14);
    position: relative;
    padding-right: 4rem;
  }
  .dh-compare__cta::after {
    content: '';
    position: absolute;
    right: 1.6rem;
    top: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dh-compare__cta:hover::after {
    transform: translateY(-50%) translateX(3px) rotate(45deg);
  }
}

/* ============================================================
 * COMPARISON — phones: prioritise legibility over fitting all
 * three columns on screen. Bigger descriptor labels and cell text;
 * the table keeps a comfortable min-width and scrolls sideways when
 * the viewport can't hold it. Readability beats no-scroll here.
 * ============================================================ */
@media (max-width: 749px) {
  .dh-compare__table {
    min-width: 36rem;
  }

  .dh-compare__head-row,
  .dh-compare__row {
    grid-template-columns: 9.5rem 1fr 1fr;
  }

  .dh-compare__head-cell {
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    padding: 1.3rem 0.4rem;
  }

  .dh-compare__label {
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    padding: 0 0.5rem 0 0.9rem;
  }

  .dh-compare__cell {
    padding: 0 0.7rem;
  }

  .dh-compare__text {
    font-size: 1.5rem;
    line-height: 1.3;
  }
}

/* ============================================================
 * SECTION SEAMS — soft hairlines between major sections on mobile
 * Gives the page rhythm without hard backgrounds everywhere.
 * ============================================================ */

@media (max-width: 989px) {
  .dh-hero,
  .dh-reader,
  .dh-compare {
    position: relative;
  }
}

/* Chapter bridge: a full-width hairline rule connecting system → compare.
   Both sections share bone (scheme-2) and are chapter 1 + chapter 2 of
   the same essay. The rule signals continuity, not a new chapter start. */
.dh-reader-section + .dh-compare-section .dh-compare {
  border-top: none;
}

[id$='__system'] + [id$='__compare'] {
  position: relative;
}

[id$='__system'] + [id$='__compare']::before {
  content: '';
  display: block;
  width: calc(100% - 4rem);
  max-width: 78rem;
  margin: 0 auto;
  height: 1px;
  background: rgba(31, 29, 26, 0.10);
}

/* ============================================================
 * SCROLL REVEAL — subtle fade-up for section headers on mobile
 * (respects prefers-reduced-motion)
 * ============================================================ */

@supports (animation-timeline: view()) {
  @media (max-width: 989px) and (prefers-reduced-motion: no-preference) {
    .dh-compare__head,
    .dh-reader__eyebrow,
    .dh-reader__title,
    .multicolumn .title-wrapper-with-link {
      animation: dhFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes dhFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
 * POLISH PASS 2 — agency-level micro-details
 * ========================================================================== */

/* Gallery: active thumbnail gets an ochre tint — more visible than the
   default charcoal border ring, and ties to the brand accent. */
.dh-hero__thumb.is-active {
  border-color: var(--dh-ochre);
  box-shadow: 0 0 0 1px var(--dh-ochre) inset;
}

/* CTA buttons: press-state polish (works across all primary CTAs) */
.dh-buy-card__cta,
.dh-compare__cta {
  -webkit-tap-highlight-color: transparent;
}

/* Rating row in product header: ochre tick instead of bullet */
@media (max-width: 989px) {
  .dh-product-header__rating::before {
    content: '';
    display: inline-block;
    width: 1.4rem;
    height: 2px;
    background: var(--dh-ochre);
    border-radius: 1px;
    margin-right: 0.7rem;
    vertical-align: middle;
    margin-top: -0.2rem;
  }
  .dh-product-header__stars {
    display: none; /* small phone: ochre tick + numeric rating is enough */
  }
}

/* FAQ section: tighten the row hierarchy on mobile (Dawn defaults are loose) */
@media (max-width: 989px) {
  .collapsible-content summary {
    padding: 1.4rem 0;
  }
}

/* ============================================================================
 * POLISH PASS 3 — post-compare sections (outcome, why, products, box, faq,
 * next_28_days, disclaimer). Goal: design parity with the first half.
 * Mobile-first, then minimal desktop tightening.
 * ========================================================================== */

/* --- Rich-text (used by outcome + disclaimer) ---
   Ochre tick before the heading. List items become a hairline-divided
   spec list with ochre tick prefix (matches the comparison row style). */
@media (max-width: 989px) {
  .rich-text__wrapper {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .rich-text__blocks {
    text-align: left !important;
    width: 100%;
    align-items: flex-start !important;
  }

  .rich-text__heading {
    position: relative;
    padding-top: 1.4rem;
    text-align: left !important;
    text-wrap: balance;
  }
  .rich-text__heading::before {
    content: '';
    display: block;
    width: 2.4rem;
    height: 2px;
    background: var(--dh-ochre);
    border-radius: 1px;
    margin-bottom: 1.2rem;
  }

  .rich-text__text {
    text-align: left !important;
    font-size: 1.55rem;
    line-height: 1.5;
  }

  .rich-text__text ul {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 1.8rem;
  }
  .rich-text__text ul li {
    position: relative;
    padding: 1.1rem 0 1.1rem 2.4rem;
    border-bottom: 1px solid var(--dh-line);
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--dh-charcoal);
  }
  .rich-text__text ul li:last-child {
    border-bottom: none;
  }
  .rich-text__text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.65rem;
    width: 1.4rem;
    height: 2px;
    background: var(--dh-ochre);
    border-radius: 1px;
  }

  /* Closing em-block ("28 Tage. 28 Datenpunkte. Eine Karte, die nur Du hast.") */
  .rich-text__text p em {
    display: block;
    font-style: normal;
    font-family: var(--dh-mono);
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dh-graphite);
    padding-top: 1.2rem;
    margin-top: 0.8rem;
    border-top: 1px solid var(--dh-line);
  }

}

/* Disclaimer em override — defuse the uppercase trap scoped to disclaimer.
   Extracted to top-level so it fires at all viewports (mobile + desktop). */
[id$='__disclaimer'] .rich-text__text p em,
[class*='disclaimer'] .rich-text__text p em {
  font-family: var(--font-body-family) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  font-style: italic;
  display: inline;
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

/* --- Product page (Discovery Box) — deinehaut buy box ---
   Strip Dawn card treatment, restyle title/price/CTA into a
   professional editorial buy box matching landing-page hero card. */

/* Scrub Dawn card chrome from the product page */
.product {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.product__media-wrapper {
  background: transparent !important;
}
.product__info-wrapper {
  background: transparent !important;
}

@media (max-width: 989px) {
  /* Title — ochre rule + bold hierarchy, no Dawn default type */
  .product__title {
    position: relative;
    padding-top: 1.4rem;
  }
  .product__title::before {
    content: '';
    display: block;
    width: 2.4rem;
    height: 2px;
    background: var(--dh-ochre);
    border-radius: 1px;
    margin-bottom: 1rem;
  }
  .product__title h1 {
    font-size: clamp(2.2rem, 1.8rem + 1vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--dh-charcoal);
    text-transform: none;
    margin: 0;
  }

  /* Caption / subtitle — deliberate intro text, not Dawn default */
  .product__info-container .product__text.subtitle {
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--dh-charcoal);
    margin: 0.8rem 0 1.8rem;
    max-width: 50ch;
    text-wrap: pretty;
    font-weight: 400;
  }

  /* Hide Dawn default price block — our custom_liquid replaces it */
  .product__info-container > [id^="price-"] {
    display: none;
  }

  /* Price meta — spacing between custom price block and trust row */
  .product__info-container .dh-buy-card__price-meta {
    margin-bottom: 1.4rem;
  }

  /* ATC button — restyle to match dh-buy-card__cta pill */
  .product-form__submit.button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(1.6rem, 1.4rem + 0.4vw, 2rem) 4rem clamp(1.6rem, 1.4rem + 0.4vw, 2rem) 2rem !important;
    background: var(--dh-charcoal) !important;
    color: var(--dh-cream) !important;
    font-size: clamp(1.5rem, 1.3rem + 0.4vw, 1.75rem) !important;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-align: center;
    border: 1px solid var(--dh-charcoal) !important;
    border-radius: 999px !important;
    line-height: 1.2;
    min-height: 52px;
    position: relative;
    box-shadow: 0 14px 28px -14px rgba(31, 29, 26, 0.45), 0 2px 4px -2px rgba(31, 29, 26, 0.18) !important;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 200ms ease,
                border-color 200ms ease,
                box-shadow 200ms ease;
  }

  .product-form__submit.button:hover {
    background: var(--dh-ochre) !important;
    border-color: var(--dh-ochre) !important;
    color: var(--dh-cream) !important;
    transform: translateY(-1px);
  }

  .product-form__submit.button:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px -10px rgba(31, 29, 26, 0.5), 0 1px 2px -1px rgba(31, 29, 26, 0.2) !important;
  }

  /* Replace button label text with the landing-page CTA label.
     Original span text stays in DOM for screen readers.
     Absolute positioning keeps the ::after from competing with
     the loading spinner in flex layout. */
  .product-form__submit.button > span {
    font-size: 0;
    opacity: 0;
    pointer-events: none;
  }
  .product-form__submit.button::after {
    content: "Meine 28-Tage-Lernreise sichern · €189";
    position: absolute;
    left: 2rem;
    right: 4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(1.3rem, 1.1rem + 0.4vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    color: inherit;
    text-align: center;
    white-space: normal;
  }

  /* Right chevron on the CTA — matches dh-buy-card__cta::after */
  .product-form__submit.button::before {
    content: '';
    position: absolute;
    right: 1.8rem;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .product-form__submit.button:hover::before {
    transform: translateY(-50%) translateX(3px) rotate(45deg);
  }

  /* Hide dynamic checkout (Shopify Pay etc.) — only ATC is shown */
  .product-form__buttons .shopify-payment-button {
    display: none !important;
  }

  /* Footer assurances — match dh-buy-card__footer rhythm */
  .product__info-container .dh-buy-card__footer {
    margin-top: 0.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--dh-line);
    gap: 0.5rem;
  }
  .product__info-container .dh-buy-card__assurance--proof {
    font-weight: 500;
    color: var(--dh-charcoal);
  }

  /* Description — clean separation below the buy card */
  .product__info-container .product__description {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--dh-line);
  }

  /* --- Sticky ATC bar — mobile only --- */
  .dh-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--dh-cream);
    border-top: 1px solid var(--dh-line);
    box-shadow: 0 -2px 8px rgba(31, 29, 26, 0.06);
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .dh-sticky-atc {
      transition: none;
    }
  }
  .dh-sticky-atc--visible {
    transform: translateY(0);
  }

  .dh-sticky-atc__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
    max-width: 56rem;
    margin: 0 auto;
  }

  .dh-sticky-atc__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
  }
  .dh-sticky-atc__name {
    font-family: var(--dh-sans);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dh-charcoal);
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dh-sticky-atc__price {
    font-family: var(--dh-mono);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--dh-graphite);
    letter-spacing: -0.03em;
    font-feature-settings: "tnum", "ss01";
  }

  .dh-sticky-atc__btn {
    flex-shrink: 0;
    padding: 0.9rem 1.6rem;
    background: var(--dh-charcoal);
    color: var(--dh-cream);
    font-family: var(--dh-sans);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-align: center;
    border: 1px solid var(--dh-charcoal);
    border-radius: 999px;
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    transition: background-color 200ms ease,
                border-color 200ms ease,
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 18px -10px rgba(31, 29, 26, 0.35),
                0 1px 2px -1px rgba(31, 29, 26, 0.12);
  }
  .dh-sticky-atc__btn:hover {
    background: var(--dh-ochre);
    border-color: var(--dh-ochre);
    transform: translateY(-1px);
  }
  .dh-sticky-atc__btn:active {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .dh-sticky-atc__btn {
      transition: none;
    }
  }

}

/* Desktop — give the info column some breathing room next to gallery */
@media (min-width: 750px) {
  .product__info-container {
    padding-left: clamp(2rem, 2rem + 2vw, 4rem);
  }
}

/* Hide sticky ATC on desktop */
@media (min-width: 990px) {
  .dh-sticky-atc {
    display: none;
  }
}

/* --- Home sticky bar — mobile only, appears when "why" section enters view --- */
.dh-home-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--dh-cream);
  border-top: 1px solid var(--dh-line);
  box-shadow: 0 -2px 8px rgba(31, 29, 26, 0.06);
  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .dh-home-sticky { transition: none; }
}
.dh-home-sticky[data-visible="true"] {
  transform: translateY(0);
}
.dh-home-sticky-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
.dh-home-sticky__inner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.1rem;
  padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
  max-width: 56rem;
  margin: 0 auto;
}
.dh-home-sticky__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.dh-home-sticky__name {
  font-family: var(--dh-sans);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--dh-charcoal);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-home-sticky__note {
  font-family: var(--dh-sans);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--dh-charcoal);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-wrap: balance;
}
.dh-home-sticky__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.3rem;
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  font-family: var(--dh-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--dh-charcoal);
  border-radius: 999px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 200ms ease,
              border-color 200ms ease,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 18px -10px rgba(31, 29, 26, 0.35),
              0 1px 2px -1px rgba(31, 29, 26, 0.12);
}
.dh-home-sticky__cta:hover {
  background: var(--dh-ochre);
  border-color: var(--dh-ochre);
  color: var(--dh-cream);
  transform: translateY(-1px);
}
.dh-home-sticky__cta:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dh-home-sticky__cta { transition: none; }
}
@media (min-width: 990px) {
  .dh-home-sticky { display: none; }
}

/* --- Gallery placeholder — soft hatched fallback when no product image ---
   The .product--no-media class is added by Dawn when media.size is 0.
   We show a sand panel with subtle diagonal hatch and a mono pill label. */
.product--no-media .product__media-wrapper {
  display: block !important;
  min-height: 320px;
  max-width: 100%;
  background-color: var(--dh-cream);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(31, 29, 26, 0.04) 4px,
    rgba(31, 29, 26, 0.04) 8px
  );
  border-radius: 0;
  position: relative;
}
.product--no-media .product__media-wrapper::after {
  content: "Produktbild · folgt";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--dh-mono);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-graphite);
  background: var(--dh-cream);
  padding: 0.4rem 1rem;
  border: 1px solid var(--dh-line-strong);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 989px) {
  .product--no-media .product__media-wrapper {
    min-height: 260px;
  }
  .product__media-wrapper {
    margin-bottom: 1.2rem;
  }
  /* Keep gallery compact so title → price → CTA all sit above the fold */
  .product__media-wrapper .product__media {
    padding-top: 0 !important;
  }
  .product__media-wrapper .product__media img,
  .product__media-wrapper .product__media.media > img {
    max-height: 50vh;
    width: 100%;
    object-fit: contain;
  }
  /* Stacked gallery — remove Dawn's default padding + gutters */
  .product--stacked .product__media-list {
    gap: 0.4rem;
  }
}

/* --- FAQ (collapsible-content) ---
   Refined accordion: each question reads as a deliberate row with
   mono numeric prefix, hairline dividers, ochre hover.
   No media-query wrapper — applies at all viewports. */
.collapsible-content {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.collapsible-content__heading {
  text-align: left !important;
  position: relative;
  padding-top: 1.4rem;
  margin-bottom: 2.4rem !important;
}
.collapsible-content__heading::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.2rem;
}

.collapsible-content .accordion {
  border-top: 1px solid rgba(31, 29, 26, 0.08) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.collapsible-content .accordion:last-child {
  border-bottom: 1px solid rgba(31, 29, 26, 0.08) !important;
}

.collapsible-content .accordion summary {
  padding: 1.6rem 0 !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Kill Dawn underline + active-band */
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: none !important;
  transition: color 200ms ease;
}
.collapsible-content .accordion[open] summary {
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: none !important;
}
.collapsible-content .accordion summary:hover {
  background: rgba(245, 240, 230, 0.5) !important;
  border-radius: 4px;
}
.collapsible-content .accordion summary:focus-visible {
  outline: 2px solid #B85543;
  outline-offset: 2px;
  border-radius: 2px;
}
.collapsible-content .accordion summary::-webkit-details-marker {
  display: none;
}

/* Hide Dawn's SVG caret */
.collapsible-content .accordion summary svg {
  display: none !important;
}

.collapsible-content .accordion__title {
  font-family: var(--dh-display-serif) !important;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: var(--dh-charcoal) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  text-transform: none !important;
  flex: 1 1 auto;
  min-width: 0;
}

.collapsible-content .accordion[open] summary .accordion__title {
  color: var(--dh-ochre) !important;
}

/* Replace Dawn's plus icon with our ochre-tinted pill (matches buy card chevron) */
.collapsible-content .accordion summary .icon-accordion,
.collapsible-content .accordion summary .icon-caret {
  display: none !important;
}
.collapsible-content .accordion summary::after {
  content: '';
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(184, 137, 90, 0.10);
  border: 1px solid rgba(184, 137, 90, 0.24);
  border-radius: 999px;
  position: relative;
  transition: background 200ms ease, border-color 200ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  background-image:
    linear-gradient(to right, var(--dh-ochre), var(--dh-ochre)),
    linear-gradient(to right, var(--dh-ochre), var(--dh-ochre));
  background-size: 1.15rem 1.8px, 1.8px 1.15rem;
  background-position: center;
  background-repeat: no-repeat;
}
.collapsible-content .accordion[open] summary::after {
  background-color: var(--dh-ochre);
  border-color: var(--dh-ochre);
  background-image:
    linear-gradient(to right, var(--dh-cream), var(--dh-cream));
  background-size: 1.15rem 1.8px;
  transform: rotate(180deg);
}
.collapsible-content .accordion[open] summary::after {
  background-color: var(--dh-ochre);
  border-color: var(--dh-ochre);
  background-image:
    linear-gradient(to right, var(--dh-cream), var(--dh-cream));
  background-size: 0.85rem 1.6px;
  /* The "+" becomes "−" via background-size; rotate pill for closed→open visual */
  transform: rotate(0deg);
}
/* Closed state gets rotate treatment — pill starts open-looking, closes to plus */
.collapsible-content .accordion:not([open]) summary::after {
  transform: rotate(0deg);
}

.collapsible-content .accordion__content {
  padding: 0 0 1.6rem 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.collapsible-content .accordion__content p {
  font-family: var(--dh-sans) !important;
  font-size: 1.4rem !important;
  line-height: 1.55 !important;
  color: var(--dh-graphite) !important;
  margin: 0 !important;
  max-width: 60ch;
}

/* --- Next 28 Days multicolumn — vertical timeline ---
   Scoped to the next_28_days section. Numbered counter dots + a soft
   vertical guide line on mobile; horizontal hairline on desktop.
   No media-query wrapper — base rules apply at all viewports.
   The desktop block below (@media min-width: 990px) overrides layout only. */

/* Counter reset on the list wrapper */
[id*='next_28'] .multicolumn-list {
  counter-reset: dh-step;
  position: relative;
}

/* Left-side vertical hairline — mobile only (hidden on desktop via the @media below) */
[id*='next_28'] .multicolumn-list::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 1px;
  background: rgba(31, 29, 26, 0.12);
  border-radius: 1px;
}

[id*='next_28'] .multicolumn-list__item {
  position: relative;
  counter-increment: dh-step;
  padding-left: 3.2rem;
}

/* Numbered dot replacing the old ochre blob */
[id*='next_28'] .multicolumn-list__item::before {
  content: counter(dh-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--dh-ochre);
  color: var(--dh-cream);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dh-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1;
  z-index: 1;
}

/* Step label ("Heute", "In 1 bis 3 Tagen" etc.) — mono accent */
[id*='next_28'] .multicolumn-card__info > p,
[id*='next_28'] .multicolumn-card .card__information p {
  font-family: var(--dh-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem) !important;
  color: rgba(31, 29, 26, 0.55) !important;
  margin-bottom: 0.4rem !important;
}

/* Step heading (the action / benefit) — display serif */
[id*='next_28'] .multicolumn-card__info > h3,
[id*='next_28'] .multicolumn-card__heading {
  font-family: var(--dh-display-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  color: var(--dh-charcoal) !important;
}

/* Legacy dot overrides — remove old ::before styles that conflict */
[id*='next_28'] .multicolumn-card__info > h3::before,
[id*='next_28'] .multicolumn-card .inline-richtext::before {
  display: none !important;
}

/* Connecting guide between items (fades toward next) */
[id*='next_28'] .multicolumn-list__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.05rem;
  top: 2.6rem;
  bottom: -0.4rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(184, 137, 90, 0.4) 0%, rgba(184, 137, 90, 0.08) 100%);
  border-radius: 1px;
  z-index: 0;
}

@media (min-width: 990px) {
  /* Desktop: horizontal hairline above the multicolumn grid */
  [id*='next_28'] .multicolumn-list {
    position: relative;
    padding-top: 2.4rem;
  }
  [id*='next_28'] .multicolumn-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(31, 29, 26, 0.10);
  }

  /* Numbered dot on desktop — above each column */
  [id*='next_28'] .multicolumn-list {
    counter-reset: dh-step;
  }
  [id*='next_28'] .multicolumn-list__item {
    counter-increment: dh-step;
    position: relative;
    padding-top: 2.8rem;
    padding-left: 0;
  }
  [id*='next_28'] .multicolumn-list__item::before {
    content: counter(dh-step, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    background: var(--dh-ochre);
    color: var(--dh-cream);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dh-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1;
  }

  [id*='next_28'] .multicolumn-card__info > h3::before,
  [id*='next_28'] .multicolumn-card .inline-richtext::before {
    display: none !important;
  }

  /* Remove mobile-only connecting guide on desktop */
  [id*='next_28'] .multicolumn-list__item:not(:last-child)::after {
    display: none;
  }
}

/* --- Section button (Next 28 Days bottom CTA) — match buy card CTA depth ---
   No media-query wrapper — applies at all viewports. Chevron removed: Dawn
   default ::after is clean and avoids the absolute-positioning misalignment
   seen on narrow screens. */
.multicolumn .button {
  padding: 1.5rem 2.4rem !important;
  border-radius: 999px !important;
  background: var(--dh-charcoal) !important;
  color: var(--dh-cream) !important;
  font-weight: 600 !important;
  font-size: 1.45rem !important;
  letter-spacing: -0.005em !important;
  box-shadow: 0 14px 28px -14px rgba(31, 29, 26, 0.4),
              0 2px 4px -2px rgba(31, 29, 26, 0.14) !important;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease !important;
}
.multicolumn .button:hover {
  background: var(--dh-ochre) !important;
  transform: translateY(-1px);
}

/* ============================================================
 * Outcome — [id$='__outcome'] scoped overrides
 * The strongest typographic moment after the hero:
 *   — Display serif heading at h0 scale, tight tracking
 *   — Numbered 01–04 ladder bullets (ochre mono badge, no disc)
 *   — Em tagline: separated by hairline, italic graphite, mono scale
 * Builds on top of the generic rich-text pass-3 rules above.
 * No new tokens, no new colors. Reuses dh-reader step counter pattern.
 * ============================================================ */

/* Heading — lift to editorial display scale via --dh-display-serif */
[id$="__outcome"] .rich-text__heading {
  font-family: var(--dh-display-serif) !important;
  font-size: clamp(3.2rem, 2rem + 4.8vw, 6rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  font-weight: 600 !important;
  color: var(--dh-charcoal) !important;
  text-wrap: balance;
  max-width: 20ch;
  margin-bottom: clamp(2.4rem, 1.8rem + 1.5vw, 3.6rem) !important;
}

/* Ensure the eyebrow micro-line applies — defined in polish pass 3 */
[id$="__outcome"] .rich-text__heading::before {
  display: block !important;
  content: '' !important;
  width: 2.4rem !important;
  height: 2px !important;
  background: var(--dh-ochre) !important;
  border-radius: 1px !important;
  margin-bottom: 1.6rem !important;
}

/* Bullet list — numbered ladder replacing disc */
[id$="__outcome"] .rich-text__text ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0 !important;
  counter-reset: dh-outcome;
}

[id$="__outcome"] .rich-text__text ul li {
  counter-increment: dh-outcome;
  position: relative !important;
  /* Pull counter badge into the left gutter: 3.6rem padding for badge + gap */
  padding: 1.4rem 0 1.4rem 4rem !important;
  border-bottom: 1px solid rgba(31, 29, 26, 0.08) !important;
  font-family: var(--dh-sans) !important;
  font-size: clamp(1.55rem, 1.4rem + 0.35vw, 1.8rem) !important;
  line-height: 1.5 !important;
  color: var(--dh-charcoal) !important;
  max-width: 52ch;
}

[id$="__outcome"] .rich-text__text ul li:last-child {
  border-bottom: none !important;
}

/* Ochre mono decimal-leading-zero badge — left gutter, matches dh-reader step pattern */
[id$="__outcome"] .rich-text__text ul li::before {
  content: counter(dh-outcome, decimal-leading-zero) !important;
  position: absolute !important;
  left: 0 !important;
  top: 1.55rem !important;
  width: 2.8rem !important;
  height: 2.8rem !important;
  background: var(--dh-ochre) !important;
  color: var(--dh-cream) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--dh-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Em tagline — hairline above, italic, safely muted at 0.72 alpha */
[id$="__outcome"] .rich-text__text p em {
  display: block !important;
  font-style: italic !important;
  font-family: var(--dh-display-serif) !important;
  font-size: clamp(1.5rem, 1.3rem + 0.4vw, 1.8rem) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: rgba(31, 29, 26, 0.72) !important;
  padding-top: 2rem !important;
  margin-top: 1.2rem !important;
  border-top: 1px solid rgba(31, 29, 26, 0.10) !important;
  max-width: 50ch;
  line-height: 1.45 !important;
}

/* Mobile (≤749px): tighten badge positioning for narrower viewport */
@media (max-width: 749px) {
  [id$="__outcome"] .rich-text__heading {
    font-size: clamp(3rem, 2rem + 5vw, 4.8rem) !important;
  }
  [id$="__outcome"] .rich-text__text ul li {
    padding-left: 3.6rem !important;
    font-size: 1.55rem !important;
  }
  [id$="__outcome"] .rich-text__text ul li::before {
    top: 1.45rem !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    font-size: 0.72rem !important;
  }
}

/* Desktop (≥990px): left-align the block, wider max-width for the list */
@media (min-width: 990px) {
  [id$="__outcome"] .rich-text__heading {
    font-size: clamp(4rem, 2rem + 4vw, 6.4rem) !important;
    max-width: 22ch;
  }
  [id$="__outcome"] .rich-text__text ul li {
    max-width: 56ch;
  }
}

/* Trust → Outcome continuity hairline.
   Both sit on scheme-1 (sand). The outcome section's top padding already
   provides rhythm; this narrow rule signals continuity, not chapter break.
   Mirrors the system→compare chapter-bridge pattern. */
[id$="__trust"] + [id$="__outcome"] .rich-text {
  border-top: 1px solid rgba(31, 29, 26, 0.08);
  padding-top: 0;
}

/* --- Disclaimer rich-text — subdued, fine-print but still elegant --- */
/* No media-query wrapper: top hairline + em override must fire at all widths */
[id$='__disclaimer'] .rich-text,
[class*='disclaimer'] .rich-text {
  border-top: 1px solid rgba(31, 29, 26, 0.08);
  padding-top: 2.4rem;
}

[id$='__disclaimer'] .rich-text__text,
[class*='disclaimer'] .rich-text__text,
[id$='__disclaimer'] .rich-text__text p,
[class*='disclaimer'] .rich-text__text p {
  max-width: 640px;
  margin-inline: auto;
  text-align: center !important;
  font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem) !important;
  color: rgba(31, 29, 26, 0.65) !important;
  line-height: 1.6 !important;
}

/* Suppress the ochre decoration bar on the disclaimer heading */
[id$='__disclaimer'] .rich-text__heading::before,
[class*='disclaimer'] .rich-text__heading::before {
  display: none !important;
}

/* These rules also apply responsively */
@media (max-width: 989px) {
  [class*='disclaimer'] .rich-text__text,
  .rich-text--full-width .rich-text__text {
    font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem) !important;
    line-height: 1.6;
    color: rgba(31, 29, 26, 0.65) !important;
    max-width: 640px;
    margin-inline: auto;
    text-align: center !important;
  }
  [class*='disclaimer'] .rich-text__heading::before,
  .rich-text--full-width .rich-text__heading::before {
    display: none;
  }
}

/* --- Pivot rich-text ("Darum bauen wir deinehaut anders.") ---
   Centered heading, no ochre tick. Sits as a chapter break between
   the why-grid and the products list, so it earns symmetry over
   the left-aligned editorial treatment used elsewhere. */
[id$='__pivot'] .rich-text__wrapper,
[id$='__pivot'] .rich-text__blocks {
  align-items: center !important;
  text-align: center !important;
}

[id$='__pivot'] .rich-text__heading {
  text-align: center !important;
  padding-top: 0 !important;
  margin-inline: auto;
}

[id$='__pivot'] .rich-text__heading::before,
[id$='__pivot'] .rich-text::before {
  display: none !important;
}

/* Suppress the ochre eyebrow dash above "Warum es uns gibt." and
   the mobile section-transition seam that sits between it and the
   preceding compare section. Why-section title now lands flush. */
[id$='__why'] .title-wrapper-with-link::before,
[id$='__why'] .multicolumn::before {
  display: none !important;
}

[id$='__why'] .title-wrapper-with-link {
  padding-top: 0 !important;
}

/* Trust strip uses the ochre-tick treatment from polish v1 — no further
   overrides needed. Keeps the page rhythm consistent. */

/* --- Section transition seams — ochre micro-line at start of each major
   post-compare section (mirrors what we already do for reader + compare) --- */
@media (max-width: 989px) {
  .shopify-section + .shopify-section .multicolumn::before,
  .shopify-section + .shopify-section .rich-text::before,
  .shopify-section + .shopify-section .collapsible-content::before {
    content: '';
    display: block;
    width: 4rem;
    height: 1px;
    background: var(--dh-ochre);
    opacity: 0.45;
    margin: 0 auto 2.4rem;
  }
}

/* ============================================================================
 * METHOD VISUALIZATION — top of the scroll-reader section
 * Shows "Vier Cremes + tägliches App-Tracking = Eine Methode"
 * with a cascading-dot ripple animation that mimics the App logging
 * a fresh data point every day across the 28-day arc.
 * ========================================================================== */

.dh-method-viz {
  margin: 0 auto clamp(3rem, 2.4rem + 1vw, 4rem);
  max-width: 56rem;
  padding: clamp(2rem, 1.6rem + 1vw, 2.8rem) clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  background: var(--dh-surface-soft);
  border: 1px solid var(--dh-line);
  border-radius: 1.4rem;
  box-shadow: var(--dh-shadow-card-sm);
  position: relative;
}

.dh-method-viz__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 0.8rem + 1vw, 2rem);
  flex-wrap: wrap;
}

/* --- Cremes column (left) --- */
.dh-method-viz__cremes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.dh-method-viz__creme {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 1rem 0.45rem 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(31, 29, 26, 0.05);
  border-radius: 0.5rem;
  font-family: var(--dh-sans);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--dh-charcoal);
  letter-spacing: -0.005em;
  min-width: 11rem;
}

.dh-method-viz__creme-bar {
  display: block;
  width: 3px;
  height: 1.6rem;
  border-radius: 0 2px 2px 0;
  flex-shrink: 0;
}

.dh-method-viz__creme--foundation .dh-method-viz__creme-bar { background: var(--dh-ochre); }
.dh-method-viz__creme--tone .dh-method-viz__creme-bar { background: var(--dh-sage); }
.dh-method-viz__creme--clear .dh-method-viz__creme-bar { background: var(--dh-terracotta); }
.dh-method-viz__creme--biome .dh-method-viz__creme-bar { background: var(--dh-moss); }

/* --- Plus separator (center) --- */
.dh-method-viz__plus {
  font-family: var(--dh-mono);
  font-size: 2.2rem;
  color: var(--dh-graphite);
  font-weight: 400;
  line-height: 1;
  align-self: center;
  opacity: 0.6;
}

/* --- Phone (right) --- */
.dh-method-viz__phone {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
  background: #FFFFFF;
  border: 1px solid var(--dh-line-strong);
  border-radius: 0.8rem;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 2px 6px -2px rgba(31, 29, 26, 0.08),
              0 1px 0 rgba(255, 255, 255, 0.8) inset;
  flex: 0 0 auto;
}

.dh-method-viz__phone-label {
  font-family: var(--dh-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dh-graphite);
  font-weight: 500;
  line-height: 1;
}

.dh-method-viz__phone-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}

.dh-method-viz__phone-dot {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(184, 137, 90, 0.16);
  animation: dh-method-dot 5.6s linear infinite;
  animation-delay: calc(var(--i) * 0.18s);
  will-change: background-color, transform;
}

@keyframes dh-method-dot {
  0%   { background: rgba(184, 137, 90, 0.16); transform: scale(1); }
  3%   { background: var(--dh-ochre);          transform: scale(1.6); }
  9%   { background: var(--dh-ochre);          transform: scale(1); }
  80%  { background: rgba(184, 137, 90, 0.55); transform: scale(1); }
  100% { background: rgba(184, 137, 90, 0.16); transform: scale(1); }
}

/* --- Caption --- */
.dh-method-viz__caption {
  text-align: center;
  margin: 1.4rem 0 0;
  font-family: var(--dh-sans);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--dh-charcoal);
  letter-spacing: -0.005em;
}

.dh-method-viz__caption em {
  display: block;
  font-style: normal;
  font-family: var(--dh-mono);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dh-ochre);
  font-weight: 600;
  margin-top: 0.6rem;
}

/* --- Mobile-narrow (≤480px): stack cremes + phone vertically --- */
@media (max-width: 480px) {
  .dh-method-viz__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .dh-method-viz__plus {
    align-self: center;
    font-size: 1.8rem;
  }
  .dh-method-viz__cremes,
  .dh-method-viz__phone {
    width: 100%;
  }
  .dh-method-viz__creme {
    min-width: 0;
  }
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .dh-method-viz__phone-dot {
    animation: none;
    background: rgba(184, 137, 90, 0.55);
  }
}

/* ============================================================
 * dh-marquee — credentials banner that runs across the page.
 * Two sentences alternating, separated by a star glyph.
 * Pure CSS loop; duplicated track so the wrap is seamless.
 * ============================================================ */
.dh-marquee {
  overflow: hidden;
  border-top: 1px solid var(--dh-line);
  border-bottom: 1px solid var(--dh-line);
  padding-block: clamp(0.95rem, 0.7rem + 0.6vw, 1.4rem);
  position: relative;
}

.dh-marquee::before,
.dh-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 6vw, 5rem);
  z-index: 1;
  pointer-events: none;
}
.dh-marquee::before {
  left: 0;
  background: linear-gradient(to right, rgb(var(--color-background)) 0%, rgba(var(--color-background), 0) 100%);
}
.dh-marquee::after {
  right: 0;
  background: linear-gradient(to left, rgb(var(--color-background)) 0%, rgba(var(--color-background), 0) 100%);
}

.dh-marquee__track {
  display: flex;
  width: max-content;
  animation: dh-marquee-scroll var(--dh-marquee-duration, 40s) linear infinite;
  will-change: transform;
}

.dh-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  padding-right: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
}

.dh-marquee__item {
  font-family: var(--dh-sans);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dh-charcoal, rgb(var(--color-foreground)));
  white-space: nowrap;
}

.dh-marquee__sep {
  display: inline-block;
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.15rem);
  color: var(--dh-ochre, rgb(var(--color-foreground)));
  line-height: 1;
  transform: translateY(-1px);
}

@keyframes dh-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dh-marquee__track {
    animation: none;
    transform: none;
  }
  .dh-marquee__group:nth-child(n + 2) {
    display: none;
  }
}

/* "Zwei Teile, ein Protokoll" — warm-bone chapter band wrapping the
 * product header and the includes-scroll. Breaks out of the hero's
 * 56rem content column to a full-bleed stripe via clip-path + box-shadow.
 * Safe because .dh-hero has overflow: hidden. */
.dh-hero__protocol-band {
  position: relative;
  background: #EAE1CE;
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax #EAE1CE;
  padding-block: clamp(3.6rem, 3rem + 1.6vw, 5.6rem);
  margin-block-start: clamp(3.2rem, 2.8rem + 1vw, 4.4rem);
}

.dh-hero__protocol-band > .dh-product-header {
  margin-top: 0;
}

.dh-hero__protocol-band > .dh-includes-scroll {
  margin-bottom: 0;
}

/* Interactive "Das ist enthalten" — typography-first, no cards, organic */
.dh-includes-scroll {
  margin: clamp(2.4rem, 2rem + 1vw, 3.2rem) 0 clamp(1.6rem, 1.2rem + 0.6vw, 2.4rem);
  padding: 0;
  border: none;
  background: transparent;
}

.dh-includes-scroll__heading {
  font-family: var(--dh-sans);
  font-size: clamp(1.7rem, 1.4rem + 0.7vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--dh-charcoal);
  margin: 0 0 clamp(1.4rem, 1.2rem + 0.4vw, 1.8rem);
}

.dh-includes-scroll__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dh-includes-scroll__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 1rem + 0.4vw, 1.6rem);
  padding: clamp(1.8rem, 1.4rem + 0.8vw, 2.4rem) 0;
  border-bottom: 1px solid var(--dh-line);
  opacity: 0.4;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dh-includes-scroll__step:last-child {
  border-bottom: none;
}

.dh-includes-scroll__step.is-active {
  opacity: 1;
}

.dh-includes-scroll__media {
  aspect-ratio: 16 / 10;
  border-radius: 0.6rem;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(184, 137, 90, 0.12),
      transparent 60%
    ),
    rgba(31, 29, 26, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.dh-includes-scroll__placeholder-label {
  font-family: var(--dh-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dh-graphite);
  font-weight: 500;
  line-height: 1;
}

.dh-includes-scroll__text {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.dh-includes-scroll__step-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--dh-mono);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dh-graphite);
  font-weight: 500;
  font-feature-settings: "tnum";
  line-height: 1;
}

.dh-includes-scroll__step-label::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--dh-charcoal);
  opacity: 0.25;
  transition:
    background-color 320ms ease,
    opacity 320ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dh-includes-scroll__step.is-active .dh-includes-scroll__step-label {
  color: var(--dh-ochre);
}

.dh-includes-scroll__step.is-active .dh-includes-scroll__step-label::before {
  background: var(--dh-ochre);
  opacity: 1;
  transform: scale(1.25);
}

.dh-includes-scroll__step-title {
  font-family: var(--dh-sans);
  font-size: clamp(1.55rem, 1.3rem + 0.5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dh-charcoal);
  margin: 0;
  line-height: 1.2;
}

.dh-includes-scroll__step-body {
  font-family: var(--dh-sans);
  font-size: clamp(1.3rem, 1.1rem + 0.35vw, 1.5rem);
  line-height: 1.55;
  color: var(--dh-charcoal);
  margin: 0;
  max-width: 52ch;
}

@media (min-width: 750px) {
  .dh-includes-scroll__step {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: center;
  }
  .dh-includes-scroll__media {
    aspect-ratio: 4 / 3;
  }
}

.dh-includes-scroll__media--has-image {
  aspect-ratio: auto;
  background: transparent;
}

.dh-includes-scroll__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .dh-includes-scroll__step,
  .dh-includes-scroll__step-label::before {
    transition: none;
    opacity: 1;
  }
  .dh-includes-scroll__step-label::before {
    transform: none;
  }
}

/* ============================================================
 * PRODUCT PAGE — Discovery Box below-fold sections
 * How-it-works + FAQ scoped via [id$="__how"] / [id$="__faq"].
 * Compare: existing global .dh-compare CSS covers both pages.
 * ============================================================ */

/* --- How-it-works timeline (multicolumn __how) ---
   Numbered four-step timeline: vertical on mobile, horizontal on desktop.
   Filled ochre circles connected by a guide line at every viewport. */

/* Base (mobile-first): vertical timeline */
[id$="__how"] .multicolumn-list__item {
  position: relative;
}

/* Vertical connecting line between items (mobile) */
[id$="__how"] .multicolumn-list__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0.65rem;
  top: 2.8rem;
  bottom: -0.4rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--dh-ochre) 0%,
    var(--dh-ochre) 30%,
    rgba(184, 137, 90, 0.2) 100%
  );
  border-radius: 1px;
}

/* Fill circle marker replacing the flat ochre-tick */
[id$="__how"] .multicolumn-card .inline-richtext::before,
[id$="__how"] .multicolumn-card__info > h3::before {
  width: 1.4rem !important;
  height: 1.4rem !important;
  border-radius: 999px !important;
  background: var(--dh-ochre) !important;
  top: 0.35em !important;
  left: 0 !important;
  margin-top: 0 !important;
}

/* Breathing room between circle and heading text */
[id$="__how"] .multicolumn-card .inline-richtext,
[id$="__how"] .multicolumn-card__info > h3 {
  padding-left: 2.4rem;
}

/* Desktop (≥990px): horizontal timeline — 4 columns across,
   circles sit above each heading, connected by a horizontal ochre line. */
@media (min-width: 990px) {
  /* Grid-wrapper gets a horizontal guide line at circle level */
  [id$="__how"] .multicolumn-list {
    position: relative;
  }
  [id$="__how"] .multicolumn-list::before {
    content: '';
    position: absolute;
    top: 0.8rem;   /* vertically centers on the 1.4rem circle */
    left: calc(50% / 4);   /* start at center of first column */
    right: calc(50% / 4);  /* end at center of last column */
    height: 2px;
    background: var(--dh-ochre);
    border-radius: 1px;
    opacity: 0.35;
    z-index: 0;
  }

  /* Remove vertical connecting lines on desktop */
  [id$="__how"] .multicolumn-list__item:not(:last-child)::after {
    display: none;
  }

  /* Circles sit above the heading, centered on the horizontal line */
  [id$="__how"] .multicolumn-list__item {
    padding-top: 2.6rem;  /* room for circle above heading */
  }
  [id$="__how"] .multicolumn-card .inline-richtext::before,
  [id$="__how"] .multicolumn-card__info > h3::before {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 1;
  }

  /* Undo left padding — heading is centered under circle */
  [id$="__how"] .multicolumn-card .inline-richtext,
  [id$="__how"] .multicolumn-card__info > h3 {
    padding-left: 0;
    text-align: center;
  }

  /* Center the body text under the heading */
  [id$="__how"] .multicolumn-card__info .rte,
  [id$="__how"] .multicolumn-card__info .rte p {
    text-align: center;
    padding-left: 0;
  }
}

/* ============================================================
 * Discovery Box FAQ — scoped [id$="__faq"]
 * Reinforces deinehaut accordion branding: hide Dawn SVG caret,
 * designed +/- ochre pill marker, styled question/answer type.
 * ============================================================ */

/* Hide Dawn SVG caret + icon wrappers */
[id$="__faq"] .accordion summary svg,
[id$="__faq"] .accordion summary .icon-accordion,
[id$="__faq"] .accordion summary .icon-caret {
  display: none !important;
}
[id$="__faq"] .accordion summary::-webkit-details-marker {
  display: none;
}

/* Accordion row — clean borders, no Dawn chrome */
[id$="__faq"] .accordion {
  border-top: 1px solid rgba(31, 29, 26, 0.08) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
[id$="__faq"] .accordion:last-child {
  border-bottom: 1px solid rgba(31, 29, 26, 0.08) !important;
}

/* Summary row — 44px minimum tap target, no Dawn underline */
[id$="__faq"] .accordion summary {
  padding: 1.6rem 0 !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: none !important;
  min-height: 4.4rem;
}
[id$="__faq"] .accordion[open] summary {
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: none !important;
}
[id$="__faq"] .accordion summary:hover {
  background: rgba(245, 240, 230, 0.5) !important;
  border-radius: 4px;
}

/* Question typography — display serif */
[id$="__faq"] .accordion__title {
  font-family: var(--dh-display-serif) !important;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: var(--dh-charcoal) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  text-transform: none !important;
  flex: 1 1 auto;
  min-width: 0;
}
[id$="__faq"] .accordion[open] summary .accordion__title {
  color: var(--dh-ochre) !important;
}

/* Designed +/- marker — ochre pill (matches buy-card chevron) */
[id$="__faq"] .accordion summary::after {
  content: '';
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(184, 137, 90, 0.10);
  border: 1px solid rgba(184, 137, 90, 0.24);
  border-radius: 999px;
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
  background-image:
    linear-gradient(to right, var(--dh-ochre), var(--dh-ochre)),
    linear-gradient(to right, var(--dh-ochre), var(--dh-ochre));
  background-size: 1.15rem 1.8px, 1.8px 1.15rem;
  background-position: center;
  background-repeat: no-repeat;
}
[id$="__faq"] .accordion[open] summary::after {
  background-color: var(--dh-ochre);
  border-color: var(--dh-ochre);
  background-image:
    linear-gradient(to right, var(--dh-cream), var(--dh-cream));
  background-size: 0.85rem 1.6px;
}

/* Answer content — inter body, graphite */
[id$="__faq"] .accordion__content {
  padding: 0 0 1.6rem 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
[id$="__faq"] .accordion__content p {
  font-family: var(--dh-sans) !important;
  font-size: 1.4rem !important;
  line-height: 1.55 !important;
  color: var(--dh-graphite) !important;
  margin: 0 !important;
  max-width: 60ch;
}

/* ============================================================
 * WHY WE EXIST — [id$='__why'] scoped overrides
 * Scheme-3 (ink #1F1D1A) dark beat. The page's single dark stripe.
 * PAS "Agitate" frame: four industry problems named and owned.
 *
 * Design intent:
 *   — Column titles in --dh-display-serif at mid-display scale
 *   — Inline "1." "2." "3." "4." numerals in copy ARE the typographic
 *     anchor — rendered in serif at large scale they read as editorial
 *   — Eyebrow micro-line pattern matching rest of page
 *   — WCAG AA: ink #1F1D1A on cream #F5F0E6 ≈ 14:1 (passes)
 *     body at rgba(31,29,26,0.86) ≈ ~12:1 (passes)
 * ============================================================ */

/* Scrub Dawn multicolumn card chrome on the cream surface */
[id$="__why"] .multicolumn-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Force left-alignment throughout — prevent Dawn's multicolumn
   text-align:right from orphaning the eyebrow micro-line at desktop.
   Dawn's .title-wrapper-with-link uses flex which pushes the heading
   to the right; force display:block so heading + eyebrow stack flush left. */
[id$="__why"] .multicolumn,
[id$="__why"] .title-wrapper,
[id$="__why"] .multicolumn h1,
[id$="__why"] .multicolumn h2,
[id$="__why"] .multicolumn h3 {
  text-align: left !important;
}

[id$="__why"] .title-wrapper-with-link {
  display: block !important;
  justify-content: flex-start !important;
}

/* Eyebrow micro-line above the section heading — ochre bar + mono label.
   The .title-wrapper-with-link holds the h2. We inject the bar via ::before
   on the wrapper, matching the pattern used in dh-reader and dh-compare. */
[id$="__why"] .title-wrapper-with-link {
  position: relative;
  padding-top: 1.6rem;
  margin-bottom: clamp(3.2rem, 2.4rem + 2vw, 5.6rem) !important;
}

[id$="__why"] .title-wrapper-with-link::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.4rem;
}

/* Section heading "Warum es uns gibt." — display serif, ink on cream */
[id$="__why"] .multicolumn .title {
  font-family: var(--dh-display-serif) !important;
  font-size: clamp(3rem, 1.8rem + 4.8vw, 6rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  color: #1F1D1A !important;
  text-wrap: balance;
  max-width: 16ch;
}

/* Column list — hairline dividers between columns on desktop */
[id$="__why"] .multicolumn-list {
  align-items: stretch !important;
}

[id$="__why"] .multicolumn-list__item {
  position: relative;
  /* Vertical hairline on the right — cream surface version */
  border-right: 1px solid rgba(31, 29, 26, 0.14);
}

[id$="__why"] .multicolumn-list__item:last-child {
  border-right: none;
}

[id$="__why"] .multicolumn-card__info {
  padding: 2.4rem 2rem 2.4rem 1.6rem !important;
  text-align: left !important;
  align-items: flex-start !important;
}

/* Column title — display serif, ink, mid-display scale.
   The inline "1." "2." "3." "4." numeral in the copy renders in serif
   at large scale and IS the typographic anchor — no CSS counter needed. */
[id$="__why"] .multicolumn-card__info h3,
[id$="__why"] .multicolumn-card .inline-richtext {
  font-family: var(--dh-display-serif) !important;
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: #1F1D1A !important;
  text-transform: none !important;
  margin-bottom: 1rem !important;
  padding-left: 0 !important;
}

/* Suppress the generic mobile ochre-tick ::before — the inline serif
   numeral in the copy is the visual anchor */
[id$="__why"] .multicolumn-card .inline-richtext::before,
[id$="__why"] .multicolumn-card__info h3::before {
  display: none !important;
}

/* Body — ink at 0.86 alpha (≈ 12:1 contrast on cream — well above AA) */
[id$="__why"] .multicolumn-card__info .rte p,
[id$="__why"] .multicolumn-card__info > p {
  font-family: var(--dh-sans) !important;
  font-size: clamp(1.4rem, 1.25rem + 0.3vw, 1.55rem) !important;
  line-height: 1.5 !important;
  color: rgba(31, 29, 26, 0.86) !important;
  margin: 0 !important;
  padding-left: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Mobile (≤749px): single column, horizontal hairlines, generous rhythm */
@media (max-width: 749px) {
  [id$="__why"] .title-wrapper-with-link {
    margin-bottom: clamp(2rem, 1.6rem + 1vw, 3.2rem) !important;
  }

  [id$="__why"] .multicolumn-list__item {
    border-right: none;
    border-bottom: 1px solid rgba(31, 29, 26, 0.12);
    padding: 0 !important;
  }

  [id$="__why"] .multicolumn-list__item:last-child {
    border-bottom: none;
  }

  [id$="__why"] .multicolumn-card__info {
    padding: 2.4rem 0 2.4rem 0 !important;
  }

  [id$="__why"] .multicolumn-card__info h3,
  [id$="__why"] .multicolumn-card .inline-richtext,
  [id$="__why"] .multicolumn-card__info > h3 {
    font-family: var(--dh-display-serif) !important;
    font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem) !important;
    font-weight: 600 !important;
    color: #1F1D1A !important;
    letter-spacing: -0.02em !important;
    padding-left: 0 !important;
    margin-bottom: 0.8rem !important;
  }

  [id$="__why"] .multicolumn-card__info .rte,
  [id$="__why"] .multicolumn-card__info > p {
    padding-left: 0 !important;
    font-size: 1.4rem !important;
    color: rgba(31, 29, 26, 0.86) !important;
  }
}

/* Desktop (≥990px): 4-column grid, airy column padding */
@media (min-width: 990px) {
  [id$="__why"] .multicolumn-card__info {
    padding: 3rem 2.4rem 3rem 2rem !important;
  }

  [id$="__why"] .multicolumn-card__info h3,
  [id$="__why"] .multicolumn-card .inline-richtext {
    font-size: clamp(1.8rem, 1.4rem + 0.8vw, 2.4rem) !important;
  }
}

/* ============================================================
 * DISCOVERY BOX — second buy moment [id$="__box"]
 *
 * The `box` is the SAME offer returning at the close — not a
 * repeat but a resolution. Same typographic system as the hero
 * buy card (eyebrow → display serif title → price → CTA →
 * trust), different composition: image more prominent, buy info
 * centred below on mobile, side-by-side editorial on desktop.
 *
 * Palette: sand (scheme-1) surface, ink text, ochre accent —
 * locked palette, no new hex.
 * ============================================================ */

/* --- Section-level chrome --- */

/* Ochre eyebrow micro-line above the product info column,
   matching the page-wide eyebrow pattern (reader, compare, etc.) */
[id$="__box"] .product__info-wrapper {
  position: relative;
}

[id$="__box"] .product__info-wrapper::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.6rem;
}

/* Scrub Dawn card chrome — the featured-product section renders
   with a gradient/border that clashes with the editorial close tone */
[id$="__box"] .featured-product {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

[id$="__box"] .product__media-wrapper,
[id$="__box"] .product__info-wrapper {
  background: transparent !important;
}

/* --- Product title — display serif at editorial scale --- */
[id$="__box"] .product__title {
  margin-bottom: 0.8rem;
}

[id$="__box"] .product__title,
[id$="__box"] .product__title h2,
[id$="__box"] h2.product__title {
  font-family: var(--dh-display-serif) !important;
  font-size: clamp(2.4rem, 2rem + 3.2vw, 5.2rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  color: var(--dh-charcoal) !important;
  text-wrap: balance;
  margin: 0 !important;
}

/* --- Subtitle / intro text --- */
[id$="__box"] .product__text.subtitle {
  font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.55rem) !important;
  color: rgba(31, 29, 26, 0.72) !important;
  line-height: 1.55 !important;
  max-width: 44ch;
  text-wrap: pretty;
  margin: 0.8rem 0 2rem !important;
}

/* --- Price block — keep Dawn's built-in compare-at/sale display,
   just scale it up and align to the editorial hierarchy --- */
[id$="__box"] .price--large .price-item--regular,
[id$="__box"] .price--large .price-item--sale {
  font-family: var(--dh-sans) !important;
  font-size: clamp(3.2rem, 2.4rem + 1.6vw, 4.4rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: var(--dh-charcoal) !important;
  font-feature-settings: "tnum", "ss01";
  line-height: 1 !important;
}

[id$="__box"] .price--large .price-item--regular:not(.price-item--sale) {
  color: rgba(31, 29, 26, 0.4) !important;
  text-decoration: line-through !important;
  font-size: clamp(1.6rem, 1.4rem + 0.4vw, 1.9rem) !important;
  font-weight: 500 !important;
}

/* Hide Dawn's generic "Sale" badge and the stray price__sale element —
   price narrative is owned by the custom_liquid price_anchor block below. */
[id$="__box"] .price__badge-sale,
[id$="__box"] .badge.price__badge-sale,
[id$="__box"] .price__sale {
  display: none !important;
}

/* Hide Dawn's "View full details" link that leaks under trust meta */
[id$="__box"] .product__view-details,
[id$="__box"] a[href$="/products/discovery-box"]:not(.product-form__submit) {
  display: none !important;
}

/* --- Custom price anchor block (custom_liquid: price_anchor) ---
   Replaces the Dawn price block. Shows anchor strikethrough + main price
   + a savings pill. No dependency on product compare_at_price data. */
[id$="__box"] .dh-box-price {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  margin: 1.6rem 0 0.4rem;
}

[id$="__box"] .dh-box-price__row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

[id$="__box"] .dh-box-price__anchor {
  font-family: var(--dh-mono);
  font-size: 1.4rem;
  color: rgba(31, 29, 26, 0.72);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

[id$="__box"] .dh-box-price__main {
  font-family: var(--dh-display-serif);
  font-size: clamp(3.2rem, 2.4rem + 2.4vw, 5rem);
  font-weight: 600;
  color: var(--dh-charcoal);
  letter-spacing: -0.02em;
  line-height: 1;
}

[id$="__box"] .dh-box-price__savings {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  background: var(--dh-terracotta);
  color: #FFFFFF;
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.2;
}

/* --- ATC button — scoped to __box, matches dh-buy-card__cta pill ---
   Uses same visual as the hero buy card. Label replaced via ::after
   so screen readers still see the product name. */
[id$="__box"] .product-form__submit.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: clamp(1.6rem, 1.4rem + 0.4vw, 2rem) 4rem clamp(1.6rem, 1.4rem + 0.4vw, 2rem) 2rem !important;
  background: var(--dh-charcoal) !important;
  color: var(--dh-cream) !important;
  font-size: clamp(1.5rem, 1.3rem + 0.4vw, 1.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border: 1px solid var(--dh-charcoal) !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
  min-height: 5.2rem;
  position: relative;
  box-shadow: 0 14px 28px -14px rgba(31, 29, 26, 0.45),
              0 2px 4px -2px rgba(31, 29, 26, 0.18) !important;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease;
}

[id$="__box"] .product-form__submit.button:hover,
[id$="__box"] .product-form__submit.button:focus-visible {
  background: var(--dh-ochre) !important;
  border-color: var(--dh-ochre) !important;
  color: var(--dh-cream) !important;
  transform: translateY(-1px);
}

[id$="__box"] .product-form__submit.button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -10px rgba(31, 29, 26, 0.5),
              0 1px 2px -1px rgba(31, 29, 26, 0.2) !important;
}

/* Hide original button label text — ::after carries the visible label */
[id$="__box"] .product-form__submit.button > span {
  font-size: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* CTA label — matches hero buy card byte-for-byte */
[id$="__box"] .product-form__submit.button::after {
  content: "Meine 28-Tage-Lernreise sichern \00b7  \20AC 189";
  position: absolute;
  left: 2rem;
  right: 4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.3rem, 1.1rem + 0.4vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: inherit;
  text-align: center;
  white-space: normal;
}

/* Right chevron — matches dh-buy-card__cta chevron */
[id$="__box"] .product-form__submit.button::before {
  content: '';
  position: absolute;
  right: 1.8rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

[id$="__box"] .product-form__submit.button:hover::before {
  transform: translateY(-50%) translateX(3px) rotate(45deg);
}

/* Focus ring — consistent with rest of dh CTAs */
[id$="__box"] .product-form__submit.button:focus-visible {
  outline: 2px solid var(--dh-ochre) !important;
  outline-offset: 3px !important;
}

/* Hide dynamic checkout (Shopify Pay, etc.) in the close moment */
[id$="__box"] .product-form__buttons .shopify-payment-button {
  display: none !important;
}

/* --- Trust checklist — rendered as a `text` block below buy_buttons ---
   The text block carries "Inkl. MwSt · Gratis Versand · 30 Tage Rückgabe".
   Style it as a muted mono micro-line clustered immediately below the CTA. */
[id$="__box"] .product__info-container .product__text:last-of-type {
  font-family: var(--dh-mono) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(31, 29, 26, 0.72) !important;
  text-align: center;
  margin: 0.8rem 0 0 !important;
  line-height: 1.5;
}

/* --- Chapter bridge: __box → __faq hairline ---
   Signals continuity into the FAQ close beat without a hard
   background shift. Mirrors system→compare chapter-bridge pattern. */
[id$="__box"] + [id$="__faq"] {
  position: relative;
}

[id$="__box"] + [id$="__faq"]::before {
  content: '';
  display: block;
  width: calc(100% - 4rem);
  max-width: 78rem;
  margin: 0 auto;
  height: 1px;
  background: rgba(31, 29, 26, 0.08);
}

/* --- Media — make the product image feel editorial (larger, contained) --- */
[id$="__box"] .product-media-container {
  border-radius: 0.8rem;
  overflow: hidden;
  background: rgba(234, 226, 211, 0.35);
}

/* --- Mobile (≤749px): tighten padding, centre the info column --- */
@media (max-width: 749px) {
  [id$="__box"] .product__info-wrapper::before {
    margin-left: auto;
    margin-right: auto;
  }

  [id$="__box"] .product__title h2 {
    text-align: center !important;
  }

  [id$="__box"] .product__text.subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  [id$="__box"] .dh-box-price {
    align-items: center;
  }

  [id$="__box"] .product__info-container .product__text:last-of-type {
    text-align: center !important;
  }
}

/* --- Desktop (≥990px): left-align the info column, larger serif scale --- */
@media (min-width: 990px) {
  [id$="__box"] .product__title h2 {
    font-size: clamp(3.6rem, 2rem + 3.2vw, 5.2rem) !important;
  }

  [id$="__box"] .product__text.subtitle {
    font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.7rem) !important;
  }
}

/* =========================================================================
   Reviews — embedded-widget look (summary score + distribution + cards)
   Mobile-first. Cards are near-white panels on the section background.
   ========================================================================= */
.dh-reviews {
  padding: 6rem 0 7rem;
  scroll-margin-top: 2rem;
}

.dh-reviews__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}

.dh-reviews__eyebrow {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 1.4rem;
  padding-top: 1.4rem;
  position: relative;
}

.dh-reviews__eyebrow::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.2rem;
}

.dh-reviews__title {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4.2rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--dh-charcoal);
  margin: 0 0 3rem;
  font-weight: 600;
  text-wrap: balance;
}

/* The widget panel chrome */
.dh-reviews__widget {
  --rv-card: color-mix(in oklab, #ffffff 74%, var(--dh-cream) 26%);
}

/* --- Summary --- */
.dh-reviews__summary {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.4rem;
  background: var(--rv-card);
  border: 1px solid var(--dh-line);
  border-radius: 8px;
}

.dh-reviews__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.dh-reviews__score-num {
  font-family: var(--dh-display-serif);
  font-size: 4.4rem;
  line-height: 1;
  font-weight: 600;
  color: var(--dh-charcoal);
}

.dh-reviews__score-count {
  font-family: var(--dh-mono);
  font-size: 1.2rem;
  color: var(--dh-graphite);
  letter-spacing: 0.02em;
}

/* Stars */
.dh-reviews__stars {
  display: inline-flex;
  gap: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

.dh-reviews__star {
  color: var(--dh-line-strong);
  font-size: 1.5rem;
}

.dh-reviews__star.is-on {
  color: var(--dh-star);
}

.dh-reviews__star.is-half {
  background: linear-gradient(90deg, var(--dh-star) 50%, var(--dh-line-strong) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dh-reviews__stars--lg .dh-reviews__star {
  font-size: 2rem;
}

/* Distribution bars */
.dh-reviews__dist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
}

.dh-reviews__dist-row {
  display: block;
}

.dh-reviews__dist-btn {
  display: grid;
  grid-template-columns: 3.2rem 1fr 3rem;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.3rem 0.4rem;
  margin: 0 -0.4rem;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms ease;
}

.dh-reviews__dist-btn:hover,
.dh-reviews__dist-btn:focus-visible {
  background: color-mix(in oklab, var(--dh-charcoal) 5%, transparent);
  outline: none;
}

.dh-reviews__dist-btn[aria-pressed="true"] {
  background: color-mix(in oklab, var(--dh-star) 16%, transparent);
}

.dh-reviews__dist-btn[aria-pressed="true"] .dh-reviews__dist-label,
.dh-reviews__dist-btn[aria-pressed="true"] .dh-reviews__dist-count {
  color: var(--dh-charcoal);
  font-weight: 600;
}

.dh-reviews__dist-label {
  font-family: var(--dh-mono);
  font-size: 1.15rem;
  color: var(--dh-graphite);
  white-space: nowrap;
}

.dh-reviews__dist-track {
  position: relative;
  height: 7px;
  background: var(--dh-line);
  border-radius: 4px;
  overflow: hidden;
}

.dh-reviews__dist-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: var(--dh-star);
  border-radius: 4px;
}

.dh-reviews__dist-count {
  font-family: var(--dh-mono);
  font-size: 1.15rem;
  color: var(--dh-graphite);
  text-align: right;
}

/* --- Count bar --- */
.dh-reviews__bar {
  display: flex;
  align-items: center;
  padding: 1.6rem 0.2rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--dh-line);
  border-bottom: 1px solid var(--dh-line);
}

.dh-reviews__bar-count {
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--dh-charcoal);
}

.dh-reviews__filter-note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0 0;
  font-family: var(--dh-mono);
  font-size: 1.2rem;
  color: var(--dh-graphite);
}

.dh-reviews__filter-note[hidden],
.dh-reviews__more[hidden] {
  display: none;
}

.dh-reviews__filter-note strong {
  color: var(--dh-charcoal);
}

.dh-reviews__filter-clear {
  font-family: var(--dh-mono);
  font-size: 1.15rem;
  color: var(--dh-charcoal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dh-line-strong);
  padding: 0 0 0.1rem;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.dh-reviews__filter-clear:hover,
.dh-reviews__filter-clear:focus-visible {
  border-color: var(--dh-charcoal);
  outline: none;
}

/* --- Review cards --- */
.dh-reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dh-reviews__card {
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--dh-line);
}

.dh-reviews__card-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1rem;
}

.dh-reviews__avatar {
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--dh-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--dh-cream);
}

.dh-reviews__avatar--c0 { background: var(--dh-ochre); }
.dh-reviews__avatar--c1 { background: var(--dh-sage); }
.dh-reviews__avatar--c2 { background: var(--dh-terracotta); }
.dh-reviews__avatar--c3 { background: var(--dh-slate); }
.dh-reviews__avatar--c4 { background: var(--dh-moss); }

.dh-reviews__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.dh-reviews__name {
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--dh-charcoal);
}

.dh-reviews__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--dh-moss);
}

.dh-reviews__verified-tick {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--dh-moss);
  color: var(--dh-cream);
  font-size: 0.9rem;
  line-height: 1;
}

.dh-reviews__rating-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.dh-reviews__date {
  margin-left: auto;
  font-family: var(--dh-mono);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--dh-graphite);
  white-space: nowrap;
}

.dh-reviews__card-title {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--dh-charcoal);
  margin: 0 0 0.5rem;
}

.dh-reviews__body {
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--dh-charcoal);
  margin: 0;
  text-wrap: pretty;
}

/* Merchant reply */
.dh-reviews__reply {
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  background: color-mix(in oklab, var(--dh-charcoal) 5%, var(--rv-card));
  border-left: 2px solid var(--dh-line-strong);
  border-radius: 0 6px 6px 0;
}

.dh-reviews__reply-label {
  display: block;
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--dh-graphite);
  margin-bottom: 0.4rem;
}

.dh-reviews__reply-body {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--dh-graphite);
  margin: 0;
}

/* --- Desktop (≥750px): summary becomes two columns --- */
@media (min-width: 750px) {
  .dh-reviews__summary {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    padding: 3rem 3.4rem;
  }

  .dh-reviews__score {
    flex: none;
    align-items: center;
    text-align: center;
    padding-right: 4rem;
    border-right: 1px solid var(--dh-line);
  }

  .dh-reviews__score-num {
    font-size: 5.6rem;
  }
}

/* --- Write a review --- */
.dh-reviews__write {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--dh-line);
}

.dh-reviews__write-toggle {
  font-family: var(--dh-mono);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--dh-charcoal);
  background: transparent;
  border: 1px solid var(--dh-line-strong);
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.dh-reviews__write-toggle:hover,
.dh-reviews__write-toggle:focus-visible {
  background: var(--rv-card);
  border-color: var(--dh-charcoal);
}

.dh-reviews__form {
  margin-top: 1.6rem;
  padding: 2rem;
  background: var(--rv-card);
  border: 1px solid var(--dh-line);
  border-radius: 8px;
}

.dh-reviews__field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.dh-reviews__label {
  font-family: var(--dh-mono);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dh-graphite);
}

.dh-reviews__optional {
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.dh-reviews__hint {
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--dh-graphite);
  margin-top: 0.2rem;
}

.dh-reviews__status {
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--dh-charcoal);
  background: var(--dh-cream);
  border: 1px solid var(--dh-line-strong);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 0;
}

.dh-reviews__status--error {
  color: var(--dh-terracotta);
  background: color-mix(in oklab, var(--dh-terracotta) 8%, var(--dh-cream));
  border-color: color-mix(in oklab, var(--dh-terracotta) 35%, var(--dh-line-strong));
}

.dh-reviews__input,
.dh-reviews__textarea {
  font-family: inherit;
  font-size: 1.5rem;
  color: var(--dh-charcoal);
  background: #ffffff;
  border: 1px solid var(--dh-line-strong);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  width: 100%;
  transition: border-color 150ms ease;
}

.dh-reviews__textarea {
  resize: vertical;
  min-height: 7rem;
}

.dh-reviews__input:focus,
.dh-reviews__textarea:focus {
  outline: none;
  border-color: var(--dh-ochre);
}

.dh-reviews__rate {
  display: flex;
  gap: 0.4rem;
}

.dh-reviews__rate-star {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--dh-line-strong);
  background: transparent;
  border: 0;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}

.dh-reviews__rate-star.is-on {
  color: var(--dh-star);
}

.dh-reviews__rate-star:hover {
  transform: scale(1.1);
}

.dh-reviews__submit {
  font-family: var(--dh-mono);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--dh-cream);
  background: var(--dh-charcoal);
  border: 0;
  border-radius: 999px;
  padding: 1.1rem 2.2rem;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.dh-reviews__submit:hover,
.dh-reviews__submit:focus-visible {
  opacity: 0.86;
}

/* --- Load more / paging --- */
.dh-reviews__card--hidden {
  display: none !important;
}

.dh-reviews__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: 2.4rem;
  font-family: var(--dh-mono);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--dh-charcoal);
  background: transparent;
  border: 1px solid var(--dh-line-strong);
  border-radius: 999px;
  padding: 1.3rem 2rem;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.dh-reviews__more:hover,
.dh-reviews__more:focus-visible {
  background: var(--rv-card);
  border-color: var(--dh-charcoal);
}

.dh-reviews__more-chevron {
  font-size: 1.4rem;
  line-height: 1;
  transform: translateY(0.1rem);
}

/* ============================================
   Founder story (home) — dh-founder
   Editorial origin note, aligned to the page grid.
   Mobile: stacked. Desktop: portrait left (sticky), story right.
   Note: theme root is 62.5% (1rem = 10px).
   ============================================ */
.dh-founder {
  padding: 5.5rem 0 6rem;
}

.dh-founder__inner {
  max-width: var(--page-width, 130rem);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.dh-founder__eyebrow {
  font-family: var(--dh-mono);
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 1.6rem;
}

.dh-founder__eyebrow::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.4rem;
}

.dh-founder__headline {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--dh-charcoal);
  margin: 0 0 3rem;
  font-weight: 600;
  max-width: 24ch;
  text-wrap: balance;
}

.dh-founder__body {
  display: grid;
  gap: 2.8rem;
}

/* Portrait */
.dh-founder__portrait {
  margin: 0;
}

.dh-founder__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--dh-line-strong);
  box-shadow: 0 18px 44px -26px rgba(31, 29, 26, 0.5);
}

/* Story */
.dh-founder__para {
  font-size: 1.8rem;
  line-height: 1.65;
  color: var(--dh-charcoal);
  margin: 0 0 1.6rem;
  max-width: 60ch;
}

.dh-founder__quote {
  font-family: var(--dh-display-serif);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--dh-charcoal);
  font-weight: 600;
  margin: 2.4rem 0;
  padding: 0.2rem 0 0.2rem 1.8rem;
  border-left: 3px solid var(--dh-ochre);
  text-wrap: balance;
}

/* Signature */
.dh-founder__sign {
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--dh-line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dh-founder__sign-name {
  font-family: var(--dh-signature);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--dh-charcoal);
  letter-spacing: 0;
}

.dh-founder__sign-role {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-graphite);
}

/* Paragraph-by-paragraph scroll reveal. Each block fades + lifts as it
   enters the viewport (one-shot, JS-driven — see index.html), so the story
   unfolds line by line while the reader scrolls. */
[data-dh-founder-story] .dh-founder__para,
[data-dh-founder-story] .dh-founder__sign {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-dh-founder-story] .dh-founder__para.is-revealed,
[data-dh-founder-story] .dh-founder__sign.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-dh-founder-story] .dh-founder__para,
  [data-dh-founder-story] .dh-founder__sign {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 990px) {
  .dh-founder {
    padding: 8rem 0 8.5rem;
  }

  .dh-founder__inner {
    padding: 0 5rem;
  }

  .dh-founder__headline {
    margin-bottom: 4rem;
    max-width: 28ch;
  }

  .dh-founder__body {
    grid-template-columns: minmax(0, 36rem) minmax(0, 54rem);
    gap: 4.5rem;
    align-items: start;
  }

  .dh-founder__portrait {
    position: sticky;
    top: 3rem;
  }
}

/* =========================================================================
   FAQ — branded accordion (eyebrow + serif title + details/summary)
   Mobile-first. Replaces stock collapsible-content on the homepage.
   ========================================================================= */
.dh-faq {
  padding: 6rem 0 7rem;
}

.dh-faq__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}

.dh-faq__eyebrow {
  font-family: var(--dh-mono);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 1.4rem;
  padding-top: 1.4rem;
  position: relative;
}

.dh-faq__eyebrow::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.2rem;
}

.dh-faq__title {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4.2rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--dh-charcoal);
  margin: 0 0 2.4rem;
  font-weight: 600;
  text-wrap: balance;
  max-width: 20ch;
}

.dh-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dh-faq__item {
  border-top: 1px solid var(--dh-line);
}

.dh-faq__item:last-child {
  border-bottom: 1px solid var(--dh-line);
}

.dh-faq__details {
  padding: 0;
}

.dh-faq__summary {
  display: grid;
  grid-template-columns: 1fr 4rem;
  column-gap: 1.6rem;
  align-items: center;
  min-height: 6.6rem;
  padding: 1.6rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--dh-display-serif);
  font-size: 1.9rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--dh-charcoal);
  transition: color 160ms ease;
}

.dh-faq__summary::-webkit-details-marker {
  display: none;
}

.dh-faq__summary:hover {
  color: var(--dh-terracotta);
}

.dh-faq__summary::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--dh-terracotta);
  border-radius: 999px;
  color: var(--dh-terracotta);
  font-family: var(--dh-mono);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}

.dh-faq__details[open] .dh-faq__summary::after {
  content: '−';
  background: var(--dh-terracotta);
  color: var(--dh-cream);
}

.dh-faq__summary:focus-visible {
  outline: 2px solid var(--dh-terracotta);
  outline-offset: 4px;
}

.dh-faq__answer {
  padding: 0 0 2.4rem;
  max-width: 62ch;
}

.dh-faq__answer > :first-child {
  margin-top: 0;
}

.dh-faq__answer > :last-child {
  margin-bottom: 0;
}

.dh-faq__answer p,
.dh-faq__answer li {
  font-size: 1.6rem;
  line-height: 1.62;
  color: var(--dh-graphite);
}

.dh-faq__answer p {
  margin: 0 0 1rem;
}

.dh-faq__answer a {
  color: var(--dh-terracotta);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dh-faq__summary,
  .dh-faq__summary::after {
    transition: none;
  }
}

@media (min-width: 750px) {
  .dh-faq {
    padding: 8rem 0 9rem;
  }

  .dh-faq__title {
    margin-bottom: 3.2rem;
  }

  .dh-faq__summary {
    font-size: 2.2rem;
    min-height: 7.2rem;
    padding: 2rem 0;
  }

  .dh-faq__answer p,
  .dh-faq__answer li {
    font-size: 1.7rem;
  }
}



/* ============================================================
   Legal / trust pages — Impressum, Datenschutz, AGB, Widerruf,
   Versand & Zahlung. Shell lives in sections/dh-legal.liquid.
   ============================================================ */

.dh-legal {
  background: var(--dh-cream);
  color: var(--dh-charcoal);
}

.dh-legal__wrap {
  max-width: 1100px;
}

.dh-legal__head {
  max-width: 60ch;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--dh-line);
}

.dh-legal__eyebrow {
  font-family: var(--dh-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--dh-ochre);
  margin: 0 0 1rem;
}

.dh-legal__title {
  font-family: var(--dh-display-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
  margin: 0;
}

.dh-legal__meta {
  font-family: var(--dh-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--dh-graphite);
  margin: 1rem 0 0;
}

/* Layout — single column on mobile, body + sticky card on desktop */
.dh-legal__layout {
  display: grid;
  gap: 2.5rem;
}

@media screen and (min-width: 990px) {
  .dh-legal__layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: 4rem;
  }
}

/* Long-form body typography (overrides the dense .rte product styling) */
.dh-legal__body {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--dh-charcoal);
}

.dh-legal__body > *:first-child {
  margin-top: 0;
}

.dh-legal__body h2 {
  font-family: var(--dh-display-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.45rem;
  line-height: 1.18;
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--dh-line);
}

.dh-legal__body h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 1rem;
}

/* Reset the dense uppercase h3 from product .rte for readable subheads here */
.dh-legal__body h3 {
  font-family: var(--dh-sans);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dh-charcoal);
  margin: 1.75rem 0 0.5rem;
}

.dh-legal__body p {
  margin: 0 0 1.1rem;
}

.dh-legal__body a {
  color: var(--dh-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dh-legal__body a:hover {
  color: var(--dh-charcoal);
}

/* Restore standard bulleted/numbered lists for prose (product .rte flattens them) */
.dh-legal__body ul,
.dh-legal__body ol {
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
}

.dh-legal__body ul {
  list-style: disc;
}

.dh-legal__body ol {
  list-style: decimal;
}

.dh-legal__body li {
  display: list-item;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  border: 0;
  padding: 0.2rem 0;
  margin: 0;
}

.dh-legal__body li strong {
  font-weight: 600;
}

.dh-legal__body strong {
  font-weight: 600;
  color: var(--dh-charcoal);
}

.dh-legal__body hr {
  border: 0;
  border-top: 1px solid var(--dh-line);
  margin: 2.5rem 0;
}

/* Callout box for the Muster-Widerrufsformular and key notices */
.dh-legal__body .dh-legal-box {
  background: rgba(31, 29, 26, 0.03);
  border: 1px solid var(--dh-line);
  border-radius: 4px;
  padding: 1.5rem 1.6rem;
  margin: 1.6rem 0 2rem;
  font-size: 0.95rem;
}

.dh-legal__body .dh-legal-box p {
  margin-bottom: 0.6rem;
}

.dh-legal__body .dh-legal-box p:last-child {
  margin-bottom: 0;
}

/* Contact quick-facts card */
.dh-legal__card {
  background: #fff;
  border: 1px solid var(--dh-line);
  border-radius: 6px;
  padding: 1.6rem 1.5rem;
  font-size: 0.9rem;
}

@media screen and (min-width: 990px) {
  .dh-legal__card {
    position: sticky;
    top: 2rem;
  }
}

.dh-legal__card-label {
  font-family: var(--dh-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.64rem;
  color: var(--dh-graphite);
  margin: 0 0 0.6rem;
}

.dh-legal__card-name {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

.dh-legal__card-address {
  font-style: normal;
  line-height: 1.55;
  color: var(--dh-graphite);
  white-space: pre-line;
  margin: 0 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--dh-line);
}

.dh-legal__card-rows {
  margin: 0;
}

.dh-legal__card-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0 0 0.8rem;
}

.dh-legal__card-row dt {
  font-family: var(--dh-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
  color: var(--dh-graphite);
}

.dh-legal__card-row dd {
  margin: 0;
  font-weight: 500;
}

.dh-legal__card-row dd a {
  color: var(--dh-terracotta);
  text-decoration: none;
}

.dh-legal__card-row dd a:hover {
  text-decoration: underline;
}

.dh-legal__card-note {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--dh-graphite);
}

/* Footer legal links bar */
.dh-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
}

.dh-footer-legal__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.dh-footer-legal__list a {
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  opacity: 0.82;
  transition: opacity var(--duration-short, 150ms) ease;
}

.dh-footer-legal__list a:hover {
  opacity: 1;
}

/* ============================================================
 * Shop overview (page.shop / sections/dh-shop.liquid)
 * Mobile-first. Set as a feature, single creams as a grid.
 * ============================================================ */
.dh-shop {
  padding: clamp(3rem, 2rem + 6vw, 6rem) 0 clamp(4rem, 3rem + 6vw, 7rem);
}

.dh-shop__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 1rem + 3vw, 3rem);
}

.dh-shop__head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(2.4rem, 2rem + 2vw, 3.6rem);
}

.dh-shop__eyebrow {
  font-family: var(--dh-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dh-ochre);
  margin: 0 0 0.8rem;
}

.dh-shop__title {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  line-height: 1.05;
  color: var(--dh-charcoal);
  margin: 0 0 1rem;
}

.dh-shop__intro {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--dh-graphite);
  margin: 0;
}

/* --- Featured set --- */
.dh-shop-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--dh-line);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: clamp(3rem, 2.4rem + 3vw, 4.5rem);
}

.dh-shop-feature__media {
  position: relative;
  aspect-ratio: 16 / 11;
  background: color-mix(in srgb, var(--dh-terracotta) 12%, var(--dh-cream));
  display: flex;
  align-items: center;
  justify-content: center;
}

.dh-shop-feature__img,
.dh-shop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dh-shop-feature__placeholder,
.dh-shop-card__placeholder {
  font-family: var(--dh-display-serif);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  color: var(--dh-charcoal);
  opacity: 0.5;
  padding: 1.5rem;
  text-align: center;
}

.dh-shop-feature__body {
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.dh-shop-feature__tag {
  font-family: var(--dh-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-terracotta);
  margin: 0;
}

.dh-shop-feature__name {
  font-family: var(--dh-display-serif);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--dh-charcoal);
  margin: 0;
}

.dh-shop-feature__blurb {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--dh-graphite);
  margin: 0;
  max-width: 46ch;
}

.dh-shop-feature__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  margin-top: 0.6rem;
}

.dh-shop-feature__price {
  font-family: var(--dh-display-serif);
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
  color: var(--dh-charcoal);
}

.dh-shop-feature__cta {
  display: inline-block;
  padding: 1.15rem 2.4rem;
  background: var(--dh-terracotta);
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--dh-terracotta);
  border-radius: 999px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease, border-color 200ms ease;
}

.dh-shop-feature__cta:hover {
  background: #A04534;
  border-color: #A04534;
  transform: translateY(-1px);
}

.dh-shop-feature__cta.is-sold {
  background: var(--dh-graphite);
  border-color: var(--dh-graphite);
  cursor: not-allowed;
}

/* --- Singles grid --- */
.dh-shop__subhead {
  font-family: var(--dh-display-serif);
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  color: var(--dh-charcoal);
  margin: 0 0 0.4rem;
  text-align: center;
}

.dh-shop__subnote {
  font-size: 0.98rem;
  color: var(--dh-graphite);
  text-align: center;
  margin: 0 auto clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  max-width: 44ch;
}

.dh-shop__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 1rem + 1.5vw, 2rem);
}

.dh-shop-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--dh-line);
  border-top: 3px solid var(--dh-card-accent, var(--dh-graphite));
  border-radius: 18px;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms ease;
}

.dh-shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(31, 29, 26, 0.08);
}

.dh-shop-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--dh-card-accent, var(--dh-graphite)) 12%, var(--dh-cream));
  display: flex;
  align-items: center;
  justify-content: center;
}

.dh-shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.3rem 1.3rem 1.5rem;
  flex: 1 1 auto;
}

.dh-shop-card__name {
  font-family: var(--dh-display-serif);
  font-size: 1.45rem;
  color: var(--dh-charcoal);
  margin: 0;
}

.dh-shop-card__blurb {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--dh-graphite);
  margin: 0;
  flex: 1 1 auto;
}

.dh-shop-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.dh-shop-card__price {
  font-family: var(--dh-display-serif);
  font-size: 1.3rem;
  color: var(--dh-charcoal);
}

.dh-shop-card__add {
  appearance: none;
  cursor: pointer;
  padding: 0.7rem 1.3rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dh-card-accent, var(--dh-charcoal));
  background: transparent;
  border: 1px solid var(--dh-card-accent, var(--dh-line-strong));
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease, color 200ms ease;
}

.dh-shop-card__add:hover {
  background: var(--dh-card-accent, var(--dh-charcoal));
  color: #FFFFFF;
  transform: translateY(-1px);
}

.dh-shop-card__add.is-added {
  background: var(--dh-card-accent, var(--dh-moss));
  color: #FFFFFF;
}

.dh-shop-card__add.is-error {
  background: var(--dh-terracotta);
  border-color: var(--dh-terracotta);
  color: #FFFFFF;
}

.dh-shop-card__add[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

.dh-shop-card__add.is-sold {
  color: var(--dh-graphite);
  border-color: var(--dh-line-strong);
  cursor: not-allowed;
}

/* Secondary "shop the singles" link under the hero buy card */
.dh-buy-card__alt-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--dh-graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.dh-buy-card__alt-link:hover {
  color: var(--dh-terracotta);
}

@media (min-width: 560px) {
  .dh-shop__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 750px) {
  .dh-shop-feature {
    grid-template-columns: 1fr 1fr;
  }
  .dh-shop-feature__media {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .dh-shop-feature__body {
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .dh-shop__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dh-shop-card,
  .dh-shop-card:hover,
  .dh-shop-card__add:hover,
  .dh-shop-feature__cta:hover {
    transform: none;
  }
}

/* ============================================================
   Set drawer — right-side slide-out reinforcement + checkout
   ============================================================ */
.dh-drawer[hidden] {
  display: none;
}

.dh-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.dh-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 29, 26, 0.5);
  opacity: 0;
  transition: opacity 300ms ease;
}

.dh-drawer[data-open='true'] .dh-drawer__overlay {
  opacity: 1;
}

.dh-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--dh-cream);
  box-shadow: -8px 0 40px rgba(31, 29, 26, 0.18);
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.dh-drawer[data-open='true'] .dh-drawer__panel {
  transform: translateX(0);
}

.dh-drawer__head {
  position: relative;
  flex: 0 0 auto;
  padding: 22px 56px 18px 24px;
  border-bottom: 1px solid var(--dh-line);
}

.dh-drawer__eyebrow {
  margin: 0 0 4px;
  font-family: var(--dh-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-ochre);
}

.dh-drawer__title {
  margin: 0;
  font-family: var(--dh-display-serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--dh-charcoal);
}

.dh-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--dh-line);
  border-radius: 50%;
  background: transparent;
  color: var(--dh-charcoal);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.dh-drawer__close:hover {
  background: rgba(31, 29, 26, 0.06);
  border-color: var(--dh-line-strong);
}

.dh-drawer__close svg {
  width: 18px;
  height: 18px;
}

.dh-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px 24px;
}

.dh-drawer__product {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dh-line);
}

.dh-drawer__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
}

.dh-drawer__product-name {
  margin: 0 0 2px;
  font-family: var(--dh-display-serif);
  font-size: 17px;
  color: var(--dh-charcoal);
}

.dh-drawer__product-caption {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dh-graphite);
}

.dh-drawer__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--dh-graphite);
}

.dh-drawer__stars {
  display: inline-flex;
}

.dh-drawer__stars svg {
  width: 13px;
  height: 13px;
  fill: var(--dh-star);
}

.dh-drawer__rating-value {
  font-weight: 600;
  color: var(--dh-charcoal);
}

.dh-drawer__block {
  padding: 18px 0;
  border-bottom: 1px solid var(--dh-line);
}

.dh-drawer__block-label {
  margin: 0 0 8px;
  font-family: var(--dh-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dh-graphite);
}

/* Das ist drin — compact creme rows, each a tap-to-expand formula accordion */
.dh-drawer__cremes {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dh-drawer__creme {
  border-bottom: 1px solid var(--dh-line);
}

.dh-drawer__creme:last-child {
  border-bottom: none;
}

.dh-drawer__creme-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
}

.dh-drawer__creme-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  color: var(--dh-ochre);
}

.dh-drawer__creme-icon svg {
  width: 17px;
  height: 17px;
}

/* Per-creme tube colors, taken from each tube's cap band in 4_cremes_main.png */
.dh-drawer__creme-icon--foundation { color: #C8632E; }
.dh-drawer__creme-icon--tone { color: #C0892E; }
.dh-drawer__creme-icon--clear { color: #B07A93; }
.dh-drawer__creme-icon--biome { color: #3A7C95; }

.dh-drawer__creme-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dh-drawer__creme-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--dh-charcoal);
}

.dh-drawer__creme-desc {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--dh-graphite);
}

.dh-drawer__creme-size {
  flex: 0 0 auto;
  font-family: var(--dh-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dh-charcoal);
  padding: 3px 8px;
  border: 1px solid var(--dh-line-strong);
  border-radius: 999px;
  white-space: nowrap;
}

.dh-drawer__extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.dh-drawer__extra {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--dh-charcoal);
}

.dh-drawer__extra-icon {
  display: inline-grid;
  place-items: center;
  color: var(--dh-graphite);
}

.dh-drawer__extra-icon svg {
  width: 17px;
  height: 17px;
}

/* App block — how it works, access, privacy */
.dh-drawer__app {
  margin-top: 4px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--dh-line);
  background: #F1EBDD;
}

.dh-drawer__app-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}

.dh-drawer__app-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--dh-ochre);
  color: #fff;
}

.dh-drawer__app-icon svg {
  width: 21px;
  height: 21px;
}

.dh-drawer__app-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dh-drawer__app-title {
  font-family: var(--dh-display-serif);
  font-size: 17px;
  line-height: 1.1;
  color: var(--dh-charcoal);
}

.dh-drawer__steps {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dh-step;
}

.dh-drawer__step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.dh-drawer__step-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  color: var(--dh-charcoal);
}

.dh-drawer__step-icon svg {
  width: 18px;
  height: 18px;
}

.dh-drawer__step-text {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dh-graphite);
}

.dh-drawer__step-text strong {
  display: block;
  font-weight: 600;
  color: var(--dh-charcoal);
}

.dh-drawer__app-privacy {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--dh-line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--dh-graphite);
}

.dh-drawer__app-privacy .dh-drawer__step-icon {
  width: 24px;
  color: var(--dh-moss);
}

.dh-drawer__usps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dh-drawer__usp {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--dh-charcoal);
}

.dh-drawer__usp-check {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--dh-moss);
}

.dh-drawer__foot {
  flex: 0 0 auto;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--dh-line);
  background: var(--dh-cream);
}

/* Risk reversal — the strongest lever at the decision point, so it leads
   the footer and reads louder than the conditions line. */
.dh-drawer__guarantee {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  background: rgba(91, 122, 82, 0.08);
  border: 1px solid rgba(91, 122, 82, 0.30);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #445C3B;
}

.dh-drawer__guarantee-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--dh-moss);
}

.dh-drawer__guarantee-icon svg {
  width: 17px;
  height: 17px;
}

.dh-drawer__guarantee-text strong {
  color: var(--dh-charcoal);
}

.dh-drawer__price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.dh-drawer__price-label {
  font-family: var(--dh-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dh-graphite);
  padding-top: 4px;
}

.dh-drawer__price-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.dh-drawer__price {
  font-family: var(--dh-display-serif);
  font-size: 19px;
  color: var(--dh-charcoal);
}

.dh-drawer__price-sub {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--dh-graphite);
  text-align: right;
}

.dh-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--dh-charcoal);
  color: var(--dh-cream);
  font-family: var(--dh-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}

.dh-drawer__checkout:hover {
  background: #000;
  transform: translateY(-1px);
}

.dh-drawer__checkout-arrow {
  transition: transform 150ms ease;
}

.dh-drawer__checkout:hover .dh-drawer__checkout-arrow {
  transform: translateX(3px);
}

.dh-drawer__cta-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: var(--dh-graphite);
}

.dh-drawer__pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.dh-drawer__pay-item {
  display: inline-flex;
}

.dh-drawer__pay-item svg {
  width: 38px;
  height: 23px;
  display: block;
}

.dh-drawer__foot-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--dh-graphite);
}

html.dh-drawer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .dh-drawer__overlay,
  .dh-drawer__panel {
    transition: none;
  }
}

/* =========================================================================
   Anchor nav — editorial wayfinding strip at the top of the home page.
   Surfaces the brand's distinctive sections (Methode, Gründerin, …).
   Mobile-first: horizontally scrollable row; non-sticky.
   ========================================================================= */
.dh-anchornav-section {
  margin: 0;
  position: sticky;
  top: 0;
  /* Sits below Dawn's header (z-index 4) so scrolling up restores the full
     menu and scrolling down leaves this slim wayfinding bar pinned. */
  z-index: 2;
}

.dh-anchornav {
  border-bottom: 1px solid var(--dh-line);
}

.dh-anchornav__inner {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.dh-anchornav__eyebrow {
  display: none;
  flex: none;
  font-family: var(--dh-mono);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dh-graphite);
}

.dh-anchornav__list {
  display: flex;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  margin: 0;
  padding: 0 0.2rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dh-anchornav__list::-webkit-scrollbar {
  display: none;
}

.dh-anchornav__item {
  flex: none;
}

.dh-anchornav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--dh-charcoal);
  white-space: nowrap;
  transition: color 150ms ease;
}

.dh-anchornav__num {
  font-family: var(--dh-mono);
  font-size: 0.95rem;
  color: var(--dh-ochre);
  letter-spacing: 0.04em;
}

.dh-anchornav__label {
  font-family: var(--dh-display-serif);
  font-size: 1.35rem;
  line-height: 1.1;
  position: relative;
}

.dh-anchornav__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 1px;
  background: var(--dh-charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.dh-anchornav__link:hover .dh-anchornav__label::after,
.dh-anchornav__link:focus-visible .dh-anchornav__label::after {
  transform: scaleX(1);
}

/* Friendly in-page jump targets share the header-aware offset. */
.dh-anchor-target {
  scroll-margin-top: 6rem;
}
span.dh-anchor-target {
  display: block;
  height: 0;
}

@media (min-width: 750px) {
  .dh-anchornav__eyebrow {
    display: block;
  }
  .dh-anchornav__inner {
    gap: 2.4rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .dh-anchornav__label {
    font-size: 1.5rem;
  }
}

/* ============================================================
 * Über uns — dh-about
 * Editorial single-column: manifesto, mission, principles, refusals, CTA.
 * Mobile-first; two-column rhythm appears at 750px+.
 * Note: theme root is 62.5% (1rem = 10px).
 * ============================================================ */

.dh-about {
  padding: clamp(4.5rem, 3rem + 7vw, 8rem) 0;
}

.dh-about__inner {
  max-width: 92rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}

/* Shared kicker (mono, ochre tick) */
.dh-about__eyebrow,
.dh-about__kicker {
  font-family: var(--dh-mono);
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dh-graphite);
  margin: 0 0 1.6rem;
}

.dh-about__eyebrow::before,
.dh-about__kicker::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--dh-ochre);
  border-radius: 1px;
  margin-bottom: 1.4rem;
}

/* Manifesto */
.dh-about__manifesto {
  max-width: 30ch;
}

.dh-about__statement {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.8rem, 1.6rem + 4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--dh-charcoal);
  margin: 0 0 2rem;
  text-wrap: balance;
}

.dh-about__lede {
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--dh-graphite);
  margin: 0;
  max-width: 46ch;
}

/* Section rhythm dividers */
.dh-about__mission,
.dh-about__block,
.dh-about__cta {
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  border-top: 1px solid var(--dh-line);
}

/* Mission */
.dh-about__mission-title {
  font-family: var(--dh-display-serif);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--dh-charcoal);
  margin: 0 0 1.8rem;
  max-width: 22ch;
}

.dh-about__mission-body p {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--dh-charcoal);
  margin: 0 0 1.4rem;
  max-width: 60ch;
}

.dh-about__mission-body p:last-child {
  margin-bottom: 0;
}

/* Principles — numbered editorial list */
.dh-about__principles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.8rem;
}

.dh-about__principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: baseline;
}

.dh-about__principle-num {
  font-family: var(--dh-mono);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--dh-ochre);
  font-feature-settings: 'tnum', 'zero';
}

.dh-about__principle-title {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dh-charcoal);
  margin: 0 0 0.8rem;
}

.dh-about__principle-body {
  font-size: 1.5rem;
  line-height: 1.62;
  color: var(--dh-graphite);
  margin: 0;
  max-width: 52ch;
}

/* Refusals */
.dh-about__refusals-intro {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--dh-graphite);
  margin: 0 0 2.4rem;
  max-width: 50ch;
}

.dh-about__refusals {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dh-about__refusal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--dh-line);
}

.dh-about__refusal:last-child {
  border-bottom: 1px solid var(--dh-line);
}

.dh-about__refusal-mark {
  font-family: var(--dh-mono);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--dh-terracotta);
  font-weight: 500;
}

.dh-about__refusal-text {
  font-size: 1.55rem;
  line-height: 1.55;
  color: var(--dh-charcoal);
  margin: 0;
  max-width: 60ch;
}

/* Closing CTA */
.dh-about__cta {
  text-align: center;
}

.dh-about__cta-title {
  font-family: var(--dh-display-serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--dh-charcoal);
  margin: 0 auto 2.2rem;
  max-width: 20ch;
}

.dh-about__cta-button {
  display: inline-block;
  background: var(--dh-terracotta);
  color: #ffffff;
  font-family: var(--dh-sans);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 1.2rem 2.6rem;
  border-radius: 999px;
  transition: transform 150ms ease, background-color 150ms ease;
}

.dh-about__cta-button:hover {
  background: #a24838;
  transform: translateY(-1px);
}

.dh-about__cta-button:focus-visible {
  outline: 2px solid var(--dh-charcoal);
  outline-offset: 3px;
}

.dh-about__cta-note {
  font-family: var(--dh-mono);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--dh-graphite);
  margin: 1.4rem 0 0;
}

/* Tablet and up */
@media (min-width: 750px) {
  .dh-about__mission {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3.5rem;
    align-items: start;
  }

  .dh-about__mission .dh-about__kicker {
    grid-column: 1 / -1;
  }

  .dh-about__principles {
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem 4rem;
  }
}
/* end dh-about */


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — Contrast & layered surfaces
   ═══════════════════════════════════════════════════════════════════════════ */

/* Surface tiers — a gentle oscillation so the page reads as stacked surfaces,
   not one flat cream wash:  reader(cream) → founder(sand) → reviews(parchment)
   → MANIFESTO(ink) → compare(cream) → faq(parchment) → footer(cream). */
.dh-reviews { --color-background: 239, 231, 214; background-color: var(--dh-parchment); }
.dh-faq     { --color-background: 239, 231, 214; background-color: var(--dh-parchment); }

/* ── Manifesto — the page's one confident dark moment (the contrast anchor) ──
   The section already carries a full [id$="__why"] !important treatment built
   for a cream surface (serif title, hairline dividers, dark text). We keep that
   structure and override only the colours for the dark ground — so our rules
   must match its specificity and use !important + later source order. */
.dh-manifesto {
  --color-foreground: 245, 240, 230;          /* cream text via Dawn tokens */
  background-color: var(--dh-ink);
  background-image: none;
  position: relative;
}
/* Hairlines seat the dark block against its cream neighbours */
.dh-manifesto::before,
.dh-manifesto::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(245, 240, 230, 0.12);
  pointer-events: none;
  z-index: 1;
}
.dh-manifesto::before { top: 0; }
.dh-manifesto::after  { bottom: 0; }

/* Title → cream + a touch of SOFT (size/serif inherited from the __why rules).
   .dh-manifesto IS the .multicolumn element, so target the title directly with
   enough specificity (0,4,0) to beat [id$="__why"] .multicolumn .title (0,3,0). */
.dh-manifesto .title.inline-richtext.h1 {
  color: #F8F4EC !important;
  font-weight: 500 !important;
  font-variation-settings: "opsz" 144, "SOFT" 12, "WONK" 0;
}
.dh-manifesto .multicolumn__lede,
.dh-manifesto .multicolumn__lede p { color: rgba(245, 240, 230, 0.76) !important; }

/* Column dividers → light hairlines on dark */
.dh-manifesto .multicolumn-list__item { border-color: rgba(245, 240, 230, 0.14) !important; }

/* Principle cards → cream serif heading with a terracotta tick, cream body */
.dh-manifesto .multicolumn-card,
.dh-manifesto .multicolumn-card__info { background: transparent !important; }
.dh-manifesto .multicolumn-card__info h3,
.dh-manifesto .multicolumn-card .inline-richtext { color: #F8F4EC !important; }
.dh-manifesto .multicolumn-card__info h3::before,
.dh-manifesto .multicolumn-card .inline-richtext::before {
  content: "" !important;
  display: block !important;
  width: 2.2rem;
  height: 2px;
  margin-bottom: 1.1rem;
  background: var(--dh-terracotta);
}
.dh-manifesto .multicolumn-card__info .rte p,
.dh-manifesto .multicolumn-card__info > p { color: rgba(245, 240, 230, 0.72) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 — Depth & texture
   ═══════════════════════════════════════════════════════════════════════════ */

/* (A) Paper grain — a whisper of tooth over every surface. Fixed + non-interactive;
   multiply so it textures the warm surfaces and all but vanishes on the dark anchor.
   The noise is an inline SVG (feTurbulence) — no extra asset, no network. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--dh-grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
@media (prefers-reduced-motion: reduce) { /* grain is static, but keep it honest */ }

/* (B) Resting depth on the genuine card surfaces so they lift off the surface tier.
   (Product tubes stay intentionally box-less; the hero buy-card stays flat.) */
.dh-reviews__summary { box-shadow: var(--dh-shadow-card-sm); }
.dh-compare__table {
  box-shadow: var(--dh-shadow-card-md);
  border-radius: 10px;
  overflow: hidden;
}

/* (C) Graded photography — a subtle warm grade ties imagery to the palette */
.dh-founder__image img,
.dh-hero__media img,
.card__media img {
  filter: saturate(0.96) contrast(1.02) sepia(0.04);
}

/* (D) Hero product image — a soft contact shadow so the full-bleed media seats
   into the surface below instead of butting flat against it */
.dh-hero__media {
  box-shadow: 0 30px 50px -36px rgba(31, 29, 26, 0.28);
}