/* 098 Storefront v2 — the shop page (index.v2.template.html + app.js).
   Loaded AFTER styles.css and sf.css. Step 2: the palette switch (the legacy
   stylesheet is variable-driven, so re-pointing its variables themes every
   view at once), the header, the browse chips, search suggestions, the cart
   and the sign-in / card modals. Steps 3–4 restyle the home and results. */
body.sf-shop {
  --green: #b58cff; --green-dark: #9a73ea; --green-light: #7cf7ff;
  --cream: #05070a; --sand: #121821; --sand-deep: rgba(255, 255, 255, .16);
  --orange: #ffd36e; --orange-deep: #ffd36e; --red: #ff8a80;
  --ink: #f4f6fa; --ink-dim: #9aa5b3; --white: #0d1117; --line: rgba(255, 255, 255, .1);
  background: var(--sf-void); color: var(--sf-ink); font-family: var(--sf-body);
}
.sf-shop input, .sf-shop select, .sf-shop textarea { color: var(--sf-ink); }
.sf-shop ::placeholder { color: var(--sf-dim); }

/* ---- header: neutralise the legacy header rules, keep sf.css's ---- */
.sf-shop .sf-top { border-bottom: 1px solid var(--sf-line); }
.sf-shop .sf-search.header-search { display: block; justify-content: normal; }
.sf-shop .sf-search input { width: 100%; max-width: none; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .06); border-radius: 999px; font-size: 16px; }
.sf-shop .sf-search input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--sf-violet), 0 0 22px rgba(181, 140, 255, .35); }
/* 179 (visual #8): with the Contact icon the header holds five 44 px boxes on a phone, so the search field is about
   115 px wide at 375: a tighter row, and a placeholder small enough to show whole ("Search"; the field itself stays
   16 px, so a phone does not zoom in on focus) */
@media (max-width: 440px) {
  .sf-shop .sf-top-row { gap: 4px; padding-inline: 10px; }
  .sf-shop .sf-search input { padding-left: 32px; padding-right: 6px; }
  .sf-shop .sf-search input::placeholder { font-size: 14px; }
  .sf-shop .sf-search svg { left: 10px; width: 16px; height: 16px; }
}
.sf-shop .sf-icon.hdr-btn, .sf-shop .sf-icon.hdr-signin { padding: 0; font-size: 0; }
.sf-shop .sf-icon.hdr-btn:hover, .sf-shop .sf-icon.hdr-signin:hover, .sf-shop .sf-icon.sf-contact:hover { background: rgba(255, 255, 255, .1); }
.sf-shop .hdr-signin.is-in { border-color: rgba(124, 247, 255, .6); color: var(--sf-cyan); }
.sf-shop .sf-badge.hdr-count { 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); }
.sf-shop .sf-badge.hdr-count:empty { display: none; }
.sf-shop .sf-proof .shipping-bar { background: none; color: var(--sf-dim); padding: 0; font-size: inherit; letter-spacing: 0; text-align: left; display: inline-flex; }
.sf-shop .sf-proof .shipping-bar[hidden] { display: none; }

/* ---- browse chips (sportMenu / gradedMenu / attrMenu live inside) ---- */
.sf-shop .sf-chiprow.main-nav { background: none; border: 0; }
.sf-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 12px; max-width: 1180px; margin: 0 auto; scroll-padding-inline: 16px; }
.sf-chips::-webkit-scrollbar { display: none; }
.sf-shop .sf-chipgroup.drop-menu { display: contents; position: static; box-shadow: none; border: 0; background: none; min-width: 0; padding: 0; }
.sf-shop .sf-chip, .sf-shop .sf-chipgroup.drop-menu button {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sf-line);
  background: rgba(255, 255, 255, .05); color: var(--sf-ink); font: 600 .95rem var(--sf-body); white-space: nowrap; width: auto; text-align: center; }
.sf-shop .sf-chip:hover, .sf-shop .sf-chipgroup.drop-menu button:hover { border-color: rgba(181, 140, 255, .6); background: rgba(181, 140, 255, .12); color: var(--sf-ink); font-weight: 600; }
.sf-shop .sf-chip[data-nav="new"] { border-color: rgba(124, 247, 255, .5); }
.sf-shop .sf-chip[data-nav="deals"] { border-color: rgba(255, 211, 110, .5); }

/* ---- search suggestions (assets/sf-shop.js) ---- */
.sf-suggest { position: absolute; left: 0; right: -100px; top: calc(100% + 8px); z-index: 60; background: var(--sf-panel2); border: 1px solid var(--sf-line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); max-height: 70vh; overflow-y: auto; }
@media (max-width: 520px) { .sf-suggest { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 66px); } }
.sf-suggest .sf-lab { font: 600 .75rem/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-dim); padding: 14px 14px 6px; }
.sf-suggest .sf-pops { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 14px; }
.sf-suggest .sf-sg { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; min-height: 52px; text-decoration: none; border: 0; border-top: 1px solid var(--sf-line); background: none; color: var(--sf-ink); text-align: left; font: inherit; }
.sf-suggest .sf-sg:hover, .sf-suggest .sf-sg.is-active { background: rgba(181, 140, 255, .12); }
.sf-suggest .sf-sgn { flex: 1; min-width: 0; }
.sf-suggest .sf-sgn b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-suggest .sf-sgn small { display: block; color: var(--sf-dim); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-suggest .sf-sgc { color: var(--sf-dim); font: .82rem var(--sf-mono); flex: none; }
.sf-suggest .sf-sgp { color: var(--sf-gold); font: 700 .95rem var(--sf-mono); flex: none; }
.sf-suggest .sf-sgt { width: 34px; flex: none; border-radius: 4px; overflow: hidden; }
.sf-suggest .sf-all { display: block; padding: 14px; text-align: center; font-weight: 700; color: var(--sf-cyan); border-top: 1px solid var(--sf-line); text-decoration: none; }

/* ---- buttons and prices everywhere in the shop ---- */
.sf-shop .btn-buy { background: var(--sf-holo); color: #05070a; border: 0; border-radius: 12px; font-weight: 800; min-height: 48px; box-shadow: 0 10px 30px -8px rgba(181, 140, 255, .6); }
.sf-shop .btn-buy:hover { filter: brightness(1.05); }
.sf-shop .btn-buy:disabled { background: #2a3140; color: var(--sf-dim); box-shadow: none; }
.sf-shop .btn-ghost, .sf-shop .btn-offer { background: rgba(255, 255, 255, .06); color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: 12px; }
.sf-shop .card-price .amt, .sf-shop .cart-price, .sf-shop .modal-price { color: var(--sf-gold); font-family: var(--sf-mono); }

/* ---- cart (the existing checkout form, restyled only) ---- */
.sf-shop #cartView .browse-head h1, .sf-shop #cartView .browse-head h2 { font: 900 2.4rem/1 var(--sf-display); text-transform: uppercase; color: var(--sf-ink); }
.sf-shop .cart-list { background: var(--sf-panel); border-color: var(--sf-line); border-radius: 16px; }
.sf-shop .cart-row { border-bottom-color: var(--sf-line); }
.sf-shop .cart-thumb img { border-radius: 6px; }
.sf-shop .cart-title { color: var(--sf-ink); }
.sf-shop .cart-remove { min-width: 44px; min-height: 44px; border-radius: 12px; color: var(--sf-dim); }
.sf-shop .cart-remove:hover { background: rgba(255, 255, 255, .06); color: var(--red); }
.sf-shop .order-summary, .sf-shop .checkout-form { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 16px; padding: 16px; }
.sf-shop .order-summary { margin-bottom: 14px; }
.sf-shop .sum-row { color: var(--sf-ink); }
.sf-shop .sum-row span:last-child { font-family: var(--sf-mono); }
.sf-shop .sum-total { border-top: 1px solid var(--sf-line); }
.sf-shop .cart-nudge { color: var(--sf-gold); }
.sf-freebar { height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sf-freebar span { display: block; height: 100%; background: var(--sf-holo); border-radius: inherit; }
.sf-shop .ship-pick { border-color: var(--sf-line); }
.sf-shop .ship-pick.free { color: var(--sf-cyan); }
.sf-shop .ship-opt { background: var(--sf-void); border: 1px solid var(--sf-line); border-radius: 14px; }
.sf-shop .ship-opt:has(input:checked) { background: rgba(181, 140, 255, .1); border-color: var(--sf-violet); }
.sf-shop .ship-opt input { accent-color: #b58cff; width: 20px; height: 20px; }
.sf-shop .ship-waiver { color: var(--sf-gold); }
.sf-shop .ship-extra { color: var(--sf-dim); }
.sf-shop .co-head { color: var(--sf-ink); font: 900 1.4rem/1 var(--sf-display); text-transform: uppercase; letter-spacing: .02em; }
.sf-shop .co-field { color: var(--sf-dim); font-size: .88rem; }
.sf-shop .co-field input, .sf-shop .co-field select { min-height: 48px; border-radius: 12px; border: 1px solid var(--sf-line); background: var(--sf-void); color: var(--sf-ink); font-size: 16px; }
.sf-shop .co-field input:focus, .sf-shop .co-field select:focus { outline: none; border-color: var(--sf-violet); box-shadow: 0 0 0 3px rgba(181, 140, 255, .25); }
.sf-shop .co-err { color: #ffb8b8; }
.sf-shop .offer-note { color: var(--sf-dim); }
.sf-shop .cart-notice { background: rgba(124, 247, 255, .08); border-color: rgba(124, 247, 255, .3); color: var(--sf-ink); }

/* ---- modals ---- */
.sf-shop .modal-backdrop { background: rgba(0, 0, 0, .72); }
.sf-shop .modal { background: var(--sf-panel); color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: 22px; }
.sf-shop .modal-close { color: var(--sf-ink); min-width: 44px; min-height: 44px; }
.sf-shop .modal-img { background: #141414; border-radius: 14px; }
.sf-shop .signin-modal h2 { font: 900 2rem/1 var(--sf-display); text-transform: uppercase; }
.sf-shop .signin-modal input, .sf-shop .offer-form input { min-height: 48px; border-radius: 12px; border: 1px solid var(--sf-line); background: var(--sf-void); color: var(--sf-ink); font-size: 16px; }

/* ---- footer ---- */
.sf-shop .site-footer { background: var(--sf-void); color: var(--sf-dim); border-top: 1px solid var(--sf-line); }
.sf-shop .site-footer h3 { color: var(--sf-ink); font: 600 .75rem/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; }
.sf-shop .site-footer a, .sf-shop .site-footer button { color: var(--sf-ink); min-height: 44px; display: flex; align-items: center; }
.sf-shop .footer-base { color: var(--sf-dim); border-top-color: var(--sf-line); }
.sf-shop .footer-logo { background: none; }

/* ======================================================= step 3: home ===
   Hero + reel + ticker + popular + lanes (rendered by sf-shop.js into the
   template containers), then the shop rows restyled as dark rails. */
.sf-shop .signup-strip { display: none; }   /* placeholder form, never sent (audit) */
.sf-hero { max-width: 1180px; margin: 0 auto; padding: 24px 0 6px; }
.sf-eyebrow { margin: 0 16px 10px; font: 600 .78rem/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-cyan); display: flex; align-items: center; gap: 8px; }
.sf-live { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-cyan); box-shadow: 0 0 0 0 rgba(124, 247, 255, .6); animation: sf-pulse 1.8s infinite; }
@keyframes sf-pulse { 70% { box-shadow: 0 0 0 8px rgba(124, 247, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 247, 255, 0); } }
/* 179 (agentic P2-0): two lines, "BUY" over "SOMETHING RARE.", at every width and in either font. The line scales with the
   viewport (12.5vw) and fits with the real display font at any width, but its fallback is wider, and it used to wrap into
   a third line until the font arrived: everything below the headline, the reel included, then moved up 47 px (CLS 0.196
   on a cold load). Nowrap keeps the fallback on its line. At merge: the general display fallback (Arial at 86.41%) is
   still 24% wider than Big Shoulders 900 for these upper-case words, so the nowrap line was clipped at the right edge
   from 320 to 412 px for the second the swap takes; the headline now names its own fallback face, "SF Headline Fallback"
   (fonts.json: Arial Bold at 69.9%, the measured width of "SOMETHING RARE." in Big Shoulders Display 900 over Arial Bold),
   so the fallback line is as wide as the real one. The rest of the stack is --sf-display's. Line box unchanged (.9). */
.sf-hero-h { margin: 0 16px; font: 900 clamp(2.5rem, 12.5vw, 7.2rem)/.9 "Big Shoulders Display", "SF Headline Fallback", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", "sans-serif-condensed", Impact, sans-serif; white-space: nowrap; text-transform: uppercase; letter-spacing: -.005em; color: var(--sf-ink); }
/* 179 (H5): who the shop is: one sentence from config/site_pages/about.md, under the reel, with a link to /about */
.sf-about { max-width: 62ch; margin: 4px 16px 0; color: var(--sf-dim); font-size: .95rem; line-height: 1.5; }
.sf-about a { color: var(--sf-cyan); font-weight: 700; white-space: nowrap; }
/* 179 (agentic P2-1): a label every field has, for readers and agents; the placeholder and aria-label stay */
.sf-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sf-holo-text { background: var(--sf-holo); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sf-holo-shift 6s ease-in-out infinite; }
@keyframes sf-holo-shift { 50% { background-position: 100% 0; } }
.sf-hero-sub { margin: 14px 16px 0; color: var(--sf-dim); font-size: 1.1rem; }
.sf-hcta { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 16px 0; }
/* 179 (agentic P2-0): the two buttons are as wide before the web font arrives as after (the first one's text used to
   change width a little and nudge the second: CLS 0.0003 on every early paint). On a phone they share the row;
   from 561 px each is a fixed 10.5rem. */
.sf-hcta .sf-btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; white-space: nowrap; }
@media (min-width: 561px) { .sf-hcta .sf-btn { flex: 0 0 auto; min-width: 10.5rem; padding-inline: 22px; } }
/* 179 (agentic P2-0, mobile cold CLS 0.196): the reel's box is the same height before and after the web fonts
   arrive. The card is 3:4 (the photo) plus a caption of fixed lines, and the caption can no longer wrap
   (below), so the box is known from the first paint: min-height = padding + 3:4 photo + caption. */
.sf-reel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 16px 26px; scrollbar-width: none;
  contain: layout; min-height: calc(52px + min(68vw, 290px) * 4 / 3 + var(--sf-cap-h)); }
.sf-reel::-webkit-scrollbar { display: none; }
.sf-reel:empty { display: none; }
.sf-feat { flex: none; width: min(68vw, 290px); scroll-snap-align: center; text-decoration: none; position: relative; color: var(--sf-ink); }
.sf-fframe { display: block; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
/* 172: the hero photo is a <picture> (AVIF/WebP/JPEG); it adds no box of its own */
.sf-pic > picture { display: contents; }
.sf-glow { position: absolute; inset: 8% 6% 22%; z-index: -1; filter: blur(34px); opacity: .45; background: var(--sf-holo); border-radius: 30px; }
/* 179 (visual #4): the price chip and the flag sit on the photo's LOWER edge, side by side. At the top they covered the
   slab label ("2004 ULTRA WNBA ... DIANA TAURASI") and the slab's top edge. The photo is object-fit: contain, so the
   lower edge of the frame is the lower edge of the slab. */
.sf-px { position: absolute; bottom: 12px; right: 12px; z-index: 3; background: var(--sf-ink); color: #05070a; font: 700 .95rem/1 var(--sf-mono); padding: 8px 12px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.sf-flag { position: absolute; bottom: 12px; left: 12px; z-index: 3; background: rgba(5, 7, 10, .72); border: 1px solid rgba(255, 255, 255, .2); font: 700 .75rem/1 var(--sf-mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 9px; border-radius: 8px; max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 179: a caption is exactly two lines, name over title, whatever the font: the name cannot wrap into a third box
   when the display font replaces its fallback (it did, and the reel grew by one line) */
:root { --sf-cap-h: calc(14px + 1.4rem + 4px + .88rem * 1.45); }
.sf-cap { display: block; padding: 14px 4px 0; min-height: var(--sf-cap-h); }
.sf-cap strong { display: block; font: 800 1.4rem/1 var(--sf-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cap span { display: block; color: var(--sf-dim); font-size: .88rem; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 179 (visual #3): 44 px hit areas; the dot itself is still 7 px (22 px when current) */
.sf-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: -6px; }
.sf-dots button { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
.sf-dots button::after { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .25); transition: width .25s, background .25s; }
.sf-dots button.on::after { width: 22px; background: var(--sf-holo); }

.sf-ticker { position: relative; height: 64px; overflow: hidden; margin-top: 18px; border-block: 1px solid var(--sf-line); background: linear-gradient(90deg, rgba(124, 247, 255, .06), rgba(255, 122, 217, .06)); }
.sf-tstack { position: relative; height: 100%; max-width: 1180px; margin: 0 auto; }
.sf-ti { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; text-decoration: none; color: var(--sf-ink); white-space: nowrap; transform: translateY(100%); opacity: 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.sf-ti.on { transform: none; opacity: 1; }
.sf-ti.out { transform: translateY(-100%); opacity: 0; }
.sf-tlbl { flex: none; font: 700 .75rem/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: #05070a; background: var(--sf-cyan); padding: 5px 7px; border-radius: 5px; }
.sf-tn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 900 1.55rem/1 var(--sf-display); text-transform: uppercase; }
@media (max-width: 520px) { .sf-tdim { display: none; } .sf-tn { font-size: 1.3rem; } .sf-ti { gap: 8px; padding: 0 12px; } }
.sf-tdim { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--sf-dim); font-size: .9rem; }
.sf-tp { flex: none; margin-left: auto; font: 700 1.05rem var(--sf-mono); color: var(--sf-gold); }
.sf-tprog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.sf-tprog span { display: block; height: 100%; background: var(--sf-holo); transform-origin: left; animation: sf-tprog 3.6s linear infinite; }
.sf-ticker.paused .sf-tprog span { animation-play-state: paused; }
@keyframes sf-tprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sf-home-sec { max-width: 1180px; margin: 0 auto; }
.sf-home-sec h2, .sf-shop .hrow-head h2 { margin: 0 16px 12px; font: 900 2rem/.95 var(--sf-display); text-transform: uppercase; color: var(--sf-ink); border: 0; letter-spacing: .01em; padding: 0; }
.sf-pchips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
.sf-pchips::-webkit-scrollbar { display: none; }
.sf-shop .sf-pchips .sf-chip { flex: none; }
.sf-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.sf-bx { position: relative; overflow: hidden; min-height: 160px; padding: 14px; border-radius: 16px; background: var(--sf-panel); border: 1px solid var(--sf-line); text-decoration: none; color: var(--sf-ink); display: flex; flex-direction: column; gap: 6px; }
.sf-bx:hover { border-color: rgba(181, 140, 255, .5); }
.sf-bx.sf-big { grid-column: span 2; min-height: 230px; }
.sf-bx .sf-k { position: relative; z-index: 2; font: 600 .75rem/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-dim); }
.sf-bx .sf-t { position: relative; z-index: 2; font: 900 1.9rem/.9 var(--sf-display); text-transform: uppercase; max-width: 60%; }
.sf-bx.sf-big .sf-t { font-size: 2.7rem; }
.sf-bx .sf-n { position: relative; z-index: 2; margin-top: auto; font: 600 .85rem var(--sf-mono); color: var(--sf-cyan); }
.sf-peek { position: absolute; right: -6px; bottom: -18px; width: 44%; transform: rotate(9deg); border-radius: 8px; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.sf-big .sf-peek { width: 30%; right: 5%; bottom: -26px; }
.sf-big .sf-peek + .sf-peek { right: 30%; transform: rotate(-7deg); bottom: -38px; }
.sf-c0 { background: radial-gradient(120% 90% at 100% 100%, rgba(255, 211, 110, .24), transparent 60%), var(--sf-panel); }
.sf-c1 { background: radial-gradient(120% 90% at 100% 100%, rgba(124, 247, 255, .18), transparent 60%), var(--sf-panel); }
.sf-c2 { background: radial-gradient(120% 90% at 100% 100%, rgba(255, 122, 217, .18), transparent 60%), var(--sf-panel); }
.sf-c3 { background: radial-gradient(120% 90% at 100% 100%, rgba(181, 140, 255, .22), transparent 60%), var(--sf-panel); }

.sf-trustsec { padding-top: 30px; }
.sf-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.sf-trust > * { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 16px; padding: 16px; text-decoration: none; color: var(--sf-ink); min-width: 0; }
.sf-trust .sf-ebay { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(var(--sf-panel), var(--sf-panel)) padding-box, var(--sf-holo) border-box; border: 1.5px solid transparent; }
.sf-bigp { display: block; font: 900 3.4rem/.9 var(--sf-display); }
.sf-lbl { display: block; color: var(--sf-dim); font-size: .92rem; }
.sf-trust b { display: block; font: 800 1.3rem/1 var(--sf-display); text-transform: uppercase; margin-bottom: 6px; }
.sf-go { color: var(--sf-cyan); font-weight: 700; white-space: nowrap; }

/* the shop rows (app.js carouselRow) as dark rails */
.sf-shop .home-sections { padding: 0 0 10px; max-width: 1180px; }
.sf-shop .hrow { margin-top: 30px; }
.sf-shop .hrow-head { padding: 0; margin-bottom: 12px; align-items: center; }
.sf-shop .hrow-head h2 { flex: 1; margin-right: 8px; font-size: 1.8rem; overflow-wrap: anywhere; }
.sf-shop .hrow-head .view-all { color: var(--sf-cyan); font-weight: 700; min-height: 44px; margin-right: 16px; white-space: nowrap; }
.sf-shop .hrow-head .spacer { display: none; }
.sf-shop .caro-btn { display: none; }
@media (min-width: 760px) { .sf-shop .caro-btn { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 12px; background: var(--sf-panel2); border: 1px solid var(--sf-line); color: var(--sf-ink); margin-right: 8px; } }
.sf-shop .caro { gap: 12px; padding: 4px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none; }
.sf-shop .caro::-webkit-scrollbar { display: none; }
.sf-shop .caro .card { flex: 0 0 164px; }
.sf-shop .deals-strip { background: none; }
.sf-shop .deals-strip .hrow-head h2 { color: var(--sf-gold); }

/* tiles everywhere (home rails, results grid, saved, cart suggestions) */
.sf-shop .card { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 14px; box-shadow: none; overflow: hidden; }
.sf-shop .card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(181, 140, 255, .45); border-color: rgba(181, 140, 255, .45); }
.sf-shop .card-img { background: radial-gradient(90% 70% at 50% 40%, #1e2633, #0b0f14 70%); border-radius: 0; }
.sf-shop .card-img img { max-width: 92%; max-height: 94%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.sf-shop .card .heart { width: 44px; height: 44px; border-radius: 50%; background: rgba(5, 7, 10, .62); border: 1px solid rgba(255, 255, 255, .18); color: var(--sf-ink); }
.sf-shop .card .heart.on { color: var(--sf-pink); }
.sf-shop .badge { font: 700 .75rem/1 var(--sf-mono); letter-spacing: .03em; text-transform: uppercase; border-radius: 6px; padding: 5px 7px; background: rgba(255, 255, 255, .08); color: var(--sf-ink); border: 1px solid rgba(255, 255, 255, .16); }
.sf-shop .badge.grade { color: var(--sf-gold); }
.sf-shop .badge.rc { color: #ff9b85; }
.sf-shop .badge.auto { color: var(--sf-cyan); }
.sf-shop .badge.serial { color: var(--sf-violet); }
.sf-shop .badge.mem { color: #8ff0a4; }
.sf-shop .hot-flag, .sf-shop .new-flag, .sf-shop .sale-flag { font: 700 .75rem/1 var(--sf-mono); border-radius: 6px; padding: 5px 7px; }
.sf-shop .hot-flag { background: rgba(5, 7, 10, .75); color: #ffb38a; border: 1px solid rgba(255, 179, 138, .4); }
.sf-shop .new-flag { background: var(--sf-cyan); color: #05070a; }
.sf-shop .card-name { padding: 8px 12px 0; font: 800 1.15rem/1 var(--sf-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-ink); }
.sf-shop .card-name + .card-title { padding-top: 4px; color: var(--sf-dim); font-size: .82rem; }
.sf-shop .card-title { color: var(--sf-ink); }
.sf-shop .card-price .obo, .sf-shop .card-price .was { color: var(--sf-dim); }
.sf-shop .card-price .obo { font-size: .75rem; }      /* 179 (visual #6): 12 px, not the legacy 11.5 */

/* the Card Watch strip */
.sf-shop .watch-strip { background: none; margin: 34px 16px 0; }
.sf-shop .watch-inner { background: linear-gradient(135deg, rgba(124, 247, 255, .12), rgba(255, 122, 217, .12)); border: 1px solid var(--sf-line); border-radius: 20px; padding: 22px 18px; text-align: left; }
.sf-shop .watch-inner h2 { color: var(--sf-ink); font: 900 2.1rem/.95 var(--sf-display); text-transform: uppercase; }
.sf-shop .watch-inner > p, .sf-shop .watch-msg { color: var(--sf-dim); }
.sf-shop .watch-inner input, .sf-shop .watch-inner select { min-height: 48px; border-radius: 12px; border: 1px solid var(--sf-line); background: var(--sf-void); color: var(--sf-ink); font-size: 16px; }

/* one-line page headings at 375 px (HQ nit 9/30) */
.sf-shop .browse-head { padding: 22px 16px 0; }
.sf-shop .browse-head h1, .sf-shop .browse-head h2 { font: 900 clamp(1.9rem, 9vw, 2.6rem)/1 var(--sf-display); text-transform: uppercase; color: var(--sf-ink); letter-spacing: .01em; overflow-wrap: anywhere; }

@media (min-width: 760px) {
  .sf-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-bx.sf-big { grid-row: span 2; min-height: 330px; }
  .sf-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-feat { width: 300px; }
  .sf-reel { min-height: calc(52px + 400px + var(--sf-cap-h)); }
  .sf-shop .caro .card { flex-basis: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-live, .sf-holo-text, .sf-tprog span { animation: none; }
  .sf-ti { transition: none; }
}

/* 179 (perf H3): everything under the first screens is skipped by the browser until it is near the screen
   (content-visibility: auto): off the screen its layout and paint cost nothing, and the sizes below stand in
   for it until it is drawn (`auto` then keeps the size it really had, so scrolling back never jumps).
   Search and assistive tools still see all of it. The sizes are measured: a row is 420-500 px at 412 px
   and 450-490 px at 1440 px; the Card Watch strip 483 / 287; the trust block 283 / 134; the footer 2,150 / 1,080.

   `auto` alone does not make the FIRST frame cheaper: the browser lays everything out once before it knows what
   is near the screen (lab, 4x CPU: the same 1.65 s first paint with and without it). So where scripts run, the
   sections start `hidden` (no layout, no paint, their box is the placeholder size), and sf-shop.js shows them one
   per frame right after the first paint, nearest the screen first (`.sf-shown` = back to `auto`). A visitor
   without scripts never matches `scripting: enabled`, and sees everything from the first byte. If the script
   never runs, the animation below lifts `hidden` after 8 s.

   Only the HOME rows (#homeSections .hrow): app.js draws the same row markup into the Saved view ("Close to your
   wishlist"), the cart ("You may also like") and the card modal ("Related cards"), and the reveal above never
   sees those, so a bare `.hrow` left them hidden for the 8 s the backstop takes (179 review). */
.sf-shop .sf-ticker { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.sf-shop #sfPopularSec { content-visibility: auto; contain-intrinsic-size: auto 118px; }
.sf-shop #sfBentoSec { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.sf-shop #homeSections .hrow { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.sf-shop .watch-strip { content-visibility: auto; contain-intrinsic-size: auto 520px; }
.sf-shop .sf-trustsec { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.sf-shop .site-footer { content-visibility: auto; contain-intrinsic-size: auto 2150px; }
@media (min-width: 760px) {
  .sf-shop #sfBentoSec { contain-intrinsic-size: auto 400px; }
  .sf-shop #homeSections .hrow { contain-intrinsic-size: auto 470px; }
  .sf-shop .watch-strip { contain-intrinsic-size: auto 330px; }
  .sf-shop .sf-trustsec { contain-intrinsic-size: auto 170px; }
  .sf-shop .site-footer { contain-intrinsic-size: auto 1080px; }
}
@keyframes sf-unlock { to { content-visibility: auto; } }
@media (scripting: enabled) {
  .sf-shop :is(.sf-ticker, #sfPopularSec, #sfBentoSec, #homeSections .hrow, .sf-trustsec, .watch-strip, .site-footer):not(.sf-shown) {
    content-visibility: hidden; animation: sf-unlock 1ms 8s forwards;
  }
}
/* 179: with the page lanes (WNBA, Under $5, New arrivals) the lane count can be odd: the last box takes the whole
   row on a phone rather than sit alone beside a hole */
@media (max-width: 759px) { .sf-bento > .sf-bx:last-child:nth-child(even) { grid-column: span 2; } }

/* ================================================== step 4: results ===
   The shop's own browse view (filters, sort, grid) restyled. On phones the
   filter panel becomes a bottom sheet; its logic is unchanged (app.js). */
.sf-shop .browse-head .set-note { color: var(--sf-dim); }
.sf-shop .sport-pills { gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sf-shop .sport-pills::-webkit-scrollbar { display: none; }
.sf-shop .sport-pills button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .05); color: var(--sf-ink); font: 600 .95rem var(--sf-body); }
.sf-shop .sport-pills button.active { background: var(--sf-ink); color: #05070a; border-color: var(--sf-ink); }
.sf-shop .layout { padding: 16px 16px 24px; max-width: 1180px; }
.sf-shop .filters { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 16px; padding: 16px; color: var(--sf-ink); align-self: start; }
.sf-fhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sf-shop .filters h2 { margin: 0; font: 900 1.6rem/1 var(--sf-display); text-transform: uppercase; color: var(--sf-ink); letter-spacing: .01em; }
.sf-fclose { display: none; }
.sf-shop .filters fieldset { border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-void); }
.sf-shop .filters legend { color: var(--sf-cyan); font: 600 .75rem/1 var(--sf-mono); letter-spacing: .12em; }
.sf-shop .filters label { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 1rem; }
.sf-shop .filters input[type=checkbox] { width: 20px; height: 20px; accent-color: #b58cff; margin-right: 12px; }
.sf-shop .filters .filter-search, .sf-shop .price-inputs input { min-height: 44px; border-radius: 10px; border: 1px solid var(--sf-line); background: var(--sf-panel2); color: var(--sf-ink); font-size: 16px; }
.sf-shop .filters .filter-hint { color: var(--sf-dim); font-size: .8rem; }
.sf-shop .set-chip { background: rgba(181, 140, 255, .12); border: 1px solid rgba(181, 140, 255, .45); color: var(--sf-ink); border-radius: 999px; }
.sf-fdone { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.sf-fdone .sf-btn { display: none; flex: 1; }
.sf-shop #clearFilters { min-height: 44px; padding: 0 16px; border-radius: 12px; }
.sf-shop .results-bar { color: var(--sf-dim); align-items: center; gap: 10px; }
.sf-shop .results-bar #count { color: var(--sf-ink); font-family: var(--sf-mono); }
.sf-shop .results-bar select { min-height: 44px; border-radius: 10px; border: 1px solid var(--sf-line); background: var(--sf-panel2); color: var(--sf-ink); font-size: 15px; padding: 0 10px; }
.sf-shop .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 640px) { .sf-shop .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.sf-shop .empty { color: var(--sf-dim); }
.sf-shop .link-btn { color: var(--sf-cyan); min-height: 44px; }
.sf-shop #moreBtn, .sf-shop .more-btn { background: var(--sf-panel2); color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: 12px; min-height: 48px; }
@media (max-width: 860px) {
  .sf-shop .filter-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--sf-ink); border: 1px solid var(--sf-line); font: 700 .95rem var(--sf-body); letter-spacing: 0; }
  .sf-shop .filters.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 86vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); }
  .sf-shop .filters.open .sf-fclose { display: grid; }
  .sf-shop .filters.open .sf-fdone .sf-btn { display: inline-flex; }
  .sf-shop .filters.open .sf-fdone { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); background: var(--sf-panel); padding: 10px 0 0; }
  body.sf-shop.sf-sheet-open { overflow: hidden; }
}
@media (min-width: 861px) { .sf-shop .filters { position: sticky; top: 140px; } }