/* components.css — site newTudo (foundation newTudo-home + newTudo-pdp dialog shell) · shared component norms (PAGE-SCAFFOLD owns this file).
   Sections style their own BEM classes in css/sections/<slug>.css; this file holds only what
   more than one section shares or what a template needs page-wide. */

/* ---- Accessibility helper ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Icon default (so a broken/unsized icon can never balloon to 300x150) ---- */
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* ---- Action/Button (brief-page §8): three drawn variants, 56 tall, square corners,
   label = `button` token (Denim 500 / Inter 500, 16, lh 1.38, ls 0.05em, UPPERCASE), optional
   24px arrow icon (gap 8). Sections may override size/width per their slice (e.g. hero M 48). ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-button);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn__icon { width: 24px; height: 24px; flex: 0 0 auto; }

/* filled ink (hero D CTA) — hover = inversion (BA-hero-2 / BA-B2 default) */
.btn--ink { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.btn--ink:hover, .btn--ink:focus-visible { background: var(--color-white); color: var(--color-ink); }

/* filled white (hero M CTA, bundle "Get started") */
.btn--white { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); }
.btn--white:hover, .btn--white:focus-visible { background: var(--color-ink); color: var(--color-white); }

/* outline 1px ink, 12/24 padding (studies / journal CTAs) — states from the Figma set 530:6928:
   hover rgba(0,0,0,.06), pressed rgba(0,0,0,.12) (slice studies D-STUDIES-6) */
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); padding: 12px 24px; }
.btn--outline:hover, .btn--outline:focus-visible { background: rgba(0, 0, 0, 0.06); }
.btn--outline:active { background: rgba(0, 0, 0, 0.12); }

/* ---- Accordion template contract (FD-99 work-around, as on fullspan-contact / havn-pdp) ----
   pipeline/templates/code/accordion/accordion.css is COPIED to css/templates/accordion.css for
   reference but NOT linked: it ships demo rules on `.faq` (margin-top 60/160, display:flex @1440)
   that would land on this page's `faq` section root, and it puts the collapse mechanics on the
   demo CSS class `.faq-answer` instead of the JS class. accordion.js sets an inline pixel height
   and relies on the stylesheet for overflow + transition — so the mechanics live here, on the
   immutable JS class. Logged under FD-99 (Also found by: newTudo-home PAGE_SCAFFOLD). */
.accordion-answer {
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}
/* GATE_DOM_FIX 1 (FD-23): accordion.js opens the `accordion-open-first` item at load by writing a px height and then
   `auto` in the next frame — with the transition live, the panel animates up from 0 on every page load, and until a frame
   runs it renders 0 tall (gate run 2: faq item 1 81 vs 172 on the first viewport). No transition until the page is ready:
   item 1 is simply open on load; clicks still animate. `is-ready` is set by js/main.js after `load` + one frame. */
html:not(.is-ready) .accordion-answer { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .accordion-answer { transition: none; }
  .btn { transition: none; }
}

/* ---- Slider template (css/templates/slider.css IS linked page-wide) ----
   Its demo defaults that a slider section MUST override in its own css/sections/<slug>.css:
   .slides-blocks { margin-top: 20px; gap: 16px; padding: 0 10px }  .slide-wrapper { width/height/border-radius }
   .slider-container { margin-top } and the generic `.title` rule (do not use a bare `.title` class). */

/* ============================================================================================================
   SHARED DIALOG SHELL (newTudo-pdp PAGE-SCAFFOLD) — one component, two presentations; js/dialog.js drives it.
   Contract: brief/ingredients.md §5 "Dialog shell" + brief/product.md §5 "Lab Verified Quality dialog".
   Native <dialog> opened with showModal() → top layer (above sticky header + sticky-cta), page inert.
   >= 1024: right DRAWER (MODAL frames 2190:17297/17326/17355/17380/17405, lab 2190:19139), width --dialog-w (560 @1920).
   <  1024: bottom SHEET (SHEET frames 2190:18301/18329/18357/18381/18405, lab 2190:19149), max-height 90dvh.
   Sections write ONLY their <dialog> content markup + section-scoped extras (e.g. .ingredients-facts*, .product__lab-*);
   they never re-style .dialog*.
============================================================================================================ */
html.has-dialog {
  overflow: hidden;                                   /* lock the ROOT: a body lock does not hold with overflow-x: clip */
  /* User fix 2026-10-19: keep the scrollbar's space reserved while locked, so NOTHING moves — the padding trick
     only compensated in-flow content and the fixed sticky-cta bar jumped 15px wider/right on every open. */
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html.has-dialog { padding-inline-end: var(--scrollbar-comp, 0px); }
}
.dialog {
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  background: transparent;
  color: var(--color-white);
  overflow: visible;
}
.dialog:not([open]) { display: none; }
.dialog::backdrop {
  background: var(--color-scrim-20);                  /* NOTE 2190:18477 "page dimmed behind, 20% black" */
  opacity: 0;
  transition: opacity .3s ease-out;
}
.dialog.is-open::backdrop { opacity: 1; }
.dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
  background: var(--color-accent);
  transition: transform .3s ease-out;
}
.dialog__panel::before {                              /* red felt texture: fill #2 opacity .6 + exposure/saturation (D-PR-23) */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/product-lab-drawer-texture.webp") center / cover no-repeat;
  opacity: .6;
  filter: brightness(.94) saturate(.9);
  pointer-events: none;
}
.dialog__scroller {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog__body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.dialog__close {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-white-10);
  background: transparent;
  border-radius: 0;
}
.dialog__close img {                                 /* icon = 75% of the button on the sheet, 60% on the drawer (brief ingredients §2) */
  width: calc(var(--dialog-close, 32px) * var(--dialog-icon-k, 0.75));
  height: calc(var(--dialog-close, 32px) * var(--dialog-icon-k, 0.75));
}
.dialog__close:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.dialog__head { display: flex; flex-direction: column; }
.dialog__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-white);
}
.dialog__sub {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.dialog__media { display: block; width: 100%; height: auto; aspect-ratio: 435 / 344; object-fit: cover; }
.dialog__rows { display: flex; flex-direction: column; }
/* Row rules: Figma draws a 0-height line ABOVE each clipped row frame, so it never renders (ingredients builder, 2026-10-19)
   → no per-row border, as drawn; only the footer rule is visible. */
.dialog__row { display: flex; flex-direction: column; }
.dialog__label {
  font-weight: var(--weight-medium);
  font-size: var(--text-tag-label);
  line-height: var(--lh-tag-label);
  letter-spacing: var(--ls-tag-label);
  text-transform: uppercase;
  color: var(--color-white);
}
.dialog__text {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-white);
}
.dialog__foot { display: flex; flex-direction: column; border-top: 1px solid var(--color-white-20); }
.dialog__source, .dialog__disclaimer {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
}
.dialog__source { color: var(--color-white); }
.dialog__disclaimer { color: var(--color-white-80); }

/* ---- SHEET presentation (< 1024) ---- */
@media (max-width: 1023px) {
  .dialog {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 90vh;
    max-height: 90dvh;
  }
  .dialog__panel { height: auto; transform: translateY(100%); }
  .dialog.is-open .dialog__panel { transform: translateY(0); }
  .dialog__body {
    gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 32px);
    padding-top: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 40px);
    padding-inline: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 40px);
    padding-bottom: calc(clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 80px) + env(safe-area-inset-bottom, 0px));
  }
  /* RESPONSIVE (2026-10-19): the sheet's close / head / rows / foot spacing was fixed px in 320–1023 — now the brief
     ingredients §2 overlay table (M-base / M-min / M-max = max(M, D), anchor 390; band values in the 768–1023 block). */
  .dialog {
    --dialog-close:     clamp(32px, calc(32px + (var(--max-vw) - 390px) * 0.015), 40px);   /* 32 / min 32 (D-ING-8) / 40 */
    --dialog-close-off: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 20px);   /* 16 / 13 / 20 */
    --dialog-icon-k:    0.75;
  }
  .dialog__close {
    top: var(--dialog-close-off);
    right: var(--dialog-close-off);
    width: var(--dialog-close);
    height: var(--dialog-close);
  }
  .dialog__head {                                          /* padding-inline-end = close + offset (D-ING-13) */
    gap: clamp(3px, calc(4px + (var(--max-vw) - 390px) * 0.015), 8px);
    padding-inline-end: calc(var(--dialog-close) + var(--dialog-close-off));
  }
  .dialog__sub { color: var(--color-white-80); }          /* drawn per layer (D-ING-6) */
  .dialog__rows { gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 24px); }
  .dialog__row {                                           /* rule → label 8 (Figma, brief ingredients §2) */
    gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 12px);
    padding-top: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 12px);
  }
  .dialog__spacer { display: none; }
  .dialog__foot {
    padding-top: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 32px);
    gap: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 16px);
  }
}

/* ---- DRAWER presentation (>= 1024) ---- */
@media (min-width: 1024px) {
  .dialog {
    inset: 0 0 0 auto;
    width: var(--dialog-w);
    height: 100vh;
    height: 100dvh;
  }
  .dialog__panel { transform: translateX(100%); }
  .dialog.is-open .dialog__panel { transform: translateX(0); }
  .dialog__body {
    gap: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    padding-top: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    padding-inline: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    padding-bottom: clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
  }
  /* RESPONSIVE (2026-10-19): close / offset / head were fixed 40 / 20 / 8 / 60 in the desktop band — now formula-scaled
     (brief ingredients §2: close 40 → min 32 (D-ING-8), offset 20 → 11, head gap 8 → 4, icon 60% of the button). */
  .dialog {
    --dialog-close:     clamp(32px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --dialog-close-off: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --dialog-icon-k:    0.6;
  }
  .dialog__close {
    top: var(--dialog-close-off);
    right: var(--dialog-close-off);
    width: var(--dialog-close);
    height: var(--dialog-close);
  }
  .dialog__head {                                          /* close + offset (D-ING-13) */
    gap: clamp(4px, calc(8px * (var(--max-vw) / var(--vw-base))), 8px);
    padding-inline-end: calc(var(--dialog-close) + var(--dialog-close-off));
  }
  .dialog__sub { color: var(--color-white); }
  .dialog__rows { gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px); }
  .dialog__row {
    gap: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
    padding-top: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px);   /* rule → label 12 */
  }
  .dialog__spacer { flex: 1 0 0; }
  .dialog__foot {
    padding-top: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    gap: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
  }
}
.dialog.is-dragging .dialog__panel { transition: none; }
/* ---- Pseudo-tablet SHEET (768–1023): centred 480 content column (brief ingredients §6, D-ING-8) + band formulas ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .dialog__body {
    --dialog-pad: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    padding-top: var(--dialog-pad);
    padding-inline: var(--dialog-pad);
    gap: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 32px);
    max-inline-size: calc(480px + 2 * var(--dialog-pad));
    margin-inline: auto;
    width: 100%;
  }
  /* band = clamp(M-767, M-767 + (vw − 768) × 0.025, M-max) of the sheet table (FD-184) */
  .dialog {
    --dialog-close:     clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    --dialog-close-off: 20px;                              /* M-767 = min(20, 16 + 5.66) */
  }
  .dialog__head { gap: 8px; }                              /* min(8, 4 + 5.66) */
  .dialog__rows { gap: 24px; }                             /* min(24, 20 + 5.66) */
  .dialog__row { gap: 12px; padding-top: 12px; }           /* min(12, 8 + 5.66) */
  .dialog__foot {
    padding-top: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 32px);
    gap: 16px;                                             /* min(16, 12 + 5.66) */
  }
}
@media (prefers-reduced-motion: reduce) {
  .dialog__panel, .dialog::backdrop { transition: none; }
}

/* ---- Marquee template (css/templates/marquee.css IS linked page-wide) ----
   Its demo rules (.marquee-slider height 30 / padding 5 / bg #f9f9f9, .slider-track div inline-block 18px #333, nowrap)
   must be neutralised by the `free-from` section in its own css/sections/free-from.css (FD-71, slice D-FF*). */
/* ---- Carousel template (css/templates/carousel.css IS linked page-wide) — product gallery only. ---- */

/* ============================================================================================================
   DRAWER SHELL (newTudo-science PAGE-SCAFFOLD) — side drawers P1–P12; js/drawer.js drives it.
   Contract: brief-page.md §8 "Drawer component". Placement frame 1843:16927; 24 popup frames (720 D / 390 M).
   >= 1024: right drawer, width --drawer-w (720 @1920) · 768–1023: right drawer 390 · < 768: full screen.
   Slices (drawers-studies, drawers-data) write ONLY content inside .drawer__body and style it in their own
   css/sections/<slug>.css; they never re-style .drawer, .drawer__panel, .drawer__scroller, .drawer__close.
   Page scroll lock = html.has-drawer (below) — NOT the site's html.has-dialog (SHELL-2).
============================================================================================================ */
/* Drawer scroll lock: NOT the site's html.has-dialog — that keeps the scrollbar gutter, and the top layer never paints
   into that strip, so the panel's right 15px and its whole scrollbar were invisible on classic-scrollbar desktops
   (AUDIT drawers-studies SHELL-2). Here the gutter is released and handed back as root padding, so in-flow content
   does not move (this page has no position:fixed bar) and the top layer spans the full viewport. */
html.has-drawer {
  overflow: hidden;
  padding-inline-end: var(--scrollbar-comp, 0px);
}
.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  overflow: visible;
}
.drawer:not([open]) { display: none; }
.drawer::backdrop {
  background: var(--color-scrim-20);
  opacity: 0;
  transition: opacity .3s ease-out;
}
.drawer.is-open::backdrop { opacity: 1; }

/* ---- Mobile base (< 768): full-screen sheet, pad 64/16/48, body gap 24, close 32 @ 20/20, bar inset 4 ---- */
.drawer__panel {
  --drawer-pad-top: clamp(53px, calc(64px + (var(--max-vw) - 390px) * 0.015), 80px);
  --drawer-pad-inline: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 48px);
  --drawer-pad-bottom: clamp(39px, calc(48px + (var(--max-vw) - 390px) * 0.015), 48px);
  --drawer-gap: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 32px);
  --drawer-close: clamp(32px, calc(32px + (var(--max-vw) - 390px) * 0.015), 40px);
  --drawer-close-offset: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 24px);
  --drawer-bar-inset: 4px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: var(--drawer-w);
  height: 100vh;
  height: 100dvh;
  background: var(--color-white);
  color: var(--color-ink);
  transform: translateX(100%);
  transition: transform .3s ease-out;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__close {
  position: absolute;
  top: var(--drawer-close-offset);
  right: var(--drawer-close-offset);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--drawer-close);
  height: var(--drawer-close);
  padding: 0;
  border: 1px solid var(--color-ink-10);
  border-radius: 0;
  background: var(--color-white);
  cursor: pointer;
}
.drawer__close img {
  width: calc(var(--drawer-close) * 0.75);
  height: calc(var(--drawer-close) * 0.75);
}
.drawer__scroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@supports not selector(::-webkit-scrollbar) {
  .drawer__scroller { scrollbar-width: thin; scrollbar-color: var(--color-ink-10) var(--color-ink-5); }
}
/* 4px indicator, drawn `--drawer-bar-inset` from the panel edge (8 D / 4 M), starting at the panel's top padding */
.drawer__scroller::-webkit-scrollbar { width: calc(4px + var(--drawer-bar-inset)); }
.drawer__scroller::-webkit-scrollbar-track {
  margin-top: var(--drawer-pad-top);
  background: linear-gradient(to left, transparent var(--drawer-bar-inset), var(--color-ink-5) var(--drawer-bar-inset));
}
.drawer__scroller::-webkit-scrollbar-thumb {
  background: linear-gradient(to left, transparent var(--drawer-bar-inset), var(--color-ink-10) var(--drawer-bar-inset));
}
.drawer__body {
  display: flex;
  flex-direction: column;
  gap: var(--drawer-gap);
  padding: var(--drawer-pad-top) var(--drawer-pad-inline) calc(var(--drawer-pad-bottom) + env(safe-area-inset-bottom, 0px));
  /* a classic (space-taking) scrollbar sits inside the right padding, so the content column stays 624 / 358;
     js/drawer.js measures it into --drawer-sb (0 for overlay scrollbars) — AUDIT drawers-studies SHELL-1 */
  padding-right: calc(var(--drawer-pad-inline) - var(--drawer-sb, 0px));
}

/* ---- Shared content primitives (identical in all 12 popups; slices use them, never re-invent them) ---- */
.drawer__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-tag-label);
  line-height: var(--lh-tag-label);
  letter-spacing: var(--ls-tag-label);
  text-transform: uppercase;
  color: var(--color-ink-80);
}
.drawer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-ink);
}
.drawer__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}
.drawer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drawer__badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-tag-label);
  line-height: var(--lh-tag-label);
  letter-spacing: var(--ls-tag-label);
  text-transform: uppercase;
  color: var(--color-ink);
}
.drawer__source {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.drawer__source-ref {
  align-self: stretch;                                  /* FILL-width in Figma (AUDIT drawers-studies FD-R rows) */
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink-80);
}
.drawer__source-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-decoration: none;
}
.drawer__source-link img { width: 20px; height: 20px; flex: none; }

/* ---- Pseudo-tablet 768–1023: right drawer 390 (--drawer-w) = the drawn 390 mobile frame, unscaled (column 358;
   SECTION_BUILD drawers-studies BA-DS-4: the M-767 hold gave a 346.7 column and re-wrapped the badges) ---- */
@media (min-width: 768px) {
  .drawer__panel {
    --drawer-pad-top: 64px;
    --drawer-pad-inline: 16px;
    --drawer-pad-bottom: 48px;
    --drawer-gap: 24px;
    --drawer-close: 32px;
    --drawer-close-offset: 20px;
    --drawer-bar-inset: 4px;
  }
}
@media (max-width: 767px) {
  .drawer__panel { left: 0; width: auto; }   /* full screen, incl. any gutter (see right: above) */
}
/* ---- Desktop >= 1024: right drawer (720 @1920), pad 80/48/48, body gap 32, close 40 @ 24/24 ---- */
@media (min-width: 1024px) {
  .drawer__panel {
    --drawer-pad-top: clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
    --drawer-pad-inline: clamp(26px, calc(48px * (var(--max-vw) / var(--vw-base))), 48px);
    --drawer-pad-bottom: clamp(26px, calc(48px * (var(--max-vw) / var(--vw-base))), 48px);
    --drawer-gap: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --drawer-close: clamp(32px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --drawer-close-offset: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --drawer-bar-inset: 8px;                            /* indicator 8 from the panel edge on the 720 frame (AUDIT drawers-data P2-6) */
  }
  .drawer__close img { width: calc(var(--drawer-close) * 0.6); height: calc(var(--drawer-close) * 0.6); }
  .drawer__head { gap: 16px; }
  .drawer__badges { gap: 12px; }
  .drawer__badge {
    font-size: var(--text-tag-badge);
    line-height: var(--lh-tag-badge);
    letter-spacing: var(--ls-tag-badge);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer::backdrop { transition: none; }
}