/*
 * Onshore Cellars storefront — the one global design system.
 *
 * The look is the live Shopify collection page (shopify-theme/sections/
 * algolia-collection.liquid, assets/onshore-branding.css), standardised: a
 * white header, navy announcement bar and footer, gold buttons, 8px cards
 * with a hover lift, Montserrat labels over Open Sans text.
 *
 * Rules (docs/STOREFRONT-STYLE.md has the long version):
 *  - Every value that carries meaning is a token in the :root block below.
 *    No hex colour appears anywhere else; tests/storefrontRender.test.js
 *    fails the build if one does.
 *  - Components are `sf-` classes, BEM-ish: .sf-card, .sf-card__name,
 *    .sf-card--soldout. Do not style bare elements outside the base section.
 *  - Fonts are loaded by <link> in the page head, not @import, so the
 *    stylesheet never blocks on a second request.
 */

:root {
  /* Colour */
  --oc-navy: #011638;
  --oc-navy-mid: #0B2550;
  --oc-gold: #C6904D;
  --oc-gold-hover: #B07D3C;
  --oc-gold-light: #D2A874;
  --oc-text: #1a1a1a;
  --oc-text-soft: #666;
  --oc-text-muted: #888;
  --oc-bg: #fff;
  --oc-bg-card: #fff;
  --oc-bg-subtle: #f8f8f8;
  --oc-bg-search: #f2f2f2;
  --oc-border: #f0f0f0;
  --oc-border-input: #d4d4d4;
  --oc-divider: #eee;
  --oc-sale: #ba4444;
  --oc-danger: #c0392b;
  --oc-success: #27ae60;
  --oc-white: #fff;
  --oc-on-navy-soft: rgba(255, 255, 255, 0.72);
  --oc-on-navy-line: rgba(255, 255, 255, 0.16);
  --oc-overlay: rgba(1, 22, 56, 0.72);
  --oc-on-navy-faint: rgba(255, 255, 255, 0.08);
  --oc-gold-bg: #faf3ea;

  /* Feedback tones. Each has a line (borders, icons), a tint (backgrounds)
     and an ink (text on that tint, chosen to clear 4.5:1). The base
     success/danger above stay as the brand's solid colours. */
  --oc-info: #2d6a9f;
  --oc-info-bg: #eaf2f9;
  --oc-info-ink: #1f4f78;
  --oc-success-bg: #e8f6ee;
  --oc-success-ink: #1b7a43;
  --oc-warning: #b7791f;
  --oc-warning-bg: #fdf3e1;
  --oc-warning-ink: #85570f;
  --oc-danger-bg: #fbeae8;
  --oc-danger-ink: #9f2a1f;

  /* Shape */
  --oc-radius-card: 8px;
  --oc-radius-button: 6px;
  --oc-radius-input: 4px;
  --oc-radius-control: 999px;
  --oc-radius-pill: var(--oc-radius-control);
  --oc-radius-bubble: 14px;
  --oc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --oc-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.10);
  --oc-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
  --oc-transition: 0.25s ease;
  --oc-focus-ring: 2px solid var(--oc-gold);

  /* Type. Live theme (config/settings_data.json): headings Montserrat 300
     (type_header_font_family montserrat_n3) uppercase, body Open Sans 400 at
     16px / 1.5 (open_sans_n4); assets/onshore-branding.css then sets navigation,
     labels and card titles in Montserrat 600/700 at 13px with 0.04em tracking
     and dropdown links in Open Sans 500. Weights are tokens so the five
     weights the site loads (shell.js FONTS_HREF) are named once. */
  --oc-font-heading: 'Montserrat', 'Montserrat Fallback', 'Helvetica Neue', Arial, sans-serif;
  --oc-font-body: 'Open Sans', 'Open Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --oc-text-xs: 0.6875rem;
  --oc-text-label: 0.75rem;
  --oc-text-sm: 0.8125rem;
  --oc-text-md: 0.9375rem;
  --oc-text-base: 1rem;
  --oc-text-lg: 1.125rem;
  --oc-text-xl: 1.5rem;
  --oc-text-2xl: 2rem;
  --oc-text-3xl: 2.75rem;
  --oc-tracking: 0.04em;
  --oc-tracking-wide: 0.08em;
  --oc-weight-light: 300;
  --oc-weight-regular: 400;
  --oc-weight-medium: 500;
  --oc-weight-semibold: 600;
  --oc-weight-bold: 700;
  --oc-nav-size: 1rem;
  --oc-nav-weight: var(--oc-weight-light);
  --oc-nav-tracking: 0;

  /* Display type, measured on the live site (docs/STOREFRONT-STYLE.md "Display
     type"). The live theme derives every heading from one size (typeHeaderSize
     50px) times a multiplier, and drops the sizes on a phone; each is its own
     token here so one edit moves every page that draws that kind of heading.
     The phone values are in the max-width 768px block below. */
  --oc-heading-leading: 1;
  --oc-h1-size: 50px;
  --oc-h2-size: 42.5px;
  --oc-h3-size: 35px;
  --oc-h2-weight: var(--oc-weight-light);
  --oc-card-title-size: 28px;
  --oc-ratio-portrait: 2 / 3;
  --oc-title-size: 36px;
  --oc-title-weight: var(--oc-weight-bold);
  --oc-title-tracking: 0.02em;
  --oc-title-product-size: 22px;
  --oc-title-product-tracking: -0.01em;
  --oc-hero-title-size: 60px;
  --oc-hero-title-tracking: -0.01em;
  --oc-footer-size: var(--oc-text-md);
  --oc-footer-col: 186px;
  --oc-text-input: 1rem;

  /* Buttons: the live pill, 13px caps (the type is on .sf-btn). */
  --oc-btn-radius: var(--oc-radius-control);
  --oc-btn-padding: 13px 25px;

  /* Every item image is a bottle shot on a square canvas, so every container
     that shows a product picture takes this ratio and object-fit: contain and
     never crops. The well is the live cards' #f8f8f8. */
  --oc-product-media-ratio: 1 / 1;
  --oc-product-media-bg: var(--oc-bg-subtle);

  /* Layout */
  --oc-page-width: 1500px;
  /* How much of a wide screen (1200px and up) the content column may take
     (owner 2026-10-16: "make the pages 4/5ths or something under banner").
     Banners and full-bleed bands ignore it; below 1200px .sf-page is full width
     less the gutters. */
  --oc-page-fraction: 80vw;
  --oc-prose-width: 880px;                   /* the reading column; owner 2026-10-16: "a little wider" (was 760px) */
  --oc-page-narrow: 700px;
  --oc-gallery-sticky-top: 12rem;
  --oc-gutter: 40px;
  --oc-grid-gap: 22px;
  --oc-section-pad: 60px;
  --oc-announce-height: 32px;
  --oc-sidebar-width: 240px;
  --oc-control-height: 44px;
  --oc-summary-width: 380px;
  --oc-dialog-width: 520px;
  --oc-drawer-width: 420px;
  --oc-menu-drawer-width: 380px;
  --oc-mega-col-min: 8.25rem;
  --oc-menu-slots: 6;
  --oc-menu-lead: 5;
  --oc-menu-caption-height: 5.5rem;
  --oc-logo-width-desktop: 160px;
  --oc-logo-width-mobile: 140px;
  --oc-chat-width: 380px;
  --oc-chat-height: 600px;
  --oc-ribbon-height: 28px;
  --oc-space-1: 4px;
  --oc-space-2: 8px;
  --oc-space-3: 12px;
  --oc-space-4: 16px;
  --oc-space-5: 24px;
  --oc-space-6: 32px;
  --oc-space-7: 48px;
  --oc-space-8: 64px;
  --oc-z-sticky: 40;
  --oc-z-header: 50;
  --oc-z-popover: 60;
  --oc-z-suggest: 70; /* the header search panel: above the nav dropdowns (popover) while it is open */
  --oc-z-chat: 900;
  --oc-z-overlay: 1000;
  --oc-z-ribbon: 1100;
  --oc-z-toast: 1200;
}

/* A phone, at the live theme's own break (769px up is a desktop): the base type
   steps down to 14px and every heading, gutter and gap tightens. The one
   responsive token block, so no other rule restates a phone size. */
@media (max-width: 768px) {
  :root {
    --oc-gutter: 17px;
    --oc-grid-gap: 16px;
    --oc-section-pad: 40px;
    --oc-text-base: 0.875rem;
    --oc-footer-size: var(--oc-text-sm);
    --oc-btn-padding: 9px 25px;
    --oc-h1-size: 42.5px;
    --oc-h2-size: 31.5px;
    --oc-h3-size: 28.5px;
    --oc-title-size: 22px;
    --oc-title-product-size: 19px;
    --oc-hero-title-size: 25.8px;
  }
}

/* ------------------------------------------------------------ font fallbacks */

/* The web fonts load from Google with display=swap, so the first paint is in the
   system sans and the page is re-laid-out when Montserrat / Open Sans arrive.
   Arial is about 3% narrower than Montserrat in capitals (the header navigation,
   labels and headings are all capitals) and about 5% narrower than Open Sans, so
   the swap widened the navigation row past its container, wrapped "Training" to a
   second line and pushed the whole page down 48px: a desktop CLS of 0.57 on every
   page. These faces are Arial scaled to the web font's measured widths (capitals
   for Montserrat, running text for Open Sans) with its line metrics, so the
   swap changes the glyph shapes and next to nothing of the layout. */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica'), local('Arimo');
  size-adjust: 103%;
  ascent-override: 94%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Open Sans Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica'), local('Arimo');
  size-adjust: 105.5%;
  ascent-override: 101.3%;
  descent-override: 27.8%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------ base */

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

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

body {
  margin: 0;
  /* Last guard against sideways panning on phones: content wider than the screen is
     cut, not scrolled to. clip (not hidden) keeps position: sticky working. */
  overflow-x: clip;
  font-family: var(--oc-font-body);
  font-size: var(--oc-text-base);
  line-height: 1.5;
  color: var(--oc-text);
  background: var(--oc-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.sf-site { display: flex; flex-direction: column; min-height: 100vh; }
.sf-main { flex: 1 0 auto; min-width: 0; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

/* Several components set `display` (flex, grid) on the element they style,
   and an author display rule beats the UA's [hidden] one, so a hidden chat
   panel or error message would stay on screen. This is the one place that
   !important is the right tool: `hidden` must always win. */
[hidden] { display: none !important; }

/* THE BARE ELEMENT RULES STOP AT AN APP EMBED. A script served by the staff app
   (the Monaco Yacht Show story, the feedback forms) paints markup written to be
   styled by ITSELF: the story's hero sets white on .hero and lets its h1
   inherit it, which a rule aimed straight at `h1` beats whatever the inherited
   value is, so the title came out navy on a navy photo. Outside the band these
   rules are exactly what they were. `:where()` keeps the exclusion at no
   specificity, so these still lose to every class rule as before. */
h1:not(:where(.sf-app-embed *)), h2:not(:where(.sf-app-embed *)), h3:not(:where(.sf-app-embed *)), h4:not(:where(.sf-app-embed *)) {
  margin: 0 0 var(--oc-space-3);
  font-family: var(--oc-font-heading);
  line-height: 1.25;
  color: var(--oc-navy);
}

p:not(:where(.sf-app-embed *)) { margin: 0 0 var(--oc-space-4); }

a:not(:where(.sf-app-embed *)) { color: var(--oc-navy); text-decoration-color: var(--oc-gold); text-underline-offset: 3px; }
a:not(:where(.sf-app-embed *)):hover { color: var(--oc-gold-hover); }

:focus-visible { outline: var(--oc-focus-ring); outline-offset: 2px; }

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

.sf-skip {
  position: absolute;
  left: var(--oc-space-4);
  top: -100px;
  z-index: var(--oc-z-overlay);
  padding: var(--oc-space-2) var(--oc-space-4);
  background: var(--oc-navy);
  color: var(--oc-white);
  border-radius: var(--oc-radius-control);
}
.sf-skip:focus { top: var(--oc-space-2); color: var(--oc-white); }

.sf-muted { color: var(--oc-text-soft); }

/* The page title: every h1 a page draws, an article's included (its layout is
   its own, the type is this). Live: Montserrat 700 caps, 36px, 22px on a phone. */
.sf-title {
  margin-bottom: var(--oc-space-5);
  font-size: var(--oc-title-size);
  font-weight: var(--oc-title-weight);
  line-height: var(--oc-heading-leading);
  text-transform: uppercase;
  letter-spacing: var(--oc-title-tracking);
}
.sf-title--product {
  margin-bottom: var(--oc-space-2);
  font-size: var(--oc-title-product-size);
  letter-spacing: var(--oc-title-product-tracking);
}

/* ---------------------------------------------------------------- layout */

.sf-page {
  width: 100%;
  max-width: var(--oc-page-width);
  margin: 0 auto;
  padding-left: var(--oc-gutter);
  padding-right: var(--oc-gutter);
}
@media (min-width: 1200px) {
  .sf-page { max-width: min(var(--oc-page-width), var(--oc-page-fraction)); }
}
.sf-section { padding-top: var(--oc-section-pad); padding-bottom: var(--oc-section-pad); }
.sf-narrow { max-width: var(--oc-prose-width); }

.sf-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--oc-space-4);
  margin-bottom: var(--oc-space-5);
}
.sf-section__title {
  margin: 0;
  font-size: var(--oc-h2-size);
  font-weight: var(--oc-h2-weight);
  line-height: var(--oc-heading-leading);
  text-transform: uppercase;
}
.sf-section__more {
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-gold-hover);
  white-space: nowrap;
}

/* --------------------------------------------------------------- buttons */

.sf-btn {
  display: inline-flex;
  min-height: var(--oc-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-2);
  padding: var(--oc-btn-padding);
  border: 1px solid var(--oc-gold);
  border-radius: var(--oc-btn-radius);
  background: var(--oc-gold);
  color: var(--oc-white);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  cursor: pointer;
  transition: background var(--oc-transition), border-color var(--oc-transition), color var(--oc-transition);
}
.sf-btn:hover { background: var(--oc-gold-hover); border-color: var(--oc-gold-hover); color: var(--oc-white); }
.sf-btn:disabled, .sf-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.sf-btn--secondary { background: transparent; border-color: var(--oc-navy); color: var(--oc-navy); }
.sf-btn--secondary:hover { background: var(--oc-navy); border-color: var(--oc-navy); color: var(--oc-white); }
.sf-btn--navy { background: var(--oc-navy); border-color: var(--oc-navy); }
.sf-btn--navy:hover { background: var(--oc-navy-mid); border-color: var(--oc-navy-mid); }
.sf-btn--on-dark { background: transparent; border-color: var(--oc-white); color: var(--oc-white); }
.sf-btn--on-dark:hover { background: var(--oc-white); border-color: var(--oc-white); color: var(--oc-navy); }
.sf-btn--sm { min-height: 36px; padding: var(--oc-space-2) var(--oc-space-4); font-size: var(--oc-text-xs); }
.sf-btn--block { display: flex; width: 100%; }

.sf-link-btn {
  padding: var(--oc-space-1) 0;
  border: 0;
  background: none;
  color: var(--oc-text-soft);
  font: inherit;
  font-size: var(--oc-text-sm);
  text-decoration: underline;
  text-decoration-color: var(--oc-gold);
  text-underline-offset: 3px;
  cursor: pointer;
}
.sf-link-btn:hover { color: var(--oc-sale); }

/* ----------------------------------------------------------------- forms */

.sf-input, .sf-select, .sf-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--oc-space-2) var(--oc-space-3);
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-control);
  background: var(--oc-bg);
  color: var(--oc-text);
  font-family: var(--oc-font-body);
  font-size: var(--oc-text-md);
  accent-color: var(--oc-navy);
  transition: border-color var(--oc-transition), box-shadow var(--oc-transition);
}
/* PHONES: 16px in every field. iPhone Safari ZOOMS INTO a field whose text is under
   16px when it is tapped, and the zoomed page then slides left and right while the
   customer types (rehearsal 2026-10-19, the checkout "wobble"). Shopify's checkout is
   16px on phones for the same reason. --oc-text-input is that 16px. */
@media (max-width: 820px), (pointer: coarse) {
  .sf-input, .sf-select, .sf-textarea { font-size: var(--oc-text-input); }
}
.sf-input:focus, .sf-select:focus, .sf-textarea:focus { outline: var(--oc-focus-ring); outline-offset: 0; border-color: var(--oc-gold); }
.sf-input--qty { width: 72px; text-align: center; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--oc-navy); }

.sf-field { display: flex; flex-direction: column; gap: var(--oc-space-1); margin-bottom: var(--oc-space-4); }
.sf-field__label {
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-text-soft);
}

/* ── header & footer ── */
/* The announcement bar, header, navigation, mobile drawer and footer, from the
   live theme's header-group.json / footer-group.json with
   assets/onshore-branding.css on top (docs/STOREFRONT-STYLE.md). Markup:
   lib/storefront/nav.js. Behaviour: storefront/assets/nav.js, which only adds
   to <details> that already work; `.sf-js` on <html> is how this sheet knows
   the script ran. Mobile first: the base rules are the phone, the min-width
   queries are the desktop, and the live theme's own break (768/769) is kept. */

/* announcement bar: navy, Montserrat 12px/600, ONE line at --oc-announce-height
   (live: 32px on every width). The phone leads on the left; the social icons and
   the two compact dropdowns, language and "Prices for", sit on the right. On a
   phone the wine-list link and the socials step aside so nothing wraps. */
.sf-announce {
  position: relative;
  z-index: var(--oc-z-popover);
  background: var(--oc-navy);
  color: var(--oc-white);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-label);
  font-weight: var(--oc-weight-semibold);
  letter-spacing: var(--oc-tracking);
}
.sf-announce__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--oc-space-4);
  height: var(--oc-announce-height);
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}
.sf-announce__phone { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-announce__social { display: flex; align-items: center; gap: var(--oc-space-3); margin: 0 0 0 auto; padding: 0; list-style: none; }
.sf-announce__social-link { display: inline-flex; align-items: center; color: var(--oc-on-navy-soft); text-decoration: none; }
.sf-announce .sf-announce__social-link:hover { color: var(--oc-white); }
.sf-announce__social-link .sf-glyph { width: 16px; height: 16px; }
.sf-announce a { color: var(--oc-gold-light); text-decoration-color: var(--oc-gold-light); text-underline-offset: 3px; }
.sf-announce a:hover { color: var(--oc-white); }
.sf-announce__sep { color: var(--oc-on-navy-soft); }

/* Language and "Prices for": two compact dropdowns (nav.js switcherHtml). A
   language list is never drawn inline. The language control shows the language
   name and, on a phone, its two-letter code; the price control names the country
   the page is priced for. Both open a white panel; on a phone the panel spans
   the bar instead of hanging off a small button near the screen edge. */
.sf-switcher {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 var(--oc-space-1);
  margin-left: auto;
}
.sf-announce__social + .sf-switcher { margin-left: 0; }
.sf-switcher__langs, .sf-switcher__prices { margin: 0; }
.sf-switcher__list, .sf-switcher__countries { margin: 0; padding: 0; list-style: none; }
.sf-switcher__list { display: flex; flex-direction: column; }
.sf-switcher__code { display: none; }

/* Compact: bare text and a chevron like the live bar, no pill, so two of them
   fit the 32px line. */
.sf-switcher .sf-dropdown__toggle {
  min-height: calc(var(--oc-announce-height) - var(--oc-space-2));
  gap: var(--oc-space-2);
  padding: 0 var(--oc-space-2);
  border-color: transparent;
  border-radius: var(--oc-radius-control);
  background: none;
  color: var(--oc-white);
  font-size: var(--oc-text-sm);
  white-space: nowrap;
  transition: background var(--oc-transition), border-color var(--oc-transition);
}
.sf-switcher .sf-dropdown__toggle:hover { background: var(--oc-on-navy-faint); }
.sf-switcher .sf-dropdown__toggle::after { border-color: currentColor; }
.sf-switcher .sf-dropdown[open] > .sf-dropdown__toggle { border-color: var(--oc-gold-light); }
.sf-switcher .sf-dropdown[open] > .sf-dropdown__toggle::after { margin-top: 3px; transform: rotate(225deg); }
.sf-switcher .sf-dropdown__toggle:focus-visible,
.sf-switcher__list a:focus-visible,
.sf-switcher__countries .sf-link-btn:focus-visible { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-switcher .sf-dropdown__panel {
  min-width: 180px;
  padding: var(--oc-space-1);
  color: var(--oc-text);
  font-family: var(--oc-font-body);
  font-weight: var(--oc-weight-regular);
  letter-spacing: 0;
  text-align: left;
}
.sf-switcher__list a,
.sf-switcher__countries .sf-link-btn {
  display: block;
  width: 100%;
  padding: var(--oc-space-2) var(--oc-space-3);
  border-radius: var(--oc-radius-input);
  color: var(--oc-text);
  font-size: var(--oc-text-md);
  text-align: left;
  text-decoration: none;
}
.sf-switcher__list a:hover,
.sf-switcher__countries .sf-link-btn:hover { background: var(--oc-bg-subtle); color: var(--oc-navy); }
.sf-switcher__list a[aria-current="true"],
.sf-switcher__countries .sf-link-btn[aria-current="true"] { background: var(--oc-gold-bg); color: var(--oc-navy); font-weight: var(--oc-weight-semibold); }

/* A phone: the phone number leads, the wine-list link moves into the menu
   drawer and the socials go; the two dropdowns stay on the same line, as codes,
   and open across the bar. */
@media (max-width: 820px) {
  .sf-announce__sep, .sf-announce__wine, .sf-announce__social { display: none; }
}
@media (max-width: 640px) {
  .sf-announce__inner { column-gap: var(--oc-space-2); }
  .sf-announce__label, .sf-switcher__prefix { display: none; }
  .sf-announce__phone { flex: 1 1 auto; }
  .sf-switcher { flex: none; }
  .sf-switcher .sf-dropdown__toggle { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
  .sf-switcher__name { display: none; }
  .sf-switcher__code { display: inline; letter-spacing: var(--oc-tracking-wide); }
  .sf-switcher .sf-dropdown { position: static; }
  .sf-switcher .sf-dropdown--end .sf-dropdown__panel {
    left: var(--oc-gutter);
    right: var(--oc-gutter);
    top: 100%;
    width: auto;
    max-width: none;
    max-height: 60vh;
  }
}

/* header: white, sticky (header-group.json header_sticky). Logo left, the
   search / account / cart tools right, the main navigation on a row below. */
.sf-header {
  position: sticky;
  top: 0;
  z-index: var(--oc-z-header);
  background: var(--oc-bg);
  border-bottom: 1px solid var(--oc-divider);
}
.sf-header__inner {
  display: flex;
  align-items: center;
  gap: var(--oc-space-2);
  min-height: 60px;
  padding-top: var(--oc-space-2);
  padding-bottom: var(--oc-space-2);
}

/* The logo is the live logo image at the live widths: 140px on a phone, 160px
   from 769px up (header-group.json mobile_logo_width / desktop_logo_width). The
   file's own width and height are on the <img>, so the box is held before it
   loads; CSS sets only the displayed width. */
.sf-logo {
  display: block;
  flex: 0 1 var(--oc-logo-width-mobile);
  width: var(--oc-logo-width-mobile);
  min-width: 0;
  line-height: 0;
}
.sf-logo__img { display: block; width: 100%; height: auto; }
/* On the home page the logo is the page's h1 (live: "Onshore Cellars"); the
   element is the flex item and the link sits inside it, so the box is the same. */
.sf-logo--heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; }
.sf-logo__link { display: block; line-height: 0; }

.sf-header__tools { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: var(--oc-space-1); min-width: 0; }

/* "ACCOUNT" and "CART" are words beside their icons on a desktop (live) and only
   an accessible name on a phone, where the icons stand alone. */
.sf-iconbtn__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Search is one link: an icon on a phone, the live theme's grey search field on
   a desktop. It stays a link to /search so it works with no script, and
   assets/search.js turns it into the suggestion panel when it runs. */
.sf-header__search-text { display: none; text-decoration: none; }

.sf-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--oc-radius-control);
  background: none;
  color: var(--oc-text);
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}
.sf-iconbtn:hover { color: var(--oc-gold-hover); }
.sf-iconbtn::-webkit-details-marker { display: none; }

.sf-cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--oc-radius-pill);
  background: var(--oc-sale);
  color: var(--oc-white);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: var(--oc-weight-bold);
  line-height: 18px;
  text-align: center;
}

/* The badge is always in the header so the chat widget can update it; with no
   items its text is empty and it disappears. */
.sf-cart-count:empty { display: none; }

/* The small line icons the header and footer draw (nav.js svg()). Not .sf-icon,
   which the sections library sizes for its own column icons. */
.sf-glyph { flex: none; transition: transform var(--oc-transition); }

/* main navigation (desktop): a row under the logo, dropdowns and mega menus */
.sf-header__navrow { display: none; border-top: 1px solid var(--oc-divider); }
.sf-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--oc-space-4); margin: 0; padding: 0; list-style: none; }
.sf-nav__item { display: flex; align-items: center; }
.sf-nav__item--parent { position: relative; }
.sf-nav__item--mega, .sf-nav__item--multi { position: static; }

.sf-nav__link {
  position: relative;
  display: block;
  padding: var(--oc-space-3) 0;
  color: var(--oc-text);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-nav-size);
  font-weight: var(--oc-nav-weight);
  text-transform: uppercase;
  letter-spacing: var(--oc-nav-tracking);
  text-decoration: none;
  transition: color var(--oc-transition);
}
.sf-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--oc-space-2);
  height: 2px;
  background: var(--oc-gold);
  transform: scaleX(0);
  transition: transform var(--oc-transition);
}
.sf-nav__link:hover, .sf-nav__item:focus-within > .sf-nav__link, .sf-nav__link[aria-current="page"] { color: var(--oc-gold-hover); }
.sf-nav__link:hover::after, .sf-nav__item:focus-within > .sf-nav__link::after, .sf-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.sf-nav__link--label { cursor: default; }
.sf-nav__link--label::after { display: none; }

.sf-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  margin-left: calc(-1 * var(--oc-space-1));
  border-radius: var(--oc-radius-control);
  color: var(--oc-text);
  cursor: pointer;
  list-style: none;
}
.sf-nav__toggle::-webkit-details-marker { display: none; }
.sf-nav__toggle:hover { color: var(--oc-gold-hover); }
.sf-nav__details[open] .sf-glyph--chevron { transform: rotate(180deg); }

/* the panel under an entry: a list for one level of children, a full-width
   grid of columns for two (the live mega menu) */
.sf-nav__drop { position: absolute; top: 100%; left: calc(-1 * var(--oc-space-4)); z-index: var(--oc-z-popover); }
.sf-nav__item--mega .sf-nav__drop, .sf-nav__item--multi .sf-nav__drop { left: 0; right: 0; }
.sf-nav__panel {
  background: var(--oc-bg);
  border-top: 2px solid var(--oc-gold);
  border-radius: 0 0 var(--oc-radius-card) var(--oc-radius-card);
  box-shadow: var(--oc-shadow-lg);
}
.sf-nav__panel--mega, .sf-nav__panel--multi { max-height: calc(100vh - 160px); overflow-y: auto; }
.sf-nav__sublink {
  display: block;
  padding: var(--oc-space-2) var(--oc-space-4);
  color: var(--oc-text);
  font-family: var(--oc-font-body);
  font-size: var(--oc-nav-size);
  font-weight: var(--oc-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--oc-transition), padding-left var(--oc-transition);
}
.sf-nav__sublink:hover, .sf-nav__sublink[aria-current="page"] { padding-left: var(--oc-space-5); color: var(--oc-gold-hover); }

/* The mega panel's grid, tiles, thumbnails and the one-level multi-column panel
   are in the "mega menu v2" block further down. */

/* mobile menu: a <details> that opens a sheet under the header with no script,
   and a modal drawer from the right with it (nav.js adds .sf-js, the close
   button, the focus trap and .sf-scroll-lock on <html>) */
.sf-mobile-menu { display: block; }
.sf-mobile-menu .sf-mobile-menu__toggle .sf-glyph--close { display: none; }
.sf-mobile-menu[open] .sf-mobile-menu__toggle .sf-glyph--close { display: block; }
.sf-mobile-menu[open] .sf-mobile-menu__toggle .sf-glyph--open { display: none; }
.sf-mobile-menu__backdrop, .sf-mobile-menu__head { display: none; }
.sf-mobile-menu__close { display: none; }
.sf-js .sf-mobile-menu__close { display: inline-flex; }

.sf-mobile-menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: var(--oc-space-2) 0 var(--oc-space-5);
  background: var(--oc-bg);
  border-bottom: 1px solid var(--oc-divider);
  box-shadow: var(--oc-shadow-md);
}
.sf-js .sf-mobile-menu[open] .sf-mobile-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--oc-z-overlay);
  display: block;
  background: var(--oc-overlay);
}
.sf-js .sf-mobile-menu__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: var(--oc-z-overlay);
  width: min(88vw, var(--oc-menu-drawer-width));
  max-height: none;
  padding-top: 0;
  border-bottom: 0;
  box-shadow: var(--oc-shadow-lg);
}
.sf-js .sf-mobile-menu[open] .sf-mobile-menu__panel { animation: sf-slide-in-right 0.25s ease; }
.sf-js .sf-mobile-menu__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--oc-space-1) var(--oc-space-2) var(--oc-space-1) var(--oc-space-4);
  background: var(--oc-bg);
  border-bottom: 1px solid var(--oc-divider);
}
.sf-mobile-menu__title {
  color: var(--oc-navy);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
}
/* With the drawer open the page behind it is locked, and the pieces of the
   page that sit above the header in the stacking order (the announcement bar
   and the chat launcher) step out of its way. */
.sf-scroll-lock { overflow: hidden; }
.sf-scroll-lock .sf-announce { z-index: auto; }
.sf-scroll-lock .sf-chat__launcher { display: none; }

.sf-mobile-menu__list, .sf-mobile-menu__sub, .sf-mobile-menu__extras { margin: 0; padding: 0; list-style: none; }
.sf-mobile-menu__link, .sf-mobile-menu__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-3);
  min-height: var(--oc-control-height);
  padding: var(--oc-space-2) var(--oc-space-4);
  border-bottom: 1px solid var(--oc-divider);
  color: var(--oc-text);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-md);
  font-weight: var(--oc-weight-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  transition: color var(--oc-transition), background var(--oc-transition);
}
.sf-mobile-menu__summary::-webkit-details-marker { display: none; }
.sf-mobile-menu__link:hover, .sf-mobile-menu__summary:hover, .sf-mobile-menu__link[aria-current="page"] { background: var(--oc-bg-subtle); color: var(--oc-gold-hover); }
.sf-mobile-menu__link--label { cursor: default; }
.sf-mobile-menu__acc[open] > .sf-mobile-menu__summary .sf-glyph--chevron { transform: rotate(180deg); }
.sf-mobile-menu__sub .sf-mobile-menu__link,
.sf-mobile-menu__sub .sf-mobile-menu__summary {
  padding-left: var(--oc-space-5);
  font-family: var(--oc-font-body);
  font-size: var(--oc-text-sm);
  font-weight: var(--oc-weight-medium);
}
.sf-mobile-menu__sub .sf-mobile-menu__sub .sf-mobile-menu__link { padding-left: var(--oc-space-7); }
.sf-mobile-menu__link--all { color: var(--oc-gold-hover); font-family: var(--oc-font-heading); font-weight: var(--oc-weight-bold); text-transform: uppercase; letter-spacing: var(--oc-tracking); }
.sf-mobile-menu__extras { margin-top: var(--oc-space-4); border-top: 1px solid var(--oc-divider); }
.sf-mobile-menu__extras .sf-mobile-menu__link { font-family: var(--oc-font-body); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-regular); }

/* the smallest phones: the logo may shrink, the icons tighten, 320px never
   scrolls sideways */
@media (max-width: 399px) {
  .sf-header__inner { gap: 0; }
  .sf-iconbtn { width: 38px; }
}
@media (max-width: 359px) {
  .sf-iconbtn { width: 34px; }
}
/* A phone: the logo row (logo, bag, menu) and, under it, the search field full
   width, the one header search component drawn as an always-open bar instead of
   its icon. The .sf-header prefix lets these win over the component's own rules
   further down the sheet; assets/search.js needs no change, the combobox mounts
   on the same field and its panel hangs under the bar. The field is 16px so a
   phone does not zoom the page on focus. */
@media (max-width: 768px) {
  .sf-iconbtn--account { display: none; }
  .sf-header__inner { flex-wrap: wrap; row-gap: var(--oc-space-2); }
  .sf-header .sf-hsearch { order: 10; flex: 0 0 100%; max-width: none; margin: 0; }
  .sf-header .sf-hsearch__open { display: none; }
  .sf-header .sf-hsearch__box { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
  .sf-header .sf-hsearch__input { height: 40px; padding-left: var(--oc-control-height); font-size: var(--oc-text-input); }
  .sf-header .sf-hsearch__go { width: 40px; }
  .sf-header .sf-hsearch .sf-suggest__list {
    position: absolute;
    top: calc(100% + var(--oc-space-2));
    left: 0;
    right: 0;
    z-index: var(--oc-z-suggest);
    max-height: calc(100dvh - 200px);
    margin: 0;
    border-color: var(--oc-divider);
    box-shadow: var(--oc-shadow-lg);
  }
}

/* from 769px: the logo steps up to its desktop width, the navigation row
   appears and the drawer is gone */
@media (min-width: 769px) {
  .sf-iconbtn--labelled { width: auto; gap: var(--oc-space-2); padding: 0 var(--oc-space-3); }
  .sf-iconbtn--labelled .sf-iconbtn__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-family: var(--oc-font-heading);
    font-size: var(--oc-nav-size);
    font-weight: var(--oc-nav-weight);
    letter-spacing: var(--oc-nav-tracking);
    text-transform: uppercase;
  }
  .sf-iconbtn--cart .sf-cart-count { right: auto; left: calc(var(--oc-space-3) + 12px); }
  .sf-header__search {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: var(--oc-space-3);
    width: auto;
    max-width: 560px;
    height: 40px;
    margin-right: auto;
    padding: 0 var(--oc-space-4);
    background: var(--oc-bg-search);
    color: var(--oc-text-soft);
    text-decoration: none;
  }
  .sf-header__search-text { display: block; overflow: hidden; font-size: var(--oc-text-md); text-overflow: ellipsis; white-space: nowrap; }
  .sf-header__inner { gap: var(--oc-space-5); min-height: 0; padding-top: var(--oc-space-3); padding-bottom: var(--oc-space-3); }
  .sf-logo { flex-basis: var(--oc-logo-width-desktop); width: var(--oc-logo-width-desktop); }
  .sf-header__navrow { display: block; }
  .sf-mobile-menu { display: none; }
}
/* Under 1400px the row is tighter: at 1350px the ten items measure ~1017px
   against a 1000px container with a 16px gap, so "Training" sat alone on a
   second row. 12px fits them on one. */
@media (min-width: 769px) and (max-width: 1399px) {
  .sf-nav__list { column-gap: var(--oc-space-3); }
}
@media (min-width: 1400px) {
  .sf-nav__list { column-gap: var(--oc-space-5); }
}
/* From 1024px the main row is ONE line in every language. The labels are not the
   same length in each: the ten entries measure 758px in English but 885 (French),
   901 (German), 939 (Dutch) and 1018 (Spanish: "Bebidas espirituosas", "Sobre
   nosotros") at 16px, against a 1040px container (944px at 1024), so the last
   entry ("Uber uns", "Over ons", "A propos de nous") sat alone on a second row.
   A gap cannot buy that back, so the label size follows the room. --oc-nav-k is
   16px divided by the width the language's LETTERS take (each entry's measured
   width less its fixed 24px dropdown toggle, seven of them); the room is the
   container (the viewport less the page gutters; from 1200px the page is 80% of
   the viewport, capped, which is why the room STEPS DOWN at 1200px) less the nine
   gaps, the seven toggles and a little slack. The size is room x k, never above
   the token (so English does not move) and never below 12px, the smallest the
   row is allowed to read: only Spanish between 1200 and about 1260px gets there. Below 1024px the row wraps as it always has: ten
   entries do not fit a tablet at any size that can be read, and a left-aligned
   second row is tidy. The other languages take a tight gap and spread the entries
   across the row, so a wide window does not leave it bunched to the left. */
html { --oc-nav-k: 0.02712; }
:root:lang(de) { --oc-nav-k: 0.02183; }
:root:lang(nl) { --oc-nav-k: 0.02075; }
:root:lang(es) { --oc-nav-k: 0.01882; }
:root:lang(fr) { --oc-nav-k: 0.02231; }
:root:lang(it) { --oc-nav-k: 0.02564; }
@media (min-width: 1024px) {
  .sf-nav__list { --oc-nav-room: calc(100vw - 330px); }
  .sf-nav__list .sf-nav__link { font-size: clamp(12px, calc(var(--oc-nav-room) * var(--oc-nav-k)), var(--oc-nav-size)); }
  :root:not(:lang(en)) .sf-nav__list { column-gap: var(--oc-space-2); justify-content: space-between; }
}
@media (min-width: 1200px) {
  .sf-nav__list { --oc-nav-room: calc(80vw - 330px); }
}
@media (min-width: 1400px) {
  .sf-nav__list { --oc-nav-room: calc(min(1500px, 80vw) - 366px); }
  :root:not(:lang(en)) .sf-nav__list { column-gap: var(--oc-space-3); }
}

/* footer: navy with a gold top edge, Montserrat headings, the live columns
   (about-us, advice), the contact block with the address and social icons, a
   newsletter slot and the legal row. On a phone each column collapses to its
   heading. */
.sf-footer {
  background: var(--oc-navy);
  border-top: 3px solid var(--oc-gold);
  color: var(--oc-on-navy-soft);
  font-size: var(--oc-footer-size);
}
.sf-footer a { color: var(--oc-on-navy-soft); text-decoration: none; transition: color var(--oc-transition); }
.sf-footer a:hover { color: var(--oc-gold-light); text-decoration: underline; }
.sf-footer :focus-visible { outline-color: var(--oc-gold-light); }

.sf-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: var(--oc-space-5);
  padding-bottom: var(--oc-space-5);
}
.sf-footer__col { min-width: 0; }
.sf-footer__heading {
  margin: 0 0 var(--oc-space-3);
  color: var(--oc-white);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
}
.sf-footer__acc { border-top: 1px solid var(--oc-on-navy-line); }
.sf-footer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-3);
  min-height: var(--oc-control-height);
  color: var(--oc-white);
  cursor: pointer;
  list-style: none;
}
.sf-footer__summary::-webkit-details-marker { display: none; }
.sf-footer__summary .sf-footer__heading { margin: 0; }
.sf-footer__acc[open] > .sf-footer__summary .sf-glyph--chevron { transform: rotate(180deg); }
.sf-footer__list { margin: 0; padding: 0 0 var(--oc-space-3); list-style: none; }
.sf-footer__list li { margin-bottom: var(--oc-space-2); }
.sf-footer__link--label { color: var(--oc-white); }
.sf-footer__address { font-style: normal; line-height: 1.6; }
.sf-footer__social { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: var(--oc-space-1) 0 0; padding: 0; list-style: none; }
.sf-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--oc-on-navy-line);
  border-radius: var(--oc-radius-control);
}
.sf-footer__social-link:hover { border-color: var(--oc-gold-light); text-decoration: none; }

/* "We accept": the payment marks, small inline SVGs (nav.js PAYMENT_ICONS) so the
   footer makes no request for them. Each is a 38x24 card. */
.sf-footer__pay { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; }
.sf-footer__pay li { margin: 0; }
.sf-footer__pay-icon { display: block; width: 38px; height: 24px; border-radius: 3px; }
.sf-footer__follow { margin: var(--oc-space-3) 0 var(--oc-space-1); color: var(--oc-white); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-bold); text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); }
/* The language control sits on the legal row and opens upward, because the
   footer is the bottom of the page. */
.sf-footer__lang .sf-dropdown__toggle {
  min-height: 32px;
  gap: var(--oc-space-2);
  padding: 0 var(--oc-space-3);
  border-color: var(--oc-on-navy-line);
  border-radius: var(--oc-radius-control);
  background: var(--oc-on-navy-faint);
  color: var(--oc-white);
  font-size: var(--oc-text-sm);
}
.sf-footer__lang .sf-dropdown__toggle::after { border-color: currentColor; }
.sf-footer__lang .sf-dropdown__panel { top: auto; bottom: calc(100% + var(--oc-space-1)); min-width: 180px; padding: var(--oc-space-1); }
.sf-footer__lang .sf-switcher__list { margin: 0; padding: 0; list-style: none; }
.sf-footer .sf-footer__lang .sf-switcher__list a { color: var(--oc-text); text-decoration: none; }
.sf-footer .sf-footer__lang .sf-switcher__list a:hover { color: var(--oc-navy); text-decoration: none; }

.sf-newsletter { padding-top: var(--oc-space-4); }
.sf-newsletter input { max-width: 100%; }

.sf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-3) var(--oc-space-5);
  padding-top: var(--oc-space-4);
  padding-bottom: var(--oc-space-5);
  border-top: 1px solid var(--oc-on-navy-line);
  font-size: var(--oc-text-sm);
}
.sf-footer__legal p { margin: 0; }
.sf-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--oc-space-1) var(--oc-space-4); }

/* Live draws the footer as four blocks on a 210px pitch (a 186px column and a 24px gap here) centred in the page and never
   wraps them (about-us, advice, contact, payment); a newsletter column, when
   one is switched on, is a fifth. The grid is as wide as its columns and sits in
   the middle, so the row stays one row from the tablet breakpoint up. */
@media (min-width: 769px) {
  .sf-footer__grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(0, var(--oc-footer-col));
    justify-content: center;
    gap: var(--oc-space-5);
    padding-top: var(--oc-space-7);
    padding-bottom: var(--oc-space-6);
  }
  .sf-footer__acc { border-top: 0; }
  .sf-footer__summary { min-height: 0; margin-bottom: var(--oc-space-3); cursor: default; pointer-events: none; }
  .sf-footer__summary .sf-glyph--chevron { display: none; }
  .sf-footer__list { padding-bottom: 0; }
  .sf-newsletter { padding-top: 0; }
}

/* ----------------------------------------------------------- breadcrumbs */
/* No page draws a visible trail any more (components.js breadcrumbs() returns
   nothing; owner, 2026-10-16). The component's look stays only so the style
   guide's specimen of it and any future use keep one definition. */

.sf-breadcrumbs { margin-bottom: var(--oc-space-4); font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--oc-space-1); margin: 0; padding: 0; list-style: none; }
.sf-breadcrumbs li + li::before { content: "/"; margin-right: var(--oc-space-1); color: var(--oc-border-input); }
.sf-breadcrumbs a { color: var(--oc-text-soft); text-decoration: none; }
.sf-breadcrumbs a:hover { color: var(--oc-gold-hover); text-decoration: underline; }
.sf-breadcrumbs [aria-current="page"] { color: var(--oc-text); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- badges */

.sf-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--oc-space-2);
  border-radius: 3px;
  background: var(--oc-navy);
  color: var(--oc-white);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking);
}
.sf-badge--soldout { background: var(--oc-text-soft); }
.sf-badge--sale { background: var(--oc-sale); }
.sf-badge--new { background: var(--oc-success); }

.sf-pills { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0 0 var(--oc-space-3); padding: 0; list-style: none; }
.sf-pill {
  padding: 3px var(--oc-space-3);
  border-radius: var(--oc-radius-control);
  background: var(--oc-navy);
  color: var(--oc-white);
  font-size: var(--oc-text-xs);
  font-weight: 600;
}
.sf-pill a { color: var(--oc-white); text-decoration: none; }
.sf-pill a:hover { color: var(--oc-gold-light); }

/* ----------------------------------------------------- prices and status */

.sf-price { font-family: var(--oc-font-heading); font-weight: 700; color: var(--oc-text); }
.sf-price__note { font-size: var(--oc-text-xs); color: var(--oc-text-muted); }

/* ------------------------------------------------------ product card/grid */

.sf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--oc-grid-gap);
}
.sf-grid--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--oc-space-5); }

.sf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* NOT height: 100%. In a flex row (a shelf, the article's shop row, a slider) a
     percentage height cannot resolve against a container with no height, so the
     card would not stretch to its neighbours; auto plus align-self: stretch does,
     in grid and flex alike, and the buy block below then lines up across the row. */
  height: auto;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-card);
  transition: box-shadow var(--oc-transition), transform var(--oc-transition), border-color var(--oc-transition);
}
.sf-card__media { position: relative; aspect-ratio: var(--oc-product-media-ratio, 1 / 1); overflow: hidden; background: var(--oc-product-media-bg, var(--oc-bg-subtle)); }
.sf-card__imglink { display: block; width: 100%; height: 100%; }
.sf-card__img, .sf-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--oc-space-3);
  transition: transform 0.4s ease;
}
.sf-card__placeholder { background: var(--oc-product-media-bg, var(--oc-bg-subtle)); }
.sf-card--soldout .sf-card__img { opacity: 0.6; }

.sf-card__badges {
  position: absolute;
  top: var(--oc-space-2);
  left: var(--oc-space-2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-1);
}

.sf-card__actions form { margin: 0; }
.sf-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px var(--oc-space-2);
  border: 0;
  background: var(--oc-gold);
  color: var(--oc-white);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  cursor: pointer;
  transition: background var(--oc-transition);
}
.sf-card__add:hover { background: var(--oc-gold-hover); color: var(--oc-white); }

.sf-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px var(--oc-space-3); }
.sf-card__name {
  display: -webkit-box;
  margin: 0 0 var(--oc-space-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* Two lines are always reserved, so a one-line name does not pull the facts and
     the buy block up under it: every card in a row has the same top and bottom. */
  min-height: calc(2 * 1.35em);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.sf-results[data-view="list"] .sf-card__name { min-height: 0; }
.sf-card__name a { color: var(--oc-text); text-decoration: none; }
.sf-card__name a:hover { color: var(--oc-gold-hover); }
.sf-card__meta, .sf-card__region {
  margin: 0 0 2px;
  overflow: hidden;
  font-size: var(--oc-text-xs);
  color: var(--oc-text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-card__region { color: var(--oc-text-muted); }
.sf-card__price { margin: auto 0 0; padding-top: var(--oc-space-2); font-size: var(--oc-text-base); }
.sf-card__status { font-size: var(--oc-text-xs); font-weight: 600; color: var(--oc-text-muted); text-transform: uppercase; letter-spacing: var(--oc-tracking); }

@media (hover: hover) {
  .sf-card:hover { box-shadow: var(--oc-shadow-md); transform: translateY(-2px); border-color: transparent; }
  .sf-card:hover .sf-card__img { transform: scale(1.05); }
}

@media (max-width: 1023px) {
  .sf-grid, .sf-grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sf-grid, .sf-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .sf-grid--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .sf-grid, .sf-grid--tiles { gap: 10px; }
  .sf-grid--posts { grid-template-columns: minmax(0, 1fr); }
  .sf-card__body { padding: 10px var(--oc-space-2); }
  .sf-card__name { font-size: var(--oc-text-xs); }
  .sf-card__price { font-size: var(--oc-text-md); }
  .sf-card__add { padding: 9px var(--oc-space-1); letter-spacing: var(--oc-tracking); }
}

/* ------------------------------------------------------- collection page */

.sf-coll-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--oc-space-5);
  align-items: center;
  margin-bottom: var(--oc-space-5);
  padding-bottom: var(--oc-space-5);
  border-bottom: 1px solid var(--oc-divider);
}
.sf-coll-head--image { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.sf-coll-head .sf-title { margin-bottom: 0; }
.sf-coll-head__text { margin-top: var(--oc-space-3); color: var(--oc-text-soft); }
.sf-coll-head__banner { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--oc-radius-card); }
.sf-coll-head__thumb {
  width: 120px;
  height: 120px;
  justify-self: end;
  padding: var(--oc-space-2);
  object-fit: contain;
  background: var(--oc-bg-subtle);
  border-radius: var(--oc-radius-card);
}
@media (max-width: 767px) {
  .sf-coll-head--image { grid-template-columns: minmax(0, 1fr); }
  .sf-coll-head__thumb { display: none; }
}

.sf-layout { display: block; }
.sf-layout--sidebar {
  display: grid;
  grid-template-columns: var(--oc-sidebar-width) minmax(0, 1fr);
  gap: var(--oc-space-6);
  align-items: start;
}
.sf-results { min-width: 0; }

.sf-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-3);
  margin-bottom: var(--oc-space-4);
  padding-bottom: var(--oc-space-3);
  border-bottom: 1px solid var(--oc-divider);
}
.sf-topbar__count { margin: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); color: var(--oc-text-soft); letter-spacing: 0.02em; }
.sf-topbar__sort { display: flex; align-items: center; gap: var(--oc-space-2); }
.sf-sort { display: flex; align-items: center; gap: var(--oc-space-2); }
.sf-sort__label { font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }
.sf-sort .sf-select { width: auto; min-height: 36px; font-size: var(--oc-text-sm); }

.sf-sidebar { position: sticky; top: calc(var(--oc-space-8) + var(--oc-space-5)); min-width: 0; }
.sf-facets__toggle, .sf-facet__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--oc-space-2) 0;
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--oc-text);
  cursor: pointer;
  list-style: none;
}
.sf-facets__toggle::-webkit-details-marker, .sf-facet__title::-webkit-details-marker { display: none; }
.sf-facet__title::after { content: "+"; color: var(--oc-text-soft); }
.sf-facet[open] > .sf-facet__title::after { content: "\2212"; }
.sf-facet { border-bottom: 1px solid var(--oc-divider); }
.sf-facet__list { max-height: 260px; margin: 0; padding: 0 0 var(--oc-space-2); overflow-y: auto; list-style: none; }
.sf-check { display: flex; align-items: center; gap: var(--oc-space-2); padding: 3px 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); cursor: pointer; }
.sf-check:hover { color: var(--oc-text); }
.sf-check__label { flex: 1; min-width: 0; }
.sf-check__count { padding: 1px 6px; border-radius: 10px; background: var(--oc-bg-subtle); font-size: var(--oc-text-xs); color: var(--oc-text-muted); }
.sf-facets__apply { margin-top: var(--oc-space-4); }

/* Desktop shows the filters open with no toggle where the browser can style
   a closed <details> body; everywhere else the toggle stays and still works. */
@media (min-width: 768px) {
  @supports selector(::details-content) {
    .sf-facets::details-content { content-visibility: visible; display: block; }
    .sf-facets__toggle { display: none; }
  }
}
@media (max-width: 767px) {
  .sf-layout--sidebar { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-3); }
  .sf-sidebar { position: static; }
  .sf-facets { border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-card); padding: 0 var(--oc-space-4); }
  .sf-facets[open] { padding-bottom: var(--oc-space-4); }
}

.sf-pagination { margin-top: var(--oc-space-6); }
.sf-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oc-space-1); margin: 0; padding: 0; list-style: none; }
.sf-pagination__link, .sf-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--oc-space-3);
  border-radius: var(--oc-radius-control);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--oc-text);
}
.sf-pagination__link:hover { background: var(--oc-bg-subtle); color: var(--oc-gold-hover); }
.sf-pagination__link.is-current { background: var(--oc-navy); color: var(--oc-white); }

/* Category tiles: the light rounded well and the label under it are the
   "live composition" block at the end of this file. */

/* ---------------------------------------------------------- home / hero */

.sf-hero {
  background: linear-gradient(135deg, var(--oc-navy) 0%, var(--oc-navy-mid) 100%);
  color: var(--oc-white);
}
.sf-hero__inner { padding-top: var(--oc-space-8); padding-bottom: var(--oc-space-8); text-align: center; }
.sf-hero__title {
  margin-bottom: var(--oc-space-4);
  color: var(--oc-white);
  font-size: var(--oc-hero-title-size);
  font-weight: var(--oc-title-weight);
  line-height: var(--oc-heading-leading);
  text-transform: uppercase;
  letter-spacing: var(--oc-hero-title-tracking);
}
/* A hero that carries the page's h1 is the collection (or port) banner: live
   draws that title at the h1 scale, 50px (42.5px on a phone), not the slide size. */
.sf-hero__title:is(h1) { font-size: var(--oc-h1-size); }
.sf-hero__lead { max-width: 640px; margin: 0 auto var(--oc-space-5); font-size: var(--oc-text-lg); color: var(--oc-on-navy-soft); }
.sf-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oc-space-3); }
@media (max-width: 639px) {
  .sf-hero__inner { padding-top: var(--oc-space-7); padding-bottom: var(--oc-space-7); }
  .sf-hero__lead { font-size: var(--oc-text-base); }
}

/* ---------------------------------------------------------- product page */

.sf-product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--oc-space-6) var(--oc-space-7);
  align-items: start;
}
/* The product picture's well: every item image is square, so the well takes the
   shared media ratio and the picture sits whole inside it (contain, never crop).
   The featured-product card and the quick view draw this same gallery. */
.sf-product__gallery { aspect-ratio: var(--oc-product-media-ratio, 1 / 1); overflow: hidden; background: var(--oc-product-media-bg, var(--oc-bg)); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); }
.sf-product__img, .sf-product__gallery .sf-card__placeholder { width: 100%; height: 100%; padding: var(--oc-space-5); object-fit: contain; }
.sf-product__info { min-width: 0; }
.sf-product__eyebrow {
  margin-bottom: var(--oc-space-2);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--oc-gold-hover);
}
.sf-product__place { color: var(--oc-text-soft); }
.sf-product__price { margin-bottom: var(--oc-space-5); font-size: var(--oc-text-xl); }
.sf-product__price .sf-price { font-size: var(--oc-text-xl); }
.sf-product__status { font-size: var(--oc-text-sm); font-weight: 600; color: var(--oc-text-muted); text-transform: uppercase; letter-spacing: var(--oc-tracking); }
.sf-product__variant { font-weight: 600; }
.sf-product__soldout { margin-bottom: var(--oc-space-4); }
.sf-buy { margin-bottom: var(--oc-space-6); }
.sf-buy__row { display: flex; align-items: flex-end; gap: var(--oc-space-3); }
.sf-buy__row .sf-field { margin-bottom: 0; }
.sf-field--qty { flex: 0 0 96px; }
.sf-buy__add { flex: 1; min-height: 44px; }
.sf-product__details { border-top: 1px solid var(--oc-divider); }

.sf-accordion { border-bottom: 1px solid var(--oc-divider); }
.sf-accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--oc-space-4) 0;
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  cursor: pointer;
  list-style: none;
}
.sf-accordion__title::-webkit-details-marker { display: none; }
.sf-accordion__title::after { content: "+"; font-size: var(--oc-text-lg); color: var(--oc-text-soft); }
.sf-accordion[open] > .sf-accordion__title::after { content: "\2212"; }
.sf-accordion__body { padding-bottom: var(--oc-space-4); color: var(--oc-text-soft); }
.sf-accordion__body p:last-child { margin-bottom: 0; }

.sf-specs { display: grid; gap: var(--oc-space-2); margin: 0; }
.sf-specs__row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: var(--oc-space-3); }
.sf-specs dt { font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text); }
.sf-specs dd { margin: 0; }

@media (max-width: 767px) {
  .sf-product { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-5); }
}

/* product page: picture column, critic scores, variant chooser, shelves.
   Everything else on the page is an existing component (accordion, specs,
   panel, pills, badges, form fields, alert, grid). */
.sf-product__media { min-width: 0; }
.sf-product__gallery { position: relative; }
/* The critic medals sit in the picture's top-left corner, stacked, clear of the
   bottle (which the well centres). Navy for Parker, gold for Vinous: both read on a
   white bottle shot, and the shadow lifts them off it. */
.sf-medals { position: absolute; top: var(--oc-space-3); left: var(--oc-space-3); z-index: 1; display: flex; flex-direction: column; gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; }
.sf-medal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--oc-navy); color: var(--oc-white); box-shadow: var(--oc-shadow-md); line-height: 1; }
.sf-medal--parker { background: var(--oc-navy); }
.sf-medal--vinous { background: var(--oc-gold); color: var(--oc-navy); }
.sf-medal__value { font-family: var(--oc-font-heading); font-size: var(--oc-text-xl); font-weight: var(--oc-weight-bold); }
.sf-medal__label { margin-top: 2px; font-size: 0.625rem; font-weight: var(--oc-weight-semibold); letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; color: var(--oc-gold-light); }
.sf-medal--vinous .sf-medal__label { color: var(--oc-navy); }
/* The same medals on a collection card, smaller so two stack inside the picture of a
   two-column phone grid (a card there is about 11rem wide). They sit top-left, the
   quick view eye is top-right, and a sold-out card has no open vintage so it never
   has both a medal and the sold-out badge. A list row has a small square picture and
   says the score in its facts line instead. */
.sf-medals--card { top: var(--oc-space-2); left: var(--oc-space-2); gap: var(--oc-space-1); pointer-events: none; }
.sf-medals--card .sf-medal { width: 2.5rem; height: 2.5rem; box-shadow: var(--oc-shadow-sm); }
.sf-medals--card .sf-medal__value { font-size: var(--oc-text-sm); }
.sf-medals--card .sf-medal__label { margin-top: 1px; font-size: 0.5rem; }
@media (min-width: 768px) {
  .sf-medals--card .sf-medal { width: 3rem; height: 3rem; }
  .sf-medals--card .sf-medal__value { font-size: var(--oc-text-base); }
  .sf-medals--card .sf-medal__label { font-size: 0.5625rem; }
}
.sf-results[data-view="list"] .sf-medals--card { display: none; }
/* >>> card certification badges (organic / biodynamic / vegan / kosher) >>>
   Over the picture's top-right corner, stacked directly UNDER the quick view eye
   (36px tall at space-2 from the corner), so neither the medals (top-left) nor the
   eye is covered. Icon alone on a two-column phone grid, where a card picture is
   about 11rem; the word joins the icon from tablet up. The word is always in the
   markup as the accessible name. A list row has a small square picture and no
   room, so it shows none there. */
.sf-card__certs {
  position: absolute;
  top: calc(var(--oc-space-2) + 36px + var(--oc-space-1));
  right: var(--oc-space-2);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--oc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.sf-card__cert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-1);
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--oc-success-bg);
  color: var(--oc-success-ink);
  box-shadow: var(--oc-shadow-sm);
  font-family: var(--oc-font-heading);
  font-size: 0.625rem;
  font-weight: var(--oc-weight-semibold);
  letter-spacing: var(--oc-tracking);
  line-height: 1;
  text-transform: uppercase;
}
.sf-card__cert svg { flex: none; width: 12px; height: 12px; }
.sf-card__cert-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
  .sf-card__cert { padding: 0 var(--oc-space-2); }
  .sf-card__cert-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
.sf-results[data-view="list"] .sf-card__certs { display: none; }
/* <<< card certification badges <<< */
.sf-product__thumbs { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: var(--oc-space-3) 0 0; padding: 0; list-style: none; }
/* Beside the picture on a wide screen, as on the live page (below it on a phone). */
@media (min-width: 768px) {
  .sf-product__media:has(.sf-product__thumbs) { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--oc-space-3); align-items: start; }
  .sf-product__media:has(.sf-product__thumbs) .sf-product__gallery { grid-column: 2; grid-row: 1; }
  .sf-product__media:has(.sf-product__thumbs) .sf-product__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; flex-wrap: nowrap; margin: 0; }
}

/* The picture travels with the page from a desktop width: pure CSS sticky on the
   media column, which the grid's align-items: start lets keep its own height, so it
   rides until the buy-box column ends (the next full-width band: Details, shelves,
   Behind the bottle). The offset clears the sticky header at one or two nav rows.
   Phones keep the picture in the flow. The product page's own grid (it carries
   data-pv-root) and a page's featured-product card; not the quick view. */
/* From 768px, where the product page becomes two columns (owner 2026-10-20: "the
   product image needs to do the same on all product pages"); it was 1024px, so an
   iPad or a small laptop had two columns and a picture that stayed behind. */
@media (min-width: 768px) {
  .sf-product[data-pv-root] > .sf-product__media { position: sticky; top: var(--oc-gallery-sticky-top); }
}
@media (min-width: 1024px) {
  /* The featured-product section's card on a page (the WSET course) travels the
     same way (owner, 2026-10-16: "should scroll down the page like the item image
     does"); never inside the quick view, whose dialog scrolls on its own. */
  .sf-featured__card > .sf-product__media { position: sticky; top: var(--oc-gallery-sticky-top); }
  .sf-quick__content .sf-featured__card > .sf-product__media { position: static; }
}

/* Title block: chips, then the name as the live page sets it (small, bold, capitals). */
.sf-product .sf-title--product { margin-bottom: var(--oc-space-4); }
.sf-product__chips { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0 0 var(--oc-space-3); padding: 0; list-style: none; }
.sf-product__chip { padding: 2px var(--oc-space-3); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-control); background: var(--oc-bg-subtle); font-size: var(--oc-text-xs); }
.sf-product__chip a { color: var(--oc-text-soft); text-decoration: none; }
.sf-product__chip a:hover { color: var(--oc-gold-hover); }
.sf-product__thumb {
  display: block;
  width: 64px;
  aspect-ratio: var(--oc-product-media-ratio, 1 / 1);
  overflow: hidden;
  border: 1px solid var(--oc-divider);
  border-radius: var(--oc-radius-card);
  background: var(--oc-product-media-bg, var(--oc-bg-subtle));
}
.sf-product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sf-product__thumb:hover, .sf-product__thumb[aria-current="true"] { border-color: var(--oc-navy); }
.sf-product__stock { margin: calc(-1 * var(--oc-space-3)) 0 var(--oc-space-4); }
.sf-product__certs { margin: 0 0 var(--oc-space-4); padding: 0; list-style: none; }
.sf-product__cert { gap: var(--oc-space-1); text-transform: none; }

/* Variant pills: one fieldset per option that varies, a real radio under each
   pill (so arrow keys and the no-script GET form work), the radio itself kept
   focusable and only visually hidden. */
.sf-buy__variants, .sf-variants { display: grid; gap: var(--oc-space-4); margin-bottom: var(--oc-space-5); }
.sf-variants__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.sf-variants__legend {
  margin-bottom: var(--oc-space-2);
  padding: 0;
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-text-soft);
}
.sf-variants__pills { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); }
.sf-vpill { position: relative; display: inline-flex; }
.sf-vpill__input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }
.sf-vpill__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: var(--oc-control-height);
  padding: 0 var(--oc-space-4);
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-control);
  background: var(--oc-bg);
  color: var(--oc-text);
  font-size: var(--oc-text-md);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--oc-transition), background var(--oc-transition);
}
.sf-vpill:hover .sf-vpill__text { border-color: var(--oc-navy); }
.sf-vpill__input:checked + .sf-vpill__text {
  border-color: var(--oc-navy);
  background: var(--oc-navy);
  color: var(--oc-white);
}
.sf-vpill__input:focus-visible + .sf-vpill__text { outline: var(--oc-focus-ring); outline-offset: 2px; }
/* A single vintage: the chosen pill, with nothing to choose (buy.js fixedVintageRow). */
.sf-vpill--fixed .sf-vpill__text { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); cursor: default; }
.sf-vpill--fixed:hover .sf-vpill__text { border-color: var(--oc-navy); }
.sf-vpill__input:disabled + .sf-vpill__text {
  border-color: var(--oc-divider);
  background: var(--oc-bg-subtle);
  color: var(--oc-text-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}
.sf-vpill:hover .sf-vpill__input:disabled + .sf-vpill__text { border-color: var(--oc-divider); }

/* The live page's headings: small capitals over a gold rule. */
.sf-pdp__block { margin-bottom: var(--oc-space-5); }
.sf-pdp__block[hidden] { display: none; }
.sf-pdp__heading {
  margin: 0 0 var(--oc-space-3);
  padding-bottom: var(--oc-space-2);
  border-bottom: 2px solid var(--oc-gold);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-navy);
}
.sf-pdp__block > div { color: var(--oc-text-soft); }
.sf-pdp__block p:last-child { margin-bottom: 0; }
.sf-pdp__title {
  margin: 0 0 var(--oc-space-4);
  padding-bottom: var(--oc-space-2);
  border-bottom: 2px solid var(--oc-gold);
  font-size: var(--oc-text-xl);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking);
  color: var(--oc-navy);
}
.sf-pdp__card { padding: var(--oc-space-4); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-pdp__card .sf-prose { color: var(--oc-text-soft); font-size: var(--oc-text-md); }
.sf-pdp__card .sf-prose > :last-child { margin-bottom: 0; }

/* "More information": Provenance and Technical side by side, then pairings and
   key characteristics across, as small quiet cards (the live icon-tab). */
.sf-info { display: grid; gap: var(--oc-space-3); }
/* Side by side only when each group has room (13rem): the column it sits in is narrow on a
   tablet-width two-column product page, where a viewport rule split "Belvedere" mid-word. */
.sf-info { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.sf-info__group { min-width: 0; padding: var(--oc-space-3) var(--oc-space-4); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-info__group--wide { grid-column: 1 / -1; }
.sf-info .sf-specs { gap: 0; }
.sf-info .sf-specs__row { grid-template-columns: 6rem minmax(0, 1fr); padding: var(--oc-space-1) 0; border-bottom: 1px solid var(--oc-divider); font-size: var(--oc-text-sm); }
.sf-info .sf-specs__row:last-child { border-bottom: 0; }
.sf-info .sf-specs dt { font-size: var(--oc-text-xs); color: var(--oc-text-muted); }
.sf-info .sf-specs dd { color: var(--oc-text); }
.sf-info .sf-specs dd a { color: var(--oc-gold-hover); text-decoration: none; }
.sf-info .sf-specs dd a:hover { text-decoration: underline; }
.sf-info__title {
  display: flex;
  align-items: center;
  gap: var(--oc-space-2);
  margin: 0 0 var(--oc-space-2);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-gold);
}
.sf-info__group[hidden] { display: none; }
.sf-tags { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; }
.sf-tag {
  padding: var(--oc-space-1) var(--oc-space-3);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-control);
  background: var(--oc-gold-bg);
  color: var(--oc-warning-ink);
  font-size: var(--oc-text-label);
  font-weight: 500;
}
.sf-tag a { color: inherit; text-decoration: none; }
.sf-tag a:hover { color: var(--oc-gold-hover); text-decoration: underline; }
.sf-tag--food { background: var(--oc-gold-bg); color: var(--oc-warning-ink); }
.sf-tag--keyword { background: var(--oc-info-bg); color: var(--oc-info-ink); }
.sf-tag--link { background: var(--oc-bg-subtle); color: var(--oc-text); }
.sf-tag__kind { font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking); color: var(--oc-text-muted); }

/* Behind the bottle: centred, as on the live page. The pictures are collection
   banners (landscape, not bottles), so all three share one fixed landscape box and
   are cropped to fill it: the row stays level whatever the source sizes are. A card
   with no picture keeps an empty box of the same size so its text lines up. */
.sf-behind-section { border-top: 1px solid var(--oc-divider); }
.sf-behind-section .sf-section__head { justify-content: center; text-align: center; }
.sf-behind { --sf-behind-ratio: 16 / 9; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--oc-space-6) var(--oc-grid-gap); margin-bottom: var(--oc-space-5); }
.sf-behind__card { display: flex; flex-direction: column; align-items: center; justify-self: center; width: 100%; max-width: 28rem; gap: var(--oc-space-3); text-align: center; }
.sf-behind__media { display: block; width: 100%; aspect-ratio: var(--sf-behind-ratio); overflow: hidden; border-radius: var(--oc-radius-card); }
.sf-behind__media--empty { visibility: hidden; }
.sf-behind__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-behind__body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: var(--oc-space-2); max-width: 32rem; }
.sf-behind__kind { margin: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-gold-hover); }
.sf-behind__name { margin: 0; font-size: var(--oc-text-md); font-weight: 600; text-transform: uppercase; }
.sf-behind__text { margin: 0; color: var(--oc-text-soft); font-size: var(--oc-text-sm); }
.sf-behind__credit { margin: 0; color: var(--oc-text-soft); font-size: var(--oc-text-xs, .75rem); opacity: .8; }
.sf-behind__credit a { color: inherit; }
.sf-behind__link { margin-top: auto; border-radius: var(--oc-radius-control); }
.sf-behind__more { justify-content: center; margin-top: var(--oc-space-3); }
.sf-product__download { margin: var(--oc-space-5) 0 0; padding: var(--oc-space-4) 0; border-top: 2px solid var(--oc-gold); border-bottom: 2px solid var(--oc-gold); text-align: center; }
.sf-product__download .sf-btn { background: var(--oc-navy); color: var(--oc-white); }
/* A shelf's heading is the small live one, not a page title. */
.sf-pshelf .sf-section__title { font-size: var(--oc-text-md); font-weight: 600; letter-spacing: var(--oc-tracking-wide); }
/* product details */
/* The "Wine details" band takes the product page's full content width, so its
   heading rule and panel line up with the gallery and the buy box above it (the
   live theme's 700px narrow column left it floating). The text is kept readable
   inside the wide panel: a short description is capped in characters, a long one
   is set in two columns on a desktop. */
.sf-product__more { margin: var(--oc-space-7) 0 0; }
.sf-product__more--wide { max-width: none; width: 100%; }
.sf-product__more--wide .sf-pdp__title { width: 100%; }
.sf-product__more--wide .sf-pdp__card .sf-prose > * { max-width: 85ch; }
@media (min-width: 1024px) {
  .sf-product__more--wide .sf-prose--columns { column-count: 2; column-gap: var(--oc-space-7); }
  .sf-product__more--wide .sf-prose--columns > * { max-width: none; break-inside: avoid-column; }
  /* A long description of ONE paragraph may flow on into the second column. */
  .sf-product__more--wide .sf-prose--columns > p:only-child { break-inside: auto; }
}
/* end product details */
/* product description */
/* A manufacturer's leaflet, read into an intro, a grid of feature cards and a
   specifications table (lib/storefront/product/description-structure.js). Every
   word is the manufacturer's own; only the layout is ours. */
.sf-product__more--wide .sf-desc .sf-prose > * { max-width: none; }
.sf-product__more--wide .sf-desc .sf-prose > p { max-width: 85ch; }
/* A structured description's long prose run, set in columns from 1024px. */
.sf-desc__prose { margin-bottom: var(--oc-space-4); }
.sf-desc__prose > p { max-width: 85ch; }
.sf-desc__tagline { margin: 0 0 var(--oc-space-3); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 600; letter-spacing: var(--oc-tracking-wide); color: var(--oc-navy); }
.sf-desc__features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--oc-space-3); margin: var(--oc-space-4) 0; padding: 0; list-style: none; }
/* .sf-prose ul's list indent would otherwise push the card grid off the text's edge. */
.sf-prose .sf-desc__features { padding-left: 0; }
.sf-desc__card { min-width: 0; margin: 0; padding: var(--oc-space-3) var(--oc-space-4); border: 1px solid var(--oc-border); border-top: 2px solid var(--oc-gold); border-radius: var(--oc-radius-card); background: var(--oc-white); }
.sf-desc__kicker { margin: 0 0 var(--oc-space-1); font-size: var(--oc-text-xs); letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; color: var(--oc-text-muted); }
.sf-desc__heading { margin: 0 0 var(--oc-space-1); font-family: var(--oc-font-heading); font-size: var(--oc-text-base); font-weight: 600; color: var(--oc-navy); }
.sf-desc__text { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-desc__lines { margin: var(--oc-space-4) 0 var(--oc-space-2); padding: 0; list-style: none; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-desc__lines li { margin: 0 0 var(--oc-space-1); }
.sf-desc__specs { margin: var(--oc-space-4) 0 0; }
.sf-desc__specs-title { margin: 0 0 var(--oc-space-2); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 700; letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; color: var(--oc-gold); }
.sf-desc__table { width: 100%; max-width: 40rem; border-collapse: collapse; font-size: var(--oc-text-sm); }
.sf-desc__table th, .sf-desc__table td { padding: var(--oc-space-2) 0; border-bottom: 1px solid var(--oc-divider); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sf-desc__table th { width: 11rem; padding-right: var(--oc-space-3); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; color: var(--oc-text-muted); }
.sf-desc__table td { color: var(--oc-text); }
/* On a phone the label sits over its value, so a long label never breaks mid-word. */
@media (max-width: 480px) {
  .sf-desc__table th, .sf-desc__table td { display: block; width: auto; }
  .sf-desc__table th { padding: var(--oc-space-2) 0 0; border-bottom: 0; overflow-wrap: normal; }
  .sf-desc__table td { padding-top: var(--oc-space-1); }
}
/* "Read more" on a long tasting note: the lead stays in the flow, the rest opens
   in place from a native <details>, so nothing moves while the page loads. */
.sf-more { margin-top: var(--oc-space-2); }
.sf-more__toggle { display: inline-block; padding: var(--oc-space-1) 0; font-size: var(--oc-text-sm); font-weight: 600; color: var(--oc-gold-hover); cursor: pointer; list-style: none; }
.sf-more__toggle::-webkit-details-marker { display: none; }
.sf-more__toggle:hover { text-decoration: underline; }
.sf-more__toggle:focus-visible { outline: 2px solid var(--oc-gold); outline-offset: 2px; }
.sf-more__close, .sf-more[open] .sf-more__open { display: none; }
.sf-more[open] .sf-more__close { display: inline; }
.sf-more__body { margin-top: var(--oc-space-2); }
/* A manufacturer's WARNING lines: small print after the feature cards. */
.sf-desc__notice { margin: var(--oc-space-4) 0 0; padding: var(--oc-space-2) var(--oc-space-3); border-left: 2px solid var(--oc-divider); font-size: var(--oc-text-xs); color: var(--oc-text-muted); }
.sf-desc__notice p { margin: 0 0 var(--oc-space-1); max-width: none; }
.sf-desc__notice p:last-child { margin-bottom: 0; }
/* Goods: the Description (wider) and the Specifications card side by side on a
   desktop, stacked on a phone. */
.sf-goods-split { display: grid; gap: var(--oc-space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.sf-goodspecs { min-width: 0; }
.sf-goodspecs__table { max-width: none; }
.sf-goodspecs__table th { width: 40%; }
.sf-goods-split--specs-only .sf-goodspecs { max-width: 40rem; }
@media (min-width: 900px) {
  .sf-goods-split:not(.sf-goods-split--specs-only) { grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: var(--oc-space-5); }
}
@media (min-width: 900px) {
  .sf-product__more--wide .sf-goods-split .sf-prose > p { max-width: none; }
}
/* end product description */
.sf-grid--shelf { display: flex; gap: var(--oc-grid-gap); overflow-x: auto; padding-bottom: var(--oc-space-3); scroll-snap-type: x proximity; scrollbar-width: thin; }
.sf-grid--shelf > .sf-card { flex: 0 0 min(220px, 70vw); scroll-snap-align: start; }

/* ----------------------------------------------------------------- prose */

.sf-prose { overflow-wrap: break-word; }
.sf-prose > :first-child { margin-top: 0; }
.sf-prose h1, .sf-prose h2, .sf-prose h3, .sf-prose h4 { margin: var(--oc-space-6) 0 var(--oc-space-3); font-weight: 600; }
/* The big headings of a page's running text are the section heading: light
   caps at the h2 size (live rich-text h2). h3 and h4 stay body-scale. */
.sf-prose h1, .sf-prose h2 { font-size: var(--oc-h2-size); font-weight: var(--oc-h2-weight); line-height: var(--oc-heading-leading); text-transform: uppercase; }
.sf-prose h3 { font-size: var(--oc-text-lg); }
.sf-prose h4 { font-size: var(--oc-text-base); }
.sf-prose ul, .sf-prose ol { margin: 0 0 var(--oc-space-4); padding-left: var(--oc-space-5); }
.sf-prose li { margin-bottom: var(--oc-space-1); }
.sf-prose img, .sf-prose video, .sf-prose iframe { max-width: 100%; height: auto; border-radius: var(--oc-radius-card); }
.sf-prose iframe { aspect-ratio: 16 / 9; width: 100%; }
.sf-prose figure { margin: var(--oc-space-5) 0; }
.sf-prose figcaption { margin-top: var(--oc-space-2); font-size: var(--oc-text-sm); color: var(--oc-text-muted); }
.sf-prose blockquote { margin: var(--oc-space-5) 0; padding: var(--oc-space-1) 0 var(--oc-space-1) var(--oc-space-5); border-left: 3px solid var(--oc-gold); color: var(--oc-text-soft); font-style: italic; }
.sf-prose table { display: block; max-width: 100%; margin: 0 0 var(--oc-space-4); overflow-x: auto; border-collapse: collapse; }
.sf-prose th, .sf-prose td { padding: var(--oc-space-2) var(--oc-space-3); border: 1px solid var(--oc-divider); text-align: left; vertical-align: top; }
.sf-prose th { background: var(--oc-bg-subtle); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); }
.sf-prose pre { max-width: 100%; padding: var(--oc-space-4); overflow-x: auto; background: var(--oc-bg-subtle); border-radius: var(--oc-radius-card); }
.sf-prose hr { margin: var(--oc-space-6) 0; border: 0; border-top: 1px solid var(--oc-divider); }

/* policy pages */
/* A policy, a terms page or any plain CMS page drawn by documentPage: one
   centred reading column (about 90 characters a line; owner: "a little wider"), a heading outline that
   steps down (section, sub-section, run-in), and the vertical rhythm owned here
   because the pasted markup's own spacing is stripped (views/prose-tidy.js). */
.sf-article.sf-article--document { max-width: min(100%, 60rem); margin-left: auto; margin-right: auto; }
.sf-article--document .sf-title { margin-bottom: var(--oc-space-5); }
.sf-prose--document { font-size: var(--oc-text-base); line-height: 1.7; color: var(--oc-text); }
.sf-prose--document > * { max-width: 100%; }
.sf-prose--document p { margin: 0 0 var(--oc-space-4); }
.sf-prose--document h2 { margin: var(--oc-space-7) 0 var(--oc-space-3); padding-top: var(--oc-space-5); border-top: 1px solid var(--oc-divider); font-size: var(--oc-text-xl); font-weight: var(--oc-weight-bold); line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; scroll-margin-top: 8rem; }
.sf-prose--document h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sf-prose--document h3 { margin: var(--oc-space-6) 0 var(--oc-space-2); font-size: var(--oc-text-lg); font-weight: 600; line-height: 1.35; scroll-margin-top: 8rem; }
.sf-prose--document h4 { margin: var(--oc-space-5) 0 var(--oc-space-2); font-size: var(--oc-text-base); font-weight: 600; }
.sf-prose--document ul, .sf-prose--document ol { margin: 0 0 var(--oc-space-4); padding-left: var(--oc-space-6); }
.sf-prose--document ul { list-style: disc; }
.sf-prose--document ol { list-style: decimal; }
.sf-prose--document li { margin: 0 0 var(--oc-space-2); padding-left: var(--oc-space-1); }
.sf-prose--document li::marker { color: var(--oc-gold); }
.sf-prose--document li > :last-child { margin-bottom: 0; }
.sf-prose--document a { overflow-wrap: anywhere; }
.sf-prose--document .sf-prose__toc { list-style: none; padding-left: 0; }
.sf-prose--document .sf-prose__toc li { margin-bottom: var(--oc-space-1); padding-left: 0; }
.sf-prose--document table { width: 100%; font-size: var(--oc-text-md); line-height: 1.5; }
@media (max-width: 768px) {
  .sf-article.sf-article--document { padding-left: var(--oc-space-4); padding-right: var(--oc-space-4); }
  .sf-prose--document h2 { margin-top: var(--oc-space-6); font-size: var(--oc-text-lg); }
  .sf-prose--document h3 { font-size: var(--oc-text-base); }
  .sf-prose--document ul, .sf-prose--document ol { padding-left: var(--oc-space-5); }
}
/* end policy pages */

/* ------------------------------------------------------- blog / article */

.sf-post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-card);
  transition: box-shadow var(--oc-transition), transform var(--oc-transition), border-color var(--oc-transition);
}
.sf-post__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--oc-bg-subtle); }
.sf-post__img { width: 100%; height: 100%; object-fit: cover; }
.sf-post__media .sf-card__placeholder { padding: 0; }
.sf-post__body { display: flex; flex: 1; flex-direction: column; padding: var(--oc-space-4); }
.sf-post__meta { margin-bottom: var(--oc-space-2); font-size: var(--oc-text-xs); color: var(--oc-text-muted); text-transform: uppercase; letter-spacing: var(--oc-tracking); }
.sf-post__title { margin-bottom: var(--oc-space-2); font-size: var(--oc-text-lg); font-weight: 600; }
.sf-post__title a { color: var(--oc-navy); text-decoration: none; }
.sf-post__title a:hover { color: var(--oc-gold-hover); }
.sf-post__excerpt { color: var(--oc-text-soft); font-size: var(--oc-text-md); }
.sf-post__more {
  margin-top: auto;
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-gold-hover);
}
@media (hover: hover) {
  .sf-post:hover { box-shadow: var(--oc-shadow-md); transform: translateY(-2px); border-color: transparent; }
}

.sf-article { margin: 0 auto; }
.sf-article__head { margin-bottom: var(--oc-space-5); }
.sf-article__head .sf-title { margin-bottom: var(--oc-space-3); }
.sf-article__meta { color: var(--oc-text-muted); font-size: var(--oc-text-sm); }
.sf-article__hero { width: 100%; height: auto; margin-bottom: var(--oc-space-5); border-radius: var(--oc-radius-card); }
.sf-narrow .sf-article__hero { max-width: 100%; }

/* ------------------------------------------------------------------ cart */

.sf-cart { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--oc-space-6); align-items: start; }
.sf-cart-table { width: 100%; border-collapse: collapse; }
.sf-cart-table th {
  padding: var(--oc-space-2) var(--oc-space-3);
  border-bottom: 1px solid var(--oc-divider);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-text-soft);
}
.sf-cart-table td { padding: var(--oc-space-4) var(--oc-space-3); border-bottom: 1px solid var(--oc-divider); vertical-align: middle; }
.sf-cart-line__product { display: flex; align-items: center; gap: var(--oc-space-4); min-width: 0; }
.sf-cart-line__thumb { flex: 0 0 72px; }
.sf-cart-line__img { width: 72px; aspect-ratio: var(--oc-product-media-ratio, 1 / 1); padding: var(--oc-space-1); object-fit: contain; background: var(--oc-product-media-bg, var(--oc-bg-subtle)); border-radius: var(--oc-radius-card); }
.sf-cart-line__img--empty { display: block; }
.sf-cart-line__text { display: flex; flex-direction: column; min-width: 0; }
.sf-cart-line__name { font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: 600; }
.sf-cart-line__name a { color: var(--oc-text); text-decoration: none; }
.sf-cart-line__name a:hover { color: var(--oc-gold-hover); }
.sf-cart-line__variant { font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-cart-line__qty { white-space: nowrap; }
.sf-cart-line__qty form { display: none; }
.sf-cart-line__qty .sf-input, .sf-cart-line__qty .sf-btn, .sf-cart-line__qty .sf-link-btn { vertical-align: middle; }
.sf-cart-line__qty .sf-link-btn { margin-left: var(--oc-space-2); }
.sf-cart-line__total { text-align: right; }

.sf-cart-summary { padding: var(--oc-space-5); background: var(--oc-bg-subtle); border-radius: var(--oc-radius-card); }
.sf-cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--oc-font-heading); font-size: var(--oc-text-lg); }
.sf-cart-summary__note { font-size: var(--oc-text-sm); }
.sf-cart-summary form { margin: 0 0 var(--oc-space-3); }
.sf-cart-summary__continue { display: block; text-align: center; font-size: var(--oc-text-sm); }

@media (max-width: 1023px) {
  .sf-cart { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .sf-cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sf-cart-table, .sf-cart-table tbody, .sf-cart-table tr, .sf-cart-table td { display: block; width: 100%; }
  .sf-cart-table tr { padding: var(--oc-space-4) 0; border-bottom: 1px solid var(--oc-divider); }
  .sf-cart-table td { padding: var(--oc-space-1) 0; border: 0; }
  .sf-cart-table td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: var(--oc-space-3); }
  .sf-cart-table td[data-label]::before {
    content: attr(data-label);
    font-family: var(--oc-font-heading);
    font-size: var(--oc-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-wide);
    color: var(--oc-text-soft);
  }
  .sf-cart-line__qty { flex-wrap: wrap; white-space: normal; }
  .sf-cart-line__product { margin-bottom: var(--oc-space-2); }
}

/* ------------------------------------------------------------ search box */

.sf-searchbox { display: flex; gap: var(--oc-space-2); max-width: 560px; margin-bottom: var(--oc-space-6); }
.sf-searchbox .sf-input { flex: 1; min-width: 0; }

/* ----------------------------------------------- empty states and 404 */

.sf-empty { max-width: 480px; margin: var(--oc-space-7) auto; text-align: center; color: var(--oc-text-soft); }
.sf-empty__title { font-size: var(--oc-text-xl); font-weight: 400; text-transform: uppercase; letter-spacing: var(--oc-tracking); }

.sf-notfound { max-width: 560px; margin: var(--oc-space-7) auto; text-align: center; color: var(--oc-text-soft); }
.sf-notfound__code { margin-bottom: var(--oc-space-2); font-family: var(--oc-font-heading); font-size: var(--oc-text-3xl); font-weight: 300; letter-spacing: 0.12em; color: var(--oc-gold); }
.sf-notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oc-space-3); margin-top: var(--oc-space-5); }

/* -------------------------------------------------------------- age gate */

/* The age gate is the live site's: a plain white screen, the title in light caps
   at the section-heading size, one question and two buttons. "No" never sets the
   cookie: it is a link to the refusal screen (:target, so no script and no round
   trip), and that screen's button goes back to the question. */
.sf-age {
  position: fixed;
  inset: 0;
  z-index: var(--oc-z-overlay);
  display: grid;
  place-items: center;
  padding: var(--oc-space-4);
  overflow-y: auto;
  background: var(--oc-bg);
}
.sf-age__panel, .sf-age__refused-inner { width: 100%; max-width: 560px; text-align: center; }
.sf-age__title {
  margin: 0 0 var(--oc-space-4);
  color: var(--oc-text);
  font-size: var(--oc-h2-size);
  font-weight: var(--oc-h2-weight);
  line-height: var(--oc-heading-leading);
  text-transform: uppercase;
}
.sf-age__text { margin-bottom: var(--oc-space-5); color: var(--oc-text-soft); }
.sf-age__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* The gate's two buttons are the live ones: square-cornered, sentence case. */
.sf-age .sf-btn { border-radius: var(--oc-radius-control); font-size: var(--oc-text-lg); font-weight: var(--oc-weight-regular); text-transform: none; letter-spacing: 0; }
.sf-age .sf-btn--secondary { background: transparent; border-color: var(--oc-gold); color: var(--oc-gold); }
.sf-age .sf-btn--secondary:hover { background: var(--oc-gold); color: var(--oc-white); }
.sf-age__refused { display: none; }
.sf-age__refused:target {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--oc-space-4);
  background: var(--oc-bg);
}

/* =====================================================================
   Design-system extension. Everything below composes the tokens above so
   the account portal, the chat, the checkout and the builders can be drawn
   with no inline style at all. docs/STOREFRONT-STYLE.md lists every class;
   tests/storefrontStyleguide.test.js fails if the doc, this sheet and the
   style guide page (lib/storefront/views/styleguide.js) drift apart.

   State vocabulary, so scripts never need to write a style: native or ARIA
   state first (aria-selected, aria-current, aria-pressed, aria-expanded,
   aria-busy, aria-invalid, aria-disabled, hidden, [open], :checked), and an
   `is-` class only where HTML has no state for it (is-selected, is-done,
   is-current, is-complete). A value that is a number (progress, quantity)
   goes in a <progress>/<meter>/<input>, never in a style attribute.
   ===================================================================== */

@keyframes sf-spin { to { transform: rotate(360deg); } }
@keyframes sf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sf-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sf-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sf-slide-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sf-slide-in-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sf-typing { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ------------------------------------------------------------- utilities */
/* Deliberately few. Spacing is a pattern (stack, cluster), never a margin
   per element; anything more specific is a component. */

.sf-stack { display: flex; flex-direction: column; gap: var(--oc-space-4); }
.sf-stack--sm { gap: var(--oc-space-2); }
.sf-stack--lg { gap: var(--oc-space-6); }
.sf-stack > * { margin-top: 0; margin-bottom: 0; }

.sf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-3); }
.sf-cluster--sm { gap: var(--oc-space-2); }
.sf-cluster--between { justify-content: space-between; }
.sf-cluster--center { justify-content: center; }
.sf-cluster--end { justify-content: flex-end; }
.sf-grow { flex: 1 1 0; min-width: 0; }

.sf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--oc-grid-gap); }
.sf-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .sf-cols--2, .sf-cols--3 { grid-template-columns: minmax(0, 1fr); }
}

.sf-text-left { text-align: left; }
.sf-text-center { text-align: center; }
.sf-text-right { text-align: right; }
.sf-nowrap { white-space: nowrap; }
.sf-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.sf-hide-mobile { display: initial; }
.sf-show-mobile { display: none; }
@media (max-width: 767px) {
  .sf-hide-mobile { display: none; }
  .sf-show-mobile { display: initial; }
}

/* --------------------------------------------------------------- buttons */

.sf-btn--lg { padding: 18px var(--oc-space-6); font-size: var(--oc-text-md); }
.sf-btn--ghost { background: transparent; border-color: transparent; color: var(--oc-navy); }
.sf-btn--ghost:hover { background: var(--oc-bg-subtle); border-color: var(--oc-bg-subtle); color: var(--oc-gold-hover); }
.sf-btn--danger { background: var(--oc-danger); border-color: var(--oc-danger); }
.sf-btn--danger:hover { background: var(--oc-danger-ink); border-color: var(--oc-danger-ink); }

/* Loading: the label stays (so the button keeps its width and a screen
   reader still hears what it does) and a ring leads it. Set aria-busy. */
.sf-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.sf-btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sf-spin 0.7s linear infinite;
}

.sf-iconbtn--sm { width: 36px; height: 36px; }
.sf-iconbtn--outline { border: 1px solid var(--oc-border-input); }
.sf-iconbtn--on-navy { color: var(--oc-on-navy-soft); }
.sf-iconbtn--on-navy:hover { background: var(--oc-on-navy-faint); color: var(--oc-white); }

.sf-spinner {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  border: 3px solid var(--oc-divider);
  border-top-color: var(--oc-gold);
  border-radius: 50%;
  animation: sf-spin 0.8s linear infinite;
}
.sf-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.sf-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.sf-loading { display: flex; align-items: center; justify-content: center; gap: var(--oc-space-3); padding: var(--oc-space-6); color: var(--oc-text-soft); }

/* ----------------------------------------------------------------- forms */

.sf-textarea { min-height: 96px; border-radius: var(--oc-radius-card); resize: vertical; line-height: 1.5; }
.sf-input::placeholder, .sf-textarea::placeholder { color: var(--oc-text-muted); }
.sf-input:disabled, .sf-select:disabled, .sf-textarea:disabled {
  background: var(--oc-bg-subtle);
  color: var(--oc-text-muted);
  cursor: not-allowed;
}
.sf-input[aria-invalid="true"], .sf-select[aria-invalid="true"], .sf-textarea[aria-invalid="true"],
.sf-field--invalid .sf-input, .sf-field--invalid .sf-select, .sf-field--invalid .sf-textarea {
  border-color: var(--oc-danger);
}
.sf-input[aria-invalid="true"]:focus, .sf-select[aria-invalid="true"]:focus, .sf-textarea[aria-invalid="true"]:focus,
.sf-field--invalid .sf-input:focus, .sf-field--invalid .sf-select:focus, .sf-field--invalid .sf-textarea:focus {
  outline-color: var(--oc-danger);
}
.sf-field--valid .sf-input, .sf-field--valid .sf-select, .sf-field--valid .sf-textarea { border-color: var(--oc-success); }

.sf-field__label--required::after { content: " *"; color: var(--oc-danger); }
.sf-field__hint { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-field__error, .sf-field__ok { margin: 0; font-size: var(--oc-text-sm); font-weight: 600; }
.sf-field__error { color: var(--oc-danger-ink); }
.sf-field__ok { color: var(--oc-success-ink); }
.sf-field__error[hidden], .sf-field__ok[hidden], .sf-field__hint[hidden] { display: none; }

.sf-form { display: grid; gap: var(--oc-space-4); }
.sf-form .sf-field { margin-bottom: 0; }
.sf-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oc-space-4); }
.sf-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-form__row--address { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sf-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-3); margin-top: var(--oc-space-2); }
@media (max-width: 479px) {
  .sf-form__row, .sf-form__row--3, .sf-form__row--address { grid-template-columns: minmax(0, 1fr); }
}

.sf-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sf-fieldset__legend { margin-bottom: var(--oc-space-2); padding: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }

.sf-check--form { align-items: flex-start; padding: var(--oc-space-2) 0; font-size: var(--oc-text-md); color: var(--oc-text); }
.sf-check--form input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }

.sf-input-group { display: flex; align-items: stretch; width: 100%; }
.sf-input-group > .sf-input, .sf-input-group > .sf-select { flex: 1 1 auto; width: auto; min-width: 0; margin-left: -1px; border-radius: 0; }
.sf-input-group > .sf-input:focus, .sf-input-group > .sf-select:focus { position: relative; z-index: 1; }
.sf-input-group > :first-child { margin-left: 0; border-top-left-radius: var(--oc-radius-control); border-bottom-left-radius: var(--oc-radius-control); }
.sf-input-group > :last-child { border-top-right-radius: var(--oc-radius-control); border-bottom-right-radius: var(--oc-radius-control); }
.sf-input-group > .sf-btn { flex: none; margin-left: -1px; border-radius: 0 var(--oc-radius-control) var(--oc-radius-control) 0; }
.sf-input-group__addon {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0 var(--oc-space-3);
  border: 1px solid var(--oc-border-input);
  background: var(--oc-bg-subtle);
  color: var(--oc-text-soft);
  font-size: var(--oc-text-sm);
  white-space: nowrap;
}
.sf-input-group > .sf-input-group__addon:first-child { border-radius: var(--oc-radius-control) 0 0 var(--oc-radius-control); }
.sf-input-group > .sf-input-group__addon:last-child { margin-left: -1px; border-radius: 0 var(--oc-radius-control) var(--oc-radius-control) 0; }

.sf-switch { position: relative; display: inline-flex; align-items: center; gap: var(--oc-space-3); min-height: var(--oc-control-height); cursor: pointer; }
.sf-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-switch__track {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: var(--oc-radius-pill);
  background: var(--oc-border-input);
  transition: background var(--oc-transition);
}
.sf-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--oc-white);
  box-shadow: var(--oc-shadow-sm);
  transition: transform var(--oc-transition);
}
.sf-switch__input:checked + .sf-switch__track { background: var(--oc-navy); }
.sf-switch__input:checked + .sf-switch__track::after { transform: translateX(20px); }
.sf-switch__input:focus-visible + .sf-switch__track { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-switch__input:disabled + .sf-switch__track { opacity: 0.5; }
.sf-switch__label { font-size: var(--oc-text-md); }

.sf-qty { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-control); background: var(--oc-bg); }
.sf-qty__btn { width: 36px; min-height: 36px; border: 0; background: var(--oc-bg-subtle); color: var(--oc-navy); font-size: var(--oc-text-lg); line-height: 1; cursor: pointer; }
.sf-qty__btn:hover { background: var(--oc-divider); }
.sf-qty__btn:disabled { color: var(--oc-text-muted); cursor: not-allowed; }
.sf-qty__input { width: 48px; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--oc-text); font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.sf-qty__input::-webkit-inner-spin-button, .sf-qty__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

.sf-rating { display: inline-flex; gap: var(--oc-space-1); }
.sf-rating__star { padding: 0 var(--oc-space-1); border: 0; background: none; color: var(--oc-border-input); font-size: var(--oc-text-xl); line-height: 1; cursor: pointer; transition: color var(--oc-transition), transform var(--oc-transition); }
.sf-rating__star::before { content: "\2605"; }
.sf-rating__star:hover, .sf-rating__star[aria-checked="true"] { color: var(--oc-gold); }
.sf-rating__star:hover { transform: scale(1.15); }

/* ------------------------------------------- tabs, segmented, chips, menus */

.sf-tabs { min-width: 0; }
.sf-tabs__list { display: flex; gap: var(--oc-space-5); overflow-x: auto; border-bottom: 1px solid var(--oc-divider); scrollbar-width: thin; }
.sf-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--oc-space-2);
  margin-bottom: -1px;
  padding: var(--oc-space-3) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--oc-text-soft);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  white-space: nowrap;
  cursor: pointer;
}
.sf-tabs__tab:hover { color: var(--oc-navy); }
.sf-tabs__tab[aria-selected="true"], .sf-tabs__tab[aria-current="page"] { border-bottom-color: var(--oc-gold); color: var(--oc-navy); }
.sf-tabs__panel { padding-top: var(--oc-space-5); }
.sf-tabs__panel[hidden] { display: none; }

/* Boxed tabs are the payment-method switcher: equal cells, one selected. */
.sf-tabs--boxed .sf-tabs__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--oc-space-2); overflow: visible; border-bottom: 0; }
.sf-tabs--boxed .sf-tabs__tab {
  justify-content: center;
  min-height: 52px;
  margin: 0;
  padding: var(--oc-space-3) var(--oc-space-4);
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-control);
  background: var(--oc-bg);
}
.sf-tabs--boxed .sf-tabs__tab:hover { border-color: var(--oc-navy); }
/* Three boxed tabs on a phone ("Bank transfer" was 15px wider than its box): the
   label may wrap onto two centred lines instead of spilling out. */
@media (max-width: 479px) {
  .sf-tabs--boxed .sf-tabs__tab { padding-inline: var(--oc-space-2); white-space: normal; text-align: center; line-height: 1.25; }
}
.sf-tabs--boxed .sf-tabs__tab[aria-selected="true"] { border-color: var(--oc-gold); background: var(--oc-gold-bg); box-shadow: 0 0 0 1px var(--oc-gold); }

.sf-segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-control); background: var(--oc-bg-subtle); }
.sf-segmented__option { position: relative; display: inline-flex; cursor: pointer; }
.sf-segmented__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sf-segmented__label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--oc-space-4);
  border-radius: var(--oc-radius-control);
  color: var(--oc-text-soft);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  transition: background var(--oc-transition), color var(--oc-transition);
}
.sf-segmented__option:hover .sf-segmented__label { color: var(--oc-navy); }
.sf-segmented__option:has(.sf-segmented__input:checked) .sf-segmented__label { background: var(--oc-navy); color: var(--oc-white); }
.sf-segmented__option:has(.sf-segmented__input:focus-visible) { outline: var(--oc-focus-ring); outline-offset: 2px; border-radius: var(--oc-radius-control); }

.sf-chips { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); }
/* The chips are an <ul> in the search page's popular-collections block and the blog's
   topic row, so the browser's list bullet and indent drew a "•" left of each row of
   chips. The chip is the marker. */
ul.sf-chips, ol.sf-chips { padding: 0; list-style: none; }
.sf-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--oc-space-2);
  min-height: 36px;
  padding: 0 var(--oc-space-3);
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-control);
  background: var(--oc-bg);
  color: var(--oc-text);
  font-family: var(--oc-font-body);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--oc-transition), border-color var(--oc-transition), color var(--oc-transition);
}
.sf-chip:hover { border-color: var(--oc-navy); color: var(--oc-navy); }
.sf-chip[aria-pressed="true"], .sf-chip[aria-current="true"], .sf-chip:has(.sf-chip__input:checked) { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); }
.sf-chip:has(.sf-chip__input:focus-visible) { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-chip[aria-disabled="true"] { border-color: var(--oc-divider); background: var(--oc-bg-subtle); color: var(--oc-text-muted); text-decoration: line-through; cursor: not-allowed; }
.sf-chip__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-chip__remove { padding: 0; border: 0; background: none; color: inherit; font-size: var(--oc-text-lg); line-height: 1; cursor: pointer; }
.sf-chip--sm { min-height: 28px; padding: 0 var(--oc-space-2); font-size: var(--oc-text-xs); }

.sf-dropdown { position: relative; display: inline-block; }
.sf-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--oc-space-3);
  min-height: var(--oc-control-height);
  padding: 0 var(--oc-space-3);
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-control);
  background: var(--oc-bg);
  font-size: var(--oc-text-md);
  cursor: pointer;
  list-style: none;
}
.sf-dropdown__toggle::-webkit-details-marker { display: none; }
.sf-dropdown__toggle::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--oc-text-soft); border-bottom: 2px solid var(--oc-text-soft); transform: rotate(45deg); }
.sf-dropdown[open] > .sf-dropdown__toggle { border-color: var(--oc-gold); }
.sf-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--oc-space-1));
  left: 0;
  z-index: var(--oc-z-popover);
  min-width: 220px;
  max-width: calc(100vw - 2 * var(--oc-gutter));
  max-height: 320px;
  padding: var(--oc-space-2);
  overflow-y: auto;
  border: 1px solid var(--oc-divider);
  border-radius: var(--oc-radius-card);
  background: var(--oc-bg);
  box-shadow: var(--oc-shadow-md);
}
.sf-dropdown--end .sf-dropdown__panel { left: auto; right: 0; }
/* A CLOSED dropdown's panel takes no room at all. Safari still laid the header's
   language and country panels out past the right edge of a phone (up to 489px on a
   390px screen), which is width an iPhone lets you drag sideways to. */
.sf-dropdown:not([open]) > .sf-dropdown__panel { display: none; }

/* A group of accordions reads as one list; pagination gains the states a
   portal list needs (current page by ARIA, a disabled end, a summary line). */
.sf-accordion-group { border-top: 1px solid var(--oc-divider); }
.sf-pagination__link[aria-current="page"] { background: var(--oc-navy); color: var(--oc-white); }
.sf-pagination__link[aria-disabled="true"] { color: var(--oc-text-muted); pointer-events: none; }
.sf-pagination__summary { margin: var(--oc-space-3) 0 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); text-align: center; }

/* ------------------------------------------------------- dialog and drawer */
/* Both are native <dialog>: showModal() gives the focus trap, Escape, the
   inert page behind it and the backdrop. A button with commandfor/command
   opens one with no script. `--static` draws one in the page flow, for the
   style guide and for server-rendered previews. */

.sf-dialog {
  width: min(var(--oc-dialog-width), calc(100vw - 2 * var(--oc-space-4)));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--oc-space-4));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--oc-radius-card);
  background: var(--oc-bg);
  color: var(--oc-text);
  box-shadow: var(--oc-shadow-lg);
}
.sf-dialog[open] { display: flex; flex-direction: column; animation: sf-pop 0.2s ease; }
.sf-dialog--sm { width: min(400px, calc(100vw - 2 * var(--oc-space-4))); }
.sf-dialog--lg { width: min(760px, calc(100vw - 2 * var(--oc-space-4))); }
.sf-dialog--static { position: static; margin: 0; animation: none; }

.sf-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(var(--oc-drawer-width), 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--oc-bg);
  color: var(--oc-text);
  box-shadow: var(--oc-shadow-lg);
}
.sf-drawer[open] { display: flex; flex-direction: column; animation: sf-slide-in-right 0.25s ease; }
.sf-drawer--left { inset: 0 auto 0 0; }
.sf-drawer--left[open] { animation-name: sf-slide-in-left; }
.sf-drawer--static { position: static; width: 100%; max-width: var(--oc-drawer-width); height: auto; animation: none; box-shadow: none; border: 1px solid var(--oc-divider); }

.sf-dialog::backdrop, .sf-drawer::backdrop { background: var(--oc-overlay); }
html:has(.sf-dialog[open]:modal), html:has(.sf-drawer[open]:modal) { overflow: hidden; }

.sf-dialog__form, .sf-drawer__form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.sf-dialog__head, .sf-drawer__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-3);
  padding: var(--oc-space-4) var(--oc-space-5);
  border-bottom: 1px solid var(--oc-divider);
}
.sf-dialog__title, .sf-drawer__title { margin: 0; font-size: var(--oc-text-lg); font-weight: 600; }
.sf-dialog__close, .sf-drawer__close { flex: none; margin-right: calc(-1 * var(--oc-space-2)); }
.sf-dialog__body, .sf-drawer__body { flex: 1 1 auto; min-height: 0; padding: var(--oc-space-5); overflow-y: auto; }
.sf-dialog__foot, .sf-drawer__foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--oc-space-3);
  padding: var(--oc-space-4) var(--oc-space-5);
  border-top: 1px solid var(--oc-divider);
  background: var(--oc-bg-subtle);
}
@media (max-width: 479px) {
  .sf-dialog__head, .sf-drawer__head, .sf-dialog__body, .sf-drawer__body, .sf-dialog__foot, .sf-drawer__foot { padding-left: var(--oc-space-4); padding-right: var(--oc-space-4); }
  .sf-dialog__foot > .sf-btn, .sf-drawer__foot > .sf-btn { flex: 1 1 auto; }
}

/* ----------------------------------------------- alert, banner and toast */
/* One block, three presentations: an inline alert, a full-width banner and
   a floating toast. The four tones set private properties the rest reads. */

.sf-alert, .sf-alert--info {
  --sf-tone-bg: var(--oc-info-bg);
  --sf-tone-ink: var(--oc-info-ink);
  --sf-tone-line: var(--oc-info);
  display: flex;
  align-items: flex-start;
  gap: var(--oc-space-3);
  padding: var(--oc-space-3) var(--oc-space-4);
  border: 1px solid var(--sf-tone-line);
  border-left-width: 4px;
  border-radius: var(--oc-radius-card);
  background: var(--sf-tone-bg);
  color: var(--oc-text);
}
.sf-alert--success { --sf-tone-bg: var(--oc-success-bg); --sf-tone-ink: var(--oc-success-ink); --sf-tone-line: var(--oc-success); }
.sf-alert--warning { --sf-tone-bg: var(--oc-warning-bg); --sf-tone-ink: var(--oc-warning-ink); --sf-tone-line: var(--oc-warning); }
.sf-alert--danger { --sf-tone-bg: var(--oc-danger-bg); --sf-tone-ink: var(--oc-danger-ink); --sf-tone-line: var(--oc-danger); }
.sf-alert__icon { flex: none; margin-top: 2px; color: var(--sf-tone-line); }
.sf-alert__body { flex: 1 1 auto; min-width: 0; }
.sf-alert__title { margin: 0 0 2px; font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 700; color: var(--sf-tone-ink); }
.sf-alert__text { margin: 0; font-size: var(--oc-text-md); }
.sf-alert__text a { color: var(--sf-tone-ink); }
.sf-alert__close { flex: none; margin: calc(-1 * var(--oc-space-2)) calc(-1 * var(--oc-space-2)) 0 0; }
.sf-alert--banner { justify-content: center; border-width: 0 0 1px; border-radius: 0; text-align: center; }
.sf-alert--banner .sf-alert__body { flex: 0 1 auto; }

/* The delivery-destination bar (views/shell.js destinationBarHtml): a calm,
   full-width notice that sits in the page flow under the header, never over
   the content. Text and the change control share one centred row; on a phone
   the country list takes the whole row and the buttons sit beneath it. */
.sf-destbar { align-items: center; justify-content: center; padding: var(--oc-space-3) var(--oc-gutter); }
.sf-destbar .sf-alert__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-2) var(--oc-space-5);
  width: 100%;
  max-width: var(--oc-page-width);
}
.sf-destbar .sf-alert__title { margin: 0; font-size: var(--oc-text-md); }
.sf-destbar .sf-alert__text { color: var(--sf-tone-ink); font-weight: 600; }
.sf-destbar form { justify-content: center; }
.sf-destbar .sf-select { width: auto; min-width: 220px; max-width: 100%; min-height: 36px; padding-top: var(--oc-space-1); padding-bottom: var(--oc-space-1); font-size: var(--oc-text-sm); }
.sf-destbar .sf-btn--sm { min-height: 36px; }
@media (max-width: 640px) {
  .sf-destbar { padding-left: var(--oc-space-4); padding-right: var(--oc-space-4); }
  .sf-destbar form { flex: 1 1 100%; min-width: 0; }
  .sf-destbar .sf-select { flex: 1 1 100%; min-width: 0; width: 100%; }
}
.sf-alert--toast { border-radius: var(--oc-radius-card); background: var(--oc-bg); box-shadow: var(--oc-shadow-lg); animation: sf-fade-in 0.25s ease; }

.sf-toasts {
  position: fixed;
  right: var(--oc-space-4);
  bottom: var(--oc-space-4);
  z-index: var(--oc-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-2);
  width: min(380px, calc(100vw - 2 * var(--oc-space-4)));
  pointer-events: none;
}
.sf-toasts > * { pointer-events: auto; }
.sf-toasts--static { position: static; width: 100%; }

/* ------------------------------------------------ badges, status, avatars */

.sf-badge--outline { background: transparent; border: 1px solid currentColor; color: var(--oc-navy); }
.sf-badge--gold { background: var(--oc-gold); color: var(--oc-navy); }
.sf-badge--info { background: var(--oc-info-bg); color: var(--oc-info-ink); }
.sf-badge--success { background: var(--oc-success-bg); color: var(--oc-success-ink); }
.sf-badge--warning { background: var(--oc-warning-bg); color: var(--oc-warning-ink); }
.sf-badge--danger { background: var(--oc-danger-bg); color: var(--oc-danger-ink); }
.sf-badge--muted { background: var(--oc-bg-subtle); color: var(--oc-text-soft); }

/* Order status and payment risk are the same pill: a dot, a word, a tone.
   The words come from the system (lib/shopify-order-risk.js owns HIGH /
   MEDIUM / LOW); colour is never the only signal. */
.sf-status, .sf-risk {
  --sf-tone-bg: var(--oc-bg-subtle);
  --sf-tone-ink: var(--oc-text-soft);
  --sf-tone-line: var(--oc-border-input);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--oc-space-3);
  border: 1px solid var(--sf-tone-line);
  border-radius: var(--oc-radius-pill);
  background: var(--sf-tone-bg);
  color: var(--sf-tone-ink);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking);
  white-space: nowrap;
}
.sf-status::before, .sf-risk::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sf-status--draft { --sf-tone-bg: var(--oc-bg-subtle); --sf-tone-ink: var(--oc-text-soft); --sf-tone-line: var(--oc-border-input); }
.sf-status--awaiting-payment, .sf-risk--medium { --sf-tone-bg: var(--oc-warning-bg); --sf-tone-ink: var(--oc-warning-ink); --sf-tone-line: var(--oc-warning); }
.sf-status--paid, .sf-risk--low { --sf-tone-bg: var(--oc-success-bg); --sf-tone-ink: var(--oc-success-ink); --sf-tone-line: var(--oc-success); }
.sf-status--preparing { --sf-tone-bg: var(--oc-info-bg); --sf-tone-ink: var(--oc-info-ink); --sf-tone-line: var(--oc-info); }
.sf-status--shipped { --sf-tone-bg: var(--oc-navy); --sf-tone-ink: var(--oc-white); --sf-tone-line: var(--oc-navy); }
.sf-status--delivered { --sf-tone-bg: var(--oc-success-ink); --sf-tone-ink: var(--oc-white); --sf-tone-line: var(--oc-success-ink); }
.sf-status--cancelled { --sf-tone-bg: var(--oc-danger-bg); --sf-tone-ink: var(--oc-danger-ink); --sf-tone-line: var(--oc-danger); }
.sf-risk--high { --sf-tone-bg: var(--oc-danger-ink); --sf-tone-ink: var(--oc-white); --sf-tone-line: var(--oc-danger-ink); }

.sf-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--oc-gold);
  color: var(--oc-navy);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 700;
  text-transform: uppercase;
}
.sf-avatar--sm { width: 28px; height: 28px; font-size: var(--oc-text-xs); }
.sf-avatar--lg { width: 56px; height: 56px; font-size: var(--oc-text-lg); }
.sf-avatar--navy { background: var(--oc-navy); color: var(--oc-gold-light); }
.sf-avatar__img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------- panels, stats, listings */
/* .sf-card is the product card; .sf-panel is the general container. */

.sf-panel { min-width: 0; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); }
.sf-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--oc-space-3); padding: var(--oc-space-4) var(--oc-space-5); border-bottom: 1px solid var(--oc-divider); }
.sf-panel__title { margin: 0; font-size: var(--oc-text-md); font-weight: 700; }
.sf-panel__body { padding: var(--oc-space-5); }
.sf-panel__foot { padding: var(--oc-space-3) var(--oc-space-5); border-top: 1px solid var(--oc-divider); border-radius: 0 0 var(--oc-radius-card) var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-panel--raised { border-color: transparent; box-shadow: var(--oc-shadow-md); }
.sf-panel--subtle { border-color: transparent; background: var(--oc-bg-subtle); }
.sf-panel--accent { border-left: 4px solid var(--oc-gold); }
.sf-panel--navy { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-on-navy-soft); }
.sf-panel--navy .sf-panel__title, .sf-panel--navy .sf-panel__head { color: var(--oc-white); border-color: var(--oc-on-navy-line); }
.sf-panel--flush .sf-panel__body { padding: 0; }
.sf-panel--interactive { display: block; color: inherit; text-decoration: none; transition: box-shadow var(--oc-transition), transform var(--oc-transition), border-color var(--oc-transition); }
@media (hover: hover) {
  .sf-panel--interactive:hover { border-color: transparent; box-shadow: var(--oc-shadow-md); transform: translateY(-2px); color: inherit; }
}
@media (max-width: 479px) {
  .sf-panel__head, .sf-panel__body, .sf-panel__foot { padding-left: var(--oc-space-4); padding-right: var(--oc-space-4); }
}

.sf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--oc-space-4); }
.sf-stat { min-width: 0; padding: var(--oc-space-4) var(--oc-space-5); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); }
.sf-stat__label { margin: 0 0 var(--oc-space-1); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }
.sf-stat__value { margin: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-xl); font-weight: 700; line-height: 1.2; color: var(--oc-navy); overflow-wrap: anywhere; }
.sf-stat__note { margin: var(--oc-space-1) 0 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-stat__note--up { color: var(--oc-success-ink); }
.sf-stat__note--down { color: var(--oc-danger-ink); }

.sf-dl { display: grid; margin: 0; }
.sf-dl__row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr); gap: var(--oc-space-3); padding: var(--oc-space-3) 0; border-bottom: 1px solid var(--oc-divider); }
.sf-dl__row:last-child { border-bottom: 0; }
.sf-dl__term { font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }
.sf-dl__desc { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.sf-dl--stacked .sf-dl__row { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-1); }
@media (max-width: 479px) {
  .sf-dl__row { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-1); }
}

/* Steps: the order's journey, the checkout's progress, the builder's route.
   The current step is aria-current="step"; finished ones carry is-done. */
.sf-steps { display: flex; gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; counter-reset: sf-step; }
.sf-steps__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--oc-space-2);
  min-width: 0;
  font-size: var(--oc-text-sm);
  color: var(--oc-text-muted);
  text-align: center;
  counter-increment: sf-step;
}
.sf-steps__item::before {
  content: counter(sf-step);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--oc-border-input);
  border-radius: 50%;
  background: var(--oc-bg);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  color: var(--oc-text-soft);
}
.sf-steps__item::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--oc-divider); }
.sf-steps__item:last-child::after { display: none; }
.sf-steps__label { max-width: 100%; overflow-wrap: anywhere; }
.sf-steps__item.is-done { color: var(--oc-text); }
.sf-steps__item.is-done::before { content: "\2713"; border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); }
.sf-steps__item.is-done::after { background: var(--oc-navy); }
.sf-steps__item[aria-current="step"] { color: var(--oc-navy); font-weight: 700; }
.sf-steps__item[aria-current="step"]::before { border-color: var(--oc-gold); background: var(--oc-gold-bg); color: var(--oc-navy); }
@media (max-width: 479px) {
  .sf-steps__item { font-size: var(--oc-text-xs); }
}

/* A <progress> carries the number, so no script writes a width. */
.sf-meter { display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--oc-radius-pill); background: var(--oc-divider); color: var(--oc-gold); -webkit-appearance: none; appearance: none; }
.sf-meter::-webkit-progress-bar { background: var(--oc-divider); }
.sf-meter::-webkit-progress-value { background: var(--oc-gold); transition: width var(--oc-transition); }
.sf-meter::-moz-progress-bar { background: var(--oc-gold); }
.sf-meter--complete { color: var(--oc-success); }
.sf-meter--complete::-webkit-progress-value { background: var(--oc-success); }
.sf-meter--complete::-moz-progress-bar { background: var(--oc-success); }

/* ----------------------------------------------------------------- tables */
/* Stacks into labelled cards under 640px (td[data-label]); add --scroll to
   keep a wide numeric table as a table and let it scroll instead. */

.sf-table-wrap { overflow-x: auto; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); }
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--oc-text-md); }
.sf-table th {
  padding: var(--oc-space-3) var(--oc-space-4);
  border-bottom: 1px solid var(--oc-divider);
  background: var(--oc-bg-subtle);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-text-soft);
  white-space: nowrap;
}
.sf-table td { padding: var(--oc-space-3) var(--oc-space-4); border-bottom: 1px solid var(--oc-divider); vertical-align: middle; }
.sf-table tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) {
  .sf-table tbody tr:hover { background: var(--oc-bg-subtle); }
}
.sf-table__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sf-table__actions { text-align: right; white-space: nowrap; }
/* A document number or a date is one token: breaking "INV-3310" or "6 November
   2026" across lines makes a row unreadable. The wrap scrolls instead. */
.sf-table__nowrap { white-space: nowrap; }
.sf-table--compact th, .sf-table--compact td { padding: var(--oc-space-2) var(--oc-space-3); font-size: var(--oc-text-sm); }
.sf-table--scroll { min-width: 560px; }
/* Seven columns in an 800px content column (the account column at its widest):
   a smaller gutter between cells, body text one step down and a snugger button,
   so the row fits without a sideways scroll. Narrower than that the wrap scrolls
   and a phone stacks the rows into cards. */
.sf-table--tight th, .sf-table--tight td { padding-left: var(--oc-space-2); padding-right: var(--oc-space-2); }
.sf-table--tight td { font-size: var(--oc-text-sm); }
.sf-table--tight th:first-child, .sf-table--tight td:first-child { padding-left: var(--oc-space-3); }
.sf-table--tight th:last-child, .sf-table--tight td:last-child { padding-right: var(--oc-space-3); }
.sf-table--tight .sf-btn--sm { padding-left: var(--oc-space-3); padding-right: var(--oc-space-3); }

/* A table inside a flush panel is already framed by the panel. */
.sf-panel--flush .sf-table-wrap { border: 0; border-radius: 0; background: none; }

@media (max-width: 639px) {
  /* The item cell carries no label, so a phone reads it as a left-aligned
     heading of its card with the SKU under it, then Quantity/Price/Total rows. */
  .sf-table:not(.sf-table--scroll) .sf-table__item { padding-bottom: var(--oc-space-2); font-family: var(--oc-font-heading); font-weight: 600; }
  .sf-table:not(.sf-table--scroll) .sf-table__sku { display: block; font-family: var(--oc-font-body); font-size: var(--oc-text-sm); font-weight: 400; }
  .sf-table:not(.sf-table--scroll) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sf-table:not(.sf-table--scroll), .sf-table:not(.sf-table--scroll) tbody, .sf-table:not(.sf-table--scroll) tr, .sf-table:not(.sf-table--scroll) td { display: block; width: 100%; }
  .sf-table:not(.sf-table--scroll) tr { padding: var(--oc-space-3) var(--oc-space-4); border-bottom: 1px solid var(--oc-divider); }
  .sf-table:not(.sf-table--scroll) tbody tr:last-child { border-bottom: 0; }
  .sf-table:not(.sf-table--scroll) td { padding: var(--oc-space-1) 0; border: 0; text-align: left; }
  .sf-table:not(.sf-table--scroll) td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: var(--oc-space-3); text-align: right; }
  .sf-table:not(.sf-table--scroll) td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--oc-font-heading);
    font-size: var(--oc-text-xs);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-wide);
    color: var(--oc-text-soft);
  }
}

/* A product or line in a list: cart drawer, checkout summary, order lines,
   the builder's basket. The quantity rides the thumbnail as a badge. */
.sf-lineitem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--oc-space-3); align-items: center; padding: var(--oc-space-3) 0; }
.sf-lineitem__thumb { position: relative; width: 56px; aspect-ratio: var(--oc-product-media-ratio, 1 / 1); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-product-media-bg, var(--oc-bg)); }
.sf-lineitem__img { width: 100%; height: 100%; padding: var(--oc-space-1); object-fit: contain; }
.sf-lineitem__qty { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--oc-radius-pill); background: var(--oc-navy); color: var(--oc-white); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 700; line-height: 20px; text-align: center; }
.sf-lineitem__text { min-width: 0; }
.sf-lineitem__name { margin: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.sf-lineitem__meta { margin: 0; font-size: var(--oc-text-xs); color: var(--oc-text-soft); }
.sf-lineitem__price { font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 700; text-align: right; white-space: nowrap; }

.sf-totals { margin: 0; padding: var(--oc-space-3) 0 0; border-top: 1px solid var(--oc-divider); }
.sf-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--oc-space-3); padding: var(--oc-space-1) 0; font-size: var(--oc-text-md); }
.sf-totals__label { margin: 0; color: var(--oc-text-soft); }
.sf-totals__value { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.sf-totals__row--discount .sf-totals__value { color: var(--oc-success-ink); }
.sf-totals__row--total { margin-top: var(--oc-space-2); padding-top: var(--oc-space-3); border-top: 1px solid var(--oc-divider); font-family: var(--oc-font-heading); font-size: var(--oc-text-lg); font-weight: 700; }
.sf-totals__row--total .sf-totals__label { color: var(--oc-text); }
/* Inside a flush panel nothing else pads the totals, so they take the panel's
   own inner padding and line up with the rows above. */
.sf-totals--panel { padding: var(--oc-space-3) var(--oc-space-5) var(--oc-space-4); }
@media (max-width: 479px) {
  .sf-totals--panel { padding-left: var(--oc-space-4); padding-right: var(--oc-space-4); }
}
.sf-totals__note { margin: var(--oc-space-1) 0 0; font-size: var(--oc-text-xs); color: var(--oc-text-muted); }

.sf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oc-space-2) var(--oc-space-5); margin: 0; padding: 0; list-style: none; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-trust__item { display: inline-flex; align-items: center; gap: var(--oc-space-2); }
.sf-trust__icon { flex: none; color: var(--oc-gold); }

/* ------------------------------------------- empty states and skeletons */

.sf-empty__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--oc-space-4); border-radius: 50%; background: var(--oc-bg-subtle); color: var(--oc-gold); }
.sf-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oc-space-3); margin-top: var(--oc-space-4); }
.sf-empty--compact { margin: var(--oc-space-5) auto; }
.sf-empty--boxed { padding: var(--oc-space-6) var(--oc-space-4); border: 1px dashed var(--oc-border-input); border-radius: var(--oc-radius-card); }

.sf-skeleton {
  display: block;
  border-radius: var(--oc-radius-input);
  background: linear-gradient(90deg, var(--oc-bg-subtle) 25%, var(--oc-divider) 50%, var(--oc-bg-subtle) 75%);
  background-size: 200% 100%;
  animation: sf-shimmer 1.6s linear infinite;
}
.sf-skeleton--line { height: 14px; margin-bottom: var(--oc-space-2); }
.sf-skeleton--short { width: 40%; }
.sf-skeleton--title { width: 60%; height: 22px; margin-bottom: var(--oc-space-3); }
.sf-skeleton--block { height: 120px; }
.sf-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }

/* --------------------------------------------------------- account layout */
/* The customer portal shell: a sidebar of sections beside the content,
   collapsing to a wrapping tab strip on a phone. */

.sf-account { display: grid; grid-template-columns: var(--oc-sidebar-width) minmax(0, 1fr); gap: var(--oc-space-6); align-items: start; }
.sf-account__nav { position: sticky; top: calc(var(--oc-space-8) + var(--oc-space-5)); min-width: 0; padding: var(--oc-space-2); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); }
.sf-account__user { display: flex; align-items: center; gap: var(--oc-space-3); min-width: 0; margin-bottom: var(--oc-space-2); padding: var(--oc-space-3); border-bottom: 1px solid var(--oc-divider); }
.sf-account__user-text { min-width: 0; }
.sf-account__user-name { margin: 0; overflow: hidden; font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sf-account__user-email { margin: 0; overflow: hidden; font-size: var(--oc-text-xs); color: var(--oc-text-soft); text-overflow: ellipsis; white-space: nowrap; }
.sf-account__nav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sf-account__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-3);
  padding: var(--oc-space-3) var(--oc-space-4);
  border-left: 3px solid transparent;
  border-radius: var(--oc-radius-button);
  color: var(--oc-text);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  text-decoration: none;
}
.sf-account__nav-link:hover { background: var(--oc-bg-subtle); color: var(--oc-gold-hover); }
.sf-account__nav-link[aria-current="page"] { border-left-color: var(--oc-gold); background: var(--oc-gold-bg); color: var(--oc-navy); }
.sf-account__nav-count { padding: 1px 7px; border-radius: var(--oc-radius-pill); background: var(--oc-bg-subtle); font-size: var(--oc-text-xs); color: var(--oc-text-soft); }
.sf-account__content { display: flex; flex-direction: column; gap: var(--oc-space-5); min-width: 0; }
.sf-account__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--oc-space-3); padding-bottom: var(--oc-space-4); border-bottom: 1px solid var(--oc-divider); }
.sf-account__title { margin: 0; font-size: var(--oc-text-xl); font-weight: 400; text-transform: uppercase; letter-spacing: var(--oc-tracking); }
.sf-account__welcome { margin: var(--oc-space-1) 0 0; color: var(--oc-text-soft); }
/* Two or more accounts or reasons: a plain stack, no disc and no 40px indent. */
.sf-account__list { display: grid; gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; }

@media (max-width: 899px) {
  /* The chat launcher floats bottom-right over the page: leave its height (56px)
     plus its offset free below the content so the last row scrolls clear of it. */
  .sf-account { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-4); padding-bottom: calc(56px + var(--oc-space-5) + var(--oc-space-4)); }
  .sf-account__nav { position: static; padding: 0; border: 0; background: none; }
  .sf-account__user { padding-top: 0; border-bottom: 0; }
  /* Every section is visible at once: the tabs wrap onto a second row rather
     than scrolling out of sight. */
  .sf-account__nav-list { flex-direction: row; flex-wrap: wrap; gap: 0 var(--oc-space-1); border-bottom: 1px solid var(--oc-divider); }
  .sf-account__nav-list > li { display: flex; align-items: center; }
  .sf-account__nav-link { flex: none; border-bottom: 3px solid transparent; border-left: 0; border-radius: 0; white-space: nowrap; }
  .sf-account__nav-link[aria-current="page"] { border-bottom-color: var(--oc-gold); }
}

/* ------------------------------------------------------------------- chat */
/* The live chat. The widget script builds this DOM and toggles `hidden` on
   __panel; it never writes a style. Under 480px the panel is the whole
   screen and the launcher steps aside while it is open (sf-chat--open). */

.sf-chat {
  position: fixed;
  right: var(--oc-space-5);
  bottom: var(--oc-space-5);
  z-index: var(--oc-z-chat);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--oc-space-3);
  max-width: calc(100vw - 2 * var(--oc-space-4));
  font-size: var(--oc-text-md);
}
.sf-chat__launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--oc-gold);
  color: var(--oc-white);
  box-shadow: var(--oc-shadow-lg);
  cursor: pointer;
  transition: background var(--oc-transition), transform var(--oc-transition);
}
.sf-chat__launcher:hover { background: var(--oc-gold-hover); transform: translateY(-2px); }
.sf-chat__badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--oc-radius-pill); background: var(--oc-sale); color: var(--oc-white); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 700; line-height: 20px; text-align: center; }

.sf-chat__panel {
  display: flex;
  flex-direction: column;
  width: min(var(--oc-chat-width), calc(100vw - 2 * var(--oc-space-4)));
  height: min(var(--oc-chat-height), calc(100dvh - 120px));
  overflow: hidden;
  border: 1px solid var(--oc-divider);
  border-radius: var(--oc-radius-card);
  background: var(--oc-bg);
  box-shadow: var(--oc-shadow-lg);
  animation: sf-pop 0.2s ease;
}
.sf-chat__panel[hidden] { display: none; }

.sf-chat__header { display: flex; flex: none; align-items: center; gap: var(--oc-space-3); padding: var(--oc-space-4) var(--oc-space-5); background: var(--oc-navy); color: var(--oc-white); }
.sf-chat__avatar { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--oc-gold); color: var(--oc-navy); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 700; }
.sf-chat__heading { flex: 1 1 auto; min-width: 0; }
.sf-chat__title { margin: 0; overflow: hidden; color: var(--oc-white); font-size: var(--oc-text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sf-chat__status { display: flex; align-items: center; gap: 6px; margin: 1px 0 0; font-size: var(--oc-text-xs); color: var(--oc-on-navy-soft); }
.sf-chat__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oc-success); }
.sf-chat__action { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--oc-radius-control); background: none; color: var(--oc-on-navy-soft); cursor: pointer; }
.sf-chat__action:hover { background: var(--oc-on-navy-faint); color: var(--oc-white); }
.sf-chat__header :focus-visible { outline-color: var(--oc-gold-light); }

.sf-chat__messages { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--oc-space-3); min-height: 0; padding: var(--oc-space-4); overflow-y: auto; overscroll-behavior: contain; background: var(--oc-bg-subtle); }
.sf-chat__msg { max-width: 85%; padding: 10px 14px; border-radius: var(--oc-radius-bubble); line-height: 1.5; overflow-wrap: anywhere; animation: sf-fade-in 0.2s ease; }
.sf-chat__msg p { margin: 0 0 var(--oc-space-2); }
.sf-chat__msg p:last-child { margin-bottom: 0; }
.sf-chat__msg--user { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--oc-navy); color: var(--oc-white); }
.sf-chat__msg--user a { color: var(--oc-gold-light); }
.sf-chat__msg--agent { align-self: flex-start; border: 1px solid var(--oc-divider); border-bottom-left-radius: 4px; background: var(--oc-bg); }
.sf-chat__msg--system { align-self: center; max-width: 100%; padding: var(--oc-space-1) 0; background: none; color: var(--oc-text-muted); font-size: var(--oc-text-sm); text-align: center; }
.sf-chat__msg--wide { align-self: stretch; max-width: 100%; }
.sf-chat__sender { display: block; margin-bottom: 2px; font-size: var(--oc-text-xs); font-weight: 600; color: var(--oc-gold-hover); }
.sf-chat__time { display: block; margin-top: var(--oc-space-1); font-size: var(--oc-text-xs); opacity: 0.6; text-align: right; }

.sf-chat__typing { display: inline-flex; align-self: flex-start; gap: var(--oc-space-1); padding: 12px 14px; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-bubble); border-bottom-left-radius: 4px; background: var(--oc-bg); }
.sf-chat__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oc-text-muted); animation: sf-typing 1.2s ease-in-out infinite; }
.sf-chat__dot:nth-child(2) { animation-delay: 0.15s; }
.sf-chat__dot:nth-child(3) { animation-delay: 0.3s; }

.sf-chat__quick-replies { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); padding: var(--oc-space-1) 0; }
.sf-chat__quick { min-height: 34px; padding: 0 var(--oc-space-3); border: 1px solid var(--oc-gold); border-radius: var(--oc-radius-control); background: var(--oc-bg); color: var(--oc-navy); font-family: var(--oc-font-body); font-size: var(--oc-text-sm); font-weight: 600; cursor: pointer; transition: background var(--oc-transition), color var(--oc-transition); }
.sf-chat__quick:hover { background: var(--oc-gold); color: var(--oc-white); }

.sf-chat__products { display: flex; gap: var(--oc-space-2); padding: var(--oc-space-1) 0 var(--oc-space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sf-chat__product { display: flex; flex: 0 0 180px; flex-direction: column; overflow: hidden; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg); font-size: var(--oc-text-sm); scroll-snap-align: start; }
.sf-chat__product-media { position: relative; aspect-ratio: 1 / 1; background: var(--oc-bg-subtle); }
.sf-chat__product-img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--oc-space-2); object-fit: contain; }
.sf-chat__product-tag { position: absolute; top: var(--oc-space-2); left: var(--oc-space-2); padding: 3px 7px; border-radius: 3px; background: var(--oc-text); color: var(--oc-gold); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 700; line-height: 1; letter-spacing: var(--oc-tracking); }
.sf-chat__product-body { display: flex; flex: 1; flex-direction: column; gap: 3px; padding: var(--oc-space-2) 10px; }
.sf-chat__product-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; line-height: 1.35; }
.sf-chat__product-meta { overflow: hidden; font-size: var(--oc-text-xs); color: var(--oc-text-soft); text-overflow: ellipsis; white-space: nowrap; }
.sf-chat__product-price { margin-top: auto; padding-top: var(--oc-space-1); font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: 700; }
.sf-chat__product-actions { display: flex; gap: var(--oc-space-1); padding: 0 10px 10px; }
.sf-chat__product-actions > * { flex: 1 1 0; min-height: 32px; padding-left: var(--oc-space-1); padding-right: var(--oc-space-1); }

.sf-chat__recipe { padding: var(--oc-space-4); border-radius: var(--oc-radius-card); background: var(--oc-navy); color: var(--oc-on-navy-soft); font-size: var(--oc-text-sm); }
.sf-chat__recipe-name { margin: 0 0 var(--oc-space-1); color: var(--oc-gold); font-size: var(--oc-text-lg); font-weight: 700; }
.sf-chat__recipe-list { margin: var(--oc-space-2) 0; padding: 0 0 0 var(--oc-space-4); }

.sf-chat__screen { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: var(--oc-space-3); padding: var(--oc-space-5); text-align: center; }
.sf-chat__screen-title { margin: 0; font-size: var(--oc-text-lg); font-weight: 600; }

.sf-chat__form { display: flex; flex: none; align-items: flex-end; gap: var(--oc-space-2); padding: var(--oc-space-2) var(--oc-space-3); border-top: 1px solid var(--oc-divider); background: var(--oc-bg); }
.sf-chat__input { flex: 1 1 auto; min-width: 0; min-height: 40px; max-height: 120px; padding: 9px var(--oc-space-3); border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-card); background: var(--oc-bg); color: var(--oc-text); font-family: var(--oc-font-body); font-size: var(--oc-text-base); line-height: 1.35; resize: none; }
.sf-chat__input:focus { outline: var(--oc-focus-ring); outline-offset: 0; border-color: var(--oc-gold); }
.sf-chat__send, .sf-chat__attach { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.sf-chat__send { background: var(--oc-gold); color: var(--oc-white); }
.sf-chat__send:hover { background: var(--oc-gold-hover); }
.sf-chat__send:disabled { opacity: 0.4; cursor: default; }
.sf-chat__attach { background: none; color: var(--oc-text-muted); }
.sf-chat__attach:hover { color: var(--oc-gold-hover); }

.sf-chat--static { position: static; align-items: stretch; max-width: 380px; }
.sf-chat--static .sf-chat__panel { height: var(--oc-chat-height); animation: none; }
.sf-chat--static .sf-chat__launcher { align-self: flex-end; }

@media (max-width: 479px) {
  .sf-chat:not(.sf-chat--static) { right: var(--oc-space-4); bottom: var(--oc-space-4); }
  .sf-chat:not(.sf-chat--static) .sf-chat__panel { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .sf-chat--open:not(.sf-chat--static) .sf-chat__launcher { display: none; }
  .sf-chat:not(.sf-chat--static) .sf-chat__header { padding-top: calc(var(--oc-space-4) + env(safe-area-inset-top, 0px)); }
  .sf-chat:not(.sf-chat--static) .sf-chat__form { padding-bottom: calc(var(--oc-space-2) + env(safe-area-inset-bottom, 0px)); }
  .sf-chat:not(.sf-chat--static) .sf-chat__action { width: var(--oc-control-height); height: var(--oc-control-height); }
}

/* ---------------------------------------------------------------- choices */
/* A selectable card with a real radio or checkbox inside it: delivery type,
   delivery option, saved address, gift wrap. The input stays (so keyboard
   and screen readers are native); the card shows the choice. */

.sf-choice-list { display: grid; gap: var(--oc-space-3); margin: 0; padding: 0; border: 0; }
.sf-choice-list--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.sf-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--oc-space-3);
  min-width: 0;
  padding: var(--oc-space-4);
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-card);
  background: var(--oc-bg);
  cursor: pointer;
  transition: border-color var(--oc-transition), background var(--oc-transition), box-shadow var(--oc-transition);
}
.sf-choice:hover { border-color: var(--oc-navy); }
.sf-choice:has(.sf-choice__input:checked) { border-color: var(--oc-gold); background: var(--oc-gold-bg); box-shadow: 0 0 0 1px var(--oc-gold); }
.sf-choice:has(.sf-choice__input:focus-visible) { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-choice:has(.sf-choice__input:disabled) { border-color: var(--oc-divider); background: var(--oc-bg-subtle); color: var(--oc-text-muted); cursor: not-allowed; }
.sf-choice__input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
.sf-choice__icon { flex: none; color: var(--oc-gold-hover); }
.sf-choice__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.sf-choice__title { font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: 600; color: var(--oc-text); }
.sf-choice__text { font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-choice__aside { flex: none; font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: 700; text-align: right; white-space: nowrap; }

/* --------------------------------------------------------------- checkout */
/* One page: contact, delivery, delivery option, payment, review, with the
   order summary sticky beside it (and folded above it on a phone). */

.sf-checkout { display: grid; grid-template-columns: minmax(0, 1fr) var(--oc-summary-width); gap: var(--oc-space-7); align-items: start; }
.sf-checkout__main { display: flex; flex-direction: column; gap: var(--oc-space-4); min-width: 0; }
.sf-checkout__section { padding: var(--oc-space-5); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); }
/* Checkout field rhythm: one gap between every field, whether two sit in a row or the
   row stacks on a phone; and a group heading (Shipping address, Yacht delivery) clear of
   the delivery cards above it. */
.sf-checkout .sf-stack--sm { gap: var(--oc-space-3); }
.sf-checkout .sf-form__row { gap: var(--oc-space-3); }
.sf-checkout .sf-field { margin-bottom: 0; }
.sf-checkout fieldset.sf-stack[data-checkout-for] { margin-top: var(--oc-space-4); }
.sf-checkout .sf-fieldset__legend { margin-bottom: var(--oc-space-3); font-size: var(--oc-text-sm); color: var(--oc-text); }
.sf-checkout__section-head { display: flex; align-items: center; gap: var(--oc-space-3); margin-bottom: var(--oc-space-4); }
.sf-checkout__number { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oc-navy); color: var(--oc-white); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 700; }
.sf-checkout__section.is-complete .sf-checkout__number { background: var(--oc-success-ink); }
.sf-checkout__section-title { flex: 1 1 auto; margin: 0; font-size: var(--oc-text-lg); font-weight: 600; }
.sf-checkout__edit { flex: none; font-size: var(--oc-text-sm); }
.sf-checkout__place { display: flex; flex-direction: column; gap: var(--oc-space-3); }
.sf-checkout__fineprint { margin: 0; font-size: var(--oc-text-xs); color: var(--oc-text-muted); text-align: center; }

.sf-checkout__summary { position: sticky; top: calc(var(--oc-space-8) + var(--oc-space-4)); min-width: 0; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-checkout__summary-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--oc-space-3); padding: var(--oc-space-4) var(--oc-space-5); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); cursor: pointer; list-style: none; }
.sf-checkout__summary-toggle::-webkit-details-marker { display: none; }
.sf-checkout__summary-toggle::after { content: "+"; font-size: var(--oc-text-lg); color: var(--oc-text-soft); }
.sf-checkout__summary[open] > .sf-checkout__summary-toggle::after { content: "\2212"; }
.sf-checkout__summary-total { margin-left: auto; }
.sf-checkout__summary-body { padding: 0 var(--oc-space-5) var(--oc-space-5); }
.sf-checkout__summary-title { display: none; margin: 0; padding: var(--oc-space-5) var(--oc-space-5) 0; font-size: var(--oc-text-lg); font-weight: 600; }
.sf-checkout__code { margin: var(--oc-space-3) 0; }
/* Inline sign-in under the contact email: the code box and its button on one line (one column on a phone). */
.sf-checkout__signin { display: flex; flex-direction: column; gap: var(--oc-space-2); margin-top: var(--oc-space-3); }
.sf-checkout__signin-row { display: flex; gap: var(--oc-space-3); align-items: center; }
.sf-checkout__signin-row .sf-input { flex: 1 1 auto; min-width: 0; max-width: 12rem; letter-spacing: 0.2em; }
@media (max-width: 480px) {
  .sf-checkout__signin-row { flex-direction: column; align-items: stretch; }
  .sf-checkout__signin-row .sf-input { max-width: none; }
}

/* Desktop shows the summary open with no toggle where the browser can style
   a closed <details> body (same approach as the collection filters). */
@media (min-width: 1024px) {
  @supports selector(::details-content) {
    .sf-checkout__summary::details-content { content-visibility: visible; display: block; }
    .sf-checkout__summary-toggle { display: none; }
    .sf-checkout__summary-title { display: block; }
  }
}
@media (max-width: 1023px) {
  .sf-checkout { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-4); }
  .sf-checkout__summary { position: static; order: -1; }
}
@media (max-width: 479px) {
  .sf-checkout__section { padding: var(--oc-space-4); }
  .sf-checkout__summary-toggle, .sf-checkout__summary-body { padding-left: var(--oc-space-4); padding-right: var(--oc-space-4); }
}

/* Address type-ahead (assets/address-lookup.js): the panel under a checkout address box.
   The same look as the header search's suggestions (.sf-suggest__list), laid over what
   follows the field rather than pushing it down. Inputs are already 16px on phones. */
.sf-field--lookup { position: relative; }
.sf-addrbox__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--oc-z-popover);
  margin-top: var(--oc-space-1);
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-card);
  background: var(--oc-bg);
  box-shadow: var(--oc-shadow-md);
}
.sf-addrbox__list[aria-busy="true"] { opacity: 0.6; }
.sf-addrbox__option {
  display: flex;
  flex-direction: column;
  padding: var(--oc-space-2) var(--oc-space-4);
  color: var(--oc-text);
  cursor: pointer;
}
.sf-addrbox__option:hover, .sf-addrbox__option[aria-selected="true"] { background: var(--oc-gold-bg); }
.sf-addrbox__title { font-size: var(--oc-text-md); overflow-wrap: anywhere; }
.sf-addrbox__meta { font-size: var(--oc-text-sm); color: var(--oc-text-soft); overflow-wrap: anywhere; }
.sf-addrbox__option--manual { border-top: 1px solid var(--oc-divider); }
.sf-addrbox__option--manual .sf-addrbox__title { font-weight: 600; color: var(--oc-navy); }
.sf-addrbox__none { margin: 0; padding: var(--oc-space-3) var(--oc-space-4); color: var(--oc-text-soft); }
.sf-addrbox__credit { margin: 0; padding: var(--oc-space-1) var(--oc-space-4) var(--oc-space-2); font-size: var(--oc-text-xs); color: var(--oc-text-muted); text-align: right; }

/* ---------------------------------------------------------------- builder */
/* Wine, bar and gift builders: a route of steps, sections of option tiles,
   a running total beside them (a bar along the bottom on a phone). */

.sf-builder { display: grid; grid-template-columns: minmax(0, 1fr) var(--oc-summary-width); gap: var(--oc-space-6); align-items: start; }
.sf-builder__main { display: flex; flex-direction: column; gap: var(--oc-space-6); min-width: 0; }
.sf-builder__section { min-width: 0; }
.sf-builder__section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--oc-space-3); margin-bottom: var(--oc-space-4); padding-bottom: var(--oc-space-3); border-bottom: 1px solid var(--oc-divider); }
.sf-builder__section-title { margin: 0; font-size: var(--oc-text-lg); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking); }
.sf-builder__target { display: flex; align-items: center; gap: var(--oc-space-3); min-width: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-builder__target .sf-meter { width: 96px; }
.sf-builder__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--oc-grid-gap); }
.sf-builder__aside { position: sticky; top: calc(var(--oc-space-8) + var(--oc-space-4)); min-width: 0; }
.sf-builder__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--oc-space-3); font-family: var(--oc-font-heading); font-size: var(--oc-text-lg); font-weight: 700; }
.sf-builder__bar { display: none; }

.sf-option { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); transition: border-color var(--oc-transition), box-shadow var(--oc-transition); }
.sf-option.is-selected, .sf-option:has(.sf-option__input:checked) { border-color: var(--oc-gold); box-shadow: 0 0 0 1px var(--oc-gold); }
.sf-option:has(.sf-option__input:focus-visible) { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-option__input { position: absolute; top: var(--oc-space-2); right: var(--oc-space-2); z-index: 2; width: 20px; height: 20px; margin: 0; }
.sf-option__media { position: relative; aspect-ratio: 4 / 3; background: var(--oc-bg-subtle); }
.sf-option__img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--oc-space-3); object-fit: contain; }
.sf-option__flag { position: absolute; top: var(--oc-space-2); left: var(--oc-space-2); z-index: 1; }
.sf-option__body { display: flex; flex: 1; flex-direction: column; gap: 2px; padding: var(--oc-space-3); }
.sf-option__name { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--oc-text-sm); font-weight: 600; line-height: 1.35; }
.sf-option__meta { margin: 0; overflow: hidden; font-size: var(--oc-text-xs); color: var(--oc-text-soft); text-overflow: ellipsis; white-space: nowrap; }
.sf-option__price { margin: auto 0 0; padding-top: var(--oc-space-2); font-family: var(--oc-font-heading); font-weight: 700; }
.sf-option__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--oc-space-2); padding: 0 var(--oc-space-3) var(--oc-space-3); }
.sf-option--unavailable { opacity: 0.6; }

@media (max-width: 1023px) {
  .sf-builder { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--oc-space-8) + var(--oc-space-4)); }
  .sf-builder__aside { position: static; }
  .sf-builder__bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--oc-z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oc-space-3);
    padding: var(--oc-space-3) var(--oc-gutter);
    border-top: 1px solid var(--oc-divider);
    background: var(--oc-bg);
    box-shadow: var(--oc-shadow-lg);
  }
}
.sf-builder__bar--static { position: static; box-shadow: none; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); display: flex; align-items: center; justify-content: space-between; gap: var(--oc-space-3); padding: var(--oc-space-3) var(--oc-space-4); }

/* ---------------------------------------------------------- preview ribbon */
/* Marks every page of the not-yet-live site. Fixed and slim; the site
   below it is pushed down by exactly its height, header included. */

.sf-preview-ribbon {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--oc-z-ribbon);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-3);
  height: var(--oc-ribbon-height);
  padding: 0 var(--oc-gutter);
  overflow: hidden;
  background: var(--oc-navy);
  color: var(--oc-gold);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  white-space: nowrap;
}
.sf-preview-ribbon__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-preview-ribbon__link { flex: none; color: var(--oc-gold-light); text-decoration-color: var(--oc-gold); }
.sf-preview-ribbon__link:hover { color: var(--oc-white); }
.sf-preview-ribbon ~ .sf-site { padding-top: var(--oc-ribbon-height); }
.sf-preview-ribbon ~ .sf-site .sf-header { top: var(--oc-ribbon-height); }
.sf-preview-ribbon--static { position: static; }
@media (max-width: 399px) {
  .sf-preview-ribbon__link { display: none; }
}

/* ------------------------------------------------------------ style guide */
/* The living style guide (staff only, /website-test/styleguide). It is made
   of the same components it documents plus these frames. */

.sf-guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--oc-space-6); align-items: start; }
.sf-guide__toc { position: sticky; top: calc(var(--oc-space-8) + var(--oc-space-4)); max-height: calc(100vh - 120px); overflow-y: auto; }
.sf-guide__toc-list { margin: 0; padding: 0; list-style: none; }
.sf-guide__toc-link { display: block; padding: var(--oc-space-1) 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); text-decoration: none; }
.sf-guide__toc-link:hover { color: var(--oc-gold-hover); }
.sf-guide__main { min-width: 0; }
.sf-guide__group { margin-bottom: var(--oc-space-8); scroll-margin-top: var(--oc-space-8); }
.sf-guide__group-title { margin-bottom: var(--oc-space-5); padding-bottom: var(--oc-space-3); border-bottom: 2px solid var(--oc-gold); font-size: var(--oc-text-xl); font-weight: 400; text-transform: uppercase; letter-spacing: var(--oc-tracking); }
.sf-guide__item { margin-bottom: var(--oc-space-6); min-width: 0; }
.sf-guide__item-title { margin-bottom: var(--oc-space-1); font-size: var(--oc-text-md); font-weight: 700; }
.sf-guide__item-note { margin-bottom: var(--oc-space-3); font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-guide__specimen { min-width: 0; padding: var(--oc-space-5); overflow-x: auto; border: 1px dashed var(--oc-border-input); border-radius: var(--oc-radius-card); background: var(--oc-bg); }
.sf-guide__specimen--subtle { background: var(--oc-bg-subtle); }
.sf-guide__specimen--navy { border-color: var(--oc-navy); background: var(--oc-navy); }
.sf-guide__source { margin-top: var(--oc-space-2); font-size: var(--oc-text-sm); }
.sf-guide__source > summary { color: var(--oc-text-soft); cursor: pointer; }
.sf-guide__code { max-height: 320px; margin: var(--oc-space-2) 0 0; padding: var(--oc-space-3); overflow: auto; border-radius: var(--oc-radius-input); background: var(--oc-bg-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--oc-text-xs); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-guide__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--oc-space-3); }
.sf-guide__swatch { min-width: 0; overflow: hidden; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-input); font-size: var(--oc-text-xs); }
.sf-guide__chip { display: block; height: 48px; }
.sf-guide__swatch-name { display: block; padding: var(--oc-space-1) var(--oc-space-2) 0; font-weight: 700; overflow-wrap: anywhere; }
.sf-guide__swatch-use { display: block; padding: 0 var(--oc-space-2) var(--oc-space-2); color: var(--oc-text-soft); }
.sf-guide__chip--navy { background: var(--oc-navy); }
.sf-guide__chip--navy-mid { background: var(--oc-navy-mid); }
.sf-guide__chip--gold { background: var(--oc-gold); }
.sf-guide__chip--gold-hover { background: var(--oc-gold-hover); }
.sf-guide__chip--gold-light { background: var(--oc-gold-light); }
.sf-guide__chip--gold-bg { background: var(--oc-gold-bg); }
.sf-guide__chip--text { background: var(--oc-text); }
.sf-guide__chip--text-soft { background: var(--oc-text-soft); }
.sf-guide__chip--text-muted { background: var(--oc-text-muted); }
.sf-guide__chip--bg-subtle { background: var(--oc-bg-subtle); }
.sf-guide__chip--border { background: var(--oc-border); }
.sf-guide__chip--border-input { background: var(--oc-border-input); }
.sf-guide__chip--divider { background: var(--oc-divider); }
.sf-guide__chip--sale { background: var(--oc-sale); }
.sf-guide__chip--danger { background: var(--oc-danger); }
.sf-guide__chip--success { background: var(--oc-success); }
.sf-guide__chip--info { background: var(--oc-info); }
.sf-guide__chip--warning { background: var(--oc-warning); }
.sf-guide__chip--danger-bg { background: var(--oc-danger-bg); }
.sf-guide__chip--success-bg { background: var(--oc-success-bg); }
.sf-guide__chip--warning-bg { background: var(--oc-warning-bg); }
.sf-guide__chip--info-bg { background: var(--oc-info-bg); }
.sf-guide__type { margin: 0 0 var(--oc-space-2); line-height: 1.3; }
.sf-guide__type--xs { font-size: var(--oc-text-xs); }
.sf-guide__type--sm { font-size: var(--oc-text-sm); }
.sf-guide__type--md { font-size: var(--oc-text-md); }
.sf-guide__type--base { font-size: var(--oc-text-base); }
.sf-guide__type--lg { font-size: var(--oc-text-lg); }
.sf-guide__type--xl { font-size: var(--oc-text-xl); }
.sf-guide__type--2xl { font-size: var(--oc-text-2xl); }
.sf-guide__type--3xl { font-size: var(--oc-text-3xl); }
.sf-guide__space { display: flex; align-items: center; gap: var(--oc-space-3); margin-bottom: var(--oc-space-2); font-size: var(--oc-text-xs); }
.sf-guide__space-name { flex: none; width: 56px; }
.sf-guide__space-bar { height: 12px; border-radius: 2px; background: var(--oc-gold); }
.sf-guide__space-bar--1 { width: var(--oc-space-1); }
.sf-guide__space-bar--2 { width: var(--oc-space-2); }
.sf-guide__space-bar--3 { width: var(--oc-space-3); }
.sf-guide__space-bar--4 { width: var(--oc-space-4); }
.sf-guide__space-bar--5 { width: var(--oc-space-5); }
.sf-guide__space-bar--6 { width: var(--oc-space-6); }
.sf-guide__space-bar--7 { width: var(--oc-space-7); }
.sf-guide__space-bar--8 { width: var(--oc-space-8); }
.sf-guide__shadow { display: grid; place-items: center; height: 80px; border-radius: var(--oc-radius-card); background: var(--oc-bg); font-size: var(--oc-text-xs); }
.sf-guide__shadow--sm { box-shadow: var(--oc-shadow-sm); }
.sf-guide__shadow--md { box-shadow: var(--oc-shadow-md); }
.sf-guide__shadow--lg { box-shadow: var(--oc-shadow-lg); }
.sf-guide__radius { display: grid; place-items: center; height: 64px; border: 2px solid var(--oc-navy); font-size: var(--oc-text-xs); }
.sf-guide__radius--card { border-radius: var(--oc-radius-card); }
.sf-guide__radius--button { border-radius: var(--oc-radius-button); }
.sf-guide__radius--input { border-radius: var(--oc-radius-input); }
.sf-guide__radius--pill { border-radius: var(--oc-radius-pill); }

@media (max-width: 899px) {
  .sf-guide { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-4); }
  .sf-guide__toc { position: static; max-height: none; }
  .sf-guide__toc-list { display: flex; flex-wrap: wrap; gap: var(--oc-space-1) var(--oc-space-4); }
}
@media (max-width: 479px) {
  .sf-guide__specimen { padding: var(--oc-space-3); }
}

/* ── sections ──────────────────────────────────────────────────────────────
   Page sections (lib/storefront/views/sections/). Every band of every page, the
   home page, a port page, a landing page, an article landing, is one of these
   components composed by a template, and NO page restyles one locally: change a
   rule here and the whole site follows (owner, 2026-10-16: "tweak it from one
   central point"). Chapter "Sections" in docs/STOREFRONT-STYLE.md lists the
   types and the data each takes.

   MOBILE FIRST. Every rule below is the 320px layout; a min-width query
   enhances it at 640 / 768 / 1024 (the breakpoints in the style guide, the
   same on every section). Nothing is undone on the way up.

   A section's look is its TYPE plus the modifiers the layout vocabulary
   allows (util.js): width (page | narrow | full), space (none | sm | lg),
   tone (subtle | navy | gold), align, divider, size (sm | md | lg), columns.
   There is no per-page CSS.

   The sizes below are section tokens, declared once on .sf-section (the test
   that guards :root allows exactly two :root blocks, so they live here). They
   are the knobs for rhythm and proportion: edit them, not the rules.        */

.sf-section {
  --oc-section-gap: var(--oc-space-5);      /* heading to content */
  --oc-hero-sm: 12rem;                       /* hero heights, by size */
  --oc-hero-md: 18rem;
  --oc-hero-lg: 22rem;
  --oc-hero-min: var(--oc-hero-md);
  --oc-hero-floor: 16.25rem;                 /* a picture hero is never shorter than this (phone) */
  --oc-banner-h: 10rem;                      /* the collection banner: a header over the listing, not a hero (phone) */
  --oc-slide-sm: 0;                          /* split slide heights, by size (phone: the picture is 16:9) */
  --oc-slide-md: 0;
  --oc-slide-lg: 0;
  --oc-slide-min: var(--oc-slide-md);
  --oc-promo-sm: 12rem;                      /* promo heights, by size */
  --oc-promo-md: 16rem;
  --oc-promo-lg: 20rem;
  --oc-promo-min: var(--oc-promo-md);
  --oc-copy-width: 40rem;                    /* the hero text box */
  --oc-media-ratio: 4 / 3;                   /* pictures beside copy */
  --oc-measure: 60ch;                        /* readable line length for a lead */
  --oc-prose-measure: 75ch;                  /* longest line of running text in a rich-text band */
  --oc-clamp-lines: 5;                       /* lines of a quote before "Read more" */
}
@media (min-width: 640px) {
  .sf-section { --oc-section-gap: var(--oc-space-6); }
}
@media (min-width: 768px) {
  .sf-section {
    --oc-hero-sm: 16rem;
    --oc-hero-md: 26rem;
    --oc-hero-lg: 34rem;
    --oc-hero-floor: 26.25rem;               /* ... and this from tablet up */
    --oc-banner-h: 24rem;
    --oc-slide-sm: 22rem;
    --oc-slide-md: 28rem;
    --oc-slide-lg: 34rem;
    --oc-promo-sm: 14rem;
    --oc-promo-md: 20rem;
    --oc-promo-lg: 26rem;
  }
}

/* The rhythm: every band has the same padding; two plain bands in a row share
   one gap instead of doubling it; a hero or slideshow carries its own. The
   space modifiers come after, at the same weight, so an explicit one wins. */
.sf-sections > .sf-section { padding-top: var(--oc-section-pad); padding-bottom: var(--oc-section-pad); }
.sf-sections > .sf-section:where(:not(.sf-section--band, .sf-hero, .sf-slideshow, .sf-crumbs)) + .sf-section:where(:not(.sf-section--band, .sf-hero, .sf-slideshow)) { padding-top: 0; }
.sf-sections > .sf-hero, .sf-sections > .sf-slideshow { padding: 0; }
/* A breadcrumbs section draws no trail (components.js breadcrumbs()), so the
   empty band it leaves must not take any space either. */
.sf-sections > .sf-crumbs { display: none; }
.sf-sections > .sf-section:last-child:where(:not(.sf-section--band)) { padding-bottom: var(--oc-space-8); }
.sf-sections > .sf-section.sf-section--top-none { padding-top: 0; }
.sf-sections > .sf-section.sf-section--top-sm { padding-top: var(--oc-space-5); }
.sf-sections > .sf-section.sf-section--top-lg { padding-top: var(--oc-space-8); }
.sf-sections > .sf-section.sf-section--bottom-none { padding-bottom: 0; }
.sf-sections > .sf-section.sf-section--bottom-sm { padding-bottom: var(--oc-space-5); }
.sf-sections > .sf-section.sf-section--bottom-lg { padding-bottom: var(--oc-space-8); }
.sf-section--divider { border-top: 1px solid var(--oc-divider); }

/* Width. A page-width section sits in .sf-page (the one container), a narrow
   one in the reading column, and a full one has no container at all: its
   pictures run edge to edge. A hero or slideshow the theme did NOT set full
   width is a card inside the page container. */
.sf-section--full { padding-left: 0; padding-right: 0; }
.sf-sections > .sf-hero.sf-section--contained, .sf-sections > .sf-slideshow.sf-section--contained {
  width: calc(100% - 2 * var(--oc-gutter));
  max-width: calc(var(--oc-page-width) - 2 * var(--oc-gutter));
  margin: var(--oc-space-5) auto 0;
  border-radius: var(--oc-radius-card);
}
.sf-sections > .sf-hero.sf-section--contained { padding-top: 0; }
/* A coloured band that is a card: the colour moves from the edge-to-edge
   section onto a card inside the container. */
.sf-section--contained.sf-section--band { background: none; }
.sf-section__card { padding: var(--oc-space-6) var(--oc-space-4); border-radius: var(--oc-radius-card); }
.sf-section--contained.sf-section--subtle > .sf-page > .sf-section__card { background: var(--oc-bg-subtle); }
.sf-section--contained.sf-section--gold > .sf-page > .sf-section__card { background: var(--oc-gold-bg); }
.sf-section--contained.sf-section--navy > .sf-page > .sf-section__card { background: var(--oc-navy); }

/* Colour bands. Dark on light is the brand; navy is the one dark surface. */
.sf-section--subtle { background: var(--oc-bg-subtle); }
.sf-section--gold { background: var(--oc-gold-bg); }
.sf-section--navy { background: var(--oc-navy); color: var(--oc-on-navy-soft); }
.sf-section--navy h1, .sf-section--navy h2, .sf-section--navy h3, .sf-section--navy .sf-section__title { color: var(--oc-white); }
.sf-section--navy .sf-section__eyebrow { color: var(--oc-gold-light); }
.sf-section--navy .sf-section__lead { color: var(--oc-on-navy-soft); }
.sf-section--navy a:not(.sf-btn) { color: var(--oc-gold-light); }
.sf-section--navy a:not(.sf-btn):hover { color: var(--oc-white); }
.sf-section--navy .sf-dl__row { border-color: var(--oc-on-navy-line); }
.sf-section--navy .sf-dl__term { color: var(--oc-gold-light); }
.sf-section--center { text-align: center; }

/* The heading block every section opens with. */
.sf-section__head { margin-bottom: var(--oc-section-gap); }
.sf-section__heading { min-width: 0; }
.sf-section__head .sf-section__title, .sf-section__head .sf-title { margin-bottom: 0; overflow-wrap: anywhere; }
.sf-section__title--sm { font-size: var(--oc-h3-size); font-weight: var(--oc-title-weight); }
.sf-section__title--lg { font-size: var(--oc-h1-size); }
.sf-section__eyebrow {
  margin: 0 0 var(--oc-space-2);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-gold-hover);
}
.sf-section__lead { max-width: var(--oc-measure); margin: var(--oc-space-3) 0 0; font-size: var(--oc-text-lg); color: var(--oc-text-soft); }
.sf-section__head--center { justify-content: center; text-align: center; }
.sf-section__head--center .sf-section__lead { margin-left: auto; margin-right: auto; }
.sf-section__actions { display: flex; flex-wrap: wrap; gap: var(--oc-space-3); margin-top: var(--oc-space-5); }
.sf-section__actions--after { margin-top: var(--oc-space-6); }
.sf-section--center .sf-section__actions { justify-content: center; }

/* Hero: the existing .sf-hero (navy, white type) gains a picture, a size and a
   side. The picture is an <img> (or a <picture> with a phone crop) filling the
   band, with an overlay drawn from the navy token so type stays readable on any
   photograph. The overlay runs from the side the copy is on. */
.sf-hero.sf-section { position: relative; isolation: isolate; overflow: hidden; --oc-overlay-dir: 0deg; }
.sf-hero--sm { --oc-hero-min: var(--oc-hero-sm); }
.sf-hero--md { --oc-hero-min: var(--oc-hero-md); }
.sf-hero--lg { --oc-hero-min: var(--oc-hero-lg); }
.sf-hero--copy-sm { --oc-copy-width: 26rem; }
.sf-hero--copy-lg { --oc-copy-width: 48rem; }
.sf-hero .sf-hero__inner { display: grid; align-items: center; min-height: var(--oc-hero-min); text-align: center; }
/* A picture hero is a banner, never a strip: its picture is absolutely placed, so
   the band is exactly as tall as its copy box, and a size token that fails to
   resolve (or a band with one short line) collapsed it to a sliver of the photo.
   The floor is a second, independent lower bound under the size token. */
.sf-hero--image .sf-hero__inner { min-height: max(var(--oc-hero-min, 0px), var(--oc-hero-floor, 16.25rem)); }
/* The collection banner (variant 'banner') is the header of a listing, so it
   gives the products their place on the first screen: at 390px a 352px band was
   40% of it before the toolbar. It takes its own height token instead of the hero
   size scale and floor (those are for a hero that IS the page), a tighter inner
   pad on a phone, and no bottom pad of its own: the last-child band rule above
   gives a section a 64px bottom, which on a lone banner was 64px of extra photo.
   The focal point sits above centre because a collection picture is a landscape
   whose subject is usually the upper half, and a short band crops the rest. */
.sf-hero--banner .sf-hero__inner { min-height: var(--oc-banner-h); padding-top: var(--oc-space-5); padding-bottom: var(--oc-space-5); }
.sf-hero--banner .sf-hero__img { object-position: center 40%; }
.sf-sections > .sf-hero--banner:last-child { padding-bottom: 0; }
@media (min-width: 640px) {
  .sf-hero--banner .sf-hero__inner { padding-top: var(--oc-space-8); padding-bottom: var(--oc-space-8); }
}
.sf-hero--v-top .sf-hero__inner { align-items: start; }
.sf-hero--v-bottom .sf-hero__inner { align-items: end; }
.sf-hero--left .sf-hero__inner, .sf-hero--right .sf-hero__inner { text-align: left; }
.sf-hero__content { min-width: 0; max-width: var(--oc-copy-width); margin-left: auto; margin-right: auto; }
.sf-hero--left .sf-hero__content { margin-left: 0; }
.sf-hero--right .sf-hero__content { margin-right: 0; }
.sf-hero--left .sf-hero__lead, .sf-hero--right .sf-hero__lead { margin-left: 0; margin-right: 0; }
.sf-hero--left .sf-hero__actions, .sf-hero--right .sf-hero__actions { justify-content: flex-start; }
/* A word breaks only as a last resort, and with a hyphen where the browser has a
   dictionary for the page language (the <html lang> is the market's). `anywhere`
   was here to stop a hostile or very long word pushing the band wider; it also
   counts every letter as a break opportunity, so a title that merely ran a
   little long split "WEINLIEFERAN / T" with no hyphen. `break-word` still stops
   the overflow, but only after every real opportunity (spaces, hyphens, soft
   hyphens, a dictionary break) has been used. The size is what keeps a long
   compound word on one line: see --oc-title-fit below. */
.sf-hero__title { overflow-wrap: break-word; hyphens: auto; }
/* The copy box is the container the title is sized against, so the title scales
   with the column it sits in rather than with the screen (a phone, a split
   slide and a wide band put the same word in very different widths). */
.sf-hero__content { width: 100%; container-type: inline-size; }
/* How wide a title may be, as a share of its copy box, before it is made smaller:
   the cap is the word, not the line. 12.5cqw holds an 8em word (EXPLORATION is
   7.3em in Montserrat bold capitals), which is every ordinary English, French,
   Spanish and Italian heading, so those keep their size. German and Dutch compound
   nouns run to 10em or more (WIJNLEVERANCIER 9.9em, SCHIFFSVERPFLEGUNG 11.7em),
   so those pages scale the heading to its column instead of cutting the word. */
html { --oc-title-fit: 12.5; }
:root:lang(de), :root:lang(nl) { --oc-title-fit: 9.3; }
.sf-hero .sf-hero__title { --oc-title-cap: var(--oc-hero-title-size); font-size: min(var(--oc-title-cap), calc(var(--oc-title-fit) * 1cqw)); }
.sf-hero .sf-hero__title:is(h1) { --oc-title-cap: var(--oc-h1-size); }
.sf-hero__eyebrow {
  display: block;
  margin: 0 0 var(--oc-space-2);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  letter-spacing: var(--oc-tracking-wide);
  text-transform: uppercase;
  color: var(--oc-gold-light);
}
p.sf-hero__eyebrow { margin-bottom: var(--oc-space-3); }
.sf-hero__img-picture { display: contents; }
.sf-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sf-hero--image::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* The scrim is never lighter than a floor behind the copy. The picture is the
   owner's and can be anything, white flowers included, and the old gradient fell
   to 25% navy (22% for soft) at the end the copy sits in on a phone, which left
   the gold eyebrow and the lead at 1.6:1 over a pale photo. At 72% navy over
   pure white the lead (white at 92%) is 6.3:1, the eyebrow (--oc-hero-eyebrow)
   4.7:1 and the white title 7.3:1, so the floor is measured against the worst
   pixel there is, not a typical one. A phone centres the copy, so the gradient
   there only deepens towards the bottom; the side the copy is NOT on is allowed
   to fall away only on a wide screen (1200px up), where the copy column ends
   about 70% of the way across. `--overlay-none` has no ::after at all. */
.sf-hero--image { --oc-scrim-floor: 72%; --oc-scrim-start: 88%; --oc-scrim-tail: var(--oc-scrim-floor); }
.sf-hero--overlay-soft { --oc-scrim-start: var(--oc-scrim-floor); }
.sf-hero--overlay-strong::after, .sf-hero--overlay-soft::after {
  background: linear-gradient(var(--oc-overlay-dir),
    color-mix(in srgb, var(--oc-navy) var(--oc-scrim-start), transparent) 0%,
    color-mix(in srgb, var(--oc-navy) var(--oc-scrim-floor), transparent) 72%,
    color-mix(in srgb, var(--oc-navy) var(--oc-scrim-tail), transparent) 100%);
}
@media (min-width: 1200px) {
  .sf-hero--left.sf-hero--overlay-strong, .sf-hero--right.sf-hero--overlay-strong { --oc-scrim-tail: 38%; }
  .sf-hero--left.sf-hero--overlay-soft, .sf-hero--right.sf-hero--overlay-soft { --oc-scrim-tail: 0%; }
}
/* Type over a picture: a lighter gold (the brand gold moved 40% towards white, which
   is what clears 4.5:1 on the floor), the lead at near-white, and a soft navy shadow
   under all three for the patch of photo the scrim does not reach. A card hero is
   light copy on a card, not on the picture, so it keeps its own colours. */
.sf-hero--image:not(.sf-hero--card) { --oc-hero-eyebrow: color-mix(in srgb, var(--oc-gold-light) 60%, var(--oc-white)); }
.sf-hero--image:not(.sf-hero--card) .sf-hero__eyebrow { color: var(--oc-hero-eyebrow); }
.sf-hero--image:not(.sf-hero--card) .sf-hero__lead { color: color-mix(in srgb, var(--oc-white) 92%, transparent); }
.sf-hero--image:not(.sf-hero--card) :is(.sf-hero__title, .sf-hero__eyebrow, .sf-hero__lead) {
  text-shadow: 0 1px 2px color-mix(in srgb, var(--oc-navy) 55%, transparent), 0 0 18px color-mix(in srgb, var(--oc-navy) 35%, transparent);
}
.sf-hero--overlay-none::after { content: none; }
.sf-hero--video .sf-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-5); }
.sf-hero__player { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-navy-mid); box-shadow: var(--oc-shadow-lg); }
.sf-hero__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) {
  .sf-hero.sf-section { --oc-overlay-dir: 90deg; }
  .sf-hero--right.sf-section { --oc-overlay-dir: 270deg; }
  .sf-hero--center.sf-section { --oc-overlay-dir: 0deg; }
  .sf-hero--video .sf-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--oc-space-7); }
}

/* Slideshow: split slides in a scroll-snap track. No script. On a phone each
   slide is its picture (16:9) over its copy; from tablet up they sit side by
   side. */
.sf-slideshow.sf-section { position: relative; }
.sf-slideshow--sm { --oc-slide-min: var(--oc-slide-sm); }
.sf-slideshow--md { --oc-slide-min: var(--oc-slide-md); }
.sf-slideshow--lg { --oc-slide-min: var(--oc-slide-lg); }
.sf-slideshow__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf-slideshow__track::-webkit-scrollbar { display: none; }
.sf-slideshow__slide { display: grid; flex: 0 0 100%; grid-template-columns: minmax(0, 1fr); min-height: var(--oc-slide-min); scroll-snap-align: start; }
.sf-slideshow__media { position: relative; width: 100%; min-width: 0; min-height: var(--oc-hero-floor, 16.25rem); aspect-ratio: 16 / 9; background: var(--oc-navy-mid); }
.sf-slideshow__img, .sf-slideshow__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sf-slideshow__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--oc-navy) 0%, var(--oc-navy-mid) 100%); }
.sf-slideshow__copy { display: flex; align-items: center; min-width: 0; padding: var(--oc-space-6) var(--oc-gutter); background: var(--oc-navy); color: var(--oc-on-navy-soft); }
.sf-slideshow__slide--subtle .sf-slideshow__copy { background: var(--oc-bg-subtle); color: var(--oc-text-soft); }
.sf-slideshow__slide--gold .sf-slideshow__copy { background: var(--oc-gold-bg); color: var(--oc-text-soft); }
/* The copy box is the container the title is sized against (see --oc-title-fit in the
   hero block): width 100% because a size-contained flex item would otherwise
   shrink to nothing. */
.sf-slideshow__copy-inner { width: 100%; max-width: 32rem; container-type: inline-size; }
.sf-slideshow__title {
  margin: 0 0 var(--oc-space-3);
  color: var(--oc-white);
  font-size: var(--oc-hero-title-size);
  font-weight: var(--oc-title-weight);
  line-height: var(--oc-heading-leading);
  text-transform: uppercase;
  letter-spacing: var(--oc-hero-title-tracking);
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Sized against the copy box, as the hero title is (--oc-title-fit): the token above is
   the cap, this is the fit. */
.sf-slideshow__copy-inner .sf-slideshow__title { font-size: min(var(--oc-hero-title-size), calc(var(--oc-title-fit) * 1cqw)); }
.sf-slideshow__slide--subtle .sf-slideshow__title, .sf-slideshow__slide--gold .sf-slideshow__title { color: var(--oc-navy); }
.sf-slideshow__eyebrow {
  display: block;
  margin: 0 0 var(--oc-space-3);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  letter-spacing: var(--oc-tracking-wide);
  text-transform: uppercase;
  color: var(--oc-gold-light);
}
.sf-slideshow__slide--subtle .sf-slideshow__eyebrow, .sf-slideshow__slide--gold .sf-slideshow__eyebrow { color: var(--oc-gold-hover); }
.sf-slideshow__lead { margin: 0 0 var(--oc-space-5); font-size: var(--oc-text-lg); }
.sf-slideshow__actions { display: flex; flex-wrap: wrap; gap: var(--oc-space-3); }
/* No arrows, dots or pause button (owner, 2026-10-21): storefront/assets/slideshow.js
   slides it on every 5s. snap-stop keeps a fast flick to one slide. */
.sf-slideshow__slide { scroll-snap-stop: always; grid-template-rows: auto 1fr; }
@media (prefers-reduced-motion: reduce) { .sf-slideshow__track { scroll-behavior: auto; } }
.sf-slideshow__track:focus-visible { outline-offset: -2px; }
@media (min-width: 768px) {
  .sf-slideshow__slide { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .sf-slideshow__slide--right .sf-slideshow__media { order: 2; }
  .sf-slideshow__media { min-height: 16rem; aspect-ratio: auto; }
  .sf-slideshow__copy { padding: var(--oc-space-7); }
}

/* Rich text and image + text. A rich-text band sits in the page container like
   every other band, and its content (rule, title, text, buttons) is ONE centred
   block of most of that width (90%, capped at 68rem), one column, from tablet up (owner,
   2026-10-16, on the WSET page: the title spanned the page while the text hugged
   the left in a half-width column, "full width on the text in there looks strange
   - centred and 3/4 width", then "make that text wider"). The text inside stays left-aligned and fills the
   block, which is what holds the line length (the cap is in rem, for a very wide
   page); a phone keeps the full width and the gutter. A full-bleed band has no
   container and is not touched. */
.sf-rich-text .sf-prose { text-align: left; }
@media (min-width: 768px) {
  .sf-rich-text:not(.sf-rich-text--cols) > .sf-page > *, .sf-contact-form > .sf-page > * { width: min(90%, 68rem); margin-left: auto; margin-right: auto; }
}
.sf-rich-text.sf-section--center .sf-prose { text-align: center; }
.sf-rich-text.sf-section--center .sf-prose > :is(p, ul, ol, h1, h2, h3, h4, blockquote) { margin-left: auto; margin-right: auto; }
.sf-rich-text.sf-section--center .sf-prose :is(ul, ol) { text-align: left; }
.sf-rich-text .sf-prose > :last-child { margin-bottom: 0; }
.sf-rich-text .sf-prose.sf-prose--cols > * { max-width: none; }
.sf-prose__lead { font-size: var(--oc-text-lg); color: var(--oc-text-soft); }
.sf-prose--cols { column-gap: var(--oc-space-8); }
@media (min-width: 768px) {
  .sf-prose--cols { column-count: 2; }
  .sf-prose--cols :is(h2, h3) { break-after: avoid; break-inside: avoid; }
  .sf-prose--cols :is(p, ul, ol, li) { break-inside: avoid; }
}

/* A long rich-text band (views/sections/rich-text.js). Left-aligned running text
   at a comfortable measure; a smaller section title with the gold rule once the
   page has had its first (display-size) one; a titled band is its title above
   its text, in the one centred block above (it was a left third / right two
   thirds split on desktop, which left the page's centre empty and the text
   hugging one side); untoned long bands alternate white and the soft tint,
   counted among themselves, which is what gives a long page its rhythm. */
.sf-rich-text--rhythm:nth-child(even of .sf-rich-text--rhythm) { background: var(--oc-bg-subtle); }
.sf-rich-text .sf-prose { line-height: 1.75; }
.sf-rich-text .sf-prose > :is(p, ul, ol) { margin-bottom: var(--oc-space-4); }
.sf-rich-text .sf-prose li::marker { color: var(--oc-gold-hover); }
/* Not the cards: a card is an <li> too, and this rule (more specific than the card's
   own padding) used to cut its left padding to 4px, so the label and text sat flush
   against the card's edge. */
.sf-rich-text .sf-prose li:not(.sf-prose__card) { padding-left: var(--oc-space-1); }
.sf-rich-text .sf-prose strong { color: var(--oc-navy); font-weight: var(--oc-weight-semibold); }
.sf-rich-text .sf-prose > h2 { margin: var(--oc-space-7) 0 var(--oc-space-3); font-size: var(--oc-text-xl); }
.sf-rich-text .sf-prose > h2:first-child { margin-top: 0; }
.sf-rich-text .sf-prose > h3 { margin: var(--oc-space-5) 0 var(--oc-space-2); font-size: var(--oc-text-lg); }
.sf-rich-text .sf-rich-text__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-4); }
.sf-rich-text .sf-rich-text__grid > .sf-section__head { margin-bottom: 0; }
.sf-rich-text:not(.sf-section--center) .sf-section__title::before { content: ""; display: block; width: var(--oc-space-7); height: 1px; margin-bottom: var(--oc-space-4); background: var(--oc-gold); }
.sf-rich-text ~ .sf-rich-text .sf-section__title { font-size: var(--oc-text-xl); line-height: 1.25; }
@media (min-width: 768px) {
  .sf-rich-text ~ .sf-rich-text .sf-section__title { font-size: var(--oc-card-title-size); }
}
/* "Bold label - description" lines (views/prose.js): a small grid of cards. The
   dash stays in the text for a reader of the markup; the card does not draw it. */
.sf-prose .sf-prose__cards { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--oc-space-3); margin: var(--oc-space-4) 0 var(--oc-space-5); padding: 0; list-style: none; }
.sf-prose .sf-prose__card { display: flex; flex-direction: column; gap: var(--oc-space-2); margin: 0; padding: var(--oc-space-4) var(--oc-space-5); border: 1px solid var(--oc-divider); border-top: 2px solid var(--oc-gold); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); box-shadow: var(--oc-shadow-sm); }
.sf-prose__card-title { font-family: var(--oc-font-heading); font-size: var(--oc-text-md); letter-spacing: var(--oc-tracking); text-transform: uppercase; color: var(--oc-navy); }
.sf-prose__card-text { font-size: var(--oc-text-md); line-height: 1.6; color: var(--oc-text-soft); }
.sf-prose__dash { display: none; }
@media (min-width: 640px) {
  .sf-prose .sf-prose__cards--2, .sf-prose .sf-prose__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-prose .sf-prose__cards--3, .sf-prose .sf-prose__cards--5, .sf-prose .sf-prose__cards--6 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.sf-image-text__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-5); align-items: center; }
.sf-image-text__media, .sf-image-text__copy { min-width: 0; }
.sf-image-text__img { width: 100%; aspect-ratio: var(--oc-media-ratio); object-fit: cover; border-radius: var(--oc-radius-card); }
.sf-image-text--square { --oc-media-ratio: 1 / 1; }
.sf-image-text--landscape { --oc-media-ratio: 4 / 3; }
.sf-image-text--wide { --oc-media-ratio: 3 / 2; }
.sf-image-text--portrait { --oc-media-ratio: 3 / 4; }
.sf-image-text__copy .sf-section__head { margin-bottom: var(--oc-space-4); }
.sf-image-text__copy .sf-prose > :last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .sf-image-text__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oc-space-7); }
  .sf-image-text__grid--single { grid-template-columns: minmax(0, 1fr); }
  .sf-image-text__grid--reverse .sf-image-text__media { order: 2; }
}

/* Tile row: collection links with pictures. Two across on a phone; the row
   keeps three from tablet and takes its own count from desktop. `scroll` is the
   theme's long row: one swipeable line at every width. */
.sf-tiles__grid { --oc-tile-cols: 2; display: grid; grid-template-columns: repeat(var(--oc-tile-cols), minmax(0, 1fr)); gap: var(--oc-space-3); }
.sf-tiles__grid .sf-tile { min-width: 0; height: 100%; }
.sf-tiles__grid .sf-tile__title { overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .sf-tiles__grid { gap: var(--oc-grid-gap); }
}
@media (min-width: 768px) {
  .sf-tiles__grid { --oc-tile-cols: 3; }
}
@media (min-width: 1024px) {
  .sf-tiles__grid--3 { --oc-tile-cols: 3; }
  .sf-tiles__grid--4 { --oc-tile-cols: 4; }
  .sf-tiles__grid--5 { --oc-tile-cols: 5; }
  .sf-tiles__grid--6 { --oc-tile-cols: 6; }
}

/* Product shelf: the product grid under a section heading. `cols-N` sets the
   cards per row from desktop up; `scroll` makes it one swipeable row on a
   phone. (The grid itself is the product listing's .sf-grid.) */
.sf-product-shelf--scroll .sf-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--oc-space-2); }
.sf-product-shelf--scroll .sf-grid > * { flex: 0 0 62%; scroll-snap-align: start; }
@media (min-width: 768px) {
  .sf-product-shelf--scroll .sf-grid { display: grid; overflow: visible; }
  .sf-product-shelf--scroll .sf-grid > * { flex: none; }
}
@media (min-width: 1024px) {
  .sf-product-shelf--cols-3 .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-product-shelf--cols-4 .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-product-shelf--cols-5 .sf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sf-product-shelf--cols-6 .sf-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Blog strip: the shape of the card picture, the theme's blog_image_size. */
.sf-blog-strip--wide .sf-post__media { aspect-ratio: 16 / 9; }
.sf-blog-strip--natural .sf-post__media { aspect-ratio: 4 / 3; }

/* FAQ: the product page's accordion, sentence case because a question is a sentence. */
.sf-faq .sf-accordion__title { gap: var(--oc-space-4); font-size: var(--oc-text-md); font-weight: 600; text-transform: none; letter-spacing: 0; text-align: left; }
.sf-faq .sf-accordion__body { color: var(--oc-text); }
.sf-faq .sf-accordion__body > :first-child { margin-top: 0; }
.sf-faq .sf-accordion__body > :last-child { margin-bottom: 0; }
.sf-faq .sf-accordion__title::after { flex: none; }

/* Slider (components.js sliderHtml, storefront/assets/slider.js): one scroll-snap
   row, one slide on a phone (the next peeks, so it reads as swipeable), two from
   tablet, the count the section asked for (sf-slider--N) from desktop. It is a
   swipeable row with no script; .is-enhanced is added by the script, and only
   then are the scrollbar hidden, the controls drawn and a long quote clamped, so
   nothing is ever cut off that the script cannot give back. Any section drawing
   a row of cards uses this, never its own scroller. */
.sf-slider { --oc-slides: 1; --oc-slide-gap: var(--oc-space-4); position: relative; min-width: 0; }
.sf-slider:not(.sf-slider--1) { --oc-slides: 1.12; }
.sf-slider--1 { max-width: var(--oc-prose-width); margin-left: auto; margin-right: auto; }
.sf-slider__track { display: flex; gap: var(--oc-slide-gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: var(--oc-space-2); }
.sf-slider__slide { display: flex; flex: 0 0 calc((100% - (var(--oc-slides) - 1) * var(--oc-slide-gap)) / var(--oc-slides)); min-width: 0; scroll-snap-align: start; }
.sf-slider__slide > * { flex: 1 1 auto; min-width: 0; }
.sf-slider.is-enhanced .sf-slider__track { scrollbar-width: none; padding-bottom: 0; }
.sf-slider.is-enhanced .sf-slider__track::-webkit-scrollbar { display: none; }
.sf-slider__controls { display: flex; align-items: center; justify-content: center; margin-top: var(--oc-space-4); }
.sf-slider__controls[hidden] { display: none; }
.sf-slider__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.sf-slider__dot { position: relative; width: var(--oc-space-5); height: var(--oc-space-5); padding: 0; border: 0; background: none; cursor: pointer; }
.sf-slider__dot::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--oc-border-input); transition: background var(--oc-transition); }
.sf-slider__dot:hover::before, .sf-slider__dot[aria-current="true"]::before { background: var(--oc-gold); }
.sf-slider__dot[aria-current="true"]::before { inset: 5px; }
.sf-section--navy .sf-slider__dot::before { background: var(--oc-on-navy-soft); opacity: 0.5; }
.sf-section--navy .sf-slider__dot[aria-current="true"]::before { opacity: 1; }
.sf-section--navy .sf-slider__dot:hover::before, .sf-section--navy .sf-slider__dot[aria-current="true"]::before { background: var(--oc-gold-light); }
.sf-slider.is-enhanced [data-sf-clamp]:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--oc-clamp-lines); line-clamp: var(--oc-clamp-lines); overflow: hidden; }
.sf-slider__more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--oc-gold-hover); font: inherit; font-size: var(--oc-text-sm); font-weight: 600; text-decoration: underline; cursor: pointer; }
.sf-slider__more:hover { color: var(--oc-navy); }
@media (min-width: 768px) {
  .sf-slider:not(.sf-slider--1) { --oc-slides: 2; --oc-slide-gap: var(--oc-grid-gap); }
}
@media (min-width: 1024px) {
  .sf-slider.sf-slider--2 { --oc-slides: 2; }
  .sf-slider.sf-slider--3 { --oc-slides: 3; }
  .sf-slider.sf-slider--4 { --oc-slides: 4; }
}

/* Testimonials: a slider of cards. A card keeps the gold top rule; the quote is
   clamped (with "Read more") so one long testimonial does not set the height of
   the row. */
.sf-testimonial { display: flex; flex-direction: column; gap: var(--oc-space-4); min-width: 0; margin: 0; padding: var(--oc-space-5); border: 1px solid var(--oc-divider); border-top: 3px solid var(--oc-gold); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); color: var(--oc-text); text-align: left; }
.sf-testimonial__quote { margin: 0; font-style: italic; overflow-wrap: anywhere; }
.sf-testimonial__quote p { margin: 0 0 var(--oc-space-3); }
.sf-testimonial__quote p:last-child { margin-bottom: 0; }
.sf-testimonial__cite { margin-top: auto; font-size: var(--oc-text-sm); }
.sf-testimonial__author { display: block; font-family: var(--oc-font-heading); font-weight: 600; color: var(--oc-navy); }
.sf-testimonial__role { display: block; color: var(--oc-text-muted); }

/* Logo / trust row. */
.sf-logos__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--oc-space-4) var(--oc-space-7); margin: 0; padding: 0; list-style: none; }
.sf-logos__img { width: auto; max-width: 9rem; max-height: 3rem; object-fit: contain; }
.sf-logos__text { font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }
.sf-logos__link { display: block; text-decoration: none; }

/* Newsletter sign-up. */
.sf-signup__form { display: flex; flex-direction: column; align-items: stretch; gap: var(--oc-space-3); max-width: 30rem; margin: 0 auto; }
.sf-signup__form > .sf-fieldset { display: flex; flex-direction: column; flex: 1; gap: var(--oc-space-3); }
.sf-signup__field { flex: 1; min-width: 0; margin: 0; }
.sf-signup__note { margin: var(--oc-space-3) 0 0; font-size: var(--oc-text-sm); color: var(--oc-text-muted); }
@media (min-width: 480px) {
  .sf-signup__form { flex-direction: row; align-items: flex-start; }
  .sf-signup__form > .sf-fieldset { flex-direction: row; }
}

/* Contact form: one column, in the live composition block at the end of this file. */

/* Map / address. */
.sf-map__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--oc-space-5); padding: var(--oc-space-5); border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-section--subtle .sf-map__card { background: var(--oc-bg); }
.sf-map__body { min-width: 0; flex: 1 1 18rem; }
.sf-map__address { font-style: normal; overflow-wrap: anywhere; }
.sf-map__note { margin-top: var(--oc-space-3); color: var(--oc-text-soft); }
.sf-map__note p:last-child { margin-bottom: 0; }

/* Steps / process, and the CTA band that can carry them. One column on a
   phone, three across from tablet. */
.sf-process__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-grid-gap); margin: 0; padding: 0; list-style: none; counter-reset: sf-process; }
.sf-process__step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--oc-space-4); align-content: start; min-width: 0; padding: var(--oc-space-5); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); color: var(--oc-text-soft); text-align: left; counter-increment: sf-process; }
.sf-process__step::before { content: counter(sf-process); grid-row: span 2; display: grid; place-items: center; width: var(--oc-space-7); height: var(--oc-space-7); border: 2px solid var(--oc-gold); border-radius: 50%; font-family: var(--oc-font-heading); font-weight: 700; color: var(--oc-navy); }
.sf-process__title { margin: 0 0 var(--oc-space-2); font-size: var(--oc-text-base); font-weight: 600; }
.sf-process__text { margin: 0; font-size: var(--oc-text-md); }
.sf-section--navy .sf-process__step { border-color: var(--oc-on-navy-line); background: var(--oc-on-navy-faint); color: var(--oc-on-navy-soft); }
.sf-section--navy .sf-process__step::before { color: var(--oc-white); }
.sf-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oc-space-3); margin-top: var(--oc-space-6); }
.sf-cta .sf-section__head { margin-bottom: 0; }
@media (min-width: 768px) {
  .sf-process__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-section__card { padding: var(--oc-space-7) var(--oc-space-6); }
}

/* Figures (stats): big values, small labels. */
.sf-figures__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--oc-space-5) var(--oc-grid-gap); margin: 0; }
.sf-figures__item { display: flex; flex-direction: column; min-width: 0; gap: var(--oc-space-1); }
.sf-figures__value { order: 1; margin: 0; font-family: var(--oc-font-heading); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 600; line-height: 1.2; color: var(--oc-navy); overflow-wrap: anywhere; }
.sf-figures__label { order: 2; font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-gold-hover); }
.sf-figures__note { order: 3; margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-section--navy .sf-figures__value { color: var(--oc-white); }
.sf-section--navy .sf-figures__label { color: var(--oc-gold-light); }
.sf-section--navy .sf-figures__note { color: var(--oc-on-navy-soft); }

/* Columns: icon or picture, title, text. One column on a phone; two from
   tablet (three where the band has three); the band's own count from desktop. */
.sf-columns__grid { --oc-cols: 1; display: grid; grid-template-columns: repeat(var(--oc-cols), minmax(0, 1fr)); gap: var(--oc-space-6) var(--oc-space-5); }
.sf-columns__item { min-width: 0; }
.sf-columns__icon { margin-bottom: var(--oc-space-3); color: var(--oc-gold); }
.sf-section--center .sf-columns__icon .sf-icon { margin: 0 auto; }
.sf-columns__title { margin: 0 0 var(--oc-space-2); font-size: var(--oc-text-lg); font-weight: 600; overflow-wrap: anywhere; }
.sf-columns__text > :first-child { margin-top: 0; }
.sf-columns__text > :last-child { margin-bottom: 0; }
.sf-columns__text { color: var(--oc-text-soft); }
.sf-columns__media { margin-bottom: var(--oc-space-4); overflow: hidden; border-radius: var(--oc-radius-card); }
.sf-columns__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sf-columns__media--video { position: relative; aspect-ratio: 16 / 9; background: var(--oc-navy); }
.sf-columns__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-columns__actions { margin-top: var(--oc-space-4); }
@media (min-width: 768px) {
  .sf-columns__grid--2, .sf-columns__grid--3, .sf-columns__grid--4, .sf-columns__grid--5 { --oc-cols: 2; }
  .sf-columns__grid--3 { --oc-cols: 3; }
}
@media (min-width: 1024px) {
  .sf-columns__grid--4 { --oc-cols: 4; }
  .sf-columns__grid--5 { --oc-cols: 5; }
}

/* Promos: pictures with words over them, in one row of the page. Stacked on a
   phone, half-width ones side by side from tablet, a full one across both. */
.sf-promos__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-grid-gap); }
.sf-promo { position: relative; isolation: isolate; display: flex; min-width: 0; min-height: var(--oc-promo-min); overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-navy); color: var(--oc-white); text-decoration: none; }
.sf-promo--sm { --oc-promo-min: var(--oc-promo-sm); }
.sf-promo--lg { --oc-promo-min: var(--oc-promo-lg); }
.sf-promo__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sf-promo--image::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--oc-navy) 62%, transparent) 0%, color-mix(in srgb, var(--oc-navy) 18%, transparent) 70%, transparent 100%); }
.sf-promo__body { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: var(--oc-space-5); text-align: center; }
.sf-promo--left .sf-promo__body { align-items: flex-start; text-align: left; }
.sf-promo--right .sf-promo__body { align-items: flex-end; text-align: right; }
.sf-promo--v-top .sf-promo__body { justify-content: flex-start; }
.sf-promo--v-bottom .sf-promo__body { justify-content: flex-end; }
.sf-promo__eyebrow { margin: 0 0 var(--oc-space-2); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 600; letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; color: var(--oc-gold-light); }
.sf-promo__title { margin: 0; color: var(--oc-white); font-size: var(--oc-text-xl); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.sf-promo__text { max-width: var(--oc-measure); margin: var(--oc-space-3) 0 0; color: var(--oc-on-navy-soft); }
.sf-promo__actions { display: flex; flex-wrap: wrap; gap: var(--oc-space-3); margin-top: var(--oc-space-4); }
@media (min-width: 768px) {
  .sf-promos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-promo--full { grid-column: 1 / -1; }
  .sf-promo__body { padding: var(--oc-space-6); }
}
.sf-section--full .sf-promos__grid { gap: 0; }
.sf-section--full .sf-promo { border-radius: 0; }

/* Video embed. */
.sf-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-navy); box-shadow: var(--oc-shadow-md); }
.sf-video__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-video__caption { margin: var(--oc-space-3) 0 0; font-size: var(--oc-text-sm); color: var(--oc-text-muted); text-align: center; }
.sf-section--full .sf-video__frame { max-height: 46rem; border-radius: 0; box-shadow: none; }

/* Icons drawn by columns. */
.sf-icon { display: block; width: 2rem; height: 2rem; }

/* Recently viewed: the product shelf's layout (classes on the section), empty
   and hidden until storefront/assets/recently-viewed.js fills it from the
   visitor's own browser. The list is a <ul>, so it drops the list chrome. */
.sf-recently-viewed .sf-card__name { font-size: var(--oc-text-sm); }
.sf-recently-viewed__list { list-style: none; margin: 0; padding: 0; }
.sf-recently-viewed__item { display: flex; min-width: 0; }
.sf-recently-viewed__item > .sf-card { flex: 1 1 auto; }

/* Collection return: one secondary button, centred like the theme's. The
   arrow is decoration (empty alternative text, so a screen reader skips it). */
.sf-collection-return { text-align: center; }
.sf-collection-return__link::before { content: "\2190"; content: "\2190" / ""; margin-inline-end: var(--oc-space-2); }

/* The collection's own text, under its listing: the title, the opening
   paragraphs and the rest behind a native <details> ("Read more"). */
.sf-collection-text .sf-section__title { margin-bottom: var(--oc-space-3); }
.sf-readmore { margin-top: var(--oc-space-3); }
.sf-readmore__summary { cursor: pointer; font-weight: 600; }
.sf-readmore[open] > .sf-readmore__summary { margin-bottom: var(--oc-space-3); }

/* ── end sections ─────────────────────────────────────────────────────── */

/* ── blog & search ─────────────────────────────────────────────────────────
   The article banner, the blog/article two-column layout and its sidebar, the
   search page's extras and the header search dropdown. Tokens only. The live
   theme's shapes (assets/onshore-hotfix.css): the banner is one fixed shape,
   3.5:1 on a desktop and 16:9 on a phone, whatever the picture's own ratio; the
   topic links are compact outlined chips (.sf-chip--sm). */

.sf-article__hero-band { padding-bottom: 0; }
.sf-article__banner { aspect-ratio: 3.5 / 1; overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-article__banner picture { display: block; width: 100%; height: 100%; }
.sf-article__banner .sf-article__hero { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
@media (max-width: 768px) {
  .sf-article__banner { aspect-ratio: 16 / 9; }
}
.sf-article__tags { margin: 0 0 var(--oc-space-3); padding: 0; list-style: none; }
.sf-article__tags .sf-chip { padding: 0; }
.sf-article__tags .sf-chip a { display: inline-flex; align-items: center; min-height: inherit; padding: 0 var(--oc-space-3); color: inherit; text-decoration: none; }
.sf-article__back { margin-top: var(--oc-space-6); }

.sf-blog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--oc-sidebar-width);
  gap: var(--oc-space-6);
  align-items: start;
}
.sf-blog__main { min-width: 0; }
.sf-blog__filter { margin: 0 0 var(--oc-space-4); color: var(--oc-text-soft); }
.sf-blog__side { position: sticky; top: calc(var(--oc-space-8) + var(--oc-space-5)); display: grid; gap: var(--oc-space-5); min-width: 0; }
@media (max-width: 767px) {
  .sf-blog { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-5); }
  .sf-blog__side { position: static; }
}
.sf-side__title {
  margin: 0 0 var(--oc-space-3);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sf-side .sf-chips { margin: 0; padding: 0; list-style: none; }
.sf-side__more { margin-top: var(--oc-space-3); }
.sf-side__more > summary { margin-bottom: var(--oc-space-2); font-size: var(--oc-text-sm); color: var(--oc-text-soft); text-decoration: underline; cursor: pointer; }
.sf-side__products { display: grid; gap: var(--oc-space-4); }

.sf-searchbox { position: relative; }
.sf-search__correction { margin: 0 0 var(--oc-space-5); color: var(--oc-text-soft); }
.sf-search__prompt { color: var(--oc-text-soft); }
.sf-search__block { margin-top: var(--oc-space-6); }
.sf-search__heading {
  margin: 0 0 var(--oc-space-3);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sf-search__also { margin-top: var(--oc-space-7); padding-top: var(--oc-space-5); border-top: 1px solid var(--oc-divider); }
.sf-search__also-title { margin: 0 0 var(--oc-space-4); font-size: var(--oc-text-xl); }
.sf-search__list { display: grid; gap: var(--oc-space-4); margin: 0; padding: 0; list-style: none; }
.sf-search__link { font-weight: 600; color: var(--oc-navy); text-decoration: none; }
.sf-search__link:hover { color: var(--oc-gold-hover); text-decoration: underline; }
.sf-search__summary { margin: var(--oc-space-1) 0 0; font-size: var(--oc-text-md); color: var(--oc-text-soft); }
.sf-search__sourcing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-4);
  margin-top: var(--oc-space-7);
  padding: var(--oc-space-5);
  border: 1px solid var(--oc-gold-light);
  border-radius: var(--oc-radius-card);
  background: var(--oc-gold-bg);
}
.sf-search__sourcing p { margin: 0; color: var(--oc-text-soft); }
.sf-search__sourcing .sf-search__heading { margin-bottom: var(--oc-space-1); }

/* The header dropdown (assets/search.js). The panel hangs under the sticky
   header; on the search page the same list opens under the field. */
.sf-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--oc-z-popover);
  padding: var(--oc-space-4) var(--oc-gutter);
  border-bottom: 1px solid var(--oc-divider);
  background: var(--oc-bg);
  box-shadow: var(--oc-shadow-md);
}
.sf-suggest__form, .sf-suggest__results { max-width: var(--oc-prose-width); margin: 0 auto; }
.sf-suggest__form { display: flex; gap: var(--oc-space-2); }
.sf-suggest__input { flex: 1; min-width: 0; }
.sf-suggest__list {
  margin-top: var(--oc-space-2);
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-card);
  background: var(--oc-bg);
}
.sf-searchbox .sf-suggest__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--oc-z-popover);
  margin-top: var(--oc-space-1);
  box-shadow: var(--oc-shadow-md);
}
.sf-suggest__list[aria-busy="true"] { opacity: 0.6; }
.sf-suggest__heading {
  padding: var(--oc-space-2) var(--oc-space-4);
  background: var(--oc-bg-subtle);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-text-soft);
}
.sf-suggest__option {
  display: flex;
  align-items: center;
  gap: var(--oc-space-3);
  padding: var(--oc-space-2) var(--oc-space-4);
  color: var(--oc-text);
  text-decoration: none;
}
.sf-suggest__option:hover, .sf-suggest__option[aria-selected="true"] { background: var(--oc-gold-bg); }
.sf-suggest__option:focus-visible { outline: var(--oc-focus-ring); outline-offset: -2px; }
.sf-suggest__img { flex: none; width: 40px; height: 40px; border-radius: var(--oc-radius-card); object-fit: cover; }
.sf-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.sf-suggest__title { font-size: var(--oc-text-md); overflow-wrap: anywhere; }
.sf-suggest__meta { font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-suggest__none { margin: 0; padding: var(--oc-space-3) var(--oc-space-4); color: var(--oc-text-soft); }
.sf-suggest__foot { border-top: 1px solid var(--oc-divider); }
.sf-suggest__foot .sf-suggest__title { font-weight: 600; color: var(--oc-navy); }

/* ── end blog & search ────────────────────────────────────────────────── */

/* ── cart drawer & search ──────────────────────────────────────────────────
   Two pieces of chrome that open over the page: the cart drawer (the design
   system's native <dialog class="sf-drawer">, drawn by views/shell.js and
   filled by assets/cart-drawer.js) and the header search (a real field in the
   header, nav.js headerSearch(), with its suggestion panel built by
   assets/search.js). Tokens only: no colour, shadow or timing is written here
   that is not already a token. The page behind either is locked from
   scrolling by a class on <html>. */

.sf-drawer-lock, .sf-search-lock { overflow: hidden; }
.sf-search-lock .sf-chat__launcher { display: none; }
/* the header is a stacking context of its own, so the overlay inside it can only
   cover the announcement bar and the page if the header itself does */
.sf-search-lock .sf-header { z-index: var(--oc-z-overlay); }

/* ---- the cart drawer */

.sf-drawer--cart { max-width: 100vw; }
.sf-drawer__added {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--oc-space-2);
  margin: 0;
  padding: var(--oc-space-3) var(--oc-space-5);
  background: var(--oc-success-bg);
  color: var(--oc-success-ink);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-sm);
  font-weight: var(--oc-weight-bold);
}
.sf-drawer__added:empty { display: none; }
.sf-drawer__added::before { content: "\2713"; font-size: var(--oc-text-lg); line-height: 1; }
/* The refusal alerts are always in the page (hidden), so they carry the danger
   tone here rather than as .sf-alert--danger, which a page that is not showing
   an error must not contain. */
.sf-drawer__error, .sf-cart-live__alert { --sf-tone-bg: var(--oc-danger-bg); --sf-tone-ink: var(--oc-danger-ink); --sf-tone-line: var(--oc-danger); }
.sf-drawer__error { flex: none; margin: var(--oc-space-3) var(--oc-space-5) 0; }
.sf-drawer--cart .sf-drawer__form[aria-busy="true"] { opacity: 0.6; transition: opacity var(--oc-transition); }
.sf-drawer__lines { margin: 0; padding: 0; list-style: none; }
.sf-drawer__lines > li + li { border-top: 1px solid var(--oc-divider); }
.sf-drawer__lines .sf-lineitem { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; padding: var(--oc-space-4) 0; }
.sf-drawer__lines .sf-lineitem__thumb { width: 64px; background: var(--oc-product-media-bg, var(--oc-bg-subtle)); }
.sf-drawer__lines .sf-lineitem__img--empty { display: block; }
.sf-drawer__lines .sf-lineitem__name a { color: var(--oc-text); text-decoration: none; }
.sf-drawer__lines .sf-lineitem__name a:hover { color: var(--oc-gold-hover); }
.sf-drawer__lines .sf-lineitem__price { padding-top: var(--oc-space-1); }
.sf-drawer-line__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-1) var(--oc-space-3); margin: var(--oc-space-2) 0 0; }
.sf-drawer-line__remove { font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-drawer-line__remove:hover { color: var(--oc-danger); }
.sf-drawer__body--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--oc-space-3); text-align: center; }
.sf-drawer__body--empty p { margin: 0; }
.sf-drawer__empty-title { font-family: var(--oc-font-heading); font-size: var(--oc-text-lg); font-weight: var(--oc-weight-semibold); }
.sf-drawer--cart .sf-drawer__foot { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--oc-space-2); background: var(--oc-bg); }
.sf-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-lg); }
.sf-drawer__note { margin: 0 0 var(--oc-space-2); font-size: var(--oc-text-sm); }
.sf-drawer__checkout { margin: 0; }
.sf-drawer__continue { align-self: center; padding-top: var(--oc-space-1); font-size: var(--oc-text-sm); }

/* ---- the header search field
   Phone: an icon (a link to /search). With the script it opens an overlay that
   takes the whole header, and the results fill the screen under it. Desktop:
   the field is always there, grey, with the panel hanging under it. */

.sf-hsearch { display: flex; align-items: center; }
.sf-hsearch__box { display: none; }
.sf-hsearch__form { position: relative; display: flex; align-items: center; }
.sf-hsearch__go {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--oc-control-height);
  border: 0;
  background: none;
  color: var(--oc-text-soft);
  cursor: pointer;
}
.sf-hsearch__go:hover { color: var(--oc-gold-hover); }
.sf-hsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--oc-control-height);
  padding: 0 var(--oc-control-height);
  border: 1px solid transparent;
  border-radius: var(--oc-radius-control);
  background: var(--oc-bg-search);
  color: var(--oc-text);
  font-family: var(--oc-font-body);
  font-size: var(--oc-text-base);
  -webkit-appearance: none;
  appearance: none;
}
.sf-hsearch__input::placeholder { color: var(--oc-text-soft); opacity: 1; }
.sf-hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-hsearch__input:focus { outline: none; border-color: var(--oc-gold); background: var(--oc-bg); }
.sf-hsearch__input:focus-visible { outline: var(--oc-focus-ring); outline-offset: 0; }
.sf-hsearch__clear {
  position: absolute;
  top: 50%;
  right: var(--oc-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--oc-radius-control);
  background: var(--oc-border-input);
  color: var(--oc-white);
  cursor: pointer;
}
.sf-hsearch__clear:hover { background: var(--oc-text-soft); }
.sf-hsearch__clear .sf-glyph { width: 14px; height: 14px; }
.sf-hsearch__close { display: none; }

/* phone, script running: the field is an overlay over the whole screen */
.sf-js .sf-hsearch--open .sf-hsearch__box {
  position: fixed;
  inset: 0;
  z-index: var(--oc-z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--oc-bg);
}
.sf-preview-ribbon ~ .sf-site .sf-hsearch--open .sf-hsearch__box { top: var(--oc-ribbon-height); }
.sf-js .sf-hsearch--open .sf-hsearch__form {
  flex: none;
  gap: var(--oc-space-1);
  padding: var(--oc-space-2) var(--oc-space-2) var(--oc-space-2) var(--oc-space-4);
  border-bottom: 1px solid var(--oc-divider);
}
.sf-js .sf-hsearch--open .sf-hsearch__go { left: var(--oc-space-4); }
.sf-js .sf-hsearch--open .sf-hsearch__clear { right: calc(var(--oc-control-height) + var(--oc-space-2)); }
.sf-js .sf-hsearch--open .sf-hsearch__close { display: inline-flex; flex: none; }
.sf-js .sf-hsearch--open .sf-suggest__foot { position: sticky; bottom: 0; border-bottom: 1px solid var(--oc-divider); }
.sf-js .sf-hsearch--open .sf-suggest__list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* ---- the suggestion panel (shared with the search page's own box) */

.sf-suggest__cols--single, .sf-suggest__cols--split { display: block; }
.sf-suggest__col--side .sf-suggest__group { padding-bottom: var(--oc-space-2); }
.sf-suggest__group--popular { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--oc-space-2); }
.sf-suggest__group--popular .sf-suggest__heading { grid-column: 1 / -1; }
.sf-suggest__heading { background: none; padding-top: var(--oc-space-3); padding-bottom: var(--oc-space-1); }
.sf-suggest__option:hover { background: var(--oc-bg-subtle); }
.sf-suggest__option[aria-selected="true"] { background: var(--oc-bg-subtle); box-shadow: inset 3px 0 0 var(--oc-gold); }
.sf-suggest__option--product { align-items: center; }
.sf-suggest__option--product .sf-suggest__img { width: 64px; height: auto; aspect-ratio: var(--oc-product-media-ratio, 1 / 1); padding: var(--oc-space-1); background: var(--oc-product-media-bg, var(--oc-bg-subtle)); object-fit: contain; }
.sf-suggest__img--empty { display: block; }
.sf-suggest__option--product .sf-suggest__title { font-weight: var(--oc-weight-semibold); }
.sf-suggest__option--collection .sf-suggest__img, .sf-suggest__option--article .sf-suggest__img { width: 48px; height: 48px; }
.sf-suggest__price { flex: none; margin-left: auto; padding-left: var(--oc-space-2); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-bold); color: var(--oc-navy); text-align: right; }
.sf-suggest__mark { padding: 0; background: var(--oc-gold-bg); box-shadow: inset 0 -2px 0 var(--oc-gold-light); color: inherit; font-weight: var(--oc-weight-bold); }
.sf-suggest__fix { padding: 0 var(--oc-space-2); }
.sf-suggest__none { padding-top: var(--oc-space-4); padding-bottom: var(--oc-space-2); font-family: var(--oc-font-heading); font-weight: var(--oc-weight-semibold); color: var(--oc-text); }
.sf-suggest__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--oc-bg-subtle); }
.sf-suggest__foot .sf-suggest__option { flex: 1 1 auto; padding-top: var(--oc-space-3); padding-bottom: var(--oc-space-3); }
.sf-suggest__foot .sf-suggest__option:last-child:not(:first-child) .sf-suggest__title { font-weight: var(--oc-weight-regular); color: var(--oc-text-soft); text-decoration: underline; }

/* desktop: the field is the header's grey search box and the panel hangs under
   it, wider than the field, in two columns */
@media (min-width: 769px) {
  .sf-hsearch { flex: 1 1 auto; max-width: 560px; margin-right: auto; }
  .sf-hsearch__open { display: none; }
  .sf-hsearch__box { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
  .sf-hsearch .sf-suggest__list {
    position: absolute;
    top: calc(100% + var(--oc-space-2));
    left: 0;
    z-index: var(--oc-z-suggest);
    width: max(100%, min(48rem, calc(100vw - 2 * var(--oc-gutter) - var(--oc-logo-width-desktop) - var(--oc-space-5))));
    max-height: calc(100dvh - 180px);
    margin: 0;
    border-color: var(--oc-divider);
    box-shadow: var(--oc-shadow-lg);
  }
  .sf-hsearch .sf-suggest__cols--split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .sf-hsearch .sf-suggest__col--side { border-left: 1px solid var(--oc-divider); }
  .sf-hsearch .sf-suggest__group--popular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-hsearch .sf-suggest__foot .sf-suggest__option:last-child:not(:first-child) { justify-content: flex-end; text-align: right; }
}

/* ---- live quantities: the drawer's lines and the /cart page's
   The stepper and typed quantity update the cart as they change, so the Update
   button has nothing left to do once the script runs (.sf-js is on <html>) and
   is not drawn; without the script it is the form's own submit. A removed line
   slides out at once, a line waiting for the server is dimmed. Reduced motion is
   handled by the global rule that shortens every transition. */

.sf-js .sf-cart-line__update { display: none; }
.sf-lineitem, .sf-cart-line { transition: opacity var(--oc-transition), transform var(--oc-transition); }
.sf-lineitem[aria-busy="true"], .sf-cart-line[aria-busy="true"] { opacity: 0.55; }
.sf-line--leaving { opacity: 0; transform: translateX(var(--oc-space-5)); pointer-events: none; }
.sf-cart-live { min-width: 0; }
.sf-cart-live__alert { margin-bottom: var(--oc-space-4); }
.sf-cart-live__content[aria-busy="true"] { opacity: 0.8; }

/* ---- the /cart page: no sideways scroll at any width
   The old row kept its quantity controls on one unbreakable line, which pushed
   the Total column off the right edge between a phone and a wide desktop. The
   controls now wrap, every cell may shrink, and below 768px each line is a
   stacked card: picture, name and variant, price, stepper and remove, total. */

.sf-cart { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); max-width: 100%; }
.sf-cart-table { max-width: 100%; }
.sf-cart-table td, .sf-cart-table th { min-width: 0; }
.sf-cart-line__qty { white-space: normal; }
.sf-cart-line__qty .sf-cart-line__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-1) var(--oc-space-3); margin: 0; }
.sf-cart-line__name { overflow-wrap: anywhere; }
.sf-cart-line__remove { font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-cart-line__remove:hover { color: var(--oc-danger); }
@media (max-width: 1023px) {
  .sf-cart { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sf-cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sf-cart-table, .sf-cart-table tbody, .sf-cart-table tr, .sf-cart-table td { display: block; width: 100%; }
  .sf-cart-table tr { margin-bottom: var(--oc-space-3); padding: var(--oc-space-4); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg); }
  .sf-cart-table td { padding: var(--oc-space-1) 0; border: 0; }
  .sf-cart-table td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: var(--oc-space-3); }
  .sf-cart-table td[data-label]::before {
    content: attr(data-label);
    font-family: var(--oc-font-heading);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-wide);
    color: var(--oc-text-soft);
  }
  .sf-cart-table td.sf-cart-line__qty::before { display: none; }
  .sf-cart-line__product { margin-bottom: var(--oc-space-2); }
  .sf-cart-table td.sf-cart-line__total { padding-top: var(--oc-space-2); border-top: 1px solid var(--oc-divider); font-weight: var(--oc-weight-bold); }
}

/* ── end cart drawer & search ─────────────────────────────────────────── */

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sf-card:hover, .sf-tile:hover, .sf-post:hover { transform: none; }
  .sf-card:hover .sf-card__img { transform: none; }
  .sf-panel--interactive:hover, .sf-chat__launcher:hover, .sf-rating__star:hover { transform: none; }
  .sf-skeleton { background: var(--oc-divider); }
}

/* ── listing ───────────────────────────────────────────────────────────────
   The collection / search results area (views/listing.js): sidebar facets,
   price range, active-filter chips, sort, grid/list toggle and the phone
   drawer, after the live theme's sections/algolia-collection.liquid. It sits
   AFTER the older .sf-facet / .sf-check rules above and refines them; the
   drawer exists only once storefront/assets/listing.js has set
   [data-sf-live], so without script the sidebar is the <details> it always was.
   Tokens only; a width the scale has no name for is a local custom property. */
.sf-layout {
  --oc-facet-list-max: 16rem;
  --oc-view-btn: 30px;
  --oc-topbar-btn: 40px;
  --oc-facet-sticky-room: calc(var(--oc-space-8) + var(--oc-space-5) + var(--oc-space-4));
}

/* The filters' <form> wraps only the sidebar (views/listing.js says why), so it
   must not be a box of its own: the sidebar is the grid item, and its sticky
   position needs the grid, not a form its own height, as its container. */
.sf-filters { display: contents; }

/* The sidebar stays on screen while a long grid scrolls (live: sticky, with its
   own scrollbar); on a phone it is a drawer or a block (below). */
@media (min-width: 768px) {
  .sf-layout--sidebar > .sf-sidebar { max-height: calc(100vh - var(--oc-facet-sticky-room)); overflow-y: auto; scrollbar-width: thin; }
}
.sf-facets__head { display: none; }
.sf-facets__foot { margin-top: var(--oc-space-4); }
.sf-facets__apply { width: 100%; }
.sf-facets__toggle { gap: var(--oc-space-2); justify-content: flex-start; }
.sf-facet__body { padding-bottom: var(--oc-space-3); }
.sf-facet__list { max-height: var(--oc-facet-list-max); padding-right: var(--oc-space-1); scrollbar-width: thin; }
.sf-facet .sf-check { gap: var(--oc-space-2); padding: 3px 0; line-height: 1.25; }
.sf-facet .sf-check input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--oc-navy); }
.sf-facet .sf-check:has(input:checked) { color: var(--oc-text); font-weight: var(--oc-weight-semibold); }
.sf-facet .sf-check:has(input:checked) .sf-check__count { background: var(--oc-navy); color: var(--oc-white); }
.sf-check__count { min-width: 1.5em; text-align: center; }
.sf-facet__search { min-height: 32px; margin-bottom: var(--oc-space-1); font-size: var(--oc-text-sm); }

/* Price: "Inc. VAT", then a labelled Min and Max side by side. The label is its
   own line ABOVE its field, so a narrow sidebar can never stack "Min" into
   one letter a line. */
.sf-price-range__note { margin: 0 0 var(--oc-space-2); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); text-transform: uppercase; letter-spacing: var(--oc-tracking); color: var(--oc-text-muted); }
.sf-price-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--oc-space-2); }
.sf-price-range__field { display: flex; flex-direction: column; gap: var(--oc-space-1); min-width: 0; }
.sf-price-range__label { font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: var(--oc-weight-semibold); text-transform: uppercase; letter-spacing: var(--oc-tracking); color: var(--oc-text-soft); }
.sf-price-range__box { position: relative; display: block; }
.sf-price-range__currency { position: absolute; top: 50%; left: var(--oc-space-2); transform: translateY(-50%); font-size: var(--oc-text-sm); color: var(--oc-text-muted); pointer-events: none; }
.sf-price-range__input { min-height: 36px; padding: var(--oc-space-1) var(--oc-space-1) var(--oc-space-1) var(--oc-space-5); font-size: var(--oc-text-sm); -moz-appearance: textfield; appearance: textfield; }
.sf-price-range__input::-webkit-outer-spin-button, .sf-price-range__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-price-range__sep { padding-bottom: var(--oc-space-2); color: var(--oc-text-muted); }

/* Active filters: navy pills, each a link that removes it, and the gold
   "Clear all filters" underlined link, as live. */
.sf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-2) var(--oc-space-3); margin-bottom: var(--oc-space-4); }
.sf-chips__list { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; }
.sf-chip { display: inline-flex; align-items: center; gap: var(--oc-space-2); padding: var(--oc-space-1) var(--oc-space-3); border-radius: var(--oc-radius-control); background: var(--oc-navy); color: var(--oc-white); font-size: var(--oc-text-xs); line-height: 1.4; text-decoration: none; }
.sf-chip:hover { background: var(--oc-navy-mid); color: var(--oc-white); }
.sf-chip__attr { font-family: var(--oc-font-heading); font-weight: var(--oc-weight-semibold); text-transform: uppercase; letter-spacing: var(--oc-tracking); color: var(--oc-on-navy-soft); }
.sf-chip__x { font-size: var(--oc-text-md); line-height: 1; color: var(--oc-on-navy-soft); }
.sf-chips__clear { font-size: var(--oc-text-xs); font-weight: var(--oc-weight-medium); color: var(--oc-gold-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Top bar tools: the grid/list toggle (added by script) and the sort. */
.sf-topbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-3); }
.sf-view { display: inline-flex; gap: var(--oc-space-1); padding: 3px; border-radius: var(--oc-radius-control); background: var(--oc-bg-subtle); }
.sf-view__btn { display: grid; place-items: center; width: var(--oc-view-btn); height: var(--oc-view-btn); padding: 0; border: 0; border-radius: var(--oc-radius-control); background: transparent; color: var(--oc-text-muted); cursor: pointer; }
.sf-view__btn:hover { color: var(--oc-text); }
.sf-view__btn[aria-pressed="true"] { background: var(--oc-bg); color: var(--oc-text); box-shadow: var(--oc-shadow-sm); }
/* The PDF link (a printable list, ?view=print), the in-listing search and the
   Load more control. The live collection bar is: count, then PDF, the toggle and
   the sort on the right, the search field under it. On a phone the PDF is the
   icon alone. */
.sf-topbar__pdf { gap: var(--oc-space-1); }
.sf-topbar__pdf-text { display: none; }
@media (min-width: 640px) {
  .sf-topbar__pdf-text { display: inline; }
}
.sf-listsearch { position: relative; margin-bottom: var(--oc-space-4); }
.sf-listsearch__input { width: 100%; padding-right: var(--oc-space-7); padding-left: var(--oc-space-7); background: var(--oc-bg-subtle); }
.sf-listsearch__go { position: absolute; top: 50%; left: var(--oc-space-3); display: grid; place-items: center; padding: var(--oc-space-1); border: 0; background: none; color: var(--oc-text-soft); cursor: pointer; transform: translateY(-50%); }
.sf-listsearch__clear { position: absolute; top: 50%; right: var(--oc-space-3); padding: var(--oc-space-1); color: var(--oc-text-muted); font-size: var(--oc-text-lg); line-height: 1; text-decoration: none; transform: translateY(-50%); }
.sf-topbar__lead, .sf-sortmenu__icon { display: none; }
.sf-topbar__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--oc-radius-pill); background: var(--oc-navy); color: var(--oc-white); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: var(--oc-weight-bold); line-height: 18px; text-align: center; }
/* IMAGE SEARCH. The camera in the header search field (assets/search.js un-hides
   it) and the line under the field that says what it is doing. The camera takes
   the clear button's place at the right edge; the clear button steps left of it.
   The input gives up that room only once the camera is drawn (.sf-hsearch--photo),
   so a page with no script keeps the field at its full width. */
.sf-hsearch__photo {
  position: absolute;
  top: 50%;
  right: var(--oc-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--oc-radius-control);
  background: none;
  color: var(--oc-text-soft);
  cursor: pointer;
}
.sf-hsearch__photo:hover { color: var(--oc-gold-hover); }
.sf-hsearch__photo:focus-visible { outline: var(--oc-focus-ring); outline-offset: 0; }
.sf-hsearch__photo .sf-glyph { width: 18px; height: 18px; }
.sf-hsearch__photo[aria-busy="true"], .sf-hsearch__photo:disabled { opacity: 0.55; cursor: progress; }
.sf-hsearch__photo[aria-busy="true"] .sf-glyph { animation: sf-photo-pulse 1.2s ease-in-out infinite; }
@keyframes sf-photo-pulse { 50% { opacity: 0.35; } }
.sf-hsearch--photo .sf-hsearch__input { padding-right: calc(var(--oc-space-2) + 32px + var(--oc-space-1) + 28px + var(--oc-space-2)); }
.sf-hsearch--photo .sf-hsearch__clear { right: calc(var(--oc-space-2) + 32px + var(--oc-space-1)); }
.sf-js .sf-hsearch--open.sf-hsearch--photo .sf-hsearch__photo { right: calc(var(--oc-control-height) + var(--oc-space-2)); }
.sf-js .sf-hsearch--open.sf-hsearch--photo .sf-hsearch__clear { right: calc(var(--oc-control-height) + var(--oc-space-2) + 32px + var(--oc-space-1)); }
/* the status line: a quiet row under the field, on top of nothing (the panel is
   pushed down while it is there so the two never overlap). Empty means invisible
   but still in the page, which is what lets a screen reader announce the first
   message. */
.sf-hsearch__status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--oc-z-popover);
  margin: 0;
  font-size: var(--oc-text-sm);
  line-height: 1.4;
  color: var(--oc-text-soft);
}
.sf-hsearch__status:not(:empty) { margin-top: var(--oc-space-1); padding: var(--oc-space-1) var(--oc-space-2); }
.sf-hsearch__status[data-tone="error"] { color: var(--oc-danger); }
.sf-hsearch__status[data-tone="ok"] { color: var(--oc-text); }
.sf-hsearch:not(.sf-hsearch--open) .sf-hsearch__box:has(.sf-hsearch__status:not(:empty)) .sf-suggest__list { top: calc(100% + 2.25rem); }
.sf-js .sf-hsearch--open .sf-hsearch__status { position: static; margin: 0; }
.sf-js .sf-hsearch--open .sf-hsearch__status:not(:empty) { padding: var(--oc-space-2) var(--oc-space-4); border-bottom: 1px solid var(--oc-divider); }
@media (prefers-reduced-motion: reduce) {
  .sf-hsearch__photo[aria-busy="true"] .sf-glyph { animation: none; }
}

/* CHAT OFFICE HOURS. The header's green dot means "we reply in minutes"; when
   the office is closed (chat.js sets data-office="closed" from the server's
   office status) the dot goes neutral so it does not contradict the line. */
.sf-chat__status[data-office="closed"]::before { background: var(--oc-on-navy-soft); }

/* QUOTE BUILDER PAGE: the party planner iframe (lib/storefront/routes/quote-builder.js). */
.sf-quote-builder__frame { display: block; width: 100%; height: calc(100vh - 90px); height: calc(100dvh - 90px); min-height: 760px; border: 0; }

/* PHONE TOOLBAR. Under the banner the collection used to stack four rows of
   controls (Filter & sort pill, the count, PDF + view + sort, the search field)
   before the first wine. With script it is one row of icon buttons: filter (its
   badge is the number of active chips) and search on the left, the count, then
   PDF, the view toggle and the sort as icons. Without script none of this applies
   and the <details> pill, native sort and open search field work as they always
   did. The sort keeps its real menu and its words for screen readers; only its
   look changes. */
@media (max-width: 767px) {
  [data-sf-live] .sf-topbar { flex-wrap: wrap; gap: var(--oc-space-2); }
  [data-sf-live] .sf-topbar__lead { display: flex; gap: var(--oc-space-2); }
  [data-sf-live] .sf-topbar__btn,
  [data-sf-live] .sf-topbar__pdf,
  [data-sf-live] .sf-sortmenu__btn { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--oc-topbar-btn); height: var(--oc-topbar-btn); min-height: 0; padding: 0; border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-control); background: var(--oc-bg); color: var(--oc-text); cursor: pointer; }
  [data-sf-live] .sf-topbar__pdf { color: var(--oc-navy); }
  [data-sf-live] .sf-topbar__btn:focus-visible { outline: var(--oc-focus-ring); outline-offset: 2px; }
  [data-sf-live] .sf-topbar__count { flex: 1 1 0; min-width: 0; font-size: var(--oc-text-xs); line-height: 1.2; text-align: right; }
  [data-sf-live] .sf-topbar__tools { flex-wrap: nowrap; gap: var(--oc-space-2); }
  [data-sf-live] .sf-sortmenu__icon { display: block; }
  [data-sf-live] .sf-sortmenu__chev { display: none; }
  /* the button's words stay for assistive technology (same clip as .sf-visually-hidden) */
  [data-sf-live] .sf-sortmenu__k, [data-sf-live] .sf-sortmenu__v { position: absolute; width: 1px; height: 1px; max-width: none; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* the pill is replaced by the icon button; the drawer is still the <details> */
  [data-sf-live] .sf-facets:not([open]) { display: none; }
  .sf-layout--sidebar[data-sf-live] { gap: 0; }
  /* the search field folds behind its icon unless a search is in force or it was opened */
  [data-sf-live]:not([data-sf-search-open]) .sf-listsearch:not(.sf-listsearch--active) { display: none; }
}
.sf-loadmore, .sf-loadprev { display: none; margin-top: var(--oc-space-6); text-align: center; }
.sf-loadprev { margin: 0 0 var(--oc-space-5); }
[data-sf-live] .sf-loadmore, [data-sf-live] .sf-loadprev { display: block; }
.sf-loadmore__sentinel { display: block; height: 1px; margin-top: -1px; }
.sf-loadmore__btn[hidden] { display: none; }
.sf-loadmore__btn[aria-busy="true"], .sf-loadprev__btn[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
/* With script the scrolling replaces the numbered pager, but the pager stays in the
   page for crawlers and for a keyboard visitor who tabs into it, so it is clipped
   (the .sf-visually-hidden recipe) rather than display: none, and drawn again while
   focus is inside it. */
[data-sf-live] .sf-pagination:not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The printable list (?view=print): a plain table, and in print the site's
   chrome is gone. */
.sf-print__head { margin-bottom: var(--oc-space-5); }
.sf-print__meta { margin: 0 0 var(--oc-space-3); color: var(--oc-text-soft); font-size: var(--oc-text-sm); }
.sf-print__actions { margin: 0; }
.sf-print__table { width: 100%; border-collapse: collapse; font-size: var(--oc-text-sm); }
.sf-print__table th { padding: var(--oc-space-2); border-bottom: 2px solid var(--oc-navy); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); text-align: left; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); }
.sf-print__table td { padding: var(--oc-space-2); border-bottom: 1px solid var(--oc-divider); vertical-align: top; }
.sf-print__row { break-inside: avoid; }
.sf-print__price { white-space: nowrap; }
.sf-print__note { margin-top: var(--oc-space-4); color: var(--oc-text-soft); font-size: var(--oc-text-sm); }
@media (max-width: 767px) {
  .sf-print__table { display: block; overflow-x: auto; }
}
@media print {
  .sf-announce, .sf-header, .sf-footer, .sf-skip, .sf-print__actions, .sf-consent { display: none; }
  .sf-print__table a { color: inherit; text-decoration: none; }
}

.sf-results[aria-busy="true"] { opacity: 0.55; transition: opacity var(--oc-transition); pointer-events: none; }

/* List view: one product a row, the picture to the side. */
.sf-results[data-view="list"] .sf-grid { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-3); }
/* List row: a square picture with nothing over it, the name and facts in the
   middle, and on the right the price, the stock, the quantity stepper and Add to
   cart side by side. A phone stacks it: picture and text, then the actions. */
.sf-results[data-view="list"] .sf-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; gap: var(--oc-space-3); height: auto; padding: var(--oc-space-3); }
.sf-results[data-view="list"] .sf-card__media { width: 100%; border-radius: var(--oc-radius-card); }
.sf-results[data-view="list"] .sf-card__badges { display: none; }
.sf-results[data-view="list"] .sf-card__body { display: contents; }
.sf-results[data-view="list"] .sf-card__info { grid-column: 2; padding: 0; }
.sf-results[data-view="list"] .sf-card__buy { grid-column: 1 / -1; margin-top: 0; }
.sf-results[data-view="list"] .sf-card__price { margin: 0; padding-top: 0; }
.sf-results[data-view="list"] .sf-card__facts { display: flex; flex-wrap: wrap; gap: var(--oc-space-1) var(--oc-space-3); margin: var(--oc-space-1) 0 0; padding: 0; list-style: none; font-size: var(--oc-text-xs); color: var(--oc-text-soft); }
.sf-results[data-view="list"] .sf-card__actions { display: flex; align-items: center; gap: var(--oc-space-2); }
.sf-results[data-view="list"] .sf-card__actions > form { display: flex; flex: 1 1 auto; align-items: center; gap: var(--oc-space-2); margin: 0; }
.sf-results[data-view="list"] .sf-card__qty { display: inline-flex; flex: none; }
.sf-results[data-view="list"] .sf-card__qty .sf-qty__input { width: 56px; -moz-appearance: auto; appearance: auto; }
.sf-results[data-view="list"] .sf-card__add { flex: 1 1 auto; min-height: 36px; }
.sf-results[data-view="list"] .sf-card__quick { position: static; flex: none; min-width: 36px; padding: 0; opacity: 1; }
.sf-results[data-view="list"] .sf-card__quick-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 768px) {
  .sf-results[data-view="list"] .sf-card { grid-template-columns: 8rem minmax(0, 1fr) minmax(14rem, 19rem); align-items: center; }
  .sf-results[data-view="list"] .sf-card__buy { grid-column: 3; align-items: flex-end; text-align: right; }
  .sf-results[data-view="list"] .sf-card__actions { align-self: stretch; justify-content: flex-end; margin-top: var(--oc-space-2); }
  .sf-results[data-view="list"] .sf-card__actions > form { justify-content: flex-end; }
  .sf-results[data-view="list"] .sf-card__add { flex: 0 1 auto; padding-right: var(--oc-space-4); padding-left: var(--oc-space-4); }
}

/* With script, filters apply as they change, so the buttons that applied them
   are hidden on a desktop; on a phone "Show Results" closes the drawer. */
.sf-sort__apply { display: inline-flex; }
[data-sf-live] .sf-sort__apply { display: none; }
.sf-facets__sort { display: none; }
@media (min-width: 768px) {
  [data-sf-live] .sf-facets__foot { display: none; }
}

/* Phone: "Filter & sort" is a button; with script its panel is a drawer from
   the left over a dimmed page (the dimming is the panel's own shadow, so no
   extra element), without script it opens in the page. */
@media (max-width: 767px) {
  .sf-facets { padding: 0; border: 0; }
  .sf-facets[open] { padding-bottom: 0; }
  .sf-facets__toggle { display: inline-flex; min-height: var(--oc-control-height); padding: 0 var(--oc-space-4); border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-control); background: var(--oc-bg); font-size: var(--oc-text-label); letter-spacing: var(--oc-tracking-wide); }
  .sf-layout:not([data-sf-live]) .sf-facets[open] .sf-facets__body { margin-top: var(--oc-space-2); padding: var(--oc-space-4); border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-card); }
  [data-sf-live] .sf-facets[open] .sf-facets__body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--oc-z-overlay);
    display: flex;
    flex-direction: column;
    width: min(var(--oc-drawer-width), 90vw);
    background: var(--oc-bg);
    box-shadow: var(--oc-shadow-lg), 0 0 0 100vmax var(--oc-overlay);
  }
  [data-sf-live] .sf-facets__head { display: flex; align-items: center; justify-content: space-between; padding: var(--oc-space-3) var(--oc-space-4); border-bottom: 1px solid var(--oc-divider); }
  .sf-facets__heading { font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: var(--oc-weight-bold); text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); }
  .sf-facets__close { width: var(--oc-control-height); height: var(--oc-control-height); border: 0; background: transparent; font-size: var(--oc-text-2xl); line-height: 1; color: var(--oc-text); cursor: pointer; }
  [data-sf-live] .sf-facets__scroll { flex: 1; overflow-y: auto; padding: var(--oc-space-2) var(--oc-space-4); }
  [data-sf-live] .sf-facets__foot { margin: 0; padding: var(--oc-space-3) var(--oc-space-4); border-top: 1px solid var(--oc-divider); background: var(--oc-bg); }
  [data-sf-live] .sf-facets__sort { display: block; padding: var(--oc-space-2) 0 var(--oc-space-3); border-bottom: 1px solid var(--oc-divider); }
  .sf-facets__sort .sf-sort { flex-direction: column; align-items: stretch; }
  .sf-facets__sort .sf-select { width: 100%; }
  .sf-price-range__input { min-height: var(--oc-control-height); }
  /* the drawer carries the sort on a phone, so the top bar does not repeat it */
  [data-sf-live] .sf-topbar__sort { display: none; }
}
/* ── end listing ──────────────────────────────────────────────────────── */

/* ── featured product & map ────────────────────────────────────────────────
   Two sections that used to be thin: the featured product (a product card of
   its own on a page: the product page's picture column and buy box, two columns
   from tablet up) and the map (a real embedded map with the address card laid
   over it from desktop up). Tokens only; mobile first (the 320px layout, then
   min-width queries). Nothing here may be wider than its container: every box
   is a grid or flex item with min-width 0. */

.sf-featured__lead { margin: 0 0 var(--oc-space-5); }
.sf-featured__card { grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-5); }
.sf-featured__title { margin: 0 0 var(--oc-space-3); }
.sf-featured__info { min-width: 0; }
.sf-featured__pills { margin: 0 0 var(--oc-space-4); }
.sf-featured__buy { margin-bottom: var(--oc-space-4); }
.sf-featured__quote { margin-bottom: var(--oc-space-4); }
.sf-featured__tabs { margin-bottom: var(--oc-space-4); }
.sf-featured__description { margin-bottom: var(--oc-space-4); }
.sf-featured__more { margin: 0; }
.sf-featured-product .sf-product__gallery { max-width: 34rem; }
@media (min-width: 768px) {
  .sf-featured__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--oc-space-7); align-items: start; }
  .sf-featured--right .sf-featured__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sf-featured--left .sf-product__media { order: 0; }
  .sf-featured--right .sf-product__media { order: 2; }
}

/* The map is a PICTURE of the address (a static image from our own domain), never
   a live embed, so nothing third-party sits behind the card. A phone and a tablet
   stack the picture over the card; from a desktop the card is laid over the
   picture's corner. With no picture the card sits on a tinted panel. */
.sf-map__stage { position: relative; overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-map__frame { position: relative; aspect-ratio: 8 / 5; background: var(--oc-bg-subtle); }
.sf-map__img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; font-size: 0; color: transparent; }
.sf-map__card { display: grid; justify-content: start; gap: var(--oc-space-4); min-width: 0; padding: var(--oc-space-5); border-radius: 0; background: var(--oc-bg); }
.sf-map__stage--plain { padding: var(--oc-space-5); border: 1px solid var(--oc-border); }
.sf-map__stage--plain .sf-map__card { border-radius: var(--oc-radius-card); border: 1px solid var(--oc-border); }
.sf-map__body { min-width: 0; }
.sf-map__body .sf-section__title { margin: 0 0 var(--oc-space-3); }
.sf-map__card .sf-btn { justify-self: start; }
@media (min-width: 768px) {
  .sf-map__frame { aspect-ratio: 8 / 3; }
}
@media (min-width: 1024px) {
  .sf-map__stage { display: grid; min-height: 26rem; }
  .sf-map__frame, .sf-map__card { grid-area: 1 / 1; }
  .sf-map__frame { aspect-ratio: auto; }
  .sf-map__card { align-self: start; justify-self: start; position: relative; z-index: 1; width: min(24rem, calc(100% - 2 * var(--oc-space-5))); margin: var(--oc-space-5); border-radius: var(--oc-radius-card); box-shadow: var(--oc-shadow-md); }
  .sf-map__stage--plain { min-height: 0; }
  .sf-map__stage--plain .sf-map__card { width: auto; margin: 0; box-shadow: none; }
}
/* ── end featured product & map ───────────────────────────────────────── */

/* ── journal (blog & article) ──────────────────────────────────────────────
   The editorial look of the blog index, the tag pages and the article page
   (views/blog.js). Mobile first: one column, then two columns of cards from a
   tablet, three from a desktop, and an article with a sticky rail from 1024px.
   The reading measure is 50rem (about 78 characters of the 18px body face), and
   deliberately NOT in `ch`: a heading is larger than the text, so 78ch on it is a
   wider box and its left edge would not line up with the paragraphs under it.
   Tokens only; the older .sf-post / .sf-article rules above are the base this
   block refines. */

/* Cards (index, featured, related). A kicker joins the date on the meta line. */
.sf-post__kicker { color: var(--oc-gold-hover); font-weight: var(--oc-weight-bold); }
.sf-journal .sf-post__img, .sf-journal-related .sf-post__img { transition: transform 0.5s ease; }
.sf-journal .sf-post__title, .sf-journal-related .sf-post__title { line-height: 1.3; }
.sf-journal .sf-post__excerpt, .sf-journal-related .sf-post__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: var(--oc-space-4);
  line-height: 1.6;
}
@media (hover: hover) {
  .sf-journal .sf-post:hover .sf-post__img, .sf-journal-related .sf-post:hover .sf-post__img { transform: scale(1.04); }
}

/* The lead article: stacked on a phone, picture beside the words from tablet. */
.sf-post--feature { margin-bottom: var(--oc-space-6); }
.sf-post--feature .sf-post__body { padding: var(--oc-space-5) var(--oc-space-4); }
.sf-post--feature .sf-post__title { font-size: var(--oc-text-xl); }
.sf-post--feature .sf-post__excerpt { font-size: var(--oc-text-base); -webkit-line-clamp: 4; }
@media (min-width: 768px) {
  .sf-post--feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .sf-post--feature .sf-post__media { aspect-ratio: auto; min-height: 22rem; }
  .sf-post--feature .sf-post__body { justify-content: center; padding: var(--oc-space-6); }
  .sf-post--feature .sf-post__title { font-size: var(--oc-text-2xl); }
  .sf-post--feature .sf-post__more { margin-top: var(--oc-space-2); }
}

/* Topic chips are the outlined pill (the base .sf-chip). Another block further
   up the file also defines .sf-chip, as a solid navy filter tag, and wins by
   order, so the journal states its own look rather than inherit whichever
   definition happens to come last. The current topic is the filled one. */
.sf-journal .sf-chip {
  border: 1px solid var(--oc-border-input);
  background: var(--oc-bg);
  color: var(--oc-text);
  font-weight: var(--oc-weight-semibold);
  line-height: 1.2;
}
.sf-journal .sf-chip:hover { border-color: var(--oc-navy); background: var(--oc-bg); color: var(--oc-navy); }
.sf-journal .sf-chip[aria-current="true"] { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); }
.sf-journal .sf-chip--sm { min-height: 28px; }

/* Blog index and tag pages */
.sf-journal--index { padding-bottom: var(--oc-space-8); }
.sf-journal__head { margin-bottom: var(--oc-space-4); }
.sf-journal__head .sf-title { margin-bottom: var(--oc-space-2); }
.sf-journal__head .sf-blog__filter { margin: 0; }
.sf-journal__topics { margin-bottom: var(--oc-space-5); }
.sf-journal__topics .sf-chips { gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; }
.sf-journal__topics .sf-chip { min-height: 36px; padding: 0 var(--oc-space-3); font-size: var(--oc-text-sm); }
.sf-journal__topics .sf-side__more { margin-top: var(--oc-space-3); }
@media (max-width: 639px) {
  /* One scrolling row of topics rather than a wall of wrapped chips, bleeding
     to the screen edge so it is plain that it moves. */
  .sf-journal__topics > .sf-chips {
    flex-wrap: nowrap;
    margin-left: calc(-1 * var(--oc-gutter));
    margin-right: calc(-1 * var(--oc-gutter));
    padding: 0 var(--oc-gutter) var(--oc-space-1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sf-journal__topics > .sf-chips::-webkit-scrollbar { display: none; }
  .sf-journal__topics > .sf-chips .sf-chip { white-space: nowrap; }
}
.sf-journal__featured { margin-top: var(--oc-space-7); }
.sf-journal__featured .sf-side__products { grid-template-columns: repeat(auto-fill, minmax(11rem, 14rem)); }

/* The article page */
.sf-journal--article { padding-top: var(--oc-space-5); padding-bottom: var(--oc-space-8); }
/* A reading page uses the room it is given. The text sits in a main column
   (--oc-journal-main) that pictures, tables, pull quotes and the shop row fill
   edge to edge, with the text itself held to a readable measure inside it; the rail beside it is a fixed width; and the pair (the title card too) is
   centred in the page, so a wide screen shows balanced margins rather than a
   narrow strip hugging the left. The page column takes more of a wide screen
   here than the 4/5ths of other pages because the rail would otherwise eat the
   text (at 1440px: a 700px column). 16px type on a phone, 18px from a tablet. */
.sf-article {
  --oc-journal-measure: 50rem;
  --oc-journal-main: 58rem;
  --oc-journal-rail: 18.75rem;
  --oc-journal-gap: var(--oc-space-7);
  --oc-journal-size: 1rem;
  --oc-journal-lead: 1.7;
  --oc-journal-h2: calc(var(--oc-text-xl) - var(--oc-space-1));
  --oc-journal-h3: var(--oc-text-lg);
  max-width: calc(var(--oc-journal-main) + var(--oc-journal-gap) + var(--oc-journal-rail));
  margin-inline: auto;
  font-size: var(--oc-journal-size);
}
@media (min-width: 768px) {
  .sf-article {
    --oc-journal-size: var(--oc-text-lg);
    --oc-journal-lead: 1.75;
    --oc-journal-h2: var(--oc-text-xl);
    --oc-journal-h3: calc(var(--oc-text-xl) - var(--oc-space-1));
    --oc-title-size: calc(var(--oc-text-2xl) + var(--oc-space-2));
  }
}
@media (min-width: 1200px) {
  .sf-journal--article.sf-page { max-width: min(var(--oc-page-width), 92vw); }
}
.sf-article__head { margin-bottom: var(--oc-space-6); }
.sf-article__kicker {
  margin: 0 0 var(--oc-space-3);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
}
.sf-article__kicker a { color: var(--oc-gold-hover); text-decoration: none; }
.sf-article__kicker a:hover { color: var(--oc-navy); }
.sf-article .sf-article__title {
  max-width: 26em;
  margin: 0 0 var(--oc-space-4);
  text-wrap: balance;
}
.sf-article .sf-article__meta { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-article__dot { color: var(--oc-gold); }

/* The banner of a reading page: the article's picture at a real height, edge to
   edge (260px on a phone, about 450px on a desktop, 510px on a wide one), cropped
   to fill from the centre. Both the shared hero (a banner picture) and the plain
   fallback box (the article's own picture) are sized here, so neither can be
   squeezed by its own padding or ratio. The title card overlaps only its lower edge. */
.sf-article__masthead { --oc-masthead-h: 16.25rem; }
@media (min-width: 768px) { .sf-article__masthead { --oc-masthead-h: 28rem; } }
@media (min-width: 1280px) { .sf-article__masthead { --oc-masthead-h: 32rem; } }
.sf-article__masthead .sf-hero { --oc-hero-min: var(--oc-masthead-h); --oc-hero-floor: 0px; }
.sf-article__masthead .sf-hero.sf-section, .sf-article__masthead .sf-hero .sf-hero__inner { padding-top: 0; padding-bottom: 0; }
.sf-article__masthead .sf-article__hero-band { max-width: none; padding: 0; }
.sf-article__masthead .sf-article__banner { height: var(--oc-masthead-h); aspect-ratio: auto; border-radius: 0; }
.sf-article__masthead .sf-article__banner .sf-article__hero { object-position: center; }

/* Phone and tablet: contents, text, share and topics, in that order. The
   rail dissolves into the page's own column and its blocks are re-ordered; the
   markup keeps the text first for a screen reader. */
.sf-article__layout { display: flex; flex-direction: column; gap: var(--oc-space-5); }
.sf-article__main { min-width: 0; }
.sf-article__rail { display: contents; }
.sf-article__rail > .sf-toc { order: -1; }
.sf-article__rail > .sf-side { order: 1; }
.sf-article__rail > .sf-side .sf-side__title { margin-bottom: var(--oc-space-2); }
.sf-article__foot { margin-top: var(--oc-space-7); max-width: var(--oc-journal-main); }

@media (min-width: 1024px) {
  .sf-article__layout {
    display: grid;
    grid-template-columns: minmax(0, var(--oc-journal-main)) var(--oc-journal-rail);
    column-gap: var(--oc-journal-gap);
    justify-content: center;
    align-items: start;
  }
  /* No rail drawn (no contents, no share address, no topics): the text is the
     whole group, and is centred as one. */
  .sf-article__layout:not(:has(> .sf-article__rail)) { grid-template-columns: minmax(0, var(--oc-journal-main)); }
  .sf-article__rail {
    display: grid;
    gap: var(--oc-space-5);
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--oc-space-8) + var(--oc-space-7));
    max-height: calc(100vh - var(--oc-space-8) - var(--oc-space-7) - var(--oc-space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: var(--oc-text-base);
  }
  .sf-article__foot { margin-top: var(--oc-space-8); }
}

/* A banner over the title: from tablet the title sits on a card that overlaps
   the banner's lower edge. On a phone it simply follows the picture. */
@media (min-width: 768px) {
  .sf-journal--banner { padding-top: 0; }
  .sf-journal--banner .sf-article__head {
    position: relative;
    z-index: 1;
    margin: calc(-1 * var(--oc-space-7)) 0 var(--oc-space-7);
    padding: var(--oc-space-7) var(--oc-space-6);
    background: var(--oc-bg-card);
    border-radius: var(--oc-radius-card);
    box-shadow: var(--oc-shadow-md);
  }
}
/* The title's own inset beside the rail: the text's left edge (see the body). */
@media (min-width: 1024px) {
  .sf-journal--article .sf-article__head { padding-inline: var(--oc-space-7); }
}

/* Contents */
.sf-toc { padding: var(--oc-space-3) var(--oc-space-4); border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); font-size: var(--oc-text-md); }
.sf-toc__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-3);
  min-height: 28px;
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-md);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--oc-navy);
  cursor: pointer;
  list-style: none;
}
.sf-toc__title::-webkit-details-marker { display: none; }
.sf-toc[open] > .sf-toc__title .sf-glyph--chevron { transform: rotate(180deg); }
.sf-toc__list { margin: var(--oc-space-3) 0 0; padding: 0; list-style: none; }
.sf-toc__link {
  display: block;
  padding: var(--oc-space-2) 0 var(--oc-space-2) var(--oc-space-3);
  border-left: 2px solid var(--oc-divider);
  color: var(--oc-text-soft);
  font-size: var(--oc-text-sm);
  line-height: 1.4;
  text-decoration: none;
}
.sf-toc__link--sub { padding-left: var(--oc-space-5); }
.sf-toc__link:hover { color: var(--oc-navy); border-left-color: var(--oc-gold-light); }
.sf-toc__link[aria-current] { color: var(--oc-navy); border-left-color: var(--oc-gold); font-weight: var(--oc-weight-semibold); }
@media (min-width: 1024px) {
  /* In the rail it is a plain list that cannot be closed. */
  .sf-toc { padding: 0; border: 0; background: none; }
  .sf-toc__title { pointer-events: none; cursor: default; }
  .sf-toc__title .sf-glyph { display: none; }
}

/* Share: round icon buttons. */
.sf-share__list { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0; padding: 0; list-style: none; }
.sf-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--oc-border-input);
  border-radius: 50%;
  background: var(--oc-bg);
  color: var(--oc-navy);
  font: inherit;
  cursor: pointer;
  transition: background var(--oc-transition), border-color var(--oc-transition), color var(--oc-transition);
}
.sf-share__btn:hover { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); }
.sf-share__btn[data-done] { border-color: var(--oc-success); background: var(--oc-success-bg); color: var(--oc-success-ink); }
.sf-share__icon { flex: none; }

/* The body: a readable measure and a vertical rhythm of its own. */
.sf-article__body .sf-prose { max-width: none; line-height: var(--oc-journal-lead); color: var(--oc-text); }
/* Everything that is reading is held to the measure and centred in the main
   column; a picture, a table, a quotation, a pull quote, a video and a figure are not text and
   fill the column (:not() rather than :where() so this outranks the margin
   shorthand the heading rules below set). */
.sf-article__body .sf-prose > :not(img, figure, table, iframe, video, blockquote, .sf-pullquote) { max-width: var(--oc-journal-measure); margin-inline: auto; }
/* Beside the rail the text is indented by a fixed step instead of centred, the
   same step the title card's words are inset by, so the title and the text share
   one left edge at every width while the pictures run out to the column's own. */
@media (min-width: 1024px) {
  .sf-article__body .sf-prose > :not(img, figure, table, iframe, video, blockquote, .sf-pullquote) { margin-inline: var(--oc-space-7) auto; }
}
.sf-article__body .sf-prose > p, .sf-article__body .sf-prose > ul, .sf-article__body .sf-prose > ol { margin-bottom: var(--oc-space-5); }
.sf-article__body .sf-prose a { text-decoration-thickness: 1px; }
.sf-article__body .sf-prose strong { color: var(--oc-navy); font-weight: var(--oc-weight-semibold); }
.sf-article__body .sf-prose h2, .sf-article__body .sf-prose h3, .sf-article__body .sf-prose h4 { scroll-margin-top: calc(var(--oc-space-8) + var(--oc-space-7)); line-height: 1.3; }
/* A section opens with room above it and a thin gold rule, so the eye finds the
   next one while scrolling a long text. */
.sf-article__body .sf-prose h2, .sf-article__body .sf-prose h3 { margin: var(--oc-space-8) 0 var(--oc-space-4); font-family: var(--oc-font-heading); font-weight: var(--oc-weight-semibold); text-transform: uppercase; color: var(--oc-navy); }
.sf-article__body .sf-prose h2 { font-size: var(--oc-journal-h2); }
.sf-article__body .sf-prose h3 { font-size: var(--oc-journal-h3); }
.sf-article__body .sf-prose h2::before, .sf-article__body .sf-prose h3::before { content: ''; display: block; width: var(--oc-space-7); height: 1px; margin-bottom: var(--oc-space-4); background: var(--oc-gold); }
.sf-article__body .sf-prose h3::before { width: var(--oc-space-6); }
.sf-article__body .sf-prose h2 + h3 { margin-top: var(--oc-space-6); }
.sf-article__body .sf-prose h4 { margin: var(--oc-space-5) 0 var(--oc-space-2); font-size: var(--oc-text-base); }
.sf-article__body .sf-prose > :first-child, .sf-article__body .sf-prose > meta:first-child + * { margin-top: 0; }
/* A heading that opens the text has nothing above it to rule off. */
.sf-article__body .sf-prose > h2:first-child::before, .sf-article__body .sf-prose > h3:first-child::before { display: none; }
.sf-article__body .sf-prose ul, .sf-article__body .sf-prose ol { padding-left: var(--oc-space-5); }
.sf-article__body .sf-prose li { margin-bottom: var(--oc-space-3); padding-left: var(--oc-space-1); }
.sf-article__body .sf-prose li::marker { color: var(--oc-gold-hover); }
.sf-article__body .sf-prose li > p { margin: 0; }
.sf-article__body .sf-prose li > p + p { margin-top: var(--oc-space-2); }
.sf-article__body .sf-prose blockquote {
  margin: var(--oc-space-6) 0;
  padding: var(--oc-space-4) var(--oc-space-5);
  border-left: 3px solid var(--oc-gold);
  border-radius: 0 var(--oc-radius-card) var(--oc-radius-card) 0;
  background: var(--oc-gold-bg);
  color: var(--oc-navy);
  font-family: var(--oc-font-heading);
  font-size: calc(var(--oc-journal-size) + var(--oc-space-1) / 2);
  line-height: 1.55;
  font-style: italic;
}
.sf-article__body .sf-prose blockquote > :last-child { margin-bottom: 0; }
/* A picture in the text runs the full column, rounded, and keeps its own
   proportions whatever width and height attributes the editor wrote. */
.sf-article__body .sf-prose img { display: block; width: 100%; max-width: 100%; height: auto; margin: var(--oc-space-5) auto; border-radius: var(--oc-radius-card); }
.sf-article__body .sf-prose figure, .sf-article__body .sf-prose .sf-figure { margin: var(--oc-space-6) 0; }
.sf-article__body .sf-prose figure img { margin: 0; }
.sf-article__body .sf-prose figcaption { margin-top: var(--oc-space-2); text-align: center; font-size: var(--oc-text-sm); line-height: 1.5; color: var(--oc-text-soft); }
.sf-article__body .sf-prose li img, .sf-article__body .sf-prose td img, .sf-article__body .sf-prose th img { width: auto; margin: 0; }
.sf-article__body .sf-prose table { margin: var(--oc-space-5) 0; font-size: var(--oc-text-md); }
.sf-article__body .sf-prose th { background: var(--oc-gold-bg); color: var(--oc-navy); }
.sf-article__body .sf-prose hr { margin: var(--oc-space-7) 0; }

/* The opening letter of an article: a drop cap, in the heading face and navy, on
   the first real paragraph only (views/blog.js marks it; a title line or a
   one-line note is never given one). */
.sf-article__body .sf-prose > p.sf-dropcap::first-letter {
  float: left;
  margin: var(--oc-space-1) var(--oc-space-2) 0 0;
  font-family: var(--oc-font-heading);
  font-size: 3.4em;
  font-weight: var(--oc-weight-bold);
  line-height: 0.82;
  color: var(--oc-navy);
}

/* A paragraph that is one whole quotation stands out of the column between two
   thin gold rules. */
.sf-article__body .sf-prose > p.sf-pullquote {
  margin: var(--oc-space-7) 0;
  padding: var(--oc-space-5) 0;
  border-top: 1px solid var(--oc-gold);
  border-bottom: 1px solid var(--oc-gold);
  color: var(--oc-navy);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xl);
  line-height: 1.45;
  text-wrap: balance;
}

/* Key points: the article's own summary, in a quiet box above the text. */
.sf-keypoints {
  margin: 0 0 var(--oc-space-6);
  padding: var(--oc-space-4) var(--oc-space-5);
  border-left: 3px solid var(--oc-gold);
  border-radius: 0 var(--oc-radius-card) var(--oc-radius-card) 0;
  background: var(--oc-bg-subtle);
  font-size: var(--oc-text-base);
  line-height: 1.65;
}
.sf-keypoints__title {
  margin: 0 0 var(--oc-space-2);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-gold-hover);
}
.sf-keypoints__body > :last-child { margin-bottom: 0; }
.sf-keypoints__body ul, .sf-keypoints__body ol { margin: 0; padding-left: var(--oc-space-5); }

/* Shop the article: a compact row of the shared product card. A phone scrolls it
   sideways with the next card peeking in; from tablet it is a grid. */
.sf-shop { --oc-product-media-ratio: 4 / 3; margin: var(--oc-space-8) 0; }
.sf-shop--rail { --oc-product-media-ratio: 16 / 10; }
.sf-shop__title {
  margin: 0 0 var(--oc-space-3);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-md);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--oc-navy);
}
.sf-shop__row {
  display: flex;
  gap: var(--oc-space-3);
  margin-inline: calc(-1 * var(--oc-gutter));
  padding: 0 var(--oc-gutter) var(--oc-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--oc-gutter);
  scrollbar-width: none;
}
.sf-shop__row::-webkit-scrollbar { display: none; }
.sf-shop__row > .sf-card { flex: 0 0 min(15rem, 72%); scroll-snap-align: start; }
@media (min-width: 640px) {
  .sf-shop__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 14rem));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .sf-shop__row > .sf-card { flex: none; }
}
/* The rail's copy is for a desktop only; below that the row in the text is the one. */
.sf-article__rail > .sf-shop--rail { display: none; }
/* ...and only on a screen tall enough to show it whole under the contents and
   the share buttons; on a shorter one a half-cut card in a scrolling rail is
   worse than none (the row in the text is still there). */
@media (min-width: 1024px) and (min-height: 960px) {
  .sf-article__rail > .sf-shop--rail { display: block; }
}

/* Reading progress: a thin gold bar along the top of the window. A <progress>
   carries the number, so no script writes a style; assets/article.js sets its
   value once per frame and shows it (drawn hidden: no dead bar without script). */
.sf-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--oc-z-popover);
  display: block;
  width: 100%;
  height: 3px;
  border: 0;
  background: transparent;
  color: var(--oc-gold);
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.sf-progress[hidden] { display: none; }
.sf-progress::-webkit-progress-bar { background: transparent; }
.sf-progress::-webkit-progress-value { background: var(--oc-gold); transition: width 0.12s linear; }
.sf-progress::-moz-progress-bar { background: var(--oc-gold); }
@media (prefers-reduced-motion: reduce) {
  .sf-progress::-webkit-progress-value { transition: none; }
}

/* The end of an article: older / newer, then the way back. */
.sf-journal__steps { display: grid; gap: var(--oc-space-3); margin-top: var(--oc-space-6); }
.sf-journal__step {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-1);
  padding: var(--oc-space-4);
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-card);
  color: var(--oc-text);
  text-decoration: none;
  transition: border-color var(--oc-transition), box-shadow var(--oc-transition);
}
.sf-journal__step:hover { border-color: var(--oc-gold); box-shadow: var(--oc-shadow-sm); }
.sf-journal__step-label {
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-gold-hover);
}
.sf-journal__step-title { font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: var(--oc-weight-semibold); line-height: 1.35; color: var(--oc-navy); }
.sf-journal__back { justify-self: center; padding: var(--oc-space-2) 0; font-size: var(--oc-text-sm); font-weight: var(--oc-weight-semibold); }
@media (min-width: 640px) {
  .sf-journal__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-journal__step--prev { grid-column: 1; }
  .sf-journal__step--next { grid-column: 2; text-align: right; }
  .sf-journal__back { grid-column: 1 / -1; }
}

/* Cards: 1 column on a phone, 2 on a tablet, 3 on a desktop. The shared
   .sf-grid rule would give a tablet three narrow columns of post cards. */
@media (min-width: 480px) and (max-width: 1023px) {
  .sf-journal .sf-grid--posts, .sf-journal-related .sf-grid--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Related articles: a band of its own under the article. */
.sf-journal-related .sf-section__head { margin-bottom: var(--oc-space-5); }
/* ── end journal ──────────────────────────────────────────────────────── */

/* ── quick view ───────────────────────────────────────────────────────────
   The card's "Quick view" control and the modal it opens (assets/quick-view.js
   fills a native <dialog> with the fragment from routes/quick-view.js, which is
   the featured-product card). Without the script the control is a plain link.
   A centred modal from tablet up, a bottom sheet on a phone. */

@keyframes sf-quick-rise { from { transform: translateY(100%); } to { transform: none; } }

/* On the card: a round icon button on touch, always there; on a hover-capable
   desktop a labelled pill that appears with the card's own actions. */
.sf-card__quick {
  position: absolute;
  top: var(--oc-space-2);
  right: var(--oc-space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-2);
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--oc-border-input);
  border-radius: var(--oc-radius-control);
  background: var(--oc-white);
  color: var(--oc-navy);
  box-shadow: var(--oc-shadow-sm);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: var(--oc-weight-semibold);
  letter-spacing: var(--oc-tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--oc-transition), color var(--oc-transition), opacity var(--oc-transition);
}
.sf-card__quick:hover { background: var(--oc-navy); border-color: var(--oc-navy); color: var(--oc-white); }
.sf-card__quick-icon { flex: none; }
.sf-card__quick-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (hover: hover) and (min-width: 769px) {
  .sf-card__quick { padding: 0 var(--oc-space-3); opacity: 0; }
  .sf-card:hover .sf-card__quick, .sf-card:focus-within .sf-card__quick, .sf-card__quick:focus-visible { opacity: 1; }
  .sf-card__quick-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* The modal. */
/* FIXED, centred in the viewport. (It was position: relative, which takes a
   modal dialog out of the top layer's own placement and drops it into the page flow
   at the end of the document: opening it from far down a collection jumped the page
   to wherever that was.) The close button is positioned against it either way. */
.sf-dialog--quick {
  position: fixed;
  inset: 0;
  height: fit-content;
  margin: auto;
  width: min(960px, calc(100vw - 2 * var(--oc-space-4)));
  max-height: min(90dvh, calc(100dvh - 2 * var(--oc-space-4)));
}
.sf-quick__close {
  position: absolute;
  top: var(--oc-space-2);
  right: var(--oc-space-2);
  z-index: 3;
  background: var(--oc-white);
}
.sf-quick__cross { font-size: var(--oc-text-xl); line-height: 1; }
.sf-quick__body { flex: 1 1 auto; min-height: 0; padding: var(--oc-space-6); overflow-y: auto; overscroll-behavior: contain; }
.sf-quick__body[aria-busy="true"] { min-height: 16rem; }
.sf-quick__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-3);
  min-height: 12rem;
  color: var(--oc-text-soft);
}
.sf-quick__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--oc-divider);
  border-top-color: var(--oc-gold);
  border-radius: 50%;
  animation: sf-spin 0.8s linear infinite;
}

/* The card inside it is the featured-product section, drawn tighter: the
   picture and the buy box side by side, no page rhythm around it. */
.sf-quick__content .sf-featured-product { padding: 0; }
.sf-quick__content .sf-featured__card { gap: var(--oc-space-5); }
.sf-quick__content .sf-product__gallery { max-width: 22rem; margin-inline: auto; }
.sf-quick__content .sf-featured__title { padding-right: var(--oc-space-6); }
/* The notes are a taste of the page's, clamped; the facts are the compact rows. */
.sf-quick__notes { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-bottom: var(--oc-space-4); font-size: var(--oc-text-md); color: var(--oc-text-soft); }
.sf-quick__notes p { margin: 0 0 var(--oc-space-2); }
.sf-quick__facts { margin: 0 0 var(--oc-space-4); }
@media (min-width: 768px) {
  .sf-quick__content .sf-featured__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--oc-space-6); }
}

/* A phone: a bottom sheet that fills the width and rises from the edge. */
@media (max-width: 639px) {
  .sf-dialog--quick {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 90dvh;
    margin: 0;
    border-radius: var(--oc-radius-card) var(--oc-radius-card) 0 0;
  }
  .sf-dialog--quick[open] { animation: sf-quick-rise 0.25s ease; }
  .sf-quick__body { padding: var(--oc-space-5) var(--oc-space-4); }
  .sf-quick__content .sf-product__gallery { max-width: 14rem; }
}
/* ── end quick view ───────────────────────────────────────────────────── */

/* ── product buy box, search pills, empty cart ────────────────────────────
   The live product page's buy box (a small caps caption over the price, a dot
   and "In stock", the quantity stepper, the tax line, a full-width Add to cart,
   the pickup line and a bordered tasting-notes block), the search page's filter
   pills and related-collection row, and the empty cart. Tokens only. */

.sf-product__label { margin: 0 0 var(--oc-space-1); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 400; text-transform: uppercase; letter-spacing: var(--oc-tracking); color: var(--oc-text-soft); }
.sf-product__label[for] { display: block; }

/* The stock line is a dot and a plain label, not a filled badge. */
.sf-product__stock .sf-badge { display: inline-flex; align-items: center; gap: var(--oc-space-2); padding: 0; background: none; color: var(--oc-text); font-size: var(--oc-text-md); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sf-product__stock .sf-badge::before { content: ""; flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--oc-text-muted); }
.sf-product__stock .sf-badge--success::before { background: var(--oc-success); }
.sf-product__stock .sf-badge--warning::before { background: var(--oc-warning); }

.sf-buy__qty { margin-bottom: var(--oc-space-3); }
/* The stepper's buttons mean something only once product.js has run. */
.sf-buy .sf-qty__btn { display: none; }
[data-pv-live] .sf-buy .sf-qty__btn { display: inline-block; }
.sf-buy__tax { margin: 0 0 var(--oc-space-3); font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-buy .sf-buy__add { width: 100%; }
.sf-product__pickup { display: flex; align-items: flex-start; gap: var(--oc-space-2); margin: var(--oc-space-4) 0 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-product__pickup[hidden] { display: none; }
.sf-product__pickup-icon { flex: none; margin-top: 2px; color: var(--oc-success); }
.sf-product__pickup-text { display: flex; flex-direction: column; gap: var(--oc-space-1); }
.sf-product__pickup-text strong { font-weight: 600; color: var(--oc-text); }
.sf-product__pickup-address { font-size: var(--oc-text-xs); color: var(--oc-text-muted); }
.sf-product__pickup-more { align-self: flex-start; padding: 0; font-size: var(--oc-text-xs); cursor: pointer; }
.sf-product__store-name { margin: 0 0 var(--oc-space-2); font-weight: var(--oc-weight-bold); color: var(--oc-text); }
.sf-product__store-address { margin: 0 0 var(--oc-space-3); font-style: normal; line-height: 1.6; }
.sf-product__store-hours { margin: 0; }

/* The tasting note sits in a bordered box, as on the live page. */
.sf-pdp__block[data-pv="tasting-accordion"] { padding: var(--oc-space-4); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-card); }

/* Search: a gold circular button, filter pills with counts, related collections. */
.sf-searchbox__go { flex: none; width: var(--oc-control-height); padding: 0; border-radius: 50%; }
.sf-pills { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0 0 var(--oc-space-4); padding: 0; list-style: none; }
.sf-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--oc-space-3); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-control); background: var(--oc-bg-subtle); color: var(--oc-text-soft); font-size: var(--oc-text-xs); text-decoration: none; }
.sf-pill:hover { border-color: var(--oc-navy); color: var(--oc-navy); }
.sf-pill[aria-current="true"] { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); }
.sf-search__related { margin-bottom: var(--oc-space-4); }
.sf-search__related-title { margin: 0 0 var(--oc-space-2); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }
/* With no sidebar there is no drawer to carry the sort on a phone: keep it in the bar. */
.sf-layout[data-sf-live]:not(.sf-layout--sidebar) .sf-topbar__sort { display: flex; }

/* Empty cart: the page heading is the only title; centred line, rule, gold pill. */
.sf-cart-page:has(.sf-cart-empty) > .sf-title { text-align: center; }
.sf-cart-empty { max-width: 32rem; margin: var(--oc-space-5) auto var(--oc-space-7); text-align: center; }
.sf-cart-empty__text { margin: 0 0 var(--oc-space-5); color: var(--oc-text-soft); }
.sf-cart-empty__rule { margin: 0 0 var(--oc-space-5); border: 0; border-top: 1px solid var(--oc-divider); }
.sf-cart-empty__cta { border-radius: var(--oc-radius-control); }
/* ── end product buy box, search pills, empty cart ────────────────────── */

/* ── live composition: bands, tiles, blog strip, cards, contact, port hero ──
   How the live shop lays these out (docs/storefront-parity/visual-diff.md,
   items 10, 11, 12, 19, 27, 28). Tokens only; the type of a section title, the
   page title and the hero title is the base rules' business, so nothing here
   sets a size on those except where the live band has its own. */

/* Journey bands ("Your charter wine list", "The whole bar"): the words and the
   actions on one side, a vertical stepper on the other, no boxes. */
.sf-cta--journey { --oc-stepper-dot: 2.375rem; }
.sf-cta__journey { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-6); align-items: center; }
.sf-cta__intro, .sf-cta__steps { min-width: 0; }
.sf-cta--journey .sf-section__head { display: block; margin-bottom: var(--oc-space-5); }
.sf-cta--journey .sf-section__eyebrow {
  display: inline-block;
  margin: 0 0 var(--oc-space-4);
  padding: 5px 13px;
  border: 1px solid color-mix(in srgb, var(--oc-gold) 45%, transparent);
  border-radius: var(--oc-radius-control);
  font-size: var(--oc-text-xs);
  font-weight: var(--oc-weight-bold);
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-gold);
}
.sf-cta--journey .sf-section__title { margin-bottom: var(--oc-space-3); font-size: var(--oc-text-xl); font-weight: var(--oc-weight-regular); line-height: 1.18; }
.sf-cta--journey .sf-section__lead { max-width: 46ch; margin: 0; font-size: var(--oc-text-md); line-height: 1.65; }
.sf-cta__primary { display: contents; }
.sf-cta__actions--journey { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--oc-space-4); margin-top: 0; }
.sf-cta--journey .sf-cta__link:not(.sf-btn) { padding-bottom: 1px; border-bottom: 1px solid var(--oc-on-navy-line); font-size: var(--oc-text-sm); color: var(--oc-on-navy-soft); text-decoration: none; }
.sf-cta--journey .sf-cta__link:not(.sf-btn):hover { border-color: var(--oc-gold); color: var(--oc-gold); }

.sf-process__list--stepper { display: flex; flex-direction: column; gap: 0; }
.sf-process__list--stepper .sf-process__step {
  position: relative;
  display: block;
  padding: 0 0 var(--oc-space-5) calc(var(--oc-stepper-dot) + var(--oc-space-4));
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--oc-on-navy-soft);
}
.sf-process__list--stepper .sf-process__step:last-child { padding-bottom: 0; }
.sf-process__list--stepper .sf-process__step::before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--oc-stepper-dot);
  height: var(--oc-stepper-dot);
  border: 0;
  background: var(--oc-gold);
  color: var(--oc-white);
}
.sf-process__list--stepper .sf-process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--oc-stepper-dot) + var(--oc-space-1));
  bottom: var(--oc-space-1);
  left: calc(var(--oc-stepper-dot) / 2 - 1px);
  width: 2px;
  background: color-mix(in srgb, var(--oc-gold) 40%, transparent);
}
.sf-process__list--stepper .sf-process__title { margin: 0 0 var(--oc-space-1); padding-top: 7px; font-size: var(--oc-text-base); font-weight: var(--oc-weight-medium); text-transform: uppercase; color: var(--oc-white); }
.sf-process__list--stepper .sf-process__text { max-width: 52ch; font-size: var(--oc-text-sm); line-height: 1.6; }
@media (min-width: 768px) {
  .sf-cta--journey .sf-section__title { font-size: var(--oc-text-2xl); }
  .sf-cta__journey { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: var(--oc-space-8); }
  .sf-cta--reverse .sf-cta__steps { order: -1; }
}

/* Category tiles: a light rounded well, the bottle contained in it, the label
   under it; a long row is the shared slider with a round next arrow. */
.sf-tiles { --oc-tile-radius: var(--oc-radius-card); }
.sf-tile { display: flex; flex-direction: column; gap: var(--oc-space-3); min-width: 0; color: var(--oc-text); text-align: center; text-decoration: none; }
.sf-tile__media { display: block; aspect-ratio: var(--oc-product-media-ratio, 1 / 1); overflow: hidden; border-radius: var(--oc-tile-radius); background: var(--oc-product-media-bg, var(--oc-bg-subtle)); }
.sf-tile__img, .sf-tile .sf-card__placeholder { display: block; width: 100%; height: 100%; padding: var(--oc-space-3); object-fit: contain; transition: transform 0.4s ease; }
.sf-tile .sf-card__placeholder { padding: 0; }
.sf-tile__title { font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-medium); letter-spacing: var(--oc-tracking); text-transform: uppercase; overflow-wrap: anywhere; }
.sf-tile__text { font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
@media (hover: hover) {
  .sf-tile:hover .sf-tile__img { transform: scale(1.05); }
  .sf-tile:hover .sf-tile__title { color: var(--oc-gold-hover); }
}
.sf-tiles .sf-slider.sf-tiles__grid--scroll { --oc-slides: 2.3; --oc-slide-gap: var(--oc-space-3); }
.sf-tiles .sf-tiles__grid--scroll .sf-slider__slide { align-items: flex-start; }
.sf-tiles .sf-slider__controls { display: none; }
/* No arrows on a tile row (owner, 2026-10-21) and its dots are hidden, so on a
   mouse, which cannot swipe, the row keeps a thin scrollbar to drag. */
@media (hover: hover) and (pointer: fine) {
  .sf-tiles .sf-slider.is-enhanced .sf-slider__track { scrollbar-width: thin; scrollbar-color: var(--oc-border-input) transparent; padding-bottom: var(--oc-space-2); }
  .sf-tiles .sf-slider.is-enhanced .sf-slider__track::-webkit-scrollbar { display: block; height: 6px; }
  .sf-tiles .sf-slider.is-enhanced .sf-slider__track::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--oc-border-input); }
}
@media (min-width: 768px) {
  .sf-tiles .sf-slider.sf-tiles__grid--scroll { --oc-slides: 4.2; --oc-slide-gap: var(--oc-grid-gap); }
}
@media (min-width: 1024px) {
  .sf-tiles .sf-slider.sf-tiles__grid--scroll { --oc-slides: 6; }
}

/* From the blog: one featured post beside the latest posts and the topics. */
.sf-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-6); }
.sf-blog-layout__main, .sf-blog-layout__side { min-width: 0; }
.sf-feature { padding: var(--oc-space-3); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-card); text-align: center; }
.sf-feature__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-feature__media .sf-post__img { transition: transform 0.5s ease; }
.sf-feature__media .sf-card__placeholder { padding: 0; }
.sf-blog-strip--natural .sf-feature__media { aspect-ratio: 16 / 9; }
.sf-feature .sf-pills { position: relative; justify-content: center; margin: calc(var(--oc-space-4) * -1) 0 var(--oc-space-3); }
.sf-feature .sf-pill { min-height: 32px; border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); font-family: var(--oc-font-heading); letter-spacing: var(--oc-tracking); text-transform: uppercase; }
.sf-feature .sf-pill:hover { background: var(--oc-navy-mid); color: var(--oc-white); }
.sf-feature__title { margin: 0 0 var(--oc-space-1); font-size: var(--oc-text-xl); font-weight: var(--oc-weight-regular); line-height: 1.3; }
.sf-feature__title a, .sf-brief__title a { color: var(--oc-text); text-decoration: none; }
.sf-feature__title a:hover, .sf-brief__title a:hover { color: var(--oc-gold-hover); }
.sf-feature__meta, .sf-brief__meta { margin: 0; font-size: var(--oc-text-xs); color: var(--oc-text-muted); }
.sf-feature__meta time, .sf-brief__meta time { text-transform: uppercase; }
.sf-meta-dot { margin: 0 var(--oc-space-2); }
.sf-blog-layout__heading { margin: 0 0 var(--oc-space-4); font-family: var(--oc-font-heading); font-size: var(--oc-text-xl); font-weight: var(--oc-weight-light); line-height: 1.2; text-transform: uppercase; }
.sf-blog-layout__heading:not(:first-child) { margin-top: var(--oc-space-6); }
.sf-brief { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--oc-space-3); align-items: center; margin-bottom: var(--oc-space-3); padding: var(--oc-space-2); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-card); }
.sf-brief__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-brief__media .sf-card__placeholder { padding: 0; }
.sf-brief__title { margin: 0 0 var(--oc-space-1); font-size: var(--oc-text-md); font-weight: var(--oc-weight-regular); line-height: 1.3; }
.sf-blog-layout__side .sf-pill { background: var(--oc-bg); font-family: var(--oc-font-heading); letter-spacing: var(--oc-tracking); text-transform: uppercase; }
@media (hover: hover) {
  .sf-feature__media:hover .sf-post__img { transform: scale(1.04); }
}
@media (min-width: 768px) {
  .sf-blog-layout { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--oc-space-6); }
  .sf-blog-layout__side { padding-left: var(--oc-space-6); border-left: 1px solid var(--oc-divider); }
  .sf-feature__title { font-size: var(--oc-text-2xl); }
}

/* Product card: picture, name, producer, region, price and stock, then the add
   control full width at the bottom of the card. */
.sf-card__price { font-weight: var(--oc-weight-bold); }
.sf-card__stock { margin: 0; padding-top: var(--oc-space-1); font-size: var(--oc-text-xs); font-weight: var(--oc-weight-medium); }
.sf-card__stock--in { color: var(--oc-success); }
.sf-card__stock--low { color: var(--oc-warning-ink); }
.sf-card__info { min-width: 0; }
.sf-card__buy { display: flex; flex-direction: column; margin-top: auto; }
.sf-card__actions > form, .sf-card__actions > .sf-card__add { margin-top: var(--oc-space-3); }
.sf-card__fact-link { color: inherit; text-decoration: none; }
.sf-card__fact-link:hover { color: var(--oc-gold-hover); text-decoration: underline; }
.sf-card__facts, .sf-card__qty { display: none; }
.sf-card__add { border-radius: var(--oc-radius-control); }

/* Contact: THE form (views/sections/contact-form.js), one column, the heading,
   the form in the same centred block as the page's text (see the rich-text rule:
   .sf-contact-form is in its selector list, so the two can never differ), a pill
   Send. The heading is NOT given a colour here: it takes the band's own, which
   the tone classes set (.sf-section--navy ... white; no tone, the body colour).
   A colour on `.sf-contact-form .sf-section__title` outranks those classes, which
   is how a navy band got dark type and, after the patch that answered it, the
   cream (gold-tone) band got WHITE type: the fix named the wrong tones. */
.sf-contact-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-4); }
.sf-contact-form__intro, .sf-contact-form__panel { min-width: 0; }
.sf-contact-form .sf-section__head { margin-bottom: var(--oc-space-4); }
.sf-contact-form .sf-section__title { font-weight: var(--oc-weight-bold); }
.sf-section--navy .sf-field__label { color: var(--oc-on-navy-soft); }
.sf-contact-form__details { margin-top: var(--oc-space-4); }
.sf-contact-form__panel .sf-alert { margin-bottom: var(--oc-space-4); }
.sf-contact-form__form { gap: var(--oc-space-4); }
.sf-contact-form .sf-input, .sf-contact-form .sf-textarea { background: var(--oc-bg-subtle); }
.sf-contact-form .sf-form__row { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .sf-contact-form .sf-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Port page hero: a white card over the banner, the place name under a small
   eyebrow. The page's h1 is further down, in the body. */
.sf-hero--card { background: var(--oc-bg-subtle); color: var(--oc-text); }
.sf-hero--card.sf-hero--image::after { content: none; }
.sf-hero--card .sf-hero__inner { align-items: start; padding-top: var(--oc-space-6); padding-bottom: var(--oc-space-6); }
.sf-hero--card .sf-hero__content { width: 100%; padding: var(--oc-space-5) var(--oc-space-6); border-radius: var(--oc-radius-bubble); background: var(--oc-bg-card); box-shadow: var(--oc-shadow-md); text-align: left; }
.sf-hero--card .sf-hero__eyebrow { margin-bottom: var(--oc-space-2); font-size: var(--oc-text-xs); font-weight: var(--oc-weight-bold); letter-spacing: 0.12em; color: var(--oc-gold); }
.sf-hero--card .sf-hero__title { margin: 0 0 var(--oc-space-2); font-size: calc(var(--oc-text-xl) + var(--oc-space-1)); font-weight: var(--oc-weight-bold); letter-spacing: normal; color: var(--oc-text); }
.sf-hero--card .sf-hero__lead { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
/* ── end live composition ─────────────────────────────────────────────── */

/* ── polish round 3 ── */

/* The list row's quantity stepper: the - and + buttons are drawn only once
   listing.js is running (the field's own spinner is the no-script control), and
   the spinner is dropped when they are there. */
.sf-card__qty .sf-qty__btn { display: none; }
[data-sf-live] .sf-results[data-view="list"] .sf-card__qty .sf-qty__btn { display: inline-block; }
[data-sf-live] .sf-results[data-view="list"] .sf-card__qty .sf-qty__input { width: 44px; -moz-appearance: textfield; appearance: textfield; }

/* The team layout of the columns section: tall pictures (the live theme draws
   each at its own aspect ratio, 2:3 for the team photos) with the name under
   them in large light capitals and the role beneath. */
.sf-columns__media--portrait { border-radius: 0; }
.sf-columns__item--portrait .sf-columns__img { aspect-ratio: var(--oc-ratio-portrait); }
.sf-columns__item--portrait .sf-columns__title { font-family: var(--oc-font-heading); font-size: var(--oc-card-title-size); font-weight: var(--oc-weight-light); line-height: var(--oc-heading-leading); text-transform: uppercase; letter-spacing: normal; }

/* ── consent banner ── */

/* A bar along the bottom edge, drawn hidden by the server and revealed by
   analytics.js. It sits at the overlay layer, which is the age gate's own, and
   the age gate comes first in the document, so the gate is also ruled out here
   by the sibling selector: the banner can never be drawn over the gate's
   buttons, whatever the script does. */
.sf-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--oc-z-overlay);
  max-height: 100dvh;
  overflow-y: auto;
  padding: var(--oc-space-4);
  border-top: 1px solid var(--oc-border-input);
  background: var(--oc-bg-card);
  box-shadow: var(--oc-shadow-lg);
  color: var(--oc-text);
}
.sf-age ~ .sf-consent { display: none; }
.sf-consent__panel {
  display: grid;
  gap: var(--oc-space-3) var(--oc-space-5);
  max-width: var(--oc-page-width);
  margin: 0 auto;
}
.sf-consent__title {
  margin: 0 0 var(--oc-space-2);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-lg);
  font-weight: var(--oc-weight-semibold);
  letter-spacing: var(--oc-tracking);
  text-transform: uppercase;
}
.sf-consent__title:focus { outline: none; }
.sf-consent__text { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-consent__link { color: var(--oc-navy); text-decoration: underline; }
/* Reject all and Accept all are both .sf-btn: the same size, colour and weight
   (the CNIL requires refusing to be as easy as accepting). */
.sf-consent__actions { display: flex; flex-wrap: wrap; gap: var(--oc-space-3); }
.sf-consent__actions .sf-btn { flex: 1 1 auto; }
.sf-consent__options { display: grid; gap: var(--oc-space-3); margin: 0; padding: 0; list-style: none; }
.sf-consent__label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--oc-space-1) var(--oc-space-3);
  align-items: start;
  cursor: pointer;
}
.sf-consent__check { grid-row: 1 / span 2; width: 20px; height: 20px; margin: 0; accent-color: var(--oc-gold); }
.sf-consent__name { font-size: var(--oc-text-sm); font-weight: var(--oc-weight-semibold); }
.sf-consent__hint { grid-column: 2; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-footer__legal-btn { padding: 0; border: 0; background: none; color: var(--oc-on-navy-soft); font: inherit; cursor: pointer; transition: color var(--oc-transition); }
.sf-footer__legal-btn:hover { color: var(--oc-gold-light); text-decoration: underline; }
@media (min-width: 769px) {
  .sf-consent__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sf-consent__prefs { grid-column: 1 / -1; grid-row: 2; }
  .sf-consent__actions { flex-wrap: nowrap; }
  .sf-consent__actions .sf-btn { flex: 0 0 auto; }
}

/* mega menu v2 */
/* The header's panels with pictures (lib/storefront/nav.js draws, menu-images.js
   decides which links get one, menu-shape.js which links exist). Every picture is a
   lazy <img> inside a panel that is not rendered until its <details> opens, so none
   is fetched on page load.
   A PANEL IS ONE ROW OF --oc-menu-slots (six) EQUAL SLOTS: the text columns from the
   left, then any picture tiles in the slots that are free, then the promo card in the
   LAST slot, pinned at the top right and one slot wide (--oc-menu-lead, five, is the
   slots left of it). A panel with two columns has three tiles; a full panel has none;
   more columns than six slots hold get one more slot each (--s7, --s8) so every column
   stays in ONE row (text wraps inside a column, columns never into a second row). The tiles are collections the
   columns do not link (menu-promos.js MENU_TILES), never a second copy of a link.
   The About panel is not a product menu and has its own layout further down, on the
   same slots, so its promo card is a slot wide too. */
.sf-nav__megamain { min-width: 0; padding: var(--oc-space-5) 0; }
.sf-nav__megagrid { display: grid; grid-template-columns: repeat(var(--oc-menu-slots), minmax(0, 1fr)); gap: var(--oc-space-4); align-items: start; }
.sf-nav__megagrid > .sf-nav__mega { grid-column: 1 / -2; }
.sf-nav__megagrid--bare > .sf-nav__mega { grid-column: 1 / -1; grid-template-columns: repeat(var(--oc-menu-slots), minmax(0, 1fr)); }
.sf-nav__megagrid > .sf-mtile__item--promo { grid-column: -2 / -1; }
/* A panel whose columns need more than --oc-menu-slots gets one slot per column plus the
   card's (nav.js megaGrid names the count), so every column stays in ONE row. */
.sf-nav__megagrid--s7 { --oc-menu-slots: 7; --oc-menu-lead: 6; }
.sf-nav__megagrid--s8 { --oc-menu-slots: 8; --oc-menu-lead: 7; }
.sf-nav__megagrid--s9 { --oc-menu-slots: 9; --oc-menu-lead: 8; }
.sf-nav__megagrid--s10 { --oc-menu-slots: 10; --oc-menu-lead: 9; }
/* The product panels may be wider than the page body (the live menu is): the wider of the
   body and 94vw capped at 1500px, so a seven-slot row stays readable. */
.sf-nav__panel--mega > .sf-page, .sf-nav__panel--multi > .sf-page { max-width: max(min(var(--oc-page-width), var(--oc-page-fraction)), min(1500px, 94vw)); }

/* the columns: headings in a row of equal tracks, each with its own picture */
.sf-nav__mega { display: grid; grid-template-columns: repeat(var(--oc-menu-lead), minmax(0, 1fr)); gap: var(--oc-space-5) var(--oc-space-4); min-width: 0; }
.sf-nav__col { min-width: 0; }
.sf-nav__col-title {
  margin: 0 0 var(--oc-space-2);
  padding-bottom: var(--oc-space-2);
  border-bottom: 1px solid var(--oc-border);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-nav-size);
  font-weight: var(--oc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking);
}
.sf-nav__col-title:not(:first-child) { margin-top: var(--oc-space-4); }
.sf-nav__col-link { display: flex; align-items: center; gap: var(--oc-space-2); min-height: 2rem; color: var(--oc-navy); text-decoration: none; }
.sf-nav__col-link:hover { color: var(--oc-gold-hover); }
.sf-nav__col-list { margin: 0; padding: 0; list-style: none; }
.sf-nav__col .sf-nav__sublink { padding: var(--oc-space-1) 0; white-space: normal; }
.sf-nav__col .sf-nav__sublink:hover, .sf-nav__col .sf-nav__sublink[aria-current="page"] { padding-left: var(--oc-space-1); }
/* the last line of a column cut to the cap */
.sf-nav__viewall { margin-top: var(--oc-space-1); }
.sf-nav__sublink--all { color: var(--oc-gold-hover); font-family: var(--oc-font-heading); font-size: var(--oc-text-label); font-weight: var(--oc-weight-bold); letter-spacing: var(--oc-tracking); text-transform: uppercase; }

/* a tile: the picture over its words, one link; the free slots of the row, after the
   text columns. Its tracks are the row's own (same gap), so a tile is exactly a slot wide. */
.sf-nav__tiles { display: grid; align-self: start; align-items: start; gap: var(--oc-space-4); margin: 0; padding: 0; list-style: none; }
.sf-nav__tiles--n1 { grid-column: span 1; grid-template-columns: minmax(0, 1fr); }
.sf-nav__tiles--n2 { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-nav__tiles--n3 { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-nav__tiles--n4 { grid-column: span 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-nav__tiles--n5 { grid-column: span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-mtile__item { min-width: 0; }
.sf-mtile { display: block; color: var(--oc-navy); text-decoration: none; }
.sf-mtile:focus-visible { outline: var(--oc-focus-ring); outline-offset: 2px; border-radius: var(--oc-radius-card); }
.sf-mtile__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--oc-radius-card); object-fit: cover; background: var(--oc-bg-subtle); transition: transform var(--oc-transition), box-shadow var(--oc-transition); }
.sf-mtile:hover .sf-mtile__img { transform: translateY(-2px); box-shadow: var(--oc-shadow-md); }
/* A tile's caption and the promo card's navy band are the SAME height, so the card
   is exactly as tall as a tile beside it whatever its words. */
.sf-mtile__body { display: block; box-sizing: border-box; height: var(--oc-menu-caption-height); padding-top: var(--oc-space-2); overflow: hidden; }
.sf-mtile__eyebrow { display: block; color: var(--oc-text-muted); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; }
.sf-mtile__label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-semibold); line-height: 1.25; transition: color var(--oc-transition); }
.sf-mtile:hover .sf-mtile__label, .sf-mtile[aria-current="page"] .sf-mtile__label { color: var(--oc-gold-hover); }
/* the promo card as the last slot: a 4:3 picture like a tile's, its words in the navy band below */
.sf-mtile__item--promo { display: flex; }
.sf-mtile__item--promo .sf-menucard { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.sf-mtile__item--promo .sf-menucard__img { flex: none; aspect-ratio: 4 / 3; }
.sf-mtile__item--promo .sf-menucard__body { display: flex; flex: none; flex-direction: column; justify-content: center; box-sizing: border-box; height: var(--oc-menu-caption-height); overflow: hidden; padding: var(--oc-space-2) var(--oc-space-3); }
.sf-mtile__item--promo .sf-menucard__eyebrow, .sf-mtile__item--promo .sf-menucard__cta { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-mtile__item--promo .sf-menucard__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: var(--oc-space-1); font-size: var(--oc-text-sm); line-height: 1.25; }
.sf-menucard {
  display: block;
  overflow: hidden;
  border-radius: var(--oc-radius-card);
  background: var(--oc-navy);
  color: var(--oc-white);
  text-decoration: none;
}
.sf-menucard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.sf-menucard:hover .sf-menucard__img { transform: scale(1.04); }
.sf-menucard:focus-visible { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-menucard__body { display: block; padding: var(--oc-space-3) var(--oc-space-4) var(--oc-space-4); }
.sf-menucard__eyebrow {
  display: block;
  margin-bottom: var(--oc-space-1);
  color: var(--oc-gold);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: var(--oc-weight-bold);
  letter-spacing: var(--oc-tracking-wide);
  text-transform: uppercase;
}
.sf-menucard__title {
  display: block;
  margin-bottom: var(--oc-space-2);
  color: var(--oc-white);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-md);
  font-weight: var(--oc-weight-semibold);
  line-height: 1.25;
}
.sf-menucard__cta {
  display: block;
  color: var(--oc-gold-light);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-label);
  font-weight: var(--oc-weight-bold);
  letter-spacing: var(--oc-tracking);
  text-transform: uppercase;
}
.sf-menucard:hover .sf-menucard__cta { color: var(--oc-white); }
/* The About panel: the panels' own slots again, so the feature column is exactly
   a slot (a tile) wide. The groups take all but the last (their own four equal tracks): "How we help" fills row one, "Your orders" the first
   three tracks of row two and "Work with us" the last; the rows are equal, so nothing
   floats. The feature column is the promo card over a small contact block. */
/* the About panel scrolls inside the viewport like the product panels (line ~694) */
.sf-nav__panel--about { max-height: calc(100vh - 160px); overflow-y: auto; }
.sf-nav__about { display: grid; grid-template-columns: repeat(var(--oc-menu-slots), minmax(0, 1fr)); gap: var(--oc-space-4); align-items: stretch; padding: var(--oc-space-5) 0; }
.sf-nav__about-groups { grid-column: 1 / -2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--oc-space-5) var(--oc-space-4); min-width: 0; }
.sf-nav__about-group { display: flex; flex-direction: column; min-width: 0; }
.sf-nav__about-group--1 { grid-column: 1 / -1; }
.sf-nav__about-group--2 { grid-column: 1 / span 3; }
.sf-nav__about-group--3 { grid-column: 4; }
.sf-nav__about-group .sf-nav__col-title { margin-top: 0; }
.sf-nav__about-list { display: grid; flex: 1 1 auto; gap: var(--oc-space-4); margin: 0; padding: 0; list-style: none; }
.sf-nav__about-group--1 .sf-nav__about-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-nav__about-group--2 .sf-nav__about-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-nav__about-group--3 .sf-nav__about-list { grid-template-columns: minmax(0, 1fr); }
.sf-nav__about-item { min-width: 0; }
.sf-nav__about-link { display: flex; align-items: flex-start; gap: var(--oc-space-3); height: 100%; padding: var(--oc-space-2); border-radius: var(--oc-radius-card); color: var(--oc-navy); text-decoration: none; transition: background-color var(--oc-transition); }
.sf-nav__about-link:hover, .sf-nav__about-link[aria-current="page"] { background: var(--oc-bg-subtle); }
.sf-nav__about-link:focus-visible { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-nav__about-badge { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--oc-bg-subtle); color: var(--oc-navy); transition: background-color var(--oc-transition), color var(--oc-transition); }
.sf-nav__about-link:hover .sf-nav__about-badge { background: var(--oc-navy); color: var(--oc-white); }
.sf-nav__about-text { display: block; min-width: 0; }
.sf-nav__about-name { display: block; font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-semibold); line-height: 1.25; transition: color var(--oc-transition); }
.sf-nav__about-link:hover .sf-nav__about-name { color: var(--oc-gold-hover); }
.sf-nav__about-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: var(--oc-space-1); color: var(--oc-text-soft); font-size: var(--oc-text-xs); line-height: 1.4; }
.sf-nav__about-feature { display: flex; flex-direction: column; gap: var(--oc-space-4); min-width: 0; }
.sf-nav__about-contact { display: flex; flex-direction: column; gap: var(--oc-space-1); }
.sf-nav__about-contact .sf-nav__col-title { margin: 0 0 var(--oc-space-1); }
.sf-nav__about-reach { color: var(--oc-navy); font-size: var(--oc-text-xs); text-decoration: none; white-space: nowrap; }
.sf-nav__about-reach:hover { color: var(--oc-gold-hover); }
/* In the phone drawer a section's tiles are ONE row that scrolls sideways and
   snaps, so eight pictured links cost a single short row rather than a column of
   pictures. The row bleeds to the drawer's right edge, which says it scrolls. */
.sf-mobile-menu__tiles { padding: var(--oc-space-3) 0 var(--oc-space-1) var(--oc-space-4); border-bottom: 1px solid var(--oc-divider); }
.sf-nav__tiles--drawer { display: flex; gap: var(--oc-space-3); margin: 0; padding: 0 var(--oc-space-4) var(--oc-space-2) 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf-nav__tiles--drawer::-webkit-scrollbar { display: none; }
.sf-nav__tiles--drawer .sf-mtile__item { flex: 0 0 6.25rem; scroll-snap-align: start; }
.sf-nav__tiles--drawer .sf-mtile__eyebrow { display: none; }
.sf-nav__tiles--drawer .sf-mtile__label { font-size: var(--oc-text-xs); }
.sf-nav__tiles--drawer .sf-mtile__body { height: auto; padding-top: var(--oc-space-1); }
/* In the phone drawer the card is the last row of the open section: the picture
   beside its words, so it costs one row of height rather than a square. */
.sf-mobile-menu__promo { padding: var(--oc-space-3) var(--oc-space-4) var(--oc-space-4); }
.sf-menucard--row { display: flex; align-items: stretch; }
.sf-menucard--row .sf-menucard__img { flex: 0 0 6.5rem; width: 6.5rem; height: auto; min-height: 6.5rem; aspect-ratio: auto; }
.sf-menucard--row .sf-menucard__body { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-width: 0; padding: var(--oc-space-3); }
.sf-menucard--row:hover .sf-menucard__img { transform: none; }

/* ── pages: tables, duty-free, featured card pills ── */

/* Tables in saved page text (views/prose.js adds the classes; it never touches
   a word). A scrolling block on a phone, a real table from tablet up; navy
   header, soft row tints (a tint of navy, so it reads on white AND on the
   alternating band), the first column of a name / value table a label. */
.sf-prose .sf-prose__table { display: block; width: 100%; max-width: 100%; margin: var(--oc-space-5) 0; overflow-x: auto; border-collapse: separate; border-spacing: 0; font-size: var(--oc-text-md); line-height: 1.5; }
.sf-prose .sf-prose__table :is(th, td) { padding: var(--oc-space-3) var(--oc-space-4); border: 0; border-bottom: 1px solid var(--oc-divider); text-align: left; vertical-align: top; }
.sf-prose .sf-prose__table thead th { border-bottom: 0; background: var(--oc-navy); color: var(--oc-white); font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: var(--oc-weight-bold); letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; }
.sf-prose .sf-prose__table--figures thead th:last-child { text-align: right; }
.sf-prose .sf-prose__table thead th:first-child { border-top-left-radius: var(--oc-radius-input); }
.sf-prose .sf-prose__table thead th:last-child { border-top-right-radius: var(--oc-radius-input); }
.sf-prose .sf-prose__table tbody tr:nth-child(even) :is(th, td) { background: color-mix(in srgb, var(--oc-navy) 4%, transparent); }
.sf-prose .sf-prose__table tbody th { background: none; color: var(--oc-navy); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-semibold); }
.sf-prose .sf-prose__table--figures tbody :is(td, th):last-child { text-align: right; font-weight: var(--oc-weight-bold); font-variant-numeric: tabular-nums; color: var(--oc-navy); white-space: nowrap; }
@media (min-width: 768px) {
  .sf-prose .sf-prose__table { display: table; overflow: visible; }
}
/* Two or more caption + name / value tables in a row sit side by side. */
.sf-prose .sf-prose__tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-6); margin: var(--oc-space-5) 0; }
.sf-prose .sf-prose__tablebox { min-width: 0; }
.sf-prose .sf-prose__caption { margin: 0 0 var(--oc-space-3); max-width: none; font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); letter-spacing: var(--oc-tracking); text-transform: uppercase; color: var(--oc-navy); }
.sf-prose .sf-prose__caption::before { content: ""; display: block; width: var(--oc-space-6); height: 1px; margin-bottom: var(--oc-space-3); background: var(--oc-gold); }
.sf-prose .sf-prose__tables .sf-prose__table { margin: 0; }
@media (min-width: 1024px) {
  .sf-prose .sf-prose__tables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oc-space-7); }
}
/* A long name / value table flows into two columns of rows. Its header runs
   once across the top and the rows below are laid in the two columns. */
@media (min-width: 640px) {
  .sf-prose .sf-prose__table--split { display: block; overflow: visible; column-count: 2; column-gap: var(--oc-space-6); }
  .sf-prose .sf-prose__table--split :is(thead, tbody) { display: contents; }
  .sf-prose .sf-prose__table--split thead { display: block; column-span: all; }
  .sf-prose .sf-prose__table--split :is(td, th) { padding-left: var(--oc-space-3); padding-right: var(--oc-space-3); }
  .sf-prose .sf-prose__table--split tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; break-inside: avoid; }
  .sf-prose .sf-prose__table--split thead tr { grid-template-columns: minmax(0, 1fr) auto; }
}
/* A wide table scrolls on a phone rather than squeezing its words one to a line. */
.sf-prose .sf-prose__table:not(.sf-prose__table--pairs) :is(th, td) { min-width: 8.5rem; }

/* The featured-product card's chooser is the product page's own (two fieldsets:
   Payment, Course dates), then the price line, then the stepper beside Add to cart. */
.sf-featured__variants { margin-bottom: var(--oc-space-4); }
.sf-featured__info .sf-product__price { margin-bottom: var(--oc-space-4); }
.sf-buy__row--stepper { align-items: flex-end; }
.sf-buy__row--stepper .sf-buy__qty { flex: 0 0 auto; margin: 0; }
.sf-buy .sf-buy__row--stepper .sf-buy__add { flex: 1 1 auto; width: auto; }

/* The delivery pages' questions close the page at the page width: the title in a
   left third, the accordion in the right two thirds (views/sections/faq.js layout
   'split'). One column on a phone and a tablet. */
.sf-faq .sf-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oc-space-5); }
.sf-faq .sf-faq__grid > .sf-section__head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .sf-faq--split .sf-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--oc-space-8); align-items: start; }
  .sf-faq--split .sf-faq__grid > .sf-section__head { position: sticky; top: calc(var(--oc-space-8) + var(--oc-space-6)); }
}

/* behind-the-bottle fit + sign-in */
/* Behind the bottle: one or two cards keep the SAME size as a row of three and sit
   centred (owner, 2026-10-25: "less than 3 should stay same size"; this replaces the
   2026-10 fill-the-row rule). The view still sets sf-behind--n1/n2. Phones stay stacked. */
@media (min-width: 769px) {
  .sf-behind--n1, .sf-behind--n2 { --sf-behind-col: calc((100% - 2 * var(--oc-grid-gap)) / 3); justify-content: center; }
  .sf-behind--n2 { grid-template-columns: repeat(2, var(--sf-behind-col)); }
  .sf-behind--n1 { grid-template-columns: var(--sf-behind-col); }
}

/* Sign-in: the form and a navy "what you get" panel side by side from 769px, the
   form first and the panel below it on a phone. Both are one card-radius block. */
.sf-signin { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 64rem; margin: 0 auto; border-radius: var(--oc-radius-card); overflow: hidden; box-shadow: var(--oc-shadow-md); background: var(--oc-bg-card); }
.sf-signin__main { padding: var(--oc-space-6) var(--oc-space-5); justify-content: center; }
.sf-signin__title { margin: 0; font-size: var(--oc-text-2xl); font-weight: var(--oc-title-weight); }
.sf-signin__lede { color: var(--oc-text-soft); }
.sf-signin__submit { width: 100%; }
.sf-signin__note { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-signin__aside { display: flex; flex-direction: column; gap: var(--oc-space-4); padding: var(--oc-space-6) var(--oc-space-5); background: var(--oc-navy); color: var(--oc-on-navy-soft); border-top: 4px solid var(--oc-gold); }
.sf-signin__aside > * { margin: 0; }
.sf-signin__aside-title { font-size: var(--oc-text-xl); color: var(--oc-white); }
.sf-signin__benefits { display: grid; gap: var(--oc-space-3); margin: 0; padding: var(--oc-space-4) 0 0; border-top: 1px solid var(--oc-on-navy-line); list-style: none; }
.sf-signin__benefit { display: grid; gap: var(--oc-space-1); font-size: var(--oc-text-sm); }
.sf-signin__benefit strong { color: var(--oc-gold-light); font-family: var(--oc-font-heading); font-weight: 600; }
@media (min-width: 769px) {
  .sf-signin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-signin__main, .sf-signin__aside { padding: var(--oc-space-8) var(--oc-space-7); }
  .sf-signin__aside { border-top: 0; border-left: 4px solid var(--oc-gold); }
}

/* collection print + sort ───────────────────────────────────────────────────
   Two things on the collection page, one block so a sibling session editing
   this file finds them together.

   1. The sort menu (views/listing.js draws it, assets/sort.js drives it). The
      native <select> is the no-script control; once the listing is live
      ([data-sf-live]) it is hidden and this button + listbox replaces it. A
      popover under the button from tablet up, a bottom sheet on a phone. It is
      in the top bar at every width now, so the drawer's own sort (the
      .sf-facets__sort copy) is hidden rather than repeated.
   2. The printable list (?view=print): one row per variant, fixed columns.
      The PDF is drawn from the same markup with its own A4 stylesheet
      (views/collection-print.js), so the class names here are shared with it. */
.sf-sortmenu { display: flex; align-items: center; gap: var(--oc-space-2); }
.sf-sortmenu__live { display: none; position: relative; }
[data-sf-live] .sf-sortmenu__live { display: block; }
[data-sf-live] .sf-sortmenu__native, [data-sf-live] .sf-sortmenu .sf-sort__apply { display: none; }
[data-sf-live] .sf-topbar__sort { display: flex; }
[data-sf-live] .sf-facets__sort { display: none; }
.sf-sortmenu__btn { display: inline-flex; align-items: center; gap: var(--oc-space-2); min-height: 36px; padding: 0 var(--oc-space-4); border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-control); background: var(--oc-bg); color: var(--oc-text); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); cursor: pointer; transition: border-color var(--oc-transition), color var(--oc-transition); }
.sf-sortmenu__btn:hover, .sf-sortmenu__live.is-open .sf-sortmenu__btn { border-color: var(--oc-navy); }
.sf-sortmenu__btn:focus-visible { outline: var(--oc-focus-ring); outline-offset: 2px; }
.sf-sortmenu__k { font-size: var(--oc-text-xs); font-weight: var(--oc-weight-semibold); text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }
.sf-sortmenu__v { font-weight: var(--oc-weight-semibold); color: var(--oc-navy); white-space: nowrap; }
.sf-sortmenu__chev { flex: none; color: var(--oc-text-soft); transition: transform var(--oc-transition); }
.sf-sortmenu__live.is-open .sf-sortmenu__chev { transform: rotate(180deg); }
.sf-sortmenu__panel { position: absolute; top: calc(100% + var(--oc-space-2)); right: 0; z-index: var(--oc-z-popover); width: 21rem; max-width: calc(100vw - var(--oc-space-6)); border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-card); background: var(--oc-bg); box-shadow: var(--oc-shadow-md); }
.sf-sortmenu__panel[hidden], .sf-sortmenu__scrim[hidden] { display: none; }
.sf-sortmenu__sheethead { display: none; }
.sf-sortmenu__list { padding: var(--oc-space-2); outline: none; }
.sf-sortmenu__group { display: flex; align-items: center; gap: var(--oc-space-3); padding: var(--oc-space-1) var(--oc-space-2); }
.sf-sortmenu__group + .sf-sortmenu__group { border-top: 1px solid var(--oc-divider); }
.sf-sortmenu__gl { flex: 0 0 5.5rem; font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: var(--oc-weight-semibold); text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-soft); }
.sf-sortmenu__pair { display: flex; flex: 1; gap: var(--oc-space-1); min-width: 0; }
.sf-sortmenu__group--single { padding: var(--oc-space-1) var(--oc-space-2); }
.sf-sortmenu__group--single .sf-sortmenu__opt { flex: 1; }
.sf-sortmenu__opt { display: flex; flex: 1 1 0; align-items: center; justify-content: space-between; gap: var(--oc-space-1); min-height: 36px; padding: 0 var(--oc-space-3); border-radius: var(--oc-radius-control); color: var(--oc-text); font-size: var(--oc-text-sm); cursor: pointer; white-space: nowrap; }
.sf-sortmenu__opt:hover, .sf-sortmenu__opt.is-active { background: var(--oc-bg-subtle); }
.sf-sortmenu__list:focus-visible .sf-sortmenu__opt.is-active { outline: var(--oc-focus-ring); outline-offset: -2px; }
.sf-sortmenu__opt[aria-selected="true"] { background: var(--oc-navy); color: var(--oc-white); font-weight: var(--oc-weight-semibold); }
.sf-sortmenu__check { flex: none; display: none; }
.sf-sortmenu__opt[aria-selected="true"] .sf-sortmenu__check { display: block; }
.sf-sortmenu__scrim { display: none; }
@media (max-width: 767px) {
  .sf-sortmenu__scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: var(--oc-z-overlay); background: var(--oc-overlay); }
  .sf-sortmenu__panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: calc(var(--oc-z-overlay) + 1); width: auto; max-width: none; max-height: 80vh; overflow-y: auto; border: 0; border-radius: var(--oc-radius-card) var(--oc-radius-card) 0 0; box-shadow: var(--oc-shadow-lg); padding-bottom: env(safe-area-inset-bottom, 0); }
  .sf-sortmenu__sheethead { display: flex; align-items: center; justify-content: space-between; padding: var(--oc-space-3) var(--oc-space-4); border-bottom: 1px solid var(--oc-divider); }
  .sf-sortmenu__sheettitle { font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: var(--oc-weight-bold); text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); }
  .sf-sortmenu__x { width: var(--oc-control-height); height: var(--oc-control-height); border: 0; background: transparent; font-size: var(--oc-text-2xl); line-height: 1; color: var(--oc-text); cursor: pointer; }
  .sf-sortmenu__group { flex-wrap: wrap; align-items: stretch; padding: var(--oc-space-3) var(--oc-space-2); }
  .sf-sortmenu__gl { flex: 1 0 100%; }
  .sf-sortmenu__opt { min-height: var(--oc-control-height); }
  .sf-sortmenu__v { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
}

/* The printable list: the head, then a table with FIXED columns (Wine, Producer,
   Region, Vintage, Size, Price) and a row per variant. Vintage, Size and Price
   never wrap and keep a minimum width so they are not squeezed by a long wine
   name; the Wine column takes what is left and may wrap. */
.sf-print__sub { margin: 0 0 var(--oc-space-1); font-family: var(--oc-font-heading); font-size: var(--oc-text-md); color: var(--oc-gold-hover); }
.sf-print__table .sf-print__num { text-align: right; }
.sf-print__table .sf-print__vintage, .sf-print__table .sf-print__size { min-width: 7ch; box-sizing: content-box; white-space: nowrap; color: var(--oc-text-soft); }
.sf-print__table .sf-print__price { min-width: 9ch; box-sizing: content-box; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the rule is between wines, not between the variants of one wine */
.sf-print__table td { border-bottom: 0; }
.sf-print__wine { break-inside: avoid; }
.sf-print__wine + .sf-print__wine tr:first-child td { border-top: 1px solid var(--oc-divider); }
.sf-print__name { font-family: var(--oc-font-heading); font-weight: var(--oc-weight-semibold); }
.sf-print__amount { font-family: var(--oc-font-heading); font-weight: var(--oc-weight-bold); color: var(--oc-navy); }
.sf-print__low { display: block; font-size: var(--oc-text-xs); color: var(--oc-warning-ink); }
/* the PDF dialog (views/collection.js pdfDialog): the layout choice sits above the two text fields */
.sf-pdfdlg__layouts { margin-bottom: var(--oc-space-4); min-width: 0; }
.sf-pdfdlg__layouts .sf-field__label { padding: 0; }
.sf-print__actions { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); }
@media print {
  /* the block above outranks the earlier print rule that hides the buttons */
  .sf-print__actions { display: none; }
}
/* end collection print + sort ───────────────────────────────────────────── */

/* cocktails ─────────────────────────────────────────────────────────────────
   /pages/cocktails (index) and /pages/cocktail/<handle> (recipe), drawn by
   lib/storefront/views/cocktails.js. Modifier and own-name classes only: the
   shared .sf-card / .sf-chip base rules are not restated here. A cocktail
   photograph is landscape art, so it FILLS its frame (the bottle-in-a-square
   rule is for bottle shots); the bottle itself stays whole, laid over a corner. */
.sf-card--cocktail .sf-card__media { aspect-ratio: 4 / 3; }
.sf-card--cocktail .sf-card__imglink { position: relative; }
.sf-card--cocktail .sf-card__img { padding: 0; object-fit: cover; }
.sf-card--cocktail .sf-card__img--bottle { padding: var(--oc-space-3); object-fit: contain; }
.sf-cocktail-bottle {
  position: absolute;
  left: var(--oc-space-2);
  bottom: var(--oc-space-2);
  width: 40px;
  height: 58px;
  padding: 3px;
  border-radius: var(--oc-radius-card);
  background: var(--oc-white);
  box-shadow: var(--oc-shadow-md);
  pointer-events: none;
}
.sf-cocktail-bottle__img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 769px) {
  .sf-cocktail-bottle { left: var(--oc-space-3); bottom: var(--oc-space-3); width: 48px; height: 68px; }
}

/* the filter bar: search on one row, spirits as light outline chips (one
   scrolling row on a phone, wrapping from the tablet up, the long tail behind a
   <details>), styles as a small segmented control. The chosen option is the
   flat navy one. */
.sf-cocktail-filters { display: grid; gap: var(--oc-space-3); margin: var(--oc-space-2) 0 var(--oc-space-3); min-width: 0; }
.sf-cocktail-filters__search { display: flex; gap: var(--oc-space-2); max-width: 36rem; }
.sf-cocktail-filters__search .sf-input { flex: 1 1 auto; min-width: 0; }
.sf-cocktail-filters__search .sf-btn { flex: none; }
.sf-cocktail-filters__group { min-width: 0; }
.sf-cocktail-filters__row { display: flex; gap: var(--oc-space-2); padding-bottom: var(--oc-space-1); overflow-x: auto; scrollbar-width: thin; }
.sf-cocktail-filters__row--wrap { flex-wrap: wrap; padding-top: var(--oc-space-2); overflow: visible; }
.sf-cocktail-filters .sf-chip {
  flex: 0 0 auto;
  gap: var(--oc-space-1);
  min-height: 34px;
  border-color: var(--oc-border-input);
  background: var(--oc-bg);
  color: var(--oc-text);
  font-weight: 500;
  white-space: nowrap;
}
.sf-cocktail-filters .sf-chip:hover { border-color: var(--oc-navy); background: var(--oc-bg-subtle); color: var(--oc-navy); }
.sf-cocktail-filters .sf-chip[aria-current="true"] { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); font-weight: 600; }
.sf-cocktail-filters__count { font-size: var(--oc-text-xs); font-weight: 400; color: var(--oc-text-muted); }
.sf-cocktail-filters [aria-current="true"] .sf-cocktail-filters__count { color: var(--oc-on-navy-soft); }
.sf-cocktail-filters__more { margin-top: var(--oc-space-1); }
.sf-cocktail-filters__more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--oc-space-2);
  border-radius: var(--oc-radius-control);
  color: var(--oc-gold-hover);
  font-size: var(--oc-text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.sf-cocktail-filters__more > summary::-webkit-details-marker { display: none; }
.sf-cocktail-filters__more > summary::after { content: "+"; margin-left: var(--oc-space-2); }
.sf-cocktail-filters__more[open] > summary::after { content: "\2212"; }
.sf-cocktail-filters__group--style { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-3); }
.sf-cocktail-filters__label { font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-text-muted); }
.sf-cocktail-filters__seg { display: inline-flex; max-width: 100%; gap: 2px; padding: 3px; overflow-x: auto; border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-control); background: var(--oc-bg-subtle); }
.sf-cocktail-filters__seg-link {
  display: inline-flex;
  align-items: center;
  gap: var(--oc-space-1);
  min-height: 32px;
  padding: 0 var(--oc-space-3);
  border-radius: var(--oc-radius-control);
  color: var(--oc-text-soft);
  font-size: var(--oc-text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.sf-cocktail-filters__seg-link:hover { color: var(--oc-navy); }
.sf-cocktail-filters__seg-link[aria-current="true"] { background: var(--oc-navy); color: var(--oc-white); font-weight: 600; }
@media (min-width: 769px) {
  .sf-cocktail-filters__row { flex-wrap: wrap; overflow: visible; }
}

/* the recipe: a hero (photo beside title, whole lead and fact chips), then the
   ingredients and method with the buy card beside them (sticky from the tablet
   up, directly under the hero on a phone), then more with the same spirit. */
.sf-cocktail { display: grid; gap: var(--oc-space-6); min-width: 0; }
.sf-cocktail-hero { display: grid; gap: var(--oc-space-4); align-items: center; }
.sf-cocktail-hero__media { min-width: 0; margin: 0; }
.sf-cocktail-hero__frame { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); }
.sf-cocktail-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-cocktail-hero__img--bottle { padding: var(--oc-space-5); object-fit: contain; }
.sf-cocktail-hero__credit { margin-top: var(--oc-space-1); font-size: var(--oc-text-xs); color: var(--oc-text-muted); }
.sf-cocktail-hero__body { display: grid; gap: var(--oc-space-3); min-width: 0; }
.sf-cocktail-hero__body .sf-title { margin: 0; }
.sf-cocktail-hero__lead { margin: 0; font-size: var(--oc-text-md); line-height: 1.6; color: var(--oc-text-soft); }
.sf-cocktail-facts { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); margin: 0; padding: 0; }
.sf-cocktail-facts__item { display: inline-flex; align-items: baseline; gap: var(--oc-space-2); margin: 0; padding: var(--oc-space-1) var(--oc-space-3); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-control); background: var(--oc-bg-subtle); }
.sf-cocktail-facts dt { font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--oc-tracking); color: var(--oc-text-muted); }
.sf-cocktail-facts dd { margin: 0; font-size: var(--oc-text-sm); font-weight: 600; color: var(--oc-text); }
.sf-cocktail-facts dd a { color: var(--oc-navy); text-decoration: underline; text-underline-offset: 3px; }
.sf-cocktail-hero__actions { margin: 0; justify-self: start; }
.sf-cocktail__main { display: grid; gap: var(--oc-space-5); align-items: start; min-width: 0; }
.sf-cocktail__recipe { display: grid; gap: var(--oc-space-6); min-width: 0; }
.sf-cocktail__heading { margin: 0 0 var(--oc-space-3); font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: 700; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-navy); }
.sf-cocktail-ingredients { margin: 0; padding: 0; list-style: none; }
.sf-cocktail-ingredients li { display: flex; gap: var(--oc-space-3); padding: var(--oc-space-3) 0; border-top: 1px solid var(--oc-divider); line-height: 1.5; }
.sf-cocktail-ingredients li:first-child { padding-top: 0; border-top: 0; }
.sf-cocktail-ingredients strong { flex: 0 0 5.5rem; font-weight: 700; color: var(--oc-gold-hover); }
.sf-cocktail-ingredients a { color: var(--oc-navy); text-decoration: underline; text-underline-offset: 3px; }
.sf-cocktail-steps { display: grid; gap: var(--oc-space-4); margin: 0; padding: 0; list-style: none; counter-reset: cocktail-step; }
.sf-cocktail-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--oc-space-3); line-height: 1.65; counter-increment: cocktail-step; }
.sf-cocktail-steps li::before { content: counter(cocktail-step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--oc-navy); color: var(--oc-white); font-family: var(--oc-font-heading); font-size: var(--oc-text-sm); font-weight: 700; }
.sf-cocktail__serve { margin: var(--oc-space-4) 0 0; padding: var(--oc-space-3) var(--oc-space-4); border-radius: var(--oc-radius-card); background: var(--oc-gold-bg); }
.sf-cocktail-buy { display: grid; gap: var(--oc-space-3); min-width: 0; padding: var(--oc-space-4); border: 1px solid var(--oc-border-input); border-radius: var(--oc-radius-card); background: var(--oc-bg-card); box-shadow: var(--oc-shadow-sm); }
.sf-cocktail-buy__eyebrow { margin: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--oc-tracking-wide); color: var(--oc-gold-hover); }
.sf-cocktail-buy__row { display: flex; align-items: center; gap: var(--oc-space-3); }
.sf-cocktail-buy__imglink { display: block; flex: 0 0 88px; aspect-ratio: var(--oc-product-media-ratio, 1 / 1); overflow: hidden; border-radius: var(--oc-radius-card); background: var(--oc-product-media-bg, var(--oc-bg-subtle)); }
.sf-cocktail-buy__img { display: block; width: 100%; height: 100%; padding: var(--oc-space-1); object-fit: contain; }
.sf-cocktail-buy__info { display: grid; gap: var(--oc-space-1); min-width: 0; }
.sf-cocktail-buy__name { margin: 0; font-family: var(--oc-font-heading); font-size: var(--oc-text-md); font-weight: 600; line-height: 1.3; }
.sf-cocktail-buy__name a { color: var(--oc-text); text-decoration: none; }
.sf-cocktail-buy__name a:hover { color: var(--oc-gold-hover); }
.sf-cocktail-buy__price { margin: 0; font-size: var(--oc-text-lg); font-weight: 700; }
.sf-cocktail-buy__stock { margin: 0; font-size: var(--oc-text-sm); font-weight: 600; color: var(--oc-success-ink); }
.sf-cocktail-buy__stock--low { color: var(--oc-warning-ink); }
.sf-cocktail-buy__stock--out { color: var(--oc-text-muted); }
.sf-cocktail-buy__actions { display: grid; gap: var(--oc-space-2); }
.sf-cocktail-buy__form { margin: 0; }
.sf-cocktail-buy__actions .sf-btn { width: 100%; }
.sf-cocktail__more { display: grid; gap: var(--oc-space-4); padding-top: var(--oc-space-5); border-top: 1px solid var(--oc-divider); }
.sf-cocktail__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--oc-space-3); }
.sf-cocktail__more-head a { font-size: var(--oc-text-sm); font-weight: 600; color: var(--oc-gold-hover); }
@media (min-width: 769px) {
  .sf-cocktail-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--oc-space-7); }
  .sf-cocktail-hero:not(:has(.sf-cocktail-hero__media)) { grid-template-columns: minmax(0, 1fr); }
  .sf-cocktail__main { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--oc-space-7); }
  .sf-cocktail__recipe { grid-column: 1; grid-row: 1; }
  .sf-cocktail-buy { grid-column: 2; grid-row: 1; position: sticky; top: var(--oc-gallery-sticky-top); }
}
/* the cocktail under a spirit's product details (product/details.js
   cocktailPanel): a section like the recipe page's, no box. The library recipe's
   picture is left of the recipe from the tablet up, top-aligned and not sticky,
   and above it on a phone. */
.sf-cocktail-pdp { display: grid; gap: var(--oc-space-5); min-width: 0; }
.sf-cocktail__section { min-width: 0; }
.sf-cocktail-pdp__media { min-width: 0; margin: 0; }
.sf-cocktail-pdp__frame { position: relative; }
.sf-cocktail-pdp__body { display: grid; gap: var(--oc-space-5); min-width: 0; align-content: start; }
.sf-cocktail-pdp__head { display: grid; gap: var(--oc-space-3); min-width: 0; }
.sf-cocktail-pdp__title { margin: 0; }
.sf-cocktail-pdp__serve { padding: var(--oc-space-3) var(--oc-space-4); border-radius: var(--oc-radius-card); background: var(--oc-gold-bg); }
.sf-cocktail-pdp__serve > p { margin: 0; }
.sf-cocktail-pdp__serve > p + p { margin-top: var(--oc-space-2); }
@media (min-width: 769px) {
  .sf-cocktail-pdp--photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--oc-space-7); align-items: start; }
  /* The photo follows the reader down the recipe and stops at its end (owner 2026-10-20), like the product gallery. */
  .sf-cocktail-pdp--photo .sf-cocktail-pdp__media { align-self: start; position: sticky; top: var(--oc-gallery-sticky-top); }
}
/* end cocktails ─────────────────────────────────────────────────────────── */

/* app embed ─────────────────────────────────────────────────────────────────
   The band a staff-app script fills in (views/sections/app-embed.js). It is a
   neutral container: no .sf-prose or rich-text rules reach it, and the bare
   h1-h4, p and a rules at the top of this file stop at its edge (see there). */

/* The page's own h1 for the story: visually hidden (the story's hero says the
   same words), and out of the accessibility tree once the story has been painted,
   so the page exposes one h1. Before the script has run, or if it never does, it is
   the page's only h1, which is what a crawler that does not run scripts reads. */
.sf-app-embed:has(#oc-story) > .sf-app-embed__title { display: none; }

/* The crawler paragraph waits out of sight until the script lifts it into the
   story's column (the script replaces its class), so the hero does not arrive above
   a visible paragraph and push it away. If the script never lifts it, it shows
   itself after a few seconds rather than leave a page with nothing on it. */
.sf-app-embed > .sf-app-embed__intro {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  animation: sf-app-embed-intro 0s 4s forwards;
}
@keyframes sf-app-embed-intro {
  to {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--oc-space-5) var(--oc-gutter);
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
/* end app embed ─────────────────────────────────────────────────────────── */

/* about us ───────────────────────────────────────────────────────────────────
   Two bands of /pages/about-us that the shared sections do not draw the right
   way round, hooked by the `modifier` class templates/about.js gives them.
   The timeline is the navy journey band, but its marks are years in the text, not
   step numbers, so the numbered circle becomes a plain gold dot and the intro
   stays in view beside a list that is taller than it. The founders are two
   portraits wide enough to read as people, not two 2:3 posters. */
.sf-section--about-timeline.sf-cta--journey { --oc-stepper-dot: 0.875rem; }
.sf-section--about-timeline .sf-process__step::before { content: ""; top: 0.3rem; }
.sf-section--about-timeline .sf-process__step:not(:last-child)::after { top: calc(0.3rem + var(--oc-stepper-dot) + var(--oc-space-1)); }
.sf-section--about-timeline .sf-process__title { padding-top: 0; }
@media (min-width: 768px) {
  .sf-section--about-timeline .sf-cta__journey { align-items: start; }
  .sf-section--about-timeline .sf-cta__intro { position: sticky; top: var(--oc-space-8); }
}
.sf-section--about-founders .sf-columns__grid { max-width: 56rem; margin-inline: auto; }
.sf-section--about-founders .sf-columns__img { aspect-ratio: 4 / 5; object-position: center top; }
/* end about us ───────────────────────────────────────────────────────────── */

/* ACCOUNT ACTIONS ────────────────────────────────────────────────────────────
   The forms the signed-in account area posts (lib/storefront/views/account/*):
   approve, message and change an estimate, pay an invoice, email a statement,
   edit an address. Two small pieces the existing components do not cover; the
   fields, buttons, panels, alerts and accordions are the shared ones. */

/* A one-button form that sits among other buttons in a table row or a cluster:
   it must not stretch to the width of its cell or add a block's margin. */
.sf-inline-form { display: inline-flex; margin: 0; }

/* A section heading inside a quote's item table ("Wines", "Spirits"): a full-
   width band, not a priced row. On a phone, where the cells stack into cards,
   it stays one line of heading text. */
.sf-table__group td {
  background: var(--oc-bg-subtle);
  font-family: var(--oc-font-heading);
  font-size: var(--oc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--oc-tracking-wide);
  color: var(--oc-navy);
}
/* end account actions ───────────────────────────────────────────────────── */
/* BUILDER PAGES */
/* The wine, bar and gift builders (lib/storefront/templates/builders/,
   assets/builder-pages.js). They are drawn from the builder layout above
   (.sf-builder, .sf-option, .sf-steps, .sf-panel, .sf-lineitem), the chat
   widget's message classes for the assistant, and the form components; what is
   here is only what those do not cover: the rhythm between the parts, the plan's
   row, the category row, the filters, the proposal. Mobile first. */

.sf-builder-root { display: flex; flex-direction: column; gap: var(--oc-space-5); min-width: 0; }
.sf-builder-page { min-width: 0; }
.sf-builder__ai { min-width: 0; }
.sf-builder__lead { max-width: 52rem; margin: 0 auto; text-align: center; color: var(--oc-text-soft); }
.sf-builder__steps { max-width: 44rem; margin-inline: auto; width: 100%; }

.sf-builder__plan-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oc-space-4); align-items: end; }
.sf-builder__plan-row .sf-field { margin-bottom: 0; }
.sf-builder__estimate { font-family: var(--oc-font-heading); font-weight: var(--oc-weight-bold); color: var(--oc-gold-hover); }
.sf-builder__or { margin: 0; font-size: var(--oc-text-sm); letter-spacing: var(--oc-tracking-wide); text-transform: uppercase; color: var(--oc-text-muted); }
.sf-builder__guide-title { margin: 0 0 var(--oc-space-2); font-size: var(--oc-text-md); font-weight: var(--oc-weight-bold); }
.sf-builder__guide p { margin: 0; color: var(--oc-text-soft); }

.sf-builder__thread .sf-chat__messages { max-height: 22rem; border-radius: var(--oc-radius-card); }
.sf-builder__ideas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-2); }
.sf-builder__ideas-label { font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-builder__proposal { display: flex; flex-direction: column; gap: var(--oc-space-3); }
.sf-builder__proposal-head { margin: 0; font-size: var(--oc-text-xs); font-weight: var(--oc-weight-bold); letter-spacing: var(--oc-tracking); text-transform: uppercase; color: var(--oc-text-soft); }
.sf-builder__proposal-sum { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-builder__proposal .sf-lineitem[aria-disabled="true"] { opacity: 0.45; }
.sf-builder__proposal .sf-lineitem[aria-disabled="true"] .sf-lineitem__name { text-decoration: line-through; }

.sf-builder__nav { overflow-x: auto; margin-inline: calc(-1 * var(--oc-gutter)); padding: var(--oc-space-1) var(--oc-gutter); scrollbar-width: none; }
.sf-builder__nav::-webkit-scrollbar { display: none; }
.sf-builder__nav .sf-chips { flex-wrap: nowrap; }
.sf-builder__nav .sf-chip { flex: none; white-space: nowrap; }
.sf-builder__nav .sf-badge { margin-left: var(--oc-space-1); }

.sf-builder__section { scroll-margin-top: var(--oc-space-8); }
.sf-builder__section-head .sf-builder__range { margin-right: auto; font-size: var(--oc-text-sm); color: var(--oc-text-muted); }
.sf-builder__tip { margin: 0 0 var(--oc-space-3); color: var(--oc-text-soft); }
.sf-builder__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-space-3); margin-bottom: var(--oc-space-3); }
.sf-builder__geo { margin-bottom: var(--oc-space-3); }
.sf-builder__geo .sf-dropdown__panel { max-height: 18rem; overflow-y: auto; }
.sf-builder__geo .sf-badge { margin-left: var(--oc-space-2); }
.sf-builder__notice { margin: 0 0 var(--oc-space-3); }
.sf-builder__empty { grid-column: 1 / -1; padding: var(--oc-space-6) 0; text-align: center; }
.sf-builder__more { display: flex; justify-content: center; margin-top: var(--oc-space-4); }

.sf-option__name .sf-link { color: inherit; text-decoration: none; }
.sf-option__name .sf-link:hover { color: var(--oc-gold-hover); }
.sf-option__actions > .sf-btn { margin-left: auto; }

.sf-builder__summary { margin: 0; font-size: var(--oc-text-sm); color: var(--oc-text-soft); }
.sf-builder__companion { padding: var(--oc-space-3); border: 1px solid var(--oc-divider); border-radius: var(--oc-radius-card); background: var(--oc-bg-subtle); font-size: var(--oc-text-sm); }
.sf-builder__companion .sf-check { margin-bottom: var(--oc-space-2); }
.sf-builder__aside .sf-lineitem__text .sf-cluster { margin-top: var(--oc-space-1); }

.sf-builder__corporate { margin-top: var(--oc-space-6); }
.sf-builder__recipient { grid-template-columns: minmax(0, 1fr); align-items: center; }

@media (min-width: 640px) {
  .sf-builder__plan-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-builder__recipient { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}
@media (min-width: 768px) {
  .sf-builder__nav { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
  .sf-builder__nav .sf-chips { flex-wrap: wrap; }
}
/* The chip the design system describes (white, outlined, navy when chosen) is
   drawn over by the later "active filters" chip (navy, always), so a chip meant to
   be switched looked chosen before anything was. Within the builders the chip is
   the choosing kind again; the selected look is the one the first definition gave. */
.sf-builder-root .sf-chip { min-height: 36px; padding: 0 var(--oc-space-3); border: 1px solid var(--oc-border-input); background: var(--oc-bg); color: var(--oc-text); font-family: var(--oc-font-body); font-size: var(--oc-text-sm); font-weight: var(--oc-weight-semibold); cursor: pointer; }
.sf-builder-root .sf-chip--sm { min-height: 28px; padding: 0 var(--oc-space-2); font-size: var(--oc-text-xs); }
.sf-builder-root .sf-chip:hover { border-color: var(--oc-navy); background: var(--oc-bg); color: var(--oc-navy); }
.sf-builder-root .sf-chip[aria-pressed="true"], .sf-builder-root .sf-chip[aria-current="true"], .sf-builder-root .sf-chip:has(.sf-chip__input:checked) { border-color: var(--oc-navy); background: var(--oc-navy); color: var(--oc-white); }
.sf-builder__plan .sf-field > .sf-qty { align-self: flex-start; }
.sf-builder-root .sf-builder__options { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
/* end builder pages */