/* 098 Storefront v2 "The Case" — generated pages (card page first).
   Direction A "Holo Vault", approved by Walker 2026-09-30. Dark, image-first,
   refractor foil on card photos, photos never cropped.
   Rules this file keeps (098 checklist): no external origins (fonts are
   self-hosted in step 5; until then the stacks fall back to local faces),
   44px tap targets, >=16px body text, nothing below 12px, no horizontal
   scroll, [hidden] always wins, every class prefixed sf- so nothing collides
   with styles.css. */
:root {
  --sf-void: #05070a; --sf-panel: #0d1117; --sf-panel2: #121821; --sf-line: rgba(255, 255, 255, .1);
  --sf-ink: #f4f6fa; --sf-dim: #9aa5b3; --sf-gold: #ffd36e; --sf-cyan: #7cf7ff; --sf-violet: #b58cff; --sf-pink: #ff7ad9;
  --sf-holo: linear-gradient(100deg, #7cf7ff 0%, #b58cff 35%, #ff7ad9 65%, #ffd36e 100%);
  /* the "SF ... Fallback" faces are defined in sf-fonts.css (step 5) with
     metrics matched to the real font, so the swap does not move anything */
  --sf-display: "Big Shoulders Display", "SF Display Fallback", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", "sans-serif-condensed", Impact, sans-serif;
  --sf-body: "Barlow", "SF Body Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sf-mono: "JetBrains Mono", "SF Mono Fallback", ui-monospace, "SF Mono", Consolas, monospace;
  --sf-r: 16px;
  --sf-bar: 73px; /* the fixed buy bar on a phone: 1px border + 10px + 52px button + 10px (plus the safe-area inset) */
  color-scheme: dark;
}
.sf [hidden] { display: none !important; }
.sf, .sf * { box-sizing: border-box; }
html:has(body.sf) { -webkit-text-size-adjust: 100%; background: var(--sf-void); }
body.sf { margin: 0; background: var(--sf-void); color: var(--sf-ink); font: 400 16px/1.45 var(--sf-body); overflow-x: hidden; }
.sf img { display: block; max-width: 100%; }
.sf a { color: inherit; }
.sf button { font: inherit; color: inherit; cursor: pointer; }
.sf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf :focus-visible { outline: 2px solid var(--sf-cyan); outline-offset: 2px; }
.sf-jsonly { display: none !important; }
.sf-js .sf-jsonly { display: flex !important; }
.sf-js .sf-zoomhint.sf-jsonly { display: inline-flex !important; }

/* header */
.sf-top { position: sticky; top: 0; z-index: 30; background: rgba(5, 7, 10, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sf-line); padding-top: env(safe-area-inset-top, 0px); }
.sf-top-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px; max-width: 1180px; margin: 0 auto; }
.sf-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.sf-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--sf-holo); display: grid; place-items: center; color: #05070a; font: 900 20px/1 var(--sf-display); }
.sf-word { font: 800 15px/0.95 var(--sf-display); letter-spacing: .08em; text-transform: uppercase; }
.sf-word i { display: block; font-style: normal; color: var(--sf-dim); font-size: 12px; letter-spacing: .16em; }
.sf-search { flex: 1; min-width: 0; position: relative; margin: 0; }
.sf-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--sf-dim); pointer-events: none; }
.sf-search input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .06); color: var(--sf-ink); border-radius: 999px; padding: 0 14px 0 38px; font: 500 16px var(--sf-body); -webkit-appearance: none; appearance: none; }
.sf-search input::placeholder { color: var(--sf-dim); }
.sf-icon { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .05); display: grid; place-items: center; text-decoration: none; color: var(--sf-ink); }
.sf-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--sf-holo); color: #05070a; font: 700 12px/20px var(--sf-mono); text-align: center; box-shadow: 0 0 0 2px var(--sf-void); }
/* 180: the strip is a 44px row (the eBay link is a 44px target); on a phone it WRAPS onto a second
   line instead of hiding items, so all five show with the desktop wording */
.sf-proof { display: flex; align-items: center; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; min-height: 44px; font-size: .88rem; color: var(--sf-dim); white-space: nowrap; max-width: 1180px; margin: 0 auto; }
.sf-proof::-webkit-scrollbar { display: none; }
.sf-proof a, .sf-proof span { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.sf-proof a { min-height: 44px; }
.sf-proof b { color: var(--sf-ink); }
.sf-star svg { width: 14px; height: 14px; fill: var(--sf-gold); stroke: none; }
/* the free-shipping line (the home page paints it into .shipping-bar; the card page prints .sf-fs) is
   left out only where one line cannot hold it: 561-1000 px */
@media (min-width: 561px) and (max-width: 1000px) { .sf-proof .shipping-bar, .sf-proof .sf-fs { display: none !important; } }
/* phones: two lines, every item kept. min-height holds the second line before the home page's script
   paints the shipping line into it (no layout shift); the eBay link keeps a 44px hit area without
   making the line taller (padding out, margin back in) */
@media (max-width: 560px) {
  .sf-proof { flex-wrap: wrap; overflow: visible; gap: 0 12px; padding: 6px 12px 7px; min-height: calc(2.9em + 13px); font-size: .78rem; }
  .sf-proof a { min-height: 0; padding: 13px 0; margin: -13px 0; }
}
@media (max-width: 340px) { .sf-proof { gap: 0 9px; font-size: .75rem; } }
.sf-brand { min-height: 44px; }
/* Contact (storefront_v2.contact_link_html, one markup on every header): a 44x44 envelope (the words stay for screen
   readers); icon + "Contact us" from 900px on the card and hub headers. 179 + 180 at merge: that rule is scoped away
   from the home header (.sf-shop-top), whose icon buttons are 44x44 at every width and were measured that way. */
.sf-ct { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) {
  .sf-top:not(.sf-shop-top) .sf-contact { width: auto; min-width: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font: 600 .92rem/1 var(--sf-body); }
  .sf-top:not(.sf-shop-top) .sf-ct { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
@media (max-width: 560px) {
  .sf-word { display: none; }
  .sf-mark { width: 44px; height: 44px; }
  .sf-top-row { gap: 6px; padding-inline: 12px; }
  .sf-search input { padding-left: 34px; padding-right: 8px; }
  .sf-search svg { left: 11px; }
}
@media (max-width: 380px) { .sf-top-row { gap: 4px; padding-inline: 8px; } }

/* card photo: whole photo over a blurred copy of itself, never cropped */
.sf-pic { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #141414; }
.sf-pic-bg { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; max-width: none !important; object-fit: cover; filter: blur(18px) brightness(.5) saturate(1.1); }
.sf-pic-fg { position: relative; width: 100%; height: 100%; object-fit: contain; }
/* 181: a photo with AVIF/WebP widths sits in a <picture>; it adds no box of its own (sf-shop.css says the same for the home hero) */
.sf-pic > picture { display: contents; }
.sf-nophoto { display: grid; place-items: center; color: var(--sf-dim); font-size: .9rem; }

/* holo foil (driven by sf-card.js; static sheen without it) */
.sf-holo { position: relative; isolation: isolate; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.sf-holo.is-tilting { transition: transform .08s linear; }
.sf-holo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .5;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .45), transparent 42%),
    linear-gradient(115deg, transparent 18%, rgba(255, 60, 200, .34) 34%, rgba(60, 230, 255, .34) 46%, rgba(255, 225, 60, .34) 58%, transparent 74%);
  background-size: 100% 100%, 260% 260%; background-position: center, var(--mx, 50%) var(--my, 50%);
  animation: sf-sheen 7s ease-in-out infinite; }
.sf-holo.is-tilting::after { animation: none; opacity: .75; }
@keyframes sf-sheen { 0%, 100% { background-position: center, 0% 0%; } 50% { background-position: center, 100% 100%; } }

/* layout */
.sf-main { max-width: 1180px; margin: 0 auto; padding-bottom: 12px; }
.sf-crumbs { padding: 12px 16px 4px; font-size: .88rem; color: var(--sf-dim); overflow-wrap: anywhere; }
/* 180: a crumb is a 44px-tall target (padding out, margin back in, so the row is not taller) */
.sf-crumbs a { text-decoration: none; display: inline-block; line-height: 16px; padding: 14px 8px; margin: -14px -8px; }
.sf-crumbs a:hover { text-decoration: underline; }
.sf-cols { display: grid; gap: 4px; }
.sf-stage { position: relative; padding: 14px 16px 6px; background: radial-gradient(70% 60% at 50% 40%, rgba(181, 140, 255, .22), transparent 70%), radial-gradient(40% 40% at 50% 90%, rgba(124, 247, 255, .12), transparent 70%); }
.sf-frame { display: block; width: min(80vw, 420px); margin: 0 auto; padding: 0; border: 0; background: none; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); }
button.sf-frame { cursor: zoom-in; }
.sf-frame .sf-pic { max-height: 64vh; }
/* 181 (at merge): the hint and the "Make offer" button are the two things that moved when Barlow replaced its fallback
   after a first paint that now beats the font files (CLS 0.0002): each reserves the width it has in Barlow (em of its own
   font size, so the box is the same in either face), centred, and nothing around them moves. */
.sf-zoomhint { position: absolute; right: 10px; bottom: 10px; z-index: 3; align-items: center; justify-content: center; gap: 6px; min-width: 9em; background: rgba(5, 7, 10, .75); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 7px 11px; font: 600 .8rem var(--sf-body); }
.sf-zoomhint svg { width: 14px; height: 14px; }
.sf-floor { width: min(70vw, 380px); height: 24px; margin: 12px auto 0; background: radial-gradient(50% 50% at 50% 50%, rgba(181, 140, 255, .5), transparent 70%); filter: blur(8px); }
.sf-detail { padding: 8px 16px 0; min-width: 0; }
.sf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-tag { font: 700 .76rem/1 var(--sf-mono); letter-spacing: .04em; padding: 6px 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
.sf-hot { color: #ffb38a; }
.sf-h1 { margin: 10px 0 0; font-weight: 400; }
.sf-name { display: block; font: 900 clamp(2.6rem, 13vw, 4.2rem)/0.9 var(--sf-display); text-transform: uppercase; letter-spacing: .005em; overflow-wrap: anywhere; }
.sf-sub { display: block; margin-top: 8px; color: var(--sf-dim); font: 500 1rem/1.35 var(--sf-body); text-transform: none; }
.sf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
@media (min-width: 480px) { .sf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sf-stat { border-radius: 12px; padding: 11px 12px 9px; background: linear-gradient(var(--sf-panel2), var(--sf-panel2)) padding-box, var(--sf-holo) border-box; border: 1.5px solid transparent; min-width: 0; }
.sf-stat b { display: block; font: 900 1.55rem/1 var(--sf-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-stat span { font: 600 .75rem/1 var(--sf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sf-dim); }
.sf-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 16px 0 4px; }
.sf-price strong { font: 700 2.6rem/1 var(--sf-mono); color: var(--sf-gold); letter-spacing: -.03em; }
.sf-was { color: var(--sf-dim); font: 500 1.1rem var(--sf-mono); }
.sf-obo { color: var(--sf-dim); }
.sf-ship { color: var(--sf-dim); margin: 4px 0 16px; }
.sf-ship b { color: var(--sf-ink); }
.sf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-actions.sf-small { margin-top: 10px; }
.sf-btn { border: 0; border-radius: 12px; background: var(--sf-holo); color: #05070a; font: 800 1.05rem/1 var(--sf-body); min-height: 52px; padding: 0 22px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 30px -8px rgba(181, 140, 255, .6); transition: transform .12s; }
.sf-btn:active { transform: scale(.97); }
.sf-btn.sf-grow { flex: 1 1 150px; }
.sf-btn.sf-ghost { background: rgba(255, 255, 255, .07); color: var(--sf-ink); border: 1px solid var(--sf-line); box-shadow: none; }
.sf-btn[data-offer] { min-width: 6.7em; justify-content: center; }      /* 181 at merge: "Make offer" is as wide before the font as after */
.sf-btn.sf-full { width: 100%; }
.sf-btn.is-in { background: #152029; color: var(--sf-ink); box-shadow: inset 0 0 0 1.5px var(--sf-cyan); }
/* 153 (audit F10): `.sf a` and `.sf button` (0,1,1) out-rank `.sf-btn` (0,1,0), so the
   hero "Shop the case" and every "Add to cart" drew near-white, weight-400 text on the
   holo gradient (about 1.2:1). The button's own text is restated where it wins. */
.sf a.sf-btn, .sf button.sf-btn { color: #05070a; font: 800 1.05rem/1 var(--sf-body); }
.sf a.sf-btn.sf-ghost, .sf button.sf-btn.sf-ghost, .sf a.sf-btn.is-in, .sf button.sf-btn.is-in { color: var(--sf-ink); }
.sf-pill { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .04); font: 600 .95rem var(--sf-body); }
.sf-pill svg { width: 18px; height: 18px; }
.sf-pill[aria-pressed="true"] { color: var(--sf-pink); border-color: rgba(255, 122, 217, .5); }
.sf-pill[aria-pressed="true"] svg { fill: currentColor; }
.sf-assure { display: grid; gap: 10px; margin: 18px 0; }
.sf-assure > * { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.sf-assure > a { min-height: 44px; }
.sf-assure i { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(124, 247, 255, .12); color: var(--sf-cyan); }
.sf-assure i svg { width: 16px; height: 16px; }
.sf-assure a i svg { fill: var(--sf-gold); stroke: none; }
.sf-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sf-line); border-radius: var(--sf-r); overflow: hidden; margin: 16px 0; border: 1px solid var(--sf-line); }
.sf-facts div { background: var(--sf-panel); padding: 12px 14px; min-width: 0; }
.sf-facts dt { font: 600 .75rem/1 var(--sf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sf-dim); }
.sf-facts dd { margin: 6px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.sf-more { border: 1px solid var(--sf-line); border-radius: 14px; padding: 0 14px; }
.sf-more summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--sf-dim); }
.sf-more p { margin: 0 0 14px; overflow-wrap: anywhere; }
.sf-skutxt { color: var(--sf-dim); font: .85rem var(--sf-mono); }

/* rails */
.sf-sec { padding-top: 28px; }
.sf-sec h2 { margin: 0 16px 12px; font: 900 2rem/0.95 var(--sf-display); text-transform: uppercase; }
.sf-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; padding: 4px 16px 10px; scrollbar-width: none; }
.sf-rail::-webkit-scrollbar { display: none; }
.sf-tile { flex: none; width: 164px; scroll-snap-align: start; text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-tph { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--sf-line); }
.sf-tn { font: 800 1.2rem/1 var(--sf-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.sf-ts { color: var(--sf-dim); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tp { font: 700 1.05rem var(--sf-mono); color: var(--sf-gold); }

/* footer */
.sf-foot { margin-top: 40px; padding: 26px 16px calc(var(--sf-bar) + 37px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sf-line); color: var(--sf-dim); font-size: .9rem; }
.sf-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto 18px; }
.sf-fgrid a { display: block; padding: 10px 0; text-decoration: none; color: var(--sf-ink); min-height: 44px; }
.sf-fh { display: block; font: 600 .75rem/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-dim); margin-bottom: 4px; }
.sf-findus, .sf-copy { text-align: center; margin: 8px 0; }
.sf-findus a { color: var(--sf-ink); display: inline-block; padding: 12px 4px; }

/* sticky buy bar (phones) */
/* 180 (visual #7): the page reserves the bar's height (the footer's bottom padding and scroll-padding both
   read --sf-bar), so a row scrolled to - the YEAR stat - stops above the bar, never behind it */
@media (max-width: 959px) { html:has(body.sf-cardpage) { scroll-padding-bottom: calc(var(--sf-bar) + 12px + env(safe-area-inset-bottom, 0px)); } }
.sf-buybar { min-height: calc(var(--sf-bar) + env(safe-area-inset-bottom, 0px)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(5, 7, 10, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--sf-line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; }
.sf-bbp { font: 700 1.25rem var(--sf-mono); color: var(--sf-gold); flex: none; }
.sf-buybar .sf-btn { flex: 1; padding: 0 14px; }
.sf-buybar .sf-btn.sf-ghost { flex: none; }

/* overlays */
.sf-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .65); }
.sf-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--sf-panel); border-top: 1px solid var(--sf-line); border-radius: 22px 22px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; overflow-y: auto; }
@media (min-width: 760px) { .sf-sheet { left: 50%; right: auto; width: 520px; margin-left: -260px; bottom: 24px; border-radius: 22px; border: 1px solid var(--sf-line); } }
.sf-sh-h { display: flex; justify-content: space-between; align-items: center; }
.sf-sh-h h2 { margin: 0; font: 900 2rem/1 var(--sf-display); text-transform: uppercase; }
.sf-oc { color: var(--sf-dim); margin: 8px 0 14px; }
.sf-oc b { color: var(--sf-gold); font-family: var(--sf-mono); }
#sfOfferForm { display: grid; gap: 12px; }
.sf-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .05); font: 700 1rem var(--sf-mono); }
.sf-fld { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; color: var(--sf-dim); }
.sf-fld input { min-height: 48px; border-radius: 12px; border: 1px solid var(--sf-line); background: var(--sf-void); color: var(--sf-ink); padding: 0 12px; font: 500 16px var(--sf-body); width: 100%; }
.sf-msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 110, 110, .14); color: #ffb8b8; }
.sf-msg.ok { background: rgba(124, 247, 255, .1); color: var(--sf-cyan); }
.sf-fine { margin: 0; color: var(--sf-dim); font-size: .86rem; text-align: center; }
.sf-final { color: var(--sf-ink); text-align: left; }
/* 205: the shop address in the offer dialog, as text to select with a Copy button, before the email app opens */
.sf-mailbox { display: grid; gap: 8px; }
.sf-mailbox .sf-fine { text-align: left; }
.sf-addrrow { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-addr { flex: 1 1 12em; min-width: 0; font: 600 .95rem var(--sf-mono); color: var(--sf-ink); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.sf-copy { flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .07); font: 700 .95rem var(--sf-body); }
.sf-copied { color: var(--sf-cyan); }
.sf-lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .95); display: flex; flex-direction: column; }
.sf-lbx { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; }
.sf-lbwrap { flex: 1; overflow: hidden; display: grid; place-items: center; cursor: zoom-in; }
.sf-lbwrap img { max-width: 100%; max-height: 86vh; height: auto; object-fit: contain; }
.sf-lbwrap.is-z { overflow: auto; display: block; cursor: zoom-out; }
.sf-lbwrap.is-z img { max-width: none; max-height: none; width: 230%; }
.sf-lbhint { text-align: center; color: var(--sf-dim); font-size: .88rem; margin: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
.sf-toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 100; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); margin: 0; background: #1b2330; color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: .95rem; }
.sf-flyer { position: fixed; z-index: 200; object-fit: contain; border-radius: 10px; pointer-events: none; }
body.sf-locked { overflow: hidden; }

@media (min-width: 960px) {
  .sf-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 0 16px; }
  .sf-stage { border-radius: 24px; position: sticky; top: 112px; }
  .sf-detail { padding-top: 14px; }
  .sf-buybar { display: none; }
  .sf-tile { width: 200px; }
  .sf-foot { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-holo { transform: none !important; transition: none; }
  .sf-holo::after { animation: none; opacity: .3; }
  .sf-btn { transition: none; }
}