/* ==========================================================================
   DRYSHOD — COMPONENTS
   Requires tokens.css. Every page file links both, in this order.

   BREAKPOINTS: the design package wrote these as @container page (…) so one
   file could be reviewed at two widths. The theme has no query container;
   every block is @media (max-width: N) with the same value and order
     (THEME-PHASE1 §5, DECISIONS §12 "Theme Phase 1 rulings"). The ≤640 token
     overrides stay on .page > * (CODE_HANDOFF §2).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-body);
  line-height: var(--ds-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ds-orange-action); }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark input:focus-visible { box-shadow: var(--ds-focus-ring-dark); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   1. LAYOUT
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--ds-max);
  margin-inline: auto;
  padding-inline: var(--ds-pad-x);
}
.wrap--flush { padding-inline: 0; }
.prose { max-width: var(--ds-max-prose); }

.section { padding-block: var(--ds-section-y); }
.section--lg { padding-block: var(--ds-section-y-lg); }
.section--dark { background: var(--ds-dark-bg); color: var(--ds-dark-text); }
.section--raised { background: var(--ds-paper-raised); }

/* --------------------------------------------------------------------------
   2. TYPE
   -------------------------------------------------------------------------- */

.display-1, .display-2, .h1, .h2, .h3, .h4 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
.display-1 { font-size: var(--ds-t-display-1); line-height: var(--ds-lh-display-1); font-weight: 700; letter-spacing: -0.005em; }
.display-2 { font-size: var(--ds-t-display-2); line-height: var(--ds-lh-display-2); font-weight: 700; }
.h1 { font-size: var(--ds-t-h1); line-height: var(--ds-lh-h1); font-weight: 700; }
.h2 { font-size: var(--ds-t-h2); line-height: var(--ds-lh-h2); }
.h3 { font-size: var(--ds-t-h3); line-height: var(--ds-lh-h3); }
.h4 { font-size: var(--ds-t-h4); line-height: var(--ds-lh-h4); }

.eyebrow {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-t-label-sm);
  font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink-4);
  margin: 0;
}
.eyebrow--accent { color: var(--ds-orange-action); }
.on-dark .eyebrow { color: var(--ds-dark-text-4); }
.on-dark .eyebrow--accent { color: var(--ds-orange-on-dark); }

.label {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-t-label);
  font-weight: 600;
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
}
.micro {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-t-label-xs);
  font-weight: 600;
  letter-spacing: var(--ds-track-micro);
  text-transform: uppercase;
}

.lede { font-size: var(--ds-t-body-lg); line-height: var(--ds-lh-body-lg); color: var(--ds-ink-2); margin: 0; text-wrap: pretty; }
.body { font-size: var(--ds-t-body); line-height: var(--ds-lh-body); color: var(--ds-ink-3); margin: 0; text-wrap: pretty; }
.body-sm { font-size: var(--ds-t-body-sm); line-height: var(--ds-lh-body-sm); color: var(--ds-ink-3); margin: 0; }
.meta { font-size: var(--ds-t-meta); line-height: var(--ds-lh-meta); color: var(--ds-ink-4); margin: 0; }

.on-dark { color: var(--ds-dark-text); }
.on-dark .lede { color: var(--ds-dark-text-2); }
.on-dark .body, .on-dark .body-sm { color: var(--ds-dark-text-2); }
.on-dark .meta { color: var(--ds-dark-text-4); }

/* Section header pattern: eyebrow + heading + optional right-side link,
   sitting on a 2px structural rule. Used at the top of every major band. */
.sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-s-6);
  padding-bottom: var(--ds-s-4);
  border-bottom: var(--ds-border-strong) solid var(--ds-rule-strong);
  margin-bottom: var(--ds-s-8);
}
.sectionhead__text { display: flex; flex-direction: column; gap: var(--ds-s-2); }
.on-dark .sectionhead { border-bottom-color: var(--ds-dark-rule-2); }

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-s-2);
  min-height: var(--ds-control-h);
  padding: 0 var(--ds-s-8);
  font-family: var(--ds-font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  border: var(--ds-border-strong) solid transparent;
  border-radius: var(--ds-radius);
  cursor: pointer;
  transition: background var(--ds-dur) var(--ds-ease),
              color var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease);
  white-space: nowrap;
}
.btn:hover { color: inherit; }

.btn--primary { background: var(--ds-orange-action); border-color: var(--ds-orange-action); color: #fff; }
.btn--primary:hover { background: var(--ds-orange-press); border-color: var(--ds-orange-press); color: #fff; }
.btn--primary:active { background: var(--ds-orange-active); border-color: var(--ds-orange-active); }

.btn--outline { background: transparent; border-color: var(--ds-ink); color: var(--ds-ink); }
.btn--outline:hover { background: var(--ds-ink); color: var(--ds-paper); }

.btn--dark { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-paper); }
.btn--dark:hover { background: #000; border-color: #000; color: var(--ds-paper); }

/* On a dark surface the outline button inverts. */
.on-dark .btn--outline { border-color: var(--ds-dark-rule-2); color: var(--ds-dark-text); }
.on-dark .btn--outline:hover { background: var(--ds-dark-text); color: var(--ds-ink); border-color: var(--ds-dark-text); }

.btn--sm { min-height: var(--ds-control-h-sm); padding: 0 var(--ds-s-5); font-size: 15px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Text link with a rule under it — the tertiary action. */
.link-rule {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-t-label);
  font-weight: 700;
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  color: var(--ds-ink);
  border-bottom: var(--ds-border-strong) solid var(--ds-orange);
  padding-bottom: 2px;
}
.link-rule:hover { color: var(--ds-orange-action); }
.on-dark .link-rule { color: var(--ds-dark-text); }

/* --------------------------------------------------------------------------
   4. FORM CONTROLS
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--ds-s-2); }
.field__label {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-t-label-sm);
  font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink-4);
}
.input, .select {
  height: var(--ds-control-h);
  padding: 0 var(--ds-s-4);
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-body);
  color: var(--ds-ink);
  background: var(--ds-paper-raised);
  border: var(--ds-border) solid var(--ds-rule);
  border-radius: var(--ds-radius);
  width: 100%;
}
.input::placeholder { color: var(--ds-ink-5); }
.input:hover, .select:hover { border-color: var(--ds-ink-4); }
.input:focus, .select:focus { border-color: var(--ds-ink); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ds-ink) 50%),
                    linear-gradient(135deg, var(--ds-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--ds-s-10);
}
.field--error .input, .field--error .select { border-color: var(--ds-error); border-width: var(--ds-border-strong); }
.field__error { font-size: var(--ds-t-meta); color: var(--ds-error); font-weight: 600; }
.field__hint { font-size: var(--ds-t-meta); color: var(--ds-ink-4); }

.on-dark .input, .on-dark .select {
  background: transparent;
  border-color: var(--ds-dark-rule-2);
  color: var(--ds-dark-text);
}
.on-dark .input::placeholder { color: var(--ds-dark-text-4); }
.on-dark .field__label { color: var(--ds-dark-text-4); }

/* --------------------------------------------------------------------------
   5. NOTICES
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: var(--ds-s-3);
  padding: var(--ds-s-4) var(--ds-s-5);
  border-left: var(--ds-border-struct) solid var(--ds-ink-4);
  background: var(--ds-paper-sunk);
  font-size: var(--ds-t-body-sm);
  line-height: 1.5;
}
.notice__title { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; display: block; margin-bottom: 2px; }
.notice--blocked { border-left-color: var(--ds-error); background: var(--ds-error-tint); color: #5e1a11; }
.notice--warn { border-left-color: var(--ds-warn); background: var(--ds-warn-tint); color: #5a3b0b; }
.notice--ok { border-left-color: var(--ds-ok); background: var(--ds-ok-tint); color: #1e4a2b; }

/* --------------------------------------------------------------------------
   6. SKELETON / LOADING SLOTS
   Every JS-filled slot ships an empty state. Never collapse to zero height —
   the reserved box prevents layout shift when JS fills it.
   -------------------------------------------------------------------------- */

.skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--ds-paper-sunk) 0%, #f0eeea 50%, var(--ds-paper-sunk) 100%);
  background-size: 200% 100%;
  animation: ds-skel 1.4s var(--ds-ease) infinite;
  border-radius: var(--ds-radius);
  vertical-align: middle;
}
.on-dark .skel { background: linear-gradient(90deg, #2a2e32 0%, #34383b 50%, #2a2e32 100%); background-size: 200% 100%; }
@keyframes ds-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel, .size.is-loading { animation: none; } }

/* --------------------------------------------------------------------------
   7. UTILITY BAR
   Two slots. Left = the standing promise. Right = the shipping-state control.
   -------------------------------------------------------------------------- */

.utilitybar {
  background: var(--ds-ink);
  color: var(--ds-dark-text-2);
  border-bottom: var(--ds-border) solid var(--ds-dark-rule);
}
.utilitybar__inner {
  max-width: var(--ds-max);
  margin-inline: auto;
  padding-inline: var(--ds-pad-x);
  min-height: 40px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--ds-s-4);
}
.utilitybar__promise {
  display: flex;
  align-items: center;
  font-family: var(--ds-font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  color: var(--ds-dark-text-2);
}
.utilitybar__promise-short { display: none; }

/* --------------------------------------------------------------------------
   8. SHIPPING-STATE CONTROL  ★ the most important functional element
   Three states, all designed:
     .shipstate.is-loading  — before JS resolves the territory (cached HTML)
     .shipstate.is-set      — territory known
     .shipstate.is-unknown  — JS ran, no state resolved; asks for input
   -------------------------------------------------------------------------- */

.shipstate {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s-2);
  min-height: 40px;
  padding: 0 var(--ds-s-4);
  margin-right: calc(var(--ds-s-4) * -1);
  background: transparent;
  border: 0;
  border-left: var(--ds-border) solid var(--ds-dark-rule);
  font-family: var(--ds-font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  color: var(--ds-dark-text);
  cursor: pointer;
  transition: background var(--ds-dur) var(--ds-ease);
}
.shipstate:hover { background: var(--ds-dark-bg-2); }
.shipstate__pin { width: 12px; height: 12px; flex: none; color: var(--ds-orange-on-dark); }
.shipstate__label { color: var(--ds-dark-text-3); }
.shipstate__value { color: var(--ds-dark-text); }
.shipstate__action {
  color: var(--ds-orange-on-dark);
  border-bottom: var(--ds-border) solid currentColor;
  padding-bottom: 1px;
}
.shipstate__sep { color: var(--ds-dark-text-4); }

/* loading: reserve the exact width the filled state will occupy */
.shipstate.is-loading { pointer-events: none; }
.shipstate.is-loading .shipstate__value,
.shipstate.is-loading .shipstate__sep,
.shipstate.is-loading .shipstate__action { display: none; }
.shipstate.is-loading .shipstate__pin { color: var(--ds-dark-text-4); }
.shipstate__skel { width: 84px; height: 11px; }
.shipstate:not(.is-loading) .shipstate__skel { display: none; }

/* unknown: reads as a prompt, not a fact */
.shipstate.is-unknown .shipstate__value { color: var(--ds-orange-on-dark); }

/* The same control on a LIGHT surface (PDP size block, cart, checkout). */
.shipstate--light {
  border-left: 0;
  border: var(--ds-border) solid var(--ds-rule);
  background: var(--ds-paper-raised);
  color: var(--ds-ink);
  margin-right: 0;
  min-height: var(--ds-tap-min);
}
.shipstate--light:hover { background: var(--ds-paper-sunk); }
.shipstate--light .shipstate__label { color: var(--ds-ink-4); }
.shipstate--light .shipstate__value { color: var(--ds-ink); }
.shipstate--light .shipstate__sep { color: var(--ds-ink-5); }
.shipstate--light .shipstate__pin,
.shipstate--light .shipstate__action { color: var(--ds-orange-action); }

/* --------------------------------------------------------------------------
   9. STATE PICKER (modal)
   -------------------------------------------------------------------------- */

.picker[hidden] { display: none; }
.picker {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-modal);
  display: grid;
  place-items: start center;
  padding: var(--ds-s-16) var(--ds-s-5);
  background: rgba(15,17,19,0.6);
  overflow: auto;
}
.picker__panel {
  width: min(680px, 100%);
  background: var(--ds-paper);
  border-top: var(--ds-border-struct) solid var(--ds-orange);
  box-shadow: var(--ds-shadow-modal);
}
.picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-s-5);
  padding: var(--ds-s-6) var(--ds-s-8);
  border-bottom: var(--ds-border) solid var(--ds-rule);
}
.picker__close {
  width: var(--ds-tap-min); height: var(--ds-tap-min);
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; color: var(--ds-ink-4);
  margin: -10px -14px 0 0;
}
.picker__close:hover { color: var(--ds-ink); }
.picker__body { padding: var(--ds-s-6) var(--ds-s-8) var(--ds-s-8); }
.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 1px;
  background: var(--ds-rule);
  border: var(--ds-border) solid var(--ds-rule);
  max-height: 42vh;
  overflow: auto;
}
.picker__item {
  background: var(--ds-paper-raised);
  min-height: var(--ds-tap-min);
  padding: 0 var(--ds-s-3);
  display: flex;
  align-items: center;
  gap: var(--ds-s-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-body-sm);
  text-align: left;
  width: 100%;
}
.picker__item:hover { background: var(--ds-orange-tint); }
.picker__item[aria-pressed="true"] { background: var(--ds-ink); color: var(--ds-paper); }
.picker__item-abbr {
  font-family: var(--ds-font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ds-ink-5);
  min-width: 24px;
}
.picker__item[aria-pressed="true"] .picker__item-abbr { color: var(--ds-dark-text-4); }
.picker__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-4);
  margin-top: var(--ds-s-6);
}

/* --------------------------------------------------------------------------
   10. HEADER
   -------------------------------------------------------------------------- */

.header { position: relative; background: var(--ds-paper); border-bottom: var(--ds-border-struct) solid var(--ds-ink); z-index: var(--ds-z-header); }
.header__inner {
  max-width: var(--ds-max);
  margin-inline: auto;
  padding-inline: var(--ds-pad-x);
  display: flex;
  align-items: stretch;
  gap: var(--ds-s-8);
  min-height: 76px;
}
.brand { display: flex; align-items: center; flex: none; padding-block: var(--ds-s-3); }
.brand img { height: 44px; width: auto; max-width: none; }

.nav { display: flex; align-items: stretch; }
.nav__link {
  display: flex;
  align-items: center;
  padding: 0 var(--ds-s-5);
  font-family: var(--ds-font-ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  color: var(--ds-ink);
  border-bottom: var(--ds-border-struct) solid transparent;
  margin-bottom: calc(var(--ds-border-struct) * -1);
  transition: color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__link[aria-current="page"] { color: var(--ds-orange-action); border-bottom-color: var(--ds-orange); }

.header__tools { margin-left: auto; display: flex; align-items: stretch; }
.tool {
  display: flex; align-items: center; gap: var(--ds-s-2);
  padding: 0 var(--ds-s-5);
  min-width: var(--ds-tap-min);
  font-family: var(--ds-font-ui);
  font-size: 16px; font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink);
  border-left: var(--ds-border) solid var(--ds-rule);
}
.tool:hover { color: var(--ds-orange-action); }
.tool svg { width: 17px; height: 17px; flex: none; }
.tool--cart { background: var(--ds-orange-action); color: #fff; border-left: 0; font-weight: 700; }
.tool--cart:hover { background: var(--ds-orange-press); color: #fff; }
.cart__count {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center;
  background: rgba(0,0,0,0.28);
  border-radius: var(--ds-radius-pill);
  font-size: 13px; letter-spacing: 0;
}
.cart__count .skel { width: 10px; height: 9px; background: rgba(255,255,255,0.35); }

.burger { display: none; align-items: center; justify-content: center; width: var(--ds-tap-min); height: var(--ds-tap-min); border-left: var(--ds-border) solid var(--ds-rule); }
.burger span { display: block; width: 22px; height: 2px; background: var(--ds-ink); box-shadow: 0 -7px 0 var(--ds-ink), 0 7px 0 var(--ds-ink); }

/* --------------------------------------------------------------------------
   11. MEGA MENU
   -------------------------------------------------------------------------- */

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ds-ink);
  color: var(--ds-dark-text);
  box-shadow: var(--ds-shadow-menu);
  z-index: var(--ds-z-mega);
}
.mega[hidden] { display: none; }
.mega__inner {
  max-width: var(--ds-max);
  margin-inline: auto;
  padding: var(--ds-s-8) var(--ds-pad-x) var(--ds-s-10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px)) minmax(0, 1fr);
  gap: var(--ds-s-10);
}
.mega__col { display: flex; flex-direction: column; gap: var(--ds-s-3); }
.mega__heading {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-t-label-sm);
  font-weight: 700;
  letter-spacing: var(--ds-track-eyebrow);
  text-transform: uppercase;
  color: var(--ds-orange-on-dark);
  padding-bottom: var(--ds-s-2);
  border-bottom: var(--ds-border) solid var(--ds-dark-rule);
}
.mega__link { font-family: var(--ds-font-ui); font-size: 18px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ds-dark-text-2); }
.mega__link:hover { color: var(--ds-orange-on-dark); }
.mega__feature { border-left: var(--ds-border) solid var(--ds-dark-rule); padding-left: var(--ds-s-8); display: flex; flex-direction: column; gap: var(--ds-s-3); }

/* --------------------------------------------------------------------------
   12. MOBILE DRAWER
   -------------------------------------------------------------------------- */

.drawer[hidden] { display: none; }
.drawer { position: fixed; inset: 0; z-index: var(--ds-z-drawer); background: rgba(15,17,19,0.6); }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(380px, 88vw);
  background: var(--ds-ink);
  color: var(--ds-dark-text);
  display: flex; flex-direction: column;
  overflow: auto;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--ds-s-4) var(--ds-s-5); border-bottom: var(--ds-border) solid var(--ds-dark-rule); }
.drawer__head img { height: 34px; width: auto; max-width: none; filter: brightness(0) invert(1); }
.drawer__close { width: var(--ds-tap-min); height: var(--ds-tap-min); display: grid; place-items: center; font-size: 24px; color: var(--ds-dark-text-3); }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 var(--ds-s-5);
  border-bottom: var(--ds-border) solid var(--ds-dark-rule);
  font-family: var(--ds-font-ui); font-size: 21px; font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-dark-text);
}
.drawer__link:hover { color: var(--ds-orange-on-dark); }
.drawer__sub { display: flex; flex-direction: column; background: #16181a; }
.drawer__sublink {
  min-height: 48px; display: flex; align-items: center;
  padding: 0 var(--ds-s-5) 0 var(--ds-s-10);
  border-bottom: var(--ds-border) solid var(--ds-dark-rule);
  font-size: var(--ds-t-body-sm); color: var(--ds-dark-text-2);
}
.drawer__foot { margin-top: auto; padding: var(--ds-s-6) var(--ds-s-5); border-top: var(--ds-border) solid var(--ds-dark-rule); display: flex; flex-direction: column; gap: var(--ds-s-4); }

/* --------------------------------------------------------------------------
   13. HERO ROTATOR  — Direction A composition, as the slide template.
   Full-bleed dark textured field, photograph behind, lockup anchored bottom-
   left over a gradient scrim, 2×2 stat tile bottom-right. The scrim is what
   makes the photo slot resilient — the type never depends on the image.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: repeating-linear-gradient(135deg, #191c1f 0 10px, #212528 10px 20px);
  overflow: hidden;
}
.hero__viewport { position: relative; display: grid; min-height: 620px; }
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ds-dur-slow) var(--ds-ease), visibility 0s linear var(--ds-dur-slow);
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Photo SLOT. With no image mapped the industrial field shows through and the
   slot is labelled top-right — exactly as approved. Drop an <img> in and it
   covers the field; the scrim keeps the lockup legible either way. */
.hero__photo-label {
  position: absolute; top: var(--ds-s-6); right: var(--ds-pad-x);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 600;
  letter-spacing: var(--ds-track-micro); text-transform: uppercase;
  color: var(--ds-dark-text-4); z-index: 1;
}

.hero__overlay {
  position: relative;
  width: 100%;
  padding: var(--ds-s-30) var(--ds-pad-x) var(--ds-s-20);
  background: linear-gradient(to top, rgba(15,17,19,0.82) 30%, rgba(15,17,19,0.28) 72%, rgba(15,17,19,0) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-s-10);
  flex-wrap: wrap;
}
.hero__lockup { display: flex; flex-direction: column; gap: var(--ds-s-4); max-width: 660px; }
.hero__rule { width: 26px; height: var(--ds-border-struct); background: var(--ds-orange); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-s-3); margin-top: var(--ds-s-3); }

/* 2×2 stat tile — four value/label SLOTS, filled per slide. */
.hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #3a3f43;
  border: var(--ds-border) solid #3a3f43;
  min-width: 320px;
}
.hero__stat { background: #15181a; padding: var(--ds-s-4) var(--ds-s-5); }
.hero__stat-value { font-family: var(--ds-font-display); font-size: 30px; font-weight: 600; line-height: 1; color: var(--ds-dark-text); }
.hero__stat-label {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 600;
  letter-spacing: var(--ds-track-micro); text-transform: uppercase;
  color: var(--ds-dark-text-4); margin-top: var(--ds-s-2);
}

.hero__controls {
  position: absolute; right: var(--ds-pad-x); bottom: var(--ds-s-6);
  display: flex; align-items: center; gap: var(--ds-s-3); z-index: 2;
}
.hero__dots { display: flex; gap: var(--ds-s-2); }
.hero__dot { width: 34px; height: 4px; background: var(--ds-dark-rule-2); }
.hero__dot.is-active { background: var(--ds-orange); }
.hero__arrow {
  width: var(--ds-tap-min); height: 34px;
  display: grid; place-items: center;
  border: var(--ds-border) solid var(--ds-dark-rule-2);
  color: var(--ds-dark-text-2);
}
.hero__arrow:hover { border-color: var(--ds-dark-text); color: var(--ds-dark-text); }

/* --------------------------------------------------------------------------
   14. TABS (merchandising groups)
   -------------------------------------------------------------------------- */

.tabs { display: flex; gap: 0; border-bottom: var(--ds-border-strong) solid var(--ds-rule-strong); }
.tab {
  min-height: var(--ds-tap-min);
  padding: 0 var(--ds-s-8);
  font-family: var(--ds-font-display);
  font-size: 24px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ds-ink-4);
  border-bottom: var(--ds-border-struct) solid transparent;
  margin-bottom: calc(var(--ds-border-struct) * -1 - 1px);
}
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--ds-ink); }
.tab[aria-selected="true"] { color: var(--ds-ink); border-bottom-color: var(--ds-orange); }
.tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   15. CHIP ROW (gender-scoped subcategories)
   -------------------------------------------------------------------------- */

.chiprow { display: flex; flex-wrap: wrap; gap: var(--ds-s-2); }
.chip {
  display: inline-flex; align-items: center;
  min-height: var(--ds-tap-min);
  padding: 0 var(--ds-s-4);
  border: var(--ds-border) solid var(--ds-rule);
  background: var(--ds-paper-raised);
  font-family: var(--ds-font-ui);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-ink-2);
}
.chip:hover { border-color: var(--ds-ink); color: var(--ds-ink); }

/* --------------------------------------------------------------------------
   16. PRODUCT TILE
   Square stage (1:1) matching the 800x800 source. No stock state here.
   -------------------------------------------------------------------------- */

.tilegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s-6); }

.tile { display: flex; flex-direction: column; border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); }
.tile:hover { border-color: var(--ds-ink); }
.tile:hover .tile__name { color: var(--ds-orange-action); }
.tile__stage { position: relative; aspect-ratio: 1 / 1; background: var(--ds-paper-raised); overflow: hidden; }
.tile__stage img { width: 100%; height: 100%; object-fit: contain; padding: var(--ds-s-4); }
.tile__flag {
  position: absolute; top: 0; left: 0;
  background: var(--ds-ink); color: var(--ds-paper);
  font-family: var(--ds-font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  padding: 5px var(--ds-s-3);
}
.tile__body { padding: var(--ds-s-4) var(--ds-s-5) var(--ds-s-5); border-top: var(--ds-border) solid var(--ds-rule); display: flex; flex-direction: column; gap: var(--ds-s-1); }
.tile__meta { font-family: var(--ds-font-ui); font-size: 13px; font-weight: 600; letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase; color: var(--ds-ink-5); }
.tile__name { font-family: var(--ds-font-display); font-size: 22px; font-weight: 600; text-transform: uppercase; line-height: 1.12; color: var(--ds-ink); margin: 2px 0 0; }
.tile__price { font-family: var(--ds-font-ui); font-size: 19px; font-weight: 700; letter-spacing: 0.02em; color: var(--ds-ink); margin-top: var(--ds-s-2); }

/* Placeholder stage for products whose image is not yet mapped. */
.tile__stage--placeholder {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, #edeae4 0 10px, #e6e3dc 10px 20px);
}
.tile__stage--placeholder span {
  font-family: var(--ds-font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase;
  color: #9a9691;
}

/* --------------------------------------------------------------------------
   17. CARD + FEATURE LIST
   -------------------------------------------------------------------------- */

.card { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); padding: var(--ds-s-6); display: flex; flex-direction: column; gap: var(--ds-s-2); }
.on-dark .card { border-color: var(--ds-dark-rule); background: var(--ds-dark-bg-2); }

.featlist { display: flex; flex-direction: column; }
.featlist__item { display: flex; gap: var(--ds-s-5); padding: var(--ds-s-5) 0; border-top: var(--ds-border) solid var(--ds-rule); }
.featlist__item:last-child { border-bottom: var(--ds-border) solid var(--ds-rule); }
.featlist__num { font-family: var(--ds-font-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--ds-ink-5); padding-top: 5px; min-width: 26px; }
.on-dark .featlist__item { border-color: var(--ds-dark-rule); }
.on-dark .featlist__num { color: var(--ds-dark-text-4); }

/* Pillars mark — secondary brand device. See DESIGN-SYSTEM.md §9.
   pillars-mark.png on light surfaces; pillars-mark-dark.png on ink (neutral
   elements re-cut to --ds-paper, orange arms preserved). */
.pillars { display: block; width: 148px; height: auto; filter: none; }
.pillars--sm { width: 104px; }
.footer__brand .pillars { margin-top: var(--ds-s-5); }
.pillars--placeholder {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center; text-align: center;
  border: var(--ds-border) dashed var(--ds-dark-rule-2);
  color: var(--ds-dark-text-4);
  font-family: var(--ds-font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase;
  padding: var(--ds-s-3);
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */

.footer { background: var(--ds-ink); color: var(--ds-dark-text); }
.footer__signup {
  border-bottom: var(--ds-border) solid var(--ds-dark-rule);
}
.footer__signup-inner {
  max-width: var(--ds-max); margin-inline: auto; padding: var(--ds-s-10) var(--ds-pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-10); flex-wrap: wrap;
}
.footer__form { display: flex; align-items: stretch; gap: 0; }
.footer__form .input { border-right: 0; }
.footer__signup-col { flex: 1; min-width: 420px; max-width: 520px; }
.footer__cols {
  max-width: var(--ds-max); margin-inline: auto; padding: var(--ds-s-12) var(--ds-pad-x);
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--ds-s-8);
}
.footer__brand > img:not(.pillars) { height: 46px; width: auto; max-width: none; align-self: flex-start; filter: brightness(0) invert(1); }
.footer__col { display: flex; flex-direction: column; gap: var(--ds-s-3); }
.footer__heading {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-sm); font-weight: 700;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase;
  color: var(--ds-orange-on-dark);
  padding-bottom: var(--ds-s-2);
  border-bottom: var(--ds-border) solid var(--ds-dark-rule);
  margin-bottom: var(--ds-s-1);
}
.footer__link { font-size: var(--ds-t-body-sm); color: var(--ds-dark-text-2); }
.footer__link:hover { color: var(--ds-orange-on-dark); }
.footer__legal {
  border-top: var(--ds-border) solid var(--ds-dark-rule);
}
.footer__legal-inner {
  max-width: var(--ds-max); margin-inline: auto; padding: var(--ds-s-5) var(--ds-pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-5); flex-wrap: wrap;
  font-family: var(--ds-font-ui); font-size: 13px; font-weight: 500;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-dark-text-4);
}

/* --------------------------------------------------------------------------
   19. MISC
   -------------------------------------------------------------------------- */

.breadcrumb {
  max-width: var(--ds-max); margin-inline: auto; padding: var(--ds-s-2) var(--ds-pad-x) 0;
  font-family: var(--ds-font-ui); font-size: 14px; font-weight: 500;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-5);
}
.breadcrumb a:hover { color: var(--ds-orange); }
.breadcrumb b { color: var(--ds-ink); font-weight: 600; }

.statrow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--ds-dark-rule); border: var(--ds-border) solid var(--ds-dark-rule); }
.statrow__cell { background: var(--ds-dark-bg); padding: var(--ds-s-4) var(--ds-s-5); }
.statrow__value { font-family: var(--ds-font-display); font-size: 30px; font-weight: 600; color: var(--ds-dark-text); line-height: 1; }
.statrow__label { font-family: var(--ds-font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase; color: var(--ds-dark-text-4); margin-top: var(--ds-s-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Annotation chrome — REVIEW ONLY. Code strips anything with .anno. */
.anno {
  font-family: var(--ds-font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase;
  color: #7a5cc4; background: #f1ecfb; border: 1px dashed #b9a5e8;
  padding: 5px var(--ds-s-3); display: inline-block;
}
.anno-band { padding: var(--ds-s-4) var(--ds-pad-x); background: #f7f4fd; border-bottom: 1px dashed #d6c9f2; }


/* --------------------------------------------------------------------------
   17. ARCHIVE — header variants, layout, result count, pagination
   Brief 02. One template, four contexts: gender · subcategory · search ·
   empty. The grid, tile, filters and pagination are identical in all four;
   only .archead changes. 3-up desktop / 2-up mobile — see DESIGN-SYSTEM §12
   for why not 4-up.
   -------------------------------------------------------------------------- */

/* ONE tight band. The whole header is ~72px so the first row of tiles clears
   the fold at 1440×900 with the utility bar and header present. No eyebrow, no
   stacked lede — title, description and count share a single baseline. */
.archead { border-bottom: var(--ds-border-struct) solid var(--ds-rule-strong); }
.archead__inner {
  max-width: var(--ds-max); margin-inline: auto;
  padding: var(--ds-s-4) var(--ds-pad-x) var(--ds-s-5);
  display: flex; align-items: baseline; gap: var(--ds-s-6);
}
.archead__title {
  font-family: var(--ds-font-display); font-size: 32px; font-weight: 700;
  text-transform: uppercase; line-height: 1; color: var(--ds-ink);
  margin: 0; flex: none;
}
/* Description rides beside the title on ONE line or not at all — it never
   pushes the grid down. Truncates rather than wraps. */
.archead__desc {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--ds-t-body-sm); color: var(--ds-ink-3); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.archead__desc:empty { display: none; }
.archead__term { color: var(--ds-orange-action); }
.archead .woocommerce-result-count { margin-left: auto; flex: none; }

/* Woo's own class — the filter plugin swaps this region by name. */
.woocommerce-result-count {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label);
  font-weight: 600; letter-spacing: var(--ds-track-label);
  text-transform: uppercase; color: var(--ds-ink-4); margin: 0;
  white-space: nowrap;
}

.archive { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: var(--ds-s-12); align-items: start; }
/* The archive body starts close under the header — compacting the header is
   pointless if 80px of section padding takes the space straight back. */
.section--archive { padding-block: var(--ds-s-8) var(--ds-section-y); }

/* --------------------------------------------------------------------------
   18. FILTERS — container only
   The plugin (Product Filters for WooCommerce) renders the widget. Styling is
   deliberately ELEMENT-scoped inside .filters so Code can map it onto the
   plugin's markup without renaming anything. No pills, no sliders, no ranges.
   -------------------------------------------------------------------------- */

.filters { border-top: var(--ds-border-strong) solid var(--ds-rule-strong); }
.filters__title {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label);
  font-weight: 700; letter-spacing: var(--ds-track-label);
  text-transform: uppercase; color: var(--ds-ink);
  padding: var(--ds-s-4) 0; margin: 0;
}

.filters fieldset { border: 0; margin: 0; padding: 0; border-top: var(--ds-border) solid var(--ds-rule); }
/* The visible heading is the toggle button; the legend stays for a11y only. */
.filters legend {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.filtergroup__toggle {
  width: 100%; min-height: var(--ds-tap-min);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-3);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label);
  font-weight: 600; letter-spacing: var(--ds-track-label);
  text-transform: uppercase; color: var(--ds-ink); text-align: left;
}
.filtergroup__chev {
  width: 9px; height: 9px; flex: none; border-right: 2px solid var(--ds-ink-4);
  border-bottom: 2px solid var(--ds-ink-4); transform: rotate(45deg); margin-bottom: 3px;
  transition: transform var(--ds-dur) var(--ds-ease);
}
.filtergroup__toggle[aria-expanded="false"] .filtergroup__chev { transform: rotate(-45deg); margin-bottom: 0; }
.filtergroup__list { display: flex; flex-direction: column; padding-bottom: var(--ds-s-4); }
.filtergroup__list[hidden] { display: none; }

.filters label {
  display: flex; align-items: center; gap: var(--ds-s-3);
  min-height: 34px; cursor: pointer;
  font-size: var(--ds-t-body-sm); color: var(--ds-ink-3);
}
.filters label:hover { color: var(--ds-ink); }
.filters input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0;
  border: var(--ds-border) solid var(--ds-ink-4);
  background: var(--ds-paper-raised);
  display: grid; place-items: center;
}
.filters input[type="checkbox"]::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--ds-paper); border-bottom: 2px solid var(--ds-paper);
  transform: rotate(-45deg) translateY(-1px); opacity: 0;
}
.filters input[type="checkbox"]:checked { background: var(--ds-ink); border-color: var(--ds-ink); }
.filters input[type="checkbox"]:checked::after { opacity: 1; }
.filters input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }
.filters label:has(input:checked) { color: var(--ds-ink); font-weight: 600; }
.filtercount { margin-left: auto; font-family: var(--ds-font-ui); font-size: 13px; font-weight: 600; color: var(--ds-ink-5); }

.filters__foot { border-top: var(--ds-border) solid var(--ds-rule); padding-top: var(--ds-s-4); }

/* Applied-filter summary — sits above the grid, not in the sidebar, so the
   customer can see and clear what is on without scrolling the sidebar. */
.applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-2); margin-bottom: var(--ds-s-6); }
.applied__label { font-family: var(--ds-font-ui); font-size: 13px; font-weight: 600; letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase; color: var(--ds-ink-5); margin-right: var(--ds-s-1); }
.applied__item {
  display: inline-flex; align-items: center; gap: var(--ds-s-2);
  min-height: 32px; padding: 0 var(--ds-s-2) 0 var(--ds-s-3);
  border: var(--ds-border) solid var(--ds-ink);
  font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ds-ink);
  background: var(--ds-paper-raised);
}
.applied__x { font-size: 17px; line-height: 1; color: var(--ds-ink-4); padding: 0 2px; }
.applied__item:hover .applied__x { color: var(--ds-orange-action); }

/* Mobile filter entry — a plain row. NOT sticky (brief 02 §4). */
.filterbar { display: none; align-items: center; justify-content: space-between; gap: var(--ds-s-4); margin-bottom: var(--ds-s-6); }
.filterbar__count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  margin-left: var(--ds-s-2); background: var(--ds-orange-action); color: #fff;
  font-family: var(--ds-font-ui); font-size: 13px; font-weight: 700; border-radius: var(--ds-radius-pill);
}

/* Filter drawer — same list, light surface, slides from the LEFT so it does
   not collide with the nav drawer's muscle memory. */
.drawer--filters .drawer__panel {
  inset: 0 auto 0 0; background: var(--ds-paper); color: var(--ds-ink);
  border-right: var(--ds-border-struct) solid var(--ds-orange);
  display: flex; flex-direction: column;
}
.drawer--filters .drawer__head { border-bottom-color: var(--ds-rule); }
.drawer--filters .drawer__close { color: var(--ds-ink-4); }
.drawer--filters .drawer__body { padding: 0 var(--ds-s-5); overflow: auto; flex: 1; }
.drawer--filters .drawer__foot { border-top-color: var(--ds-rule); flex-direction: row; gap: var(--ds-s-3); }
.drawer--filters .filters { border-top: 0; }
/* The drawer head already says "Filter" — don't say it twice. */
.drawer--filters .filters__title { display: none; }
.drawer__title { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   19. PRODUCT GRID — Woo's <ul class="products">
   .tile from brief 01 is unchanged in look. Two additions here: a reserved
   video row (so the layout does NOT shift between tiles with and without a
   video) and a combined-stock out-of-stock state.
   -------------------------------------------------------------------------- */

ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s-6); }
ul.products > li { display: flex; }
ul.products > li > .tile, ul.products > li.tile { flex: 1; }

/* The tile is a container, not an anchor, because it holds a second control.
   .tile__link covers the whole card via a stretched pseudo-element; the video
   button sits above it. One anchor, no nested interactives. */
.tile { position: relative; }
.tile__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile:hover .tile__link .tile__name { color: var(--ds-orange-action); }

/* Reserved row. Present on EVERY tile; only the button is conditional. This
   is what keeps a video tile and a non-video tile the same height. */
.tile__videoslot { min-height: 34px; display: flex; align-items: center; margin-top: var(--ds-s-1); }
.tile__video {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--ds-s-2);
  min-height: 32px; padding: 0 var(--ds-s-3) 0 var(--ds-s-2);
  border: var(--ds-border) solid var(--ds-rule);
  font-family: var(--ds-font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink-2); background: var(--ds-paper-raised);
}
.tile__video:hover { border-color: var(--ds-ink); color: var(--ds-ink); }
.tile__video svg { width: 14px; height: 14px; flex: none; color: var(--ds-orange-action); }

/* Combined-stock out of stock: both warehouses at zero. Territory-agnostic,
   so it is cacheable and belongs here. NEVER per-territory (DESIGN-SYSTEM §10). */
.tile__oos {
  font-family: var(--ds-font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink-4);
  border-top: var(--ds-border) solid var(--ds-rule);
  padding-top: var(--ds-s-2); margin-top: var(--ds-s-2);
}
.tile--oos .tile__stage { opacity: 0.62; }
.tile--oos .tile__price { color: var(--ds-ink-4); }

/* --------------------------------------------------------------------------
   20. PAGINATION — REMOVED (brief 02 amendment)
   Every product renders on one page; the result count stays. No .page-numbers
   styling is shipped. If pagination ever returns, it comes back as
   <nav class="woocommerce-pagination"> so the plugin's AJAX swap still works.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   21. EMPTY STATE — no products match
   -------------------------------------------------------------------------- */

.emptystate {
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  padding: var(--ds-s-16) var(--ds-s-10);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-s-4);
}
.emptystate__rule { width: 56px; height: var(--ds-border-struct); background: var(--ds-orange); }
.emptystate__actions { display: flex; flex-wrap: wrap; gap: var(--ds-s-3); margin-top: var(--ds-s-4); }

/* --------------------------------------------------------------------------
   22. VIDEO MODAL — designed once here; the PDP reuses it
   -------------------------------------------------------------------------- */

.vmodal[hidden] { display: none; }
.vmodal { position: fixed; inset: 0; z-index: var(--ds-z-modal); background: rgba(15,17,19,0.86); display: grid; place-items: center; padding: var(--ds-s-6); }
.vmodal__panel { width: min(1040px, 100%); background: var(--ds-ink); box-shadow: var(--ds-shadow-modal); }
.vmodal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-4); padding: var(--ds-s-3) var(--ds-s-3) var(--ds-s-3) var(--ds-s-5); border-bottom: var(--ds-border) solid var(--ds-dark-rule); }
.vmodal__title { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-dark-text-2); }
.vmodal__close { width: var(--ds-tap-min); height: var(--ds-tap-min); display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--ds-dark-text-3); flex: none; }
.vmodal__close:hover { color: var(--ds-dark-text); }
.vmodal__frame { aspect-ratio: 16 / 9; background: #000; }
.vmodal__frame iframe, .vmodal__frame > div { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   23. RESERVED REGION — Bazaarvoice
   A third party owns the inside of these. Nothing of ours goes in. Kept as a
   visible bordered block in the mockups so the space is budgeted; Code ships
   the container and lets BV fill it. See DESIGN-SYSTEM §13.
   -------------------------------------------------------------------------- */

.reserved {
  border: var(--ds-border) dashed var(--ds-ink-4);
  background: var(--ds-paper-sunk);
  display: grid; place-items: center; text-align: center;
  padding: var(--ds-s-5);
  font-family: var(--ds-font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase;
  color: var(--ds-ink-4);
}
.reserved--rating { min-height: 32px; padding: var(--ds-s-1) var(--ds-s-3); font-size: 11px; }
.reserved--reviews { min-height: 900px; }

/* --------------------------------------------------------------------------
   24. PDP — gallery, buy box, size selector
   Brief 03.
   -------------------------------------------------------------------------- */

/* Gallery column is 388px (320 stage + 12 gap + 56 thumbs); the buy box sits
   beside it and the pair are capped, so the tab bar clears the fold at
   1440×900. Tabs below run full width. */
/* ONE measure for the whole PDP. The row, the tabs and related products all
   sit in .wrap--pdp, so there is no ragged right edge — the gallery/buy-box
   row can never be narrower than the tabs beneath it. Centred, like the live
   page. */
.wrap--pdp, .breadcrumb--pdp { max-width: 1140px; }
/* Tight under the breadcrumb: the gallery is the first thing on the page and
   80px of section padding above it is 80px of nothing. */
.section--pdp { padding-block: var(--ds-s-6) var(--ds-s-20); }

/* 398 = 320 stage + 12 gap + 66 thumb column. The buy box takes the rest. */
.pdp { display: grid; grid-template-columns: 398px minmax(0, 1fr); gap: var(--ds-s-10); align-items: start; }

/* Stage + a VERTICAL thumb column beside it, not underneath — the strip
   costs no vertical space, which is the whole point. */
/* stretch, so the thumb column is exactly as tall as the stage at every width
   and scrolls inside it — no magic max-height to keep in sync. */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr) 66px; gap: var(--ds-s-3); align-items: stretch; }
.gallery__stage {
  /* width is explicit so an over-tall row can never drive it through
     aspect-ratio — the square is derived from the WIDTH, always. */
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 320px;
  background: var(--ds-paper-raised); border: var(--ds-border) solid var(--ds-rule);
  overflow: hidden;
}
/* contain, not cover — a 15" Hi boot and a shoe sit on the same stage
   without either being cropped. */
.gallery__stage img { width: 100%; height: 100%; object-fit: contain; padding: var(--ds-s-5); }
.gallery__stage .vmodal__frame { position: absolute; inset: 0; aspect-ratio: auto; }
/* Five thumbs fit the stage height; more than five scroll in place. */
/* height:0 + min-height:100% — the strip's content contributes NOTHING to row
   sizing, so the row is sized by the stage's square, and the column then fills
   that height and scrolls inside it when there are more than five thumbs.
   A plain height:100% lets 8 thumbs size the row and stretch the stage. */
.gallery__thumbs {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-2);
  grid-auto-rows: min-content;
  height: 0; min-height: 100%; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-gutter: stable;
}
.thumb {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--ds-paper-raised); border: var(--ds-border) solid var(--ds-rule);
  overflow: hidden; padding: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--ds-s-2); }
.thumb:hover { border-color: var(--ds-ink-4); }
.thumb[aria-current="true"] { border-color: var(--ds-orange); border-width: var(--ds-border-strong); }
/* Video takes the first thumb slot after the featured image. */
.thumb--video { background: var(--ds-ink); }
.thumb--video img { opacity: 0.55; }
.thumb__play {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--ds-paper);
}
.thumb__play svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }

/* Order is fixed: price → title (+comfort) → BV rating → sizes → shipping
   state → Add to cart. NOTHING else above the button. Style/category is one
   line below it. */
.buybox { display: flex; flex-direction: column; gap: 10px; }
.buybox__price { display: flex; align-items: baseline; gap: var(--ds-s-3); }
.price { font-family: var(--ds-font-ui); font-size: 30px; font-weight: 700; letter-spacing: 0.01em; color: var(--ds-ink); line-height: 1; }
.price--was { font-size: 21px; font-weight: 600; color: var(--ds-ink-5); text-decoration: line-through; }
.price--now { color: var(--ds-orange-action); }
.price__flag {
  font-family: var(--ds-font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase;
  background: var(--ds-orange-action); color: #fff; padding: 4px var(--ds-s-2);
}
.buybox__title { font-family: var(--ds-font-display); font-size: 27px; font-weight: 600; text-transform: uppercase; line-height: 1.08; color: var(--ds-ink); margin: 0; }
/* Comfort range: one compact line under the title, no card. It is the
   most-asked spec, so it earns a line — not a box. */
.buybox__spec {
  display: flex; align-items: baseline; gap: var(--ds-s-2);
  font-family: var(--ds-font-ui); font-size: 15px; color: var(--ds-ink-3); margin: 0;
}
.buybox__spec b { color: var(--ds-ink); font-weight: 700; letter-spacing: 0.02em; }
.buybox__meta { display: flex; flex-wrap: wrap; gap: var(--ds-s-1) var(--ds-s-5); padding-top: var(--ds-s-3); border-top: var(--ds-border) solid var(--ds-rule); margin-top: var(--ds-s-1); }
.buybox__metaitem { display: flex; flex-direction: column; gap: 2px; }
.buybox__metaitem { flex-direction: row; align-items: baseline; gap: var(--ds-s-2); }
.buybox__metalabel { font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 600; letter-spacing: var(--ds-track-micro); text-transform: uppercase; color: var(--ds-ink-5); }
.buybox__metavalue { font-family: var(--ds-font-ui); font-size: 15px; font-weight: 600; color: var(--ds-ink); letter-spacing: 0.02em; }

/* Comfort range — the most-asked spec, so it appears twice: here and as a
   labelled row at the end of the Description tab. */
.comfort {
  display: flex; align-items: center; gap: var(--ds-s-3);
  border: var(--ds-border) solid var(--ds-rule); border-left: var(--ds-border-struct) solid var(--ds-orange);
  background: var(--ds-paper-raised); padding: var(--ds-s-3) var(--ds-s-4);
}
.comfort__label { font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 600; letter-spacing: var(--ds-track-micro); text-transform: uppercase; color: var(--ds-ink-4); }
.comfort__value { font-family: var(--ds-font-ui); font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--ds-ink); margin-left: auto; }

/* --- Size selector — four states + selected/hover/focus ------------------
   Sizes render server-side from COMBINED stock, so a globally dead size is
   correct in cached HTML. Everything else ships .is-loading and JS marks it
   per territory. Labels are printed exactly as stored (M07, M09.5, W08, Y05);
   no size conversion is invented here. */
.sizeblock { display: flex; flex-direction: column; gap: var(--ds-s-2); }
.sizeblock__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-s-4); }
.sizeblock__label { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); }
.sizeblock__chartlink { font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-orange-action); border-bottom: var(--ds-border) solid currentColor; }

.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.size {
  min-height: 44px; padding: 0 var(--ds-s-2);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--ds-border) solid var(--ds-ink-4); background: var(--ds-paper-raised);
  font-family: var(--ds-font-ui); font-size: 17px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--ds-ink);
  transition: background var(--ds-dur-fast) var(--ds-ease);
}
.size:hover { border-color: var(--ds-ink); background: var(--ds-paper-sunk); }
.size:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }
.size[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-paper); }
.size[aria-pressed="true"]:hover { background: #000; }

/* 1 — loading: territory not yet resolved. The label ships in the DOM inside
   .size__label and is hidden with visibility, NOT by colouring it transparent
   — so the button is already its final width (no reflow on fill) and there is
   no colour state to get stuck when the class is removed. */
.size__label { display: block; }
.size.is-loading .size__label { visibility: hidden; }
.size.is-loading {
  border-color: var(--ds-rule); pointer-events: none;
  background: linear-gradient(90deg, var(--ds-paper-sunk) 0%, #f0eeea 50%, var(--ds-paper-sunk) 100%);
  background-size: 200% 100%; animation: ds-skel 1.4s var(--ds-ease) infinite;
}
/* 2 — in stock is the base .size above.
   3 — unavailable for THIS territory: alive elsewhere, so it is marked, not
   erased, and the inline note offers the state change. */
.size.is-oos-territory {
  border: var(--ds-border) dashed var(--ds-warn); background: var(--ds-warn-tint);
  color: var(--ds-warn); text-decoration: line-through; cursor: not-allowed;
}
/* 4 — unavailable globally: both warehouses zero. Dead everywhere. */
.size.is-oos-global {
  border-color: var(--ds-rule); background: var(--ds-paper-sunk);
  color: var(--ds-ink-5); text-decoration: line-through; cursor: not-allowed;
}
.size.is-oos-territory:hover, .size.is-oos-global:hover { background: var(--ds-paper-sunk); border-color: var(--ds-rule); }
.size.is-oos-territory:hover { background: var(--ds-warn-tint); border-color: var(--ds-warn); }

/* NOT a permanent element. The struck/dashed treatments are self-evident and
   each unavailable button carries a title attribute for the tooltip. The
   legend markup is retained only for the component-states harness. */
.sizes__legend { display: flex; flex-wrap: wrap; gap: var(--ds-s-2) var(--ds-s-5); }
.sizes__legenditem { display: inline-flex; align-items: center; gap: var(--ds-s-2); font-size: 13px; color: var(--ds-ink-4); }
.sizes__swatch { width: 14px; height: 14px; flex: none; border: var(--ds-border) solid var(--ds-ink-4); background: var(--ds-paper-raised); }
.sizes__swatch--territory { border-style: dashed; border-color: var(--ds-warn); background: var(--ds-warn-tint); }
.sizes__swatch--global { border-color: var(--ds-rule); background: var(--ds-paper-sunk); }

/* A STATE, not a fixture: shown only when a size is unavailable for this
   visitor. One line. */
.sizes__note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-s-2);
  border-left: var(--ds-border-strong) solid var(--ds-warn);
  padding: 2px var(--ds-s-3);
  font-size: var(--ds-t-body-sm); line-height: 1.35; color: #6d470e; margin: 0;
}
.sizes__note[hidden] { display: none; }

/* --- Tabs on the PDP ---------------------------------------------------- */
/* Directly under the gallery/buy-box row — no band, no spacer. The
   Description tab's text starts immediately under the bar. */
.pdptabs { margin-top: var(--ds-s-8); }
.pdptabs .tabpanel { padding-top: var(--ds-s-5); }

.attrtable, table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; max-width: 720px; }
.attrtable th, .attrtable td,
table.woocommerce-product-attributes th, table.woocommerce-product-attributes td {
  text-align: left; padding: var(--ds-s-3) var(--ds-s-4);
  border-bottom: var(--ds-border) solid var(--ds-rule);
  font-size: var(--ds-t-body-sm);
}
.attrtable th, table.woocommerce-product-attributes th {
  font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink-4); width: 46%; background: var(--ds-paper-raised);
}
.attrtable td, table.woocommerce-product-attributes td { color: var(--ds-ink); font-weight: 500; }

/* Feature icon cards — 5-up desktop, 2-up mobile. */
.featgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--ds-rule); border: var(--ds-border) solid var(--ds-rule); }
.featcard { background: var(--ds-paper-raised); padding: var(--ds-s-6) var(--ds-s-5); display: flex; flex-direction: column; gap: var(--ds-s-3); }
.featcard__icon { width: 44px; height: 44px; object-fit: contain; }
.featcard__title { font-family: var(--ds-font-ui); font-size: 15px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; line-height: 1.2; color: var(--ds-ink); margin: 0; }
.featcard__copy { font-size: 14.5px; line-height: 1.5; color: var(--ds-ink-3); margin: 0; }

/* Size-chart table — also reused on /size-charts/ later, so it is a component. */
.sizechart { width: 100%; max-width: 860px; border-collapse: collapse; }
.sizechart caption {
  text-align: left; font-family: var(--ds-font-ui); font-size: var(--ds-t-label);
  font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink); padding-bottom: var(--ds-s-3);
}
/* On a page where an h2 already names the table (Size Charts), the caption
   would print the same words twice. Keep it for screen readers, hide it from
   sight. The PDP's single inline chart has no h2, so it keeps its visible one. */
.page-body .sizechart caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; padding: 0;
}
.sizechart th, .sizechart td { padding: var(--ds-s-2) var(--ds-s-3); border: var(--ds-border) solid var(--ds-rule); font-size: var(--ds-t-body-sm); text-align: left; white-space: nowrap; }
.sizechart thead th {
  font-family: var(--ds-font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  background: var(--ds-ink); color: var(--ds-dark-text); border-color: var(--ds-ink);
}
.sizechart tbody th { font-family: var(--ds-font-ui); font-size: 16px; font-weight: 700; background: var(--ds-paper-raised); color: var(--ds-ink); }
.sizechart tbody tr:nth-child(even) td { background: var(--ds-paper-raised); }
/* Below the table's natural width the SCROLL REGION takes over — cells never
   wrap. "24.13 cm" broken across two lines is not a size chart. */
.sizechart__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sizechart__scroll .sizechart { min-width: 520px; }

/* Description tab: the comfort range is DATA, so it gets a labelled row
   rather than being buried as the last sentence of prose. */
.desc__bullets { margin: var(--ds-s-5) 0 0; padding-left: var(--ds-s-5); display: flex; flex-direction: column; gap: var(--ds-s-2); }
.desc__bullets li { font-size: var(--ds-t-body); line-height: var(--ds-lh-body); color: var(--ds-ink-3); }

/* The pillars mark's home on the PDP is the HEAD OF THE FEATURES TAB — it is
   out of the buy box entirely, which is reserved for price→title→rating→
   sizes→button. Once in the page body (DESIGN-SYSTEM §9). */
.feathead { display: flex; align-items: center; gap: var(--ds-s-6); padding-bottom: var(--ds-s-5); }
.brandstrip { display: flex; align-items: center; gap: var(--ds-s-6); border-block: var(--ds-border-strong) solid var(--ds-rule-strong); padding: var(--ds-s-6) 0; margin-top: var(--ds-section-y); }
.brandstrip__text { display: flex; flex-direction: column; gap: var(--ds-s-1); }
.brandstrip .pillars, .feathead .pillars { flex: none; }


/* ==========================================================================
   BRIEF 04 — CART · CHECKOUT · THANK-YOU
   Structure, order and behaviour are carried over from the FISHOOZ flow,
   which is production-proven. Everything visual is brief 01. These three
   pages are edge-bypassed, so server-rendered visitor-specific content is
   allowed here and nowhere else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25. CHECKOUT CHROME — stripped header, legal-strip footer
   The only chrome a checkout visitor sees. No nav, no search, no cart icon,
   no mega menu, no utility bar.
   -------------------------------------------------------------------------- */

.cohead { border-bottom: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper); }
.cohead__inner {
  max-width: var(--ds-max); margin-inline: auto;
  padding: var(--ds-s-4) var(--ds-pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-6);
}
.cohead__back {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink);
  display: inline-flex; align-items: center; gap: var(--ds-s-2); min-height: var(--ds-tap-min);
}
.cohead__back:hover { color: var(--ds-orange-action); }

.cofoot { border-top: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper); margin-top: var(--ds-s-16); }
.cofoot__inner {
  max-width: var(--ds-max); margin-inline: auto;
  padding: var(--ds-s-5) var(--ds-pad-x);
  display: flex; align-items: center; gap: var(--ds-s-6); flex-wrap: wrap;
  font-size: var(--ds-t-meta); color: var(--ds-ink-4);
}
.cofoot__links { display: flex; flex-wrap: wrap; gap: var(--ds-s-5); margin-left: auto; }
.cofoot__links a { color: var(--ds-ink-3); }
.cofoot__links a:hover { color: var(--ds-orange-action); }
.cardmarks { display: flex; gap: var(--ds-s-2); }
.cardmark {
  min-width: 42px; height: 26px; display: grid; place-items: center;
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  font-family: var(--ds-font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ds-track-micro); text-transform: uppercase; color: var(--ds-ink-4);
}

/* --------------------------------------------------------------------------
   26. CART
   -------------------------------------------------------------------------- */

.pagehead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ds-s-6); flex-wrap: wrap;
  padding-bottom: var(--ds-s-4); margin-bottom: var(--ds-s-5);
  border-bottom: var(--ds-border-struct) solid var(--ds-rule-strong);
}
.pagehead__title { font-family: var(--ds-font-display); font-size: 34px; font-weight: 700; text-transform: uppercase; line-height: 1; color: var(--ds-ink); margin: 0; }
.pagehead__count { font-family: var(--ds-font-ui); font-size: 17px; font-weight: 600; color: var(--ds-ink-4); margin-left: var(--ds-s-3); }
.pagehead__back { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); }
.pagehead__back:hover { color: var(--ds-orange-action); }

/* Free shipping: a STATIC FACT, not a threshold celebration. Dryshod ships
   free unconditionally, so there is nothing to unlock and nothing to hide.
   Deliberately quieter than .notice--ok — a success colour here would imply
   the visitor achieved something. */
.freeship {
  display: flex; align-items: center; gap: var(--ds-s-3);
  border: var(--ds-border) solid var(--ds-rule);
  border-left: var(--ds-border-struct) solid var(--ds-orange);
  background: var(--ds-paper-raised);
  padding: var(--ds-s-3) var(--ds-s-4); margin-bottom: var(--ds-s-6);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label);
  font-weight: 600; letter-spacing: var(--ds-track-label);
  text-transform: uppercase; color: var(--ds-ink);
}
.freeship svg { width: 17px; height: 17px; flex: none; color: var(--ds-orange-action); }

.cartlayout { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: var(--ds-s-10); align-items: start; }

.carttable { width: 100%; border-collapse: collapse; }
.carttable th {
  text-align: left; padding: 0 var(--ds-s-4) var(--ds-s-3);
  border-bottom: var(--ds-border-strong) solid var(--ds-rule-strong);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-4);
}
.carttable th:first-child, .carttable td:first-child { padding-left: 0; }
.carttable th:last-child, .carttable td:last-child { padding-right: 0; }
.carttable td { padding: var(--ds-s-5) var(--ds-s-4); border-bottom: var(--ds-border) solid var(--ds-rule); vertical-align: middle; }
.carttable .col-price, .carttable .col-total { white-space: nowrap; }
.carttable .col-total { font-weight: 700; }
.carttable .col-remove { width: 44px; text-align: right; }

.cartline { display: flex; align-items: center; gap: var(--ds-s-4); }
.cartline__thumb {
  width: 72px; height: 72px; flex: none;
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  overflow: hidden;
}
.cartline__thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--ds-s-1); }
.cartline__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cartline__name { font-family: var(--ds-font-display); font-size: 19px; font-weight: 600; text-transform: uppercase; line-height: 1.15; color: var(--ds-ink); margin: 0; }
.cartline__name a { color: inherit; }
.cartline__name a:hover { color: var(--ds-orange-action); }
.cartline__price { font-family: var(--ds-font-ui); font-weight: 600; color: var(--ds-ink); }

.qty {
  width: 72px; height: var(--ds-control-h-sm); padding: 0 var(--ds-s-2);
  border: var(--ds-border) solid var(--ds-ink-4); background: var(--ds-paper);
  font-family: var(--ds-font-ui); font-size: 16px; font-weight: 600; color: var(--ds-ink);
  text-align: center;
}
.qty:focus { outline: 0; border-color: var(--ds-ink); box-shadow: var(--ds-focus-ring); }

.remove {
  width: var(--ds-tap-min); height: var(--ds-tap-min);
  display: inline-grid; place-items: center; color: var(--ds-ink-5);
}
.remove:hover { color: var(--ds-error); }
.remove svg { width: 17px; height: 17px; }

.carttable__foot { display: flex; justify-content: flex-end; padding-top: var(--ds-s-5); }

/* Line-level blocked state. Deliberately the PDP's dashed-warn language (03)
   rather than the page notice's error red: the line is not an error, it is
   unavailable for THIS territory and still perfectly orderable elsewhere. */
.cart-line--blocked td { background: var(--ds-warn-tint); }
.cart-line--blocked .cartline__thumb { border: var(--ds-border) dashed var(--ds-warn); opacity: 0.7; }
.blockednote {
  display: flex; align-items: baseline; gap: var(--ds-s-2);
  font-size: var(--ds-t-meta); font-weight: 600; color: var(--ds-warn); margin: 2px 0 0;
}
.blockednote::before { content: "!"; display: inline-grid; place-items: center; width: 15px; height: 15px; flex: none; border: var(--ds-border-strong) solid var(--ds-warn); font-size: 11px; font-weight: 700; transform: translateY(2px); }

/* Woo prints the page-level version itself — .woocommerce-error on ul>li. */
.woocommerce-error {
  list-style: none; margin: 0 0 var(--ds-s-6); padding: var(--ds-s-4) var(--ds-s-5);
  border: var(--ds-border) solid var(--ds-error);
  border-left: var(--ds-border-struct) solid var(--ds-error);
  background: var(--ds-error-tint); color: #5e1a11;
  font-size: var(--ds-t-body-sm); line-height: 1.5;
}
.woocommerce-error li + li { margin-top: var(--ds-s-2); }
.woocommerce-error b { color: #4a140d; }
.woocommerce-notices-wrapper:empty { display: none; }

/* --- Sidebar cards -------------------------------------------------------- */
.sidecard { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); padding: var(--ds-s-5); }
.sidecard + .sidecard, .cartaside > * + * { margin-top: var(--ds-s-4); }
.cartaside { display: block; }
.sidecard__title {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink);
  margin: 0 0 var(--ds-s-4);
}
.couponrow { display: flex; gap: var(--ds-s-2); }
.couponrow .input { flex: 1; min-width: 0; height: var(--ds-control-h-sm); }
.couponrow .btn { flex: none; }

.sumrow[hidden] { display: none; }
.sumrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-s-4); padding: var(--ds-s-2) 0; font-size: var(--ds-t-body-sm); color: var(--ds-ink-3); }
.sumrow__value { font-family: var(--ds-font-ui); font-weight: 600; color: var(--ds-ink); }
.sumrow--free .sumrow__value { color: var(--ds-ok); letter-spacing: var(--ds-track-label); text-transform: uppercase; }
.sumrow--total {
  border-top: var(--ds-border-strong) solid var(--ds-rule-strong);
  margin-top: var(--ds-s-3); padding-top: var(--ds-s-4);
  font-family: var(--ds-font-ui); font-size: 17px; font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink);
}
.sumrow--total .sumrow__value { font-size: 22px; letter-spacing: 0.01em; }

/* The shipping-state control inside a summary card. */
.sidecard .shipstate--light,
.summary .shipstate--light,
.summaryacc__body .shipstate--light { width: 100%; justify-content: flex-start; margin-bottom: var(--ds-s-3); }
/* In a summary card the label IS the sentence — "PA · Change" alone is not a
   statement. The utility bar can drop it on mobile because the bar's own
   context supplies it; inside a card nothing does. */
.sidecard .shipstate__label,
.summary .shipstate__label,
.summaryacc__body .shipstate__label { display: inline !important; }

.securenote { display: flex; align-items: center; justify-content: center; gap: var(--ds-s-2); margin-top: var(--ds-s-3); font-size: var(--ds-t-meta); color: var(--ds-ink-4); }
.securenote svg { width: 13px; height: 13px; flex: none; }

.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ds-rule); border: var(--ds-border) solid var(--ds-rule); }
.trust__cell { background: var(--ds-paper-raised); padding: var(--ds-s-4) var(--ds-s-2); display: flex; flex-direction: column; align-items: center; gap: var(--ds-s-2); text-align: center; }
.trust__cell svg { width: 20px; height: 20px; color: var(--ds-orange-action); }
.trust__label { font-family: var(--ds-font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); line-height: 1.2; }
.trust__sub { font-size: 12px; color: var(--ds-ink-4); }
/* Checkout sidebar is 372px across three cells — the sub-lines make the
   labels wrap. Labels carry the meaning; the sub-lines are trim. Cart keeps
   its full-width strip. */
.checkout__aside .trust__sub, .summaryacc__body .trust__sub { display: none; }

/* Empty cart. Toggled by data-state on the page root — see DESIGN-SYSTEM §16. */
[data-state="empty"] .cartlayout, [data-state="empty"] .freeship { display: none; }
.cartempty { display: none; flex-direction: column; align-items: flex-start; gap: var(--ds-s-4); padding: var(--ds-s-16) 0 var(--ds-s-20); }
[data-state="empty"] .cartempty { display: flex; }
.cartempty__rule { width: 56px; height: var(--ds-border-struct); background: var(--ds-orange); }
.cartempty__links { display: flex; flex-wrap: wrap; gap: var(--ds-s-5); margin-top: var(--ds-s-2); }
.cartempty__links a { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); border-bottom: var(--ds-border-strong) solid var(--ds-orange); padding-bottom: 2px; }
.cartempty__links a:hover { color: var(--ds-orange-action); }

/* --------------------------------------------------------------------------
   27. CHECKOUT — coupon disclosure, step cards, order summary
   -------------------------------------------------------------------------- */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: var(--ds-s-10); align-items: start; }

.coupondisclose { font-size: var(--ds-t-body-sm); color: var(--ds-ink-3); margin: 0 0 var(--ds-s-5); }
.coupondisclose button {
  font-family: inherit; font-size: inherit; font-weight: 600;
  color: var(--ds-orange-action); border-bottom: var(--ds-border) solid currentColor;
}
.couponreveal[hidden] { display: none; }
.couponreveal {
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  padding: var(--ds-s-4); margin-bottom: var(--ds-s-5);
  display: flex; gap: var(--ds-s-3); max-width: 480px;
}
.couponreveal .input { flex: 1; min-width: 0; }

/* --- Step card, three states --------------------------------------------- */
.step { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); }
.step + .step { margin-top: var(--ds-s-4); }
.step__head { display: flex; align-items: center; gap: var(--ds-s-4); padding: var(--ds-s-5); }
.step__num {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  font-family: var(--ds-font-ui); font-size: 15px; font-weight: 700;
  background: var(--ds-paper-sunk); color: var(--ds-ink-5);
  border: var(--ds-border) solid var(--ds-rule);
}
.step__title { font-family: var(--ds-font-display); font-size: 21px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ds-ink-4); margin: 0; }
.step__body { padding: 0 var(--ds-s-5) var(--ds-s-5); display: none; flex-direction: column; gap: var(--ds-s-4); }
.step__value { font-size: var(--ds-t-body-sm); color: var(--ds-ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step__edit { margin-left: auto; flex: none; font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-orange-action); border-bottom: var(--ds-border) solid currentColor; }

/* open — the ink-filled badge is the only "you are here" marker */
.step.is-open { border-color: var(--ds-ink); border-width: var(--ds-border-strong); }
.step.is-open .step__num { background: var(--ds-ink); color: var(--ds-paper); border-color: var(--ds-ink); }
.step.is-open .step__title { color: var(--ds-ink); }
.step.is-open .step__body { display: flex; }
.step.is-open .step__head { padding-bottom: var(--ds-s-4); }

/* completed — check badge, entered value, Edit */
.step.is-done .step__num { background: var(--ds-ok); border-color: var(--ds-ok); color: #fff; font-size: 0; }
.step.is-done .step__num::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -2px); }
.step.is-done .step__title { color: var(--ds-ink); font-size: 18px; }

/* future — muted number and title, nothing else */
.step.is-future .step__title { color: var(--ds-ink-5); }

.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-4); }
.formgrid--three { grid-template-columns: 1fr 1fr 132px; }
.formgrid--full { grid-template-columns: minmax(0, 1fr); }
.req { color: var(--ds-error); margin-left: 2px; }

.adddisclose {
  align-self: flex-start;
  font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--ds-orange-action);
  border-bottom: var(--ds-border) solid currentColor; min-height: 28px;
}
.checkline { display: flex; align-items: flex-start; gap: var(--ds-s-3); cursor: pointer; font-size: var(--ds-t-body-sm); color: var(--ds-ink-2); min-height: var(--ds-tap-min); align-items: center; }
.checkline input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; flex: none; margin: 0;
  border: var(--ds-border-strong) solid var(--ds-ink-4); background: var(--ds-paper);
  display: grid; place-items: center;
}
.checkline input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--ds-paper); border-bottom: 2px solid var(--ds-paper); transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.checkline input[type="checkbox"]:checked { background: var(--ds-ink); border-color: var(--ds-ink); }
.checkline input[type="checkbox"]:checked::after { opacity: 1; }
.checkline input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }

.billingblock[hidden] { display: none; }
.billingblock { display: flex; flex-direction: column; gap: var(--ds-s-4); border-top: var(--ds-border) solid var(--ds-rule); padding-top: var(--ds-s-4); }

/* --- Payment -------------------------------------------------------------- */
.securemicro { display: flex; align-items: center; gap: var(--ds-s-2); font-size: var(--ds-t-meta); color: var(--ds-ink-4); }
.securemicro svg { width: 13px; height: 13px; flex: none; }

ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; border: var(--ds-border) solid var(--ds-rule); }
ul.wc_payment_methods > li + li { border-top: var(--ds-border) solid var(--ds-rule); }
.wc_payment_method > label {
  display: flex; align-items: center; gap: var(--ds-s-3);
  padding: var(--ds-s-4) var(--ds-s-5); cursor: pointer; min-height: var(--ds-tap-min);
  font-family: var(--ds-font-ui); font-size: 16px; font-weight: 600; color: var(--ds-ink);
}
.wc_payment_method input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; border-radius: var(--ds-radius-pill);
  border: var(--ds-border-strong) solid var(--ds-ink-4); background: var(--ds-paper);
  display: grid; place-items: center;
}
.wc_payment_method input[type="radio"]:checked { border-color: var(--ds-ink); }
.wc_payment_method input[type="radio"]:checked::after { content: ""; width: 9px; height: 9px; border-radius: var(--ds-radius-pill); background: var(--ds-ink); }
.wc_payment_method input[type="radio"]:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }
/* Single method: no choice to make, so no radio to render. */
.wc_payment_methods--single .wc_payment_method input[type="radio"] { display: none; }
.wc_payment_method .cardmarks { margin-left: auto; }

/* The gateway renders the inside. We own the container and ONE generic field
   row that the gateway's fields inherit through element selectors — same
   contract as the filter plugin (02) and BazaarVoice (03). PayTrace and
   Braintree emit different markup; neither is designed here. */
.payment-panel {
  border-top: var(--ds-border) solid var(--ds-rule);
  background: var(--ds-paper-sunk);
  padding: var(--ds-s-5);
  display: flex; flex-direction: column; gap: var(--ds-s-4);
}
.payment-panel label {
  display: block; margin-bottom: var(--ds-s-2);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-sm); font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-3);
}
.payment-panel input,
.payment-panel iframe,
.payment-panel .braintree-hosted-field,
.payment-panel [data-paytrace-field] {
  display: block; width: 100%;
  height: var(--ds-control-h); padding: 0 var(--ds-s-4);
  border: var(--ds-border) solid var(--ds-ink-4); background: var(--ds-paper);
  font-family: var(--ds-font-ui); font-size: 16px; color: var(--ds-ink);
}
.payment-panel input:focus { outline: 0; border-color: var(--ds-ink); box-shadow: var(--ds-focus-ring); }
.payment-panel__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-4); }

.privacytext { font-size: var(--ds-t-body-sm); line-height: 1.55; color: var(--ds-ink-3); margin: 0; }

/* Cloudflare Turnstile, managed widget, fixed 300×65, plugin-rendered. */
.turnstile-slot {
  width: 300px; height: 65px;
  border: var(--ds-border) dashed var(--ds-ink-4); background: var(--ds-paper-sunk);
  display: grid; place-items: center; text-align: center;
  font-family: var(--ds-font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase; color: var(--ds-ink-4);
}

/* --- Order Summary -------------------------------------------------------- */
.summary { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); padding: var(--ds-s-5); }
.summary--sticky { position: sticky; top: var(--ds-s-5); }
.sumline { display: flex; align-items: flex-start; gap: var(--ds-s-3); padding: var(--ds-s-3) 0; }
.sumline + .sumline { border-top: var(--ds-border) solid var(--ds-rule); }
.sumline__thumb { width: 52px; height: 52px; flex: none; border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper); overflow: hidden; }
.sumline__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sumline__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sumline__name { font-size: var(--ds-t-body-sm); font-weight: 600; color: var(--ds-ink); line-height: 1.3; }
.sumline__price { margin-left: auto; flex: none; font-family: var(--ds-font-ui); font-weight: 700; color: var(--ds-ink); }
.sumline--blocked { background: var(--ds-warn-tint); }
.sumline--blocked .sumline__thumb { border-style: dashed; border-color: var(--ds-warn); opacity: 0.7; }
.summary__rows { border-top: var(--ds-border-strong) solid var(--ds-rule-strong); margin-top: var(--ds-s-3); padding-top: var(--ds-s-3); }
.summary__terms { font-size: var(--ds-t-meta); line-height: 1.5; color: var(--ds-ink-4); margin: var(--ds-s-4) 0 0; }
/* Read-only variant: at checkout the State select IS the control, so this
   line reflects it rather than opening the picker. No "· change". */
.shipstate--ro { cursor: default; pointer-events: none; }
.shipstate--ro .shipstate__sep, .shipstate--ro .shipstate__action { display: none; }

/* Mobile accordion form of the same card. */
.summaryacc { display: none; border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); margin-bottom: var(--ds-s-5); }
.summaryacc__toggle {
  width: 100%; display: flex; align-items: center; gap: var(--ds-s-3);
  padding: var(--ds-s-4) var(--ds-s-5); min-height: var(--ds-tap-min);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink);
}
.summaryacc__total { margin-left: auto; font-size: 17px; }
.summaryacc__chev { width: 9px; height: 9px; flex: none; border-right: 2px solid var(--ds-ink-4); border-bottom: 2px solid var(--ds-ink-4); transform: rotate(45deg); margin-bottom: 3px; }
.summaryacc__toggle[aria-expanded="true"] .summaryacc__chev { transform: rotate(-135deg); margin-bottom: 0; }
.summaryacc__body { padding: 0 var(--ds-s-5) var(--ds-s-5); }
.summaryacc__body[hidden] { display: none; }

/* --------------------------------------------------------------------------
   28. THANK-YOU
   -------------------------------------------------------------------------- */

.confirm { background: var(--ds-paper-raised); border-bottom: var(--ds-border) solid var(--ds-rule); }
.confirm__inner {
  max-width: 720px; margin-inline: auto; padding: var(--ds-s-12) var(--ds-pad-x) var(--ds-s-12);
  display: flex; flex-direction: column; align-items: center; gap: var(--ds-s-4); text-align: center;
}
.confirm__check {
  width: 54px; height: 54px; flex: none; display: grid; place-items: center;
  border: var(--ds-border-struct) solid var(--ds-ok); border-radius: var(--ds-radius-pill);
  color: var(--ds-ok);
}
.confirm__check svg { width: 25px; height: 25px; }
.confirm__title { font-family: var(--ds-font-display); font-size: 42px; font-weight: 700; text-transform: uppercase; line-height: 1.02; color: var(--ds-ink); margin: 0; }
.confirm__sub { font-size: var(--ds-t-body); color: var(--ds-ink-3); margin: 0; }
.orderpill {
  display: inline-flex; align-items: center; gap: var(--ds-s-3);
  border: var(--ds-border-strong) solid var(--ds-ink); background: var(--ds-paper);
  padding: var(--ds-s-2) var(--ds-s-2) var(--ds-s-2) var(--ds-s-4);
  font-family: var(--ds-font-ui); font-size: 17px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--ds-ink);
}
.orderpill__copy {
  display: inline-flex; align-items: center; gap: var(--ds-s-2);
  min-height: 32px; padding: 0 var(--ds-s-3);
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  font-size: 13px; font-weight: 600; letter-spacing: var(--ds-track-label);
  text-transform: uppercase; color: var(--ds-ink-3);
}
.orderpill__copy:hover { border-color: var(--ds-ink); color: var(--ds-ink); }
.confirm__email { font-size: var(--ds-t-body-sm); color: var(--ds-ink-3); margin: 0; }

.tybody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ds-s-8); align-items: start; }

.orderdetails { border: var(--ds-border) solid var(--ds-rule); }
.orderdetails__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-s-4); flex-wrap: wrap;
  background: var(--ds-ink); color: var(--ds-dark-text);
  padding: var(--ds-s-4) var(--ds-s-5);
}
.orderdetails__title { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; margin: 0; }
.orderdetails__placed { font-size: var(--ds-t-meta); color: var(--ds-dark-text-3); }
.orderdetails__body { padding: var(--ds-s-2) var(--ds-s-5) var(--ds-s-5); background: var(--ds-paper-raised); }
.sumline__qty { font-size: var(--ds-t-meta); color: var(--ds-ink-4); }
.sumrow--paid { font-size: 19px; }
.sumrow--paid .sumrow__value { font-size: 24px; }

.whatsnext { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); padding: var(--ds-s-5); }
.whatsnext__list { display: flex; flex-direction: column; }
.whatsnext__item { display: flex; gap: var(--ds-s-4); padding: var(--ds-s-4) 0; }
.whatsnext__item + .whatsnext__item { border-top: var(--ds-border) solid var(--ds-rule); }
.whatsnext__icon { width: 22px; height: 22px; flex: none; color: var(--ds-orange-action); margin-top: 2px; }
.whatsnext__heading { font-family: var(--ds-font-ui); font-size: 15px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); margin: 0 0 3px; }
.whatsnext__copy { font-size: var(--ds-t-body-sm); color: var(--ds-ink-3); margin: 0; line-height: 1.45; }


/* ==========================================================================
   BRIEF 05 — INSIDE PAGES · STORES · 404 · NEWS · FORMS
   One inside template for all 12 pages. The block vocabulary below is the
   whole list — every block appears on at least one live page. Do not add to
   it without a page that needs it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   29. INSIDE PAGE — shell and measures
   Page measure 1140 (matching the PDP). Reading measure 720: at 19px/1.65
   that is ~72 characters, the top of the comfortable range for long legal
   prose, which is what most of these pages are.
   -------------------------------------------------------------------------- */

.wrap--page, .breadcrumb--page { max-width: 1140px; }
.section--page { padding-block: var(--ds-s-6) var(--ds-s-20); }
.page-measure { max-width: 720px; }

.page-title {
  font-family: var(--ds-font-display); font-size: 40px; font-weight: 700;
  text-transform: uppercase; line-height: 1.04; color: var(--ds-ink);
  margin: 0 0 var(--ds-s-6); max-width: 20ch;
  /* Live titles run to 40 characters ("Contact Dryshod Waterproof Footwear").
     Balanced wrapping keeps a long one from leaving an orphan. */
  text-wrap: balance;
}

/* Lead image — capped so the H1 and the first paragraph stay above the fold.
   340px is the largest cap that still clears 900 with the 01 chrome. */
.page-lead { margin: 0 0 var(--ds-s-8); }
.page-lead img { width: 100%; height: 340px; object-fit: cover; display: block; }
/* A page carrying BOTH a lead image and a jump strip has ~100px less budget
   before the first section heading. Use this cap there. */
.page-lead--compact img { height: 240px; }

/* --------------------------------------------------------------------------
   30. BLOCK VOCABULARY — everything inside .page-body
   Styled by ELEMENT, because the content is WordPress core output and Code
   maps this onto the_content() with no class hooks. Same contract as the
   filter plugin (§12) and WPForms (§31).
   -------------------------------------------------------------------------- */

.page-body { font-size: var(--ds-t-body); line-height: var(--ds-lh-body); color: var(--ds-ink-2); }
.page-body > * { max-width: 720px; }
.page-body p { margin: 0 0 var(--ds-s-5); }
.page-body h2 {
  font-family: var(--ds-font-display); font-size: 27px; font-weight: 600;
  text-transform: uppercase; line-height: 1.1; color: var(--ds-ink);
  margin: var(--ds-s-12) 0 var(--ds-s-4);
  padding-top: var(--ds-s-4); border-top: var(--ds-border-strong) solid var(--ds-rule-strong);
  /* Anchor targets on merged pages must clear the header when jumped to. */
  scroll-margin-top: var(--ds-s-6);
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 {
  font-family: var(--ds-font-ui); font-size: 18px; font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink); margin: var(--ds-s-8) 0 var(--ds-s-3);
  scroll-margin-top: var(--ds-s-6);
}
.page-body ul, .page-body ol { margin: 0 0 var(--ds-s-5); padding-left: var(--ds-s-6); display: flex; flex-direction: column; gap: var(--ds-s-2); }
.page-body li { line-height: var(--ds-lh-body); }
.page-body strong { color: var(--ds-ink); font-weight: 700; }
.page-body a { color: var(--ds-orange-action); border-bottom: var(--ds-border) solid currentColor; }
.page-body a:hover { color: var(--ds-orange-press); }
.page-body hr { border: 0; border-top: var(--ds-border-strong) solid var(--ds-rule-strong); margin: var(--ds-s-10) 0; }

/* :target — a heading arrived at from a 301'd child URL. Marks itself once
   so the visitor can see the redirect landed where it meant to. */
.page-body h2:target, .page-body h3:target { box-shadow: -12px 0 0 var(--ds-orange); }

/* Figures may break the reading measure — a layer diagram at 720 is unreadable. */
.page-body figure { margin: var(--ds-s-8) 0; max-width: 900px; }
.page-body figure img { width: 100%; height: auto; border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); }
.page-body figcaption {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-meta); font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink-4); margin-top: var(--ds-s-2);
}
/* A row of diagram figures, not four full-size diagrams. Capped at 180px and
   contained on a light ground so the row costs ~230px instead of ~880 — which
   is what lets the first section heading clear the fold on Features. Each one
   links to the full graphic; two of the four already do on the live page. */
.page-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s-4); max-width: 900px; margin: 0 0 var(--ds-s-8); }
.page-figs figure { margin: 0; max-width: none; }
/* Specificity note: .page-body figure img sets height:auto at (0,1,2), so a
   plain .page-figs img (0,1,1) loses and the cap silently does nothing. This
   selector is (0,1,2) AND later in source, so it wins. Do not "simplify" it. */
.page-figs figure img { height: 180px; object-fit: contain; padding: var(--ds-s-3); background: var(--ds-paper-raised); }
.page-figs figcaption { font-size: 12px; }

/* Section with CTA link — the About hub is four of these. */
.page-section { border-top: var(--ds-border-strong) solid var(--ds-rule-strong); padding-top: var(--ds-s-5); margin-top: var(--ds-s-8); max-width: 720px; }
.page-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.link-rule {
  display: inline-flex; align-items: center; gap: var(--ds-s-2);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink); border-bottom: var(--ds-border-strong) solid var(--ds-orange);
  padding-bottom: 2px; min-height: 32px;
}
.link-rule:hover { color: var(--ds-orange-action); }

/* Feature entry — ten in a run on the Features page. The rule + eyebrow-weight
   tagline is what stops ten of them reading as a wall of bold paragraphs. */
.feature-entry { border-top: var(--ds-border) solid var(--ds-rule); padding: var(--ds-s-5) 0; max-width: 720px; }
.feature-entry__name {
  font-family: var(--ds-font-ui); font-size: 16px; font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase;
  color: var(--ds-ink); margin: 0;
}
.feature-entry__tag { font-size: var(--ds-t-body-sm); color: var(--ds-orange-action); font-weight: 600; margin: 3px 0 0; }
.feature-entry__body { margin: var(--ds-s-3) 0 0; }
.feature-entry .link-rule { margin-top: var(--ds-s-3); font-size: 14px; }

/* Quiet callout — Return Policy's "must be returned in new condition…". */
.page-callout {
  border-left: var(--ds-border-struct) solid var(--ds-orange);
  background: var(--ds-paper-raised);
  padding: var(--ds-s-4) var(--ds-s-5); margin: var(--ds-s-6) 0; max-width: 720px;
  font-size: var(--ds-t-body-sm); color: var(--ds-ink-2);
}

/* 16:9 embed. */
.page-embed { position: relative; aspect-ratio: 16 / 9; background: var(--ds-ink); max-width: 900px; margin: var(--ds-s-8) 0; }
.page-embed iframe, .page-embed > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Address blocks — Contact, two up. */
.addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-6); max-width: 900px; margin: var(--ds-s-8) 0 0; }
.address { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); padding: var(--ds-s-5); }
.address h3 { margin-top: 0; }
.address__division { font-size: var(--ds-t-body-sm); color: var(--ds-ink-4); margin: 0 0 var(--ds-s-3); }
.address__lines { font-size: var(--ds-t-body-sm); line-height: 1.55; color: var(--ds-ink-2); margin: 0 0 var(--ds-s-3); }
.address dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--ds-s-3); margin: 0; font-size: var(--ds-t-body-sm); }
.address dt { font-family: var(--ds-font-ui); font-weight: 600; letter-spacing: 0.02em; color: var(--ds-ink-4); }
.address dd { margin: 0; color: var(--ds-ink); }

/* --------------------------------------------------------------------------
   31. "ON THIS PAGE" JUMP STRIP
   Merged pages run 1,000+ words across 17 headings. A horizontal strip under
   the H1 does the job a sidebar sub-nav would, without a sidebar (§14).
   RENDER ONLY when the page has 4+ h2 sections.
   -------------------------------------------------------------------------- */

/* Renders only when the page has 5+ h2 sections. Labels are the REAL heading
   text — Code has no source for a short form. So the strip is one line of
   pills that scroll horizontally at every width; a long label truncates with
   an ellipsis and keeps its full text in the title attribute. */
.jumpstrip {
  border-block: var(--ds-border) solid var(--ds-rule);
  padding: var(--ds-s-3) 0; margin: 0 0 var(--ds-s-8);
  display: flex; align-items: center; gap: var(--ds-s-4);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.jumpstrip::-webkit-scrollbar { display: none; }
.jumpstrip__label {
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-5);
  flex: none;
}
.jumpstrip__links { display: flex; flex-wrap: nowrap; gap: var(--ds-s-2); }
.jumpstrip a {
  flex: none; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: 32px; display: inline-flex; align-items: center;
  padding: 0 var(--ds-s-3);
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--ds-ink-3);
}
.jumpstrip a:hover { color: var(--ds-ink); border-color: var(--ds-ink-4); }
.jumpstrip a[aria-current="true"] { color: var(--ds-ink); border-color: var(--ds-ink); background: var(--ds-paper); box-shadow: inset 0 -2px 0 var(--ds-orange); }

/* --------------------------------------------------------------------------
   32. FORMS (WPForms)
   The plugin renders the markup. Styled by ELEMENT inside .wpforms-container
   so Code's mapping is 1:1 and nothing needs renaming. Reading measure.
   -------------------------------------------------------------------------- */

.wpforms-container { max-width: 720px; }
.wpforms-field { margin-bottom: var(--ds-s-5); }
.wpforms-field-label {
  display: block; margin-bottom: var(--ds-s-2);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-sm); font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-3);
}
.wpforms-required-label { color: var(--ds-error); margin-left: 2px; }
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field textarea {
  width: 100%; height: var(--ds-control-h); padding: 0 var(--ds-s-4);
  border: var(--ds-border) solid var(--ds-ink-4); background: var(--ds-paper);
  font-family: var(--ds-font-body); font-size: 16px; color: var(--ds-ink);
}
.wpforms-field textarea { height: auto; min-height: 148px; padding: var(--ds-s-3) var(--ds-s-4); line-height: 1.5; resize: vertical; }
.wpforms-field input:hover, .wpforms-field textarea:hover { border-color: var(--ds-ink-3); }
.wpforms-field input:focus, .wpforms-field textarea:focus { outline: 0; border-color: var(--ds-ink); box-shadow: var(--ds-focus-ring); }
.wpforms-field-description { margin: var(--ds-s-2) 0 0; font-size: var(--ds-t-meta); color: var(--ds-ink-4); }

/* Name field: two inputs with sublabels. */
.wpforms-field-name .wpforms-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-4); }
.wpforms-field-sublabel { display: block; margin-top: var(--ds-s-1); font-size: var(--ds-t-meta); color: var(--ds-ink-5); }

.wpforms-field-radio ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wpforms-field-radio li { display: flex; align-items: center; gap: var(--ds-s-3); min-height: var(--ds-tap-min); }
.wpforms-field-radio input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; border-radius: var(--ds-radius-pill);
  border: var(--ds-border-strong) solid var(--ds-ink-4); background: var(--ds-paper);
  display: grid; place-items: center;
}
.wpforms-field-radio input[type="radio"]:checked { border-color: var(--ds-ink); }
.wpforms-field-radio input[type="radio"]:checked::after { content: ""; width: 9px; height: 9px; border-radius: var(--ds-radius-pill); background: var(--ds-ink); }
.wpforms-field-radio input[type="radio"]:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }
.wpforms-field-radio label { font-size: var(--ds-t-body-sm); color: var(--ds-ink-2); cursor: pointer; }

/* File upload drop zone. */
.wpforms-field-file-upload .wpforms-uploader {
  border: var(--ds-border) dashed var(--ds-ink-4); background: var(--ds-paper-raised);
  padding: var(--ds-s-8) var(--ds-s-5); text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--ds-s-2);
}
.wpforms-field-file-upload .wpforms-uploader:hover { border-color: var(--ds-ink); background: var(--ds-paper-sunk); }
.wpforms-uploader__primary { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); }
.wpforms-uploader__secondary { font-size: var(--ds-t-meta); color: var(--ds-ink-4); }

/* Error state. */
.wpforms-field.wpforms-has-error input,
.wpforms-field.wpforms-has-error textarea { border-color: var(--ds-error); border-width: var(--ds-border-strong); }
label.wpforms-error, .wpforms-error-message { display: block; margin-top: var(--ds-s-2); font-size: var(--ds-t-meta); font-weight: 600; color: var(--ds-error); }

/* Confirmation, post-submit. */
.wpforms-confirmation-container-full {
  border: var(--ds-border) solid var(--ds-ok);
  border-left: var(--ds-border-struct) solid var(--ds-ok);
  background: var(--ds-ok-tint); color: #1e4a2b;
  padding: var(--ds-s-5) var(--ds-s-6); max-width: 720px;
  font-size: var(--ds-t-body-sm); line-height: 1.55;
}
.wpforms-confirmation-container-full p { margin: 0; }

.wpforms-submit-container { margin-top: var(--ds-s-6); }
.captcha-slot {
  width: 300px; height: 65px; margin-bottom: var(--ds-s-5);
  border: var(--ds-border) dashed var(--ds-ink-4); background: var(--ds-paper-sunk);
  display: grid; place-items: center; text-align: center;
  font-family: var(--ds-font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase; color: var(--ds-ink-4);
}

/* --------------------------------------------------------------------------
   33. STORES — WP Store Locator + the online-stores list
   Both plugin-rendered. IDs are the plugins'; we style containers and
   element-level items only, never the map tiles, pins or controls.
   -------------------------------------------------------------------------- */

.storeslayout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ds-s-10); align-items: start; }

#wpsl-wrap { display: flex; flex-direction: column; gap: var(--ds-s-5); }
#wpsl-search-wrap {
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  padding: var(--ds-s-5);
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px auto; gap: var(--ds-s-4); align-items: end;
}
#wpsl-search-wrap label {
  display: block; margin-bottom: var(--ds-s-2);
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label-sm); font-weight: 600;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-3);
}
#wpsl-search-input, #wpsl-search-wrap select {
  width: 100%; height: var(--ds-control-h); padding: 0 var(--ds-s-4);
  border: var(--ds-border) solid var(--ds-ink-4); background: var(--ds-paper);
  font-family: var(--ds-font-body); font-size: 16px; color: var(--ds-ink);
}
#wpsl-search-input:focus, #wpsl-search-wrap select:focus { outline: 0; border-color: var(--ds-ink); box-shadow: var(--ds-focus-ring); }

/* Google owns everything inside. We own the box. */
#wpsl-gmap { height: 420px; background: var(--ds-paper-sunk); border: var(--ds-border) solid var(--ds-rule); }

/* Result list is a scroll region matched to the map height, as live. */
#wpsl-result-list { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); max-height: 420px; overflow-y: auto; }
#wpsl-stores ul { list-style: none; margin: 0; padding: 0; }
#wpsl-stores li { padding: var(--ds-s-4) var(--ds-s-5); border-bottom: var(--ds-border) solid var(--ds-rule); font-size: var(--ds-t-body-sm); line-height: 1.5; color: var(--ds-ink-2); }
#wpsl-stores li:last-child { border-bottom: 0; }
#wpsl-stores li:hover { background: var(--ds-paper-sunk); }
#wpsl-stores .wpsl-store-name { display: block; font-family: var(--ds-font-ui); font-size: 16px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); margin-bottom: 3px; }
#wpsl-stores .wpsl-street, #wpsl-stores .wpsl-city { display: block; }
#wpsl-stores .wpsl-contact-details { margin-top: var(--ds-s-2); }
#wpsl-stores .wpsl-distance { font-family: var(--ds-font-ui); font-weight: 600; color: var(--ds-ink-4); }
#wpsl-stores .wpsl-directions { display: inline-block; margin-top: var(--ds-s-2); font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-orange-action); border-bottom: var(--ds-border) solid currentColor; }
#wpsl-result-list .wpsl-no-results { padding: var(--ds-s-8) var(--ds-s-5); text-align: center; color: var(--ds-ink-4); font-size: var(--ds-t-body-sm); }

/* Online stores: locator.js randomizes the order, so this must look right in
   any order — no visual hierarchy between items, no "first item" treatment. */
.onlinestores { border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); padding: var(--ds-s-5); }
.onlinestores--sticky { position: sticky; top: var(--ds-s-5); }
#menu-dryshod-online-shops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#menu-dryshod-online-shops li { border-top: var(--ds-border) solid var(--ds-rule); }
#menu-dryshod-online-shops li:first-child { border-top: 0; }
#menu-dryshod-online-shops li > a {
  display: block; padding: var(--ds-s-3) 0; min-height: var(--ds-tap-min);
  font-family: var(--ds-font-ui); font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ds-ink-2);
}
#menu-dryshod-online-shops li > a:hover { color: var(--ds-orange-action); }

/* --------------------------------------------------------------------------
   34. 404
   -------------------------------------------------------------------------- */

.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-s-5); padding: var(--ds-s-16) 0 var(--ds-s-20); max-width: 720px; }
.notfound__code { font-family: var(--ds-font-display); font-size: 110px; font-weight: 700; line-height: 0.86; letter-spacing: -0.01em; color: var(--ds-ink); margin: 0; }
.notfound__rule { width: 56px; height: var(--ds-border-struct); background: var(--ds-orange); }
.searchrow { display: flex; gap: var(--ds-s-2); width: 100%; max-width: 480px; }
.searchrow .input { flex: 1; min-width: 0; }
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--ds-s-5); margin-top: var(--ds-s-2); }
.notfound__links a { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); border-bottom: var(--ds-border-strong) solid var(--ds-orange); padding-bottom: 2px; }
.notfound__links a:hover { color: var(--ds-orange-action); }

/* --------------------------------------------------------------------------
   35. NEWS — archive and single
   Launches empty. The empty state is the state that ships.
   -------------------------------------------------------------------------- */

.postlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-8); }
.postcard { display: flex; flex-direction: column; }
.postcard__stage { aspect-ratio: 16 / 9; background: var(--ds-paper-raised); border: var(--ds-border) solid var(--ds-rule); overflow: hidden; }
.postcard__stage img { width: 100%; height: 100%; object-fit: cover; }
.postcard__date { font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-5); margin: var(--ds-s-4) 0 var(--ds-s-2); }
.postcard__title { font-family: var(--ds-font-display); font-size: 24px; font-weight: 600; text-transform: uppercase; line-height: 1.12; color: var(--ds-ink); margin: 0 0 var(--ds-s-2); }
.postcard:hover .postcard__title { color: var(--ds-orange-action); }
.postcard__excerpt { font-size: var(--ds-t-body-sm); line-height: 1.55; color: var(--ds-ink-3); margin: 0; }

[data-state="empty"] .postlist, [data-state="empty"] .navigation.pagination { display: none; }
.newsempty { display: none; flex-direction: column; align-items: flex-start; gap: var(--ds-s-4); padding: var(--ds-s-12) 0 var(--ds-s-16); }
[data-state="empty"] .newsempty { display: flex; }

/* WP's own pagination markup — the one archive that paginates. */
.navigation.pagination { margin-top: var(--ds-s-12); border-top: var(--ds-border-strong) solid var(--ds-rule-strong); padding-top: var(--ds-s-6); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--ds-s-2); align-items: center; }
.navigation.pagination .page-numbers {
  min-width: var(--ds-tap-min); min-height: var(--ds-tap-min);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--ds-s-3);
  border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
  font-family: var(--ds-font-ui); font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--ds-ink-2);
}
.navigation.pagination a.page-numbers:hover { border-color: var(--ds-ink); color: var(--ds-ink); }
.navigation.pagination .page-numbers.current { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-paper); }
.navigation.pagination .page-numbers.dots { border-color: transparent; background: none; color: var(--ds-ink-5); }
.navigation.pagination .next, .navigation.pagination .prev { text-transform: uppercase; letter-spacing: var(--ds-track-label); }

.postmeta { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-4); margin: 0 0 var(--ds-s-6); }
.backlink { display: inline-flex; align-items: center; gap: var(--ds-s-2); margin-top: var(--ds-s-10); padding-top: var(--ds-s-5); border-top: var(--ds-border-strong) solid var(--ds-rule-strong); font-family: var(--ds-font-ui); font-size: var(--ds-t-label); font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); }
.backlink:hover { color: var(--ds-orange-action); }

/* --------------------------------------------------------------------------
   36. MEGA MENU — Featured slot thumbnail panel (brief 05 §1)
   -------------------------------------------------------------------------- */

.mega__featured--panel { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: var(--ds-s-5); align-items: start; }
.mega__thumb {
  aspect-ratio: 1 / 1; background: var(--ds-dark-bg-2);
  border: var(--ds-border) solid var(--ds-dark-rule); overflow: hidden;
  display: grid; place-items: center; text-align: center;
  font-family: var(--ds-font-ui); font-size: 10px; font-weight: 600;
  letter-spacing: var(--ds-track-eyebrow); text-transform: uppercase; color: var(--ds-dark-text-4);
  padding: var(--ds-s-2);
}
.mega__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   RESPONSIVE  —  @media (max-width) — was @container page in the design package, same values
   ========================================================================== */

@media (max-width: 1240px) {
  .nav__link { padding: 0 var(--ds-s-3); font-size: 17px; }
  .tool { padding: 0 var(--ds-s-4); }
}

@media (max-width: 1100px) {
  .tool--search span { display: none; }
  .tool--search { padding-inline: var(--ds-s-4); }
  .footer__cols { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .mega__inner { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ds-s-8); }
  .mega__feature { grid-column: 1 / -1; border-left: 0; border-top: var(--ds-border) solid var(--ds-dark-rule); padding-left: 0; padding-top: var(--ds-s-6); }
}

@media (max-width: 900px) {
  /* No breadcrumb on mobile. CSS only — no device check, no cache variance,
     no JS dependency. */
  .breadcrumb { display: none; }
  .nav, .tool--search span { display: none; }
  .burger { display: flex; }
  .tilegrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ds-s-4); }
  .statrow { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__form { min-width: 0; width: 100%; }
  .footer__signup-col { min-width: 0; width: 100%; max-width: none; }
  .hero__viewport { min-height: 480px; }
  .hero__overlay { padding-top: var(--ds-s-24); gap: var(--ds-s-6); }
  .hero__stats { min-width: 0; width: 100%; }
  .hero__controls { right: var(--ds-pad-x-sm); bottom: var(--ds-s-5); }
}

@media (max-width: 640px) {
  /* NOTE: these sit on `.page > *`, NOT `:root` and NOT `.page` itself.
     `:root` is an ancestor of the container (a container query can never
     match it) and an element is never its own query container — so the
     overrides go on the container's children and inherit from there.
     Keep this selector when converting to @media. */
  .page > * {
    --ds-pad-x: var(--ds-pad-x-sm);
    --ds-section-y: var(--ds-s-12);
    --ds-section-y-lg: var(--ds-s-14);
  }
  .display-2 { font-size: var(--ds-t-display-2-sm); }
  .h1 { font-size: var(--ds-t-h1-sm); }
  .h2 { font-size: var(--ds-t-h2-sm); }
  .h3 { font-size: var(--ds-t-h3-sm); }
  .lede { font-size: var(--ds-t-body-lg-sm); }

  .header__inner { min-height: 62px; gap: var(--ds-s-3); }
  .brand img { height: 34px; }
  .tool { padding: 0 var(--ds-s-3); }
  .tool--cart { padding: 0 var(--ds-s-4); }

  .utilitybar__inner { min-height: var(--ds-tap-min); padding-inline: var(--ds-pad-x-sm); gap: var(--ds-s-2); }
  .utilitybar__promise { font-size: 12px; letter-spacing: 0.06em; }
  .utilitybar__promise-long { display: none; }
  .utilitybar__promise-short { display: inline; }
  .shipstate { font-size: 12px; letter-spacing: 0.06em; padding: 0 var(--ds-s-2); margin-right: calc(var(--ds-s-2) * -1); min-height: var(--ds-tap-min); }
  .shipstate__label { display: none; }
  .shipstate__skel { width: 60px; }

  .sectionhead { flex-direction: column; align-items: flex-start; gap: var(--ds-s-3); }
  .tabs { overflow-x: auto; }
  .tab { padding: 0 var(--ds-s-5); font-size: 20px; white-space: nowrap; }
  .tab:first-child { padding-left: 0; }
  .tilegrid { gap: var(--ds-s-3); }
  .tile__body { padding: var(--ds-s-3) var(--ds-s-4) var(--ds-s-4); }
  .tile__name { font-size: 18px; }
  .tile__price { font-size: 17px; }
  .tile__meta { font-size: 11px; }

  .footer__cols { grid-template-columns: 1fr 1fr; gap: var(--ds-s-6); }
  .footer__signup-inner { padding-block: var(--ds-s-8); gap: var(--ds-s-5); }
  .footer__legal-inner { font-size: 11px; }
  .picker { padding: var(--ds-s-5) 0 0; }
  .picker__panel { width: 100%; }
  .picker__head, .picker__body { padding-inline: var(--ds-s-5); }
  .picker__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-height: 50vh; }
  .btn { font-size: 15px; padding: 0 var(--ds-s-5); }

  /* Touch-target floor. Enforced HERE for every interactive class rather than
     component by component, so anything added later inherits it. */
  .footer__link, .link-rule { min-height: var(--ds-tap-min); display: flex; align-items: center; }
  .footer__col { gap: 0; }
  .btn--sm { min-height: var(--ds-tap-min); }
  .hero__arrow { height: var(--ds-tap-min); }
  .hero__dot {
    height: var(--ds-tap-min); background: transparent;
    display: grid; align-items: center;
  }
  .hero__dot::before { content: ""; display: block; height: 4px; background: var(--ds-dark-rule-2); }
  .hero__dot.is-active { background: transparent; }
  .hero__dot.is-active::before { background: var(--ds-orange); }
}

/* --------------------------------------------------------------------------
   ARCHIVE + PDP breakpoints (briefs 02, 03)
   Same one-to-one @container → @media conversion as the rest of the file (done).
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .archive { grid-template-columns: 244px minmax(0, 1fr); gap: var(--ds-s-8); }
  .pdp { grid-template-columns: 398px minmax(0, 480px); gap: var(--ds-s-8); }
  .featgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  /* Filters move to a drawer; the grid takes the full measure. */
  .archive { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .archive__side { display: none; }
  .filterbar { display: flex; }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-6); max-width: none; }
  .buybox__title { font-size: 24px; }

  /* Mobile order: gallery → price/title → sizes → Add to cart, before
     anything else. The BV rating region and the meta line fall below the
     button. Reordering, not hiding — the regions are all still there. */
  .buybox__bv { order: 20; margin-top: var(--ds-s-4); }
  .buybox__meta { order: 21; }

  /* The filter bar carries the count below this width (and it is the copy that
     updates as filters change), so the header's copy would be a duplicate. */
  .archead .woocommerce-result-count { display: none; }

  /* Five long tab labels stop fitting here, not at 640 — scroll the bar rather
     than let it push the page sideways. Still a tab bar, not an accordion:
     see DESIGN-SYSTEM §14. */
  .pdptabs .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .pdptabs .tabs::-webkit-scrollbar { display: none; }
  .pdptabs .tab { padding: 0 var(--ds-s-5); flex: none; font-size: 15px; }
  .pdptabs .tab:first-child { padding-left: 0; }

  /* Full-bleed only on phones; a 600px stage on a tablet is not a design. */
  .gallery__stage { max-width: 420px; }
}

@media (max-width: 760px) {
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-4); }
  .archead__inner { padding: var(--ds-s-8) var(--ds-pad-x-sm) var(--ds-s-6); gap: var(--ds-s-5); }
  .featgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emptystate { padding: var(--ds-s-10) var(--ds-s-6); }
}

@media (max-width: 640px) {
  .gallery { grid-template-columns: minmax(0, 1fr) 58px; }
  .gallery__stage { max-width: none; }
  .gallery__stage img { padding: var(--ds-s-4); }
  .archead__inner { flex-wrap: wrap; }
  .archead__desc { display: none; }
  .archead__title { font-size: 26px; }
  .sizes { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .price { font-size: 28px; }
  .attrtable th, table.woocommerce-product-attributes th { width: 52%; }
  .brandstrip { flex-direction: column; align-items: flex-start; gap: var(--ds-s-4); }
  /* Floor for anything added later — same rule as brief 01's ≤640 block. */
  .filtergroup__toggle, .applied__item, .size, .thumb { min-height: var(--ds-tap-min); }
  .applied__x { min-width: 28px; text-align: center; }
}

/* --------------------------------------------------------------------------
   CART / CHECKOUT / THANK-YOU breakpoints (brief 04)
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .cartlayout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ds-s-8); }
  .checkout { grid-template-columns: minmax(0, 1fr) 336px; gap: var(--ds-s-8); }
  .tybody { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ds-s-6); }
}

@media (max-width: 980px) {
  /* Everything stacks. The order is the brief's: table, then coupon, summary,
     CTA, trust strip. */
  .cartlayout, .checkout, .tybody { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-8); }
  .cartaside { margin-top: var(--ds-s-8); }
  .summary--sticky { position: static; }
  /* Sidebar becomes the accordion above the steps; the desktop card is gone,
     not duplicated. */
  .checkout__aside { display: none; }
  .summaryacc { display: block; }
  .confirm__title { font-size: 34px; }
  .confirm__inner { padding: var(--ds-s-10) var(--ds-pad-x-sm); }
}

@media (max-width: 760px) {
  /* Cart table becomes a card per line: thumb+name, then PRICE/QUANTITY/TOTAL
     as a three-column row, remove below. Woo still emits a table, so this is
     a display remap rather than different markup. */
  .carttable, .carttable tbody, .carttable tr, .carttable td { display: block; width: 100%; }
  .carttable thead { display: none; }
  .carttable tr {
    border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised);
    padding: var(--ds-s-4); margin-bottom: var(--ds-s-4);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s-3);
  }
  .carttable td { border: 0; padding: 0; }
  .carttable td.col-product { grid-column: 1 / -1; }
  .carttable td.col-remove { grid-column: 1 / -1; text-align: left; width: auto; }
  /* Row labels come back as ::before — the header row is gone. */
  .carttable td.col-price::before, .carttable td.col-qty::before, .carttable td.col-total::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-family: var(--ds-font-ui); font-size: var(--ds-t-label-xs); font-weight: 700;
    letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink-4);
  }
  .cart-line--blocked { background: var(--ds-warn-tint); border-color: var(--ds-warn); }
  .cart-line--blocked td { background: none; }
  .pagehead { flex-direction: column; align-items: flex-start; gap: var(--ds-s-3); }
  .pagehead__title { font-size: 28px; }
  .formgrid, .formgrid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formgrid--three .field--zip { grid-column: 1 / -1; }
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .confirm__title { font-size: 29px; }
  .orderpill { font-size: 15px; }
}

@media (max-width: 640px) {
  .carttable tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step__head { padding: var(--ds-s-4); gap: var(--ds-s-3); }
  .step__title { font-size: 18px; }
  .step__body { padding: 0 var(--ds-s-4) var(--ds-s-4); }
  .payment-panel__row { grid-template-columns: minmax(0, 1fr); }
  .cofoot__inner { flex-direction: column; align-items: flex-start; gap: var(--ds-s-3); }
  .cofoot__links { margin-left: 0; }
  .turnstile-slot { width: 100%; max-width: 300px; }
  .qty, .remove, .orderpill__copy, .adddisclose { min-height: var(--ds-tap-min); }
  .qty { width: 100%; max-width: 96px; }
}

/* --------------------------------------------------------------------------
   INSIDE PAGES / STORES / NEWS breakpoints (brief 05)
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .storeslayout { grid-template-columns: minmax(0, 1fr) 264px; gap: var(--ds-s-8); }
}

@media (max-width: 980px) {
  .storeslayout { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-8); }
  .onlinestores--sticky { position: static; }
  #wpsl-search-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wpsl-search-wrap .wpsl-search-btn-wrap { grid-column: 1 / -1; }
  #wpsl-search-input-wrap { grid-column: 1 / -1; }
  .addresses { grid-template-columns: minmax(0, 1fr); }
  .postlist { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-6); }
  .page-title { font-size: 32px; }
}

@media (max-width: 980px) {
  .page-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-figs figure img { height: 150px; }
  .page-lead img { height: 220px; }
  .page-lead--compact img { height: 180px; }
  .page-title { font-size: 28px; }
  .notfound__code { font-size: 78px; }
  .jumpstrip__label { display: none; }
  #wpsl-gmap { height: 300px; }
  #wpsl-result-list { max-height: 380px; }
}

@media (max-width: 640px) {
  #wpsl-search-wrap { grid-template-columns: minmax(0, 1fr); padding: var(--ds-s-4); }
  .wpforms-field-name .wpforms-field-row { grid-template-columns: minmax(0, 1fr); }
  .searchrow { flex-direction: column; }
  .searchrow .btn { width: 100%; }
  .captcha-slot { width: 100%; max-width: 300px; }
  .page-body h2 { font-size: 23px; }
  .postcard__title { font-size: 21px; }
  .notfound__links a, .jumpstrip a { min-height: var(--ds-tap-min); display: inline-flex; align-items: center; }
  .jumpstrip a { max-width: 18ch; }
}