/* =============================================================
 * Oakleys Farm shop UI - DERIVED FILE, DO NOT EDIT BY HAND.
 *
 * Generated by bin/build-shop-css.php from design/chk/, which is
 * the approved CHK-03 package and the canonical visual spec.
 * Edit the design package (or the build script) and re-run.
 *
 * Every rule is scoped under .ofc-shop because the console's
 * design system shares the ofc- prefix and disagrees about 11
 * class names and 3 shadow tokens. See the build script.
 * ============================================================= */

/* =============================================================
   Oakleys Farm Group commerce - design tokens (direction 5A, approved)
   CHK-03 / BB-OAK-2026-001. Tokens only: custom properties on :root.
   Fonts are declared in components.css (rules live there, not here).
   ============================================================= */
.ofc-shop {
  /* ---- Brand ---- */
  --ofc-green: #1F4D34;        /* Oakleys green - header + primary buttons ONLY */
  --ofc-green-hover: #2A6244;
  --ofc-green-press: #163A27;
  --ofc-green-tint: rgba(31, 77, 52, 0.08);
  --ofc-focus: rgba(31, 77, 52, 0.35);

  /* ---- Neutrals (warm) ---- */
  --ofc-white: #FFFFFF;        /* cards, button text on green */
  --ofc-canvas: #FBF8F1;       /* page background */
  --ofc-band: #2A2520;         /* shop group bands - identical for every shop */
  --ofc-border: #E5DFD2;
  --ofc-border-strong: #C9C2B0;
  --ofc-hairline: #EFEBE0;
  --ofc-wallet: #000000;       /* express wallet buttons (Apple/Google mandate black) */
  --ofc-wallet-hover: #1A1A1A;

  /* ---- Text ---- */
  --ofc-ink: #1F1812;          /* darkest walnut - also selected-state borders */
  --ofc-ink-2: #5C5547;
  --ofc-ink-3: #7A7363;
  --ofc-ink-faint: #A39B86;
  --ofc-on-dark: #F4ECE0;
  --ofc-on-dark-dim: rgba(244, 236, 224, 0.65);
  --ofc-on-dark-line: rgba(244, 236, 224, 0.32);   /* hairlines on dark chrome */
  --ofc-on-dark-track: rgba(244, 236, 224, 0.30);  /* spinner track on dark chrome */
  --ofc-on-green: rgba(255, 255, 255, 0.85);       /* secondary text on the green header */
  --ofc-on-green-track: rgba(255, 255, 255, 0.35); /* spinner track on a green button */

  /* ---- Semantic ---- */
  --ofc-est: #8A5A14;                       /* estimated-price annotation amber */
  --ofc-est-bg: rgba(184, 118, 26, 0.12);
  --ofc-est-callout-bg: rgba(184, 118, 26, 0.08);
  --ofc-est-callout-border: rgba(184, 118, 26, 0.35);
  --ofc-critical: #8E3A24;                  /* remove links, errors, butchery swatch */
  --ofc-critical-hover: #6E2C1B;
  --ofc-critical-bg: rgba(142, 58, 36, 0.10);
  --ofc-critical-border: rgba(142, 58, 36, 0.30);
  --ofc-success: #5C7A3A;
  --ofc-success-bg: rgba(92, 122, 58, 0.10);

  /* ---- Category swatches (product photo stand-ins) ---- */
  --ofc-swatch-pantry-bg: rgba(184, 118, 26, 0.10);
  --ofc-swatch-aggregates-bg: rgba(74, 93, 58, 0.10);
  --ofc-swatch-aggregates-ink: #4A5D3A;
  --ofc-swatch-events-bg: rgba(30, 91, 142, 0.10);
  --ofc-swatch-events-ink: #1E5B8E;

  /* ---- Font stacks ---- */
  --ofc-font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --ofc-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ofc-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---- Type styles ---- */
  --ofc-text-title: 700 26px/1.15 var(--ofc-font-display);      /* page title mobile */
  --ofc-text-title-lg: 700 32px/1.15 var(--ofc-font-display);   /* page title desktop */
  --ofc-text-wordmark: 700 16px/1 var(--ofc-font-display);      /* header wordmark mobile */
  --ofc-text-wordmark-lg: 700 18px/1 var(--ofc-font-display);
  --ofc-text-body: 400 16px/1.55 var(--ofc-font-sans);          /* 16px minimum */
  --ofc-text-item: 600 16px/1.35 var(--ofc-font-sans);          /* line-item names + prices */
  --ofc-text-total: 600 17px/1.3 var(--ofc-font-sans);
  --ofc-text-sub: 400 16px/1.5 var(--ofc-font-sans);            /* secondary rows - 16px floor */
  --ofc-text-note: 400 16px/1.5 var(--ofc-font-sans);           /* captions, terms - 16px floor */
  --ofc-text-band: 700 11px/1.4 var(--ofc-font-mono);           /* shop bands */
  --ofc-text-label: 600 10.5px/1.4 var(--ofc-font-mono);        /* mono labels */
  --ofc-text-annot: 500 10.5px/1.6 var(--ofc-font-mono);        /* ledger annotations */

  /* ---- Letterspacing ---- */
  --ofc-track-wide: 0.16em;    /* shop bands, summary labels */
  --ofc-track-label: 0.14em;   /* mono labels */
  --ofc-track-tight: 0.12em;   /* wordmark, est chip */

  /* ---- Spacing (4px base) ---- */
  --ofc-s1: 4px;
  --ofc-s2: 8px;
  --ofc-s3: 12px;
  --ofc-s4: 16px;
  --ofc-s5: 20px;
  --ofc-s6: 24px;
  --ofc-s8: 32px;
  --ofc-s10: 40px;
  --ofc-s12: 48px;
  --ofc-s14: 56px;

  /* ---- Radii (printed-ledger crispness) ---- */
  --ofc-r-chip: 3px;
  --ofc-r-input: 6px;
  --ofc-r-btn: 8px;
  --ofc-r-card: 12px;
  --ofc-r-pill: 999px;

  /* ---- Shadows (soft, walnut-tinted) ---- */
  --ofc-shadow-sm: 0 1px 3px rgba(31, 24, 18, 0.05);
  --ofc-shadow-md: 0 2px 8px rgba(31, 24, 18, 0.06);
  --ofc-shadow-modal: 0 12px 40px rgba(31, 24, 18, 0.28);

  /* ---- Scrims (page behind an overlay) ---- */
  --ofc-scrim: rgba(31, 24, 18, 0.55);        /* document modals - page stays readable */
  --ofc-scrim-deep: rgba(31, 24, 18, 0.86);   /* bank authentication - our copy must win */

  /* ---- Z-index ---- */
  --ofc-z-lockstrip: 80;   /* payment-in-flight strip, sticky above the page */
  --ofc-z-overlay: 85;     /* bank authentication overlay */
  --ofc-z-modal: 90;       /* document modals - always the topmost layer */

  /* ---- Controls ---- */
  --ofc-touch: 44px;
  --ofc-btn-h: 50px;
  --ofc-input-h: 48px;

  /* ---- Motion ---- */
  --ofc-dur: 150ms;
  --ofc-ease: ease;
}

/* =============================================================
   Oakleys Farm Group commerce - shared components (direction 5A, approved)
   Buttons, fields, line rows, shop tags, callouts, panels, status pills,
   order summary + page scaffold. Styled ONLY via tokens.css custom
   properties. Class names ofc-, identical across every screen.
   ============================================================= */

/* ---- Fonts (self-hosted; no CDN in production) ---- */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Libre Baskerville WOFF2 not yet supplied [PAUL: supply file].
   Georgia serves as the interim serif fallback via the token stack. */

.ofc-shop,
.ofc-shop * { box-sizing: border-box; margin: 0; padding: 0; }
body.ofc-shop { -webkit-text-size-adjust: 100%; }
body.ofc-shop {
  background: var(--ofc-canvas);
  color: var(--ofc-ink);
  font: var(--ofc-text-body);
  font-feature-settings: normal;
}
/* Prose links only. The :not([class]) guard exists because a bare
   a:hover rule is specificity (0,1,1) and beats any class-only
   colour (0,1,0) - which made anchor-styled primary buttons go
   green-on-green on hover and lose their label. Every classed
   anchor declares its own colour. */
.ofc-shop a:not([class]) { color: var(--ofc-green); }
@media (hover: hover) { .ofc-shop a:not([class]):hover { color: var(--ofc-green-hover); } }
.ofc-shop.ofc-tnum,
.ofc-shop .ofc-tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* ============ Group header ============ */
.ofc-shop.ofc-header,
.ofc-shop .ofc-header {
  background: var(--ofc-green);
  padding: 15px var(--ofc-s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ofc-s3);
}
.ofc-shop.ofc-wordmark,
.ofc-shop .ofc-wordmark {
  font: var(--ofc-text-wordmark);
  letter-spacing: var(--ofc-track-tight);
  color: var(--ofc-white);
  text-decoration: none;
}
.ofc-shop.ofc-header-meta,
.ofc-shop .ofc-header-meta { display: flex; align-items: center; gap: var(--ofc-s3); }
.ofc-shop.ofc-header-label,
.ofc-shop .ofc-header-label {
  font: var(--ofc-text-label);
  letter-spacing: var(--ofc-track-label);
  color: var(--ofc-on-green);
}
.ofc-shop.ofc-count-badge,
.ofc-shop .ofc-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--ofc-r-pill);
  background: var(--ofc-white);
  color: var(--ofc-green);
  font: 600 13px/1 var(--ofc-font-sans);
  font-feature-settings: "tnum" 1;
}
.ofc-shop.ofc-header-strip,
.ofc-shop .ofc-header-strip {
  background: var(--ofc-white);
  border-bottom: 1px solid var(--ofc-border);
  text-align: center;
  padding: 9px var(--ofc-s4);
  font: var(--ofc-text-note);
  color: var(--ofc-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .ofc-shop.ofc-header,
.ofc-shop .ofc-header { padding: 16px var(--ofc-s8); }
  .ofc-shop.ofc-wordmark,
.ofc-shop .ofc-wordmark { font: var(--ofc-text-wordmark-lg); letter-spacing: var(--ofc-track-tight); }
  .ofc-shop.ofc-header-strip,
.ofc-shop .ofc-header-strip { padding: 10px var(--ofc-s8); }
}

/* ============ Page scaffold ============ */
.ofc-shop.ofc-main,
.ofc-shop .ofc-main { padding: var(--ofc-s5) var(--ofc-s4) var(--ofc-s8); }
.ofc-shop.ofc-container,
.ofc-shop .ofc-container { max-width: 1120px; margin: 0 auto; }
.ofc-shop.ofc-columns,
.ofc-shop .ofc-columns { display: grid; grid-template-columns: 1fr; gap: var(--ofc-s4); align-items: start; }
@media (min-width: 768px) { .ofc-shop.ofc-main,
.ofc-shop .ofc-main { padding: var(--ofc-s8) var(--ofc-s8) var(--ofc-s14); } }
@media (min-width: 1024px) { .ofc-shop.ofc-columns,
.ofc-shop .ofc-columns { grid-template-columns: 1fr 360px; gap: var(--ofc-s8); } }
.ofc-shop.ofc-stack,
.ofc-shop .ofc-stack { display: flex; flex-direction: column; gap: var(--ofc-s4); }
@media (min-width: 1024px) { .ofc-shop.ofc-stack,
.ofc-shop .ofc-stack { gap: var(--ofc-s6); } }

.ofc-shop.ofc-title,
.ofc-shop .ofc-title { font: var(--ofc-text-title); color: var(--ofc-ink); margin: 0 0 var(--ofc-s1); text-wrap: balance; }
.ofc-shop.ofc-title-sub,
.ofc-shop .ofc-title-sub { font: var(--ofc-text-body); color: var(--ofc-ink-2); margin: 0 0 var(--ofc-s5); }
@media (min-width: 768px) {
  .ofc-shop.ofc-title,
.ofc-shop .ofc-title { font: var(--ofc-text-title-lg); margin: 0 0 6px; }
  .ofc-shop.ofc-title-sub,
.ofc-shop .ofc-title-sub { margin: 0 0 var(--ofc-s6); }
}

/* ============ Back button ============ */
.ofc-shop.ofc-back,
.ofc-shop .ofc-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ofc-touch);
  padding: 0 var(--ofc-s4);
  background: var(--ofc-white);
  border: 1px solid var(--ofc-border-strong);
  border-radius: var(--ofc-r-btn);
  font: 600 13px/1 var(--ofc-font-sans);
  color: var(--ofc-ink);
  text-decoration: none;
  margin: 0 0 var(--ofc-s6);
  transition: border-color var(--ofc-dur) var(--ofc-ease), background var(--ofc-dur) var(--ofc-ease);
}
@media (hover: hover) { .ofc-shop.ofc-back:hover,
.ofc-shop .ofc-back:hover { background: var(--ofc-canvas); border-color: var(--ofc-ink-faint); color: var(--ofc-ink); } }

/* ============ Cards + shop bands ============ */
.ofc-shop.ofc-card,
.ofc-shop .ofc-card {
  background: var(--ofc-white);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-card);
  overflow: hidden;
}
.ofc-shop.ofc-band,
.ofc-shop .ofc-band {
  background: var(--ofc-band);
  padding: var(--ofc-s3) var(--ofc-s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ofc-s3);
}
.ofc-shop.ofc-band-name,
.ofc-shop .ofc-band-name {
  font: var(--ofc-text-band);
  letter-spacing: var(--ofc-track-wide);
  color: var(--ofc-on-dark);
}
.ofc-shop.ofc-band-count,
.ofc-shop .ofc-band-count { font: var(--ofc-text-note); color: var(--ofc-on-dark-dim); }
@media (min-width: 768px) { .ofc-shop.ofc-band,
.ofc-shop .ofc-band { padding: 14px var(--ofc-s5); } }

/* ============ Line rows ============ */
.ofc-shop.ofc-row,
.ofc-shop .ofc-row { padding: var(--ofc-s4); border-bottom: 1px solid var(--ofc-hairline); }
@media (min-width: 768px) { .ofc-shop.ofc-row,
.ofc-shop .ofc-row { padding: 18px var(--ofc-s5); } }
.ofc-shop.ofc-row-top,
.ofc-shop .ofc-row-top { display: flex; justify-content: space-between; gap: var(--ofc-s3); align-items: baseline; }
.ofc-shop.ofc-row-name,
.ofc-shop .ofc-row-name { font: var(--ofc-text-item); color: var(--ofc-ink); }
.ofc-shop.ofc-row-price,
.ofc-shop .ofc-row-price {
  font: var(--ofc-text-item);
  color: var(--ofc-ink);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  text-align: right;
}
.ofc-shop.ofc-row-annot,
.ofc-shop .ofc-row-annot {
  font: var(--ofc-text-annot);
  color: var(--ofc-ink-3);
  margin-top: var(--ofc-s1);
  font-feature-settings: "tnum" 1;
}
.ofc-shop.ofc-row-annot .ofc-est-inline,
.ofc-shop .ofc-row-annot .ofc-est-inline { color: var(--ofc-est); }
.ofc-shop.ofc-row-sub,
.ofc-shop .ofc-row-sub { font: var(--ofc-text-note); color: var(--ofc-ink-3); margin-top: var(--ofc-s1); }
.ofc-shop.ofc-row-controls,
.ofc-shop .ofc-row-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--ofc-s3);
}

/* Category swatch (photo stand-in) */
.ofc-shop.ofc-media-row,
.ofc-shop .ofc-media-row { display: grid; grid-template-columns: 56px 1fr; gap: 14px; }
.ofc-shop.ofc-swatch,
.ofc-shop .ofc-swatch {
  width: 56px;
  height: 56px;
  border-radius: var(--ofc-r-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 8px/1 var(--ofc-font-mono);
  letter-spacing: 0.08em;
}
.ofc-shop.ofc-swatch--butchery,
.ofc-shop .ofc-swatch--butchery { background: var(--ofc-critical-bg); color: var(--ofc-critical); }
.ofc-shop.ofc-swatch--pantry,
.ofc-shop .ofc-swatch--pantry { background: var(--ofc-swatch-pantry-bg); color: var(--ofc-est); }
.ofc-shop.ofc-swatch--aggregates,
.ofc-shop .ofc-swatch--aggregates { background: var(--ofc-swatch-aggregates-bg); color: var(--ofc-swatch-aggregates-ink); }
.ofc-shop.ofc-swatch--events,
.ofc-shop .ofc-swatch--events { background: var(--ofc-swatch-events-bg); color: var(--ofc-swatch-events-ink); }

/* Quantity stepper */
.ofc-shop.ofc-stepper,
.ofc-shop .ofc-stepper {
  display: inline-flex;
  border: 1px solid var(--ofc-border-strong);
  border-radius: var(--ofc-r-input);
  overflow: hidden;
}
.ofc-shop.ofc-stepper button,
.ofc-shop .ofc-stepper button,
.ofc-shop.ofc-stepper .ofc-stepper-btn,
.ofc-shop .ofc-stepper .ofc-stepper-btn {
  width: var(--ofc-touch);
  height: var(--ofc-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 18px/1 var(--ofc-font-sans);
  color: var(--ofc-ink-2);
  background: var(--ofc-white);
  border: none;
  cursor: pointer;
  transition: background var(--ofc-dur) var(--ofc-ease);
}
@media (hover: hover) { .ofc-shop.ofc-stepper button:hover,
.ofc-shop .ofc-stepper button:hover,
.ofc-shop.ofc-stepper .ofc-stepper-btn:hover,
.ofc-shop .ofc-stepper .ofc-stepper-btn:hover { background: var(--ofc-canvas); } }
.ofc-shop.ofc-stepper-qty,
.ofc-shop .ofc-stepper-qty {
  width: var(--ofc-touch);
  height: var(--ofc-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 15px/1 var(--ofc-font-sans);
  color: var(--ofc-ink);
  border-left: 1px solid var(--ofc-hairline);
  border-right: 1px solid var(--ofc-hairline);
  font-feature-settings: "tnum" 1;
}

/* Remove link */
.ofc-shop.ofc-remove,
.ofc-shop .ofc-remove {
  display: inline-flex;
  align-items: center;
  min-height: var(--ofc-touch);
  font: 400 15px/1 var(--ofc-font-sans);
  color: var(--ofc-critical);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 var(--ofc-s3);
}
@media (hover: hover) { .ofc-shop.ofc-remove:hover,
.ofc-shop .ofc-remove:hover { color: var(--ofc-critical-hover); } }

/* ============ Chips + pills ============ */
.ofc-shop.ofc-est-chip,
.ofc-shop .ofc-est-chip {
  display: inline-flex;
  font: 600 10px/1.4 var(--ofc-font-mono);
  letter-spacing: var(--ofc-track-tight);
  color: var(--ofc-est);
  background: var(--ofc-est-bg);
  border-radius: var(--ofc-r-chip);
  padding: 3px 6px;
}
.ofc-shop.ofc-shop-tag,
.ofc-shop .ofc-shop-tag {
  display: inline-flex;
  align-items: center;
  font: 700 10px/1.4 var(--ofc-font-mono);
  letter-spacing: var(--ofc-track-label);
  color: var(--ofc-on-dark);
  background: var(--ofc-band);
  border-radius: 4px;
  padding: 5px 10px;
}

/* ============ Buttons ============ */
.ofc-shop.ofc-btn,
.ofc-shop .ofc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ofc-s2);
  width: 100%;
  height: var(--ofc-btn-h);
  border-radius: var(--ofc-r-btn);
  font: 600 15px/1 var(--ofc-font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ofc-dur) var(--ofc-ease), border-color var(--ofc-dur) var(--ofc-ease);
}
.ofc-shop.ofc-btn:focus-visible,
.ofc-shop .ofc-btn:focus-visible { outline: 2px solid var(--ofc-focus); outline-offset: 2px; }
.ofc-shop.ofc-btn--primary,
.ofc-shop .ofc-btn--primary { background: var(--ofc-green); color: var(--ofc-white); }
@media (hover: hover) { .ofc-shop.ofc-btn--primary:hover,
.ofc-shop .ofc-btn--primary:hover { background: var(--ofc-green-hover); } }
.ofc-shop.ofc-btn--primary:active,
.ofc-shop .ofc-btn--primary:active { background: var(--ofc-green-press); }
.ofc-shop.ofc-btn--secondary,
.ofc-shop .ofc-btn--secondary { background: var(--ofc-white); color: var(--ofc-ink); border-color: var(--ofc-border-strong); }
@media (hover: hover) { .ofc-shop.ofc-btn--secondary:hover,
.ofc-shop .ofc-btn--secondary:hover { border-color: var(--ofc-ink-faint); } }
.ofc-shop.ofc-btn-terms,
.ofc-shop .ofc-btn-terms { font: var(--ofc-text-note); color: var(--ofc-ink-3); }

/* ============ Totals + footers ============ */
.ofc-shop.ofc-card-footer,
.ofc-shop .ofc-card-footer { padding: var(--ofc-s4); display: flex; flex-direction: column; gap: var(--ofc-s3); }
@media (min-width: 768px) { .ofc-shop.ofc-card-footer,
.ofc-shop .ofc-card-footer { padding: var(--ofc-s4) var(--ofc-s5) var(--ofc-s5); } }
.ofc-shop.ofc-total-row,
.ofc-shop .ofc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ofc-s3);
}
.ofc-shop.ofc-total-label,
.ofc-shop .ofc-total-label { font: var(--ofc-text-sub); color: var(--ofc-ink-2); }
.ofc-shop.ofc-total-value,
.ofc-shop .ofc-total-value { font: var(--ofc-text-total); color: var(--ofc-ink); font-feature-settings: "tnum" 1; white-space: nowrap; }
.ofc-shop.ofc-total-value .ofc-est-mark,
.ofc-shop .ofc-total-value .ofc-est-mark { font: 600 12px/1 var(--ofc-font-sans); color: var(--ofc-est); }

/* Summary card (rail on desktop, stacked on mobile) */
.ofc-shop.ofc-summary,
.ofc-shop .ofc-summary { background: var(--ofc-white); border: 1px solid var(--ofc-border); border-radius: var(--ofc-r-card); padding: var(--ofc-s4); }
@media (min-width: 768px) { .ofc-shop.ofc-summary,
.ofc-shop .ofc-summary { padding: var(--ofc-s5); } }
.ofc-shop.ofc-summary-label,
.ofc-shop .ofc-summary-label {
  font: var(--ofc-text-label);
  letter-spacing: var(--ofc-track-wide);
  color: var(--ofc-ink-3);
  margin-bottom: var(--ofc-s3);
}
.ofc-shop.ofc-summary-row,
.ofc-shop .ofc-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--ofc-s3);
  padding: 6px 0;
  font: var(--ofc-text-sub);
  color: var(--ofc-ink-2);
  font-feature-settings: "tnum" 1;
}
.ofc-shop.ofc-summary-row--rule,
.ofc-shop .ofc-summary-row--rule { border-bottom: 1px solid var(--ofc-hairline); }
.ofc-shop.ofc-summary-row--total,
.ofc-shop .ofc-summary-row--total {
  padding: var(--ofc-s3) 0 0;
  font: 600 16px/1.4 var(--ofc-font-sans);
  color: var(--ofc-ink);
}
.ofc-shop.ofc-summary-note,
.ofc-shop .ofc-summary-note { font: var(--ofc-text-note); color: var(--ofc-ink-3); margin: var(--ofc-s3) 0 0; }

/* ============ Callouts ============ */
.ofc-shop.ofc-callout,
.ofc-shop .ofc-callout {
  border-radius: var(--ofc-r-btn);
  padding: 14px var(--ofc-s4);
  font: var(--ofc-text-note);
  color: var(--ofc-ink-2);
}
.ofc-shop.ofc-callout--est,
.ofc-shop .ofc-callout--est { background: var(--ofc-est-callout-bg); border: 1px solid var(--ofc-est-callout-border); }
.ofc-shop.ofc-callout--est strong,
.ofc-shop .ofc-callout--est strong { color: var(--ofc-est); font-weight: 600; }
.ofc-shop.ofc-callout--plain,
.ofc-shop .ofc-callout--plain { background: var(--ofc-hairline); }

/* ============ Forms ============ */
.ofc-shop.ofc-form,
.ofc-shop .ofc-form { display: flex; flex-direction: column; gap: var(--ofc-s4); }
.ofc-shop.ofc-form-grid,
.ofc-shop .ofc-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--ofc-s4); }
@media (min-width: 480px) { .ofc-shop.ofc-form-grid--2,
.ofc-shop .ofc-form-grid--2 { grid-template-columns: 1fr 1fr; } }
.ofc-shop.ofc-field,
.ofc-shop .ofc-field { display: flex; flex-direction: column; gap: 6px; }
.ofc-shop.ofc-label,
.ofc-shop .ofc-label { font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-label .ofc-optional,
.ofc-shop .ofc-label .ofc-optional { font-weight: 400; color: var(--ofc-ink-faint); }
.ofc-shop.ofc-input,
.ofc-shop .ofc-input {
  height: var(--ofc-input-h);
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--ofc-border-strong);
  border-radius: var(--ofc-r-input);
  background: var(--ofc-white);
  font: var(--ofc-text-body);
  color: var(--ofc-ink);
  transition: border-color var(--ofc-dur) var(--ofc-ease), box-shadow var(--ofc-dur) var(--ofc-ease);
}
.ofc-shop.ofc-input::placeholder,
.ofc-shop .ofc-input::placeholder { color: var(--ofc-ink-faint); }
.ofc-shop.ofc-input:focus,
.ofc-shop .ofc-input:focus { outline: none; border-color: var(--ofc-green); box-shadow: 0 0 0 3px var(--ofc-focus); }
.ofc-shop textarea.ofc-input { height: auto; min-height: 84px; padding: var(--ofc-s3) 14px; resize: vertical; }
.ofc-shop.ofc-hint,
.ofc-shop .ofc-hint { font: var(--ofc-text-note); color: var(--ofc-ink-3); }

/* Checkbox (consent group: newsletter + terms) */
.ofc-shop.ofc-check,
.ofc-shop .ofc-check { display: flex; align-items: flex-start; gap: var(--ofc-s3); cursor: pointer; }
.ofc-shop.ofc-check input,
.ofc-shop .ofc-check input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1.5px solid var(--ofc-border-strong);
  border-radius: 5px;
  background: var(--ofc-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--ofc-dur) var(--ofc-ease), background var(--ofc-dur) var(--ofc-ease);
}
.ofc-shop.ofc-check input:checked,
.ofc-shop .ofc-check input:checked { background: var(--ofc-green); border-color: var(--ofc-green); }
.ofc-shop.ofc-check input:checked::after,
.ofc-shop .ofc-check input:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ofc-white);
  border-bottom: 2px solid var(--ofc-white);
  transform: rotate(-45deg) translateY(-1px);
}
.ofc-shop.ofc-check input:focus-visible,
.ofc-shop .ofc-check input:focus-visible { outline: 2px solid var(--ofc-focus); outline-offset: 2px; }
.ofc-shop.ofc-check-text,
.ofc-shop .ofc-check-text { font: var(--ofc-text-sub); color: var(--ofc-ink-2); }

/* Option tiles (shipping methods, slots) */
.ofc-shop.ofc-options,
.ofc-shop .ofc-options { display: grid; grid-template-columns: 1fr; gap: var(--ofc-s3); }
@media (min-width: 480px) { .ofc-shop.ofc-options--2,
.ofc-shop .ofc-options--2 { grid-template-columns: 1fr 1fr; } }
.ofc-shop.ofc-option,
.ofc-shop .ofc-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1.5px solid var(--ofc-border-strong);
  border-radius: var(--ofc-r-btn);
  padding: 14px var(--ofc-s4);
  background: var(--ofc-white);
  cursor: pointer;
  min-height: var(--ofc-touch);
  transition: border-color var(--ofc-dur) var(--ofc-ease), background var(--ofc-dur) var(--ofc-ease);
}
@media (hover: hover) { .ofc-shop.ofc-option:hover,
.ofc-shop .ofc-option:hover { border-color: var(--ofc-ink-faint); } }
.ofc-shop.ofc-option--selected,
.ofc-shop .ofc-option--selected { border-color: var(--ofc-ink); background: var(--ofc-canvas); }
.ofc-shop.ofc-option-name,
.ofc-shop .ofc-option-name { font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); display: flex; justify-content: space-between; gap: var(--ofc-s3); font-feature-settings: "tnum" 1; }
.ofc-shop.ofc-option-sub,
.ofc-shop .ofc-option-sub { font: var(--ofc-text-note); color: var(--ofc-ink-3); }

/* Card element placeholder (Stripe mounts here) */
.ofc-shop.ofc-card-element,
.ofc-shop .ofc-card-element {
  border: 1.5px solid var(--ofc-border-strong);
  border-radius: var(--ofc-r-input);
  background: var(--ofc-white);
  padding: 14px var(--ofc-s4);
  font: var(--ofc-text-body);
  color: var(--ofc-ink-faint);
  min-height: var(--ofc-input-h);
}

/* ============ Single-page checkout (s2-checkout) ============ */
/* Express wallets */
.ofc-shop.ofc-wallets,
.ofc-shop .ofc-wallets { display: grid; grid-template-columns: 1fr; gap: var(--ofc-s3); }
@media (min-width: 480px) { .ofc-shop.ofc-wallets,
.ofc-shop .ofc-wallets { grid-template-columns: 1fr 1fr; } }
.ofc-shop.ofc-wallet,
.ofc-shop .ofc-wallet {
  display: flex; align-items: center; justify-content: center; gap: var(--ofc-s2);
  height: var(--ofc-btn-h); border-radius: var(--ofc-r-btn);
  background: var(--ofc-wallet); color: var(--ofc-white); border: none; cursor: pointer;
  font: 600 15px/1 var(--ofc-font-sans);
}
@media (hover: hover) { .ofc-shop.ofc-wallet:hover,
.ofc-shop .ofc-wallet:hover { background: var(--ofc-wallet-hover); } }
.ofc-shop.ofc-divider,
.ofc-shop .ofc-divider { display: flex; align-items: center; gap: var(--ofc-s3); color: var(--ofc-ink-3); font: var(--ofc-text-note); }
.ofc-shop.ofc-divider::before,
.ofc-shop .ofc-divider::before,
.ofc-shop.ofc-divider::after,
.ofc-shop .ofc-divider::after { content: ""; flex: 1; border-top: 1px solid var(--ofc-hairline); }

/* Section labels within the checkout card */
.ofc-shop.ofc-sect,
.ofc-shop .ofc-sect { border-top: 1px solid var(--ofc-hairline); padding-top: var(--ofc-s5); display: flex; flex-direction: column; gap: var(--ofc-s4); }
.ofc-shop.ofc-sect-label,
.ofc-shop .ofc-sect-label { font: var(--ofc-text-label); letter-spacing: var(--ofc-track-wide); color: var(--ofc-ink-3); }

/* Disabled option (e.g. courier out of radius) */
.ofc-shop.ofc-option--disabled,
.ofc-shop .ofc-option--disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) { .ofc-shop.ofc-option--disabled:hover,
.ofc-shop .ofc-option--disabled:hover { border-color: var(--ofc-border-strong); } }

/* Collection slot picker */
.ofc-shop.ofc-slots,
.ofc-shop .ofc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ofc-s3); }
.ofc-shop.ofc-slot,
.ofc-shop .ofc-slot {
  border: 1.5px solid var(--ofc-border-strong); border-radius: var(--ofc-r-btn);
  padding: var(--ofc-s3) 14px; background: var(--ofc-white); cursor: pointer; min-height: var(--ofc-touch);
  transition: border-color var(--ofc-dur) var(--ofc-ease), background var(--ofc-dur) var(--ofc-ease);
}
@media (hover: hover) { .ofc-shop.ofc-slot:hover,
.ofc-shop .ofc-slot:hover { border-color: var(--ofc-ink-faint); } }
.ofc-shop.ofc-slot--selected,
.ofc-shop .ofc-slot--selected { border-color: var(--ofc-ink); background: var(--ofc-canvas); }
.ofc-shop.ofc-slot--full,
.ofc-shop .ofc-slot--full { opacity: 0.45; cursor: default; }
@media (hover: hover) { .ofc-shop.ofc-slot--full:hover,
.ofc-shop .ofc-slot--full:hover { border-color: var(--ofc-border-strong); } }
.ofc-shop.ofc-slot-name,
.ofc-shop .ofc-slot-name { display: block; font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); font-feature-settings: "tnum" 1; }
.ofc-shop.ofc-slot-sub,
.ofc-shop .ofc-slot-sub { font: var(--ofc-text-note); color: var(--ofc-ink-3); }

/* Stripe Payment Element region - Stripe renders its own UI here */
.ofc-shop.ofc-stripe-element,
.ofc-shop .ofc-stripe-element {
  border: 1.5px solid var(--ofc-border-strong); border-radius: var(--ofc-r-input);
  background: var(--ofc-white); min-height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ofc-s2);
  padding: var(--ofc-s5);
}
.ofc-shop.ofc-stripe-element .ofc-stripe-mark,
.ofc-shop .ofc-stripe-element .ofc-stripe-mark { font: var(--ofc-text-label); letter-spacing: var(--ofc-track-label); color: var(--ofc-ink-faint); text-align: center; }
.ofc-shop.ofc-stripe-element .ofc-stripe-note,
.ofc-shop .ofc-stripe-element .ofc-stripe-note { font: var(--ofc-text-note); color: var(--ofc-ink-faint); text-align: center; max-width: 320px; }

/* Card scheme marks - restrained */
.ofc-shop.ofc-schemes,
.ofc-shop .ofc-schemes { display: flex; align-items: center; gap: var(--ofc-s2); }
.ofc-shop.ofc-scheme,
.ofc-shop .ofc-scheme {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ofc-border); border-radius: var(--ofc-r-chip);
  padding: 4px 7px; font: 600 8.5px/1 var(--ofc-font-mono); letter-spacing: 0.08em; color: var(--ofc-ink-3);
  background: var(--ofc-white);
}

/* Secure line */
.ofc-shop.ofc-secure,
.ofc-shop .ofc-secure { display: flex; align-items: center; justify-content: center; gap: var(--ofc-s2); font: var(--ofc-text-note); color: var(--ofc-ink-3); }
.ofc-shop.ofc-secure svg,
.ofc-shop .ofc-secure svg { flex: none; }

/* Inline email capture (radius notify) */
.ofc-shop.ofc-inline-capture,
.ofc-shop .ofc-inline-capture { display: flex; flex-direction: column; gap: var(--ofc-s3); }
@media (min-width: 480px) { .ofc-shop.ofc-inline-capture,
.ofc-shop .ofc-inline-capture { flex-direction: row; } .ofc-shop.ofc-inline-capture .ofc-input,
.ofc-shop .ofc-inline-capture .ofc-input { flex: 1; } .ofc-shop.ofc-inline-capture .ofc-btn,
.ofc-shop .ofc-inline-capture .ofc-btn { width: auto; padding: 0 var(--ofc-s5); height: var(--ofc-input-h); } }

/* Mobile collapsed order summary bar */
.ofc-shop.ofc-msummary,
.ofc-shop .ofc-msummary { background: var(--ofc-white); border-bottom: 1px solid var(--ofc-border); }
.ofc-shop.ofc-msummary > summary,
.ofc-shop .ofc-msummary > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ofc-s3);
  min-height: 52px; padding: var(--ofc-s3) var(--ofc-s4); cursor: pointer;
  font: 600 16px/1.3 var(--ofc-font-sans); color: var(--ofc-ink);
}
.ofc-shop.ofc-msummary > summary::-webkit-details-marker,
.ofc-shop .ofc-msummary > summary::-webkit-details-marker { display: none; }
.ofc-shop.ofc-msummary-total,
.ofc-shop .ofc-msummary-total { font-feature-settings: "tnum" 1; white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
.ofc-shop.ofc-msummary-chev,
.ofc-shop .ofc-msummary-chev { font: 400 11px/1 var(--ofc-font-sans); color: var(--ofc-ink-3); }
.ofc-shop.ofc-msummary-body,
.ofc-shop .ofc-msummary-body { padding: 0 var(--ofc-s4) var(--ofc-s4); border-top: 1px solid var(--ofc-hairline); }
@media (min-width: 1024px) { .ofc-shop.ofc-msummary,
.ofc-shop .ofc-msummary { display: none; } }
.ofc-shop.ofc-rail,
.ofc-shop .ofc-rail { display: none; }
@media (min-width: 1024px) { .ofc-shop.ofc-rail,
.ofc-shop .ofc-rail { display: block; } }

/* ============ Inline sign-in (subtle) ============ */
.ofc-shop.ofc-signin > summary,
.ofc-shop .ofc-signin > summary { list-style: none; cursor: pointer; font: var(--ofc-text-sub); color: var(--ofc-ink-3); display: inline-block; }
.ofc-shop.ofc-signin > summary::-webkit-details-marker,
.ofc-shop .ofc-signin > summary::-webkit-details-marker { display: none; }
.ofc-shop.ofc-signin-link,
.ofc-shop .ofc-signin-link { color: var(--ofc-green); text-decoration: underline; }
@media (hover: hover) { .ofc-shop.ofc-signin > summary:hover .ofc-signin-link,
.ofc-shop .ofc-signin > summary:hover .ofc-signin-link { color: var(--ofc-green-hover); } }
.ofc-shop.ofc-signin-panel,
.ofc-shop .ofc-signin-panel {
  margin-top: var(--ofc-s3); background: var(--ofc-canvas); border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-btn); padding: var(--ofc-s4); display: flex; flex-direction: column; gap: var(--ofc-s3);
}
.ofc-shop.ofc-forgot,
.ofc-shop .ofc-forgot { font: var(--ofc-text-note); color: var(--ofc-ink-3); }

/* Returning customer detected - an offer, not a gate */
.ofc-shop.ofc-welcome,
.ofc-shop .ofc-welcome {
  background: var(--ofc-canvas); border: 1px solid var(--ofc-border); border-radius: var(--ofc-r-btn);
  padding: 14px var(--ofc-s4); display: flex; flex-direction: column; gap: var(--ofc-s3); margin-top: var(--ofc-s2);
}
.ofc-shop.ofc-welcome-title,
.ofc-shop .ofc-welcome-title { font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-welcome-dismiss,
.ofc-shop .ofc-welcome-dismiss {
  background: none; border: none; cursor: pointer; padding: 0; align-self: flex-start;
  font: var(--ofc-text-sub); color: var(--ofc-ink-3); text-decoration: underline;
}

/* Signed in - contact display */
.ofc-shop.ofc-account,
.ofc-shop .ofc-account {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ofc-s3);
  background: var(--ofc-canvas); border: 1px solid var(--ofc-border); border-radius: var(--ofc-r-btn);
  padding: 14px var(--ofc-s4);
}
.ofc-shop.ofc-account-name,
.ofc-shop .ofc-account-name { font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-account-email,
.ofc-shop .ofc-account-email { font: var(--ofc-text-note); color: var(--ofc-ink-3); }
.ofc-shop.ofc-account-signout,
.ofc-shop .ofc-account-signout {
  background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap;
  font: var(--ofc-text-sub); color: var(--ofc-ink-3); text-decoration: underline;
}

/* Saved address picker */
.ofc-shop.ofc-addresses,
.ofc-shop .ofc-addresses { display: grid; grid-template-columns: 1fr; gap: var(--ofc-s3); }
@media (min-width: 480px) { .ofc-shop.ofc-addresses,
.ofc-shop .ofc-addresses { grid-template-columns: 1fr 1fr; } }
.ofc-shop.ofc-address,
.ofc-shop .ofc-address {
  border: 1.5px solid var(--ofc-border-strong); border-radius: var(--ofc-r-btn);
  padding: 14px var(--ofc-s4); display: flex; flex-direction: column; gap: var(--ofc-s1);
  background: var(--ofc-white); cursor: pointer; text-align: left;
  transition: border-color var(--ofc-dur) var(--ofc-ease), background var(--ofc-dur) var(--ofc-ease);
}
@media (hover: hover) { .ofc-shop.ofc-address:hover,
.ofc-shop .ofc-address:hover { border-color: var(--ofc-ink-faint); } }
.ofc-shop.ofc-address--selected,
.ofc-shop .ofc-address--selected { border-color: var(--ofc-ink); background: var(--ofc-canvas); }
.ofc-shop.ofc-pill-default,
.ofc-shop .ofc-pill-default {
  align-self: flex-start; font: 600 9px/1.4 var(--ofc-font-mono); letter-spacing: var(--ofc-track-tight);
  background: var(--ofc-ink); color: var(--ofc-on-dark); border-radius: var(--ofc-r-chip); padding: 2px 6px; margin-bottom: 2px;
}
.ofc-shop.ofc-address-name,
.ofc-shop .ofc-address-name { font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-address-lines,
.ofc-shop .ofc-address-lines { font: var(--ofc-text-note); color: var(--ofc-ink-2); }
.ofc-shop.ofc-address-caption,
.ofc-shop .ofc-address-caption { font: var(--ofc-text-note); color: var(--ofc-ink-faint); }
.ofc-shop.ofc-address--add,
.ofc-shop .ofc-address--add {
  border-style: dashed; align-items: center; justify-content: center;
  font: 600 14px/1.4 var(--ofc-font-sans); color: var(--ofc-ink-2); min-height: var(--ofc-touch);
}

/* Label row (label left, scheme marks right) */
.ofc-shop.ofc-label-row,
.ofc-shop .ofc-label-row { display: flex; justify-content: space-between; align-items: center; gap: var(--ofc-s3); }

/* Status pills (orders list / order detail) */
.ofc-shop.ofc-status-pill,
.ofc-shop .ofc-status-pill {
  display: inline-flex; align-items: center;
  font: 600 12px/1.4 var(--ofc-font-sans);
  border-radius: var(--ofc-r-pill); padding: 3px 10px;
  background: var(--ofc-hairline); color: var(--ofc-ink-2);
}
.ofc-shop.ofc-status-pill--ok,
.ofc-shop .ofc-status-pill--ok { background: var(--ofc-success-bg); color: var(--ofc-success); }
.ofc-shop.ofc-status-pill--est,
.ofc-shop .ofc-status-pill--est { background: var(--ofc-est-bg); color: var(--ofc-est); }
.ofc-shop.ofc-status-pill--critical,
.ofc-shop .ofc-status-pill--critical { background: var(--ofc-critical-bg); color: var(--ofc-critical); }

/* Mobile row anatomy: typographic rows, swatch hidden (signed-off 4a) */
@media (max-width: 767px) {
  .ofc-shop.ofc-media-row,
.ofc-shop .ofc-media-row { grid-template-columns: 1fr; }
  .ofc-shop.ofc-swatch,
.ofc-shop .ofc-swatch { display: none; }
}

/* ---- Accessibility floor (amendment, applies to every screen) ----
   Tap targets never below 44x44. These inline text controls keep their
   look and gain the height. Body and caption copy sits at 16px through
   the --ofc-text-sub / --ofc-text-note tokens; mono labels, status
   pills and the "est" mark stay small because they are labels and
   annotations, not reading copy. */
.ofc-shop.ofc-forgot,
.ofc-shop .ofc-forgot,
.ofc-shop.ofc-account-signout,
.ofc-shop .ofc-account-signout,
.ofc-shop.ofc-welcome-dismiss,
.ofc-shop .ofc-welcome-dismiss,
.ofc-shop.ofc-signin > summary,
.ofc-shop .ofc-signin > summary,
.ofc-shop.ofc-continue-links a,
.ofc-shop .ofc-continue-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ofc-touch);
}

/* inline-flex drops the whitespace-only text node between "Already
   shopped with us?" and the Sign in span - the gap IS that space. */
.ofc-shop.ofc-signin > summary,
.ofc-shop .ofc-signin > summary { flex-wrap: wrap; column-gap: 0.3em; }

/* ============ Motion safety ============ */
@media (prefers-reduced-motion: reduce) {
  .ofc-shop,
.ofc-shop * { animation: none !important; transition: none !important; }
}


/* -------------------------------------------------------------
   Consent group - newsletter above terms, immediately above Pay
   ------------------------------------------------------------- */
.ofc-shop.ofc-consent,
.ofc-shop .ofc-consent {
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s3);
  padding: var(--ofc-s4);
  background: var(--ofc-canvas);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-btn);
}
.ofc-shop.ofc-doclink,
.ofc-shop .ofc-doclink { color: var(--ofc-green); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .ofc-shop.ofc-doclink:hover,
.ofc-shop .ofc-doclink:hover { color: var(--ofc-green-hover); } }
.ofc-shop.ofc-doclink:focus-visible,
.ofc-shop .ofc-doclink:focus-visible { outline: 2px solid var(--ofc-focus); outline-offset: 2px; border-radius: 2px; }

/* -------------------------------------------------------------
   Legal document modal (:target in this static export - swap for
   a dialog element in build; checkout must never be navigated away)
   ------------------------------------------------------------- */
.ofc-shop.ofc-modal,
.ofc-shop .ofc-modal { position: fixed; inset: 0; z-index: var(--ofc-z-modal); display: none; }
.ofc-shop.ofc-modal:target,
.ofc-shop .ofc-modal:target,
.ofc-shop.ofc-modal--open,
.ofc-shop .ofc-modal--open { display: grid; place-items: center; padding: var(--ofc-s4); }
/* Page behind an open modal: scroll-locked, so the checkout never moves. */
.ofc-shop.ofc-scroll-locked,
.ofc-shop .ofc-scroll-locked { overflow: hidden; height: 100vh; }
.ofc-shop.ofc-modal-scrim,
.ofc-shop .ofc-modal-scrim { position: absolute; inset: 0; background: var(--ofc-scrim); }
.ofc-shop.ofc-modal-panel,
.ofc-shop .ofc-modal-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--ofc-white);
  border-radius: var(--ofc-r-card);
  box-shadow: var(--ofc-shadow-modal);
  overflow: hidden;
}
.ofc-shop.ofc-modal-head,
.ofc-shop .ofc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ofc-s4);
  padding: var(--ofc-s4) var(--ofc-s5);
  border-bottom: 1px solid var(--ofc-border);
}
.ofc-shop.ofc-modal-title,
.ofc-shop .ofc-modal-title { margin: 0; font: var(--ofc-text-title); font-size: 20px; color: var(--ofc-ink); }
.ofc-shop.ofc-modal-close,
.ofc-shop .ofc-modal-close {
  flex: none;
  width: var(--ofc-touch);
  height: var(--ofc-touch);
  margin: -10px -10px -10px 0;
  display: grid;
  place-items: center;
  font: 400 26px/1 var(--ofc-font-sans);
  color: var(--ofc-ink-3);
  text-decoration: none;
  border-radius: var(--ofc-r-input);
  transition: background var(--ofc-dur) var(--ofc-ease), color var(--ofc-dur) var(--ofc-ease);
}
@media (hover: hover) { .ofc-shop.ofc-modal-close:hover,
.ofc-shop .ofc-modal-close:hover { background: var(--ofc-canvas); color: var(--ofc-ink); } }
.ofc-shop.ofc-modal-body,
.ofc-shop .ofc-modal-body { overflow-y: auto; padding: var(--ofc-s5); }
.ofc-shop.ofc-modal-body p,
.ofc-shop .ofc-modal-body p { margin: 0 0 var(--ofc-s4); font: var(--ofc-text-sub); color: var(--ofc-ink-2); }
.ofc-shop.ofc-modal-body p:last-child,
.ofc-shop .ofc-modal-body p:last-child { margin-bottom: 0; }
.ofc-shop.ofc-modal-body h3,
.ofc-shop .ofc-modal-body h3 {
  margin: var(--ofc-s5) 0 var(--ofc-s2);
  font: var(--ofc-text-label);
  letter-spacing: var(--ofc-track-label);
  text-transform: uppercase;
  color: var(--ofc-ink);
}
.ofc-shop.ofc-modal-foot,
.ofc-shop .ofc-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ofc-s4);
  padding: var(--ofc-s3) var(--ofc-s5);
  background: var(--ofc-canvas);
  border-top: 1px solid var(--ofc-border);
}
.ofc-shop.ofc-modal-note,
.ofc-shop .ofc-modal-note { font: var(--ofc-text-annot); letter-spacing: var(--ofc-track-label); color: var(--ofc-ink-3); }
.ofc-shop.ofc-modal-done,
.ofc-shop .ofc-modal-done { flex: none; width: auto; padding: 0 var(--ofc-s5); text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 520px) {
  .ofc-shop.ofc-modal-foot,
.ofc-shop .ofc-modal-foot { flex-direction: column-reverse; align-items: stretch; padding: var(--ofc-s4); }
  .ofc-shop.ofc-modal-done,
.ofc-shop .ofc-modal-done { justify-content: center; }
  .ofc-shop.ofc-modal-note,
.ofc-shop .ofc-modal-note { text-align: center; }
}


/* =============================================================
   PAYMENT IN FLIGHT - processing, bank check, recovery
   ============================================================= */

/* Spinner. Reduced-motion kills the animation globally; the copy
   alongside it always carries the meaning on its own. */
@keyframes ofc-spin { to { transform: rotate(360deg); } }
.ofc-shop.ofc-spinner,
.ofc-shop .ofc-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ofc-border-strong);
  border-top-color: var(--ofc-green);
  border-radius: 50%;
  animation: ofc-spin 700ms linear infinite;
}
.ofc-shop.ofc-spinner--btn,
.ofc-shop .ofc-spinner--btn { width: 16px; height: 16px; border-color: var(--ofc-on-green-track); border-top-color: var(--ofc-white); }
.ofc-shop.ofc-spinner--dark,
.ofc-shop .ofc-spinner--dark { width: 14px; height: 14px; border-color: var(--ofc-on-dark-track); border-top-color: var(--ofc-on-dark); }
.ofc-shop.ofc-spinner--lg,
.ofc-shop .ofc-spinner--lg { width: 30px; height: 30px; border-width: 2.5px; }

/* Sticky lock strip - the one thing that stays in view at any scroll
   position while a payment is in flight. */
.ofc-shop.ofc-lockstrip,
.ofc-shop .ofc-lockstrip {
  position: sticky;
  top: 0;
  z-index: var(--ofc-z-lockstrip);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 10px var(--ofc-s4);
  background: var(--ofc-band);
  color: var(--ofc-on-dark);
  font: var(--ofc-text-note);
  text-align: center;
}

/* Locked form. Everything the customer could touch is dimmed and inert;
   the status line and the button stay at full strength.
   BUILD: also set disabled on every control - opacity is not a lock. */
.ofc-shop.ofc-form--locked,
.ofc-shop .ofc-form--locked { pointer-events: none; }
.ofc-shop.ofc-form--locked .ofc-input,
.ofc-shop .ofc-form--locked .ofc-input,
.ofc-shop.ofc-form--locked .ofc-option,
.ofc-shop .ofc-form--locked .ofc-option,
.ofc-shop.ofc-form--locked .ofc-slot,
.ofc-shop .ofc-form--locked .ofc-slot,
.ofc-shop.ofc-form--locked .ofc-address,
.ofc-shop .ofc-form--locked .ofc-address,
.ofc-shop.ofc-form--locked .ofc-wallet,
.ofc-shop .ofc-form--locked .ofc-wallet,
.ofc-shop.ofc-form--locked .ofc-divider,
.ofc-shop .ofc-form--locked .ofc-divider,
.ofc-shop.ofc-form--locked .ofc-consent,
.ofc-shop .ofc-form--locked .ofc-consent,
.ofc-shop.ofc-form--locked .ofc-callout,
.ofc-shop .ofc-form--locked .ofc-callout,
.ofc-shop.ofc-form--locked .ofc-account,
.ofc-shop .ofc-form--locked .ofc-account,
.ofc-shop.ofc-form--locked .ofc-signin,
.ofc-shop .ofc-form--locked .ofc-signin,
.ofc-shop.ofc-form--locked .ofc-stripe-element,
.ofc-shop .ofc-form--locked .ofc-stripe-element,
.ofc-shop.ofc-form--locked .ofc-inline-capture,
.ofc-shop .ofc-form--locked .ofc-inline-capture { opacity: 0.42; }

/* Payment in flight, at page level: the two controls that would
   navigate away are dimmed and inert, so the page can't do the thing
   the lock strip is warning against.
   BUILD: also remove the wordmark's href and set inert on both. */
.ofc-shop.ofc-paying .ofc-back,
.ofc-shop .ofc-paying .ofc-back,
.ofc-shop.ofc-paying .ofc-wordmark,
.ofc-shop .ofc-paying .ofc-wordmark { opacity: 0.42; pointer-events: none; }

/* Processing button */
.ofc-shop.ofc-btn--processing,
.ofc-shop .ofc-btn--processing { background: var(--ofc-green-press); cursor: default; }
.ofc-shop.ofc-btn:disabled,
.ofc-shop .ofc-btn:disabled { cursor: default; }

/* Status block - what is happening, and how long it takes */
.ofc-shop.ofc-status,
.ofc-shop .ofc-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px var(--ofc-s4);
  background: var(--ofc-canvas);
  border: 1px solid var(--ofc-border-strong);
  border-radius: var(--ofc-r-btn);
}
.ofc-shop.ofc-status .ofc-spinner,
.ofc-shop .ofc-status .ofc-spinner { margin-top: 2px; }
.ofc-shop.ofc-status-text,
.ofc-shop .ofc-status-text { display: flex; flex-direction: column; gap: var(--ofc-s1); }
.ofc-shop.ofc-status-line,
.ofc-shop .ofc-status-line { font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-status-sub,
.ofc-shop .ofc-status-sub { font: var(--ofc-text-note); color: var(--ofc-ink-2); }
.ofc-shop.ofc-status-sub strong,
.ofc-shop .ofc-status-sub strong { color: var(--ofc-ink); font-weight: 600; font-feature-settings: "tnum" 1; }

/* ---- Bank authentication (3D Secure) ----
   We never design the bank's screen: Stripe renders the bank's own
   iframe and it cannot be styled or controlled. This is only our page
   around it - messaging above and below, checkout dimmed behind. */
.ofc-shop.ofc-3ds,
.ofc-shop .ofc-3ds { position: fixed; inset: 0; z-index: var(--ofc-z-overlay); display: flex; }
.ofc-shop.ofc-3ds-scrim,
.ofc-shop .ofc-3ds-scrim { position: absolute; inset: 0; background: var(--ofc-scrim-deep); }
.ofc-shop.ofc-3ds-inner,
.ofc-shop .ofc-3ds-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: var(--ofc-s4);
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s3);
  max-height: 100%;
  overflow-y: auto;
}
.ofc-shop.ofc-3ds-top,
.ofc-shop .ofc-3ds-top,
.ofc-shop.ofc-3ds-bottom,
.ofc-shop .ofc-3ds-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s2);
  text-align: center;
  background: var(--ofc-band);
  border-radius: var(--ofc-r-card);
  padding: var(--ofc-s4) var(--ofc-s4);
}
.ofc-shop.ofc-3ds-label,
.ofc-shop .ofc-3ds-label { font: var(--ofc-text-label); letter-spacing: var(--ofc-track-wide); color: var(--ofc-on-dark); }
.ofc-shop.ofc-3ds-title,
.ofc-shop .ofc-3ds-title { font: var(--ofc-text-title); font-size: 21px; color: var(--ofc-on-dark); text-wrap: balance; }
.ofc-shop.ofc-3ds-sub,
.ofc-shop .ofc-3ds-sub { font: var(--ofc-text-sub); color: var(--ofc-on-dark); }
.ofc-shop.ofc-3ds-note,
.ofc-shop .ofc-3ds-note { font: var(--ofc-text-note); color: var(--ofc-on-dark); }
.ofc-shop.ofc-expect,
.ofc-shop .ofc-expect {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--ofc-s1) 0 var(--ofc-s2);
  text-align: left;
}
.ofc-shop.ofc-expect li,
.ofc-shop .ofc-expect li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--ofc-s4);
  border: 1px solid var(--ofc-on-dark-line);
  border-radius: var(--ofc-r-btn);
  font: var(--ofc-text-sub);
  color: var(--ofc-on-dark);
}
.ofc-shop.ofc-expect li::before,
.ofc-shop .ofc-expect li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ofc-on-dark-dim);
}
/* Placeholder for Stripe's bank iframe - deliberately not styled like
   our UI, so nobody mistakes it for something we can design. */
.ofc-shop.ofc-bankframe,
.ofc-shop .ofc-bankframe {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ofc-s2);
  padding: var(--ofc-s5);
  background: var(--ofc-white);
  border: 2px dashed var(--ofc-border-strong);
  border-radius: var(--ofc-r-card);
}
.ofc-shop.ofc-bankframe-mark,
.ofc-shop .ofc-bankframe-mark { font: var(--ofc-text-label); letter-spacing: var(--ofc-track-label); color: var(--ofc-ink-3); text-align: center; }
.ofc-shop.ofc-bankframe-note,
.ofc-shop .ofc-bankframe-note { font: var(--ofc-text-note); color: var(--ofc-ink-faint); text-align: center; max-width: 340px; }
@media (min-width: 768px) {
  .ofc-shop.ofc-3ds-title,
.ofc-shop .ofc-3ds-title { font: var(--ofc-text-title-lg); font-size: 28px; }
  .ofc-shop.ofc-3ds-top,
.ofc-shop .ofc-3ds-top,
.ofc-shop.ofc-3ds-bottom,
.ofc-shop .ofc-3ds-bottom { padding: var(--ofc-s5); }
  .ofc-shop.ofc-bankframe,
.ofc-shop .ofc-bankframe { min-height: 300px; }
}

/* ---- Returning from a full-page bank redirect ---- */
.ofc-shop.ofc-container--narrow,
.ofc-shop .ofc-container--narrow { max-width: 560px; }
.ofc-shop.ofc-return,
.ofc-shop .ofc-return {
  background: var(--ofc-white);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-card);
  padding: var(--ofc-s6) var(--ofc-s4) var(--ofc-s5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ofc-s3);
  text-align: center;
}
@media (min-width: 768px) { .ofc-shop.ofc-return,
.ofc-shop .ofc-return { padding: var(--ofc-s10) var(--ofc-s8) var(--ofc-s6); } }
.ofc-shop.ofc-return-title,
.ofc-shop .ofc-return-title { font: var(--ofc-text-title); color: var(--ofc-ink); margin-top: var(--ofc-s2); text-wrap: balance; }
.ofc-shop.ofc-return-body,
.ofc-shop .ofc-return-body { font: var(--ofc-text-body); color: var(--ofc-ink-2); max-width: 40ch; }
.ofc-shop.ofc-return-order,
.ofc-shop .ofc-return-order {
  width: 100%;
  text-align: left;
  background: var(--ofc-canvas);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-btn);
  padding: 14px var(--ofc-s4);
  margin: var(--ofc-s2) 0;
}
.ofc-shop.ofc-return-note,
.ofc-shop .ofc-return-note { font: var(--ofc-text-note); color: var(--ofc-ink-3); max-width: 44ch; }
.ofc-shop.ofc-annot-note,
.ofc-shop .ofc-annot-note {
  font: var(--ofc-text-annot);
  letter-spacing: var(--ofc-track-label);
  color: var(--ofc-ink-faint);
  margin-top: var(--ofc-s5);
  text-align: center;
}

/* ---- Recovery alerts: failed, cancelled, timed out, declined ----
   Every one of them says no money has been taken, gives the reason
   where the bank supplies one, and offers exactly one way forward. */
.ofc-shop.ofc-alert,
.ofc-shop .ofc-alert {
  border-radius: var(--ofc-r-card);
  padding: var(--ofc-s5) var(--ofc-s4);
  margin: 0 0 var(--ofc-s5);
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s2);
}
@media (min-width: 768px) { .ofc-shop.ofc-alert,
.ofc-shop .ofc-alert { padding: var(--ofc-s5); } }
.ofc-shop.ofc-alert--critical,
.ofc-shop .ofc-alert--critical { background: var(--ofc-critical-bg); border: 1px solid var(--ofc-critical-border); }
.ofc-shop.ofc-alert--soft,
.ofc-shop .ofc-alert--soft { background: var(--ofc-white); border: 1px solid var(--ofc-border-strong); }
.ofc-shop.ofc-alert-label,
.ofc-shop .ofc-alert-label { font: var(--ofc-text-label); letter-spacing: var(--ofc-track-wide); color: var(--ofc-ink-3); }
.ofc-shop.ofc-alert--critical .ofc-alert-label,
.ofc-shop .ofc-alert--critical .ofc-alert-label { color: var(--ofc-critical); }
.ofc-shop.ofc-alert-title,
.ofc-shop .ofc-alert-title { font: 600 19px/1.3 var(--ofc-font-sans); color: var(--ofc-ink); text-wrap: balance; }
.ofc-shop.ofc-alert-body,
.ofc-shop .ofc-alert-body { font: var(--ofc-text-sub); color: var(--ofc-ink-2); max-width: 62ch; }
.ofc-shop.ofc-alert-body strong,
.ofc-shop .ofc-alert-body strong { color: var(--ofc-ink); font-weight: 600; }
.ofc-shop.ofc-alert-body span[data-field],
.ofc-shop .ofc-alert-body span[data-field] { color: var(--ofc-ink); font-weight: 600; }
.ofc-shop.ofc-alert-action,
.ofc-shop .ofc-alert-action {
  align-self: flex-start;
  margin-top: var(--ofc-s2);
  min-height: var(--ofc-touch);
  display: inline-flex;
  align-items: center;
  font: 600 16px/1 var(--ofc-font-sans);
  color: var(--ofc-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ofc-shop.ofc-alert-annot,
.ofc-shop .ofc-alert-annot {
  font: var(--ofc-text-annot);
  letter-spacing: var(--ofc-track-label);
  color: var(--ofc-ink-faint);
  border-top: 1px solid var(--ofc-hairline);
  padding-top: var(--ofc-s3);
  margin-top: var(--ofc-s1);
}
.ofc-shop.ofc-stripe-element--error,
.ofc-shop .ofc-stripe-element--error { border-color: var(--ofc-critical); }


/* =============================================================
   S5 THANK-YOU - the engagement moment, not a receipt
   ============================================================= */
.ofc-shop.ofc-container--letter,
.ofc-shop .ofc-container--letter { max-width: 780px; }
.ofc-shop.ofc-page-stack,
.ofc-shop .ofc-page-stack { display: flex; flex-direction: column; gap: var(--ofc-s5); }
@media (min-width: 768px) { .ofc-shop.ofc-page-stack,
.ofc-shop .ofc-page-stack { gap: var(--ofc-s6); } }

/* Confirmation eyebrow */
.ofc-shop.ofc-confirm,
.ofc-shop .ofc-confirm { display: flex; align-items: center; gap: 10px; margin-bottom: var(--ofc-s3); }
.ofc-shop.ofc-confirm svg,
.ofc-shop .ofc-confirm svg { flex: none; color: var(--ofc-success); }
.ofc-shop.ofc-confirm-text,
.ofc-shop .ofc-confirm-text { font: var(--ofc-text-label); letter-spacing: var(--ofc-track-wide); color: var(--ofc-ink-2); }
.ofc-shop.ofc-confirm-text strong,
.ofc-shop .ofc-confirm-text strong { color: var(--ofc-ink); font-weight: 700; }

/* Section heads down the page */
.ofc-shop.ofc-section-head,
.ofc-shop .ofc-section-head { font: 600 18px/1.3 var(--ofc-font-sans); color: var(--ofc-ink); margin-bottom: var(--ofc-s3); }
.ofc-shop.ofc-section-sub,
.ofc-shop .ofc-section-sub { font: var(--ofc-text-sub); color: var(--ofc-ink-2); margin-bottom: var(--ofc-s4); }

/* ---- Oakley's letter: the emotional centre of the page ---- */
.ofc-shop.ofc-letter,
.ofc-shop .ofc-letter {
  background: var(--ofc-white);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-card);
  padding: var(--ofc-s6) var(--ofc-s5);
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s4);
}
@media (min-width: 768px) { .ofc-shop.ofc-letter,
.ofc-shop .ofc-letter { padding: var(--ofc-s10) var(--ofc-s10) var(--ofc-s8); } }
.ofc-shop.ofc-letter-greeting,
.ofc-shop .ofc-letter-greeting { font: var(--ofc-text-title); font-size: 22px; color: var(--ofc-ink); }
@media (min-width: 768px) { .ofc-shop.ofc-letter-greeting,
.ofc-shop .ofc-letter-greeting { font-size: 26px; } }
.ofc-shop.ofc-letter-body,
.ofc-shop .ofc-letter-body { display: flex; flex-direction: column; gap: var(--ofc-s4); }
.ofc-shop.ofc-letter-body p,
.ofc-shop .ofc-letter-body p { font: 400 17px/1.7 var(--ofc-font-sans); color: var(--ofc-ink-2); max-width: 60ch; }
.ofc-shop.ofc-letter-body p strong,
.ofc-shop .ofc-letter-body p strong { color: var(--ofc-ink); font-weight: 600; }
.ofc-shop.ofc-letter--light .ofc-letter-body p,
.ofc-shop .ofc-letter--light .ofc-letter-body p { font: var(--ofc-text-body); }
.ofc-shop.ofc-letter-sign,
.ofc-shop .ofc-letter-sign {
  display: flex;
  align-items: center;
  gap: var(--ofc-s4);
  border-top: 1px solid var(--ofc-hairline);
  padding-top: var(--ofc-s4);
  margin-top: var(--ofc-s1);
}
.ofc-shop.ofc-avatar,
.ofc-shop .ofc-avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ofc-canvas);
  border: 1px dashed var(--ofc-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 600 7.5px/1.3 var(--ofc-font-mono);
  letter-spacing: 0.06em;
  color: var(--ofc-ink-faint);
  padding: 6px;
}
.ofc-shop.ofc-sign-name,
.ofc-shop .ofc-sign-name { display: block; font: 600 16px/1.3 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-sign-role,
.ofc-shop .ofc-sign-role { display: block; font: var(--ofc-text-note); color: var(--ofc-ink-3); margin-top: 2px; }

/* ---- Money line on the order card ---- */
.ofc-shop.ofc-money,
.ofc-shop .ofc-money {
  border-top: 1px solid var(--ofc-hairline);
  padding: var(--ofc-s4);
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s2);
}
@media (min-width: 768px) { .ofc-shop.ofc-money,
.ofc-shop .ofc-money { padding: var(--ofc-s4) var(--ofc-s5) var(--ofc-s5); } }
.ofc-shop.ofc-money-row,
.ofc-shop .ofc-money-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ofc-s3); }
.ofc-shop.ofc-money-label,
.ofc-shop .ofc-money-label { display: flex; align-items: center; gap: 10px; font: 600 16px/1.3 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-money-value,
.ofc-shop .ofc-money-value { font: var(--ofc-text-title); font-size: 22px; color: var(--ofc-ink); font-feature-settings: "tnum" 1; white-space: nowrap; }
.ofc-shop.ofc-money-note,
.ofc-shop .ofc-money-note { font: var(--ofc-text-note); color: var(--ofc-ink-2); max-width: 62ch; }
.ofc-shop.ofc-money-note strong,
.ofc-shop .ofc-money-note strong { color: var(--ofc-ink); font-weight: 600; font-feature-settings: "tnum" 1; }
.ofc-shop.ofc-money--est .ofc-money-value,
.ofc-shop .ofc-money--est .ofc-money-value { color: var(--ofc-est); }

/* ---- This week on the farm ---- */
.ofc-shop.ofc-video,
.ofc-shop .ofc-video {
  background: var(--ofc-white);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-card);
  overflow: hidden;
}
.ofc-shop.ofc-video-frame,
.ofc-shop .ofc-video-frame {
  aspect-ratio: 16 / 9;
  background: var(--ofc-band);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ofc-s2);
  padding: var(--ofc-s5);
  text-align: center;
}
.ofc-shop.ofc-video-mark,
.ofc-shop .ofc-video-mark { display: block; font: var(--ofc-text-label); letter-spacing: var(--ofc-track-label); color: var(--ofc-on-dark); }
.ofc-shop.ofc-video-note,
.ofc-shop .ofc-video-note { display: block; font: var(--ofc-text-note); color: var(--ofc-on-dark-dim); max-width: 42ch; }
.ofc-shop.ofc-video-play,
.ofc-shop .ofc-video-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--ofc-on-dark-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ofc-on-dark);
  margin-bottom: var(--ofc-s1);
}
.ofc-shop.ofc-video-foot,
.ofc-shop .ofc-video-foot {
  padding: var(--ofc-s4);
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s3);
}
@media (min-width: 768px) {
  .ofc-shop.ofc-video-foot,
.ofc-shop .ofc-video-foot { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--ofc-s4) var(--ofc-s5); }
  .ofc-shop.ofc-video-foot .ofc-btn,
.ofc-shop .ofc-video-foot .ofc-btn { width: auto; padding: 0 var(--ofc-s5); }
}
.ofc-shop.ofc-video-title,
.ofc-shop .ofc-video-title { display: block; font: 600 16px/1.35 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-video-sub,
.ofc-shop .ofc-video-sub { display: block; font: var(--ofc-text-note); color: var(--ofc-ink-3); margin-top: 2px; }

/* ---- Follow the farm ---- */
.ofc-shop.ofc-socials,
.ofc-shop .ofc-socials { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ofc-s3); }
@media (min-width: 768px) { .ofc-shop.ofc-socials,
.ofc-shop .ofc-socials { grid-template-columns: repeat(4, 1fr); } }
.ofc-shop.ofc-social,
.ofc-shop .ofc-social {
  display: flex;
  align-items: center;
  gap: var(--ofc-s3);
  min-height: var(--ofc-touch);
  padding: 14px var(--ofc-s4);
  background: var(--ofc-white);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-btn);
  color: var(--ofc-ink);
  text-decoration: none;
  font: 600 14px/1.3 var(--ofc-font-sans);
  transition: border-color var(--ofc-dur) var(--ofc-ease), background var(--ofc-dur) var(--ofc-ease);
}
@media (hover: hover) { .ofc-shop.ofc-social:hover,
.ofc-shop .ofc-social:hover { border-color: var(--ofc-ink-faint); background: var(--ofc-canvas); color: var(--ofc-ink); } }
.ofc-shop.ofc-social svg,
.ofc-shop .ofc-social svg { flex: none; color: var(--ofc-ink-2); }
.ofc-shop.ofc-newsletter,
.ofc-shop .ofc-newsletter {
  margin-top: var(--ofc-s3);
  background: var(--ofc-white);
  border: 1px solid var(--ofc-border);
  border-radius: var(--ofc-r-btn);
  padding: var(--ofc-s4);
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s3);
}
@media (min-width: 768px) { .ofc-shop.ofc-newsletter,
.ofc-shop .ofc-newsletter { padding: var(--ofc-s5); } }
.ofc-shop.ofc-newsletter-title,
.ofc-shop .ofc-newsletter-title { display: block; font: 600 16px/1.35 var(--ofc-font-sans); color: var(--ofc-ink); }
.ofc-shop.ofc-newsletter-sub,
.ofc-shop .ofc-newsletter-sub { display: block; font: var(--ofc-text-note); color: var(--ofc-ink-3); margin-top: 2px; }

/* ---- Basket remainder nudge ---- */
.ofc-shop.ofc-nudge,
.ofc-shop .ofc-nudge { background: var(--ofc-white); border: 1px solid var(--ofc-border-strong); border-radius: var(--ofc-r-card); overflow: hidden; }
.ofc-shop.ofc-nudge-body,
.ofc-shop .ofc-nudge-body { padding: var(--ofc-s4); display: flex; flex-direction: column; gap: var(--ofc-s3); }
@media (min-width: 768px) { .ofc-shop.ofc-nudge-body,
.ofc-shop .ofc-nudge-body { padding: var(--ofc-s5); } }
.ofc-shop.ofc-nudge-lead,
.ofc-shop .ofc-nudge-lead { font: var(--ofc-text-sub); color: var(--ofc-ink-2); }
@media (min-width: 768px) { .ofc-shop.ofc-nudge-body .ofc-btn,
.ofc-shop .ofc-nudge-body .ofc-btn { width: auto; align-self: flex-start; padding: 0 var(--ofc-s6); } }

/* ---- Collection details ---- */
.ofc-shop.ofc-detail-grid,
.ofc-shop .ofc-detail-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 480px) { .ofc-shop.ofc-detail-grid,
.ofc-shop .ofc-detail-grid { grid-template-columns: 1fr 1fr; } }
.ofc-shop.ofc-form > .ofc-detail-grid:first-child > .ofc-detail,
.ofc-shop .ofc-form > .ofc-detail-grid:first-child > .ofc-detail { border-top: none; padding-top: 0; }
.ofc-shop.ofc-detail,
.ofc-shop .ofc-detail {
  padding: 14px var(--ofc-s4);
  border-top: 1px solid var(--ofc-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--ofc-s1);
}
@media (min-width: 768px) { .ofc-shop.ofc-detail,
.ofc-shop .ofc-detail { padding: var(--ofc-s4) var(--ofc-s5); } }
.ofc-shop.ofc-detail-label,
.ofc-shop .ofc-detail-label { display: block; font: var(--ofc-text-label); letter-spacing: var(--ofc-track-label); color: var(--ofc-ink-3); }
.ofc-shop.ofc-detail-value,
.ofc-shop .ofc-detail-value { display: block; font: 600 16px/1.4 var(--ofc-font-sans); color: var(--ofc-ink); font-feature-settings: "tnum" 1; }
.ofc-shop.ofc-detail-sub,
.ofc-shop .ofc-detail-sub { display: block; font: var(--ofc-text-note); color: var(--ofc-ink-3); }

/* ---- Event tickets: the deliverable is the event ---- */
.ofc-shop.ofc-event,
.ofc-shop .ofc-event { background: var(--ofc-band); border-radius: var(--ofc-r-card); padding: var(--ofc-s5) var(--ofc-s4); display: flex; flex-direction: column; gap: var(--ofc-s3); }
@media (min-width: 768px) { .ofc-shop.ofc-event,
.ofc-shop .ofc-event { padding: var(--ofc-s8); } }
.ofc-shop.ofc-event-label,
.ofc-shop .ofc-event-label { display: block; font: var(--ofc-text-label); letter-spacing: var(--ofc-track-wide); color: var(--ofc-on-dark-dim); }
.ofc-shop.ofc-event-name,
.ofc-shop .ofc-event-name { font: var(--ofc-text-title); color: var(--ofc-on-dark); text-wrap: balance; }
@media (min-width: 768px) { .ofc-shop.ofc-event-name,
.ofc-shop .ofc-event-name { font: var(--ofc-text-title-lg); } }
.ofc-shop.ofc-event-when,
.ofc-shop .ofc-event-when { display: flex; flex-wrap: wrap; gap: var(--ofc-s2) var(--ofc-s6); margin-top: var(--ofc-s1); }
.ofc-shop.ofc-event-when div,
.ofc-shop .ofc-event-when div { display: flex; flex-direction: column; gap: 2px; }
.ofc-shop.ofc-event-when .ofc-detail-label,
.ofc-shop .ofc-event-when .ofc-detail-label { color: var(--ofc-on-dark-dim); }
.ofc-shop.ofc-event-when .ofc-detail-value,
.ofc-shop .ofc-event-when .ofc-detail-value { color: var(--ofc-on-dark); }
.ofc-shop.ofc-event-note,
.ofc-shop .ofc-event-note {
  font: var(--ofc-text-sub);
  color: var(--ofc-on-dark);
  border-top: 1px solid var(--ofc-on-dark-line);
  padding-top: var(--ofc-s3);
  margin-top: var(--ofc-s1);
}

/* ---- Continue browsing ---- */
.ofc-shop.ofc-continue,
.ofc-shop .ofc-continue { display: flex; flex-direction: column; align-items: center; gap: var(--ofc-s3); padding: var(--ofc-s5) 0 0; text-align: center; }
@media (min-width: 768px) { .ofc-shop.ofc-continue .ofc-btn,
.ofc-shop .ofc-continue .ofc-btn { width: auto; padding: 0 var(--ofc-s8); } }
.ofc-shop.ofc-continue-links,
.ofc-shop .ofc-continue-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ofc-s2) var(--ofc-s5); }
.ofc-shop.ofc-continue-links a,
.ofc-shop .ofc-continue-links a { font: var(--ofc-text-note); color: var(--ofc-ink-3); }
@media (hover: hover) { .ofc-shop.ofc-continue-links a:hover,
.ofc-shop .ofc-continue-links a:hover { color: var(--ofc-ink); } }


/* ---- app additions (bin/build-shop-css.php) ---- */
.ofc-shop [hidden] { display: none !important; }
dialog.ofc-shop-modal,
.ofc-shop dialog.ofc-modal {
  border: 0; padding: 0; margin: 0; max-width: none; max-height: none;
  width: 100%; height: 100%; background: transparent; overflow: visible;
}
.ofc-shop dialog.ofc-modal::backdrop { background: var(--ofc-scrim, rgba(31,24,18,0.55)); }
.ofc-shop dialog.ofc-modal:not([open]) { display: none; }
.ofc-shop .ofc-video-frame { position: relative; }
.ofc-shop .ofc-video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.ofc-shop .ofc-header { display: block; }
.ofc-shop .ofc-header-inner {
  max-width: 1120px; margin: 0 auto; display: flex;
  align-items: center; justify-content: space-between; gap: var(--ofc-s3);
}
.ofc-shop .ofc-wordmark img { height: 34px; width: auto; display: block; }
.ofc-shop .ofc-swatch img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}