/* ═══════════════════════════════════════════════════════════════
   XS//SASS Storefront — Premium editorial system
   Dark surveillance brand, elevated: near-black canvas, generous
   negative space, high-contrast editorial serif for headlines,
   division accent used sparingly as intentional signal.
   --accent is injected per-page (SI cyan · CI gold · DI red).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Near-black, cinematic — lifted a hair off the absolute floor so text
     doesn't sit on pure black, without turning the site gray. */
  --bg: #070510;            /* base canvas (was #050308) */
  --bg-copy: #0a0716;       /* very slight lift under long-copy sections */
  --bg-raise: #100b1e;      /* raised surfaces (cards, drawer, panels) */
  --ink: #f8f6ff;           /* primary text — marginally brighter */
  --ink-soft: #cec5e8;      /* secondary / body copy — noticeably clearer */
  --ink-faint: #8b83a6;     /* labels / muted — lifted for legibility */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --accent: #00f5ff; /* overridden per page */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  /* Product photos are pre-cropped at build time (npm run crop-media) so the
     product already fills the frame with a tiny clean margin. This zoom is now
     just a gentle finish that lets the plate kiss the frame edges; keep it low
     to avoid clipping the product. Hover adds a touch more. */
  --media-zoom: 1.05;
  --media-zoom-hover: 1.1;
  /* premium editorial image frame — every product image is mounted the same way
     so white Shopify mockups and dark campaign photography feel like one set. */
  --frame-bg: #0A0A0D;
  --frame-line: #1E1E24;
  --frame-radius: 3px;
  --frame-matte: clamp(12px, 1.4vw, 16px);
  --frame-shadow: 0 12px 34px rgba(0,0,0,0.5), inset 0 0 24px rgba(0,0,0,0.55);
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'Orbitron', monospace;
  --body: 'Rajdhani', sans-serif;
  --label: 'Chakra Petch', sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.sf-body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.sf-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ── type primitives ─────────────────────────────────────────── */
.sf-eyebrow {
  display: block;
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.sf-display {
  font-family: var(--serif);
  font-weight: 340;
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sf-h2 {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.sf-muted { color: var(--ink-soft); }
p { color: var(--ink-soft); }
.sf-textlink {
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: opacity 0.2s;
}
.sf-textlink:hover { opacity: 0.7; }

/* ── header ──────────────────────────────────────────────────── */
.sf-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); height: 68px;
  background: rgba(5, 3, 8, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.sf-logo { font-family: var(--mono); font-weight: 900; font-size: 1.25rem; letter-spacing: 0.1em; color: var(--ink); }
.sf-logo span { color: var(--accent); }
.sf-nav { display: flex; gap: 2rem; align-items: center; }
.sf-nav a {
  font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); transition: color 0.2s; position: relative;
}
.sf-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.sf-nav a:hover, .sf-nav a.active { color: var(--ink); }
.sf-nav a:hover::after, .sf-nav a.active::after { transform: scaleX(1); }
@media (max-width: 860px) { .sf-nav a:not(:nth-child(1)):not(:nth-child(2)) { display: none; } }

/* ── breadcrumbs ─────────────────────────────────────────────── */
.sf-crumbs { padding-top: 1.6rem; }
.sf-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sf-crumbs li { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.sf-crumbs a { color: var(--ink-faint); transition: color 0.2s; }
.sf-crumbs a:hover { color: var(--accent); }
.sf-crumbs .sep { color: var(--ink-faint); opacity: 0.5; }
.sf-crumbs [aria-current] { color: var(--ink-soft); }

/* ── sections ────────────────────────────────────────────────── */
.sf-section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
/* Long-copy sections get a very slight lift so text never sits on the
   darkest black; media/split sections stay on the base for contrast rhythm. */
.sf-editorial, .sf-storyblocks, .sf-specs, .sf-quote-section, .sf-related { background: var(--bg-copy); }
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.sf-grid-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }

/* ── product hero ────────────────────────────────────────────── */
.sf-hero {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--maxw); margin: 0 auto; padding: 2.5rem var(--gutter) clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.sf-hero-media { position: sticky; top: 88px; min-width: 0; }
.sf-hero-frame {
  position: relative; aspect-ratio: 4 / 5; background: var(--frame-bg);
  border: 1px solid var(--frame-line); border-radius: var(--frame-radius); padding: var(--frame-matte);
  box-shadow: var(--frame-shadow); overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sf-hero-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.sf-thumbs { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.sf-thumb { width: 64px; height: 64px; background: var(--frame-bg); border: 1px solid var(--frame-line); border-radius: var(--frame-radius); cursor: pointer; padding: 6px; overflow: hidden; transition: border-color 0.2s; }
.sf-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.sf-thumb.active, .sf-thumb:hover { border-color: var(--accent); }

.sf-hero-panel { padding-top: 0.5rem; }
.sf-division-badge {
  display: inline-block; font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--line-strong);
  padding: 0.4rem 0.8rem; margin-bottom: 1.6rem;
}
.sf-title { font-family: var(--serif); font-weight: 360; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.015em; margin-bottom: 0.8rem; }
.sf-tagline { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 1.4rem; max-width: 42ch; }
.sf-price { font-family: var(--mono); font-weight: 700; font-size: 1.4rem; color: var(--ink); margin-bottom: 2rem; }

.sf-buy { border-top: 1px solid var(--line); padding-top: 1.8rem; }
.sf-field { margin-bottom: 1.6rem; }
.sf-field-label { display: block; font-family: var(--label); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.7rem; }
.sf-variants { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sf-variant {
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 96px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
  padding: 0.7rem 1rem; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-family: var(--label);
}
.sf-variant:hover { border-color: var(--ink-soft); color: var(--ink); }
.sf-variant.active { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sf-variant-type { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sf-variant-price { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.sf-variant.active .sf-variant-price { color: var(--accent); }

/* ── style + option selectors (real Shopify variants) ────────── */
.sf-styles { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sf-style { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 1.15rem; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.sf-style:hover { border-color: var(--ink-soft); color: var(--ink); }
.sf-style.active { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sf-options { display: flex; flex-direction: column; gap: 1.1rem; }
.sf-opt-name { display: block; font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.55rem; }
.sf-opt-values { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-opt { min-width: 44px; text-align: center; font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.04em; padding: 0.5rem 0.85rem; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.sf-opt:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.sf-opt.active { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sf-opt:disabled { opacity: 0.32; cursor: not-allowed; text-decoration: line-through; }
.sf-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.sf-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.sf-qty-btn { width: 42px; height: 42px; background: transparent; border: none; color: var(--ink); font-size: 1.2rem; cursor: pointer; transition: background 0.2s; }
.sf-qty-btn:hover { background: rgba(255,255,255,0.06); }
.sf-qty-input { width: 48px; height: 42px; text-align: center; background: transparent; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: 0.9rem; }
.sf-qty-input:focus { outline: none; }

.sf-buy-btn {
  display: block; text-align: center; width: 100%; margin-top: 0.4rem;
  font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: #050308; background: var(--accent); padding: 1.05rem 1.5rem;
  transition: transform 0.15s, box-shadow 0.3s, opacity 0.2s;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.sf-buy-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 30%, transparent); }
.sf-avail { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.sf-avail .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); display: inline-block; }

.sf-credential { display: flex; gap: 1rem; margin-top: 2.2rem; padding: 1.3rem 1.4rem; border: 1px solid var(--line); background: var(--bg-raise); }
.sf-credential-mark { font-family: var(--mono); font-size: 1.4rem; color: var(--accent); line-height: 1; }
.sf-credential p { font-size: 0.92rem; color: var(--ink-soft); }

/* ── editorial hero (cinematic lead; commerce lives in .sf-acquire) ── */
.sf-ehero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: min(86vh, 780px); max-width: var(--maxw); margin: 0 auto; padding: clamp(1.5rem, 3vw, 3rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem); }
.sf-ehero-frame { position: relative; aspect-ratio: 4 / 5; background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.05), transparent 60%), var(--bg-raise); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.sf-ehero-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(0,0,0,0.5); pointer-events: none; }
.sf-ehero-frame img { width: 100%; height: 100%; object-fit: contain; padding: clamp(0.4rem, 1.2vw, 0.9rem); transform: scale(var(--media-zoom)); transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.sf-ehero-frame:hover img { transform: scale(var(--media-zoom-hover)); }
.sf-ehero-title { font-family: var(--serif); font-weight: 340; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.0; letter-spacing: -0.02em; margin: 1rem 0 0.7rem; }
.sf-ehero-tag { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 1.5rem; max-width: 42ch; }
.sf-ehero-price { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-bottom: 1rem; }
.sf-ehero-cred { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2rem; }
.sf-ehero-cred-mark { color: var(--accent); font-family: var(--mono); font-size: 0.95rem; }
.sf-ehero-discover { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); transition: gap 0.2s; }
/* Share — understated, text-first, no neon, no social icons */
.sf-ehero-share { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.2s, gap 0.2s; }
.sf-ehero-share:hover { color: var(--ink); gap: 0.75rem; }
.sf-share-btn { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.2rem; background: none; border: 0; padding: 0.2rem 0; cursor: pointer; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.2s, gap 0.2s; }
.sf-share-btn:hover { color: var(--ink); gap: 0.65rem; }
.sf-ehero-discover:hover { gap: 0.85rem; }
.sf-ehero-cta { display: inline-block; width: auto; padding: 1rem 2.1rem; }
/* hero purchase path: prominent Acquire button jumps to the .sf-acquire section */
.sf-ehero-actions { display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2rem); flex-wrap: wrap; margin-top: 0.25rem; }
.sf-ehero-acquire { display: inline-flex; align-items: center; gap: 0.55rem; width: auto; margin: 0; padding: 1rem 2.3rem; }

/* ── full-bleed lifestyle/environmental hero (campaign) ──────────
   The overlay copy must never cover the product/design: the subject is
   anchored high (object-position) and the copy sits in a compact band at the
   very bottom, over a bottom-weighted scrim so the artwork above stays clear. */
.sf-ehero-full { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: min(90vh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: #050310; }
/* blurred, darkened fill so a portrait campaign image never leaves raw bars on a
   wide screen — the whole sharp image sits on top via `contain`. */
.sf-ehero-full-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(44px) brightness(0.38) saturate(1.1); transform: scale(1.15); }
.sf-ehero-full-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
@media (min-width: 900px) {
  /* editorial spread: the campaign subject holds the right, the headline owns
     the left — no overlap, whole image always visible. */
  .sf-ehero-full-img { object-position: right bottom; }
  .sf-ehero-full-inner > * { max-width: 46%; }
  .sf-ehero-full-scrim { background: linear-gradient(90deg, rgba(5,3,16,0.9) 0%, rgba(5,3,16,0.55) 34%, rgba(5,3,16,0.05) 55%, transparent 68%); }
}
.sf-ehero-full-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,3,16,0.97) 0%, rgba(5,3,16,0.93) 14%, rgba(5,3,16,0.66) 30%, rgba(5,3,16,0.22) 46%, transparent 64%); }
.sf-ehero-full-inner { position: relative; width: 100%; padding-top: 2rem; padding-bottom: clamp(2.5rem, 7vh, 5rem); }
/* Overlay copy sits over live campaign imagery (bright skies included), so the
   division badge and headline are forced to high contrast — a solid backing on
   the badge plus strong shadows on every line — per the house readability rule. */
.sf-ehero-full .sf-division-badge { color: #fff; background: color-mix(in srgb, var(--accent) 24%, rgba(5,3,16,0.84)); border-color: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,0.28)); box-shadow: 0 4px 20px rgba(0,0,0,0.55); text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.sf-ehero-full .sf-ehero-title { text-shadow: 0 2px 22px rgba(0,0,0,0.82), 0 1px 3px rgba(0,0,0,0.92); }
.sf-ehero-full .sf-ehero-tag, .sf-ehero-full .sf-ehero-price, .sf-ehero-full .sf-ehero-cred { text-shadow: 0 1px 12px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.92); }
/* compress the copy block so its top edge stays below the product artwork */
.sf-ehero-full .sf-ehero-title { font-size: clamp(2.4rem, 5.4vw, 4.6rem); margin: 0.4rem 0 0.5rem; }
.sf-ehero-full .sf-ehero-tag { color: var(--ink); opacity: 0.9; max-width: 34ch; margin-bottom: 0.9rem; }
.sf-ehero-full .sf-ehero-price { margin-bottom: 0.55rem; }
.sf-ehero-full .sf-ehero-cred { margin-bottom: 1.1rem; }
/* Mobile / narrow: the side-by-side spread has no room, so instead of floating
   the copy over the image (where it landed on the product/design), stack it —
   the whole campaign image sits full-width on top, the copy drops into a solid
   panel beneath it. The headline can never cover the product this way. */
@media (max-width: 899px) {
  .sf-ehero-full { display: block; height: auto; }
  .sf-ehero-full-bg, .sf-ehero-full-scrim { display: none; }
  .sf-ehero-full-img { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; display: block; }
  .sf-ehero-full-inner { padding-top: 1.75rem; padding-bottom: 2.5rem; }
}
.sf-family-home .sf-ehero-frame { aspect-ratio: 4 / 3; }
.sf-family-drinkware .sf-ehero-frame, .sf-family-stationery .sf-ehero-frame { aspect-ratio: 1 / 1; }

/* ── acquire (the product listing / buy section) ─────────────── */
.sf-acquire { background: var(--bg-copy); scroll-margin-top: 80px; }
.sf-acquire-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .sf-ehero, .sf-acquire-inner { grid-template-columns: 1fr; } }

/* ── field notes (on-brand observation log) ──────────────────── */
.sf-fieldlog-inner { max-width: 640px; }
.sf-fieldlog-label { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 1.8rem 0 0.7rem; }
.sf-fieldlog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.sf-fieldlog-list li { position: relative; padding-left: 1.4rem; font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 340; color: var(--ink); line-height: 1.35; }
.sf-fieldlog-list li::before { content: '›'; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); }
.sf-fieldlog-rec { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--ink); margin: 0; }

/* ── details accordion (specs live here, closed by default) ───── */
.sf-specs-narrow { max-width: 640px; }
.sf-accordion { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.sf-acc-item { border-bottom: 1px solid var(--line); }
.sf-acc-sum { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.15rem 0; font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); transition: color 0.2s; }
.sf-acc-sum::-webkit-details-marker { display: none; }
.sf-acc-sum:hover { color: var(--accent); }
.sf-acc-ico { position: relative; width: 12px; height: 12px; flex: none; }
.sf-acc-ico::before, .sf-acc-ico::after { content: ''; position: absolute; background: var(--accent); transition: transform 0.25s; }
.sf-acc-ico::before { top: 5px; left: 0; width: 12px; height: 2px; }
.sf-acc-ico::after { top: 0; left: 5px; width: 2px; height: 12px; }
.sf-acc-item[open] .sf-acc-ico::after { transform: scaleY(0); }
.sf-acc-body { padding: 0 0 1.5rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
.sf-acc-body p { margin: 0 0 0.8rem; }
.sf-acc-body .sf-spec-table { width: 100%; border-collapse: collapse; }
.sf-acc-body .sf-spec-table th { text-align: left; font-family: var(--label); font-weight: 500; color: var(--ink-faint); padding: 0.5rem 1rem 0.5rem 0; white-space: nowrap; vertical-align: top; }
.sf-acc-body .sf-spec-table td { padding: 0.5rem 0; color: var(--ink-soft); }
.sf-acc-body .sf-care-list { margin: 0; padding-left: 1.1rem; }
.sf-acc-body .sf-care-list li { margin-bottom: 0.4rem; }
.sf-acc-body .sf-feature-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.sf-acc-body .sf-feature-list li { margin-bottom: 0.7rem; }
.sf-acc-body .sf-feature-title { display: block; color: var(--ink); font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.15rem; }

/* ── narrative gallery (every image reveals something new) ────── */
.sf-gseq { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.sf-gseq-item { margin: 0; width: 100%; max-width: 760px; background: var(--bg-raise); border: 1px solid var(--line); overflow: hidden; }
.sf-gseq-item img { display: block; width: 100%; height: auto; }

/* ── profile reveal / dossier (the credential explanation) ───── */
.sf-reveal-inner { display: flex; flex-direction: column; gap: clamp(1.5rem, 3.5vw, 2.75rem); }
.sf-reveal-copy { max-width: 620px; }
.sf-reveal-media { margin: 0; width: 100%; }
.sf-reveal-media img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #050310; }
.sf-reveal[data-division="SI"], .sf-reveal[data-division="BI"] { --accent: #00f5ff; }
.sf-reveal[data-division="CI"] { --accent: #C8A84B; }
.sf-reveal[data-division="DI"] { --accent: #ff2828; }

/* ── complete your collection (campaign poster wall) ─────────── */
.sf-poster-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.6vw, 1.4rem); margin-top: 1.4rem; }
@media (max-width: 980px) { .sf-poster-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sf-poster-wall { grid-template-columns: 1fr; } }
.sf-poster { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--line); background: #0a0716; text-decoration: none; transition: border-color 0.25s, transform 0.25s; }
.sf-poster:hover { border-color: var(--accent); transform: translateY(-3px); }
.sf-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.sf-poster:hover .sf-poster-img { transform: scale(1.06); }
.sf-poster-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,3,16,0.94) 0%, rgba(5,3,16,0.35) 42%, transparent 68%); }
.sf-poster--type { display: flex; align-items: flex-end; background: radial-gradient(130% 90% at 28% 6%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%), linear-gradient(180deg, #0e0b1c 0%, #070510 100%); }
.sf-poster-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(0.8rem, 1.5vw, 1.15rem); display: flex; flex-direction: column; gap: 0.35rem; }
.sf-poster--type .sf-poster-meta { position: static; }
.sf-poster-div { font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.sf-poster-name { font-family: var(--serif); font-weight: 340; font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.1; color: var(--ink); }
.sf-poster[data-division="SI"], .sf-poster[data-division="BI"] { --accent: #00f5ff; }
.sf-poster[data-division="CI"] { --accent: #C8A84B; }
.sf-poster[data-division="DI"] { --accent: #ff2828; }

/* ── complete your profile (single clean curated tail) ───────── */
.sf-complete-inner { max-width: 640px; }
.sf-complete-bar { font-family: var(--mono); letter-spacing: 0.35em; color: var(--accent); opacity: 0.8; font-size: 0.75rem; margin: 0.9rem 0 1.8rem; }
.sf-complete-list { list-style: none; margin: 0; padding: 0; }
.sf-complete-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; border-top: 1px solid var(--line); text-decoration: none; transition: padding-left 0.2s; }
.sf-complete-list li:last-child .sf-complete-row { border-bottom: 1px solid var(--line); }
.sf-complete-row:hover { padding-left: 0.5rem; }
.sf-complete-name { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 340; color: var(--ink); }
.sf-complete-go { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

/* ── editorial ───────────────────────────────────────────────── */
.sf-editorial-inner { max-width: 900px; }
.sf-subhead { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; }
.sf-summary { font-family: var(--serif); font-weight: 340; font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4; color: var(--ink); max-width: 56ch; margin: 1.4rem 0 1.6rem; }
.sf-lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.75; color: var(--ink-soft); max-width: 62ch; }
.sf-feature-intro { margin: 0.4rem 0 0.4rem; font-size: 0.98rem; }
.sf-quote-section { padding-top: 0; }
.sf-pullquote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink); max-width: 20ch; margin: 0 auto; text-align: center; position: relative;
}
.sf-pullquote::before { content: '“'; color: var(--accent); }
.sf-pullquote::after { content: '”'; color: var(--accent); }

/* ── split (image / text) ────────────────────────────────────── */
.sf-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter);
}
.sf-split-rev .sf-split-media { order: 2; }
.sf-split-media { aspect-ratio: 4 / 5; background: var(--bg-raise); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sf-split-media img { width: 100%; height: 100%; object-fit: contain; padding: clamp(0.4rem, 1.2vw, 1rem); transform: scale(var(--media-zoom)); }
.sf-split-text p { margin-bottom: 1.1rem; max-width: 52ch; }
.sf-feature-list { list-style: none; margin-top: 1.6rem; display: grid; gap: 1rem; }
.sf-feature-list li { display: grid; gap: 0.2rem; padding-left: 1.1rem; border-left: 1px solid var(--accent); }
.sf-feature-title { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.sf-feature-body { font-size: 0.92rem; color: var(--ink-soft); }

/* ── specs / care ────────────────────────────────────────────── */
.sf-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.sf-spec-table { width: 100%; border-collapse: collapse; }
.sf-spec-table tr { border-bottom: 1px solid var(--line); }
.sf-spec-table th { text-align: left; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; padding: 0.85rem 0; width: 44%; }
.sf-spec-table td { padding: 0.85rem 0; color: var(--ink); font-size: 0.95rem; }
.sf-care-list { list-style: none; display: grid; gap: 0.6rem; }
.sf-care-list li { font-size: 0.95rem; color: var(--ink-soft); padding-left: 1.2rem; position: relative; }
.sf-care-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }

/* ── gallery ─────────────────────────────────────────────────── */
.sf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
.sf-gallery-item { aspect-ratio: 1; background: var(--bg-raise); border: 1px solid var(--line); overflow: hidden; cursor: zoom-in; }
.sf-gallery-item img { width: 100%; height: 100%; object-fit: contain; padding: 0.35rem; transform: scale(var(--media-zoom)); transition: transform 0.5s; }
.sf-gallery-item:hover img { transform: scale(var(--media-zoom-hover)); }

/* ── division band + hero ────────────────────────────────────── */
.sf-division-band { position: relative; overflow: hidden; }
.sf-division-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%); opacity: 0.7; }
.sf-division-inner { position: relative; max-width: 780px; text-align: center; margin: 0 auto; }
.sf-division-emblem { font-family: var(--mono); font-size: 2.4rem; color: var(--accent); display: block; margin-bottom: 1rem; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 60%, transparent)); }
.sf-division-story { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); margin-bottom: 1.6rem; }
.sf-division-hero { padding: clamp(3rem, 8vw, 6rem) 0 2rem; text-align: center; position: relative; }
.sf-division-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); }
.sf-division-hero .sf-wrap { position: relative; }
.sf-division-title { margin: 0.3rem 0 1rem; }
.sf-division-lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 48ch; margin: 0 auto; }

/* ── division landing: editorial opening ─────────────────────── */
.sf-division-open { position: relative; min-height: min(88vh, 820px); display: flex; align-items: center; overflow: hidden; }
.sf-division-open-bg { position: absolute; inset: 0; background: radial-gradient(85% 70% at 28% 22%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(70% 60% at 92% 88%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%); }
.sf-division-open-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 28% 42%, #000, transparent 72%); opacity: 0.55; }
.sf-division-open-inner { position: relative; max-width: 900px; }
.sf-division-open-num { font-family: var(--label); font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); }
.sf-division-open-name { font-family: var(--serif); font-weight: 340; font-size: clamp(3rem, 9vw, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0.6rem 0 1.6rem; color: var(--ink); text-wrap: balance; }
/* Name on its own line, "(CODE) Division" on the next — keeps every division
   heading to two lines and never orphans the (XX) code mid-name. */
.sf-do-name { display: block; }
.sf-do-coda { display: block; white-space: nowrap; }
.sf-division-open-code { color: var(--accent); font-weight: 300; }
.sf-division-open-lines p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.25; color: var(--ink); }
.sf-division-open-explores { font-size: 1.1rem; line-height: 1.75; color: var(--ink-soft); max-width: 54ch; margin: 1.6rem 0 2.2rem; }
.sf-division-open-cue { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 0.5rem; transition: gap 0.2s; }
.sf-division-open-cue:hover { gap: 0.9rem; }

/* ── division landing: featured release (cover story) ────────── */
.sf-featured-release { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.sf-fr-media { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--frame-bg); border: 1px solid var(--frame-line); border-radius: var(--frame-radius); padding: var(--frame-matte); box-shadow: var(--frame-shadow); overflow: hidden; }
.sf-fr-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.sf-fr-type { display: block; font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin: 0.85rem 0 0.4rem; }
.sf-fr-name { font-family: var(--serif); font-weight: 340; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 1rem; color: var(--ink); }
.sf-fr-para { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.4rem; }
.sf-fr-cta { font-size: 0.82rem; }
.sf-collection-head { margin-bottom: 2rem; }
@media (max-width: 820px) { .sf-featured-release { grid-template-columns: 1fr; } .sf-fr-media { order: -1; } }

/* ── cards (collectible, equal-height) ───────────────────────── */
.sf-card { display: flex; flex-direction: column; background: var(--bg-raise); border: 1px solid var(--line); overflow: hidden; transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), border-color 0.35s, box-shadow 0.35s; }
.sf-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); box-shadow: 0 20px 55px rgba(0,0,0,0.5); }
.sf-card-media { position: relative; aspect-ratio: 1; background: var(--frame-bg); border: 1px solid var(--frame-line); border-radius: var(--frame-radius); padding: var(--frame-matte); box-shadow: var(--frame-shadow); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-card-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
/* two-layer crossfade: the top layer fades the NEXT image in over the current one
   (never a blank dip), then the base adopts it. */
.sf-card-media[data-sf-rotate] { position: relative; }
.sf-rot-top { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; z-index: 1; }
/* when the card shows a campaign image, it fills the frame like a poster (the
   matte is for normalizing white mockups, not editorial photography) */
.sf-card-media--campaign { padding: 0; }
.sf-card-media--campaign img { object-fit: cover; object-position: center 22%; }
.sf-card-body { flex: 1; display: flex; flex-direction: column; padding: 1.35rem 1.4rem 1.5rem; }
.sf-card-name { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.35rem; color: var(--ink); }
/* product type as understated typography beneath the name (replaces the image badge) */
.sf-card-type { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.sf-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.9rem; }
.sf-card-explore { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); transition: letter-spacing 0.25s; }
.sf-card:hover .sf-card-explore { letter-spacing: 0.26em; }
.sf-card-price { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-faint); }
.sf-card[data-division="SI"], .sf-card[data-division="BI"] { --accent: #00f5ff; }
.sf-card[data-division="CI"] { --accent: #C8A84B; }
.sf-card[data-division="DI"] { --accent: #ff2828; }

/* ── shop index ──────────────────────────────────────────────── */
.sf-shop-division { padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--line); }
.sf-shop-division .sf-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.sf-shop-division-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.sf-shop-hero { padding: clamp(3.5rem, 9vw, 7rem) 0 2rem; text-align: center; }
.sf-shop-hero-title { max-width: 16ch; margin: 0.4rem auto 1.4rem; }
.sf-shop-hero-sub { font-size: 1.1rem; color: var(--ink-soft); max-width: 56ch; margin: 0 auto; }
/* Full-bleed surveillance masthead: image sits behind the copy under a heavy
   scrim so it reads as atmosphere, not a loud banner, and the light serif
   headline stays crisp. Bottom fades to --bg to blend into the credential section. */
.sf-shop-hero--img { position: relative; overflow: hidden; padding-top: clamp(5rem, 12vw, 9rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.sf-shop-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.sf-shop-hero-scrim { position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 56% 66% at 50% 46%, rgba(7,5,16,0.34) 0%, rgba(7,5,16,0.06) 60%, transparent 100%),
    linear-gradient(180deg, rgba(7,5,16,0.44) 0%, rgba(7,5,16,0.02) 24%, transparent 62%, rgba(7,5,16,0.50) 85%, var(--bg) 100%); }
.sf-shop-hero--img .sf-wrap { position: relative; z-index: 2; }
.sf-shop-hero--img .sf-shop-hero-title { text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 2px 30px rgba(0,0,0,0.85); }
.sf-shop-hero--img .sf-shop-hero-sub { text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 1px 16px rgba(0,0,0,0.9); }
/* Local darkening behind ONLY the eyebrow line so the small cyan caps hold
   contrast over the bright monitor wall, without dimming the rest of the image.
   A blurred pill pseudo-element: symmetric, soft-edged, glow-bleeding, and
   spanning the full text (including the leading "XS//"). */
.sf-shop-hero--img .sf-eyebrow { position: relative; display: inline-block; padding: 0.45rem 1.6rem; z-index: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.95); }
.sf-shop-hero--img .sf-eyebrow::before { content: ''; position: absolute; inset: -0.05rem -0.5rem; z-index: -1;
  background: rgba(7,5,16,0.84); border-radius: 999px; filter: blur(12px); }

/* ── credential explainer (how the QR works) ─────────────────── */
.sf-cx { background: var(--bg-copy); border-top: 1px solid var(--line); }
.sf-cx-top { display: grid; grid-template-columns: 210px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 760px) { .sf-cx-top { grid-template-columns: 1fr; gap: 2rem; } .sf-cx-top .sf-cx-product { order: 2; max-width: 210px; } }
.sf-cx-product { position: relative; width: 100%; max-width: 210px; margin: 0 auto; }
.sf-cx-product img { display: block; width: 100%; height: auto; border: 1px solid var(--frame-line); border-radius: var(--frame-radius); box-shadow: var(--frame-shadow); }
.sf-cx-annot { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sf-cx-circle { color: #ff2828; font-style: normal; }
.sf-cx-ast { color: var(--accent); font-weight: 600; }
.sf-cx-footnote { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-faint); }
.sf-cx-head { max-width: 62ch; margin: 0; }
.sf-cx-head .sf-display { margin: 0.5rem 0 1rem; }
.sf-cx-lede { font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); }
.sf-cx-lede em { color: var(--ink); font-style: italic; }
.sf-cx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 820px) { .sf-cx-steps { grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; } }
.sf-cx-step { position: relative; padding-top: 0.5rem; }
.sf-cx-num { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--accent); }
.sf-cx-h3 { font-family: var(--serif); font-weight: 360; font-size: 1.5rem; line-height: 1.1; margin: 0.4rem 0 0.7rem; color: var(--ink); }
.sf-cx-step p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.65; }
.sf-cx-step p strong { color: var(--ink); }
.sf-cx-scan { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.3rem; }
.sf-cx-qrmark { width: 84px; height: 84px; display: block; }
.sf-cx-cue { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent); font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }
.sf-cx-cue svg { width: 46px; height: 32px; overflow: visible; }
.sf-cx-types { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }
.sf-cx-types-intro { color: var(--ink-soft); font-size: 1rem; max-width: 60ch; margin: 0 0 1.6rem; }
.sf-cx-types-intro .sf-eyebrow { display: block; margin-bottom: 0.4rem; color: var(--ink-faint); }
.sf-cx-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 900px) { .sf-cx-types-grid { grid-template-columns: 1fr; max-width: 40rem; margin: 0 auto; } }
.sf-cx-type { margin: 0; }
.sf-cx-type-media { background: var(--frame-bg); border: 1px solid var(--frame-line); border-radius: var(--frame-radius); overflow: hidden; box-shadow: var(--frame-shadow); aspect-ratio: 4 / 3; cursor: zoom-in; transition: border-color 0.2s; }
.sf-cx-type-media:hover { border-color: var(--accent); }
.sf-reveal-media { cursor: zoom-in; }
/* fill the identical box so all three reveal screens are the same W×H (mild
   stretch is acceptable — the point is a uniform, aligned row) */
.sf-cx-type-media img { display: block; width: 100%; height: 100%; object-fit: fill; }
.sf-cx-type figcaption { display: block; margin-top: 0.9rem; }
.sf-cx-type-label { display: block; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; }
.sf-cx-type-body { display: block; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
.sf-cx-type[data-division="SI"] { --accent: #00f5ff; }
.sf-cx-type[data-division="CI"] { --accent: #C8A84B; }
.sf-cx-type[data-division="DI"] { --accent: #ff2828; }

/* ── 404 ─────────────────────────────────────────────────────── */
.sf-404 { min-height: 62vh; display: flex; align-items: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.sf-404-inner { max-width: 56ch; margin: 0 auto; text-align: center; }
.sf-404-inner .sf-display { margin: 0.6rem 0 1.1rem; }
.sf-404-sub { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.7; margin: 0 0 2rem; }
.sf-404-actions { display: flex; gap: 1.6rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.sf-404-btn { display: inline-flex; width: auto; padding: 1rem 2.1rem; }

.sf-shop-division { padding: clamp(3rem, 7vw, 6rem) 0; border-top: 1px solid var(--line); }
.sf-shop-division[data-division="SI"] { --accent: #00f5ff; }
.sf-shop-division[data-division="CI"] { --accent: #C8A84B; }
.sf-shop-division[data-division="DI"] { --accent: #ff2828; }
.sf-shop-division-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.sf-shop-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.sf-feature-card { display: grid; grid-template-rows: auto auto; background: var(--bg-raise); border: 1px solid var(--line); transition: transform 0.35s, border-color 0.35s; }
.sf-feature-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.sf-feature-media { aspect-ratio: 16 / 11; background: #08061199; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-feature-media img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; transform: scale(var(--media-zoom)); }
.sf-feature-copy { padding: 1.6rem 1.8rem 2rem; }
.sf-feature-name { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin: 0.5rem 0 0.6rem; color: var(--ink); }

/* ── division story band already styled; related/recent reuse .sf-grid ── */

/* ── footer ──────────────────────────────────────────────────── */
.sf-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 3rem; margin-top: 2rem; }
.sf-footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: space-between; }
.sf-footer-logo { font-family: var(--mono); font-weight: 900; font-size: 1.1rem; color: var(--ink); }
.sf-footer-logo span { color: var(--accent); }
.sf-footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sf-footer-links a { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.2s; }
.sf-footer-links a:hover { color: var(--accent); }
.sf-footer-copy { font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); width: 100%; }

/* ── reveal (progressive enhancement only) ───────────────────────
   Content is visible by default. Only when JS is running (.js on <html>)
   do sections start hidden and fade in — so nothing can ever be stuck
   invisible if JS is slow/absent or the observer never fires. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .sf-hero-frame img, .sf-card-media img { transition: none; } }

/* ── lightbox ────────────────────────────────────────────────── */
.sf-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(2,1,6,0.95); display: flex; align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out; }
.sf-lightbox[hidden] { display: none; }
.sf-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.sf-lb-close { position: fixed; top: 1.4rem; right: 1.6rem; background: none; border: none; color: var(--ink-soft); font-size: 1.4rem; cursor: pointer; }
.sf-lb-close:hover { color: var(--ink); }

/* ── text-first editorial block (no-photo fallback, never a placeholder) ── */
.sf-textfeature { position: relative; background: var(--bg-copy); overflow: hidden; }
.sf-textfeature::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(120deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 22px);
  mask-image: linear-gradient(90deg, #000, transparent 60%);
}
.sf-textfeature-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 62ch); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.sf-textfeature-right .sf-textfeature-inner { grid-template-columns: minmax(0, 62ch) auto; justify-content: space-between; }
.sf-textfeature-right .sf-textfeature-num { order: 2; }
.sf-textfeature-num {
  font-family: var(--serif); font-weight: 300; font-size: clamp(4.5rem, 13vw, 10rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 55%, transparent);
  text-stroke: 1px color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0.9; letter-spacing: -0.02em;
}
.sf-textfeature-body { font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.75; color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 720px) {
  .sf-textfeature-inner, .sf-textfeature-right .sf-textfeature-inner { grid-template-columns: 1fr; gap: 0.6rem; }
  .sf-textfeature-right .sf-textfeature-num { order: 0; }
  .sf-textfeature-num { font-size: clamp(3.5rem, 18vw, 5rem); }
}

/* ── story blocks ────────────────────────────────────────────── */
.sf-storyblocks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.6rem, 4vw, 3rem); }
.sf-storyblock { border-top: 1px solid var(--line-strong); padding-top: 1.2rem; }
.sf-storyblock-label { display: block; font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--ink); margin-bottom: 0.7rem; }
.sf-storyblock p { font-size: 0.98rem; line-height: 1.7; }

/* ── info cards (premium panels) ─────────────────────────────── */
.sf-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; }
.sf-info-card { border: 1px solid var(--line); background: var(--bg-raise); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 0.3s, transform 0.3s; }
.sf-info-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.sf-info-num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--accent); line-height: 1; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); }
.sf-info-title { font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.sf-info-sub { font-size: 0.8rem; color: var(--ink-faint); }

/* ── behind the design ───────────────────────────────────────── */
.sf-behind { background:
    radial-gradient(70% 120% at 80% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%); }
.sf-behind-inner { max-width: 760px; }
.sf-behind-body { font-family: var(--serif); font-weight: 320; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.5; color: var(--ink); margin-bottom: 1.4rem; }
.sf-behind-sign { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

/* ── family: HOME immersive full-bleed band ──────────────────── */
.sf-immersive { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: clamp(56vh, 66vh, 700px); overflow: hidden; display: flex; align-items: flex-end; }
.sf-immersive-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-immersive-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,3,16,0.9), rgba(5,3,16,0.1) 55%, transparent); }
.sf-immersive-overlay { position: relative; padding: clamp(2rem,6vw,5rem) var(--gutter); max-width: var(--maxw); margin: 0 auto; width: 100%; }
.sf-immersive-line { font-family: var(--serif); font-weight: 340; font-style: italic; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.15; color: var(--ink); max-width: 22ch; margin-top: 0.6rem; }

/* ── family: STATIONERY field-notes spread ───────────────────── */
.sf-fieldnotes { background: var(--bg-copy); }
.sf-fn-inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.sf-fn-media { aspect-ratio: 4/3; background: var(--bg-raise); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sf-fn-media img { width: 100%; height: 100%; object-fit: contain; padding: clamp(0.3rem,1vw,0.7rem); transform: scale(var(--media-zoom)); }
.sf-fn-body { margin-bottom: 1rem; max-width: 52ch; }
.sf-fn-annot { font-family: var(--label); font-size: 0.84rem; letter-spacing: 0.02em; color: var(--ink-faint); border-left: 1px solid var(--accent); padding-left: 1rem; }
@media (max-width: 760px) { .sf-fn-inner { grid-template-columns: 1fr; } }

/* ── family: DRINKWARE ritual band ───────────────────────────── */
.sf-ritual-inner { text-align: center; max-width: 820px; margin: 0 auto; }
.sf-ritual-line { font-family: var(--serif); font-style: italic; font-weight: 320; font-size: clamp(1.3rem,2.6vw,2rem); line-height: 1.4; color: var(--ink); margin: 0.6rem auto 2rem; max-width: 32ch; }
.sf-ritual-media { aspect-ratio: 16/10; max-width: 720px; margin: 0 auto; background: var(--bg-raise); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sf-ritual-media img { width: 100%; height: 100%; object-fit: contain; padding: clamp(0.4rem,1.2vw,1rem); transform: scale(var(--media-zoom)); }

/* ── family: APPAREL fit / issued-in band (real variant options) ─ */
.sf-fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.sf-fit-item { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.sf-fit-k { display: block; font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.5rem; }
.sf-fit-v { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); }

/* ── curated: Continue Your Investigation link band ──────────── */
.sf-investigations .sf-invlinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.sf-invlink { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.4rem; border: 1px solid var(--line); background: var(--bg-raise); transition: border-color 0.25s, transform 0.25s; }
.sf-invlink:hover { border-color: var(--accent); transform: translateY(-3px); }
.sf-invlink-label { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.sf-invlink-arrow { font-family: var(--mono); color: var(--accent); transition: transform 0.25s; }
.sf-invlink:hover .sf-invlink-arrow { transform: translateX(4px); }

/* ── per-family hero framing ─────────────────────────────────── */
.sf-family-home .sf-hero-frame { aspect-ratio: 4 / 3; }
.sf-family-drinkware .sf-hero-frame, .sf-family-stationery .sf-hero-frame { aspect-ratio: 1 / 1; }

/* ── admin copy preview ──────────────────────────────────────── */
.sf-admin-note { border: 1px solid var(--line-strong); background: var(--bg-raise); padding: 1rem 1.3rem; margin: 1.5rem 0 2.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.sf-admin-product { border: 1px solid var(--line); margin-bottom: 1.5rem; }
.sf-admin-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); background: var(--bg-raise); }
.sf-admin-name { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.sf-admin-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.sf-admin-tag { font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.6rem; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.sf-admin-tag.lvl-flagship { border-color: var(--accent); color: var(--accent); }
.sf-admin-tag.lvl-premium { color: var(--ink); }
.sf-admin-tag.status-reviewed { border-color: #5ad18a; color: #5ad18a; }
.sf-admin-tag.status-locked { border-color: #ffcf5a; color: #ffcf5a; }
.sf-admin-fields { display: grid; grid-template-columns: 160px 1fr; gap: 0; }
.sf-admin-field { display: contents; }
.sf-admin-k { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 0.7rem 1.3rem; border-bottom: 1px solid var(--line); }
.sf-admin-v { padding: 0.7rem 1.3rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 0.92rem; }
.sf-admin-v.warn { color: #ffcf5a; }

/* ── admin review board ──────────────────────────────────────── */
.sf-rv-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 1.8rem; }
.sf-rv-filter { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 1px solid var(--line-strong); padding: 0.5rem 0.9rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.sf-rv-filter:hover { color: var(--ink); }
.sf-rv-filter.active { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sf-rv-list { display: flex; flex-direction: column; gap: 0.6rem; }
.sf-rv-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; border: 1px solid var(--line); background: var(--bg-raise); padding: 1rem 1.3rem; }
.sf-rv-name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.sf-rv-star { color: var(--accent); }
.sf-rv-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.sf-rv-note { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; margin-top: 0.5rem; }
.sf-rv-side { text-align: right; flex-shrink: 0; }
.sf-rv-status { display: inline-block; font-family: var(--label); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.7rem; border: 1px solid; }
.status-not-reviewed { color: var(--ink-faint); border-color: var(--line-strong); }
.status-needs-revision { color: #ffb454; border-color: #ffb45455; }
.status-approved { color: #5ad18a; border-color: #5ad18a55; }
.status-ready { color: #00f5ff; border-color: #00f5ff55; }
.sf-rv-links { margin-top: 0.5rem; font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.08em; }
.sf-rv-links a { color: var(--accent); }
@media (max-width: 640px) { .sf-rv-row { flex-direction: column; align-items: flex-start; gap: 0.7rem; } .sf-rv-side { text-align: left; } }

/* ── header cart button ──────────────────────────────────────── */
.sf-cart-btn { position: relative; background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.4rem; transition: color 0.2s; }
.sf-cart-btn:hover { color: var(--accent); }
.sf-cart-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #050308; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ── cart drawer ─────────────────────────────────────────────── */
.sf-cart-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(2,1,6,0.6); opacity: 0; transition: opacity 0.3s; }
.sf-cart-backdrop.show { opacity: 1; }
.sf-cart {
  position: fixed; top: 0; right: 0; z-index: 401; height: 100%; width: min(440px, 100vw);
  background: #08060f; border-left: 1px solid var(--line-strong); transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.3,0.8,0.25,1); display: flex; flex-direction: column; outline: none;
}
.sf-cart.open { transform: translateX(0); box-shadow: -30px 0 80px rgba(0,0,0,0.5); }
.sf-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--gutter); border-bottom: 1px solid var(--line); }
.sf-cart-head .sf-eyebrow { margin: 0; }
.sf-cart-close { background: none; border: none; color: var(--ink-soft); font-size: 1.1rem; cursor: pointer; transition: color 0.2s; }
.sf-cart-close:hover { color: var(--ink); }
.sf-cart-items { flex: 1; overflow-y: auto; padding: 0.5rem var(--gutter); }
.sf-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; color: var(--ink-faint); text-align: center; padding: 2rem; }
.sf-cart-empty[hidden] { display: none; }
.sf-cart-empty-mark { font-family: var(--mono); font-size: 2rem; color: var(--accent); opacity: 0.7; }

.sf-cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 0.9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.sf-cart-line[data-division="SI"], .sf-cart-line[data-division="BI"] { --accent: #00f5ff; }
.sf-cart-line[data-division="CI"] { --accent: #C8A84B; }
.sf-cart-line[data-division="DI"] { --accent: #ff2828; }
.sf-cart-thumb { width: 64px; height: 64px; background: var(--bg-raise); border: 1px solid var(--line); display: block; }
.sf-cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.sf-cart-line-name { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); line-height: 1.2; }
.sf-cart-line-meta { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0.25rem 0 0.6rem; }
.sf-cart-line-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.sf-cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.sf-cart-qstep { width: 28px; height: 28px; background: none; border: none; color: var(--ink); cursor: pointer; font-size: 0.95rem; }
.sf-cart-qstep:hover { background: rgba(255,255,255,0.06); }
.sf-cart-qval { min-width: 26px; text-align: center; font-family: var(--mono); font-size: 0.78rem; }
.sf-cart-line-price { font-family: var(--mono); font-size: 0.85rem; color: var(--ink); }
.sf-cart-remove { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 0.8rem; padding: 2px; transition: color 0.2s; }
.sf-cart-remove:hover { color: var(--accent); }

.sf-cart-foot { padding: 1.3rem var(--gutter) 1.6rem; border-top: 1px solid var(--line-strong); background: #0a0713; }
.sf-cart-foot[hidden] { display: none; }
.sf-cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 0.6rem; }
.sf-cart-subtotal span:last-child { font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0; color: var(--ink); }
.sf-cart-note { font-size: 0.76rem; color: var(--ink-faint); margin-bottom: 1rem; }
.sf-cart-checkout { margin-bottom: 0.8rem; }
.sf-cart-actions { display: flex; gap: 0.8rem; }
.sf-cart-secondary { flex: 1; text-align: center; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.7rem 0.5rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.sf-cart-secondary:hover { border-color: var(--accent); color: var(--ink); }

/* ── toast ───────────────────────────────────────────────────── */
.sf-toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translate(-50%, 12px); z-index: 500; background: #0d0a17; border: 1px solid var(--accent); color: var(--ink); font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.7rem 1.2rem; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.sf-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── cart page ───────────────────────────────────────────────── */
.sf-cartpage { margin-top: 2rem; }
.sf-cartpage-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sf-cartpage-summary { border: 1px solid var(--line-strong); padding: 1.6rem; position: sticky; top: 88px; }
.sf-cartpage-summary .sf-cart-subtotal { font-size: 0.8rem; margin: 1rem 0 0.6rem; }
.sf-cartpage-summary .sf-buy-btn { margin: 0.6rem 0 0.8rem; }
.sf-cartpage-empty { margin-top: 2rem; }
.sf-inline-cta { display: inline-block; width: auto; margin-top: 1rem; }
@media (max-width: 760px) { .sf-cartpage-grid { grid-template-columns: 1fr; } .sf-cartpage-summary { position: static; } }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sf-hero { grid-template-columns: 1fr; }
  .sf-hero-media { position: static; }
  .sf-split, .sf-specs-grid, .sf-shop-feature { grid-template-columns: 1fr; }
  .sf-split-rev .sf-split-media { order: 0; }
  .sf-split-media { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  body.sf-body { font-size: 16px; }
  .sf-hero-frame { aspect-ratio: 1; }
  .sf-variant { flex: 1; min-width: 0; }
}