/* ANNEAL — reskin layer for master-storefront.
   GENERATED. Do not edit here — edits are overwritten by the next build.
   Source: anneal-site repo, scripts/build-reskin.mjs, from .brand-sync/tokens.css.
   Rebuild: npm run sync && npm run reskin
   Full reasoning for every mapping lives in the repo copy of this file.
   Enqueued last by inc/vertical/anneal.php via the ms_enqueue_chain filter. */

/* ---------- Tier 1 · the reskin surface ---------- */
:root {
  --p-font-sans: Switzer, 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --p-font-display: Switzer, 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --p-font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --p-brand-100: #DEDFE4;   /* the measured frosted glass — product stages */
  --p-brand-200: #D1D2D8;   /* the measured photographic ground */
  --p-brand-300: #B4B5BC;
  --p-brand-400: #919299;
  --p-brand-500: #101014;   /* INK — stands where cupric stood */
  --p-brand-600: #25262B;   /* hover on an ink-filled control */
  --p-brand-700: #3E3F45;
  --p-brand-800: #101014;   /* the dark stage — ANNEAL's punctuation band */
  --p-brand-900: #040406;   /* deepest stage — the closure value */

  --p-neutral-white: #FDFDFE;
  --p-neutral-cream: #F6F6F9;      /* paper. Not cream: no warm neutrals. */
  --p-neutral-stone: #D1D2D8;
  --p-neutral-ash: #B4B5BC;
  --p-neutral-fog: #919299;
  --p-neutral-slate: #616269;
  --p-neutral-graphite: #595A61;
  --p-neutral-charcoal: #25262B;
  --p-neutral-night: #101014;
  --p-neutral-ink: #101014;
  --p-neutral-edge: #25262B;

  --p-ink-200: #D1D2D8;
  --p-ink-400: #919299;
  --p-ink-500: #616269;
  --p-ink-600: #616269;
  --p-ink-800: #595A61;

  --p-tint: #DEDFE4;
  --p-line: #D1D2D8;          /* hairline */
  --p-line-strong: #B4B5BC;   /* the real control boundary */
  --p-line-hover: #919299;

  --p-radius-2: 0;
  --p-radius-3: 0;
  --p-radius-4: 0;
  --p-radius-5: 0;
  --p-radius-6: 0;
  --p-radius-sm: 0;
  --p-radius-md: 0;
  --p-radius-lg: 0;
  --p-radius-xl: 0;
  --p-radius-2xl: 0;
  --p-radius-base: 0;
  --p-radius-panel: 0;
  --p-radius-pill: 0;

  --p-duration-fast: 180ms;
  --p-duration-base: 260ms;
  --p-duration-slow: 420ms;
  --p-ease-out-quart: cubic-bezier(0.4, 0, 0.2, 1);
  --p-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-in-out-quart: cubic-bezier(0.4, 0, 0.2, 1);
  --p-ease-out-back: cubic-bezier(0.4, 0, 0.2, 1);
  --p-ease-drawer: cubic-bezier(0.16, 1, 0.3, 1);
}

:root,
[data-appearance="light"] {
  --background: #F6F6F9;
  --surface-2: #DEDFE4;

  --foreground: #101014;
  --ink-2: #595A61;
  --ink-3: #616269;
  --ink-4: #616269;

  --ring: #101014;
  --primary: #101014;
  --primary-foreground: #FDFDFE;
  --brand: #101014;
  --brand-foreground: #FDFDFE;
  --brand-hover: #25262B;
  --brand-active: #3E3F45;

  /* The promotional palette is neutralised: no colour lets a badge announce itself. */
  --price-regular: #101014;
  --price-sale: #101014;
  --price-compare: #919299;
  --savings: #616269;
  --urgency: #616269;
  --trust: #101014;
  --rating-filled: #919299;

  /* Elevation is a hairline plus a surface change. There is no shadow in this system. */
  --elevation-key: none;
  --elevation-whisper: none;
  --elevation-card: none;
  --elevation-pop: none;
  --elevation-lift: none;
  --elevation-panel: none;
  --shadow-glassbar: none;

  --surface-warm: #DEDFE4;
  --on-dark-warm: #F6F6F9;

  --border: #D1D2D8;
  --border-strong: #B4B5BC;
  --border-hover: #919299;
  --input: #B4B5BC;
  --control-fill: #DEDFE4;
  --scrim: #040406;
}

[data-appearance="dark"],
.dark {
  --background: #101014;
  --foreground: #F6F6F9;
  --ink-2: #B4B5BC;
  --ink-3: #919299;
  --ink-4: #919299;
  --primary: #F6F6F9;
  --primary-foreground: #101014;
  --brand: #F6F6F9;
  --brand-foreground: #101014;
  --ring: #F6F6F9;
  --border: #25262B;
  --border-strong: #B4B5BC;
  --elevation-key: none;
  --elevation-whisper: none;
  --elevation-card: none;
  --elevation-pop: none;
  --elevation-lift: none;
  --elevation-panel: none;
  --shadow-glassbar: none;
  --price-sale: #F6F6F9;
  --price-compare: #919299;
  --savings: #919299;
  --urgency: #919299;
  --rating-filled: #919299;
}

/* ---------- The annealing ramp ----------
   Nine steps interpolated in OKLab between ANNEAL's five named ON-LIGHT stops.
   The on-light column exists because the raw ramp was tuned for a near-black
   substrate: raw 1000 measures 1.09:1 against the glass and would be invisible. */
:root {
  --ramp-1: #988C6A;
  --ramp-2: #C57C00;
  --ramp-3: #AC471E;
  --ramp-4: #8D341B;
  --ramp-5: #70281B;
  --ramp-6: #54231C;
  --ramp-7: #3A1D1B;
  --ramp-8: #2A191A;
  --ramp-9: #1B1518;
}

/* Floods re-point at the neutral scale, not the ramp: the ramp is an index and
   a stop may never become a decorative fill. */
:root {
  --flood-100: #F6F6F9;
  --flood-200: #DEDFE4;
  --flood-300: #DEDFE4;
  --flood-400: #D1D2D8;
  --flood-500: #101014;
  --flood-100-on: #101014;
  --flood-200-on: #101014;
  --flood-300-on: #101014;
  --flood-400-on: #101014;
  --flood-500-on: #F6F6F9;

  --stage-600: #25262B;
  --stage-700: #25262B;
  --stage-800: #101014;
  --stage-900: #040406;

  --data-accent: #101014;
  --data-accent-fill: #DEDFE4;
  --data-accent-on-dark: #F6F6F9;
  --band-ink: #101014;
  --band-ink-2: #040406;
  --rule: #D1D2D8;
}

/* ---------- Polish · the details the token layer cannot reach ---------- */
:root {
  --radius: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-control: 0;
  --radius-button: 0;   /* the template's buttons are pills; this brand's are not */
  --radius-card: 0;
  --radius-chip: 0;
  --radius-panel: 0;

  /* Two shadow roles sit outside the --elevation-* set. */
  --shadow-brand: none;
  --shadow-glass-top: none;
}

.card, .ms-card, .shopcard, .panel, .ms-panel, .sk-bento > *,
.ms-topbar, .ms-header, .site-header, .ms-drawer, .ms-modal {
  box-shadow: none;
}

/* No blur. A frosted bar is a different material from a page whose product is
   photographed flat. */
.ms-topbar, .ms-header, .site-header, .ms-drawer, .ms-sticky, .is-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Display runs at 500. 600 is reserved for the mark and small emphatic labels;
   700 is absent from the web ladder entirely. */
h1, h2, h3, h4, h5, h6,
.display-xl, .display-hero, .display-lg, .display-md,
.title-2xl, .title-xl, .title-lg, .title-md, .title-sm {
  font-weight: 500;
}

/* The template runs one tracking rung across every display step. ANNEAL has a
   ladder: the tighten grows with the size. */
.display-xl, .display-hero { letter-spacing: -0.035em; }
.display-lg                { letter-spacing: -0.032em; }
.display-md                { letter-spacing: -0.03em; }
.title-2xl                 { letter-spacing: -0.026em; }
.title-xl                  { letter-spacing: -0.022em; }
.title-lg                  { letter-spacing: -0.018em; }
.title-md, .title-sm       { letter-spacing: -0.014em; }

/* Martian Mono is a data face and always runs positive. */
:root { --tracking-label: 0.14em; }

/* A visible focus ring is 2px solid at 3px offset, and the outline is never
   removed — a blurred ring on a system with no other blur reads as a mistake. */
.btn:focus-visible,
.pill:focus-visible,
.control:focus-visible,
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #101014;
  outline-offset: 3px;
  box-shadow: none;
}

[data-appearance="dark"] :focus-visible,
.dark :focus-visible,
.on-dark :focus-visible {
  outline-color: #F6F6F9;
}

/* Kept commercial devices, set in the brand's own outlined badge rather than as
   filled ink chips — ink fill belongs to the primary button, which should be the
   only filled control in view. */
.pdp-price__save,
.pack__ribbon,
.pack__save,
[data-ms-price-save] {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: 0;
}

.pdp-price__was,
.pack__was,
del {
  color: var(--price-compare);
  text-decoration-thickness: 1px;
}

/* Stars read as a measured value, never a filled gold rating. */
.stars, .stars__i, .ratingmini, .proofstars {
  color: var(--ink-2);
}

.btn--onflood {
  background: #F6F6F9;
  color: #101014;
}

/* ---------- The wordmark · an interim CSS swap ----------
   The previous brand's wordmark is an inline 13-path SVG in the header and
   footer templates. This hides those paths and paints ANNEAL's shipped artwork
   over the same box as an alpha mask.

   NOT A COMPLETE FIX: the link still carries aria-label="Cofactor Supply" and
   CSS cannot change an attribute, so a screen reader announces the wrong brand.
   That is a one-line template change; when it lands, delete this block. */
.ms-wordmark__svg > * {
  display: none;
}

.ms-wordmark__svg {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3843.01 512.00' width='3843.01' height='512.00' fill='none'%3E%3Cg fill='%23141317'%3E%3Cg transform='translate(0 512.00) scale(0.752941 -0.752941)'%3E%3Cpath transform='translate(0.000 0)' d='M554 0 496 153H186L128 0H16L278 680H409L671 0ZM321 506 220 241H462L361 506L341 572Z'/%3E%3Cpath transform='translate(698.729 0)' d='M73 0V680H190L475 236L518 156L515 680H627V0H510L226 442L182 525L185 0Z'/%3E%3Cpath transform='translate(1406.494 0)' d='M73 0V680H190L475 236L518 156L515 680H627V0H510L226 442L182 525L185 0Z'/%3E%3Cpath transform='translate(2114.259 0)' d='M73 0V680H542V590H185V396H504V307H185V90H542V0Z'/%3E%3Cpath transform='translate(2734.682 0)' d='M554 0 496 153H186L128 0H16L278 680H409L671 0ZM321 506 220 241H462L361 506L341 572Z'/%3E%3Cpath transform='translate(3433.412 0)' d='M73 0V680H185V91H514V0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3843.01 512.00' width='3843.01' height='512.00' fill='none'%3E%3Cg fill='%23141317'%3E%3Cg transform='translate(0 512.00) scale(0.752941 -0.752941)'%3E%3Cpath transform='translate(0.000 0)' d='M554 0 496 153H186L128 0H16L278 680H409L671 0ZM321 506 220 241H462L361 506L341 572Z'/%3E%3Cpath transform='translate(698.729 0)' d='M73 0V680H190L475 236L518 156L515 680H627V0H510L226 442L182 525L185 0Z'/%3E%3Cpath transform='translate(1406.494 0)' d='M73 0V680H190L475 236L518 156L515 680H627V0H510L226 442L182 525L185 0Z'/%3E%3Cpath transform='translate(2114.259 0)' d='M73 0V680H542V590H185V396H504V307H185V90H542V0Z'/%3E%3Cpath transform='translate(2734.682 0)' d='M554 0 496 153H186L128 0H16L278 680H409L671 0ZM321 506 220 241H462L361 506L341 572Z'/%3E%3Cpath transform='translate(3433.412 0)' d='M73 0V680H185V91H514V0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat left center / contain;
}

.ms-footer__mark .ms-wordmark__svg {
  opacity: 0.14;
}

/* ---------- The typographic register ----------
   The previous brand set its controls and nav in lowercase sans. ANNEAL's are both caps: a
   button label is .t-button — uppercase at +0.06em — and nav items are "letterspaced caps at
   data size", meaning the mono face, not the sans. This is the one place the reskin changes
   how a word is SHAPED rather than coloured; every other rule leaves the letterforms alone. */
.btn, .ms-btn, .pill,
button.button, input.button, a.button,
.wc-block-components-button {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ms-nav a, .ms-nav__link, .ms-header nav a {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* An eyebrow opens further than a code does — +0.22em against a code's +0.14em. Small type
   needs air, not compression. */
.ms-eyebrow, .sk-hero__eyebrow, [class*="__eyebrow"] {
  letter-spacing: 0.22em;
}