/*
Theme Name: CDG 
Theme URI: https://cdg-converse.com/
Author:  StoreKit
Description: Classic WooCommerce theme for CDG Converse
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: ndm-cdg
*/

/* ======================================================================
   PORTED VERBATIM from the Astro repo src/styles/global.css.
   The only edit is the removed @import "tailwindcss" (its output is
   assets/css/base.css). Everything after the WOOCOMMERCE SKIN banner at
   the bottom is NEW — those surfaces (cart / checkout / account / Woo
   notices) have no static counterpart and therefore no parity constraint.
   ====================================================================== */
/* ======================================================================
   CDG CONVERSE — SKIN. Concept A · ASTERISK (accepted 2026-07-26).
   The store set as a fashion house's line sheet: paper ground, plates
   BRIGHTER than the page, hairline rules, a webfont-free system
   neo-grotesque held at an 11px caps chrome scale, one PLAY-heart red
   accent, zero radius / zero shadow, hard-cut hover. Every entry carries
   an asterisk; addressing one writes its footnote into the pinned line.

   This file styles the CHASSIS class names (the frozen route files emit
   .chead/.rail/.pdp/.specs/.bcard… and cannot be renamed), mapped onto
   the ASTERISK visual system from mockups/concept-a/style.css.
   ====================================================================== */
/* (Tailwind preflight lives in assets/css/base.css — enqueued before this file) */

/* ---- design tokens (from mockups/concept-a/style.css) ---- */
:root {
  --color-bg: #F2F1ED;        /* paper */
  --color-surface: #FFFFFF;   /* plate — the photograph's own ground, brighter than paper */
  --color-ink: #111111;
  --color-muted: #5E5B55;
  --color-accent: #C81E24;    /* the PLAY heart, sampled from the catalog photos */
  --color-sale: #C81E24;
  --color-danger: #C81E24;
  --color-rule: #C9C6BE;
  --color-rule-strong: #8C877D;
  --color-line-2: #C9C6BE;

  /* type — no webfont; the wordmark asset carries identity */
  --font-ui: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-body: var(--font-ui);
  --font-display: "Helvetica Neue", "Arial Black", Helvetica, Arial, sans-serif;

  --text-micro: 0.6875rem;  /* 11px — the chrome scale */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-md: 1.375rem;
  --text-lg: 1.375rem;
  --text-xl: 1.8125rem;
  --text-2xl: 2.375rem;
  --text-3xl: 3.125rem;
  --text-display: clamp(1.8125rem, 7.4vw, 4.125rem);

  --lh-tight: 1.08;
  --lh-snug: 1.24;
  --lh-body: 1.62;
  --ls-caps: 0.1em;
  --ls-tight: -0.02em;
  --measure: 68ch;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 48px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --radius-none: 0px; --radius-sm: 2px; --radius-1: 0px; --radius-2: 0px;
  --border-hair: 1px solid var(--color-rule);
  --border-ink: 1px solid var(--color-ink);

  --dur-fast: 90ms; --dur-base: 160ms; --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-cut: steps(1, end);

  --gutter: clamp(16px, 4vw, 56px);
  --mast-h: 58px;
}
/* @contrast --color-ink --color-bg body */
/* @contrast --color-muted --color-bg body */
/* @contrast --color-accent --color-bg body */
/* @contrast --color-ink --color-surface body */
/* @contrast --color-muted --color-surface body */
/* @contrast --color-bg --color-ink body */
/* @contrast --color-surface --color-ink body */
/* @contrast --color-accent --color-surface body */

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { border-bottom: var(--border-ink); }

.skip {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 200;
  transform: translateY(-200%);
  background: var(--color-ink); color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
}
.skip:focus { transform: translateY(0); }

/* the recurring micro-caps chrome voice */
.mono-lbl, .kick, .qstrip__lbl, .rail__h, .lbl, .tile__count, .hero__k,
.gtool__count, .sortwrap, .sku, .card__tag, .ndm-pa-label {
  font-size: var(--text-micro); line-height: 1.4;
  text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
}
.ast { color: var(--color-accent); font-weight: 700; }

/* ============================================================
   ANNOUNCEMENT RULE
   ============================================================ */
.ann { background: var(--color-ink); color: var(--color-bg); }
.ann[hidden] { display: none; }
.ann__in { display: flex; align-items: center; gap: var(--space-4); min-height: 34px; padding-block: var(--space-2); }
.ann__in span:first-child {
  flex: 1 1 auto; font-size: var(--text-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
}
.ann__x { flex: none; background: none; border: 0; color: inherit; cursor: pointer; width: 44px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.ann__x svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.ann__x:hover { color: var(--color-accent); }

/* ============================================================
   MASTHEAD — a ruled block. Sticky, but drawn as a rule not a bar.
   ============================================================ */
.hd { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: var(--border-ink); }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--mast-h); padding-block: var(--space-3); }
.hd__left { flex: 1; }
.hd__right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.hd__shop { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.hd__shop:hover { color: var(--color-accent); }

.logo { display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: var(--text-md); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.logo b { color: var(--color-accent); }
.logo img { width: clamp(160px, 28vw, 280px); height: auto; }

.menu-trigger, .icon-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding-inline: var(--space-2);
  background: none; border: 0; cursor: pointer;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
}
.menu-trigger svg, .icon-btn svg { width: 18px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.menu-trigger:hover, .icon-btn:hover { color: var(--color-accent); }

/* contents rule — the category quick-link strip */
.qstrip { border-bottom: var(--border-ink); background: var(--color-bg); }
.qstrip__in { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.qstrip__in::-webkit-scrollbar { display: none; }
.qstrip__lbl { flex: none; display: inline-flex; align-items: center; padding: var(--space-4) var(--space-4) var(--space-4) 0; color: var(--color-muted); white-space: nowrap; }
.qstrip a {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); border-left: var(--border-hair); white-space: nowrap; min-height: 44px;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
}
.qstrip a:hover { color: var(--color-accent); background: var(--color-surface); }
.qstrip a[aria-current="page"] { color: var(--color-accent); }

/* overlay menu — the masthead's collapsible nav panel */
.mm { position: fixed; inset: 0; z-index: 120; background: var(--color-bg); padding: var(--space-4) var(--gutter) var(--space-12); overflow-y: auto; }
.mm[hidden] { display: none; }
.mm__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--mast-h); border-bottom: var(--border-ink); }
.mm__nav { display: grid; gap: var(--space-1); margin-top: var(--space-6); }
.mm__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-2); min-height: 44px;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
}
.mm__nav a span { color: var(--color-muted); font-weight: 400; }
.mm__nav a:hover { color: var(--color-accent); }
.mm__foot { margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--border-hair); color: var(--color-muted); font-size: var(--text-sm); }

/* mobile thumb bar */
.thumbbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: flex; background: var(--color-bg); border-top: var(--border-ink); }
.thumbbar a, .thumbbar button {
  flex: 1; display: grid; place-items: center; gap: 3px; padding-block: var(--space-2);
  background: none; border: 0; cursor: pointer;
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
}
.thumbbar a + a, .thumbbar button { border-left: var(--border-hair); }
.thumbbar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.thumbbar a:hover, .thumbbar button:hover { color: var(--color-accent); }
@media (min-width: 768px) { .thumbbar { display: none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: var(--space-3) var(--space-6);
  border: var(--border-ink); background: var(--color-bg); color: var(--color-ink);
  cursor: pointer; border-radius: var(--radius-none);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-ink); color: var(--color-bg); }
.btn--primary { background: var(--color-ink); color: var(--color-bg); }
.btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
.btn--ghost { border-color: transparent; padding-inline: 0; background: none; }
.btn--ghost:hover { background: none; color: var(--color-accent); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { color: var(--color-rule-strong); border-color: var(--color-rule); background: var(--color-bg); cursor: not-allowed; }
.btn-link { border-bottom: 1px solid var(--color-ink); }
.btn-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ============================================================
   FORMS
   ============================================================ */
.form { display: grid; gap: var(--space-4); max-width: 520px; }
.field { display: grid; gap: var(--space-1); }
.field label { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; color: var(--color-muted); }
.field input, .field textarea { padding: var(--space-3); border: var(--border-hair); border-radius: var(--radius-none); background: var(--color-surface); font: inherit; }
.field input:focus, .field textarea:focus { border-color: var(--color-ink); outline: none; }
.field textarea { min-height: 150px; resize: vertical; }
.formmsg { display: none; }
.formmsg.is-on { display: block; }
.formmsg--ok { color: var(--color-ink); }
.formmsg--err { color: var(--color-danger); }
.form__fallback { color: var(--color-muted); font-size: var(--text-sm); }
.form__fallback a { border-bottom: 1px solid var(--color-rule); }
.form__fallback a:hover { color: var(--color-accent); }

/* ============================================================
   HERO (home head) + 404
   ============================================================ */
.hero { border-bottom: var(--border-ink); padding-block: var(--space-8) var(--space-10); }
.hero__k { color: var(--color-muted); margin-bottom: var(--space-4); }
.hero-copy h1, .hero-copy .h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  text-transform: uppercase; text-wrap: balance; margin: 0;
}
.hero-copy p { max-width: var(--measure); color: var(--color-muted); margin-top: var(--space-4); }
.hero-copy strong { color: var(--color-ink); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__plate { margin-top: var(--space-8); border: var(--border-hair); background: var(--color-surface); aspect-ratio: 878 / 585; overflow: hidden; }
.hero__plate img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "k plate" "copy plate" "cta plate" "usp usp"; column-gap: var(--space-12); align-items: start; }
  .hero__k { grid-area: k; } .hero-copy { grid-area: copy; } .hero__cta { grid-area: cta; align-self: start; }
  /* align-self:start (not stretch): the plate keeps its 878/585 ratio.
     Stretching it across the tall copy column let aspect-ratio derive a
     huge width from the stretched height, overflowing the page. */
  .hero__plate { grid-area: plate; margin-top: 0; align-self: start; }
  .usp-line { grid-area: usp; }
}
.sheet { position: relative; }

/* terms rule — the USP strip */
.usp-line { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--border-hair); margin-top: var(--space-8); }
.usp-line > div { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--border-hair); }
.usp-line > div:nth-child(even) { padding-left: var(--space-4); border-left: var(--border-hair); }
.usp-line b { display: block; color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; margin-bottom: var(--space-1); }
.usp-line span { display: block; font-size: var(--text-sm); line-height: var(--lh-snug); font-weight: 700; }
@media (min-width: 768px) {
  .usp-line { grid-template-columns: repeat(4, 1fr); }
  .usp-line > div { border-bottom: 0; padding-left: var(--space-4); border-left: var(--border-hair); }
  .usp-line > div:first-child { padding-left: 0; border-left: 0; }
}

/* ============================================================
   SECTION HEADS (home) — index.astro's rebuilt sections
   ============================================================ */
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6) var(--space-4); }
.sechead h2, .about h2, .home-body h2, .prose h2 {
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg);
  line-height: var(--lh-snug); letter-spacing: 0.02em; text-transform: uppercase;
}
.sechead .sec__note { color: var(--color-muted); white-space: nowrap; font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }

/* ============================================================
   THE SHEET — line-sheet lattice of ProductCards (home + grids)
   ============================================================ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--border-hair); border-left: var(--border-hair);
}
@media (min-width: 768px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pgrid, .pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ProductCard = an entry on the sheet. No card chrome, hairline cell. */
.card {
  position: relative; display: flex; flex-direction: column;
  border-right: var(--border-hair); border-bottom: var(--border-hair);
  background: var(--color-bg);
}
.card:hover, .card:focus-within { background: var(--color-surface); }
.card__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface); overflow: hidden; }
.card__tag { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; color: var(--color-muted); }
.card__badge { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 3; background: var(--color-ink); color: var(--color-bg); padding: 2px var(--space-2); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.card__tag + .card__badge { top: calc(var(--space-2) + 22px); }
.card__ast { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; font-size: var(--text-sm); line-height: 1; font-weight: 700; color: var(--color-rule-strong); }
.card:hover .card__ast, .card:focus-within .card__ast { color: var(--color-accent); }
.pi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pi-1 { opacity: 1; }
.pi-2 { opacity: 0; transition: opacity var(--dur-fast) var(--ease-cut); }
.card:hover .pi-2, .card:focus-within .pi-2 { opacity: 1; }
.card__noimg { position: absolute; inset: var(--space-4); border: 1px dashed var(--color-rule); display: grid; place-content: center; text-align: center; color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.card__b { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-4); }
.card__title { font-size: var(--text-sm); line-height: var(--lh-snug); font-weight: 400; font-family: var(--font-ui); }
.card:hover .card__title { text-decoration: underline; text-underline-offset: 2px; }
.card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); }
.price { font-size: var(--text-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.price del { color: var(--color-muted); font-weight: 400; margin-right: var(--space-2); }
.price ins { color: var(--color-sale); text-decoration: none; }
.sku { color: var(--color-muted); }

/* home samples drop the per-card line tag (redundant on the home sheet and
   under each line's own heading); any sold-out badge stays pinned top-left. */
.sheet .card__tag, .catrow .card__tag { display: none; }
.sheet .card__badge, .catrow .card__badge { top: var(--space-2); }

/* ============================================================
   BY THE LINE — per-category teasers (.catrow), home only.
   Each line: a ruled head (name · count · plate) over a 4-up
   sample of its entries, then a "view all" footnote link.
   ============================================================ */
.catrow { border-top: var(--border-hair); }
.catrow:first-of-type { border-top: 0; }
.catrow__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-8) var(--space-4); }
.catrow__id { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.catrow__title { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); line-height: var(--lh-snug); letter-spacing: 0.02em; text-transform: uppercase; }
.catrow__title a:hover { color: var(--color-accent); }
.catrow__count { color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.catrow__cta { flex: none; min-height: 44px; }
.catrow__arw { transition: transform var(--dur-fast) var(--ease-out); }
.catrow__cta:hover .catrow__arw { transform: translateX(3px); }
.catrow__foot { padding-block: var(--space-4) var(--space-8); }
.catrow__all { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }

/* ============================================================
   LISTING CHROME (shop / category) — frozen route markup
   ============================================================ */
.chead { padding-block: var(--space-8) var(--space-6); border-bottom: var(--border-hair); }
.chead h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase; margin: 0 0 var(--space-2); }
.chead .kick { color: var(--color-muted); margin: 0; }
.gtool { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-4); }
.gtool__count { color: var(--color-muted); }
.sortwrap { display: flex; align-items: center; gap: var(--space-2); }
.shell { display: grid; gap: var(--space-6); padding-block: var(--space-4) var(--space-12); }
@media (min-width: 1024px) { .shell { grid-template-columns: 232px 1fr; gap: var(--space-10); } }
.rail { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 1024px) { .rail { position: sticky; top: calc(var(--mast-h) + var(--space-3)); } }
.rail__box { border: var(--border-hair); background: var(--color-surface); padding: var(--space-4); }
.rail__h { color: var(--color-muted); margin: 0 0 var(--space-3); display: block; }
.rail__nav { display: grid; gap: 0; }
.rail__nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); min-height: 40px; border-top: var(--border-hair); color: var(--color-muted); font-size: var(--text-sm); }
.rail__nav a:first-child { border-top: 0; }
.rail__nav a:hover { color: var(--color-accent); }
.rail__nav a[aria-current="page"] { color: var(--color-ink); font-weight: 700; }
.rail__note { color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; margin-top: var(--space-3); }

/* STORE OVERRIDE (deviates from the static build): the category intro and
   the homepage ABOUT block run FULL WIDTH and centred, instead of the
   68ch (--measure) column the static CSS pins to the left. On a 1265px
   viewport the intro was 643px hard against the left edge with ~520px of
   dead space beside a 1163px product grid. Mirror this into the Astro
   repo's src/styles/global.css if the static site is rebuilt, or the two
   platforms will not look alike. */
.catintro { margin-inline: auto; margin-top: var(--space-10); display: grid; gap: var(--space-4); color: var(--color-muted); }
.catintro h1, .catintro h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; color: var(--color-ink); }
.catintro a { color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.catintro a:hover { color: var(--color-accent); }

.sibs { margin-block: var(--space-6); }
.sibs__lbl { color: var(--color-muted); }
.sibs__in { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.sibs a { border-bottom: 1px solid var(--color-rule); }
.sibs a:hover { color: var(--color-accent); }

/* ============================================================
   PDP — frozen [slug].astro markup
   ============================================================ */
.pdp { display: grid; gap: var(--space-8); padding-block: var(--space-6) var(--space-12); }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: var(--space-12); } }
.pdp__buy { display: grid; gap: var(--space-5); align-content: start; }
.pdp__cat { color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.pdp__buy h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.pdp__price { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.pdp__price del { font-size: var(--text-lg); color: var(--color-muted); text-decoration: line-through; font-weight: 400; }
.pdp__price ins { color: var(--color-sale); text-decoration: none; }
.pdp__short { max-width: var(--measure); color: var(--color-muted); }
.pdp__desc { display: grid; gap: var(--space-4); border-top: var(--border-hair); padding-top: var(--space-6); }
.pdp__desc h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.02em; }
.pdp__desc p { color: var(--color-muted); max-width: var(--measure); }
.pdp__desc a { color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.pdp__desc a:hover { color: var(--color-accent); }

.pdp__card { display: grid; gap: var(--space-5); }
.buybox { display: grid; gap: var(--space-3); border-top: var(--border-hair); padding-top: var(--space-4); }
.buybox__hint { color: var(--color-muted); min-height: 2.6em; }
.trust { display: grid; gap: var(--space-2); border-top: var(--border-hair); padding-top: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; }

/* add-ons contract markup — byte-exact class hooks */
.ndm-pa { display: grid; gap: var(--space-3); }
.ndm-pa-label { color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  min-width: 52px; min-height: 46px; padding-inline: var(--space-3);
  background: var(--color-bg); border: var(--border-hair); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink); background: var(--color-surface); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }
.chip[disabled] { color: var(--color-rule-strong); border-color: var(--color-rule); cursor: not-allowed; text-decoration: line-through; }

/* PDP specs — a <dl> of WRAPPED div>dt+dd pairs (chassis emits stacked pairs) */
.specs { border-top: var(--border-hair); display: grid; grid-template-columns: 1fr; margin-block: var(--space-4); }
.specs div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-hair); }
.specs dt { color: var(--color-muted); font-size: var(--text-sm); }
.specs dd { margin: 0; font-size: var(--text-sm); font-weight: 700; text-align: right; }

.acc details { border-top: var(--border-hair); }
.acc summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); cursor: pointer; list-style: none; font-weight: 700; min-height: 44px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; flex: none; color: var(--color-accent); font-size: var(--text-lg); line-height: 1; }
.acc details[open] > summary::after { content: "\2212"; }
.acc summary:hover { color: var(--color-accent); }
.acc p { padding-bottom: var(--space-5); max-width: var(--measure); color: var(--color-muted); }

/* PDP gallery */
.gal { display: grid; gap: var(--space-3); }
.gal__main { background: var(--color-surface); border: var(--border-hair); aspect-ratio: 1 / 1; overflow: hidden; }
.gal__main img { width: 100%; height: 100%; object-fit: contain; }
.gal__noimg { display: grid; place-content: center; aspect-ratio: 1 / 1; border: 1px dashed var(--color-rule); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.gal__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gal__thumb { width: 72px; height: 72px; flex: none; padding: 0; background: var(--color-surface); border: var(--border-hair); cursor: pointer; overflow: hidden; }
.gal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gal__thumb:hover { border-color: var(--color-rule-strong); }
.gal__thumb[aria-current="true"] { border: var(--border-ink); }

/* ============================================================
   PROSE / STATIC PAGES / FAQ / SIZE-GUIDE TABLES
   ============================================================ */
/* STORE OVERRIDE (deviates from the static build): ALL long-form store
   copy — the homepage deferred body, the category intros AND the imported
   static pages — runs FULL WIDTH of its page container and is centred by
   .wrap, instead of the 68ch (--measure) column the static CSS uses.
   One rule now covers every prose surface, so the earlier per-block
   overrides are gone. Mirror into the Astro repo's src/styles/global.css
   if the static site is ever rebuilt, or the two platforms diverge. */
.prose { max-width: none; padding-block: var(--space-8) var(--space-12); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.prose h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: var(--ls-tight); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { font-size: var(--text-base); }
.prose p, .prose li { color: var(--color-muted); }
.prose a { color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.prose a:hover { color: var(--color-accent); }
.prose ul, .prose ol { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: revert; }
.prose details { border-bottom: var(--border-hair); }
.prose summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); cursor: pointer; list-style: none; font-weight: 700; color: var(--color-ink); }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; flex: none; color: var(--color-accent); font-size: var(--text-lg); line-height: 1; }
.prose details[open] > summary::after { content: "\2212"; }
/* TABLES.
   The imported charts ship as BARE <table> elements. The old guard put
   `display:block; overflow-x:auto` on the table itself — that does make it
   scrollable, but a block-level table no longer fills its box: the border
   stretched to the container while the cells shrank to their content,
   leaving a dead gap on the right (visible on /size-guide/).
   Now the table stays a real table and FILLS its container, and the
   scrolling moves to a .table-scroll wrapper injected at render time by
   ndm_wrap_tables() in functions.php. */
.prose .table-scroll { max-width: 100%; overflow-x: auto; }
.prose table {
  display: table; width: 100%; table-layout: auto;
  border-collapse: collapse; border: var(--border-hair); font-size: var(--text-sm);
}
/* /size-guide/ carries three 6-to-8 column charts. Give those a floor so
   they scroll inside the wrapper instead of crushing to unreadable columns
   on a phone; the 3-column charts have no floor and simply fill. */
.prose table:has(thead th:nth-child(5)) { min-width: 40rem; }
.prose thead th { background: var(--color-surface); text-align: left; font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-muted); }
.prose th, .prose td { border: var(--border-hair); padding: var(--space-2) var(--space-3); color: var(--color-ink); }
.prose td { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.prose figure { overflow-x: auto; }

/* The ABOUT block's element is `<div class="wrap about">`, so it must NOT
   declare max-width at all — `none` would override .wrap's 1440px page cap
   and let it run to the raw viewport edge. Dropping the --measure cap lets
   .wrap govern, which aligns it exactly with the product grid. */
.about { padding-block: var(--space-8) var(--space-10); display: grid; gap: var(--space-4); }
.about p { color: var(--color-muted); }
.about p:first-of-type { color: var(--color-ink); font-size: var(--text-lg); line-height: 1.42; }
.home-body { padding-block: var(--space-8) var(--space-12); }
.autolink { border-bottom: 1px solid var(--color-rule); }
.autolink:hover { color: var(--color-accent); }

/* ============================================================
   FOOTER — REBUILT to a sewn-in label panel (see Footer.astro).
   Structural break from the chassis .ft__cols column footer.
   ============================================================ */
.foot { border-top: var(--border-ink); padding-block: var(--space-10) var(--space-16); }
/* STORE OVERRIDE (deviates from the static build): the footer label panel
   spans the SAME width as the page content above it. The static design caps
   it at 52ch and centres it, which left a narrow white box floating inside
   a full-width footer once the content above went full width. `.label` sits
   inside footer > .wrap, so dropping the cap makes it match the content
   container exactly. The brand mark stays centred; the label rows keep
   their natural left alignment. */
.label { border: var(--border-ink); max-width: none; padding: var(--space-5); display: grid; gap: var(--space-3); background: var(--color-surface); margin-inline: auto; }
.label__brand { display: flex; align-items: baseline; gap: var(--space-3); justify-content: center; }
.label__brand .logo { font-size: var(--text-md); }
.label__row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.label__k { flex: none; color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.label__row a { min-height: 24px; display: inline-block; }
.label__row a:hover { color: var(--color-accent); }
.label__sep { color: var(--color-rule-strong); }
.label__rule { border-top: var(--border-hair); }
.label__pay { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.label__pay span { border: var(--border-hair); padding: var(--space-1) var(--space-2); color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.label__origin { color: var(--color-muted); line-height: 1.6; font-size: var(--text-sm); }
.label__origin a { border-bottom: 1px solid var(--color-rule); }
.label__origin a:hover { color: var(--color-accent); }
.label__social { display: flex; gap: var(--space-2); }
.label__social a { display: inline-flex; }
.label__social svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.label__social a:hover { color: var(--color-accent); }
.disc { color: var(--color-muted); }

/* ============================================================
   BREADCRUMBS / PAGINATION
   ============================================================ */
/* BREADCRUMBS.
   Desktop: one line. The separators already carry &nbsp; either side, so the
   flex gap is 0 — with both, the trail was double-spaced and loose. If a
   very long product title ever exceeds the width it scrolls rather than
   wrapping into a second row that shoves the gallery down.
   Mobile: the full trail is noise — the page's own <h1> is directly beneath
   it. Below 768px only the PARENT link survives, as a back control
   ("‹ CDG CONVERSE"), at a 44px tap target. `a:last-of-type` is exactly
   that parent, because the current page is rendered as a <span>. */
.crumb {
  display: flex; align-items: center; gap: 0;
  padding-block: var(--space-3);
  border-bottom: var(--border-hair);
  color: var(--color-muted);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.crumb::-webkit-scrollbar { display: none; }
.crumb a { display: inline-flex; align-items: center; min-height: 32px; }
.crumb a:hover { color: var(--color-accent); }
.crumb [aria-current="page"] { color: var(--color-ink); }
.crumb > span[aria-hidden="true"] { color: var(--color-rule-strong); }

@media (max-width: 767px) {
  .crumb { gap: var(--space-2); }
  /* must match `.crumb a` on specificity (0,1,1) to beat it — `.crumb > *`
     is only (0,1,0) and loses, leaving Home visible next to the parent */
  .crumb > a, .crumb > span { display: none; }
  .crumb > a:last-of-type {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; color: var(--color-ink);
  }
  .crumb > a:last-of-type::before {
    content: "\2039"; color: var(--color-accent);
    font-size: var(--text-lg); line-height: 1;
  }
  .crumb > a:last-of-type:hover { color: var(--color-accent); }
}

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-8); }
.pager a, .pager .is-disabled { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-3); border: var(--border-hair); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; font-variant-numeric: tabular-nums; }
.pager a:hover { border-color: var(--color-ink); }
.pager a[aria-current="page"] { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.pager .is-disabled { color: var(--color-rule-strong); border-color: var(--color-rule); pointer-events: none; }
.pager .gap { border: 0; min-width: auto; color: var(--color-muted); }

/* ============================================================
   BLOG
   ============================================================ */
.bloglist { display: grid; gap: 0; border-top: var(--border-hair); border-left: var(--border-hair); grid-template-columns: 1fr; }
@media (min-width: 640px) { .bloglist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bloglist { grid-template-columns: repeat(3, 1fr); } }
.bcard { display: flex; flex-direction: column; border-right: var(--border-hair); border-bottom: var(--border-hair); background: var(--color-bg); }
.bcard:hover { background: var(--color-surface); }
.bcard__img { aspect-ratio: 16 / 10; background: var(--color-surface); overflow: hidden; }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; }
.bcard__b { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-4); }
.bcard__date { color: var(--color-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }
.bcard__t { font-size: var(--text-base); font-weight: 700; }
.bcard__d { color: var(--color-muted); font-size: var(--text-sm); }
.blog-empty { color: var(--color-muted); padding-block: var(--space-8); }
.post { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-12); max-width: 820px; margin-inline: auto; }
.post__hero { aspect-ratio: 16 / 9; background: var(--color-surface); border: var(--border-hair); overflow: hidden; }
.post__hero img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   SITEMAP
   ============================================================ */
.sitemap-cols { display: grid; gap: var(--space-8); padding-block: var(--space-8) var(--space-12); grid-template-columns: 1fr; }
@media (min-width: 768px) { .sitemap-cols { grid-template-columns: repeat(3, 1fr); } }
.sitemap-cols a { color: var(--color-muted); }
.sitemap-cols a:hover { color: var(--color-accent); }

/* ============================================================
   MOTION — the sheet doesn't move; reveals are opt-in and gentle
   ============================================================ */
.rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 768px) {
  :root { --mast-h: 66px; }
}

/* ======================================================================
   WOOCOMMERCE SKIN — NEW (no static counterpart, no parity constraint).
   Cart / checkout / my-account / Woo notices, dressed in the ASTERISK
   system: paper ground, brighter plates, hairline rules, zero radius,
   the 11px caps chrome voice, one PLAY-heart red accent.
   Pure CSS by design — the only Woo template overrides this theme ships
   are archive-product.php / single-product.php (layout, not commerce).
   ====================================================================== */

/* --- accessible hiding ------------------------------------------------
   WordPress core and WooCommerce both emit .screen-reader-text (the cart's
   "…quantity" label, search-form labels, skip links). The rule that hides it
   normally arrives in woocommerce-general.css / a theme's own reset — and
   this theme drops Woo's stylesheets, so WITHOUT this block that text renders
   visibly on every commerce page. Caught in the mobile cart audit. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  position: static !important;
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 700;
}

/* --- shared page shell for the commerce pages ------------------------ */
.commerce { padding-block: var(--space-8) var(--space-16); display: grid; gap: var(--space-6); }
.commerce h1, .page-head h1 {
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase;
}
.page-head { padding-block: var(--space-8) var(--space-6); border-bottom: var(--border-hair); }

/* --- Woo notices ----------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
/* A status notice is a MESSAGE + an ACTION on one line: text left, button
   hard right, a 3px accent rule marking it as a status. Woo emits the
   action <a class="button"> BEFORE the message text, so the button is
   ordered last (bare text runs become anonymous flex items at order 0).
   Grid stacking put the button on its own line hugging the left edge with
   a dead gap beside it. */
.woocommerce-message, .woocommerce-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  border: var(--border-ink); border-left: 3px solid var(--color-accent);
  background: var(--color-surface); color: var(--color-ink);
  padding: var(--space-4); margin-block: var(--space-4);
  font-size: var(--text-sm); list-style: none;
}
.woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; flex: none; min-height: 44px; }

.woocommerce-error, .wc-block-components-notice-banner {
  display: grid; gap: var(--space-2);
  border: var(--border-ink); border-left: 3px solid var(--color-danger);
  background: var(--color-surface); color: var(--color-danger);
  padding: var(--space-4); margin-block: var(--space-4);
  font-size: var(--text-sm); list-style: none;
}
/* underline the links in the copy, never the action button */
.woocommerce-error a:not(.button),
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button) { border-bottom: 1px solid currentColor; }

@media (max-width: 767px) {
  .woocommerce-message .button, .woocommerce-info .button { width: 100%; margin-left: 0; }
}

/* --- Woo buttons inherit the .btn language --------------------------- */
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #respond input#submit, .commerce .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: var(--space-3) var(--space-6);
  border: var(--border-ink); background: var(--color-ink); color: var(--color-bg);
  border-radius: var(--radius-none); cursor: pointer;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .commerce .button:hover {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface);
}
.woocommerce button.button:disabled, .woocommerce a.button.disabled, .woocommerce button.button[disabled] {
  background: var(--color-bg); color: var(--color-rule-strong); border-color: var(--color-rule); cursor: not-allowed;
}
.woocommerce a.button.wc-backward, .woocommerce button.button[name="update_cart"] {
  background: var(--color-bg); color: var(--color-ink);
}

/* --- Woo form fields ------------------------------------------------- */
.woocommerce form .form-row { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.woocommerce form .form-row label, .woocommerce-billing-fields label, .commerce label {
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 700; color: var(--color-muted);
}
.woocommerce form .form-row .required { color: var(--color-accent); text-decoration: none; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single,
.commerce input[type="text"], .commerce input[type="email"], .commerce input[type="password"],
.commerce input[type="tel"], .commerce input[type="number"], .commerce select, .commerce textarea {
  width: 100%; padding: var(--space-3); border: var(--border-hair); border-radius: var(--radius-none);
  background: var(--color-surface); font: inherit; color: var(--color-ink); min-height: 46px;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus, .commerce input:focus, .commerce select:focus, .commerce textarea:focus {
  border-color: var(--color-ink); outline: none;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--color-danger); }
.woocommerce .select2-container .select2-selection--single { height: auto; display: flex; align-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
.woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: var(--space-2); }

/* --- Cart table ------------------------------------------------------ */
.woocommerce table.shop_table {
  width: 100%; border: var(--border-hair); border-collapse: collapse;
  border-radius: var(--radius-none); background: var(--color-surface); margin-bottom: var(--space-6);
}
/* ONE border edge for the whole table.
   Every rule is a border-TOP on the cell. Mixing edges (a heavy
   border-bottom on <th>, a hairline border-top on <td>) makes the totals
   rows — where the label is a <th> and the figure is a <td> — draw their
   rules on opposite edges of the same row, so the lines stagger across the
   column boundary. Header row is the one heavy rule; it sets border-BOTTOM
   and suppresses the top rule on the row beneath it via the shared model. */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--space-3);
  border-top: var(--border-hair);
  border-bottom: 0;
  vertical-align: top;
}
.woocommerce table.shop_table th {
  text-align: left;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 700; color: var(--color-muted);
}
.woocommerce table.shop_table td { font-size: var(--text-sm); }
/* the header rule, and only it, is the heavy one */
.woocommerce table.shop_table thead th { border-top: 0; border-bottom: var(--border-ink); }
.woocommerce table.shop_table thead + tbody > tr:first-child > th,
.woocommerce table.shop_table thead + tbody > tr:first-child > td { border-top: 0; }
/* the totals block reads as one unit: its figures stay right-aligned with
   the header's SUBTOTAL column and share the row's single rule */
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tr.cart-subtotal th, .woocommerce table.shop_table tr.cart-subtotal td,
.woocommerce table.shop_table tr.order-total th, .woocommerce table.shop_table tr.order-total td {
  vertical-align: middle;
}
.woocommerce table.shop_table tr.order-total th,
.woocommerce table.shop_table tr.order-total td { border-top: var(--border-ink); font-weight: 700; color: var(--color-ink); }
.woocommerce table.shop_table tr.order-total td { font-size: var(--text-base); }
.woocommerce table.shop_table td.product-thumbnail img { width: 72px; height: 72px; object-fit: contain; background: var(--color-surface); border: var(--border-hair); }
/* product titles in the cart carry no underline — they read as headings,
   not as inline links in a sentence */
.woocommerce table.cart td.product-name a { border-bottom: 0; text-decoration: none; }
.woocommerce table.cart td.product-name a:hover { color: var(--color-accent); }
.woocommerce .product-price, .woocommerce .product-subtotal, .woocommerce .product-total { font-variant-numeric: tabular-nums; font-weight: 700; }
.woocommerce a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: var(--border-hair); color: var(--color-muted);
  font-size: var(--text-sm); line-height: 1; text-decoration: none;
}
.woocommerce a.remove:hover { color: var(--color-surface); background: var(--color-accent); border-color: var(--color-accent); }
/* --- NO QUANTITY UI (store decision) ---------------------------------
   The product page ships no quantity field at all (Woo defaults the
   add-to-cart request to 1) and the cart's quantity control is removed:
   functions.php swaps the editable input for a hidden field so the cart
   form still posts a valid quantity, and the column plus the now-pointless
   Update-cart button are hidden here. The coupon form is untouched.
   Consequence to know: adding the same product+size twice merges to qty 2,
   and the only way back is removing the line.                            */
.woocommerce table.cart th.product-quantity,
.woocommerce table.cart td.product-quantity,
.woocommerce table.shop_table.cart th.product-quantity,
.woocommerce table.shop_table.cart td.product-quantity { display: none; }
.woocommerce table.cart td.actions button[name="update_cart"],
.woocommerce table.cart td.actions input[name="update_cart"] { display: none; }
.woocommerce .quantity { display: none; }
.woocommerce .cart-collaterals, .woocommerce .cart_totals { display: grid; gap: var(--space-3); }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading, .woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 {
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg);
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--space-3);
}
.woocommerce .cart-empty, .woocommerce .return-to-shop { padding-block: var(--space-4); }
.woocommerce .coupon { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.woocommerce .coupon .input-text { max-width: 240px; min-height: 46px; padding: var(--space-3); border: var(--border-hair); background: var(--color-surface); font: inherit; }

/* IMPORTANT (add-ons contract, rule 5): the chosen Size renders in Woo
   item-meta rows. Never hide them — style them. */
.woocommerce table.cart td.product-name dl.variation,
.woocommerce .wc-item-meta, .woocommerce-checkout-review-order .variation,
.woocommerce-checkout-review-order .wc-item-meta {
  display: block; margin: var(--space-1) 0 0; font-size: var(--text-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-muted);
}
.woocommerce dl.variation dt, .woocommerce .wc-item-meta li strong { font-weight: 700; display: inline; }
.woocommerce dl.variation dd, .woocommerce .wc-item-meta li p { display: inline; margin: 0 0 0 var(--space-1); }
.woocommerce dl.variation dd p { display: inline; }
.woocommerce .wc-item-meta { list-style: none; padding: 0; }
.woocommerce .wc-item-meta li { display: block; }

/* --- Checkout --------------------------------------------------------
   Woo's classic checkout emits exactly:
     form.checkout > #customer_details.col2-set
                   + h3#order_review_heading
                   + #order_review
   so the desktop two-column layout is a grid on the FORM, with the heading
   and the review panel sharing the second column. Mobile keeps the natural
   source order: details → heading → review → place order. */
.woocommerce-checkout form.checkout { display: grid; gap: var(--space-6); }
.woocommerce-checkout #customer_details.col2-set { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: var(--space-12);
    align-items: start;
  }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
  .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--mast-h) + var(--space-3)); }
}
.woocommerce-checkout #order_review { border: var(--border-ink); background: var(--color-surface); padding: var(--space-5); }

/* --- "Ship to a different address?" -----------------------------------
   Billing is used for shipping until the customer ticks this box
   (woocommerce_ship_to_destination = billing, so Woo renders it unchecked).
   Woo wraps that control in an <h3>, which the generic heading rule would
   otherwise blow up into a 22px display heading with a 13px checkbox
   floating inside it. It is a CONTROL, so it is styled as one. */
.woocommerce-shipping-fields h3#ship-to-different-address {
  font-family: var(--font-ui); font-size: var(--text-base); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  margin: 0; padding-top: var(--space-4); border-top: var(--border-hair);
}
#ship-to-different-address label {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; cursor: pointer;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 700; color: var(--color-ink);
}
#ship-to-different-address label:hover { color: var(--color-accent); }
#ship-to-different-address input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 0;
  accent-color: var(--color-accent); cursor: pointer;
}
.woocommerce-shipping-fields .shipping_address { padding-top: var(--space-4); }

/* the shipping-method rows inside the order review */
.woocommerce-checkout ul#shipping_method { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.woocommerce-checkout ul#shipping_method li { display: flex; align-items: center; gap: var(--space-2); }
.woocommerce-checkout ul#shipping_method label {
  font-size: var(--text-sm); text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.woocommerce-checkout ul#shipping_method input[type="radio"] { accent-color: var(--color-accent); margin: 0; }
.woocommerce-checkout .woocommerce-shipping-destination {
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--color-muted); margin-top: var(--space-2);
}

.woocommerce-checkout .woocommerce-checkout-payment { background: none; border-top: var(--border-hair); padding-top: var(--space-4); margin-top: var(--space-4); }
.woocommerce-checkout ul.payment_methods { list-style: none; padding: 0; display: grid; gap: var(--space-3); border: 0; }
.woocommerce-checkout ul.payment_methods li { display: grid; gap: var(--space-2); }
.woocommerce-checkout .payment_box { background: var(--color-bg); border: var(--border-hair); padding: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.woocommerce-checkout .payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; margin-top: var(--space-4); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: var(--text-sm); color: var(--color-muted); }

/* --- My account ------------------------------------------------------ */
.woocommerce-account .woocommerce { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 232px 1fr; gap: var(--space-10); align-items: start; }
  .woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content { margin: 0; }
}
.woocommerce-MyAccount-navigation ul { display: grid; gap: 0; border: var(--border-hair); background: var(--color-surface); }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: var(--space-3) var(--space-4); border-top: var(--border-hair);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; color: var(--color-muted);
}
.woocommerce-MyAccount-navigation li:first-child a { border-top: 0; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { color: var(--color-accent); }
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register {
  border: var(--border-hair); background: var(--color-surface); padding: var(--space-5); max-width: 520px;
}
.woocommerce-account h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); text-transform: uppercase; margin-bottom: var(--space-3); }
.woocommerce-account .col2-set { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .woocommerce-account .col2-set { grid-template-columns: 1fr 1fr; } }

/* --- Woo product-search widget (header SRCH target) ------------------ */
.woocommerce-product-search { display: flex; gap: var(--space-2); }
.woocommerce-product-search input[type="search"] { flex: 1; min-height: 46px; padding: var(--space-3); border: var(--border-hair); background: var(--color-surface); font: inherit; }

/* --- add-to-cart form on the PDP (theme markup, plugin fills the middle) */
.pdp form.cart { display: grid; gap: var(--space-4); }
/* SIZE GUIDE — promoted from fine print to a control.
   It was 12px muted text with a hairline underline sitting under the cart
   button, which customers read straight past. It is now a hard-edged
   bordered control in the store's button language with a ruler mark and an
   accent arrow, at a 46px tap target. Full width on phones, where it sits
   directly under ADD TO CART. */
.pdp__sizeguide { margin-top: var(--space-3); }
.pdp__sizeguide a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 46px; padding-inline: var(--space-4);
  border: var(--border-ink); background: var(--color-bg); color: var(--color-ink);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pdp__sizeguide a:hover { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.pdp__sizeguide svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.pdp__sizeguide .arw { color: var(--color-accent); }
.pdp__sizeguide a:hover .arw { color: var(--color-bg); }
@media (max-width: 767px) {
  .pdp__sizeguide a { display: flex; justify-content: center; width: 100%; }
}

.pdp .stock { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; color: var(--color-muted); }
.pdp .stock.out-of-stock { color: var(--color-danger); }
.ndm-pa-select { width: 100%; min-height: 46px; padding: var(--space-3); border: var(--border-hair); background: var(--color-surface); font: inherit; }
.ndm-pa-price-note { font-size: var(--text-sm); color: var(--color-muted); }
.ndm-pa-price-note[hidden] { display: none; }

/* --- header bag count ------------------------------------------------ */
.hd__bag { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; font-variant-numeric: tabular-nums; }
.hd__bag:hover { color: var(--color-accent); }
.hd__bag .n { color: var(--color-accent); }

/* --- comments (blog) ------------------------------------------------- */
.post .comments-area { border-top: var(--border-hair); padding-top: var(--space-6); display: grid; gap: var(--space-4); }
.post .comments-area h2, .post .comments-area h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); text-transform: uppercase; }
.post .comment-list { display: grid; gap: var(--space-4); }
.post .comment-body { border: var(--border-hair); background: var(--color-surface); padding: var(--space-4); }

/* ======================================================================
   MOBILE COMMERCE — cart / checkout / account below 768px.
   NEW, no static counterpart, no parity constraint.

   WHY THIS EXISTS: functions.php drops Woo's three stylesheets (they fight
   the ported skin), and one of them — woocommerce-smallscreen.css — is what
   normally collapses the 6-column cart table on phones. Without a
   replacement the cart table measured 423px inside a 375px viewport and
   dragged the whole document (and the fixed thumb bar) sideways. This block
   is that replacement, written in the ASTERISK language instead of Woo's.

   Approach: Woo's classic cart template already tags every <td> with
   data-title="Product|Price|Quantity|Subtotal", so each row becomes a
   bordered card whose labels come from that attribute — no template
   override, no markup the theme has to invent.
   ====================================================================== */

/* Nothing in a commerce page may establish a width the viewport can't hold. */
.commerce, .commerce .woocommerce, .commerce form, .commerce table { min-width: 0; max-width: 100%; }
.woocommerce table.shop_table { width: 100%; table-layout: auto; }
.woocommerce table.cart td.product-name a { overflow-wrap: anywhere; }

@media (max-width: 767px) {

  /* ---- the cart table becomes a stack of cards ---- */
  .woocommerce table.shop_table.cart,
  .woocommerce table.shop_table.cart tbody,
  .woocommerce table.shop_table.cart tfoot { display: block; width: 100%; border: 0; background: none; }
  .woocommerce table.shop_table.cart thead { display: none; }

  .woocommerce table.shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    position: relative;
    /* right padding clears the 44px remove target pinned to the corner */
    padding: var(--space-4) 48px var(--space-4) var(--space-4);
    border: var(--border-hair);
    background: var(--color-surface);
    margin-bottom: var(--space-3);
  }
  .woocommerce table.shop_table.cart tr.cart_item > td { display: block; border: 0; padding: 0; }

  .woocommerce table.shop_table.cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  .woocommerce table.shop_table.cart td.product-thumbnail img { width: 84px; height: 84px; }
  .woocommerce table.shop_table.cart td.product-thumbnail:empty { display: none; }

  .woocommerce table.shop_table.cart td.product-name,
  .woocommerce table.shop_table.cart td.product-price,
  .woocommerce table.shop_table.cart td.product-subtotal { grid-column: 2; }

  /* the data-title label, in the 11px caps chrome voice */
  .woocommerce table.shop_table.cart td.product-price::before,
  .woocommerce table.shop_table.cart td.product-subtotal::before {
    content: attr(data-title);
    display: inline-block;
    min-width: 72px;
    color: var(--color-muted);
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    font-weight: 700;
  }
  .woocommerce table.shop_table.cart td.product-price,
  .woocommerce table.shop_table.cart td.product-subtotal { display: flex; align-items: baseline; gap: var(--space-2); }
  .woocommerce table.shop_table.cart td.product-name { font-size: var(--text-sm); line-height: var(--lh-snug); padding-right: var(--space-4); }

  /* remove pinned to the card's top-right, clear of the title, at a real
     44px thumb target (the 28px desktop chip is too small to hit) */
  .woocommerce table.shop_table.cart td.product-remove { position: absolute; top: 0; right: 0; grid-column: 2; }
  .woocommerce table.shop_table.cart td.product-remove a.remove { width: 44px; height: 44px; border: 0; }

  /* the coupon + update row */
  .woocommerce table.shop_table.cart tr:has(td.actions),
  .woocommerce table.shop_table.cart td.actions { display: block; width: 100%; padding: 0; border: 0; }
  .woocommerce table.shop_table.cart td.actions { display: grid; gap: var(--space-3); }
  .woocommerce .coupon { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: 0; }
  .woocommerce .coupon .input-text { max-width: none; width: 100%; }
  .woocommerce .coupon .button,
  .woocommerce table.shop_table.cart td.actions .button { width: 100%; }

  /* ---- totals + the primary action ---- */
  .woocommerce .cart-collaterals, .woocommerce .cart_totals { width: 100%; }
  .woocommerce .cart_totals table.shop_table { display: table; }
  .woocommerce .cart_totals th, .woocommerce .cart_totals td { padding: var(--space-3) var(--space-2); }
  .woocommerce .wc-proceed-to-checkout { display: grid; }
  .woocommerce .wc-proceed-to-checkout .button { width: 100%; }

  /* ---- checkout ---- */
  .woocommerce-checkout #order_review { padding: var(--space-4); }
  .woocommerce-checkout .shop_table th, .woocommerce-checkout .shop_table td { padding: var(--space-2); font-size: var(--text-sm); }
  .woocommerce-checkout #place_order { width: 100%; }
  .woocommerce form .form-row { margin-bottom: var(--space-3); }

  /* ---- my account ---- */
  .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; }
  .woocommerce-account table.shop_table, .woocommerce-account table.shop_table tbody { display: block; width: 100%; }
  .woocommerce-account table.shop_table thead { display: none; }
  .woocommerce-account table.shop_table tr { display: grid; gap: var(--space-1); border: var(--border-hair); background: var(--color-surface); padding: var(--space-3); margin-bottom: var(--space-3); }
  .woocommerce-account table.shop_table td { display: flex; justify-content: space-between; gap: var(--space-3); border: 0; padding: 0; }
  .woocommerce-account table.shop_table td::before {
    content: attr(data-title);
    color: var(--color-muted);
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    font-weight: 700;
  }

  /* The thumb bar is position:fixed at the bottom on phones. On the content
     pages it overlaps only the footer rule (exactly as the static build), but
     on a commerce page it would sit on top of "Proceed to checkout" / "Place
     order", so those pages reserve its height. */
  .woocommerce-cart .commerce,
  .woocommerce-checkout .commerce,
  .woocommerce-account .commerce { padding-bottom: calc(var(--space-16) + 56px); }
}

/* ======================================================================
   CONTACT FORM 7 — dressed in the ASTERISK form language.

   PROMPT #2 §FORMS: the theme ships no contact form; the operator installs
   a form plugin post-migration and pastes its shortcode into the imported
   contact page (page.php runs do_shortcode). CF7 6.1.6 is what got
   installed, so this styles ITS markup — no template override, no plugin
   edit, and nothing here assumes CF7 specifically beyond the class names.

   CF7 emits:
     .wpcf7 > form.wpcf7-form
       fieldset.hidden-fields-container   (hidden inputs only)
       p > label > "Label" <br> span.wpcf7-form-control-wrap > input|textarea
       p > input.wpcf7-submit
       div.wpcf7-response-output

   Reuses the store's own form measurements from .form/.field above, so the
   pasted form looks native rather than like a plugin default.
   ====================================================================== */

.wpcf7 { margin-top: var(--space-6); max-width: 520px; }

/* live region for screen readers — must stay in the a11y tree, not on screen */
.wpcf7 .screen-reader-response {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* the hidden-input fieldset would otherwise occupy a blank row */
.wpcf7-form .hidden-fields-container { display: none; }

.wpcf7-form { display: grid; gap: var(--space-4); }
.wpcf7-form > p { display: grid; gap: var(--space-1); margin: 0; }
.wpcf7-form > p:empty { display: none; }

/* the label text is a bare text node followed by <br>; the <br> would leave
   an empty grid row, so it goes and the grid does the stacking */
.wpcf7-form label { display: grid; gap: var(--space-1); }
.wpcf7-form label br { display: none; }
.prose .wpcf7-form label,
.wpcf7-form label {
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 700; color: var(--color-muted);
}
.wpcf7-form-control-wrap { display: block; }

/* fields — identical to .field input/textarea in the ported skin */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%; max-width: 100%;
  padding: var(--space-3);
  min-height: 46px;
  border: var(--border-hair); border-radius: var(--radius-none);
  background: var(--color-surface);
  font: inherit; font-size: var(--text-base);
  text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--color-ink);
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
  border-color: var(--color-ink); outline: none;
}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--color-rule-strong); }

/* submit — the store's primary button */
.wpcf7-form input[type="submit"], .wpcf7-form button[type="submit"] {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--space-3) var(--space-6); width: auto;
  border: var(--border-ink); border-radius: var(--radius-none);
  background: var(--color-ink); color: var(--color-bg);
  cursor: pointer;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wpcf7-form input[type="submit"]:hover, .wpcf7-form button[type="submit"]:hover {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface);
}
.wpcf7-form input[type="submit"]:disabled { background: var(--color-bg); color: var(--color-rule-strong); border-color: var(--color-rule); cursor: not-allowed; }

/* validation + status */
.wpcf7-not-valid-tip {
  color: var(--color-danger);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700;
  margin-top: var(--space-1);
}
.wpcf7-form input.wpcf7-not-valid, .wpcf7-form textarea.wpcf7-not-valid { border-color: var(--color-danger); }

.wpcf7-response-output {
  margin: 0; padding: var(--space-4);
  border: var(--border-ink); background: var(--color-surface);
  color: var(--color-ink); font-size: var(--text-sm);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output { border-color: var(--color-danger); color: var(--color-danger); }
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--color-ink); }
.wpcf7-form.init .wpcf7-response-output { display: none; }

.wpcf7-spinner { margin: 0 0 0 var(--space-3); background-color: var(--color-rule); }

/* checkbox / radio / acceptance lists */
.wpcf7-list-item { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-4) 0 0; }
.wpcf7-list-item label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.wpcf7-form input[type="checkbox"], .wpcf7-form input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0;
  accent-color: var(--color-accent); border: 0; background: none; cursor: pointer;
}
.wpcf7-list-item-label {
  font-size: var(--text-sm); text-transform: none; letter-spacing: normal;
  font-weight: 400; color: var(--color-muted);
}

@media (max-width: 767px) {
  .wpcf7 { max-width: none; }
  .wpcf7-form input[type="submit"], .wpcf7-form button[type="submit"] { width: 100%; justify-self: stretch; }
}