/* Engine · universal section styles.
   Header, hero, feature bar, product rail, category grid, FAQ, CTA,
   footer, cart drawer, and the sticky-chrome fixes.
 */

/* ===========================================================================
   Storefront sections — bespoke surfaces (header, hero, rails, editorial,
   FAQ, CTA, footer, side cart). Every value resolves from tokens.css; there
   is no brand literal in this file, so a primitive swap re-skins all of it.

   Type/rhythm mirrors the COFACTOR Next storefront: mono eyebrows at 0.12em,
   -0.02em display tracking, a 3-step radius rhythm, and dark used only where
   it carries the argument.
   =========================================================================== */

/* WordPress gives `main.wp-block-group` a flow block-gap, which inserted ~19px
   of canvas ABOVE and BELOW every storefront section — read as white space
   around the hero photograph. Our sections own their vertical rhythm. */
main.wp-block-group > * { margin-block: 0; }
main.wp-block-group { padding-top: 0; margin-top: 0; }

:root {
  --ms-axis: 80rem;          /* max-w-7xl */
  --ms-gutter: 1rem;
  --ms-header-h: var(--site-header-h, 4rem);
  --ms-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ms-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (min-width: 640px) { :root { --ms-gutter: 1.5rem; }}


.ms-wrap {
  box-sizing: border-box;   /* without this the gutters ADD to max-width and the page scrolls sideways */
  width: 100%;
  max-width: calc(var(--ms-axis) + var(--ms-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ms-gutter);
}
.ms-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ms-i { width: 1.25rem; height: 1.25rem; }
.ms-i--sm { width: 1rem; height: 1rem; }
.ms-i--xs { width: 0.875rem; height: 0.875rem; }

/* ---- reveal: one staggered page-load cascade, not scattered micro-motion ---
   Content is VISIBLE by default. The hidden start state is applied only when
   the `ms-js` class is present (set by an inline script before paint), so a
   JS failure, a blocked observer, or a no-JS client still renders the page
   instead of a blank canvas. The script also force-reveals after a timeout. */
/* The reveal runs as an ANIMATION, and moves with the independent `translate`
   property rather than `transform`.

   It used to be a transition on `opacity, transform`. Two silent failures came
   out of that, because `html.ms-js .ms-reveal.is-in` outranks any single-class
   component rule:
     1. `transition:` is a SHORTHAND, so it reset transition-property on every
        element carrying .ms-reveal — the category accordion's `flex-grow`
        transition was erased and the panels snapped open with no easing at all,
        and .ms-cat / .prodcard lost their hover transitions the same way.
     2. `transform: none` at the end erased any transform a component needed to
        hold (a centring translate, a decorative rotate).
   An animation touches neither `transition` nor `transform`, so components keep
   both. Keep it that way. */
.ms-reveal { opacity: 1; }
html.ms-js .ms-reveal { opacity: 0; }
html.ms-js .ms-reveal.is-in { animation: ms-reveal-in 500ms var(--ms-ease) var(--d, 0ms) both; }
@keyframes ms-reveal-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.ms-js .ms-reveal, html.ms-js .ms-reveal.is-in { opacity: 1; animation: none; translate: none; }}


/* ---- shared type ---------------------------------------------------------- */
.ms-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0;
}
.ms-eyebrow--onink { color: color-mix(in oklab, var(--p-neutral-0) 62%, transparent); }
.ms-title {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.12; color: var(--foreground); margin: 0.5rem 0 0; text-wrap: balance;
}
.ms-title--2xl { font-size: clamp(1.8rem, 3.6vw, 2.4rem); max-width: 22ch; }
.ms-muted { color: var(--ink-3); }
.ms-body { color: var(--ink-2); font-size: 1rem; line-height: 1.65; margin: 1rem 0 0; max-width: 52ch; }
.ms-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.ms-sectionhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.75rem;
}
.ms-textlink {
  display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0;
  font-size: 0.875rem; font-weight: 600; color: var(--brand); text-decoration: none;
}
.ms-textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.ms-textlink svg { transition: transform 200ms var(--ms-ease); }
.ms-textlink:hover svg { transform: translateX(3px); }

/* ---- buttons -------------------------------------------------------------- */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.625rem 1rem; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--ms-ease), box-shadow 200ms var(--ms-ease),
              transform 160ms var(--ms-ease), border-color 150ms var(--ms-ease);
}
.ms-btn:active { transform: scale(0.97); }
.ms-btn--brand { background: var(--brand); color: var(--brand-foreground); }
.ms-btn--brand:hover { background: var(--brand-hover); box-shadow: var(--shadow-brand); color: var(--brand-foreground); }
.ms-btn--ghost {
  background: color-mix(in oklab, var(--background) 72%, transparent);
  border-color: var(--border-strong); color: var(--foreground);
  backdrop-filter: blur(8px);
}
.ms-btn--ghost:hover { background: var(--background); border-color: var(--foreground); }
.ms-btn--onink {
  background: color-mix(in oklab, var(--p-neutral-0) 10%, transparent);
  border-color: color-mix(in oklab, var(--p-neutral-0) 22%, transparent);
  color: var(--p-neutral-0);
}
.ms-btn--onink:hover { background: color-mix(in oklab, var(--p-neutral-0) 18%, transparent); color: var(--p-neutral-0); }
.ms-btn--xl { padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
.ms-btn--sm { padding: 0.4375rem 0.75rem; font-size: 0.8125rem; }
.ms-btn--full { width: 100%; }

.ms-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: color-mix(in oklab, var(--background) 70%, transparent);
  backdrop-filter: blur(6px);
  padding: 0.375rem 0.875rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); box-shadow: var(--elevation-whisper);
}

/* ===========================================================================
   HEADER
   =========================================================================== */
.ms-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  transition: border-color 200ms var(--ms-ease), box-shadow 200ms var(--ms-ease);
}
/* The rule only appears once the page has moved under it — at rest the header
   should read as part of the canvas, not a bar bolted to the top of it. */
.ms-header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--elevation-whisper); }

/* announcement bar */
.ms-topbar {
  background: var(--ink-band);
  padding-block: 0.4375rem;
}
.ms-topbar__text {
  margin: 0; text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--p-neutral-0) 80%, transparent);
}
.ms-header__bar {
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--ms-header-h);
}
.ms-wordmark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--foreground); text-decoration: none; margin-right: auto;
}
.ms-wordmark__tick {
  width: 0.3125rem; height: 1.125rem; border-radius: 999px; background: var(--brand);
}
.ms-nav { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 900px) { .ms-nav { display: flex; }}

.ms-nav__link {
  position: relative; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding-block: 0.25rem; transition: color 150ms var(--ms-ease);
}
.ms-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ms-ease);
}
.ms-nav__link:hover { color: var(--foreground); }
.ms-nav__link:hover::after { transform: scaleX(1); }
.ms-nav__link.is-current { color: var(--foreground); }
.ms-nav__link.is-current::after { transform: scaleX(1); }

/* ---- shop dropdown --------------------------------------------------------
   Categories are read from the taxonomy, so the panel is correct on any brand
   without editing the nav. */
.ms-navgroup { position: relative; display: flex; align-items: center; }
.ms-navgroup .ms-nav__link { display: inline-flex; align-items: center; gap: 0.25rem; }
.ms-nav__chev { transition: transform 200ms var(--ms-ease); }
.ms-navgroup.is-open .ms-nav__chev { transform: rotate(180deg); }
.ms-megapanel {
  position: absolute; top: calc(100% + 0.75rem); left: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.98);
  transform-origin: top center;
  min-width: 22rem; padding: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--background); box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms var(--ms-ease), transform 160ms var(--ms-ease);
}
.ms-megapanel[hidden] { display: none; }
.ms-navgroup.is-open .ms-megapanel {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) { .ms-megapanel { transition: none; }}

.ms-megapanel__inner { padding: 0; max-width: none; }
.ms-megapanel__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem; }
.ms-megacat {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5625rem 0.75rem; border-radius: var(--radius-md);
  text-decoration: none; color: var(--foreground);
  transition: background-color 140ms var(--ms-ease);
}
.ms-megacat:hover { background: var(--surface-2); }
.ms-megacat__name { font-size: 0.875rem; font-weight: 500; }
.ms-megacat__n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--ink-4);
}
.ms-megapanel__all {
  display: flex; align-items: center; gap: 0.375rem; justify-content: center;
  margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
  font-size: 0.8125rem; font-weight: 600; color: var(--brand); text-decoration: none;
}
.ms-megapanel__all:hover { gap: 0.5625rem; }

.ms-header__actions { display: flex; align-items: center; gap: 0.25rem; }
.ms-iconbtn {
  position: relative; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--foreground); cursor: pointer;
  transition: background-color 150ms var(--ms-ease), transform 160ms var(--ms-ease);
}
.ms-iconbtn:hover { background: var(--surface-2); }
.ms-iconbtn:active { transform: scale(0.94); }
.ms-menu-toggle { display: grid; }
@media (min-width: 900px) { .ms-menu-toggle { display: none; }}

.ms-cart-count {
  position: absolute; top: 0.25rem; right: 0.1875rem;
  min-width: 1.0625rem; height: 1.0625rem; padding-inline: 0.25rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--brand); color: var(--brand-foreground);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--background);
}
.ms-mobilenav {
  display: flex; flex-direction: column; border-top: 1px solid var(--border);
  background: var(--background);
  max-height: calc(100dvh - var(--ms-header-h)); overflow-y: auto;
}
/* [hidden] must beat the display above, and the panel never exists on desktop */
.ms-mobilenav[hidden] { display: none; }
@media (min-width: 900px) { .ms-mobilenav { display: none; }}

.ms-mobilenav__inner { padding: 0.5rem var(--ms-gutter) 1.5rem; }
.ms-mobilenav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8125rem 0; font-size: 1rem; font-weight: 500;
  color: var(--foreground); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.ms-mobilenav__link svg { color: var(--ink-4); }
.ms-mobilenav__group {
  margin: 1.25rem 0 0.625rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.ms-mobilenav__chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.ms-mobilenav__chip {
  display: inline-flex; align-items: center;
  padding: 0.4375rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 0.8125rem; font-weight: 500; color: var(--foreground); text-decoration: none;
}
.ms-mobilenav__chip:active { transform: scale(0.97); }
.ms-mobilenav__cta { margin-top: 1.25rem; gap: 0.4375rem; }

/* ===========================================================================
   HERO — split grid, ported from the LIVE cofactorsupply.com home (which has
   diverged from the local clone's full-bleed hero).
   Measured at 1280: grid 716.8 / 563.2 = minmax(0,1fr) / 44%, height 592px.
   The left column's padding-left uses max(1.5rem, (100vw-80rem)/2 + 1.5rem) so
   the copy lands on the centred 80rem axis while the media column still bleeds
   to the right viewport edge.
   =========================================================================== */
.ms-hero { position: relative; display: grid; background: var(--background); }
@media (min-width: 1024px) {
  .ms-hero { grid-template-columns: minmax(0, 1fr) 44%; align-items: stretch; }}

.ms-hero__copy {
  width: 100%; padding: 4rem 0.75rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
@media (min-width: 640px) { .ms-hero__copy { padding-inline: 2rem; }}

@media (min-width: 1024px) {
  .ms-hero__copy {
    padding-block: 6rem;
    padding-left: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem));
    padding-right: 3.5rem;
    justify-content: center;
  }}

.ms-hero__h1 { margin: 1.25rem 0 0; color: var(--foreground); text-wrap: balance; }
/* inline, not block — forcing the accent onto its own line added two lines of
   display type and pushed the hero 110px past the reference's 592px */
.ms-hero__accent { color: var(--brand); }
.ms-hero__sub { margin: 1.25rem 0 0; max-width: 34rem; color: var(--ink-2); }
.ms-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 479px) { .ms-hero__cta { flex-direction: column; align-self: stretch; } .ms-hero__cta .btn { width: 100%; }}


.ms-hero__media {
  position: relative; overflow: hidden; background: var(--p-stage-light-2);
  min-height: 20rem; order: -1;
}
@media (min-width: 1024px) { .ms-hero__media { order: 0; min-height: 592px; }}

.ms-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center; display: block;
}

.ms-proofstrip {
  display: flex; align-items: center; gap: 1.75rem; width: fit-content;
  margin: 2.5rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in oklab, var(--border-strong) 60%, transparent);
}
@media (min-width: 640px) { .ms-proofstrip { gap: 2.5rem; }}

.ms-proofstrip dd { margin: 0; }
.ms-proofstrip__v {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.ms-proofstrip__l { display: block; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.35; color: var(--ink-2); }

/* ===========================================================================
   FEATURE BAR
   =========================================================================== */
.ms-featurebar {
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 55%, var(--background));
}
.ms-featurebar__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 0.5rem; padding-block: 2rem;
}
@media (min-width: 1024px) { .ms-featurebar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }}

.ms-feature { display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 1024px) {
  .ms-feature + .ms-feature { border-left: 1px solid color-mix(in oklab, var(--border-strong) 45%, transparent); padding-left: 1.5rem; }}

.ms-feature__chip {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg);
  background: var(--brand-muted); color: var(--brand);
}
.ms-feature__title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.ms-feature__caption { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--ink-3); }

/* ===========================================================================
   PRODUCT RAIL CARD — ported from components/commerce/product-card.tsx (the
   home rail's card, which is NOT the PLP's ShopCard):
     rounded-2xl · shadow-whisper at rest → shadow-card on hover (no lift)
     aspect-square stage on the light radial gradient
     mono category eyebrow at 0.10em · title-md (20px) name
     price font-mono 20/28 + "/ unit" caption
     TWO size-lg buttons: outline "View Details" + INK "Add to Cart",
     stacked below 640 and side-by-side (flex-1 each) above it
   =========================================================================== */
.ms-prodgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .ms-prodgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }}


.prodcard {
  display: flex; height: 100%; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background: var(--card); box-shadow: var(--elevation-whisper);
  transition: box-shadow 200ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .prodcard:hover { box-shadow: var(--elevation-card); }
  .prodcard:hover .prodcard__img { transform: scale(1.04); }
  .prodcard:hover .prodcard__name { color: var(--brand); }}

.prodcard__link { display: flex; flex: 1; flex-direction: column; text-decoration: none; outline: none; }
.prodcard__link:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent); }

.prodcard__stage {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(130% 100% at 50% 0%,
    var(--p-stage-light-1) 0%, var(--p-stage-light-2) 60%, var(--p-stage-light-3) 100%);
}
.prodcard__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 300ms var(--ease-out-quart);
}
.prodcard__body { display: flex; flex: 1; flex-direction: column; padding: 0.75rem 0.75rem 0; }
.prodcard__cat {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3);
}
.prodcard__name {
  margin-top: 0.375rem;
  font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.014em; font-weight: 600;
  color: var(--foreground); transition: color 150ms var(--ease-out-quart);
}
.prodcard__price { display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem; }
.prodcard__amount {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--foreground);
}
.prodcard__amount .woocommerce-Price-amount { color: inherit; font: inherit; }
.prodcard__unit {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3);
}
.prodcard__unavail {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.prodcard__actions { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; }
@media (min-width: 640px) {
  .prodcard__actions { flex-direction: row; }
  .prodcard__actions .btn { flex: 1; }}


/* ===========================================================================
   CATEGORY GRID
   =========================================================================== */
.ms-catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .ms-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}

@media (min-width: 1024px) { .ms-catgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }}

.ms-cat {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); box-shadow: var(--elevation-whisper); text-decoration: none;
  transition: transform 200ms var(--ms-ease), box-shadow 200ms var(--ms-ease), border-color 200ms var(--ms-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ms-cat:hover { transform: translateY(-2px); box-shadow: var(--elevation-card); border-color: color-mix(in oklab, var(--foreground) 14%, transparent); }
  .ms-cat:hover .ms-cat__chip { transform: scale(1.06); }}

.ms-cat__stage {
  display: grid; place-items: center; aspect-ratio: 5 / 4;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: radial-gradient(120% 100% at 50% 0%, var(--p-stage-light-1) 0%, var(--p-stage-light-2) 60%, var(--p-stage-light-3) 100%);
}
.ms-cat__chip {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--radius-lg); background: var(--brand-muted); color: var(--brand);
  transition: transform 200ms var(--ms-ease);
}
.ms-cat__chip svg { width: 1.5rem; height: 1.5rem; }
.ms-cat__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.25rem 0.25rem; }
.ms-cat__label { font-size: 0.9375rem; font-weight: 600; color: var(--foreground); }
.ms-cat__count {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6875rem;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}

/* ===========================================================================
   FAQ
   =========================================================================== */
/* The reference FAQ is a CENTRED max-w-3xl column with a centred header —
   not a left-aligned block inside the 80rem axis. */
.ms-faq-section {
  box-sizing: border-box; width: 100%; max-width: 48rem;
  margin-inline: auto; padding: 3.5rem 0.75rem;
}
@media (min-width: 640px) { .ms-faq-section { padding-inline: 1.5rem; }}

@media (min-width: 1024px) { .ms-faq-section { padding-block: 6rem; }}

.ms-faq-section .ms-faq__head { text-align: center; margin-bottom: 0; }
.ms-faq-section .ms-eyebrow { margin-bottom: 0.75rem; }
.ms-faq__lede { margin: 0.75rem auto 0; max-width: 28rem; color: var(--ink-2); }
.ms-faq__list { border-top: 1px solid var(--border); margin-top: 2.5rem; }
.ms-faqitem { border-bottom: 1px solid var(--border); }
.ms-faqitem summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.25rem; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 600; color: var(--foreground);
  transition: color 150ms var(--ms-ease);
}
.ms-faqitem summary::-webkit-details-marker { display: none; }
.ms-faqitem summary:hover { color: var(--brand); }
.ms-faqitem__chev { flex-shrink: 0; color: var(--ink-3); transition: transform 200ms var(--ms-ease); }
.ms-faqitem[open] .ms-faqitem__chev { transform: rotate(180deg); }
.ms-faqitem__body { padding-bottom: 1.25rem; }
.ms-faqitem__body p { margin: 0; max-width: 62ch; color: var(--ink-2); line-height: 1.65; }

/* ===========================================================================
   CLOSING CTA — the one dark band, and it carries the argument
   =========================================================================== */
.ms-cta {
  position: relative; overflow: hidden;
  display: grid; gap: 2rem; align-items: center;
  border-radius: var(--radius-3xl-plus, 1.75rem);
  background: var(--surface-ink);
  padding: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) { .ms-cta { grid-template-columns: 1.35fr 1fr; }}

.ms-cta__title {
  margin: 0.625rem 0 0; font-size: clamp(1.75rem, 3.8vw, 2.5rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.08; color: var(--p-neutral-0); text-wrap: balance;
}
.ms-cta__sub {
  margin: 0.875rem 0 0; max-width: 44ch; line-height: 1.6;
  color: color-mix(in oklab, var(--p-neutral-0) 72%, transparent);
}
.ms-cta__row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.ms-cta__media { justify-self: center; }
.ms-cta__media img { display: block; width: 100%; max-width: 20rem; height: auto; }
@media (max-width: 899px) { .ms-cta__media { display: none; }}


/* ===========================================================================
   FOOTER
   =========================================================================== */
.ms-footer {
  border-top: 1px solid var(--border);
  background: var(--ink-band);
  color: color-mix(in oklab, var(--p-neutral-0) 78%, transparent);
}
.ms-footer__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 2rem; padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) { .ms-footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }}

.ms-footer__brand { grid-column: span 2; }
@media (min-width: 900px) { .ms-footer__brand { grid-column: span 1; }}

.ms-footer__lockup { display: flex; align-items: center; gap: 0.625rem; }
.ms-footer__tick { width: 0.375rem; height: 1.25rem; border-radius: 999px; background: var(--brand); }
.ms-footer__wordmark {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--p-neutral-0); line-height: 1;
}
.ms-footer__blurb {
  margin: 1.25rem 0 0; max-width: 22rem; font-size: 0.875rem; line-height: 1.65;
  color: color-mix(in oklab, var(--p-neutral-0) 62%, transparent);
}
.ms-footer__coltitle {
  margin: 0 0 1rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in oklab, var(--p-neutral-0) 52%, transparent);
}
.ms-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.ms-footer__col a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; text-decoration: none;
  color: color-mix(in oklab, var(--p-neutral-0) 70%, transparent);
  transition: color 150ms var(--ms-ease);
}
.ms-footer__col a:hover { color: var(--p-neutral-0); }
.ms-footer__arrow { opacity: 0; transform: translateX(-4px); transition: opacity 200ms var(--ms-ease), transform 200ms var(--ms-ease); }
.ms-footer__col a:hover .ms-footer__arrow { opacity: 1; transform: none; }
.ms-footer__legal {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid color-mix(in oklab, var(--p-neutral-0) 12%, transparent);
}
.ms-footer__legal p { margin: 0; font-size: 0.75rem; line-height: 1.6; color: color-mix(in oklab, var(--p-neutral-0) 48%, transparent); }
.ms-footer__dshea { max-width: 68ch; }

/* Legal row — generated from ms_policy_docs(), so it grows a link whenever the
   brand adds a policy document. Wraps rather than scrolls: these are the links
   a regulator and a nervous customer both look for, and a link that scrolled
   out of sight on a phone would be the one they came for. */
.ms-footer__legalnav ul {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.ms-footer__legalnav a {
  font-size: 0.75rem; line-height: 1.6; text-decoration: none;
  color: color-mix(in oklab, var(--p-neutral-0) 62%, transparent);
  transition: color 160ms var(--ms-ease);
}
.ms-footer__legalnav a:hover { color: var(--p-neutral-0); text-decoration: underline; text-underline-offset: 0.2em; }

/* ===========================================================================
   SIDE CART DRAWER
   =========================================================================== */
.ms-drawer { position: fixed; inset: 0; z-index: 100; }
.ms-drawer[hidden] { display: none; }
.ms-drawer__scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--p-neutral-1000) 45%, transparent);
  opacity: 0; transition: opacity 260ms var(--ms-ease-drawer);
  backdrop-filter: blur(2px);
}
.ms-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(26.5rem, 100%);
  display: flex; flex-direction: column;
  background: var(--background); border-left: 1px solid var(--border);
  box-shadow: var(--elevation-pop);
  transform: translateX(100%);
  transition: transform 320ms var(--ms-ease-drawer);
}
.ms-drawer.is-open .ms-drawer__scrim { opacity: 1; }
.ms-drawer.is-open .ms-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ms-drawer__scrim, .ms-drawer__panel { transition: none; }}

.ms-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.ms-drawer__title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--foreground); }
.ms-drawer__title span {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.ms-drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.ms-drawer__empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 1rem; text-align: center; }
.ms-drawer__empty p { margin: 0; color: var(--ink-3); }

.ms-line { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.875rem; padding-block: 1rem; border-top: 1px solid var(--border); }
.ms-line:first-child { border-top: none; padding-top: 0; }
.ms-line__media { border-radius: var(--radius-md); overflow: hidden; background: var(--p-stage-light-2); aspect-ratio: 1; }
.ms-line__media img { width: 100%; height: 100%; object-fit: cover; }
.ms-line__name { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--foreground); line-height: 1.35; }
.ms-line__name a { color: inherit; text-decoration: none; }
.ms-line__sku {
  margin: 0.1875rem 0 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.ms-line__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.625rem; }
.ms-qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.ms-qty button {
  display: grid; place-items: center; width: 1.875rem; height: 1.875rem;
  border: none; background: transparent; color: var(--foreground); cursor: pointer;
  transition: background-color 150ms var(--ms-ease);
}
.ms-qty button:hover { background: var(--control); }
.ms-qty button svg { width: 0.875rem; height: 0.875rem; }
.ms-qty__v {
  min-width: 1.75rem; text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.8125rem;
  font-variant-numeric: tabular-nums; color: var(--foreground);
}
.ms-line__price { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground); }

.ms-drawer__foot { border-top: 1px solid var(--border); padding: 1.25rem; background: var(--surface); }
.ms-drawer__totals { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.9375rem; font-weight: 600; color: var(--foreground); }
.ms-drawer__total { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ms-drawer__note { margin: 0.375rem 0 1rem; font-size: 0.75rem; color: var(--ink-3); }
.ms-drawer__cartlink { display: block; margin-top: 0.75rem; text-align: center; font-size: 0.8125rem; color: var(--ink-2); text-decoration: none; }
.ms-drawer__cartlink:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

body.ms-locked { overflow: hidden; }

/* ---------------------------------------------------------------------------
   FREE SHIPPING PROGRESS — docked under the drawer head, above the items.

   Colour follows the palette law (palette-v2.css): blue acts, ochre measures.
   The fill is brand because the bar exists to pull the visitor toward an
   action; the money left to spend is mono ochre because it is a measured
   number. Green is NOT used at 100% — it is reserved for stock state, and an
   unlocked threshold is not a stock fact.
   --------------------------------------------------------------------------- */
.ms-ship { padding: 0.875rem 1.25rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.ms-ship[hidden] { display: none; }
.ms-ship__msg {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.4;
  color: var(--ink-2);
  /* The amount is the only part that moves. Tabular figures keep the text from
     re-flowing a pixel left and right on every quantity change. */
  font-variant-numeric: tabular-nums;
}
.ms-ship__track {
  position: relative; height: 0.375rem; overflow: hidden;
  border-radius: 999px; background: var(--control);
}
.ms-ship__fill {
  display: block; width: 0; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--p-brand-400), var(--p-brand-500));
  transition: width 420ms var(--ms-ease-drawer);
}
.ms-ship.is-done .ms-ship__msg { color: var(--foreground); font-weight: 600; }
.ms-ship.is-done .ms-ship__fill { background: var(--p-brand-500); }
@media (prefers-reduced-motion: reduce) { .ms-ship__fill { transition: none; } }

/* ---------------------------------------------------------------------------
   ORDER BUMP — one offer, between the items and the checkout button.

   THE WHOLE CARD IS THE LABEL. A 16px checkbox is a poor tap target on a
   phone, and the bump lives exactly where the thumb already is on the way to
   Checkout; making the image, the title and the price all part of the same
   control is the difference between a decoration and an offer.

   It sits OUTSIDE .ms-drawer__body on purpose: the body scrolls, and an offer
   that only exists below the fold of a long cart is not an offer.
   --------------------------------------------------------------------------- */
.ms-bump { padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface); }
.ms-bump[hidden] { display: none; }
.ms-bump[data-loading] { opacity: 0.6; pointer-events: none; }

.ms-bump__eyebrow {
  margin: 0 0 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

.ms-bump__card {
  display: block; position: relative; cursor: pointer;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color 180ms var(--ms-ease), background-color 180ms var(--ms-ease), box-shadow 180ms var(--ms-ease);
}
.ms-bump__card:hover { border-color: var(--primary); }
/* Solid border once accepted: the dashed edge is the "not yet decided" signal,
   so it must not survive the decision. */
.ms-bump.is-on .ms-bump__card {
  border-style: solid; border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 6%, var(--card));
  box-shadow: var(--elevation-whisper);
}

/* Visually replaced, never removed — a display:none input is unfocusable, and
   the keyboard path is the whole reason this is a real checkbox. */
.ms-bump__box {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.ms-bump__box:focus-visible + .ms-bump__offer { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-md); }

.ms-bump__offer { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.75rem; padding: 0.75rem; }
.ms-bump__media {
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--p-stage-light-2); aspect-ratio: 1;
}
.ms-bump__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-bump__body { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.ms-bump__title { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--foreground); }
.ms-bump__pitch {
  font-size: 0.75rem; line-height: 1.4; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-bump__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.125rem; }
.ms-bump__price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.ms-bump__was {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.ms-bump__save {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.125rem 0.375rem; border-radius: 999px;
  color: var(--data-accent);
  background: var(--data-accent-fill);
}

.ms-bump__cta {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px dashed var(--border-strong);
  font-size: 0.8125rem; font-weight: 600; color: var(--foreground);
}
.ms-bump.is-on .ms-bump__cta { border-top-style: solid; border-top-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.ms-bump__check {
  display: grid; place-items: center; flex: none;
  width: 1.125rem; height: 1.125rem;
  border: 1.5px solid var(--border-strong); border-radius: 0.25rem;
  background: var(--background); color: var(--primary-foreground);
  transition: background-color 160ms var(--ms-ease), border-color 160ms var(--ms-ease);
}
.ms-bump__check svg { width: 0.75rem; height: 0.75rem; opacity: 0; transform: scale(0.6); transition: opacity 160ms var(--ms-ease), transform 160ms var(--ms-ease); }
.ms-bump.is-on .ms-bump__check { background: var(--primary); border-color: var(--primary); }
.ms-bump.is-on .ms-bump__check svg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ms-bump__card, .ms-bump__check, .ms-bump__check svg { transition: none; }}

/* --- notify capture (founding-lot) --- */
.ms-notify__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ms-notify__input {
  flex: 1 1 14rem;
  min-width: 0;
  font-size: 1rem;              /* >=16px: below this iOS zooms the viewport */
  padding: .75rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-1);
}
.ms-notify__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ms-notify__msg { margin: .6rem 0 0; font-size: .9375rem; min-height: 1.25rem; }
[data-state="ok"]  .ms-notify__msg { color: var(--p-green-600); }
[data-state="err"] .ms-notify__msg { color: var(--p-red-500); }
.ms-notify__submit[data-loading] { opacity: .6; pointer-events: none; }

.pdp-atc--notify { display: block; }
.pdp-notify__lead { margin: 0 0 .9rem; color: var(--ink-2); text-wrap: pretty; }

.ms-notify__toast {
  position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 60;
  margin-inline: auto; max-width: 32rem;
  padding: .8rem 1rem; border-radius: var(--radius);
  background: var(--band-ink); color: var(--ink-1);
  box-shadow: var(--elevation-pop);
}
.ms-notify__toast.is-err { border-left: 3px solid var(--p-red-500); }
.ms-notify__toast.is-ok  { border-left: 3px solid var(--p-green-400); }

/* ==========================================================================
   FIXES — sticky chrome, hover bridge  (2026-08-16)
   ========================================================================== */

/* #2 STICKY HEADER, EVERY PAGE.
   `.ms-header` already declared position:sticky and it did nothing, because
   the block template wraps it in <header class="wp-block-template-part">.
   A sticky element sticks within its CONTAINING BLOCK, and that wrapper is
   only as tall as the header itself — so there was never any room to travel.
   Moving sticky up to the wrapper gives it the whole page to stick against.
   Scoped to the direct child of .wp-site-blocks so the footer part is
   untouched. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--ms-chrome-top, 0px);
  z-index: 50;
}
.ms-header { position: static; }

/* #2b THE ADMIN BAR EATS THE TOP OF THE STUCK HEADER.
   `#wpadminbar` is `position: fixed; top: 0` at z-index 99999, so a sticky
   header pinned at 0 mounts UNDERNEATH it and loses its first 32px — the
   wordmark reads as clipped and the header never looks like it lands flush.
   Only logged-in users ever see this, but the mount is wrong, not the admin
   bar. WP core publishes its own height (32px, 46px under 783px), so read that
   rather than restating it — the literal is a fallback for a WP that doesn't.
   Below 601px core switches the bar to position:absolute so it scrolls away
   with the page, and the offset has to go back to zero or the header floats
   32px clear of the top. Logged out, the property is undefined and this whole
   block resolves to the 0px it always was. */
body.admin-bar { --ms-chrome-top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 600px) { body.admin-bar { --ms-chrome-top: 0px; } }

/* #1 falls out of the above: the shop toolbar is sticky at
   top: var(--ms-header-h) and was leaving that gap empty because nothing was
   actually occupying it. With the header genuinely stuck, the toolbar now
   docks directly beneath it. */

/* #5 HOVER BRIDGE FOR THE MEGA-MENU.
   The panel sits at `top: calc(100% + 0.75rem)`, so travelling from the Shop
   link to the panel crossed 12px of dead space, left .ms-navgroup, and fired
   mouseleave. This spans the gap with an invisible bridge that only exists
   while the menu is open, so it can never block clicks when closed. */
.ms-navgroup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 24rem;
  height: 1rem;
  transform: translateX(-50%);
  display: none;
}
.ms-navgroup.is-open::after { display: block; }

/* The marquee is now the first element on the page, above the sticky header.
   Both variants: the home ticker (.ms-marquee) and the PDP one (.pdp-marquee). */
.ms-marquee,
.pdp-marquee { position: relative; z-index: 51; }