/* ============================================================================
   OPEN BOX HOME - remapped base palette.
   ----------------------------------------------------------------------------
   These are the French store's token NAMES carrying Open Box Home's VALUES, so
   that every pre-existing rule in this file inherits the kraft/ink palette in one
   move instead of being rewritten selector by selector. The additive --ob-* names
   are declared in the block below this one.

   Semantics that changed, and must not be forgotten:
     --green      is no longer a brand colour. It now means "verified / never used"
                  and is spent ONLY on facts about the ITEM. Never on a button.
     --green-dark is no longer green at all. It is the ink hover step.
     --red        is form validation and a REAL max_quantity from catalog.json.
                  Never a price, never a discount, never urgency.
     --shadow*    are `none`. This store has no shadows and no radius: every shape
                  is square and flat. That is what tells it apart from the French
                  store from across the room.

   AMBER BAN: the amber family is --ob-opened / --ob-opened-fill / --ob-opened-edge
   and NOTHING ELSE. It marks a fact about the PACKAGING, so it appears in the
   Condition Split and in the flagged packaging row of the findings table, nowhere
   else. It is FORBIDDEN on price, stock, shipping, delivery, badge and CTA surfaces
   sitewide. The ban is enforced by the token graph, not by memory: --soft-yellow was
   the opened-fill and had leaked onto seven unrelated surfaces, so it now resolves to
   the kraft panel and there is no shared amber token left to reach for.

   DECORATIVE-ONLY HAIRLINE: --line / --ob-rule is #CBBFA6, 1.82:1 on card and
   1.49:1 on canvas. Compliant only because WCAG 1.4.11 exempts purely decorative
   separators. It may never be the edge of a control, never the only boundary of a
   card, never the sole carrier of state. Controls take --control-border /
   --ob-control (4.78:1 card, 3.92:1 canvas, 3.45:1 panel). --ob-on-ink-rule
   (1.83:1 on ink) sits under the same decorative-only rule.
   ========================================================================== */
:root {
  --ink: #1A1712;              /* warm near-black: body text, CTA fill */
  --ink-2: #3A352B;            /* secondary prose, table labels */
  --muted: #5F5849;            /* captions, meta, mono micro-labels */
  --line: #CBBFA6;             /* DECORATIVE hairline only - never a control edge */
  --line-dark: #B3A489;        /* decorative, heavier */
  --control-border: #7F7154;   /* EVERY control edge, card edge, focusable border */
  --paper: #FFFFFF;            /* card face, sheet face, media well */
  --canvas: #EFE8D9;           /* kraft board page ground */
  --soft: #E4DAC6;             /* deeper kraft: alternating bands, table zebra, ref strips */
  --soft-blue: #EDE6D6;
  /* Not amber. It was #F7E3C0, the Condition Split's opened-fill, and it leaked onto
     seven unrelated surfaces. Repointed to the kraft panel so the amber family is
     structurally unreachable outside --ob-opened-fill: the ban is now enforced by the
     token graph, not by anyone remembering it. */
  --soft-yellow: #E4DAC6;
  --green: #1C6B45;            /* now means "verified / never used" */
  --green-dark: #332C22;       /* now means ink-hover */
  --red: #A3271F;              /* form errors and a REAL per-order limit ONLY */
  --red-dark: #7F1D17;
  --focus: #0B5FA5;
  --shadow: none;              /* the store has no shadows */
  --shadow-soft: none;
  --shadow-lift: none;
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --max: 1400px;

  --ob-ink-active: #0F0D0A;    /* CTA :active. 19.40:1 against white. */
}

/* ---------------------------------------------------------------------------
   Additive Open Box tokens. Same values as the remapped names above, under names
   the new components can be read by. Custom properties resolve document-wide, so
   this block serves every rule in the file regardless of where it sits.
   --------------------------------------------------------------------------- */
:root {
  --ob-ink: #1A1712;
  --ob-ink-hover: #332C22;
  --ob-ink-2: #3A352B;
  --ob-muted: #5F5849;
  --ob-mark-empty: #6F6757;   /* unfilled rating star: 5.59:1 on card, 4.59:1 on canvas */
  --ob-card: #FFFFFF;
  --ob-canvas: #EFE8D9;
  --ob-panel: #E4DAC6;
  --ob-rule: #CBBFA6;          /* DECORATIVE ONLY - see the hairline rule above */
  --ob-control: #7F7154;

  --ob-opened: #8A4B0B;        /* AMBER - Condition Split and the flagged row only */
  --ob-opened-fill: #F7E3C0;
  --ob-opened-edge: #96620F;
  --ob-unused: #1C6B45;
  --ob-unused-fill: #DDEFE3;
  --ob-unused-edge: #2F7A53;

  --ob-limit: #A3271F;         /* a real max_quantity and form validation. Never urgency. */
  --ob-on-ink: #FFFFFF;
  --ob-on-ink-muted: #C9C0AA;
  --ob-on-ink-rule: #4A4335;
  --ob-focus: #0B5FA5;
  --ob-focus-invert: #9CC9F2;

  --ob-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", "DejaVu Sans Mono", monospace;
}

/* ---------------------------------------------------------------------------
   The Condition Split. Welded flush under the media well, never on top of it:
   the photographs are manufacturer stock of sealed retail cartons, and a mark
   laid over one would imply the pictured box is the opened one, which this store
   cannot show.

   Word, glyph and fill are one indivisible component. Each cell carries a word,
   its own Lucide glyph and its own fill, so the meaning survives colour blindness
   and a greyscale print. Strip any one of the three and it fails WCAG 1.4.1
   silently. It states a condition of the packaging: never a price, never a
   percentage, never a grade, never the word deal.

   Three sizes, one component: sm on the product card, cart line and checkout
   line, md in the buy box, lg in the hero.
   --------------------------------------------------------------------------- */
.ob-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ob-split-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  padding: 6px 9px;
  font-family: var(--ob-mono);
}

.ob-split-cell > svg {
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
}

.ob-split-opened {
  border-top: 2px solid var(--ob-opened-edge);
  background: var(--ob-opened-fill);
  color: var(--ob-opened);
}

.ob-split-unused {
  border-top: 2px solid var(--ob-unused-edge);
  border-left: 1px solid var(--ob-control);
  background: var(--ob-unused-fill);
  color: var(--ob-unused);
}

.ob-split-label,
.ob-split-value {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.ob-split-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ob-split-value {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.ob-split-row {
  grid-column: 1 / -1;
  margin: 0;
  padding: 6px 10px;
  border-top: 1px solid var(--ob-control);
  background: var(--ob-card);
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ob-split-sm .ob-split-cell {
  min-height: 34px;
}

.ob-split-md .ob-split-cell {
  min-height: 48px;
  padding: 8px 12px;
}

.ob-split-md .ob-split-cell > svg {
  width: 17px;
  height: 17px;
}

.ob-split-md .ob-split-label {
  font-size: 10px;
}

.ob-split-md .ob-split-value {
  font-size: 13px;
}

.ob-split-md .ob-split-row {
  padding: 8px 12px;
}

.ob-split-lg .ob-split-cell {
  min-height: 62px;
  padding: 10px 14px;
}

.ob-split-lg .ob-split-cell > svg {
  width: 20px;
  height: 20px;
}

.ob-split-lg .ob-split-label {
  font-size: 11px;
}

.ob-split-lg .ob-split-value {
  font-size: 15px;
}

.ob-split-lg .ob-split-row {
  padding: 9px 14px;
  font-size: 11px;
}

/* ---------------------------------------------------------------------------
   The three true reasons a box is open. Packaging facts, never a stock count.
   --------------------------------------------------------------------------- */
.ob-reasons {
  border: 1px solid var(--ob-control);
  background: var(--ob-card);
}

.ob-reasons-title {
  margin: 0;
  padding: 6px 12px;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ob-reasons-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-reasons-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-right: 1px solid var(--ob-rule);
}

.ob-reasons-list li:last-child {
  border-right: 0;
}

.ob-reasons-list span {
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ob-reasons-list strong {
  color: var(--ob-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.ob-reasons-note {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--ob-control);
  background: var(--ob-panel);
  color: var(--ob-ink-2);
  font-size: 12px;
  line-height: 1.4;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button,
select {
  cursor: pointer;
}

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

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

svg,
.lucide {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus);
}

/* On ink grounds the white ring has nothing to sit against, so the ring inverts:
   --ob-focus-invert is 10.25:1 on --ob-ink. */
.utility-bar :focus-visible,
.benefit-strip :focus-visible,
.site-footer :focus-visible,
.basket-toast :focus-visible {
  outline: 3px solid var(--ob-ink);
  box-shadow: 0 0 0 5px var(--ob-focus-invert);
}

.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;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  background: var(--ob-card);
  border: 2px solid var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.utility-bar {
  min-height: 32px;
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 90px);
  padding: 7px 24px;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.utility-bar span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.utility-bar svg {
  width: 15px;
  height: 15px;
}

.site-header {
  position: relative;
  z-index: 50;
  background: var(--ob-card);
  border-bottom: 1.5px solid var(--ob-ink);
}

.header-main {
  width: min(var(--max), calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px minmax(360px, 700px) 190px;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

.brand strong {
  font-weight: 850;
}

.brand span {
  color: var(--ob-muted);
  font-weight: 520;
}

.header-search {
  position: relative;
}

.header-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.header-search > div:first-of-type {
  height: 50px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  background: var(--ob-panel);
  border: 1px solid var(--ob-control);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.header-search > div:first-of-type:focus-within {
  background: var(--ob-card);
  border-color: var(--ob-ink);
}

.header-search svg {
  margin: auto;
}

.header-search input {
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
}

.header-search button {
  height: 38px;
  margin-right: 6px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 180ms ease;
}

.header-search button:hover {
  background: var(--ob-ink-hover);
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 430px;
  overflow: auto;
  padding: 8px;
  background: var(--ob-card);
  border: 1px solid var(--ob-control);
}

.search-suggestions a {
  min-height: 66px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px;
}

.search-suggestions a:hover {
  background: var(--ob-panel);
  box-shadow: inset 3px 0 0 var(--ob-ink);
}

.search-suggestions img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--soft);
}

.search-suggestions span {
  min-width: 0;
}

.search-suggestions strong,
.search-suggestions small {
  display: block;
}

.search-suggestions strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestions small {
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.icon-button,
.cart-button {
  border: 0;
  background: transparent;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
}

.cart-button {
  position: relative;
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 750;
}

.cart-button b {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.desktop-search-toggle,
.mobile-only,
.mobile-search {
  display: none;
}

.main-nav {
  width: min(var(--max), calc(100% - 48px));
  min-height: 46px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 48px);
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav a {
  position: relative;
  padding: 13px 0;
}

.main-nav a:hover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--ob-ink);
}

.category-rail {
  background: var(--ob-canvas);
  border-bottom: 1px solid var(--ob-ink);
}

.category-rail > div {
  width: min(1080px, calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.category-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-right: 1px solid var(--ob-control);
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.category-rail a:first-child {
  border-left: 1px solid var(--ob-control);
}

/* Amber ban: this hover was --soft-yellow. Amber belongs to the Condition Split
   and to nothing else. */
.category-rail a:hover {
  background: var(--ob-panel);
}

/* Facts get monospace, sentences get the sans stack. That split is what makes the
   store read as a record rather than a pitch. Mono never runs prose, never goes
   below 10px, and never carries a weight under 700. */
.eyebrow {
  margin: 0 0 10px;
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.1;
}

h1 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.018em;
}

h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.014em;
}

h3 {
  font-size: 17px;
  font-weight: 700;
}

/* The hero is a two-column plate, not a photograph with words on it: the left cell
   argues the condition in words and in the Split, the right cell is the silent
   photograph. Nothing is ever printed over the goods. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  min-height: 460px;
  overflow: hidden;
  border-bottom: 1.5px solid var(--ob-ink);
  background: var(--ob-canvas);
}

.hero picture {
  position: relative;
  grid-column: 2;
  overflow: hidden;
  border-left: 1.5px solid var(--ob-ink);
  background: var(--ob-card);
}

.hero picture,
.hero picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero picture img {
  object-fit: cover;
  object-position: center;
}

.hero-content {
  position: static;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: auto;
  padding: 40px 32px 40px max(20px, calc((100vw - var(--max)) / 2));
  transform: none;
}

.hero-content h1 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4.4vw, 54px);
}

.hero-content .eyebrow {
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-content .ob-eyebrow-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin-bottom: 12px;
}

/* The separator trails its item rather than leading the next one, so a wrap never
   strands a lone middot at the start of the second line. */
.hero-content .ob-eyebrow-list span:not(:last-child)::after {
  content: " ·";
  color: var(--ob-muted);
}

.hero-content > p:not(.eyebrow) {
  max-width: 46ch;
  margin-bottom: 18px;
  color: var(--ob-ink-2);
  font-size: 16px;
}

.hero-content .ob-split {
  max-width: 520px;
  border: 1px solid var(--ob-control);
  border-top: 0;
}

.hero-content .ob-reasons {
  max-width: 520px;
  margin-top: 14px;
}

.hero-content .button-row {
  margin-top: 20px;
}

.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* No transform anywhere in this store: no lift, no scale, no slide. State is
   carried by colour AND border so it survives prefers-reduced-motion and
   colour-blindness alike. */
.button[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.78;
}

.button-dark {
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

.button-dark:hover {
  background: var(--ob-ink-hover);
}

.button-accent {
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

.button-accent:hover {
  background: var(--ob-ink-hover);
}

.button-outline {
  background: var(--ob-card);
  border-color: var(--ob-ink);
  color: var(--ob-ink);
}

.button-outline:hover {
  background: var(--ob-panel);
}

.button-full {
  width: 100%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor;
  font-size: 14px;
  font-weight: 760;
}

.text-link svg {
  width: 16px;
}

.text-link:hover {
  color: var(--ob-ink-hover);
  border-bottom-width: 3px;
}

.benefit-strip {
  min-height: 92px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  color: #fff;
}

.benefit-strip > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 32px;
  border-right: 1px solid var(--ob-on-ink-rule);
}

.benefit-strip > div:last-child {
  border: 0;
}

.benefit-strip svg {
  width: 25px;
  height: 25px;
  color: var(--ob-on-ink-muted);
}

.benefit-strip strong,
.benefit-strip small {
  display: block;
}

.benefit-strip strong {
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.benefit-strip small {
  margin-top: 3px;
  color: var(--ob-on-ink-muted);
  font-size: 12px;
}

.section {
  padding: 56px max(20px, calc((100% - var(--max)) / 2));
}

.section-soft {
  background: var(--ob-panel);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}

.section-heading h2 {
  max-width: 760px;
  margin: 0;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.collection-tile {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--ob-panel);
  border: 1.5px solid var(--ob-ink);
  border-radius: 0;
}

.collection-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover moves the border and nothing else: no lift, no scale, no shadow. */
.collection-tile:hover img {
  transform: none;
}

.collection-tile:hover,
.collection-tile:focus-within {
  box-shadow: inset 0 0 0 4px var(--ob-ink);
  transform: none;
}

.collection-tile > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 116px;
  padding: 16px 18px;
  border-top: 1.5px solid var(--ob-ink);
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

.collection-tile small,
.collection-tile strong,
.collection-tile em {
  display: block;
}

.collection-tile small {
  color: var(--ob-on-ink-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.collection-tile strong {
  margin: 6px 0 9px;
  font-size: 21px;
  letter-spacing: -0.012em;
}

.collection-tile em {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ob-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.collection-tile em svg {
  width: 15px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 14px;
}

/* The card is a record sheet: reference strip, media plate, Condition Split, then the
   facts. Square, flat, no lift and no shadow. Separation from the kraft ground is carried
   by the --ob-control hairline (3.92:1 against canvas), never by the fill difference,
   which is only 1.22:1. */
.product-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ob-card);
  border: 1px solid var(--ob-control);
  border-radius: 0;
  overflow: hidden;
}

.product-card:hover,
.product-card:focus-within {
  border-color: var(--ob-ink);
  box-shadow: none;
  transform: none;
}

/* Painted over the children rather than as an inset shadow: the ref strip and the media
   well are opaque and would otherwise cover an inset edge. */
.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 3px;
  background: var(--ob-ink);
  opacity: 0;
  pointer-events: none;
}

.product-card:hover::before,
.product-card:focus-within::before {
  opacity: 1;
}

/* The reference strip. Prints product.sku, a real field, and nothing invented. */
.ob-ref-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
  margin: 0;
  padding: 4px 10px;
  border-bottom: 1px solid var(--ob-control);
  background: var(--ob-panel);
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The reference is the identifier of the record and must never be abbreviated: it takes
   the width it needs. The collection is context that is repeated on the brand line right
   below, so it is the half that gives way and ellipsises. */
.ob-ref-sku {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ob-ref-collection {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ob-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card:hover .ob-ref-strip,
.product-card:focus-within .ob-ref-strip {
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

.product-card:hover .ob-ref-collection,
.product-card:focus-within .ob-ref-collection {
  color: var(--ob-on-ink-muted);
}

.product-card-media {
  position: relative;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  background: var(--ob-card);
}

/* The flap: the folded corner of the plate the goods sit on, never of the photograph
   itself. Pure CSS, no image, no markup, no hover growth. */
.product-card-media::after,
.hero picture::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(to bottom left,
    var(--ob-panel) 0 49.2%, var(--ob-ink) 49.2% 50.8%, transparent 50.8% 100%);
  pointer-events: none;
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 250ms ease;
}

.product-card:hover .product-card-media img,
.product-card:focus-within .product-card-media img {
  transform: none;
}

/* Demoted to a square mono chip. It carries an editorial note, never a price claim,
   never a fill colour, and never amber. */
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 0;
  background: var(--ob-card);
  border: 1px solid var(--ob-control);
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-badge-offer {
  background: var(--ob-card);
  border-color: var(--ob-control);
  color: var(--ob-ink);
}

.product-card-body {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 13px 13px;
}

.product-brand {
  margin-bottom: 7px;
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-card h3 {
  min-height: 61px;
  margin-bottom: 11px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.product-card h3 a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.product-summary {
  display: -webkit-box;
  min-height: 63px;
  margin-bottom: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.product-card-specs,
.product-key-specs {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dotted-leader fact rows. Label in sentence case on the left, recorded value in mono on
   the right, so a written phrase and a measured figure never look like the same kind of
   claim. Rows are only ever as many as the data supplies; the list is never padded. */
.product-card-specs {
  display: grid;
  gap: 0;
  margin: 0 0 14px;
  padding-top: 0;
  border-top: 1px solid var(--ob-rule);
}

.product-card-specs li {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--ob-rule);
  color: var(--ob-ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.ob-spec-label {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-spec-lead {
  flex: 1 1 12px;
  min-width: 10px;
  height: 0;
  margin: 0 6px;
  border-bottom: 1px dotted var(--ob-rule);
}

.ob-spec-value {
  flex: 0 0 auto;
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.product-card-specs .ob-spec-plain .ob-spec-label {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-price {
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The 2px ink rule under the title, carried by the price row so no empty element is
   needed. There is deliberately no slot beside it for a struck price or a percentage. */
.product-card .product-price-primary {
  display: block;
  margin: 0 0 13px;
  padding-top: 10px;
  border-top: 2px solid var(--ob-ink);
  font-size: 22px;
}

.product-price-primary {
  display: block;
  margin: -1px 0 12px;
}

.product-price small,
.product-price-large small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

/* Square ghost button, full card width. It is deliberately quiet: on a record the price is
   the loud element, because it is a measured result rather than an offer. */
.quick-add {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--ob-control);
  border-radius: 0;
  background: var(--ob-card);
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-card-foot .quick-add {
  margin-left: auto;
}

.quick-add:hover,
.quick-add:focus-visible {
  border-color: var(--ob-ink);
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  transform: none;
}

.quick-add svg {
  width: 15px;
  height: 15px;
}

/* Colour and border only, never position or scale, and only when motion is welcome.
   Under prefers-reduced-motion the card, tile and button are completely static and every
   state is still legible through both colour and border. */
@media (prefers-reduced-motion: no-preference) {
  .product-card,
  .collection-tile {
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  .product-card::before,
  .ob-ref-strip,
  .quick-add {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
  }
}

.editorial-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
  background: var(--soft-blue);
}

.editorial-image {
  min-height: 620px;
}

.editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-copy {
  align-self: center;
  max-width: 680px;
  padding: 80px clamp(40px, 6vw, 100px);
}

.editorial-copy h2 {
  margin-bottom: 20px;
}

.editorial-copy > p:not(.eyebrow) {
  color: var(--ink-2);
  font-size: 18px;
}

.editorial-copy ul {
  margin: 26px 0 32px;
  padding: 0;
  list-style: none;
}

.editorial-copy li {
  padding: 11px 0;
  border-bottom: 1px solid #bacbd5;
  font-weight: 700;
}

.need-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.need-grid a {
  position: relative;
  min-height: 245px;
  padding: 25px;
  border-right: 1px solid var(--line-dark);
}

.need-grid a:last-child {
  border: 0;
}

.need-grid a:hover {
  background: var(--soft-yellow);
  box-shadow: inset 3px 0 0 var(--ob-ink);
}

.need-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.need-grid strong {
  display: block;
  margin: 45px 0 12px;
  font-size: 20px;
  line-height: 1.25;
}

.need-grid p {
  color: var(--muted);
  font-size: 14px;
}

.need-grid svg {
  position: absolute;
  top: 24px;
  right: 24px;
}

.delivery-band {
  padding: 72px max(24px, calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(600px, 1.2fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: center;
  background: var(--green-dark);
  color: #fff;
}

.delivery-band .eyebrow {
  color: var(--ob-on-ink-muted);
}

.delivery-band h2 {
  margin-bottom: 15px;
}

.delivery-band > div > p:last-child {
  color: #D7D4CD;
}

.delivery-band ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.delivery-band li {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 18px;
  border-left: 1px solid #786D5B;
}

.delivery-band li b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  font-size: 12px;
}

.delivery-band strong,
.delivery-band small {
  display: block;
}

.delivery-band strong {
  font-size: 14px;
}

.delivery-band small {
  margin-top: 5px;
  color: #D5D1C8;
  font-size: 12px;
}

.faq-list {
  border-top: 1px solid var(--line-dark);
}

.faq-list details {
  border-bottom: 1px solid var(--line-dark);
}

.faq-list summary {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  cursor: pointer;
  font-weight: 760;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list details[open] summary svg {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 850px;
  padding: 0 4px 22px;
  color: var(--muted);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.collection-hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) minmax(480px, 1.15fr);
  min-height: 410px;
  background: var(--soft-blue);
}

.collection-hero > div {
  align-self: center;
  max-width: 700px;
  padding: 60px max(32px, calc((100vw - var(--max)) / 2));
  padding-right: 60px;
}

.collection-hero .breadcrumbs {
  margin-bottom: 45px;
}

.collection-hero h1 {
  margin-bottom: 18px;
  font-size: 60px;
}

.collection-hero > div > p:last-child {
  color: var(--muted);
  font-size: 17px;
}

.collection-hero > img {
  width: 100%;
  height: 100%;
  min-height: 410px;
  object-fit: cover;
}

.catalogue-section {
  padding: 46px max(24px, calc((100% - var(--max)) / 2)) 90px;
}

.catalogue-toolbar {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.catalogue-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.catalogue-toolbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.catalogue-toolbar select {
  min-width: 170px;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--paper);
}

.shop-hero,
.page-hero {
  padding: 72px max(24px, calc((100% - var(--max)) / 2));
}

.shop-hero {
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--soft-yellow);
}

.shop-hero h1 {
  font-size: 56px;
}

.shop-hero h1,
.page-hero h1 {
  max-width: 980px;
  margin-bottom: 18px;
}

.shop-hero > p:last-child,
.page-hero > p:last-child {
  max-width: 750px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

.shop-layout {
  width: min(var(--max), calc(100% - 48px));
  margin: 28px auto 90px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 40px;
}

.shop-filters {
  min-width: 0;
  margin: 0;
  padding: 0;
  align-self: start;
  position: sticky;
  top: 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-top: 2px solid var(--ink);
}

.shop-filters legend {
  width: 100%;
  padding: 18px 0 10px;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.shop-filters button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
}

.shop-filters button.is-active {
  color: var(--green);
  font-weight: 800;
}

.shop-filters button span {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--soft);
  font-size: 10px;
}

.shop-search {
  height: 48px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--paper);
}

.shop-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.shop-search > svg {
  margin: auto;
  color: var(--muted);
}

.shop-search input {
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
}

.shop-search button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.shop-search:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus);
}

.no-results {
  padding: 60px 0;
  color: var(--muted);
  text-align: center;
}

.product-breadcrumbs {
  width: min(var(--max), calc(100% - 48px));
  margin: 30px auto 22px;
}

.product-back-link {
  display: none;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 9px;
}

.product-layout {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  grid-template-areas:
    "gallery intro"
    "gallery facts"
    "gallery buy";
  grid-template-rows: auto 1fr;
  gap: clamp(44px, 6vw, 90px);
  row-gap: 24px;
}

.product-layout:not(:has(> .product-facts)) {
  grid-template-areas:
    "gallery intro"
    "gallery buy";
}

.product-buy > .purchase-facts {
  margin-top: 16px;
}

.product-gallery {
  grid-area: gallery;
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  align-items: start;
}

.product-main-image {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  touch-action: pan-y pinch-zoom;
}

.product-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* No hover scale on the goods: the frame reacts, the photograph does not. */
@media (hover: hover) and (pointer: fine) {
  .product-main-image:hover {
    border-color: var(--ob-ink);
  }
}

.product-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-thumb {
  width: 78px;
  min-height: 78px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}

.product-thumb.is-active {
  border-color: var(--ob-ink);
  box-shadow: inset 0 0 0 2px var(--ob-ink);
}

@media (hover: hover) and (pointer: fine) {
  .product-thumb:hover {
    border-color: var(--ob-ink);
  }
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-zoom:hover {
    border-color: var(--ob-ink);
    background: var(--ob-panel);
  }
}

.product-intro {
  grid-area: intro;
  align-self: start;
  padding-top: 8px;
}

.product-offer {
  grid-area: offer;
  align-self: start;
}

.product-facts {
  grid-area: facts;
}

.product-intro h1 {
  margin-bottom: 18px;
  font-size: 48px;
}

.product-buy {
  grid-area: buy;
  align-self: start;
}

.product-lead {
  color: var(--muted);
  font-size: 17px;
}

.product-price-large {
  margin: 0;
  font-size: 30px;
  font-weight: 850;
  line-height: 1.1;
}

/* Price, reference price and the final-price caption now sit directly above the
   quantity stepper and the cart button, so the number is read at the moment of
   the decision rather than three scrolls earlier. */
.product-price-block {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.product-price-reference {
  margin: 6px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.product-price-reference[hidden] {
  display: none;
}

.product-price-reference [data-variant-reference] {
  font-weight: 600;
}

.product-detail-band li b {
  font-size: 15px;
}

.product-detail-band li span {
  color: var(--ob-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.product-detail-band li a {
  color: inherit;
  text-decoration: underline;
}

.product-price-saving {
  font-weight: 700;
}

.product-price-disclaimer {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.product-price-disclaimer[hidden] {
  display: none;
}

.product-price-caption {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.purchase-facts {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.purchase-facts > span {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}

.purchase-facts svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green);
}

.purchase-facts b,
.purchase-facts small {
  display: block;
}

.purchase-facts b {
  font-size: 12px;
}

.purchase-facts small {
  color: var(--muted);
  font-size: 11px;
}

.purchase-facts a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.benefit-list {
  margin: 0 0 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
}

.benefit-list svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green);
}

.purchase-controls {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
}

.purchase-controls.purchase-controls-limited {
  grid-template-columns: minmax(0, 1fr);
}

.limited-purchase-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px 13px;
  border-left: 3px solid var(--green);
  background: var(--soft);
}

.limited-purchase-note svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--green);
}

.limited-purchase-note strong,
.limited-purchase-note small {
  display: block;
}

.limited-purchase-note strong {
  font-size: 12px;
}

.limited-purchase-note small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.purchase-button-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.buy-now-large {
  min-height: 52px;
}

.quantity-stepper {
  height: 52px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  border: 1px solid var(--control-border);
  border-radius: 0;
}

.quantity-stepper button,
.quantity-stepper input {
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.quantity-stepper input {
  appearance: textfield;
}

.quantity-stepper input::-webkit-inner-spin-button,
.quantity-stepper input::-webkit-outer-spin-button {
  appearance: none;
}

.add-to-cart-large {
  min-height: 52px;
}

.seller-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.seller-note strong {
  color: var(--ink);
}

.launch-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.launch-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.launch-cta-trust svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--green);
}

.product-key-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin: 20px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-key-specs li {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  color: var(--ink-2);
  font-size: 12px;
}

.product-key-specs svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--green);
}

.product-accordions details {
  border-top: 1px solid var(--line);
}

.product-accordions details:last-child {
  border-bottom: 1px solid var(--line);
}

.product-accordions summary {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  transition: color 160ms ease;
}

.product-accordions summary:hover {
  color: var(--green);
}

.product-accordions summary svg {
  transition: transform 200ms var(--ease-out);
}

.product-accordions summary::-webkit-details-marker {
  display: none;
}

.product-accordions details[open] summary svg {
  transform: rotate(180deg);
}

.product-accordions details p,
.product-accordions details ul {
  color: var(--muted);
  font-size: 13px;
}

.product-accordions details p,
.product-accordions details ul {
  margin-bottom: 20px;
}

.product-accordions ul {
  padding-left: 20px;
}

.product-specs {
  margin: 0 0 18px;
}

.product-specs > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.product-specs dt {
  color: var(--muted);
}

.product-specs dd {
  margin: 0;
  font-weight: 700;
}

/* The global :focus-visible ring is a white outline plus a coloured box-shadow, and the
   coloured half is what makes it visible on a white page. .product-thumb.is-active sets
   its own box-shadow at higher specificity and cancelled it, so a keyboard user landing
   on the selected thumbnail saw nothing. Restated here at matching specificity. */
.product-thumb:focus-visible,
.product-thumb.is-active:focus-visible,
.gallery-zoom:focus-visible,
.gallery-dialog-nav:focus-visible,
.gallery-dialog-close:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus);
}

/* Gating :hover behind (pointer: fine) correctly stopped hover sticking after a tap, but
   it also removed the only press feedback the gallery had on the devices this page is
   actually served to. :active works on touch and costs nothing on desktop. */
.product-thumb:active,
.gallery-zoom:active,
.gallery-dialog-nav:active,
.gallery-dialog-close:active {
  border-color: var(--ob-ink);
  background: var(--ob-panel);
  transition-duration: 60ms;
}

.product-main-image {
  cursor: zoom-in;
}

.gallery-counter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 0;
  background: rgba(20, 24, 20, 0.72);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  /* Tabular figures stop the pill reflowing between 1 / 5 and 4 / 5. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.gallery-dialog {
  /* Must stay fixed: position:relative overrides the UA dialog:modal rule and anchors the
     lightbox to the document origin, putting it off screen past ~700px of scroll.
     margin:auto restores the centring the UA rule used to provide. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(900px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 46px 16px 16px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
}

.gallery-dialog::backdrop {
  background: rgba(20, 24, 20, 0.72);
}

.gallery-dialog-close {
  position: absolute;
  top: 6px;
  right: 6px;
}

.gallery-dialog-nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-50%);
}

.gallery-dialog-prev {
  left: 16px;
}

.gallery-dialog-next {
  right: 16px;
}

.gallery-dialog-counter {
  position: absolute;
  top: 13px;
  left: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.gallery-dialog img {
  width: 100%;
  max-height: calc(100dvh - 100px);
  object-fit: contain;
}

@media (max-width: 620px) {
  .gallery-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 44px 0 0;
    border-radius: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .gallery-dialog img {
    width: 165%;
    max-width: none;
    max-height: none;
    height: auto;
  }

  /* The dialog is the scroll container here, so absolutely positioned chrome resolves
     against its scrollable padding box and pans away with the image: measured at 430px,
     panning right moved the close button from x=375 to x=104 and the previous control to
     x=-249, entirely off screen. A full-screen dialog leaves no backdrop to tap and touch
     has no Escape key, so that stranded the visitor. The dialog lives in the top layer,
     so fixed resolves against the viewport and the controls stay put. */
  .gallery-dialog-close,
  .gallery-dialog-nav,
  .gallery-dialog-counter {
    position: fixed;
  }

  .gallery-dialog-close {
    top: calc(8px + env(safe-area-inset-top));
    right: 8px;
    background: rgba(255, 255, 255, 0.96);
  }

  .gallery-dialog-counter {
    top: calc(17px + env(safe-area-inset-top));
    left: 16px;
  }

  .gallery-dialog-nav {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: none;
  }

  .gallery-dialog-prev { left: 12px; }
  .gallery-dialog-next { right: 12px; }
}

@keyframes gallery-dialog-in {
  from { opacity: 0; transform: scale(0.97); }
}

@keyframes gallery-backdrop-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-dialog[open] { animation: gallery-dialog-in 200ms var(--ease-out); }
  .gallery-dialog[open]::backdrop { animation: gallery-backdrop-in 200ms ease; }
}

/* Must come after the shorthand above, which would otherwise win on source order. On
   mobile the dialog is full screen and its chrome is position: fixed; an animating
   transform makes the dialog a containing block for those children and re-anchors them
   to the scrolling box for the duration of the animation. Fade only here. */
@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .gallery-dialog[open] { animation: gallery-backdrop-in 200ms ease; }
}

.fine-print {
  font-size: 11px !important;
}

.product-detail-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  background: var(--soft-yellow);
}

.product-detail-band > div p:last-child {
  max-width: 650px;
  color: var(--muted);
  font-size: 17px;
}

.product-detail-band ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: center;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ob-control);
  border-left: 1px solid var(--ob-control);
  list-style: none;
}

.product-detail-band li {
  min-height: 90px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 18px 16px;
  border-right: 1px solid var(--ob-control);
  border-bottom: 1px solid var(--ob-control);
  text-align: left;
  font-weight: 750;
}

.product-layout-launch {
  margin-bottom: 56px;
  grid-template-areas:
    "gallery intro"
    "gallery offer"
    "gallery facts"
    "gallery buy";
  grid-template-rows: auto auto auto 1fr;
}

body:has(.product-layout-launch) .category-rail {
  display: none;
}

.product-layout-launch .product-intro h1 {
  max-width: 620px;
  font-size: 46px;
}

.product-layout-launch .product-intro .product-lead,
.product-layout-launch .product-offer .launch-price-row {
  margin-bottom: 0;
}

.product-layout-launch .product-offer .launch-price-row {
  margin-top: 0;
}

.launch-price-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.launch-current-price {
  color: var(--ink);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.launch-reference-price {
  display: grid;
  gap: 2px;
  padding-bottom: 2px;
  color: #8F8E8A;
}

.launch-reference-price small {
  font-size: 10px;
  font-weight: 750;
}

.launch-reference-price s {
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
  text-decoration-thickness: 2px;
}

.launch-price-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 9px;
}

.launch-price-badges > span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--ob-control);
  border-radius: 0;
  background: #DDEFE3;
  color: #1C6B45;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
}

.launch-price-badges svg {
  width: 17px;
  height: 17px;
}

.launch-offer-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 13px;
}

.launch-offer-label span {
  padding: 6px 9px;
  border-radius: 0;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.launch-offer-label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.launch-price-caption {
  margin: 0;
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
}

.market-price-proof {
  margin-top: 15px;
  padding: 13px 15px;
  border: 1px solid #D0CEC8;
  border-left: 4px solid var(--green);
  border-radius: 0;
  background: var(--soft);
}

.market-price-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.market-price-proof-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.market-price-proof-head svg {
  width: 15px;
  height: 15px;
}

.market-price-proof-head > strong {
  color: var(--red);
  font-size: 13px;
  white-space: nowrap;
}

.market-price-proof-prices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.market-price-proof-prices > div:last-child {
  text-align: right;
}

.market-price-proof-prices small,
.market-price-proof-prices b {
  display: block;
}

.market-price-proof-prices small {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.market-price-proof-prices b {
  font-size: 18px;
  line-height: 1.15;
}

.market-price-proof-prices > div:last-child b {
  color: #5F5B56;
  font-size: 16px;
}

.market-price-proof-prices > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.market-price-proof-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid #DEDBD8;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.market-price-proof a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  color: var(--green);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.market-price-proof a svg {
  width: 12px;
  height: 12px;
}

.launch-desktop-buy {
  margin-top: 14px;
}

.launch-mobile-buy {
  display: none;
}

.product-layout-launch .purchase-facts {
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.launch-price-reason {
  margin-top: 15px;
  padding: 13px 15px;
  border-left: 3px solid var(--green);
  background: var(--soft);
}

.launch-price-reason strong {
  font-size: 12px;
}

.launch-price-reason p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.xc10-metrics {
  min-height: 128px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ink);
  color: #fff;
}

.xc10-metrics > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 25px 18px;
  border-right: 1px solid #504D48;
  text-align: center;
}

.xc10-metrics > div:last-child {
  border-right: 0;
}

.xc10-metrics strong {
  color: var(--ob-on-ink-muted);
  font-size: 34px;
  line-height: 1;
}

.xc10-metrics span {
  color: #DDDBD6;
  font-size: 12px;
}

.xc10-story-band,
.xc10-technology-band,
.xc10-everyday-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.xc10-story-media,
.xc10-technology-media,
.xc10-everyday-band > div:first-child {
  min-width: 0;
  min-height: 570px;
  overflow: hidden;
}

.xc10-story-media img,
.xc10-technology-media img,
.xc10-everyday-band > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xc10-story-copy,
.xc10-everyday-band > div:last-child {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(55px, 7vw, 110px);
}

.xc10-story-copy h2,
.xc10-technology-copy h2,
.xc10-everyday-band h2,
.xc10-kit-section h2,
.xc10-faq-section h2,
.xc10-final-offer h2 {
  max-width: 680px;
  margin-bottom: 20px;
  font-size: 42px;
}

.xc10-story-copy > p:not(.eyebrow),
.xc10-everyday-band > div:last-child > p:not(.eyebrow),
.xc10-heading-note,
.xc10-faq-section > div:first-child > p:last-child {
  color: var(--muted);
  font-size: 16px;
}

.xc10-check-list {
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.xc10-check-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
}

.xc10-check-list svg {
  width: 17px;
  color: var(--green);
}

.xc10-heading-note {
  max-width: 430px;
  margin: 0;
}

.xc10-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.xc10-benefit-grid article {
  min-width: 0;
  min-height: 260px;
  padding: 28px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.xc10-benefit-grid article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 42px;
  background: var(--soft-yellow);
  color: var(--green);
}

.xc10-benefit-grid h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.xc10-benefit-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.xc10-technology-band {
  background: var(--green-dark);
  color: #fff;
}

.xc10-technology-copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(55px, 7vw, 110px);
}

.xc10-technology-copy .eyebrow {
  color: var(--ob-on-ink-muted);
}

.xc10-technology-copy > p:not(.eyebrow) {
  max-width: 660px;
  color: #D6D2CB;
  font-size: 16px;
}

.xc10-technology-copy ol {
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid #6A604D;
  list-style: none;
}

.xc10-technology-copy li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid #6A604D;
}

.xc10-technology-copy li b {
  color: var(--ob-on-ink-muted);
  font-size: 12px;
}

.xc10-technology-copy li strong,
.xc10-technology-copy li small {
  display: block;
}

.xc10-technology-copy li small {
  margin-top: 3px;
  color: #C9C3BA;
  font-size: 12px;
}

.xc10-technology-media {
  background: #172129;
}

.xc10-technology-media img {
  object-fit: contain;
}

.xc10-everyday-band > div:first-child img {
  object-fit: contain;
}

.xc10-kit-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: start;
}

.xc10-kit-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.xc10-kit-list {
  margin: 24px 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.xc10-kit-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 720;
}

.xc10-kit-list svg {
  color: var(--green);
}

.xc10-spec-card {
  padding: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--soft);
}

.xc10-spec-card h3 {
  margin-bottom: 18px;
  font-size: 22px;
}

.xc10-spec-card dl {
  margin: 0;
}

.xc10-spec-card dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.8fr);
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.xc10-spec-card dt {
  color: var(--muted);
}

.xc10-spec-card dd {
  margin: 0;
  font-weight: 760;
  text-align: right;
}

.xc10-spec-card > p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.xc10-everyday-band {
  grid-template-columns: 1.08fr 0.92fr;
  background: var(--soft-yellow);
}

.xc10-everyday-band > div:first-child {
  min-height: 620px;
}

.xc10-use-note {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid var(--ob-control);
  font-size: 12px !important;
}

.xc10-faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: start;
}

.xc10-faq-section .faq-list {
  border-top: 1px solid var(--line-dark);
}

.xc10-faq-section .faq-list details {
  background: transparent;
}

.xc10-final-offer {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: center;
  padding: 76px max(24px, calc((100% - var(--max)) / 2));
  background: var(--ink);
  color: #fff;
}

.xc10-final-offer .eyebrow {
  color: var(--ob-on-ink-muted);
}

.xc10-final-offer > div:first-child > p:last-child {
  max-width: 690px;
  color: #D3D0CB;
}

.xc10-final-buy {
  display: grid;
  gap: 7px;
  padding-left: clamp(0px, 4vw, 60px);
  border-left: 1px solid #524F4A;
}

.xc10-final-buy > span,
.xc10-final-buy > small {
  color: #D3D0CB;
  font-size: 12px;
}

.xc10-final-buy > strong {
  font-size: 38px;
  line-height: 1;
}

.xc10-final-price-reference {
  width: fit-content;
  color: var(--ob-on-ink-muted);
  font-size: 11px;
  font-weight: 750;
}

.xc10-final-buy .button {
  width: 100%;
  margin-top: 14px;
}

.xc10-final-limit {
  margin: 8px 0 0;
  color: #DDDBD6;
  font-size: 11px;
  line-height: 1.45;
}

.xc10-final-actions {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.xc10-final-actions .button {
  margin-top: 0;
}

.mobile-purchase-bar {
  display: none;
}

.page-hero {
  background: var(--soft-blue);
}

.about-story,
.faq-page,
.contact-layout,
.withdrawal-layout,
.prose-layout {
  width: min(1120px, calc(100% - 48px));
  margin: 70px auto 100px;
}

.about-story {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}

.about-story > div:first-child p {
  color: var(--muted);
  font-size: 17px;
}

.principles {
  border-top: 1px solid var(--line-dark);
}

.principles > div {
  display: grid;
  grid-template-columns: 55px 1fr;
  column-gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-dark);
}

.principles span {
  grid-row: 1 / 3;
  color: var(--green);
  font-weight: 850;
}

.principles h3,
.principles p {
  margin: 0;
}

.principles p {
  color: var(--muted);
  font-size: 14px;
}

.faq-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 70px;
}

.faq-page aside {
  align-self: start;
  padding: 28px;
  background: var(--soft-yellow);
}

.faq-page aside h2 {
  font-size: 24px;
}

.contact-layout,
.withdrawal-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(440px, 1.2fr);
  gap: 80px;
}

.contact-details {
  align-self: start;
}

.contact-details > a,
.contact-details > div {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
}

.contact-details > a svg,
.contact-details > div svg {
  color: var(--green);
}

.contact-details small,
.contact-details strong {
  display: block;
}

.contact-details small {
  color: var(--muted);
  font-size: 11px;
}

.contact-details strong {
  font-size: 14px;
}

.contact-details > p {
  margin-top: 25px;
  color: var(--muted);
  font-size: 14px;
}

.support-form {
  display: grid;
  gap: 17px;
  padding: 32px;
  background: var(--soft);
}

.support-form > label:not(.privacy-check) {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 750;
}

.support-form label small {
  color: var(--muted);
  font-weight: 500;
}

.support-form input,
.support-form textarea {
  width: 100%;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--paper);
}

.support-form input {
  height: 48px;
  padding: 0 12px;
}

.support-form textarea {
  padding: 12px;
  resize: vertical;
}

.privacy-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.privacy-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.form-status {
  margin: 0;
  font-size: 13px;
}

.withdrawal-layout > div ol {
  padding-left: 24px;
}

.withdrawal-layout > div li {
  margin: 13px 0;
}

.prose-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 70px;
}

.prose-layout > aside {
  align-self: start;
  position: sticky;
  top: 20px;
  border-top: 2px solid var(--ink);
}

.prose-layout > aside p {
  margin: 17px 0 8px;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.prose-layout > aside a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.legal-prose {
  max-width: 760px;
}

.legal-prose section {
  padding: 0 0 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 30px;
}

.legal-prose h2 {
  font-size: 24px;
}

.legal-prose p,
.legal-prose li {
  color: var(--muted);
}

.legal-prose a {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.updated {
  font-size: 12px;
}

.cart-page {
  width: min(1160px, calc(100% - 48px));
  margin: 50px auto 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 70px;
}

.cart-main,
.cart-line,
.cart-line > div,
.order-summary {
  min-width: 0;
}

.cart-main h1 {
  margin: 30px 0 35px;
  font-size: 46px;
}

.cart-empty-page {
  padding: 65px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.cart-empty-page svg {
  width: 35px;
  height: 35px;
  color: var(--muted);
}

.cart-line {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.cart-line:last-child {
  border-bottom: 1px solid var(--line);
}

.cart-line img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: var(--soft);
}

.cart-line h3 {
  margin-bottom: 7px;
  font-size: 15px;
}

.cart-line p {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
}

.cart-line-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-quantity-fixed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  font-size: 12px;
  font-weight: 750;
}

.cart-quantity-fixed small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.cart-line-actions button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
}

.cart-line-price {
  font-weight: 850;
  white-space: nowrap;
}

.order-summary {
  align-self: start;
  position: sticky;
  top: 20px;
  padding: 28px;
  background: var(--soft);
  border-top: 4px solid var(--green);
}

.order-summary h2 {
  font-size: 24px;
}

.order-summary > div:not(.summary-trust):not(.checkout-payment-options) {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.order-summary .order-total {
  margin-bottom: 18px;
  border-bottom: 0 !important;
  font-size: 17px !important;
}

.order-summary > .button {
  margin-bottom: 12px;
}

.checkout-price-promise {
  display: grid;
  gap: 2px;
  margin: -4px 0 14px;
  padding: 11px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--paper);
  text-align: center;
}

.checkout-price-promise strong {
  color: var(--green-dark);
  font-size: 14px;
}

.checkout-price-promise > span {
  color: var(--muted);
  font-size: 11px;
}

.checkout-button-icon {
  display: inline-grid;
  place-items: center;
}

.checkout-button-icon.is-loading svg {
  animation: checkout-spin 800ms linear infinite;
}

@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}

.checkout-status {
  margin: 12px 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.guest-checkout-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 780;
}

.guest-checkout-note svg {
  width: 17px;
  height: 17px;
}

.checkout-payment-options {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.checkout-payment-options svg {
  width: 18px;
  margin-top: 2px;
  color: var(--green);
}

.checkout-payment-options strong,
.checkout-payment-options small {
  display: block;
}

.checkout-payment-options strong {
  font-size: 12px;
}

.checkout-payment-options small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.order-summary .button:disabled {
  cursor: not-allowed;
  background: var(--ob-muted);
  opacity: 1;
}

.checkout-status.is-error {
  color: #a02720;
}

.checkout-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 12px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.checkout-retry[hidden] {
  display: none;
}

.checkout-retry:disabled {
  cursor: wait;
  opacity: 0.65;
}

.checkout-retry svg {
  width: 14px;
  height: 14px;
}

.checkout-noscript {
  padding: 10px;
  border: 1px solid #d9a6a1;
  background: #fff8f7;
  text-align: left;
}

.checkout-noscript a {
  color: inherit;
  font-weight: 760;
}

.summary-trust {
  display: grid;
  gap: 9px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.summary-trust span,
.summary-trust a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.summary-trust a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.summary-trust svg {
  width: 17px;
  color: var(--green);
}

.order-summary > small {
  display: block;
  margin-top: 15px;
  color: var(--muted);
  font-size: 11px;
}

body[data-page="checkout"] {
  min-height: 100vh;
  background: #F9F7F6;
}

.checkout-site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.checkout-site-header-inner {
  width: min(1180px, calc(100% - 48px));
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
}

.checkout-logo {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-size: 25px;
  font-weight: 850;
}

.checkout-logo span {
  color: var(--green);
}

.checkout-header-assurance {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--green-dark);
}

.checkout-header-assurance svg {
  width: 19px;
  height: 19px;
}

.checkout-header-assurance strong,
.checkout-header-assurance small {
  display: block;
}

.checkout-header-assurance strong {
  font-size: 12px;
}

.checkout-header-assurance small {
  color: var(--muted);
  font-size: 10px;
}

.checkout-page {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 72px;
}

.checkout-breadcrumb {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
}

.checkout-breadcrumb a,
.checkout-breadcrumb span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.checkout-breadcrumb a {
  color: var(--ink);
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkout-breadcrumb svg {
  width: 16px;
  height: 16px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}

.checkout-form {
  min-width: 0;
  padding: 8px 0;
}

.checkout-intro {
  margin-bottom: 30px;
}

.checkout-intro .eyebrow {
  margin-bottom: 7px;
}

.checkout-intro h1 {
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.08;
}

.checkout-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.checkout-loading {
  min-height: 230px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.checkout-loading svg,
[data-pay-loading] svg {
  animation: checkout-spin 850ms linear infinite;
}

.checkout-loading svg {
  width: 27px;
  height: 27px;
  color: var(--green);
}

.checkout-alert {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid #d8a39e;
  border-radius: 0;
  background: #fff7f6;
  color: #81281f;
}

.checkout-alert strong,
.checkout-alert span {
  display: block;
}

.checkout-alert .button {
  width: max-content;
  margin-top: 6px;
}

.checkout-elements {
  display: grid;
  gap: 0;
}

.checkout-express,
.checkout-step {
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
}

.checkout-express {
  padding-top: 0;
  border-top: 0;
}

.checkout-express h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.checkout-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.checkout-divider::before,
.checkout-divider::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.checkout-step-heading {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.checkout-step-heading > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 850;
}

.checkout-step-heading h2 {
  margin: 0;
  font-size: 19px;
}

.checkout-step-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.checkout-field,
.checkout-field > span,
.checkout-field small {
  display: block;
}

.checkout-field > span {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 730;
}

.checkout-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--paper);
}

.checkout-field input:focus {
  border-color: var(--green-dark);
  outline: 1px solid var(--green-dark);
  outline-offset: 0;
}

.checkout-field input[aria-invalid="true"] {
  border-color: var(--red-dark);
}

.checkout-field small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.checkout-contact-help {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.checkout-field-error,
.checkout-confirm-error {
  margin: 8px 0 0;
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 650;
}

.checkout-field-error:empty,
.checkout-confirm-error:empty {
  display: none;
}

.checkout-delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 14px;
  border-left: 3px solid var(--green);
  background: var(--soft);
}

.checkout-delivery-note svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green);
}

.checkout-delivery-note strong,
.checkout-delivery-note small {
  display: block;
}

.checkout-delivery-note strong {
  font-size: 12px;
}

.checkout-delivery-note small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.checkout-pay-button {
  width: 100%;
  min-height: 56px;
  margin-top: 22px;
  gap: 9px;
  font-size: 16px;
}

.checkout-pay-button:disabled {
  cursor: not-allowed;
  background: #7B7974;
  opacity: 1;
}

.checkout-pay-button svg {
  width: 18px;
  height: 18px;
}

.checkout-legal-confirmation {
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.checkout-legal-confirmation a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-security-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.checkout-security-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.checkout-security-row svg {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.checkout-order {
  position: sticky;
  top: 20px;
  padding: 26px;
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--green);
  border-radius: 0;
  background: var(--paper);
}

.checkout-order-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.checkout-order-heading .eyebrow {
  margin: 0 0 3px;
}

.checkout-order-heading h2 {
  margin: 0;
  font-size: 22px;
}

.checkout-order-heading a {
  font-size: 12px;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkout-order-items {
  margin-top: 22px;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--line);
}

.checkout-order-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.checkout-order-image {
  position: relative;
}

.checkout-order-image img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--soft);
}

.checkout-order-image span {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.checkout-order-item strong,
.checkout-order-item small {
  display: block;
}

.checkout-order-item strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.checkout-order-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.checkout-order-item b {
  font-size: 12px;
  white-space: nowrap;
}

.checkout-order-skeleton {
  height: 64px;
  border-radius: 0;
  background: linear-gradient(90deg, #F1EFEE 25%, #F9F9F7 50%, #F1EFEE 75%);
  background-size: 200% 100%;
  animation: checkout-skeleton 1.2s ease-in-out infinite;
}

@keyframes checkout-skeleton {
  to { background-position: -200% 0; }
}

.checkout-totals {
  margin: 14px 0 0;
}

.checkout-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  color: var(--muted);
  font-size: 12px;
}

.checkout-totals dd {
  margin: 0;
  color: var(--ink);
  font-weight: 750;
  white-space: nowrap;
}

.checkout-totals .checkout-total {
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  color: var(--ink);
  font-size: 17px;
}

.checkout-totals .checkout-total dd {
  font-size: 22px;
  font-weight: 880;
}

.checkout-total-promise {
  margin: 4px 0 18px;
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 720;
  text-align: right;
}

.checkout-order-trust {
  display: grid;
  gap: 10px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.checkout-order-trust span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}

.checkout-order-trust svg {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.checkout-order-trust a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-site-footer {
  padding: 24px max(24px, calc((100% - 1180px) / 2));
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
}

.checkout-site-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.checkout-site-footer a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-site-footer p {
  margin: 9px 0 0;
}

@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .checkout-order {
    position: static;
    order: -1;
  }
}

@media (max-width: 620px) {
  .checkout-site-header-inner,
  .checkout-page {
    width: calc(100% - 28px);
  }

  .checkout-site-header-inner {
    min-height: 64px;
  }

  .checkout-logo {
    font-size: 20px;
  }

  .checkout-header-assurance small,
  .checkout-breadcrumb > span {
    display: none;
  }

  .checkout-page {
    padding-top: 12px;
    padding-bottom: 48px;
  }

  .checkout-breadcrumb {
    margin-bottom: 10px;
  }

  .checkout-layout {
    gap: 22px;
  }

  .checkout-order {
    padding: 18px;
  }

  .checkout-order-heading h2 {
    font-size: 19px;
  }

  .checkout-form {
    padding-top: 0;
  }

  .checkout-intro {
    margin-bottom: 23px;
  }

  .checkout-intro h1 {
    font-size: 31px;
  }

  .checkout-express,
  .checkout-step {
    padding: 22px 0;
  }

  .checkout-step-heading {
    margin-bottom: 15px;
  }

  .checkout-divider {
    grid-template-columns: 1fr;
  }

  .checkout-divider::before,
  .checkout-divider::after {
    display: none;
  }

  .checkout-security-row {
    justify-content: flex-start;
  }

  .checkout-site-footer {
    padding: 20px 14px;
  }
}

/* Shopify-inspired single-page checkout. Native customer fields render before Stripe. */
body[data-page="checkout"] {
  background: linear-gradient(90deg, #fff 0 58%, #F6F6F4 58% 100%);
  color: #232220;
}

.checkout-site-header {
  background: #fff;
  border-bottom-color: #DFDFDD;
}

.checkout-site-header-inner {
  width: min(1080px, calc(100% - 48px));
  min-height: 72px;
}

.checkout-logo {
  font-size: 23px;
  letter-spacing: 0;
}

.checkout-header-cart {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #353431;
}

.checkout-header-cart svg {
  width: 21px;
  height: 21px;
}

.checkout-page {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 64px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(330px, 42%);
  gap: 0;
  align-items: start;
}

.checkout-form {
  min-width: 0;
  padding: 46px 54px 62px 0;
}

.checkout-elements {
  display: block;
}

.checkout-alert {
  margin: 32px 50px 0 0;
}

.checkout-express {
  padding: 0 0 25px;
  border: 0;
}

.checkout-express h2 {
  margin: 0 0 13px;
  color: var(--ob-muted);
  font-size: 13px;
  font-weight: 520;
  text-align: center;
}

.checkout-divider {
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  margin-top: 22px;
  color: var(--ob-muted);
  font-size: 11px;
}

.checkout-divider::before,
.checkout-divider::after {
  display: block;
  background: #DFDFDD;
}

.checkout-section {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}

.checkout-subhead {
  margin: 22px 0 0;
}

.checkout-subhead h3 {
  margin: 0 0 12px;
  color: #1B1917;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.checkout-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.checkout-section-heading h2,
.checkout-shipping-method legend {
  margin: 0;
  color: #1B1917;
  font-size: 19px;
  font-weight: 760;
  line-height: 1.25;
}

.checkout-section-heading > span {
  color: var(--ob-muted);
  font-size: 12px;
}

.checkout-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkout-control {
  position: relative;
  min-width: 0;
  min-height: 54px;
  display: block;
  border: 1px solid #CDCBCA;
  border-radius: 0;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.checkout-control-wide {
  grid-column: 1 / -1;
}

.checkout-control > span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 12px;
  color: var(--ob-muted);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.checkout-control input,
.checkout-control select {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 20px 12px 6px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #232220;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
}

.checkout-control select {
  cursor: pointer;
}

.checkout-control:focus-within {
  border-color: #1C6B45;
  box-shadow: 0 0 0 1px #1C6B45;
}

.checkout-control:has([aria-invalid="true"]) {
  border-color: #A3271F;
  box-shadow: 0 0 0 1px #A3271F;
}

.checkout-control small {
  display: block;
  padding: 0 12px 7px;
  color: #A3271F;
  font-size: 11px;
}

.checkout-control small:empty {
  display: none;
}

.checkout-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  color: #373633;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.checkout-checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: #1C6B45;
}

.checkout-shipping-method {
  min-inline-size: 0;
}

.checkout-shipping-method legend {
  margin-bottom: 14px;
}

.checkout-shipping-method > label {
  min-height: 67px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #1C6B45;
  border-radius: 0;
  background: #DDEFE3;
  cursor: pointer;
}

.checkout-shipping-method input {
  accent-color: #1C6B45;
}

.checkout-shipping-method label > span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.checkout-shipping-method label svg {
  width: 18px;
  color: #1C6B45;
}

.checkout-shipping-method b {
  font-size: 13px;
}

.checkout-shipping-method small {
  grid-column: 2;
  color: var(--ob-muted);
  font-size: 10px;
}

.checkout-shipping-method strong {
  font-size: 12px;
}

.checkout-payment-section {
  margin-bottom: 0;
}

.checkout-payment-heading {
  align-items: flex-start;
}

.checkout-payment-heading p {
  margin: 3px 0 0;
  color: var(--ob-muted);
  font-size: 11px;
}

.checkout-payment-shell {
  min-height: 176px;
}

.checkout-payment-shell.is-ready {
  min-height: 0;
}

.checkout-payment-loading {
  min-height: 176px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11px;
  border: 1px solid #D5D5D3;
  border-radius: 0;
  background: #FBFAFA;
  color: var(--ob-muted);
  font-size: 12px;
  text-align: center;
}

.checkout-payment-loading[hidden] {
  display: none;
}

.checkout-payment-loading svg {
  width: 23px;
  height: 23px;
  animation: checkout-spin 850ms linear infinite;
  color: #1C6B45;
}

.checkout-billing-toggle {
  margin: 12px 0 0;
  padding: 13px 14px;
  border: 1px solid #D9D9D7;
  border-radius: 0;
  background: #fafafa;
}

.checkout-billing-fields {
  margin-top: 10px;
}

.checkout-confirm-error {
  margin-top: 12px;
}

.checkout-pay-button {
  min-height: 55px;
  margin-top: 20px;
  border-radius: 0;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-size: 15px;
  font-weight: 800;
}

.checkout-pay-button:hover:not(:disabled) {
  background: var(--ob-ink-hover);
}

.checkout-pay-button:disabled {
  background: #83807D;
}

.checkout-legal-confirmation {
  max-width: 520px;
  margin-top: 11px;
  font-size: 10px;
}

.checkout-security-row {
  gap: 9px 16px;
  margin-top: 16px;
  padding-top: 14px;
}

.checkout-security-row span {
  font-size: 9px;
}

.checkout-order {
  position: sticky;
  top: 0;
  min-height: calc(100vh - 72px);
  padding: 46px 0 62px 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-order-details > summary {
  display: none;
}

.checkout-order-heading {
  align-items: center;
}

.checkout-order-heading h2 {
  margin: 0;
  font-size: 18px;
}

.checkout-order-heading a {
  color: #55524E;
  font-size: 11px;
}

.checkout-order-items {
  margin-top: 20px;
  padding: 0 0 16px;
  border-bottom-color: #DADAD8;
}

.checkout-order-item {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
}

.checkout-order-image img {
  width: 58px;
  height: 58px;
  border-color: #DADAD8;
  border-radius: 0;
  background: #fff;
}

.checkout-order-item strong {
  font-size: 11px;
}

.checkout-order-item b {
  font-size: 11px;
}

.checkout-totals > div {
  padding: 6px 0;
  color: #5B5956;
  font-size: 11px;
}

.checkout-totals .checkout-total {
  margin-top: 6px;
  padding-top: 13px;
  border-top-color: #DADAD8;
  font-size: 15px;
}

.checkout-totals .checkout-total dd {
  font-size: 20px;
}

.checkout-total-promise {
  margin-bottom: 16px;
  font-size: 9px;
}

.checkout-order-trust {
  gap: 9px;
  border-top-color: #DADAD8;
}

.checkout-order-trust span {
  font-size: 9px;
}

.checkout-site-footer {
  padding: 21px max(24px, calc((100% - 1080px) / 2));
  background: #fff;
}

@media (max-width: 900px) {
  body[data-page="checkout"] {
    background: #fff;
  }

  .checkout-page {
    width: 100%;
    padding-bottom: 42px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout-form {
    padding: 30px max(20px, calc((100% - 620px) / 2)) 50px;
  }

  .checkout-order {
    position: static;
    min-height: 0;
    order: -1;
    padding: 0;
    border-bottom: 1px solid #DBDAD9;
    background: #F6F6F4;
  }

  .checkout-order-details > summary {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 max(20px, calc((100% - 620px) / 2));
    color: #1C6B45;
    cursor: pointer;
    list-style: none;
  }

  .checkout-order-details > summary::-webkit-details-marker {
    display: none;
  }

  .checkout-order-details > summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
  }

  .checkout-order-details > summary svg {
    width: 15px;
    transition: transform 150ms ease;
  }

  .checkout-order-details[open] > summary svg {
    transform: rotate(180deg);
  }

  .checkout-order-details > summary strong {
    color: #232220;
    font-size: 16px;
  }

  .checkout-order-content {
    padding: 18px max(20px, calc((100% - 620px) / 2)) 24px;
    border-top: 1px solid #DBDAD9;
  }
}

@media (max-width: 620px) {
  .checkout-site-header-inner {
    width: calc(100% - 32px);
    min-height: 64px;
  }

  .checkout-logo {
    font-size: 21px;
  }

  .checkout-form {
    padding: 27px 16px 44px;
  }

  .checkout-section {
    margin-bottom: 27px;
  }

  .checkout-section-heading {
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .checkout-section-heading h2,
  .checkout-shipping-method legend {
    font-size: 18px;
  }

  .checkout-fields {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .checkout-control-wide {
    grid-column: auto;
  }

  .checkout-divider {
    grid-template-columns: 1fr auto 1fr;
  }

  .checkout-shipping-method > label {
    padding: 12px;
  }

  .checkout-security-row {
    justify-content: flex-start;
  }

  .checkout-order-content,
  .checkout-order-details > summary {
    padding-right: 16px;
    padding-left: 16px;
  }

  .checkout-site-footer {
    padding: 20px 16px;
  }
}

.mobile-menu,
.cart-drawer {
  position: fixed;
  z-index: 1001;
  top: 0;
  bottom: 0;
  width: min(430px, 92vw);
  background: var(--ob-card);
}

/* The drawers lost their box-shadow with the shadow tokens, so the edge against the
   scrim is now carried by a real ink border. */
.mobile-menu {
  left: 0;
  border-right: 1.5px solid var(--ob-ink);
}

.cart-drawer {
  right: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 220ms ease;
}

.cart-drawer.is-open {
  transform: none;
}

.drawer-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.drawer-head h2,
.drawer-head p {
  margin: 0;
}

.drawer-head h2 {
  font-size: 25px;
}

.mobile-menu nav {
  padding: 12px 22px;
}

.mobile-menu nav a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.mobile-menu nav hr {
  height: 12px;
  margin: 0;
  border: 0;
}

.cart-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 0 22px;
}

.drawer-empty {
  padding: 70px 15px;
  text-align: center;
}

.drawer-empty svg {
  width: 32px;
  height: 32px;
  color: var(--muted);
}

.drawer-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.drawer-line img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: var(--soft);
}

.drawer-line h3 {
  margin-bottom: 6px;
  font-size: 13px;
}

.drawer-line p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.drawer-line button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.drawer-line button svg {
  width: 16px;
}

.cart-drawer-summary {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--line);
}

.cart-drawer-summary > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.cart-drawer-summary > p {
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
}

.scrim {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(20, 24, 20, 0.56);
}

.search-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(720px, calc(100dvh - 40px));
  padding: 0;
  border: 1.5px solid var(--ob-ink);
}

.search-dialog::backdrop {
  background: rgba(20, 24, 20, 0.58);
}

.dialog-search {
  height: 58px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  margin: 20px;
  border: 1px solid var(--control-border);
}

.dialog-search svg {
  margin: auto;
}

.dialog-search input {
  min-width: 0;
  height: 54px;
  border: 0;
  outline: 0;
}

.dialog-search:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus);
}

.dialog-search button {
  height: 44px;
  margin-right: 6px;
  padding: 0 17px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.search-results {
  max-height: 500px;
  overflow: auto;
  padding: 0 20px 24px;
}

.search-results > a {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.search-result-item {
  min-height: 80px !important;
  display: grid !important;
  grid-template-columns: 64px 1fr auto;
  gap: 13px;
}

.search-result-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--soft);
}

.search-result-item strong,
.search-result-item small {
  display: block;
}

.search-result-item.is-active {
  background: var(--soft-yellow);
  box-shadow: inset 3px 0 0 var(--green);
}

.search-result-item strong {
  font-size: 13px;
}

.search-result-item small {
  color: var(--muted);
  font-size: 11px;
}

.basket-toast {
  position: fixed;
  z-index: 1200;
  right: 20px;
  bottom: 20px;
  min-width: 300px;
  max-width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  border: 1.5px solid var(--ob-ink);
  font-size: 13px;
}

.basket-toast a {
  font-weight: 800;
  text-decoration: underline;
}

.cookie-banner {
  position: fixed;
  z-index: 1300;
  right: 20px;
  bottom: 20px;
  left: 20px;
  max-width: 880px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 20px;
  background: var(--ob-card);
  border: 1.5px solid var(--ob-ink);
}

.cookie-banner h2 {
  margin-bottom: 7px;
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Was --muted at 12px, which is 7.05:1 but small and grey on the one panel a first-time
   visitor is forced to read. Promoted to --ob-ink-2 at 12.18:1. */
.cookie-banner p {
  margin-bottom: 6px;
  color: var(--ob-ink-2);
  font-size: 12px;
}

.cookie-banner a {
  color: var(--ob-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 9px;
}

.cookie-actions .button {
  min-width: 125px;
  font-family: var(--ob-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-page {
  width: min(860px, calc(100% - 48px));
  min-height: 560px;
  margin: 0 auto 80px;
  padding-top: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.status-hero {
  width: min(680px, 100%);
}

.status-hero h1 {
  margin-bottom: 15px;
  font-size: 42px;
}

.status-hero > p:not(.eyebrow) {
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
  color: var(--muted);
}

.status-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.status-icon [data-order-icon="checking"] svg {
  animation: checkout-spin 900ms linear infinite;
}

.status-page[data-order-state="missing"] .status-icon,
.status-page[data-order-state="payment_failed"] .status-icon,
.status-page[data-order-state="expired"] .status-icon {
  background: var(--red);
}

.order-receipt,
.order-next-steps {
  width: 100%;
  margin-top: 44px;
  padding: 30px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  text-align: left;
}

.order-receipt-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.order-receipt-heading h2,
.order-next-steps h2 {
  margin: 0;
  font-size: 24px;
}

.order-receipt-heading > strong {
  color: var(--green-dark);
  font-size: 25px;
  white-space: nowrap;
}

.order-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.order-facts > div {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--line);
}

.order-facts > div:first-child {
  padding-left: 0;
}

.order-facts > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.order-facts dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.order-facts dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 800;
}

.order-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 0 0;
}

.order-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--soft);
}

.order-item strong,
.order-item span {
  display: block;
}

.order-item strong {
  font-size: 14px;
}

.order-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.order-item b {
  font-size: 14px;
  white-space: nowrap;
}

.order-next-steps > .eyebrow {
  margin-bottom: 5px;
}

.order-next-steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.order-next-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}

.order-next-steps li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 850;
}

.order-next-steps li strong {
  font-size: 14px;
}

.order-next-steps li p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.status-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.status-support {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.status-support a {
  color: var(--green-dark);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 700px) {
  /* The eyebrow drops to its first item. No information is lost: the Condition Split
     directly below states both halves, and its third row states the return fact. */
  .hero-content .ob-eyebrow-list span + span,
  .hero-content .ob-eyebrow-list span::after {
    display: none;
    content: none;
  }

  .status-page {
    width: calc(100% - 32px);
    margin-bottom: 55px;
    padding-top: 42px;
  }

  .status-hero h1 {
    font-size: 32px;
  }

  .order-receipt,
  .order-next-steps {
    margin-top: 32px;
    padding: 24px 0;
  }

  .order-receipt-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .order-receipt-heading h2,
  .order-next-steps h2 {
    font-size: 21px;
  }

  .order-facts,
  .order-next-steps ol {
    grid-template-columns: 1fr;
  }

  .order-facts > div,
  .order-facts > div:first-child,
  .order-facts > div:last-child {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .order-facts > div:last-child {
    border-bottom: 0;
  }

  .order-next-steps ol {
    gap: 18px;
  }

  .order-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .order-item img {
    width: 56px;
    height: 56px;
  }

  .order-item b {
    grid-column: 2;
  }

  .status-actions {
    width: 100%;
    flex-direction: column;
  }

  .status-actions .button {
    width: 100%;
  }
}

.site-footer {
  padding: 56px max(20px, calc((100% - var(--max)) / 2)) 24px;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(35px, 6vw, 90px);
  padding-bottom: 50px;
}

.footer-grid h2 {
  margin-bottom: 18px;
  color: var(--ob-on-ink-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-grid > div > a,
.footer-link {
  display: block;
  margin: 10px 0;
  color: var(--ob-on-ink);
  font-size: 13px;
}

.footer-link {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.brand-light {
  color: #fff;
  font-size: 24px !important;
}

.brand-light span {
  color: var(--ob-on-ink-muted);
}

.footer-brand p {
  max-width: 330px;
  margin: 20px 0;
  color: var(--ob-on-ink-muted);
  font-size: 14px;
}

.company-disclosure {
  padding: 24px 0;
  border-top: 1px solid var(--ob-on-ink-rule);
  border-bottom: 1px solid var(--ob-on-ink-rule);
}

.company-disclosure p {
  margin: 4px 0;
  color: var(--ob-on-ink-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  color: var(--ob-on-ink-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .header-main {
    grid-template-columns: 200px minmax(300px, 1fr) 155px;
  }

  .main-nav {
    gap: 24px;
  }

  .collection-grid,
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .collection-tile:last-child {
    grid-column: span 3;
    min-height: 300px;
  }

  .need-grid {
    grid-template-columns: 1fr 1fr;
  }

  .need-grid a:nth-child(2) {
    border-right: 0;
  }

  .need-grid a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .delivery-band {
    grid-template-columns: 1fr;
  }

  .product-layout {
    gap: 40px;
  }

  .shop-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .utility-bar {
    gap: 32px;
  }

  .utility-bar span:nth-child(2) {
    display: none;
  }

  .header-main {
    min-height: 68px;
    grid-template-columns: 44px 1fr auto;
    gap: 8px;
  }

  .header-search,
  .main-nav,
  .desktop-search-toggle {
    display: none;
  }

  .mobile-only,
  .mobile-search {
    display: block;
  }

  .mobile-search {
    padding: 8px 16px;
    background: var(--paper);
  }

  .mobile-search button {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--soft);
    color: var(--muted);
    text-align: left;
  }

  .mobile-search svg {
    width: 18px;
  }

  .category-rail {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .category-rail > div {
    width: max-content;
    min-height: 66px;
    grid-template-columns: repeat(4, 165px);
  }

  .category-rail a {
    justify-content: flex-start;
  }

  /* Stacked: the photograph becomes a band above the argument, never a backdrop
     behind it. The Condition Split and the three reasons stay on every screen,
     they are the payload rather than decoration. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .hero picture {
    grid-column: 1;
    grid-row: 1;
    height: 200px;
    border-left: 0;
    border-bottom: 1.5px solid var(--ob-ink);
  }

  .hero picture img {
    height: 200px;
  }

  .hero-content {
    grid-column: 1;
    grid-row: 2;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    padding: 30px max(20px, calc((100vw - var(--max)) / 2));
    transform: none;
  }

  .hero-content > p:not(.eyebrow) {
    max-width: 56ch;
    font-size: 16px;
  }

  .hero-content .ob-split,
  .hero-content .ob-reasons {
    max-width: none;
  }

  /* ob-split-lg degrades to md rather than disappearing. */
  .hero-content .ob-split-lg .ob-split-cell {
    min-height: 48px;
    padding: 8px 12px;
  }

  .hero-content .ob-split-lg .ob-split-cell svg {
    width: 17px;
    height: 17px;
  }

  .hero-content .ob-split-lg .ob-split-label {
    font-size: 10px;
  }

  .hero-content .ob-split-lg .ob-split-value {
    font-size: 13px;
  }

  .hero-content .ob-split-lg .ob-split-row {
    padding: 6px 12px;
    font-size: 10px;
  }

  .benefit-strip {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .benefit-strip > div {
    min-width: min(82vw, 330px);
    min-height: 68px;
    justify-content: flex-start;
    padding: 14px 24px;
    border-right: 1px solid #4A4335;
    border-bottom: 0;
    scroll-snap-align: start;
  }

  .benefit-strip > div:last-child {
    border-right: 0;
  }

  .section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .collection-grid {
    grid-template-columns: 1fr 1fr;
  }

  .collection-tile,
  .collection-tile:last-child {
    grid-column: auto;
    min-height: 320px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-band,
  .collection-hero {
    grid-template-columns: 1fr;
  }

  .editorial-image {
    min-height: 480px;
  }

  .collection-hero > div {
    padding: 40px 24px;
  }

  .collection-hero .breadcrumbs {
    margin-bottom: 30px;
  }

  .collection-hero > img {
    min-height: 320px;
    max-height: 480px;
  }

  .product-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "gallery"
      "facts"
      "buy";
    grid-template-rows: auto;
  }

  .product-layout:not(:has(> .product-facts)) {
    grid-template-areas:
      "intro"
      "gallery"
      "buy";
  }

  .product-layout.product-layout-launch {
    grid-template-areas:
      "intro"
      "gallery"
      "offer"
      "facts"
      "buy";
  }

  .product-gallery {
    display: block;
  }

  .product-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
  }

  .product-thumb {
    width: auto;
    min-height: 0;
  }

  .product-intro h1 {
    font-size: 34px;
  }

  .product-buy {
    position: static;
  }

  .launch-desktop-buy {
    display: none;
  }

  .launch-mobile-buy {
    display: block;
  }

  .product-layout-launch .product-intro h1 {
    font-size: 34px;
  }

  .xc10-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .xc10-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .xc10-metrics > div:nth-child(-n + 2) {
    border-bottom: 1px solid #504D48;
  }

  .xc10-story-band,
  .xc10-technology-band,
  .xc10-everyday-band,
  .xc10-kit-section,
  .xc10-faq-section,
  .xc10-final-offer {
    grid-template-columns: 1fr;
  }

  .xc10-story-media,
  .xc10-technology-media,
  .xc10-everyday-band > div:first-child {
    min-height: 480px;
  }

  .xc10-benefit-grid {
    grid-template-columns: 1fr 1fr;
  }

  .xc10-technology-media {
    order: -1;
  }

  .xc10-kit-section,
  .xc10-faq-section {
    gap: 45px;
  }

  .xc10-final-buy {
    padding-top: 26px;
    padding-left: 0;
    border-top: 1px solid #524F4A;
    border-left: 0;
  }

  body[data-page="product"] .mobile-search,
  body[data-page="product"] .category-rail,
  body[data-page="cart"] .mobile-search,
  body[data-page="cart"] .category-rail {
    display: none;
  }

  body[data-page="product"] .desktop-search-toggle,
  body[data-page="cart"] .desktop-search-toggle {
    display: inline-grid;
  }

  .product-detail-band {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .about-story,
  .faq-page,
  .contact-layout,
  .withdrawal-layout,
  .prose-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .faq-page aside {
    order: -1;
  }

  .prose-layout > aside {
    position: static;
  }

  .prose-layout > aside a {
    display: inline-block;
    margin-right: 15px;
  }

  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-filters {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-top: 0;
  }

  .shop-filters legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .shop-filters button {
    width: auto;
    min-width: max-content;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--control-border);
    border-radius: 0;
  }

  .shop-filters button.is-active {
    background: var(--ink);
    color: #fff;
  }

  .shop-filters button span {
    background: rgba(255, 255, 255, 0.18);
  }

  .cart-page {
    grid-template-columns: 1fr;
  }

  .order-summary {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .utility-bar {
    min-height: 32px;
    padding: 7px 12px;
    justify-content: center;
  }

  .utility-bar span {
    display: none;
  }

  .utility-bar span:first-child {
    display: inline-flex;
  }

  .header-main {
    width: calc(100% - 24px);
  }

  .brand {
    gap: 5px;
    font-size: 20px;
  }

  .cart-button {
    width: 46px;
    justify-content: center;
    padding: 0;
  }

  body[data-page="home"] .mobile-search,
  body[data-page="shop"] .mobile-search,
  body[data-page="shop"] .category-rail {
    display: none;
  }

  body[data-page="home"] .desktop-search-toggle,
  body[data-page="shop"] .desktop-search-toggle {
    display: inline-grid;
  }

  body[data-page="home"] .category-rail > div {
    min-height: 54px;
    grid-template-columns: repeat(4, 136px);
  }

  body[data-page="home"] .category-rail a {
    gap: 7px;
    padding: 8px 10px;
  }

  body[data-page="home"] .category-rail svg {
    width: 18px;
    height: 18px;
  }

  .cart-button > span {
    display: none;
  }

  .cart-button b {
    position: absolute;
    top: 0;
    right: 0;
    transform: none;
  }

  .category-rail > div {
    grid-template-columns: repeat(4, 150px);
  }

  .category-rail a {
    font-size: 12px;
  }

  .hero {
    min-height: 0;
    height: auto;
  }

  .hero picture,
  .hero picture img {
    height: 172px;
  }

  .hero picture img {
    object-position: center bottom;
  }

  .hero-content {
    top: auto;
    right: auto;
    left: auto;
    padding: 24px 16px 26px;
  }

  .hero-content .eyebrow {
    max-width: none;
    line-height: 1.3;
  }

  .hero-content h1 {
    margin-bottom: 10px;
  }

  .hero-content > p:not(.eyebrow) {
    max-width: 340px;
    margin-bottom: 18px;
    font-size: 15px;
  }

  .hero-content .button {
    min-height: 44px;
  }

  .hero-content .text-link {
    display: none;
  }

  .section,
  .catalogue-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  #nos-choix {
    padding-top: 46px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 23px;
  }

  .section-heading h2 {
    font-size: 29px;
  }

  .collection-grid {
    display: flex;
    gap: 10px;
    margin-right: -16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .collection-tile,
  .collection-tile:last-child {
    min-width: 78vw;
    min-height: 340px;
    scroll-snap-align: start;
  }

  .collection-tile:last-child {
    margin-right: 16px;
  }

  .product-grid {
    gap: 16px 10px;
  }

  /* Separation from the kraft ground is carried entirely by the card edge: white on
     canvas is 1.22:1 and on the soft band the --ob-control hairline is only 3.45:1,
     which is the weakest pair in the system and lands on the surface that carries most
     of the traffic. On a phone the edge goes ink, 12.89:1, so the sheet detaches on a
     dim panel. The ground is never darkened instead, which would break the muted-text
     ratios above it. */
  .product-card {
    border-color: var(--ob-ink);
  }

  .ob-ref-strip {
    min-height: 20px;
    padding: 3px 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  /* Two-up on a phone the strip cannot hold both halves, and a clipped reference is
     worse than no second field. The collection is already named on the brand line
     below, the SKU is not printed anywhere else on the card, so the SKU wins. */
  .ob-ref-collection {
    display: none;
  }

  /* The Split holds at every width. Below 620px the card cell is about 95px wide and
     "NEVER USED" no longer fits beside its glyph: the glyph goes and the word stays,
     because the word is the load-bearing half. Meaning is still carried by two
     independent channels, the words and the fills, so 1.4.1 still holds. Truncating
     the value instead would break the component silently, which is the one failure
     this design cannot survive. */
  .ob-split-sm .ob-split-cell {
    min-height: 32px;
    padding: 5px 6px;
    column-gap: 0;
  }

  .ob-split-sm .ob-split-cell > svg {
    display: none;
  }

  .ob-split-sm .ob-split-label {
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .ob-split-sm .ob-split-value {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  .product-card-media::after {
    width: 22px;
    height: 22px;
  }

  .product-card-body {
    min-height: 0;
    padding: 11px 10px 10px;
  }

  .product-badge {
    top: 6px;
    left: 6px;
    padding: 4px 6px;
    font-size: 9px;
  }

  .product-brand {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .product-card h3 {
    min-height: 58px;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .product-card-specs {
    margin-bottom: 11px;
    padding-top: 0;
  }

  /* Too narrow for a leader: label above, value below, both still left aligned so the
     eye reads one column instead of hunting across the card. */
  .product-card-specs li {
    display: block;
    padding: 5px 0;
    font-size: 11px;
  }

  .ob-spec-label {
    display: block;
    white-space: normal;
  }

  .ob-spec-lead {
    display: none;
  }

  .ob-spec-value {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    white-space: normal;
  }

  .product-card-foot {
    align-items: flex-end;
    flex-direction: column;
    margin-top: 10px;
  }

  .product-card .product-price-primary {
    width: 100%;
    margin-bottom: 11px;
    padding-top: 8px;
    font-size: 19px;
  }

  .product-price {
    width: 100%;
    font-size: 15px;
  }

  /* At two-up the card is about 167px, so the label is held on one line by trimming the
     padding, the gap and the tracking rather than by shortening the words. */
  .quick-add {
    width: 100%;
    min-height: 42px;
    gap: 5px;
    padding: 9px 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .quick-add span {
    white-space: nowrap;
  }

  .editorial-image {
    min-height: 360px;
  }

  .editorial-copy {
    padding: 50px 20px;
  }

  .need-grid {
    grid-template-columns: 1fr;
  }

  .need-grid a {
    min-height: 185px;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .need-grid a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .need-grid strong {
    margin-top: 30px;
  }

  .delivery-band {
    padding: 55px 20px;
  }

  .delivery-band ol {
    grid-template-columns: 1fr;
  }

  .delivery-band li {
    border-left: 0;
    border-top: 1px solid #786D5B;
  }

  .collection-hero > div {
    padding: 35px 18px;
  }

  .collection-hero > img {
    min-height: 260px;
  }

  .catalogue-toolbar {
    min-height: 46px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 0;
  }

  .catalogue-toolbar label {
    min-width: 0;
    margin-left: auto;
  }

  .catalogue-toolbar label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .catalogue-toolbar select {
    width: min(176px, 56vw);
    min-width: 0;
    height: 44px;
  }

  .shop-hero,
  .page-hero {
    padding: 48px 18px;
  }

  .shop-hero {
    padding: 14px 16px;
  }

  .shop-hero h1,
  .page-hero h1 {
    font-size: 40px;
  }

  .shop-hero h1 {
    margin-bottom: 7px;
    font-size: 28px;
  }

  .shop-hero .eyebrow {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .shop-hero > p:last-child {
    font-size: 13px;
    line-height: 1.35;
  }

  .shop-layout,
  .about-story,
  .faq-page,
  .contact-layout,
  .withdrawal-layout,
  .prose-layout,
  .cart-page {
    width: calc(100% - 32px);
    margin-top: 40px;
  }

  .shop-layout {
    gap: 10px;
    margin-top: 12px;
  }

  .shop-search {
    margin-bottom: 4px;
  }

  .cart-page {
    gap: 14px;
    margin-top: 16px;
  }

  .product-breadcrumbs,
  .product-layout {
    width: calc(100% - 32px);
  }

  .product-breadcrumbs {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .breadcrumb-trail {
    display: none;
  }

  .product-back-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .product-layout {
    gap: 14px;
    margin-bottom: 40px;
  }

  .product-layout-launch {
    margin-bottom: 34px;
  }

  .product-intro {
    padding-top: 0;
  }

  .product-intro h1 {
    margin-bottom: 12px;
    font-size: 30px;
  }

  .launch-offer-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .product-lead {
    margin-bottom: 14px;
    font-size: 14px;
  }

  .product-price-large {
    margin-top: 0;
    font-size: 24px;
  }

  .launch-current-price {
    font-size: 32px;
  }

  .launch-reference-price s {
    font-size: 19px;
  }

  .launch-price-badges {
    margin-top: 12px;
  }

  .launch-price-badges > span {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 13px;
  }

  .market-price-proof {
    margin-top: 12px;
    padding: 12px 13px;
  }

  .market-price-proof-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .market-price-proof-head > strong {
    font-size: 12px;
  }

  .market-price-proof-prices b {
    font-size: 16px;
  }

  .market-price-proof-prices > div:last-child b {
    font-size: 15px;
  }

  .market-price-proof-source {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .market-price-proof-source a {
    min-height: 36px;
  }

  .purchase-facts {
    margin-top: 0;
    padding: 12px 0;
  }

  .product-layout-launch .purchase-facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-thumbs {
    gap: 5px;
  }

  .product-buy h1 {
    font-size: 34px;
  }

  .purchase-controls {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .purchase-button-stack {
    grid-template-columns: 1fr;
  }

  .launch-cta-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .product-key-specs {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .xc10-metrics {
    min-height: 0;
  }

  .xc10-metrics > div {
    min-height: 112px;
    padding: 19px 12px;
  }

  .xc10-metrics strong {
    font-size: 28px;
  }

  .xc10-metrics span {
    max-width: 135px;
    font-size: 11px;
  }

  .xc10-story-media,
  .xc10-technology-media,
  .xc10-everyday-band > div:first-child {
    min-height: 0;
    aspect-ratio: 1;
  }


  .xc10-story-copy,
  .xc10-technology-copy,
  .xc10-everyday-band > div:last-child {
    padding: 48px 18px;
  }

  .xc10-story-copy h2,
  .xc10-technology-copy h2,
  .xc10-everyday-band h2,
  .xc10-kit-section h2,
  .xc10-faq-section h2,
  .xc10-final-offer h2 {
    font-size: 30px;
  }

  .xc10-heading-note {
    font-size: 14px;
  }

  .xc10-benefit-grid {
    grid-template-columns: 1fr;
  }

  .xc10-benefit-grid article {
    min-height: 0;
    padding: 23px;
  }

  .xc10-benefit-grid article > span {
    margin-bottom: 24px;
  }

  .xc10-kit-section,
  .xc10-faq-section {
    gap: 32px;
  }

  .xc10-spec-card {
    padding: 18px;
  }

  .xc10-spec-card dl > div {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 0.8fr);
    gap: 12px;
  }

  .xc10-final-offer {
    gap: 20px;
    padding: 52px 18px;
  }

  .xc10-final-buy > strong {
    font-size: 32px;
  }

  body[data-page="product"] {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .mobile-purchase-bar {
    position: fixed;
    z-index: 900;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(70px + env(safe-area-inset-bottom));
    /* Column, not grid: the bar holds the price+CTA row AND a badge strip beneath it.
       As a 2-column grid the badges were placed in the second column, next to the button. */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line-dark);
    transition: transform 180ms ease;
  }

  body.cookie-open .mobile-purchase-bar,
  body.inline-buy-visible .mobile-purchase-bar {
    transform: translateY(110%);
    pointer-events: none;
  }

  .mobile-purchase-bar b,
  .mobile-purchase-bar small {
    display: block;
  }

  .mobile-purchase-bar b {
    font-size: 16px;
  }

  .mobile-purchase-bar small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.25;
  }

  .support-form {
    padding: 20px;
  }

  .prose-layout > aside {
    overflow-x: auto;
    white-space: nowrap;
  }

  .cart-main h1 {
    margin: 14px 0 16px;
    font-size: 34px;
  }

  .cart-line {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
  }

  .cart-line img {
    width: 82px;
    height: 82px;
  }

  .cart-line h3,
  .cart-line p {
    overflow-wrap: anywhere;
  }

  .cart-line-actions {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .cart-line-price {
    grid-column: 2;
    justify-self: start;
  }

  .order-summary {
    padding: 16px;
  }

  .order-summary h2 {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .order-summary > div:not(.summary-trust) {
    padding: 8px 0;
  }

  .order-summary .order-total {
    margin-bottom: 8px;
  }

  .order-summary > .button {
    min-height: 50px;
    margin-bottom: 8px;
  }

  .guest-checkout-note,
  .checkout-status {
    margin-bottom: 8px;
  }

  .summary-trust {
    padding: 12px 0;
  }

  .search-dialog {
    width: calc(100% - 20px);
  }

  .dialog-search {
    grid-template-columns: 42px 1fr;
  }

  .dialog-search button {
    grid-column: 1 / 3;
    width: calc(100% + 2px);
    margin: 0 -1px -47px;
  }

  .search-results {
    padding-top: 47px;
  }

  .cookie-banner {
    right: 10px;
    bottom: 10px;
    left: 10px;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  body[data-page="product"] .basket-toast {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 12px;
    min-width: 0;
    max-width: none;
  }

  body[data-page="product"].inline-buy-visible .basket-toast {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .cookie-banner h2 {
    margin-bottom: 3px;
    font-size: 16px;
  }

  .cookie-banner p,
  .cookie-banner a {
    font-size: 12px;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-actions .button {
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-grid > div:not(:first-child) {
    padding-top: 25px;
    border-top: 1px solid #4A4335;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 360px) {
  .brand {
    font-size: 18px;
  }

  .category-rail > div {
    grid-template-columns: repeat(4, 138px);
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-card-body {
    min-height: 0;
  }

  body[data-page="shop"] .product-card-media {
    aspect-ratio: 4 / 3;
  }

  .product-card h3 {
    min-height: 0;
    font-size: 15px;
  }

  .product-card h3 a {
    display: block;
    overflow: visible;
  }

  /* The glyphs are already gone at this width (see the 620px block). Only the padding
     tightens further so the words keep their full length in a single column. */
  .ob-split-sm .ob-split-cell {
    padding: 5px 8px;
  }

  .product-summary {
    min-height: 0;
    -webkit-line-clamp: 3;
  }

  .collection-tile,
  .collection-tile:last-child {
    min-width: calc(100vw - 48px);
  }

  .purchase-controls {
    grid-template-columns: 1fr;
  }

  .cart-page {
    width: calc(100% - 24px);
  }

  .cart-main h1 {
    font-size: 34px;
  }

  .cart-line {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }

  .cart-line img {
    width: 76px;
    height: 76px;
  }

  .cart-line-actions .quantity-stepper {
    width: 112px;
  }

  .order-summary {
    padding: 20px 14px;
  }

  .quantity-stepper {
    width: 120px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 480ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Universal store-wide checkout, 2026-08-17. */
body[data-page="checkout"] {
  background: #ffffff;
  color: #1A1712;
}

body[data-page="checkout"] main {
  min-height: 70vh;
}

.checkout-site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid #CBBFA6;
  background: #ffffff;
}

.checkout-site-header-inner {
  width: min(1160px, calc(100% - 48px));
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
}

.checkout-logo {
  grid-column: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #1A1712;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
}

.checkout-logo span {
  color: #1C6B45;
  font-weight: 500;
}

.checkout-header-back,
.checkout-header-help {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #4A4742;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.checkout-header-back {
  justify-self: start;
}

.checkout-header-help {
  justify-self: end;
}

.checkout-header-back svg,
.checkout-header-help svg {
  width: 18px;
  height: 18px;
}

.checkout-site-header > p {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border-top: 1px solid #F1EFEE;
  background: #F9F9F7;
  color: #58554F;
  font-size: 11px;
  font-weight: 650;
}

.checkout-site-header > p svg {
  width: 13px;
  height: 13px;
  color: #1C6B45;
}

.checkout-page {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 28px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(360px, 1fr);
  /* 68px is the gutter between the form and the summary. It must NOT also apply on the
     row axis: the trust bar spans both tracks, so a row gap stacks on top of the bar's
     own margin and the form's padding and pushes the first field 136px down the page. */
  column-gap: 68px;
  row-gap: 0;
  align-items: start;
}

.checkout-form {
  min-width: 0;
  padding: 20px 0 24px;
}

.checkout-alert {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-left: 4px solid #A3271F;
  background: #fff4f2;
  color: #702018;
}

.checkout-alert[hidden] {
  display: none;
}

.checkout-alert .button {
  width: max-content;
  margin-top: 4px;
}

.checkout-elements {
  display: block;
}

.checkout-express,
.checkout-section {
  margin: 0;
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid #E5E3E1;
}

.checkout-section + .checkout-section,
/* :not([hidden]) matters: the express block ships hidden and is only revealed when a
   wallet is available, but an adjacent-sibling selector still matches a display:none
   sibling, so step 1 was carrying a top pad that separated it from nothing. */
.checkout-express:not([hidden]) + .checkout-section {
  padding-top: 22px;
}

.checkout-express[hidden] {
  display: none;
}

.checkout-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.checkout-section-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-section-heading h2 {
  margin: 0;
  color: #1A1712;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 780;
  letter-spacing: 0;
}

.checkout-section-heading > span {
  color: #5F5849;
  font-size: 12px;
}

.checkout-step-number {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #A79E8D;
  border-radius: 50%;
  color: #1C6B45;
  font-size: 12px;
  font-weight: 800;
}

.checkout-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 22px 0 0;
  color: var(--ob-muted);
  font-size: 11px;
  text-transform: lowercase;
}

.checkout-divider::before,
.checkout-divider::after {
  content: "";
  height: 1px;
  background: #CBBFA6;
}

.checkout-control {
  position: relative;
  min-width: 0;
  display: block;
  border: 1px solid #86827C;
  border-radius: 0;
  background: #ffffff;
}

.checkout-control > span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 12px;
  color: #615E59;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.checkout-control > span em {
  font-style: normal;
  font-weight: 400;
}

.checkout-control input {
  width: 100%;
  min-height: 54px;
  padding: 20px 12px 6px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #1A1712;
  font: inherit;
  font-size: 16px;
  letter-spacing: 0;
}

.checkout-control:focus-within {
  border-color: #1C6B45;
  box-shadow: 0 0 0 1px #1C6B45;
}

.checkout-control:has([aria-invalid="true"]) {
  border-color: #A3271F;
  box-shadow: 0 0 0 1px #A3271F;
}

.checkout-control small {
  display: block;
  padding: 0 12px 8px;
  color: #A3271F;
  font-size: 12px;
}

.checkout-control small:empty {
  display: none;
}

.checkout-field-help {
  margin: 9px 0 0;
  color: #5F5849;
  font-size: 12px;
  line-height: 1.55;
}

.checkout-phone {
  margin-top: 16px;
}

.checkout-address-shell {
  position: relative;
  min-height: 180px;
}

.checkout-address-shell:has([data-address-loading][hidden]) {
  min-height: 0;
}

.checkout-payment-loading {
  min-height: 176px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px solid #DAD8D5;
  border-radius: 0;
  background: #FAF9F8;
  color: #5F5849;
  font-size: 12px;
  text-align: center;
}

.checkout-address-shell > .checkout-payment-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.checkout-payment-loading[hidden] {
  display: none;
}

.checkout-payment-loading svg {
  width: 22px;
  height: 22px;
  color: #1C6B45;
  animation: checkout-spin 850ms linear infinite;
}

/* The sticky bar keeps its price+CTA on one row, with a compact badge strip beneath. */
/* Carries the layout the bar itself used to own, so the price keeps its fixed column on
   mobile and the pair stays centred on desktop. */
.mobile-purchase-row {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}

@media (min-width: 621px) {
  .mobile-purchase-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: auto;
  }
}

.payment-badges-compact {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: auto;
  margin: 0;
}

.payment-badges-compact .pay-badge svg {
  width: 30px;
  height: 19px;
}

.checkout-offer[hidden] {
  display: none;
}

/* The rule sentence is a second line, not a third column: without the basis the <small>
   becomes a flex sibling and crushes the country value against the address field. */
.checkout-order-justify {
  margin: 8px 0 0;
  color: #5B5953;
  font-size: 12px;
  line-height: 1.5;
}

.checkout-payment-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 12px;
  color: #54524C;
  font-size: 13px;
  line-height: 1.5;
}

.checkout-payment-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #1C6B45;
}

.checkout-pay-status {
  margin: 8px 0 0;
  color: #5F5849;
  font-size: 13px;
  line-height: 1.5;
}

.checkout-pay-status:empty {
  display: none;
}

.checkout-next-steps {
  margin: 10px 0 0;
  color: #54524C;
  font-size: 13px;
  line-height: 1.55;
}

.checkout-support-line {
  margin: 12px 0 0;
  color: #54524C;
  font-size: 13px;
  line-height: 1.55;
}

.checkout-support-line a,
.checkout-seller a {
  color: #1C6B45;
  font-weight: 700;
}

/* D-12: the chevron must stay a SIBLING of [data-order-summary-toggle-label] --
   setExpanded rewrites that span's textContent on every toggle. */
.checkout-order-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.checkout-order-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.checkout-delivery-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid #A6967C;
  border-radius: 0;
  background: #DDEFE3;
}

.checkout-delivery-card > svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #1C6B45;
}

.checkout-delivery-card > div {
  display: grid;
  gap: 3px;
}

.checkout-delivery-card strong {
  font-size: 14px;
}

.checkout-delivery-card span {
  color: #3D3A35;
  font-size: 13px;
}

.checkout-delivery-card small {
  color: #5F5849;
  font-size: 11px;
}

.checkout-delivery-card b {
  color: #1C6B45;
  font-size: 13px;
}

.checkout-parcels {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.checkout-parcels[hidden] {
  display: none;
}

.checkout-parcels article {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border-left: 3px solid #BBB09F;
  background: #F9F9F7;
  font-size: 12px;
}

.checkout-parcels span,
.checkout-parcels small {
  color: #5F5849;
}

.checkout-payment-section {
  border-bottom: 0;
  padding-bottom: 0;
}

.checkout-payment-heading {
  align-items: flex-start;
}

.checkout-payment-heading h2 {
  margin-bottom: 2px;
}

.checkout-payment-heading p {
  margin: 0;
  color: #5F5849;
  font-size: 11px;
}

.checkout-payment-shell {
  min-height: 176px;
}

.checkout-payment-shell.is-ready {
  min-height: 0;
}

.checkout-final-review {
  margin-top: 24px;
  padding: 20px;
  border-top: 3px solid #1C6B45;
  background: #F7F6F5;
}

.checkout-final-review h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.checkout-review-totals,
.checkout-totals,
.order-success-totals {
  margin: 0;
}

.checkout-review-totals > div,
.checkout-totals > div,
.order-success-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0;
  color: #54524C;
  font-size: 13px;
}

.checkout-review-totals dt,
.checkout-review-totals dd,
.checkout-totals dt,
.checkout-totals dd,
.order-success-totals dt,
.order-success-totals dd {
  margin: 0;
}

.checkout-review-totals .is-discount,
.checkout-totals .is-discount,
.order-success-totals .is-discount {
  color: #1C6B45;
}

.checkout-review-totals .is-total,
.checkout-totals .is-total,
.order-success-totals .is-total {
  margin-top: 7px;
  padding-top: 13px;
  border-top: 1px solid #D5D3D0;
  color: #1A1712;
  font-size: 17px;
  font-weight: 800;
}

.checkout-review-totals .is-total dd,
.checkout-totals .is-total dd {
  font-size: 21px;
}

.checkout-final-review > p {
  display: grid;
  gap: 3px;
  margin: 14px 0 0;
  color: #1C6B45;
  font-size: 12px;
}

.checkout-final-review > p span {
  color: #5F5849;
}

.checkout-confirm-error {
  min-height: 0;
  margin-top: 14px;
  color: #a1261c;
  font-size: 13px;
  line-height: 1.5;
}

.checkout-confirm-error:empty {
  display: none;
}

.checkout-pay-button {
  width: 100%;
  min-height: 58px;
  margin-top: 18px;
  border-radius: 0;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-size: 16px;
  font-weight: 800;
}

.checkout-pay-button:hover:not(:disabled) {
  background: var(--ob-ink-hover);
}

.checkout-pay-button:disabled {
  background: #84807A;
  cursor: wait;
}

.checkout-legal-confirmation {
  margin: 11px 0 0;
  color: #5F5849;
  font-size: 11px;
  line-height: 1.5;
}

.checkout-legal-confirmation a {
  color: inherit;
}

.checkout-trust-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #E5E3E1;
}

.checkout-trust-list span,
.checkout-trust-list a {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #504D48;
  font-size: 10px;
  line-height: 1.4;
}

.checkout-trust-list svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #1C6B45;
}

.checkout-descriptor {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #BBB3A7;
  background: #F9F9F7;
  color: #5B5953;
  font-size: 11px;
}

.checkout-inline-support {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1C6B45;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.checkout-inline-support svg {
  width: 15px;
  height: 15px;
}

.checkout-order {
  position: sticky;
  top: 20px;
  min-height: 0;
  margin-top: 30px;
  padding: 24px;
  border: 1px solid #CBBFA6;
  border-radius: 0;
  background: #F7F5F4;
  box-shadow: none;
}

.checkout-order-toggle {
  width: 100%;
  min-height: 48px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1C6B45;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.checkout-order-toggle strong {
  color: #1A1712;
  font-size: 16px;
}

.checkout-order-content {
  padding: 0;
}

.checkout-order-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.checkout-order-heading p {
  margin: 0 0 2px;
  color: var(--ob-muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.checkout-order-heading h2 {
  margin: 0;
  font-size: 19px;
}

.checkout-order-heading a {
  color: #1C6B45;
  font-size: 11px;
  font-weight: 700;
}

.checkout-order-items {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #DBD8D5;
}

.checkout-order-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.checkout-order-image {
  position: relative;
}

.checkout-order-image img {
  width: 64px;
  height: 64px;
  display: block;
  border: 1px solid #DBD8D5;
  border-radius: 0;
  background: #ffffff;
  object-fit: contain;
}

.checkout-order-image > span {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 0;
  background: #696660;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}

.checkout-order-item > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.checkout-order-item strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.checkout-order-item small {
  display: grid;
  gap: 1px;
  color: #5F5849;
  font-size: 10px;
  line-height: 1.35;
}

.checkout-order-item em {
  color: #57554F;
  font-size: 10px;
  font-style: normal;
}

.checkout-order-item b {
  font-size: 12px;
  white-space: nowrap;
}

.checkout-totals {
  margin-top: 10px;
}

/* Ships with no whitespace between its tags, so :empty matches until renderTotals
   writes. Without this it reserves a row of height and shifts the card on paint. */
.checkout-totals:empty {
  display: none;
}

.checkout-promotion {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.checkout-promotion[hidden] {
  display: none;
}

.checkout-promotion label {
  color: #57554F;
  font-size: 11px;
  font-weight: 650;
}

.checkout-promotion > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

.checkout-promotion input,
.checkout-promotion > div button {
  min-height: 42px;
  border: 1px solid #C0BEB9;
  border-radius: 0;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.checkout-promotion input {
  min-width: 0;
  padding: 0 11px;
  text-transform: uppercase;
}

.checkout-promotion > div button {
  padding: 0 13px;
  color: #1C6B45;
  font-weight: 750;
  cursor: pointer;
}

.checkout-promotion p {
  margin: 0;
  color: #5F5849;
  font-size: 10px;
}

.checkout-promotion p button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #1C6B45;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.checkout-summary-delivery {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 0;
  border-top: 1px solid #DBD8D5;
  border-bottom: 1px solid #DBD8D5;
}

.checkout-summary-delivery > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #1C6B45;
}

.checkout-summary-delivery p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.checkout-summary-delivery strong {
  font-size: 11px;
}

.checkout-summary-delivery span {
  color: #5F5849;
  font-size: 10px;
}

.checkout-order-trust {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.checkout-order-trust span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #585650;
  font-size: 10px;
}

.checkout-order-trust svg {
  width: 14px;
  height: 14px;
  color: #1C6B45;
}

.checkout-seller {
  display: grid;
  gap: 4px;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid #DBD8D5;
  color: #54524C;
  font-size: 12px;
  line-height: 1.5;
}

.checkout-seller strong {
  color: #3A352B;
  font-size: 13px;
}

.checkout-seller strong {
  color: #3A352B;
  font-size: 10px;
}

.checkout-support-dialog {
  width: min(430px, calc(100% - 32px));
  padding: 0;
  border: 1.5px solid var(--ob-ink);
  background: var(--ob-card);
  color: var(--ob-ink);
}

.checkout-support-dialog::backdrop {
  background: rgb(19 31 24 / 55%);
}

.checkout-support-dialog > div {
  position: relative;
  padding: 30px;
}

.checkout-support-dialog [data-support-close] {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #47443F;
  cursor: pointer;
}

.checkout-support-dialog [data-support-close] svg {
  width: 20px;
  height: 20px;
}

.checkout-support-dialog h2 {
  margin: 4px 0 8px;
  font-size: 24px;
}

.checkout-support-dialog > div > p:not(.eyebrow) {
  margin: 0 0 20px;
  color: #5F5849;
  font-size: 13px;
  line-height: 1.55;
}

.checkout-support-dialog > div > a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid #E5E3E1;
  color: #1A1712;
  text-decoration: none;
}

.checkout-support-dialog > div > a svg {
  width: 19px;
  height: 19px;
  color: #1C6B45;
}

.checkout-support-dialog > div > a span {
  display: grid;
  gap: 3px;
}

.checkout-support-dialog > div > a small {
  color: #5F5849;
  font-size: 11px;
}

.checkout-site-footer {
  padding: 23px max(24px, calc((100% - 1160px) / 2));
  border-top: 1px solid #CBBFA6;
  background: #ffffff;
}

.checkout-site-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
}

.checkout-site-footer a,
.checkout-site-footer span,
.checkout-site-footer p {
  color: #5F5849;
  font-size: 10px;
}

.checkout-site-footer p {
  margin: 10px 0 0;
}

.order-success-page .order-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-success-page .order-success-totals {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #CBBFA6;
}

.order-success-page .order-descriptor {
  margin: 18px 0 0;
  color: #5F5849;
  font-size: 11px;
}

@media (max-width: 940px) {
  .checkout-page {
    width: 100%;
      padding-bottom: 24px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout-order {
    position: static;
    order: -1;
    margin: 0;
    padding: 24px max(24px, calc((100% - 680px) / 2));
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .checkout-order-toggle:not([hidden]) {
    display: flex;
  }

  .checkout-order-toggle + .checkout-order-content {
    padding-top: 18px;
    border-top: 1px solid #DBD8D5;
  }

  .checkout-form {
    width: min(680px, calc(100% - 48px));
    margin: 0 auto;
      padding: 18px 0 24px;
  }

  .checkout-seller {
    display: grid;
  }
}

@media (max-width: 620px) {
  .checkout-site-header-inner {
    width: calc(100% - 28px);
      min-height: 56px;
    gap: 8px;
  }

  .checkout-logo {
    font-size: 19px;
  }

  .checkout-header-back span,
  .checkout-header-help span {
    display: none;
  }

  .checkout-header-back,
  .checkout-header-help {
      width: 44px;
    justify-content: center;
  }

  .checkout-site-header > p {
      min-height: 22px;
  }

  .checkout-order {
    padding: 20px 16px;
  }

  .checkout-order-heading {
    align-items: center;
  }

  .checkout-order-heading h2 {
    font-size: 17px;
  }

  .checkout-order-item {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .checkout-order-image img {
    width: 58px;
    height: 58px;
  }

  .checkout-order-item strong,
  .checkout-order-item b {
    font-size: 11px;
  }

  .checkout-order-item small {
    /* Must stay grid: the three detail spans are separate lines. display:block makes them
       inline and they render as "Modele YY5785FEProduit neufFiltre inclus". */
    display: grid;
    gap: 1px;
  }

  .checkout-totals > div {
    font-size: 12px;
  }

  .checkout-summary-delivery {
    margin-top: 12px;
    padding: 12px 0;
  }

  .checkout-order-trust {
    display: grid;
  }

  .checkout-form {
    width: calc(100% - 32px);
      padding: 14px 0 20px;
  }

  .checkout-express,
  .checkout-section {
      padding-bottom: 20px;
  }

  .checkout-section + .checkout-section,
    .checkout-express:not([hidden]) + .checkout-section {
    padding-top: 19px;
  }

  .checkout-section-heading {
    align-items: flex-start;
    margin-bottom: 14px;
  }

  .checkout-section-heading h2 {
    font-size: 18px;
  }

  .checkout-section-heading > span {
    padding-top: 5px;
  }

  .checkout-delivery-card {
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 14px;
  }

  .checkout-delivery-card > b {
    grid-column: 2;
  }

  .checkout-final-review {
    padding: 17px;
  }

  .checkout-trust-list {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .checkout-pay-button {
    min-height: 56px;
  }

  .checkout-support-dialog > div {
    padding: 26px 22px;
  }

  .checkout-site-footer {
    padding: 20px 16px;
  }

  .checkout-site-footer > div {
    gap: 8px 14px;
  }

  .order-success-page .order-facts {
    grid-template-columns: 1fr;
  }
}


/* Checkout offer strip. Painted from the static catalogue before Stripe replies, so the
   first mobile viewport always shows the product, the price and the reassurance. */
.checkout-offer {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: 0;
}

.checkout-offer-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-offer-reassurance li {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.checkout-offer-reassurance svg { width: 14px; height: 14px; }

.checkout-price-final {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* These carry the seller identity and the security promise. They must never be
   smaller than readable on the device where trust is lowest. */
.checkout-legal-confirmation { font-size: 13px; }
.checkout-trust-list span,
.checkout-trust-list a { font-size: 12px; }


/* The offer strip must be the first thing on mobile, above the summary aside
   which carries order:-1. Without this the price sits below a grey toggle again. */
@media (max-width: 940px) {
  .checkout-offer { order: -2; }
}


/* The offer strip is a direct child of the two-column .checkout-layout grid, so it must
   span both tracks. Without this it takes a grid cell and pushes the summary aside onto
   its own row, leaving a large empty column on desktop. */
.checkout-offer { grid-column: 1 / -1; }


/* Rowenta social proof. Amazon ratings for this exact reference, explicitly labelled as
   Amazon's and not ours, sitting high on the page where the price doubt appears. */
.xc10-proof { padding: clamp(40px, 6vw, 72px) 0; background: var(--paper); border-block: 1px solid var(--line); }
.xc10-proof-inner { width: min(1160px, 100% - clamp(24px, 5vw, 64px)); margin-inline: auto; }
.xc10-proof h2 { margin: 6px 0 26px; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; }
.xc10-proof-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.xc10-proof-score { text-align: center; }
.xc10-proof-score strong { display: block; font-size: 56px; line-height: 1; }
.xc10-proof-score > span { font-size: 13px; color: var(--muted); }
.xc10-proof-stars { margin: 8px 0 10px; font-size: 20px; letter-spacing: 2px; color: #1A1712; }
.xc10-proof-stars span { color: var(--ob-mark-empty); }
.xc10-proof-score p { margin: 0; font-size: 13px; color: var(--muted); }
.xc10-proof-bars { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.xc10-proof-bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 46px; gap: 12px; align-items: center; font-size: 13px; }
.xc10-proof-bars i { height: 10px; background: #E4DAC6; border-radius: 0; overflow: hidden; }
/* The CSP blocks inline style attributes, so these percentages cannot be set on the
   element. A missing value must render an empty track, never a full one: a silently
   full bar misreports the rating distribution. */
.xc10-proof-bars i::before { content: ""; display: block; width: var(--pct, 0%); height: 100%; background: #1A1712; border-radius: 0; }
.xc10-proof-bars i.pct-61 { --pct: 61%; }
.xc10-proof-bars i.pct-12 { --pct: 12%; }
.xc10-proof-bars i.pct-11 { --pct: 11%; }
.xc10-proof-bars i.pct-9 { --pct: 9%; }
.xc10-proof-bars i.pct-7 { --pct: 7%; }
.xc10-proof-bars b { text-align: right; color: var(--muted); font-weight: 600; }
.xc10-proof-headline { display: flex; gap: 9px; align-items: center; margin: 26px 0 10px; font-size: clamp(15px, 2vw, 18px); }
.xc10-proof-headline svg { width: 20px; height: 20px; color: #1C6B45; flex: none; }
.xc10-proof-source { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.xc10-proof-source a { text-decoration: underline; }

@media (max-width: 620px) {
  .xc10-proof-grid { grid-template-columns: 1fr; gap: 22px; }
  .xc10-proof-bars li { grid-template-columns: 62px minmax(0, 1fr) 40px; font-size: 12px; }
}


/* Sticky purchase bar above 620px. It previously existed only on phones, so every device
   from a small tablet up to desktop had exactly two buy buttons across a 7,600px page,
   with a 5,400px stretch between them. */
@media (min-width: 621px) {
  body[data-page="product"] { padding-bottom: calc(var(--sticky-bar-h, 120px) + 8px); }

  .mobile-purchase-bar {
    position: fixed;
    z-index: 900;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 10px 24px;
    background: var(--paper);
    border-top: 1px solid var(--line-dark);
    transition: transform 180ms ease;
  }

  /* Hide it while the buyer is already looking at the real purchase block, so the page
     never shows two competing calls to action at the same moment. */
  body.inline-buy-visible .mobile-purchase-bar {
    transform: translateY(110%);
    pointer-events: none;
  }

  /* Was ".mobile-purchase-bar > div", written when the bar had one flat child. It now has a
     price+CTA row and a badge strip, and the loose selector forced BOTH into a grid, which
     stacked the six badges vertically and made the bar 242px tall. */
  .mobile-purchase-bar .mobile-purchase-row > div { display: grid; }
  .mobile-purchase-bar b { font-size: 17px; }
  .mobile-purchase-bar small { color: var(--muted); font-size: 12px; }
  .mobile-purchase-bar .button { min-width: 260px; }
}


/* Review cards. Verified Amazon buyers of this exact reference, names/ratings/dates as
   published, excerpts trimmed but never reworded. One measured 3-star is kept on purpose:
   an all-positive wall on an unknown store reads as fabricated. */
.xc10-rev-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin: 28px 0 16px;
  padding: 0;
  list-style: none;
}
.xc10-rev-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}
.xc10-rev-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.xc10-rev-stars { font-size: 14px; letter-spacing: 1px; color: #1A1712; }
.xc10-rev-stars i { color: var(--ob-mark-empty); font-style: normal; }
.xc10-rev-head b { font-size: 13px; }
.xc10-rev-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.xc10-rev-card small { font-size: 11px; color: var(--muted); }
.xc10-proof-more { margin: 0 0 14px; font-size: 13px; }
.xc10-proof-more a { font-weight: 600; text-decoration: underline; }

@media (max-width: 620px) {
  .xc10-rev-list { grid-template-columns: 1fr; gap: 12px; }
}


/* Hero price block. No strikethrough and no savings pill anywhere: a struck-through
   "manufacturer suggested price" is an assertion the buyer cannot check, and it is the
   exact visual shoppers have been trained to read as a dropshipping scam. A dated
   sentence naming a source is checkable, and it carries a larger number. */
.launch-rating-line { margin: 0 0 10px; font-size: 13px; }
.launch-rating-line a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.launch-rating-line a:hover { color: inherit; }

.launch-compare {
  margin: 10px 0 2px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

/* The comparison price is the evidence for the saving beneath it, so it is set at the
   same size and differentiated by colour: premise in ink, conclusion in green. */
.launch-compare b {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.launch-stock-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--ob-control);
  border-radius: 0;
  background: #DDEFE3;
  color: #1C6B45;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

/* inline-flex also removes the inline SVG's baseline descender from the flex item box,
   which is what stops the chip floating above the price it is aligned to. */
.launch-stock-badge svg {
  width: 15px;
  height: 15px;
}

.launch-compare-delta {
  margin: 4px 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--green);
}


/* Mobile hero fold budget. The row swap below already puts the price above the gallery,
   which is what actually clears the fold. An earlier attempt also cropped the image to
   4/3.4 with object-fit: cover. That saved nothing, because the wrapper keeps
   aspect-ratio: 1 and stayed 343px tall, so it only bought 54px of dead grey band plus a
   severed cleaning head. The gallery sources are not uniformly square either
   (02 is 600x450, 04 is 584x1500), so cover discarded up to 67% of a frame. The base
   contain-fit is the only treatment that never cuts the product. */
@media (max-width: 620px) {
  /* Square, matching the desktop frame. The 5/4 box bought back 69px of fold, but with
     object-fit: contain it letterboxed every square master down both sides, and nearly all
     of them are square. White-on-white hid the seam, not the wasted width. The 69px is
     recovered elsewhere on this breakpoint rather than by cropping the frame. */
  .product-layout-launch .product-main-image {
    aspect-ratio: 1;
  }

  /* height: 100% does not resolve on a place-items: center grid item, so the image kept
     its square height and overflowed the shorter frame, and overflow: hidden clipped the
     cleaning head exactly as the original 4/3.4 crop did. Absolute inset pins the image
     to the frame box, and object-fit: contain then letterboxes inside it, so the product
     is guaranteed whole at any frame ratio. */
  .product-layout-launch .product-main-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .product-layout-launch .product-intro h1 { font-size: 27px; line-height: 1.16; }
  .product-layout-launch .product-lead { margin-bottom: 12px; }
}


/* Mobile hero order: headline, then price, then the gallery. On mobile .launch-desktop-buy
   is display:none, so .product-offer is purely the price block, so putting it above the image
   guarantees the price, the Amazon.fr comparison and the saving all clear the fold, which no
   amount of image cropping could achieve on its own. The CTA is always reachable from the
   sticky purchase bar. */
@media (max-width: 620px) {
  /* The layout places children by named area, so `order` is ignored: the rows must be
     swapped. Two classes are required: the 900px rule uses .product-layout.product-layout-launch
     and would otherwise win on specificity. */
  .product-layout.product-layout-launch {
    grid-template-areas: "intro" "gallery" "facts" "offer" "buy";
  }
}


/* The caption is fine print and must sit below the saving in the visual hierarchy,
   not above it. It was rendering bold and accent-coloured. */
.launch-price-caption {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}


/* Post-purchase reassurance on the thank-you page. The descriptor line is here to stop a
   customer who does not recognize the statement descriptor from opening a chargeback. */
.order-reassurance {
  display: grid;
  gap: 8px;
  margin: 26px auto 0;
  max-width: 640px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}
.order-reassurance span {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.order-reassurance svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }


/* ---- Primary CTA ----------------------------------------------------------
   Ink. Not red, not green. Red (#c83f33 originally) is the discount-site
   convention, which is exactly the wrong signal on a page whose entire job is
   convincing a stranger that the price gap is legitimate. Green is no longer
   available either: in this palette green means "verified / never used" and is
   spent only on facts about the item, never on a control.
   The CTA is deliberately the quiet element. On a condition record the PRICE is
   the loud one, because a price there reads as a measured result rather than an
   offer. #FFFFFF on #1A1712 is 17.87:1.
   Also: at 14px with a 132px quantity stepper beside it, the label wrapped to two lines
   and the button rendered 69px tall. */
.button-accent {
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  min-height: 54px;
  font-weight: 800;
}

.button-accent:hover {
  background: var(--ob-ink-hover);
}

.button-accent:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.buy-now-large,
.add-to-cart-large {
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* The stepper is a secondary control and does not need a third of the screen. */
.purchase-controls {
  grid-template-columns: 104px minmax(0, 1fr);
}

.quantity-stepper {
  height: 56px;
  grid-template-columns: 36px 1fr 36px;
}

@media (max-width: 620px) {
  .purchase-controls { grid-template-columns: 104px minmax(0, 1fr); }
}

/* Sticky bar CTA matches the inline one. */
.mobile-purchase-bar .button {
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.launch-cta-trust span { font-size: 12px; }


/* ---- Mobile CTA geometry and the cookie-banner collision -------------------
   Measured live at 390/360/320. Three real defects, all geometry:
   1. The cookie notice (z-index 1300, bottom:10px) sat directly on top of the sticky
      purchase bar (z-index 900). elementFromPoint at the button centre returned
      .cookie-actions, so the buy button was literally untappable for every first-time
      visitor, i.e. 100% of cold traffic. Previously body.cookie-open pushed the bar
      away; that class is no longer added now that measurement runs on landing, so the
      two elements must simply not occupy the same space.
   2. .quantity-stepper keeps width:120px at <=360px while the grid track is 104px, so
      the stepper painted 6px underneath the button. A thumb aiming at the button's left
      edge hit "+" and silently doubled the order.
   3. At 320px white-space:nowrap pushed the label past the green fill: scrollWidth 176
      vs clientWidth 172 inline, 158 vs 148 on the sticky bar. The price was clipped off
      the button at the moment of commitment. */

/* The sticky purchase bar now exists at EVERY width, so the notice must clear it
   everywhere, not just on phones. Verified: at 1440px the banner also covered the
   desktop buy button and elementFromPoint returned .cookie-banner. */
.cookie-banner {
  bottom: calc(94px + env(safe-area-inset-bottom));
}

@media (max-width: 620px) {
  .cookie-banner {
    right: 10px;
    left: 10px;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border-radius: 0;
  }

  /* The heading repeats what the sentence already says and cost 27px of a screen the
     product photo needs. */
  .cookie-banner h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .cookie-banner p {
    margin-bottom: 2px;
    font-size: 11.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .cookie-banner a {
    font-size: 11.5px;
  }

  .cookie-banner .button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  .cookie-banner {
    bottom: calc(var(--sticky-bar-h, 120px) + 12px + env(safe-area-inset-bottom));
  }

  /* Quantity stays visible: a shop with no quantity control reads as improvised. Every
     price on the page is bound to it, so the displayed figure always matches the charge. */

  /* The price span stays visible. Hiding it collapsed the row to one in-flow child, which
     the "136px 1fr" grid then placed in the 136px column, clipping the CTA label. */
  .mobile-purchase-bar .mobile-purchase-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .mobile-purchase-bar .button {
    width: 100%;
    min-height: 54px;
    font-size: 16px;
  }
}

/* A commit button and a number input must not parse as one input group. They are now
   told apart by fill and weight rather than by radius and shadow, since this store has
   neither. */
.buy-now-large,
.add-to-cart-large {
  font-weight: 800;
}

/* There was no :active rule anywhere in the file, so a tap gave no confirmation on a
   touch device and people tap twice. Confirmation is a colour step, not a scale:
   #FFFFFF on #0F0D0A is 19.40:1. */
.button-accent:active {
  background: var(--ob-ink-active);
  transition-duration: 60ms;
}

/* The focus ring was blue on a blue shadow: 1.19:1 against the green fill. */
.button-accent:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--focus);
}


/* ---- "Why is it this price?" ----------------------------------------------
   First section on scroll. A visitor arriving from a Facebook ad already has three
   explanations ready for the price gap before ours: counterfeit, dropshipping, scam.
   The page previously stated the gap and moved on, so they answered the question
   themselves. This answers it in their own words, negatively, by naming what the low
   price does NOT mean, because denying the specific suspicion beats asserting quality. */
.xc10-why {
  padding: clamp(40px, 6vw, 76px) 0;
  background: var(--canvas);
  border-block: 1px solid var(--line);
}
.xc10-why-inner {
  width: min(880px, 100% - clamp(24px, 5vw, 64px));
  margin-inline: auto;
}
.xc10-why h2 {
  margin: 6px 0 18px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.12;
}
.xc10-why-lead {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}
.xc10-why-sub {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.xc10-why-list {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.xc10-why-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
}
.xc10-why-list svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--green);
}
.xc10-why-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}
.xc10-why-list span {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.xc10-why-list a { text-decoration: underline; }
.xc10-why-close {
  margin: 0;
  padding: 16px 18px;
  background: #DDEFE3;
  border-left: 3px solid var(--green);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Accepted payment methods --------------------------------------------- */
.payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 10px;
}
.pay-badge { display: inline-flex; line-height: 0; }
/* A global `svg, .lucide { width:20px; height:20px }` rule squashes every SVG on the
   page. These are 42x26 plates, not 20x20 icons, so the size must be forced back. */
.pay-badge svg {
  display: block;
  width: 42px;
  height: 26px;
  border-radius: 0;
}

.footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-payments .payment-badges { margin: 0; }
.footer-payments p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.payment-badges-cta {
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
}

@media (max-width: 620px) {
  .xc10-why-list li { padding: 14px; gap: 11px; }
  .payment-badges { gap: 5px; }
}


/* The Amazon capture. Framed and captioned so it reads as an embedded document rather
   than as our own interface, and hosted on our domain so the buyer never leaves for a
   competitor selling the identical product. */
.xc10-why-proof {
  margin: 4px 0 22px;
}
.xc10-why-proof img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 780px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: #fff;
}
.xc10-why-proof figcaption {
  margin-top: 9px;
  max-width: 780px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.xc10-why-proof figcaption b { color: var(--ink-2); font-weight: 600; }

/* Variant picker ---------------------------------------------------------- */
.variant-picker { display: grid; gap: 14px; margin: 0 0 18px; }
.variant-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.variant-group legend { padding: 0 0 7px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }

.variant-option { position: relative; display: inline-flex; }
.variant-option[hidden] { display: none; }
.variant-option input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.variant-option span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 0; background: var(--paper);
  color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.2;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.variant-option input:checked + span {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
}
.variant-option input:focus-visible + span {
  outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus);
}
@media (hover: hover) and (pointer: fine) {
  .variant-option input:not(:disabled) + span:hover { border-color: var(--green); }
}
/* A combination that does not exist is shown but struck through, so the customer can see
   the option exists in the range without being able to buy something unfulfillable. */
.variant-option.is-unavailable span {
  color: var(--muted); background: var(--soft);
  text-decoration: line-through; text-decoration-thickness: 1px; cursor: pointer;
}
.variant-option.is-unavailable input:checked + span {
  color: var(--ink); background: transparent; text-decoration: none;
}
.variant-option input:disabled { cursor: not-allowed; }

.variant-unavailable {
  margin: 0; padding: 10px 12px; border-radius: 0;
  background: #fbe9e7; color: var(--red-dark); font-size: 13px; font-weight: 650;
}

[data-variant-target][disabled] { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 620px) {
  .variant-options { gap: 7px; }
  .variant-option span { padding: 0 12px; font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Dyson Airwrap i.d. launch page. Warmer and airier than the Rowenta page on
   purpose: this one sells a result and a feeling, not a price argument.
   --------------------------------------------------------------------------- */
.awid-promise-inner,
.awid-heat-inner,
.awid-final-inner,
.awid-proof-inner {
  max-width: 760px;
  margin: 0 auto;
}

.awid-promise-inner h2,
.awid-heat-inner h2,
.awid-final-inner h2,
.awid-looks-head h2,
.awid-box-head h2,
.awid-app-copy h2,
.awid-proof-inner h2 {
  margin: 6px 0 14px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.awid-lead {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.65;
  color: #45423D;
}

.awid-looks-head,
.awid-box-head {
  max-width: 640px;
  margin: 0 auto 26px;
  text-align: center;
}

.awid-looks-grid,
.awid-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.awid-look,
.awid-att {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}

.awid-look img,
.awid-att img,
.awid-app-media img {
  display: block;
  width: 100%;
  height: auto;
}

.awid-look figcaption,
.awid-att > div {
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
}

.awid-look figcaption strong,
.awid-att strong {
  font-size: 15px;
  font-weight: 760;
}

.awid-look figcaption span,
.awid-att span {
  color: #5B5953;
  font-size: 13px;
  line-height: 1.5;
}

.awid-inline-cta {
  margin-top: 26px;
  text-align: center;
}

.awid-heat-note {
  margin-top: 14px;
  color: #5F5849;
  font-size: 13px;
  line-height: 1.55;
}

.awid-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.awid-app-media img {
  border-radius: 0;
}

.awid-box-note {
  margin: 22px auto 0;
  max-width: 620px;
  color: #5F5849;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

/* social proof */
.awid-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 22px 0 10px;
}

.awid-proof-score {
  text-align: center;
}

.awid-proof-score strong {
  display: block;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.awid-proof-score span {
  color: #5F5849;
  font-size: 13px;
}

.awid-proof-stars {
  margin: 8px 0 6px;
  color: var(--ob-ink);
  font-size: 17px;
  letter-spacing: 2px;
}

.awid-proof-score p {
  margin: 0;
  color: #5F5849;
  font-size: 12px;
}

.awid-proof-bars {
  display: grid;
  gap: 7px;
}

.awid-proof-bars > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  color: #5B5953;
  font-size: 12px;
}

.awid-proof-bars i {
  display: block;
  height: 7px;
  background: #EAE8E6;
  border-radius: 0;
}

.awid-proof-bars b {
  display: block;
  height: 100%;
  background: #1C6B45;
  border-radius: 0;
}

.awid-proof-headline {
  margin: 6px 0 24px;
  font-size: 15px;
  font-weight: 700;
}

.awid-rev-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.awid-rev {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}

.awid-rev-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.awid-rev-stars {
  color: var(--ob-ink);
  font-size: 13px;
  letter-spacing: 1px;
}

.awid-rev-head b {
  font-size: 13px;
}

.awid-rev strong {
  font-size: 14px;
}

.awid-rev p {
  margin: 0;
  color: #4D4A45;
  font-size: 13px;
  line-height: 1.55;
}

.awid-rev small {
  color: var(--ob-muted);
  font-size: 11px;
}

.awid-proof-source {
  margin: 20px 0 0;
  color: #5F5849;
  font-size: 12px;
  line-height: 1.55;
}

.awid-proof-source a {
  color: #1C6B45;
  font-weight: 700;
}

/* final offer */
.awid-final-inner {
  text-align: center;
}

.awid-final-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin: 22px 0 16px;
}

.awid-final-price {
  display: grid;
  gap: 2px;
  text-align: left;
}

.awid-final-price span {
  color: #5F5849;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}

.awid-final-price strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.awid-final-price small {
  color: #5F5849;
  font-size: 12px;
}

.awid-final .payment-badges {
  justify-content: center;
}

@media (max-width: 900px) {
  .awid-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .awid-app-media {
    order: -1;
  }
}

@media (max-width: 620px) {
  .awid-proof-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .awid-final-buy {
    flex-direction: column;
    align-items: stretch;
  }

  .awid-final-price {
    text-align: center;
  }
}

/* The launch layout sells one unit, so its buy row has no quantity stepper column. */
.purchase-controls-single {
  grid-template-columns: minmax(0, 1fr);
}

/* In-gallery arrows. app.js has bound [data-gallery-prev]/[data-gallery-next] for a long
   time but the markup never rendered them, so the only way to change image was the thumb
   strip or a swipe with no affordance. */
.gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  color: #1A1712;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-dark);
  border-radius: 0;
  cursor: pointer;
}

.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

.gallery-nav svg {
  width: 20px;
  height: 20px;
}

.gallery-nav:active {
  background: var(--ob-panel);
  border-color: var(--ob-ink);
}

.gallery-nav:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* The zoom control already sits top-right; keep the next arrow clear of it. */
.product-main-image:has([data-gallery-zoom]) .gallery-next {
  top: calc(50% + 8px);
}

@media (max-width: 620px) {
  .gallery-nav {
    width: 36px;
    height: 36px;
  }
}


/* ===========================================================================
   OPEN BOX HOME — PRODUCT PAGE AND BUY BOX
   ---------------------------------------------------------------------------
   Everything below is additive. No existing class is renamed or repurposed, and
   no data-* hook is touched: the Condition Split, the Findings Table, the Record
   Head, the signature strip and the corner flap are new classes or pseudo
   elements wrapped around markup that app.js and checkout.js still query
   unchanged.

   THE ONE RULE THAT MUST OUTLIVE EVERY FUTURE EDIT
   Amber (--ob-opened, --ob-opened-fill, --ob-opened-edge) means exactly one
   thing: A FACT WE ARE FLAGGING ABOUT THE PACKAGING. It is banned from price,
   stock, shipping, delivery and CTA surfaces sitewide, and it may never carry a
   count, a countdown, a percentage or the word "deal". The first time it is
   borrowed for a low-stock chip, the Condition Split stops reading as a
   disclosure and starts reading as a promo sticker, and the store loses the only
   argument that justifies its prices.

   COLOUR IS NEVER THE ONLY CARRIER. Each half of the Split has its own word, its
   own Lucide glyph and its own fill. The flagged row of the Findings Table is
   identified by its value text ("OPENED"), not by its tint. Remove any of those
   and the component fails WCAG 1.4.1 silently, for the readers least able to
   report it.

   --ob-rule is 1.82:1 on card and 1.49:1 on canvas. It is compliant ONLY because
   WCAG 1.4.11 exempts purely decorative separators. It may never be the edge of a
   control, never the only boundary of a card, and never the sole carrier of
   state. Controls take --ob-control (4.78:1 on card, 3.92:1 on canvas).

   Every foreground/background pair used below was computed with the WCAG
   relative-luminance formula, not eyeballed. Lowest text pair in this file is
   --ob-muted on --ob-panel at 5.08:1; lowest non-text pair is --ob-control on
   --ob-panel at 3.45:1. Both clear their thresholds.
   =========================================================================== */

/* Tokens are declared once, in the token layer at the top of this file. Nothing is
   redeclared here on purpose: two sources of truth for --ob-opened is exactly how the
   amber ban gets broken by accident.
   ---------------------------------------------------------------------------- */


/* ---- 1. Gallery frame -----------------------------------------------------
   The plate, not the photograph. Square, hard edged, 1.5px ink so it detaches
   from the kraft ground at 375px on a dim phone panel: white on canvas is only
   1.22:1, so separation is carried entirely by the border and never by the fill.
   The images are manufacturer stock of sealed retail cartons, which is exactly
   why nothing is ever laid on top of one. */
.product-main-image {
  border: 1.5px solid var(--ob-ink);
  border-radius: 0;
  background: var(--ob-card);
}

/* The folded corner. Pure CSS, no image, no markup, no JS. It is the corner of
   the plate; images are object-fit: contain, so it never overlaps the goods. */
.product-main-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 34px;
  height: 34px;
  background: linear-gradient(
    to bottom left,
    var(--ob-panel) 0 49.2%,
    var(--ob-ink) 49.2% 50.8%,
    transparent 50.8% 100%
  );
  pointer-events: none;
}

/* No lift, no zoom. A photograph that grows on hover is a boutique gesture and
   it also fights the flap. */
.product-main-image img {
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .product-main-image:hover > img {
    transform: none;
  }
}

/* Zoom moves to the bottom-right: the top-right corner now belongs to the flap.
   The [data-gallery-zoom] hook, the hit area and the label are unchanged. */
.gallery-zoom {
  top: auto;
  right: 12px;
  bottom: 12px;
  border: 1px solid var(--ob-ink);
  border-radius: 0;
  background: var(--ob-card);
  color: var(--ob-ink);
  box-shadow: none;
}

/* Reset: the next arrow was nudged off centre to clear a zoom button that is no
   longer up there. Same selector, so it overrides cleanly. */
.product-main-image:has([data-gallery-zoom]) .gallery-next {
  top: 50%;
}

.gallery-nav {
  border: 1px solid var(--ob-ink);
  border-radius: 0;
  background: var(--ob-card);
  color: var(--ob-ink);
  box-shadow: none;
}

/* translateY(-50%) is load-bearing centring, not decoration, so it stays. The
   decorative scale on :active is replaced by an ink inversion, which reads on a
   touch device without moving anything. */
.gallery-nav:active {
  transform: translateY(-50%);
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

.gallery-zoom:active {
  transform: none;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

/* The counter is a recorded fact, so it is set in the fact face and squared off.
   Moved off centre to the bottom-left, clear of the zoom control. */
.gallery-counter {
  left: 12px;
  bottom: 12px;
  transform: none;
  padding: 4px 8px;
  border-radius: 0;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.product-thumb {
  border: 1px solid var(--ob-control);
  border-radius: 0;
  background: var(--ob-card);
}

.product-thumb.is-active {
  border-color: var(--ob-ink);
  box-shadow: inset 0 0 0 2px var(--ob-ink);
}

@media (hover: hover) and (pointer: fine) {
  .product-thumb:hover {
    border-color: var(--ob-ink);
    transform: none;
  }
}


/* ---- 2. The Record sheet --------------------------------------------------
   The buy box is composed as a document, not a panel. The wrapper is added
   AROUND the existing nodes; nothing inside it was re-nested or renamed, because
   an orphaned selector in here takes the checkout down. */
.ob-record {
  padding: 0 14px;
  border: 1.5px solid var(--ob-ink);
  border-radius: 0;
  background: var(--ob-card);
}

/* Full-bleed members of the sheet. */
.ob-record > .ob-record-head,
.ob-record > .ob-split,
.ob-record > .ob-findings,
.ob-record > .ob-signature {
  margin-left: -14px;
  margin-right: -14px;
}

/* "Condition record", never "inspection record". The store records a disclosed
   condition; it does not claim a per-unit physical inspection it cannot evidence.
   Nothing is printed here that is not a field of catalog.json. */
.ob-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ob-record-head-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ob-record-head-title svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.ob-record-head-ref {
  color: var(--ob-on-ink-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}


/* ---- 3. The price row with no slot ----------------------------------------
   Composed so that there is structurally nowhere to put a struck price, a "was",
   or a percentage: one left-aligned mono block, and its only sibling is the
   caption. compare_at is null on all 23 products and stays null. A shopper fluent
   in discount grammar registers the total absence of it, and that contrast argues
   the price better than any badge could.
   The price is the loud element on this page and the button is deliberately
   quiet, because in a record the price is a measured result, not an offer. */
.product-price-block {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.product-price-large {
  font-family: var(--ob-mono);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ob-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.product-price-caption {
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ---- 4. The Condition Split, placed --------------------------------------
   The component itself is defined once in the shared layer at the top of this
   file. Only its placement on the product page is set here: welded flush under
   the price on the record sheet, and under the price caption on a launch page.
   It never sits on top of the photograph. */
.ob-record > .ob-split {
  margin-bottom: 16px;
}

.product-offer > .ob-split {
  margin: 4px 0 14px;
  border: 1px solid var(--ob-control);
  border-top: 0;
}

.launch-mobile-buy > .ob-split {
  margin: 0 0 14px;
  border: 1px solid var(--ob-control);
  border-top: 0;
}


/* ---- 5. The Findings Table ------------------------------------------------
   A ruled table in which exactly one row is flagged. One noted line among six is
   the universal grammar of a disclosed minor defect, so the unstated "what is
   wrong with it?" is answered before it is consciously asked, and the answer is:
   the cardboard. It sits directly under the price for that reason.
   Rows render only from fields that exist in catalog.json. The table is allowed
   to be short and is NEVER padded out with filler, because padding it is exactly
   how a record turns back into a pitch. */
.ob-findings {
  margin: 0 0 16px;
  border: 1px solid var(--ob-control);
  border-bottom: 0;
}

.ob-record > .ob-findings {
  border-left: 0;
  border-right: 0;
}

.ob-findings > .ob-finding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 11px;
  border-bottom: 1px solid var(--ob-control);
}

.ob-findings > .ob-finding:nth-child(even) {
  background: var(--ob-panel);
}

.ob-findings dt {
  color: var(--ob-ink-2);
  font-size: 13px;
  line-height: 1.35;
}

.ob-findings dd {
  margin: 0;
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The flagged row. Its non-colour cue is the value text itself, "OPENED", so
   1.4.1 holds without a symbol column. Declared after the zebra so it wins at
   either parity. */
.ob-findings > .ob-finding-noted,
.ob-findings > .ob-finding-noted:nth-child(even) {
  background: var(--ob-opened-fill);
  box-shadow: inset 3px 0 0 var(--ob-opened-edge);
}

.ob-findings > .ob-finding-noted dd {
  color: var(--ob-opened);
}

/* Rendered only from a real max_quantity. purchaseControls() clamps a missing
   value to 10 so the stepper has a ceiling; that clamp is not a fact about the
   product and is never printed. Phrased as a rule of sale, never as a count of
   remaining stock. */
.ob-findings > .ob-finding-limit dd {
  color: var(--ob-limit);
}

.ob-findings > .ob-finding-limit:nth-child(even) {
  background: var(--ob-card);
}


/* ---- 6. Purchase controls -------------------------------------------------- */
.variant-group legend {
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.variant-option span {
  border: 1px solid var(--ob-control);
  border-radius: 0;
  background: var(--ob-card);
  color: var(--ob-ink);
}

.variant-option input:checked + span {
  border-color: var(--ob-ink);
  box-shadow: inset 0 0 0 2px var(--ob-ink);
}

/* An option that does not exist is struck, never hard-disabled: disabling one
   axis is what made five of ten variants unreachable on the last store. */
.variant-option.is-unavailable span {
  background: var(--ob-panel);
  color: var(--ob-muted);
}

.variant-option.is-unavailable input:checked + span {
  background: var(--ob-card);
  color: var(--ob-ink);
}

@media (hover: hover) and (pointer: fine) {
  .variant-option input:not(:disabled) + span:hover {
    border-color: var(--ob-ink);
  }
}

.variant-unavailable {
  border: 1px solid var(--ob-limit);
  border-left-width: 3px;
  border-radius: 0;
  background: var(--ob-card);
  color: var(--ob-limit);
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.quantity-stepper {
  border: 1px solid var(--ob-control);
  border-radius: 0;
  background: var(--ob-card);
}

.quantity-stepper button {
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 17px;
  font-weight: 700;
}

.quantity-stepper input {
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (hover: hover) and (pointer: fine) {
  .quantity-stepper button:hover {
    background: var(--ob-panel);
    color: var(--ob-ink);
  }
}

.quantity-stepper button:active {
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

/* The CTA is deliberately quiet. Ink, square, no lift, no drop shadow, no red:
   red is the discount-site convention and this page's whole job is arguing that
   the price gap is legitimate. */
.button-accent {
  border-color: var(--ob-ink);
  background: var(--ob-ink);
  color: var(--ob-on-ink);
}

.button-accent:hover {
  border-color: var(--ob-ink-hover);
  background: var(--ob-ink-hover);
}

.button-accent:active {
  border-color: #0F0D0A;
  background: #0F0D0A;
  transform: none;
}

.button-accent:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--ob-focus);
}

.buy-now-large,
.add-to-cart-large {
  border-radius: 0;
  box-shadow: none;
  min-height: 54px;
  font-weight: 800;
}

.button-outline {
  border-radius: 0;
  border-color: var(--ob-ink);
  background: var(--ob-card);
  color: var(--ob-ink);
}

.button-outline:hover {
  background: var(--ob-panel);
}

[data-product-detail] .button:hover,
.mobile-purchase-bar .button:hover,
.xc10-final-buy .button:hover {
  transform: none;
}

/* Rendered only where catalog.json actually carries max_quantity: 1. It is a rule
   of sale, so it is outlined rather than filled: a solid red block on a product
   page reads as an alert, and there is nothing alarming here. */
.purchase-controls-limited .limited-purchase-note,
.limited-purchase-note {
  border: 1px solid var(--ob-limit);
  border-left-width: 3px;
  border-radius: 0;
  background: var(--ob-card);
}

.limited-purchase-note svg {
  color: var(--ob-limit);
}

.limited-purchase-note strong {
  color: var(--ob-limit);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.limited-purchase-note small {
  color: var(--ob-muted);
}

.seller-note {
  margin-top: 12px;
  color: var(--ob-muted);
}

.seller-note strong {
  color: var(--ob-ink);
}


/* ---- 7. Purchase facts, as ruled rows -------------------------------------
   Same grammar as the Findings Table: this page is a record throughout, and four
   floating icon cards read as a brochure. Green here means "a fact about the
   item", which is the same thing it means in the Split. */
.purchase-facts {
  gap: 0;
  margin-top: 16px;
  padding: 0;
  border-top: 1px solid var(--ob-control);
  border-bottom: 0;
}

.purchase-facts > span {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ob-rule);
}

.purchase-facts svg {
  width: 16px;
  height: 16px;
  color: var(--ob-unused);
}

.purchase-facts b {
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.purchase-facts small {
  margin-top: 2px;
  color: var(--ob-muted);
  font-size: 11px;
  line-height: 1.45;
}

/* True of open box inventory as a class. Never per product, never a number, never
   a countdown: the store cannot prove a stock count and so never implies one. */
.ob-signature {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-top: 1px solid var(--ob-control);
  background: var(--ob-panel);
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}

.ob-signature strong {
  color: var(--ob-ink);
}

.product-offer > .ob-signature {
  border: 1px solid var(--ob-control);
}


/* ---- 8. Supporting blocks on the page -------------------------------------- */
[data-product-detail] .product-brand {
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-product-detail] .product-lead {
  max-width: 68ch;
  color: var(--ob-ink-2);
}

.product-key-specs svg,
.benefit-list svg {
  color: var(--ob-unused);
}

.benefit-list {
  border-top: 1px solid var(--ob-control);
  border-bottom: 1px solid var(--ob-control);
}

.product-accordions details {
  border-bottom: 1px solid var(--ob-control);
}

.product-accordions summary {
  font-weight: 700;
}

.product-specs {
  border: 1px solid var(--ob-control);
  border-bottom: 0;
}

.product-specs > div {
  gap: 12px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--ob-control);
  font-size: 13px;
}

.product-specs > div:nth-child(even) {
  background: var(--ob-panel);
}

.product-specs dt {
  color: var(--ob-ink-2);
}

.product-specs dd {
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The sticky bar is the buy box in one line. Same ink edge, same fact face for
   the number, no drop shadow. The translateY that hides it behind the cookie
   banner is functional and is left exactly as it is. */
.mobile-purchase-bar {
  background: var(--ob-card);
  border-top: 1.5px solid var(--ob-ink);
  box-shadow: none;
}

.mobile-purchase-bar b {
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.mobile-purchase-bar small {
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.launch-current-price {
  font-family: var(--ob-mono);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ob-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.launch-price-caption {
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Stock badges say "in stock" and nothing more. Green, because it is a fact about
   availability, and never amber: amber belongs to the packaging alone. */
.launch-stock-badge {
  border-radius: 0;
  color: var(--ob-unused);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ---- 9. Focus ------------------------------------------------------------- */
.ob-record-head a:focus-visible,
.ob-signature a:focus-visible {
  outline: 3px solid var(--ob-focus-invert);
  outline-offset: 2px;
}


/* ---- 10. Motion ------------------------------------------------------------
   CSS only, no dependency, colour and border only, nothing over 180ms, and every
   declaration is inside prefers-reduced-motion: no-preference, so under "reduce"
   the page is completely static and every state is still legible through colour
   AND border. Nothing translates, scales or lifts: the record does not move. */
@media (prefers-reduced-motion: no-preference) {
  .product-thumb,
  .gallery-zoom,
  .gallery-nav,
  .variant-option span,
  .quantity-stepper button,
  .product-accordions summary {
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease,
      color 140ms ease;
  }

  .button-accent {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      box-shadow 160ms ease;
  }

  /* The flagged row settles into its tint once, on load, so the eye is drawn to
     the one noted line rather than having to hunt for it. Opacity and colour
     only, and it finishes where it would otherwise have started. */
  .ob-findings > .ob-finding-noted {
    animation: ob-note-settle 180ms ease-out both;
  }

  @keyframes ob-note-settle {
    from { background: var(--ob-card); box-shadow: inset 0 0 0 var(--ob-opened-edge); }
    to   { background: var(--ob-opened-fill); box-shadow: inset 3px 0 0 var(--ob-opened-edge); }
  }
}

@media (hover: hover) and (pointer: fine) {
  .product-accordions summary:hover {
    background: var(--ob-panel);
  }
}


/* ---- 11. Responsive -------------------------------------------------------
   Existing breakpoints only. The Split and the Findings Table are the payload,
   not decoration, so they survive every width. The sm and lg sizes are stepped
   down by the shared layer; only the md size, which is the buy-box size, is
   adjusted here. */
@media (max-width: 620px) {
  .product-main-image::after { width: 24px; height: 24px; }

  .gallery-zoom { right: 8px; bottom: 8px; }
  .gallery-counter { left: 8px; bottom: 8px; }

  .ob-record { padding: 0 12px; }

  .ob-record > .ob-record-head,
  .ob-record > .ob-split,
  .ob-record > .ob-findings,
  .ob-record > .ob-signature {
    margin-left: -12px;
    margin-right: -12px;
  }

  .ob-record-head { padding: 6px 12px; font-size: 10px; letter-spacing: 0.1em; }

  .product-price-large { font-size: clamp(30px, 8.5vw, 38px); }

  .ob-split-md .ob-split-cell { min-height: 44px; padding: 7px 10px; }
  .ob-split-md .ob-split-value { font-size: 12px; }

  /* The table stays two-column here on purpose. Stacking each label above its
     value read fine in isolation and was wrong in context: it doubled the height
     of an eight-row table and pushed Add to cart below the fold on a 375px
     screen. Every value in the set is short enough to sit on one line at 316px,
     and the longest ("SPORT BAND INCLUDED") is allowed to wrap rather than
     forcing every other row to. */
  /* Flex rather than grid at this width: a 1fr label column claims the space
     first and forces every short value ("NO", "IN FORCE", "3 UNITS") onto two
     lines. In a flex row the value is sized by its content and the label is the
     one allowed to shrink, which is the correct priority for a table of facts. */
  .ob-findings > .ob-finding {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
  }

  .ob-findings dt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
  }

  .ob-findings dd {
    flex: 0 1 auto;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .ob-signature { padding: 10px 12px; }

  .product-specs > div { gap: 10px; padding: 7px 10px; }
}

@media (max-width: 360px) {
  .ob-split-md .ob-split-cell { padding: 7px 9px; column-gap: 6px; }
  .ob-record-head { letter-spacing: 0.06em; }
}