/* Layout: sticky header, 1440px column, cart drawer. */
/* Self-hosted fonts (Google Fonts woff2, SIL Open Font License), latin + latin-ext subsets. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-400-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/schibsted-grotesk-400-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/schibsted-grotesk-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --paper:#F2F4F1; --surface:#FFFFFF; --sunk:#E8ECE8; --ink:#13201B; --muted:#596760; --line:#D8DED9;
  --spruce:#1D5A4A; --spruce-soft:#DDEBE5; --red:#C8102E; --red-ink:#FFFFFF; --red-soft:#FAE3E6;
  --up:#1E7A4C; --down:#B3261E; --star:#A86E12;
  --c-nm:#16603B; --c-lp:#225A75; --c-mp:#7A5208; --c-hp:#953F14; --c-dmg:#981E17;
  --scrim:rgb(10 18 15 / .45);
  --shadow:0 1px 2px rgb(19 32 27 / .06), 0 10px 30px -14px rgb(19 32 27 / .28);
  --f-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --f-body:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --r-sm:6px; --r:12px;
  --gut:clamp(16px,3vw,32px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0D1311; --surface:#141C19; --sunk:#1A2420; --ink:#E5ECE8; --muted:#92A199; --line:#27322E;
  --spruce:#7CC7AE; --spruce-soft:#1A2D27; --red:#E5384E; --red-ink:#FFFFFF; --red-soft:#3A1A20;
  --up:#5DC48E; --down:#FF7E73; --star:#E8B656;
  --c-nm:#5DC48E; --c-lp:#6DB8DA; --c-mp:#E0B04F; --c-hp:#F08A55; --c-dmg:#FF7E73;
  --scrim:rgb(0 0 0 / .6);
  --shadow:0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -14px rgb(0 0 0 / .7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0D1311; --surface:#141C19; --sunk:#1A2420; --ink:#E5ECE8; --muted:#92A199; --line:#27322E;
  --spruce:#7CC7AE; --spruce-soft:#1A2D27; --red:#E5384E; --red-ink:#FFFFFF; --red-soft:#3A1A20;
  --up:#5DC48E; --down:#FF7E73; --star:#E8B656;
  --c-nm:#5DC48E; --c-lp:#6DB8DA; --c-mp:#E0B04F; --c-hp:#F08A55; --c-dmg:#FF7E73;
  --scrim:rgb(0 0 0 / .6);
  --shadow:0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -14px rgb(0 0 0 / .7);
  color-scheme:dark;
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--spruce);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);font-stretch:112%;line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.01em}
.price,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--spruce);margin:0}

/* ---------- header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding-block:12px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:850 23px/1 var(--f-display);font-stretch:125%;letter-spacing:-.03em}
.logo svg{width:30px;height:30px;flex:none}
.search{position:relative;display:flex;align-items:center;background:var(--sunk);border:1px solid transparent;border-radius:999px;height:46px;padding-inline:16px 10px;gap:10px;transition:border-color .15s,background .15s}
.search:focus-within{background:var(--surface);border-color:var(--spruce);box-shadow:0 0 0 1px var(--spruce)}
.search svg{flex:none;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;height:100%;font-size:16px}
.search input::-webkit-search-cancel-button{display:none}
.search kbd{font:500 12px var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 7px}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;max-height:min(70vh,520px);overflow:auto}
.sug{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:7px 10px;border:0;background:none;border-radius:8px;text-align:left}
.sug:hover,.sug.on{background:var(--sunk)}
.sug-name{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-set{font-size:13px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-all{grid-template-columns:34px 1fr;color:var(--spruce);font-weight:600}
.sug-all span:first-child{display:grid;place-items:center}
.top-actions{display:flex;align-items:center;gap:6px}
.prov{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);padding-inline:6px}
.prov select{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:6px 8px;font-weight:600;color:var(--ink)}
.chip-btn{height:38px;padding-inline:12px;border-radius:999px;border:1px solid transparent;background:none;font-weight:600}
.chip-btn:hover{background:var(--sunk)}
#sellLink{border-color:currentColor}.sl2{display:none}
.cart-btn{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding-inline:14px 16px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font-weight:600}
.cart-btn .badge{font:600 12px var(--f-mono);background:var(--red);color:var(--red-ink);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;padding-inline:6px}
.games{border-top:1px solid var(--line)}
.games-in{display:flex;gap:4px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.games-in::-webkit-scrollbar{display:none}
.g-chip{flex:none;height:32px;padding-inline:13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;display:flex;align-items:center;gap:7px}
.g-chip:hover{border-color:var(--muted)}
.g-chip.on{background:var(--spruce);border-color:var(--spruce);color:var(--surface)}
/* Shop: in the header, first in the games bar on phones (no room next to the account button and French labels) */
.g-chip.g-shop{display:none;font-weight:600}
.g-chip.g-app{gap:6px;font-weight:600;color:var(--spruce)}@media (display-mode:standalone){.g-chip.g-app{display:none}}
/* Up to 520 px (every phone, the 430 px Plus and Pro Max included) and whenever the header does not fit (app.js
   fitHeader: larger text, French labels, the account button): logo mark only, Shop moves to the games bar. */
@media (max-width:520px){.sl1{display:none}.sl2{display:inline}#shopLink{display:none}.g-chip.g-shop{display:flex}.logo span{display:none}}
.hdr-tight #shopLink,.hdr-tight .logo span,.hdr-short .sl1{display:none}.hdr-tight .g-chip.g-shop{display:flex}.hdr-short .sl2{display:inline}
.g-dot{width:8px;height:8px;border-radius:50%;background:hsl(var(--h) 70% 50%)}
/* A game and the arrow of its menu (ui.js gameChipHTML; the menu itself is gamesmenu.css) */
.g-grp{flex:none;display:flex}.g-grp .g-chip{border-radius:999px 0 0 999px;border-right:0;padding-inline-end:6px}
.g-more{width:30px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-left:0;border-radius:0 999px 999px 0;background:var(--surface);color:inherit}
.g-grp:hover>*{border-color:var(--muted)}.g-chip.on+.g-more{background:var(--spruce);border-color:var(--spruce);color:var(--surface)}[data-gm][aria-expanded=true] svg{rotate:180deg}
@media (max-width:820px){
  .top-in{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"logo actions" "search search";gap:10px 12px}
  /* safe: actions that do not fit spill right (seen and fixed by fitHeader), never over the logo. */
  .logo{grid-area:logo}.top-actions{grid-area:actions;justify-content:safe flex-end;min-width:0}.search{grid-area:search}
  .search kbd,.prov-label,.cart-label{display:none}
}
@media (max-width:480px){
  .logo{font-size:20px;gap:7px}.logo svg{width:26px;height:26px}
  .top-actions{gap:2px}.chip-btn{padding-inline:8px}.prov{padding-inline:0}.prov select{padding:6px 4px}.prov.cur select{appearance:none;padding-inline:8px}
  .cart-btn{padding-inline:12px;gap:6px}
}

/* ---------- generic */
main{padding-block:28px 64px;min-height:60vh}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding-inline:20px;border-radius:var(--r-sm);border:1px solid transparent;font-weight:650;font-size:15px;white-space:nowrap;text-decoration:none}
.btn.primary{background:var(--red);color:var(--red-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.go{background:var(--spruce);color:var(--paper)}   /* Start selling on the home hero (owner 2026-11-05: green) */
.btn.ghost:hover{border-color:var(--muted)}
.btn.small{height:36px;padding-inline:14px;font-size:14px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;padding:0;color:var(--spruce);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sec{display:grid;gap:16px;margin-top:44px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-h h2{font-size:24px}
.sec-h>div{flex:1 1 10rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px 16px}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
.chg{font:500 12px var(--f-mono);white-space:nowrap}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}
.cond{font:600 11.5px var(--f-mono);letter-spacing:.02em;padding:2px 7px;border-radius:4px;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);white-space:nowrap}
.cond.NM{--cc:var(--c-nm)}.cond.LP{--cc:var(--c-lp)}.cond.MP{--cc:var(--c-mp)}.cond.HP{--cc:var(--c-hp)}.cond.DMG{--cc:var(--c-dmg)}
.cond.SEALED,.cond.GRADED{--cc:var(--spruce)}
.tag{font:600 11px var(--f-mono);padding:2px 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--sunk);padding:4px;border-radius:9px}
.seg button{border:0;background:none;height:34px;padding-inline:12px;border-radius:6px;font-weight:600;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;user-select:none}
.toggle input{appearance:none;width:36px;height:22px;border-radius:999px;background:var(--line);position:relative;margin:0;cursor:pointer;transition:background .15s;flex:none}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s}
.toggle input:checked{background:var(--spruce)}
.toggle input:checked::after{transform:translateX(14px)}

/* ---------- card art (generated, no images) */
.art{container-type:inline-size;width:100%;position:relative}
.art-card{aspect-ratio:63/88;border-radius:4.6cqw;padding:4cqw;display:flex;flex-direction:column;gap:2.6cqw;position:relative;overflow:hidden;box-shadow:inset 0 0 0 .4cqw rgb(255 255 255 / .18),0 10px 22px -12px rgb(0 0 0 / .55)}
.art-win{flex:1;border-radius:2.4cqw;position:relative;overflow:hidden;
  background:radial-gradient(circle at 28% 24%,hsl(var(--h) 95% 78% / .95),transparent 42%),radial-gradient(circle at 78% 82%,hsl(calc(var(--h) + 70) 85% 58%),transparent 55%),linear-gradient(155deg,hsl(var(--h) 62% 44%),hsl(calc(var(--h) + 35) 58% 20%))}
.art-orb{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 36% 34%,rgb(255 255 255 / .9),hsl(var(--h) 85% 62% / .55) 38%,transparent 70%)}
.art-win::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgb(255 255 255 / .35) 50%,transparent 60%);transform:translateX(-60%);transition:transform .7s ease}
.tile:hover .art-win::after,.pdp-art:hover .art-win::after{transform:translateX(60%)}
.art-title{font:750 7.6cqw/1.08 var(--f-display);font-stretch:100%;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.16em}
.art-foot{display:flex;justify-content:space-between;font:500 4.8cqw var(--f-mono);opacity:.75}
.g-pkm{background:linear-gradient(160deg,#F6D865,#E3B23C)}.g-pkm .art-title,.g-pkm .art-foot{color:#2A2104}
.g-mtg{background:#17140F}.g-mtg .art-title,.g-mtg .art-foot{color:#EFE7D5}
.g-ygo{background:linear-gradient(160deg,#9A6531,#5A391B)}.g-ygo .art-title,.g-ygo .art-foot{color:#F6E9D0}
.g-op{background:linear-gradient(160deg,#F4F0E7,#D8D0BF)}.g-op .art-title,.g-op .art-foot{color:#1F1B16}
.g-lor{background:linear-gradient(160deg,#30285A,#120E24)}.g-lor .art-title,.g-lor .art-foot{color:#ECE4FF}
.g-rb{background:linear-gradient(160deg,#103246,#08151D)}.g-rb .art-title,.g-rb .art-foot{color:#D3ECF6}
.hk-ph{background:#EEEFEC;color:#2B2D2A;padding:8cqw 7.5cqw}
.hk-ph::before{content:"";position:absolute;inset:3cqw;border:.5cqw dashed #B5B9B2;border-radius:3cqw}
.hk-none{font:600 4.6cqw var(--f-mono);text-transform:uppercase;color:#6A6E67}
.hk-ph .art-title{margin-top:auto}
.hk-var{font:500 5.2cqw var(--f-body);color:#4A4E47}
.hk-badges{display:flex;flex-wrap:wrap;gap:1.6cqw}.hk-badges span{font:650 4.4cqw var(--f-body);border:.4cqw solid #8C9088;border-radius:9em;padding:0 2.4cqw}
.hk-ph .art-foot span+span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slab{background:linear-gradient(170deg,#F1F4F6,#CFD6DB);border-radius:10px;padding:5% 7% 8%;box-shadow:inset 0 0 0 .5cqw rgb(255 255 255 / .7),0 10px 22px -12px rgb(0 0 0 / .5)}
.slab-label{display:flex;justify-content:space-between;align-items:center;gap:3cqw;background:#fff;border:.7cqw solid #B5142B;border-radius:1.6cqw;padding:2.4cqw 3.2cqw;margin-bottom:4.5cqw;color:#141414;font:600 4.4cqw/1.15 var(--f-body)}
.slab-label b{font:800 7cqw/1 var(--f-display)}
.slab-label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box-face{aspect-ratio:1/1.08;border-radius:3cqw;padding:9cqw 8cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:2cqw;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(circle at 75% 20%,hsl(calc(var(--h) + 50) 90% 65% / .8),transparent 45%),linear-gradient(140deg,hsl(var(--h) 60% 42%),hsl(calc(var(--h) + 30) 60% 16%));
  box-shadow:5cqw 5cqw 0 -.5cqw hsl(var(--h) 45% 14%),inset 0 0 0 .6cqw rgb(255 255 255 / .16)}
.box-game{font:600 5cqw var(--f-mono);opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.box-name{font:800 10cqw/1 var(--f-display);font-stretch:118%}
.box-kind{font:600 5cqw var(--f-body);background:rgb(255 255 255 / .18);align-self:flex-start;padding:1cqw 3cqw;border-radius:99px}
.thumb{width:34px;flex:none}
.thumb .slab{padding:6%;border-radius:4px}.thumb .slab-label{display:none}

/* ---------- tiles */
.tile{display:flex;flex-direction:column;gap:12px;border:0;background:none;padding:0;text-align:left;min-width:0}
.tile-art{aspect-ratio:63/88;display:grid;place-items:center;transition:transform .2s ease}
.tile:hover .tile-art{transform:translateY(-3px)}
.tile-art .slab{width:82%}.tile-art .box{width:92%}
.tile-body{display:grid;gap:2px;min-width:0}
.tile-game{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-name{font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-row{display:flex;align-items:baseline;gap:6px;margin-top:4px;flex-wrap:wrap}
.tile-from{font-size:12px;color:var(--muted)}
.tile-row .price{font-size:16px;font-weight:600}
.tile-count{font-size:12px;color:var(--muted)}

/* ---------- home */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:12px 8px}
.hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:850;font-stretch:118%;letter-spacing:-.03em;margin-top:12px}
.hero .lede{font-size:17px;color:var(--muted);max-width:52ch;margin:16px 0 0}
.pop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.pop-label{font-size:13px;color:var(--muted);margin-right:4px}
.pop button{height:34px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.pop button:hover{border-color:var(--spruce);color:var(--spruce)}
.fan{position:relative;height:340px;max-width:100%}
/* The side cards reach 1.25 card widths past the middle: at most 38% of the column, so the fan never spills past the
   screen (a sideways scroll at 861 to about 1100 px before, ux_checks fit). */
.fan .tile{position:absolute;width:min(190px,38%);top:20px;left:50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fan .tile .tile-body{display:none}
.fan .tile:nth-child(1){transform:translateX(-118%) rotate(-9deg) translateY(18px)}
.fan .tile:nth-child(2){transform:translateX(-50%);z-index:2}
.fan .tile:nth-child(3){transform:translateX(18%) rotate(9deg) translateY(18px)}
.fan:hover .tile:nth-child(1){transform:translateX(-128%) rotate(-12deg) translateY(22px)}
.fan:hover .tile:nth-child(3){transform:translateX(28%) rotate(12deg) translateY(22px)}
.fan-wrap{position:relative}.fan .tile{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}.fan.turn .tile{opacity:0}.hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.fan-price{position:absolute;z-index:3;left:50%;bottom:-4px;transform:translateX(-50%);color:var(--ink);text-decoration:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:7px 14px;font-size:13px;white-space:nowrap}
.fan-price b{font-family:var(--f-mono);font-weight:600}
@media (max-width:860px){.hero{grid-template-columns:1fr}.fan{height:280px}.fan .tile{width:min(150px,38%)}}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:40px}
.trust div{background:var(--surface);padding:18px 20px;display:grid;gap:4px;align-content:start}
.trust b{font-weight:650}
.trust span{font-size:13.5px;color:var(--muted)}
@media (max-width:860px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.trust{grid-template-columns:1fr}}
.sold{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 32px}
.sold-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding-block:10px;border-bottom:1px solid var(--line);border-top:0;border-inline:0;background:none;text-align:left;width:100%}
.sold-row .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sold-row .m{font-size:12.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sold-row .price{font-weight:600;text-align:right}
.sold-row .price small{display:block;font:400 12px var(--f-body);color:var(--muted)}
.band{margin-top:48px;background:var(--spruce);color:var(--surface);border-radius:var(--r);padding:32px clamp(20px,4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h2{font-size:clamp(22px,3vw,30px)}
.band p{margin:8px 0 0;opacity:.85;max-width:56ch}
.band .btn{background:var(--surface);color:var(--ink)}
.band-acts{display:flex;flex-wrap:wrap;gap:10px}.band .btn.ghost{background:transparent;color:var(--surface);border-color:currentColor}

/* ---------- browse */
.browse{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start}
.filters{position:sticky;top:150px;display:grid;gap:26px}
.f-group{display:grid;gap:10px}
.f-title{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.f-opt{display:flex;align-items:center;gap:10px;font-size:14.5px;cursor:pointer}
.f-opt input{accent-color:var(--spruce);width:16px;height:16px;margin:0}
.f-opt .ct{margin-left:auto;font:12px var(--f-mono);color:var(--muted)}
.f-price{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding-inline:12px;height:40px}
.f-price input{border:0;background:none;outline:none;width:100%;min-width:0}
.res-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.res-h h1{font-size:26px}
.res-h select{height:38px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding-inline:10px}
.active{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;min-height:4px}
.active button{display:inline-flex;align-items:center;gap:6px;height:30px;padding-inline:11px;border-radius:999px;border:0;background:var(--spruce-soft);color:var(--spruce);font-size:13px;font-weight:600}
.filters-btn{display:none}
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:60px 20px;border:1px dashed var(--line);border-radius:var(--r)}
.empty h2{font-size:22px}
.empty p{margin:0;color:var(--muted)}
@media (max-width:860px){
  .browse{grid-template-columns:1fr}
  .filters{position:fixed;inset:auto 0 0 0;z-index:40;background:var(--surface);border-radius:16px 16px 0 0;padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));max-height:80vh;overflow:auto;box-shadow:0 -10px 40px rgb(0 0 0 / .25);transform:translateY(105%);transition:transform .25s ease;top:auto}
  .filters.open{transform:none}
  .filters-btn{display:inline-flex}
  .f-done{display:flex!important}
}
.f-done{display:none}

/* ---------- product page */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs button{background:none;border:0;padding:0;color:var(--muted)}
.crumbs button:hover{color:var(--ink);text-decoration:underline}
.pdp{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.pdp-art{display:grid;place-items:center;padding:28px;background:var(--sunk);border-radius:var(--r)}
.pdp-art .art{max-width:300px}
.pdp-art .slab{max-width:280px}
.pdp-info{display:grid;gap:22px;min-width:0}
.pdp-info h1{font-size:clamp(28px,4vw,44px);font-weight:850;margin-top:6px}
.pdp-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;font-size:14px;color:var(--muted)}
.buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:18px;box-shadow:var(--shadow)}
.buy-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end}
.buy-label{font-size:13px;color:var(--muted)}
.buy-price{font:600 36px/1.1 var(--f-mono);letter-spacing:-.03em}
.buy-sub{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.buy-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.market{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:center}
.market .mk-v{font:600 20px var(--f-mono)}
.market svg{width:100%;height:64px;display:block}
.mk-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);grid-column:2}
.lists{margin-top:44px}
.lists-h{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:12px}
.lists-h h2{font-size:22px}
.lists-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lists-tools select{height:36px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding-inline:10px}
.lrows{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.lrow{position:relative;display:grid;grid-template-columns:48px minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr) 104px;gap:14px;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.lrow:hover{background:var(--sunk)}
.l-open{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer}.l-open:focus-visible{outline:2px solid var(--spruce);outline-offset:-2px}
.lrow a,.lrow .btn{position:relative;z-index:1}.lrow .s-meta{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.l-th{position:relative;width:48px;height:48px;border-radius:6px;overflow:hidden;background:var(--sunk);display:grid;place-items:center}.l-th img{width:100%;height:100%;object-fit:cover}.l-th .pimg{object-fit:contain}
.l-th b{position:absolute;right:2px;bottom:2px;font:600 10px var(--f-mono);background:var(--ink);color:var(--paper);border-radius:4px;padding:0 3px}
.lrow:first-child{border-top:0}
.lrow.best{background:color-mix(in srgb,var(--spruce-soft) 60%,transparent)}
.s-name{font-weight:650;display:block}
.s-meta{font-size:12.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.star{color:var(--star)}
.l-cond{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.l-note{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}.l-note b{font-weight:600}
.mko{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.buy-links{display:flex;gap:4px 18px;flex-wrap:wrap}
.mko.rpt{color:var(--muted);font-weight:400;font-size:13px;min-width:44px}.mko+.rpt{margin-left:14px}
.l-ship{font-size:13px;color:var(--muted)}
.l-price{text-align:right;font-weight:600;font-size:16px}
.l-price small{display:block;font:400 12px var(--f-body);color:var(--muted)}
.lrow .btn{width:100%}
.ld-ph{display:flex;gap:8px;overflow-x:auto}.ld-ph button{flex:none;border:0;padding:0;background:none;cursor:zoom-in}.ld-ph img{height:220px;width:auto;max-width:none;border-radius:var(--r-sm);border:1px solid var(--line);display:block}
.ld-sec{display:grid;gap:4px;padding-block:12px;border-block:1px solid var(--line)}.ld-buy{display:grid;gap:8px}.ld .l-note{margin:0}
@media (max-width:860px){.pdp{grid-template-columns:1fr}.pdp-art{padding:20px}.pdp-art .art{max-width:220px}.pdp-art .slab{max-width:210px}}
@media (max-width:680px){
  .lrow{grid-template-columns:48px minmax(0,1fr) 92px;grid-template-areas:"t s p" "t c b";gap:4px 10px;padding:8px 12px}.lrow .l-ship,.lrow .l-price small,.lrow .s-meta>span:nth-child(n+3){display:none}
  .l-th{grid-area:t}.lrow .l-seller{grid-area:s}.lrow .l-cond{grid-area:c}.lrow .l-price{grid-area:p}.lrow .btn{grid-area:b;width:auto}
  .buy-actions{grid-template-columns:1fr}
  .market{grid-template-columns:1fr}.mk-axis{grid-column:1}
}

/* ---------- drawer */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer.open{visibility:visible}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .2s}
.drawer.open .scrim{opacity:1}
.panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);padding-top:env(safe-area-inset-top,0px)}
.drawer.open .panel{transform:none}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.panel-h h2{font-size:20px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:0;background:var(--sunk);display:grid;place-items:center}
.panel-b{flex:1;overflow:auto;padding:16px 20px;display:grid;gap:14px;align-content:start}
.panel-f{border-top:1px solid var(--line);background:var(--surface);padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}
.opt{display:grid;gap:10px;padding:14px 16px;border-radius:var(--r);background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 30%,transparent)}
.opt b{font-weight:650}
.opt p{margin:0;font-size:13.5px;color:var(--muted)}
.grp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.grp-h{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:center}
.grp-h b{font-weight:650}
.grp-ship{font-size:12.5px;color:var(--muted);padding:9px 14px;background:var(--sunk);display:flex;justify-content:space-between;gap:10px}
.grp-ship .hint{color:var(--spruce);font-weight:600}
.line{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;padding:12px 14px;align-items:center;border-top:1px solid var(--line)}
.grp-h + .line{border-top:0}
.line .n{font-weight:600;font-size:14px;line-height:1.25;display:block}
.line .m{display:flex;gap:6px;align-items:center;margin-top:4px;font-size:12.5px;color:var(--muted)}
.line-r{display:grid;justify-items:end;gap:6px}
.step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:28px}
.step button{width:28px;height:26px;border:0;background:none;font-size:15px;line-height:1;color:var(--muted)}
.step span{min-width:18px;text-align:center;font:600 13px var(--f-mono)}
.tot{display:grid;gap:6px;font-size:14px}
.tot div{display:flex;justify-content:space-between;gap:12px}
.tot .price{font-size:14px}
.tot .grand{font-weight:700;font-size:17px;padding-top:6px;border-top:1px solid var(--line);margin-top:4px}
.tot .grand .price{font-size:17px}

/* ---------- checkout */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(24px,5vw,56px);align-items:start}
.co-form{display:grid;gap:30px}
.co-form h1{font-size:32px}
fieldset{border:0;padding:0;margin:0;display:grid;gap:14px;min-width:0}
legend{font:700 18px var(--f-display);font-stretch:112%;margin-bottom:14px;display:flex;align-items:center;gap:10px;padding:0}
legend i{font:600 12px var(--f-mono);font-style:normal;width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:var(--ink);color:var(--paper)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.fld{display:grid;gap:6px;min-width:0;align-content:start}
.fld label{font-size:13px;font-weight:600}
.fld input,.fld select{height:46px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding-inline:12px;width:100%;min-width:0;font-size:16px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--spruce);box-shadow:0 0 0 3px color-mix(in srgb,var(--spruce) 22%,transparent)}
.fld.bad input{border-color:var(--down)}
.fld .err{font-size:12.5px;color:var(--down)}
.fld .ok{font-size:12.5px;color:var(--spruce);font-weight:600}
.pays{display:grid;gap:8px}
.pay{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer}
.pay input{grid-row:span 2;accent-color:var(--red);width:18px;height:18px;margin:0}
.pay b{font-weight:650}
.pay span{font-size:13px;color:var(--muted)}
.pay:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fine{font-size:13px;color:var(--muted);margin:0}
.co-sum{position:sticky;top:150px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:16px}
.co-sum h2{font-size:18px}
.ship-b{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ship-b-h{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.ship-b-h b{font-weight:650;font-size:14px}
.ship-b .line{padding:0;border:0}
@media (max-width:900px){.co{grid-template-columns:1fr}.co-sum{position:static;order:-1}}

/* ---------- confirmation + sell */
.done{max-width:720px;margin-inline:auto;display:grid;gap:24px}
.done-mark{width:56px;height:56px;border-radius:50%;background:var(--spruce);color:var(--surface);display:grid;place-items:center}
.done h1{font-size:clamp(30px,4vw,42px)}
.done p{margin:0;color:var(--muted);max-width:60ch}
.sellw{max-width:760px;margin-inline:auto;display:grid;gap:26px}
.sellw h1{font-size:clamp(30px,4vw,42px)}
.sell-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.sell-res{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px}
.payout{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.payout div{display:flex;justify-content:space-between;gap:12px;font-size:14px}.payout .price{white-space:nowrap}
.payout .grand{font-size:18px;font-weight:700;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.sugg{display:flex;gap:8px;flex-wrap:wrap}
.sugg button{height:32px;padding-inline:12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px}
.sugg button:hover{border-color:var(--spruce)}

/* ---------- footer, toast */
footer{border-top:1px solid var(--line);background:var(--surface)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:28px;font-size:13px;color:var(--muted)}
.foot p{margin:0;max-width:62ch}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:80;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;transition:opacity .2s,transform .2s;pointer-events:none;width:max-content;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ================= production additions ================= */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chg,.tile,.sug,.line{position:relative} /* keep visually-hidden text inside scrolling containers */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.testbar{background:#FFE14D;color:#1A1400;font:600 13px/1.4 var(--f-body);text-align:center;padding:8px var(--gut);border-bottom:2px solid #1A1400;letter-spacing:.01em}
body.no-scroll{overflow:hidden}
a{color:var(--spruce);text-underline-offset:3px}
a.tile,a.sug,a.g-chip,a.chip-btn,a.setrow,a.setcard,a.gtile,.crumbs a{color:inherit;text-decoration:none}
a.chip-btn{display:inline-flex;align-items:center}
a.sug-all{color:var(--spruce)}
.drawer[inert]{pointer-events:none}
/* Dark-mode red fails 4.5:1 against white text at button sizes; buttons and the badge keep the light-mode red. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary,:root:not([data-theme="light"]) .cart-btn .badge{background:#C8102E}}
:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .cart-btn .badge{background:#C8102E}
.btn:focus-visible,.chip-btn:focus-visible,.cart-btn:focus-visible{outline-offset:3px}
.link{cursor:pointer;font-size:inherit}

/* header + typeahead */
.search{margin:0}
.sug{color:var(--ink);text-decoration:none}
.sug-none{margin:0;padding:10px 12px;color:var(--muted);font-size:14px}
.thumb img,.thumb .art{width:34px;height:auto;display:block;border-radius:3px}
.thumb img.wide{height:34px;object-fit:contain}

/* images */
.tile-art img.pimg{width:100%;height:100%;object-fit:contain;border-radius:4.6%;display:block}.tile-art img.sph{width:100%;height:100%;object-fit:cover;border-radius:4.6%;display:block}.pdp-sph{display:block;width:100%;max-width:340px;padding:0;border:0;background:none;cursor:zoom-in}.pdp-sph img{width:100%;height:auto;aspect-ratio:716/1000;object-fit:cover;border-radius:12px;display:block}
.tile-art img.pimg.wide{border-radius:6px}
.tile-art .art{width:100%}
.tile-art .art.box{width:92%}
.tile:hover .tile-art,.tile:focus-visible .tile-art{transform:translateY(-3px)}
.tile:focus-visible{outline-offset:4px}
.pdp-art img.pimg{width:100%;max-width:340px;height:auto;aspect-ratio:716/1000;object-fit:contain;display:block}
.pdp-art.wide img.pimg{aspect-ratio:1/1}
@media (max-width:860px){.pdp-art img.pimg,.pdp-sph{max-width:240px}}
/* Seller photo first (views/product.js artPhoto): the copy's photo, its label, and the catalogue picture one tap away. */
.pdp-mine,.pdp-cat{display:grid;justify-items:center;gap:6px;width:100%;min-width:0}
.pdp-mine .pdp-note{text-align:center;overflow-wrap:anywhere}.pdp-swap{min-height:44px;margin-top:2px;text-align:center;font-size:13px}
.offer{font-weight:600;color:var(--ink)}
.offer .price{font-size:13px}

/* home */
.pop a{display:inline-flex;align-items:center;height:34px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;color:var(--ink);text-decoration:none}
.pop a:hover{border-color:var(--spruce);color:var(--spruce)}
.sec{grid-template-columns:minmax(0,1fr)}
.sec-sub{margin:4px 0 0;font-size:14px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:168px;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
.rail > div{scroll-snap-align:start;min-width:0}
@media (max-width:520px){.rail{grid-auto-columns:42%}}
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.gtile{display:grid;gap:4px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);border-top:4px solid hsl(var(--h) 70% 45%)}
.gtile:hover{border-color:var(--muted);border-top-color:hsl(var(--h) 70% 45%)}
.gtile b{font:750 19px/1.15 var(--f-display);font-stretch:112%}
.gtile .g-dot{display:none}
.gtile span{font-size:13.5px}
.setlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:0 32px}
.setrow{display:grid;gap:2px;padding-block:12px;border-bottom:1px solid var(--line)}
.setrow:hover .setrow-n{text-decoration:underline}
.setrow-n{font-weight:650}
.setrow .muted{font-size:13px}

/* game page */
.res-tools{display:flex;gap:8px;align-items:center;min-width:0;max-width:100%}.res-tools select{min-width:0;flex:0 1 auto}
.setfind{min-width:min(320px,100%)}
.year{margin-top:32px}
.year h2{font-size:22px;margin-bottom:12px}
.setgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:12px}
.setcard{display:grid;gap:4px;height:100%;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.setcard:hover{border-color:var(--muted)}
.setcard-top{display:flex;gap:6px;flex-wrap:wrap;min-height:4px}
.setcard-n{font-weight:650;line-height:1.25}
.setcard .muted{font-size:13px}

/* set + search pages */
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
fieldset.f-group{display:grid;gap:10px}
legend.f-title{font:650 12px/1.4 var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;display:block;padding:0}
.f-group .f-opt{line-height:1.3}
.filters .fld input{height:40px;font-size:16px}
.active button.clear{background:none;color:var(--muted)}
.res-h .eyebrow{margin-bottom:6px}
.more{display:grid;justify-items:center;gap:8px;margin-top:28px}
.loading{display:flex;align-items:center;gap:12px;justify-content:center;padding:80px 20px;color:var(--muted)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--spruce);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:861px){.filters{max-height:calc(100vh - 170px);overflow:auto;padding:2px 4px 2px 2px}}

/* product page */
.subname{margin:8px 0 0;font-size:17px;color:var(--muted)}
.pdp-info h1{overflow-wrap:anywhere}
.refbox{display:grid;gap:10px}
.refbox h2.buy-label,.chart-h h2.buy-label{font:600 13px/1.4 var(--f-body);color:var(--muted);letter-spacing:0}
.ref-rows{display:grid;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.ref-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 18px;align-items:baseline;padding:10px 14px;border-top:1px solid var(--line)}
.ref-row:first-child{border-top:0}
.ref-f{font-weight:600}
.ref-m{font-size:18px;font-weight:600}
.ref-lo{font-size:13px}
@media (max-width:420px){.ref-row{grid-template-columns:1fr auto}.ref-lo{grid-column:1/-1}}
.market{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.chart-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.market-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:center}
.market-in .mk-v{font:600 20px var(--f-mono)}
.market-in svg{width:100%;height:64px;display:block}
@media (max-width:680px){.market-in{grid-template-columns:1fr}}
.attrs h2{font-size:22px}
.attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.attr-grid div{background:var(--surface);padding:12px 14px}
.attr-grid dt{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.attr-grid dd{margin:2px 0 0;font-weight:600;white-space:pre-line;overflow-wrap:anywhere}
.attr-long h3{font:700 15px var(--f-body);margin:0 0 4px}
.attr-long p{margin:0;white-space:pre-line;max-width:75ch;color:var(--ink)}
.l-ship{line-height:1.4}
.lrow .btn{min-width:0}
.sellbox{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;max-width:760px}
.sellbox h2{font-size:22px}
.seg label.segopt{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:12px;border-radius:6px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer}
.seg label.segopt:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.seg label.segopt input{accent-color:var(--spruce);margin:0}
.err:empty,.ok:empty{display:none}
p.err{margin:0;color:var(--down);font-size:14px}
.fld.bad input,.fld.bad select{border-color:var(--down)}

/* cart, checkout, account */
.line a.n{color:var(--ink);text-decoration:none}
.line a.n:hover{text-decoration:underline}
.step button[disabled]{opacity:.35;cursor:not-allowed}
.cartpage{display:grid;gap:20px}
.cartpage h1,.acct h1{font-size:32px}
.cart-groups{display:grid;gap:14px;align-content:start}
/* Cart page on phones and tablets: the packages first, the total and Checkout in a bar at the bottom of the screen. */
.cart-bar{display:none}.cart-view{justify-self:center}
@media (max-width:900px){
  .cartpage .co-sum{order:0}
  .cart-bar{display:flex;position:sticky;bottom:0;z-index:5;align-items:center;justify-content:space-between;gap:12px;margin-inline:calc(-1 * var(--gut));padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgb(0 0 0 / .3)}
  .cart-bar-t{display:grid;line-height:1.25}.cart-bar .price{font-size:20px;font-weight:600}.cart-bar .btn{flex:none;min-width:150px;min-height:48px}
}
@media (max-width:600px){#cartFoot .tot>div:not(.grand),#cartFoot .cad-note{display:none}.grp-ship{flex-direction:column;gap:4px}}
.pay-go{display:grid;gap:10px}
.pay-go .btn{height:52px;font-size:16px}
/* Checkout disclosures and acceptance (Quebec distance contracts): always visible, never collapsed. */
.co-terms{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.co-terms ul{margin:0;padding-left:18px;display:grid;gap:6px}
.co-links{display:flex;flex-wrap:wrap;gap:0 18px;margin:0}
.co-links a,.co-links .link{min-height:44px;display:inline-flex;align-items:center}
.co-accept{align-items:flex-start;font-size:15px;padding:6px 0}
.co-accept input{width:20px;height:20px;margin-top:1px;flex:none}
#w-accept.bad .co-accept input{outline:2px solid var(--down);outline-offset:2px}
#e-accept:not(:empty){display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--down);font-weight:600;font-size:14.5px}
#e-accept:not(:empty)::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--down);color:#fff;font:700 13px/1 var(--f-body)}
@media print{body.print-co > :not(main),body.print-co .co-form fieldset,body.print-co .pay-go,body.print-co .co-links,body.print-co #w-accept{display:none !important}body.print-co .co{display:block}body.print-co .co-sum{position:static;border:0}}
.done-actions{display:flex;gap:10px;flex-wrap:wrap}
.notice{background:var(--spruce-soft);border-radius:var(--r);padding:14px 16px}
.notice p{margin:4px 0 0}
.steps{margin:0;padding-left:1.4em;display:grid;gap:10px;max-width:65ch}
.acct{display:grid;gap:4px}
.cards{display:grid;gap:14px}
.card-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid}
.card-box > *:not(.grp-h){padding-inline:14px}
.card-box .ship-b{padding-block:12px;border-bottom:1px solid var(--line)}
.card-box .tot{padding-block:12px}
.plain{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plain li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.plain .m{display:inline-flex;gap:4px}
.mrow{display:grid;grid-template-columns:minmax(0,1.6fr) 130px 100px auto;gap:12px;align-items:end;padding:14px 18px;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow .fld input{height:40px;font-size:16px}
.mrow-b{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:680px){.mrow{grid-template-columns:1fr 1fr}.mrow .l-seller,.mrow-b{grid-column:1/-1}}

/* footer */
.foot{align-items:flex-start}
.foot-main{display:grid;gap:6px;max-width:62ch}
.foot-asof{font-size:12.5px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 28px;flex:1 1 100%}
.foot-col{display:grid;align-content:start;gap:6px}.foot-col[hidden]{display:none}
.foot-col h3{margin:0 0 2px;font-size:13px;color:var(--ink)}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.foot-end{display:grid;gap:8px;justify-items:start}
.foot-end .link{font-size:13px;color:var(--spruce)}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}.tile:hover .tile-art{transform:none}}

.chip-btn{white-space:nowrap}
.acct-btn{gap:6px}
@media (max-width:560px){.acct-label{display:none}.acct-btn{padding-inline:8px}}
@media (max-width:400px){.top-actions{gap:0}.chip-btn{padding-inline:6px}.cart-btn{padding-inline:10px}}

/* import + drafts (Contract 3) */
/* "Scan a card" (scan-button.js; the sheet is scan.css, loaded at the first tap). */
.scan-open{margin-top:10px;min-height:46px;justify-self:start}
.imp{max-width:980px}
.imp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;align-items:start}
.imp-opts .sellbox{max-width:none;height:100%;align-content:start}
.imp-opts .btn{justify-self:start}
.fld input[type=file]{height:auto;padding:10px 12px;font-size:15px}
.imp-progress{display:grid;gap:6px}
.imp-progress progress{width:100%;height:10px;accent-color:var(--spruce)}
.imp-res{max-width:none}
.imp-stats dd{font:600 22px var(--f-mono)}
.imp-h3{font:700 17px var(--f-display);font-stretch:112%;margin:6px 0 0}
.notice.warn{background:color-mix(in srgb,var(--star) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--star) 45%,transparent)}
.dlg{border:0;padding:0;border-radius:var(--r);background:var(--paper);color:var(--ink);width:min(640px,calc(100vw - 32px));max-height:min(80vh,720px);box-shadow:var(--shadow)}
.dlg::backdrop{background:var(--scrim)}
.dlg-in{display:grid;gap:12px;padding:20px}
.dlg-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dlg-h h2{font-size:20px}
.find-res{max-height:50vh;overflow:auto}
.find-row{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.bulk{position:sticky;top:var(--hdr,0px);z-index:5;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow)}
.bulk-g{display:inline-flex;gap:6px;align-items:center}
.bulk input[type=number]{width:72px;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding-inline:8px;font-size:16px}
.bulk select{height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding-inline:6px}

/* Headings receive focus programmatically after navigation; no ring for that, keyboard focus elsewhere unchanged. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
.imp-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* currency, province picker, accounts */
.prov.cur select{min-width:68px}
.prov-pick{margin-bottom:4px}
.prov-pick select{height:40px}
.panel-b .prov-pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.tot .approx{color:var(--muted);font-size:13px}
.tot .approx .price{font-size:13px}
.cad-note{margin:0}
.auth-area{display:inline-flex}
.menu-wrap{position:relative}
.avatar{border-radius:50%;object-fit:cover;display:block;flex:none}
.avatar-i{display:grid;place-items:center;background:var(--spruce);color:var(--surface);font:700 13px var(--f-body)}
.prof-top .avatar-i{font-size:22px}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;display:grid}
.menu-h{margin:6px 10px 2px;font-size:12px;font-weight:650;color:var(--muted)}.menu-sep{border:0;border-top:1px solid var(--line);margin:4px 0}
.menu-who{display:grid;gap:2px;margin:0;padding:8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:13px;overflow-wrap:anywhere}
.menu [role=menuitem]{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.menu [role=menuitem]:hover,.menu [role=menuitem]:focus{background:var(--sunk);outline:none}
.menu [role=menuitem]:focus-visible{outline:2px solid var(--spruce);outline-offset:-2px}
.google-btn{gap:10px;height:48px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-form{display:grid;gap:14px}
.auth-panel{max-width:520px}
.dlg .auth-panel{border:0;padding:0;background:none;max-width:none}
.profile{max-width:none}
.prof-top{display:flex;gap:16px;align-items:center}
.prof-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;align-self:end}
.tn-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.fld .tn-row input{flex:1 1 200px;width:auto;max-width:360px}.tn-row .btn{flex:none}
.link.danger{color:var(--down)}

/* ---------- UX pass: skeletons, compact currency, drop zone, simpler drafts, snackbar, touch targets */
.skel{display:grid;gap:14px;padding-block:8px}
.sk{background:linear-gradient(90deg,var(--sunk) 0,color-mix(in srgb,var(--sunk) 60%,var(--surface)) 50%,var(--sunk) 100%);background-size:200% 100%;border-radius:var(--r-sm);animation:shimmer 1.2s ease-in-out infinite}
.sk-h{height:34px;width:min(420px,70%)}
.sk-p{height:16px;width:min(560px,90%)}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px 16px;margin-top:10px}
.sk-tile{aspect-ratio:63/100}
@keyframes shimmer{to{background-position:-200% 0}}
.prov.cur select{border:0;background:transparent;font-weight:650;padding:6px 2px;min-width:0;height:38px;cursor:pointer}
.prov.cur select:hover{background:var(--sunk)}
.drop{display:grid;justify-items:center;text-align:center;gap:6px;padding:36px 20px;border:2px dashed var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--spruce);background:var(--spruce-soft)}
.drop:focus-within{outline:2px solid var(--spruce);outline-offset:2px}
.drop.busy{opacity:.6;pointer-events:none}
.drop svg{color:var(--spruce)}
.drop b{font:700 18px var(--f-display);font-stretch:112%}
.paste{display:grid;gap:6px}
.paste label{font-size:14px;font-weight:600}
.paste-row{display:flex;gap:8px}
.sell-ta{position:relative}.sell-ta .suggest{z-index:20}
.paste-row input{flex:1;min-width:0;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding-inline:12px;font-size:16px}
.paste-row input[aria-invalid=true]{border-color:var(--down)}
.howto summary,.more-det summary{cursor:pointer;color:var(--spruce);font-weight:600;min-height:44px;display:flex;align-items:center}
.howto ul{margin-top:6px;font-size:14px;color:var(--muted)}
.more-det-in{display:grid;gap:14px;padding-top:8px}
.sell-this{justify-self:start;font-size:14px}
.quiet{margin:0;text-align:center}
.quiet .link{font-size:14px;color:var(--muted)}
.google-btn{border-color:var(--ink)!important;height:52px!important;font-size:16px}
/* drafts: card | condition | qty | price | details */
.bulk-more{position:relative}
.bulk-more summary{list-style:none}
.bulk-more summary::-webkit-details-marker{display:none}
.bulk-more-in{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding-top:10px}
.bulk-more[open]{flex-basis:100%}
.danger-btn{color:var(--down)}
.snack{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:85;display:flex;gap:16px;align-items:center;background:var(--ink);color:var(--paper);padding:8px 8px 8px 18px;border-radius:999px;font-weight:600;font-size:14px;width:max-content;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.snack span{min-width:0}.snack .link{flex:none;white-space:nowrap;color:var(--paper);min-height:44px;padding-inline:12px;border-radius:999px}
.snack .link:hover{background:rgb(255 255 255 / .12)}
/* Touch: 44 px targets on coarse pointers */
@media (pointer:coarse){
  .chip-btn,.cart-btn,.g-chip,.btn.small,.seg button,.seg label.segopt,.pop a,.res-h select,.lists-tools select{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .step{height:44px}.step button{width:40px;height:42px}
  .f-opt{min-height:44px}
  .link{min-height:44px;display:inline-flex;align-items:center}
  .foot-links a{min-height:44px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---------- launch pass: placeholder contrast, phone hero, filter dialog, preview note, 44 px targets on phones */
::placeholder{color:var(--muted);opacity:1}
.pdp-note{margin-top:10px;text-align:center}
.f-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.f-head h2{font-size:20px}
.f-close{display:none}
.f-scrim{display:none}
.browse.nofilters{grid-template-columns:minmax(0,1fr)}
.results-col{min-width:0}
@media (min-width:861px){
  .f-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:860px){
  .filters{max-height:85vh}
  .f-close{display:grid}
  .f-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:39;background:var(--scrim)}
}
@media (max-width:560px){
  .fan{height:230px;overflow-x:clip}
  .fan .tile{width:100px}
  .fan-price{white-space:normal;max-width:calc(100% - 16px);text-align:center}
}
/* Phones: one thumb, 44 px targets, whatever the pointer type reports. */
@media (max-width:860px){
  .chip-btn,.cart-btn,.g-chip,.btn.small,.seg button,.seg label.segopt,.pop a,.res-h select,.lists-tools select,.prov.cur select{min-height:44px}
  .g-chip{height:44px}.g-more{width:44px}
  .icon-btn{width:44px;height:44px}
  .step{height:44px}.step button{width:40px;height:42px}
  .f-opt{min-height:44px}
  .crumbs a{min-height:44px;display:inline-flex;align-items:center}
  .crumbs{margin-bottom:10px;align-items:center}
  .foot-links a,.foot-end .link{min-height:44px;display:inline-flex;align-items:center}
  .menu [role=menuitem]{min-height:44px;display:flex;align-items:center}
  .active button{height:44px}
}
@media (max-width:860px){.logo{min-height:44px;min-width:44px}}
/* Card details: no grey filler when the last row is short; two columns on phones. */
.attr-grid{background:var(--surface);gap:0;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.attr-grid div{box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.line .m{flex-wrap:wrap}
.sellw{grid-template-columns:minmax(0,1fr)}
.paste{grid-template-columns:minmax(0,1fr)}.paste-row input{width:0}

/* ---------- filters as chips (set and search pages; same markup in the phone sheet) */
.f-chips{display:flex!important;flex-wrap:wrap;gap:6px}
.f-chips legend{width:100%}
.f-chips .f-opt{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;line-height:1.2;cursor:pointer}
.f-chips .f-opt:hover{border-color:var(--muted)}
.f-chips .f-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.f-chips .f-opt:has(input:checked){background:var(--spruce);border-color:var(--spruce);color:var(--surface)}
.f-chips .f-opt:has(input:checked) .ct{color:inherit;opacity:.85}
.f-chips .f-opt:has(input:focus-visible){outline:2px solid var(--spruce);outline-offset:2px}
.f-chips .f-opt .ct{margin-left:0}
.f-n{font-family:var(--f-mono);font-weight:600}
.f-chips .f-opt[hidden]{display:none}.f-all{min-height:36px;font-size:14px}
@media (max-width:860px){.f-chips .f-opt,.f-all{min-height:44px}}

/* ---------- game directory */
.g-tools{display:flex;flex-wrap:wrap;gap:10px 16px;margin:14px 0 4px}
.g-tools .seg button{min-height:40px}
@media (max-width:860px){.g-tools .seg button{min-height:44px}}
.setgrid{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.setcard{grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;padding:12px;color:inherit;text-decoration:none}
.setcard-art{position:relative;width:72px;height:72px;display:grid;place-items:center;background:var(--sunk);border-radius:8px;overflow:hidden}
.setcard-art img.pimg{width:100%;height:100%;object-fit:contain;display:block}
.setcard-art .art{width:52px}.setcard-art .art.box{width:64px}
.setcard-body{display:grid;gap:3px;min-width:0}
.setcard-best{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setcard-best .price{font-weight:600}
.setcard-ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(140deg,hsl(var(--h) 45% 42%),hsl(calc(var(--h) + 40) 45% 22%));color:#fff;font:700 13px var(--f-mono)}
.badge-up{position:absolute;left:4px;top:4px;font:700 10.5px/1 var(--f-body);text-transform:uppercase;letter-spacing:.04em;background:var(--ink);color:var(--paper);padding:4px 6px;border-radius:999px}
.setfeat{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px;align-items:center;margin-top:24px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none;box-shadow:var(--shadow)}
.setfeat:hover{border-color:var(--muted)}
.setfeat-art{display:grid;place-items:center;aspect-ratio:1/1;background:var(--sunk);border-radius:var(--r);overflow:hidden}
.setfeat-art img.pimg{width:100%;height:100%;object-fit:contain}
.setfeat-art .art{width:62%}.setfeat-art .art.box{width:80%}
.setfeat-body{display:grid;gap:8px;justify-items:start;min-width:0}
.setfeat-n{font:850 clamp(24px,3.2vw,34px)/1.08 var(--f-display);font-stretch:112%;letter-spacing:-.01em}
.setfeat .setcard-best{white-space:normal;font-size:14px}
@media (max-width:560px){.setfeat{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px}.setfeat-art{border-radius:8px}.setfeat-go{display:none}}
.f-body{display:grid;gap:22px;align-content:start}
.badge-up{font-size:9.5px;padding:3px 5px;left:3px;top:3px;max-width:calc(100% - 6px);overflow:hidden;text-overflow:ellipsis}

/* ---------- line chart with readout (hover, tap, arrow keys) */
.lc-box{min-width:0;display:grid;gap:6px}
.lc{position:relative;height:72px;border-radius:6px;touch-action:pan-y;cursor:crosshair}
.lc svg{width:100%;height:100%;display:block}
.lc:focus-visible{outline:2px solid var(--spruce);outline-offset:4px}
.lc-x{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--muted);pointer-events:none}
.lc-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.lc-read{margin:0;min-height:1.5em;font-variant-numeric:tabular-nums;color:var(--ink)}
.lc-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.lc-legend li{display:inline-flex;align-items:center;gap:6px}
.lc-sw{width:14px;height:3px;border-radius:2px;background:var(--c)}
.market-g{display:grid;gap:8px}

/* ---------- buy box: offer chips, next step after adding, sticky phone bar */
.buy-cond{color:var(--ink);font-weight:650}
.buy-chips{display:flex;flex-wrap:wrap;gap:6px}
.buy-chips button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600}
.buy-chips button .price{font-weight:500;color:var(--muted)}
.buy-chips button.on{border-color:var(--spruce);box-shadow:inset 0 0 0 1px var(--spruce);color:var(--spruce)}
.buy-incart{margin:-6px 0 0}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgb(0 0 0 / .3);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px))}
.buybar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:600px;margin-inline:auto}
.buybar-p{display:grid;line-height:1.2;min-width:0}
.buybar-p .price{font-size:20px;font-weight:600}
.buybar-p .muted{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .btn{flex:none;min-width:150px}
body.has-buybar main{padding-bottom:110px}
body.has-buybar .snack,body.has-buybar .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
@media (max-width:599px){.pdp{grid-template-columns:132px minmax(0,1fr);gap:16px 14px}.pdp-info{display:contents}.pdp-info>*{grid-column:1/-1}.pdp-info>:first-child{grid-column:2;grid-row:1}.pdp-art{grid-column:1;grid-row:1;padding:8px}.pdp-art img.pimg,.pdp-art .art,.pdp-art .slab{max-width:100%}.pdp-info h1{font-size:26px}}
@media (max-width:860px){.buy-chips button{min-height:44px}}

/* ---------- listings by grade, slab details */
.lgrp-h{font:700 15px var(--f-body);margin:18px 0 8px;display:flex;gap:6px;align-items:baseline}
.lgrp-h:first-of-type{margin-top:4px}
.slab-more{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;width:100%;font-size:12.5px}
.subg summary{cursor:pointer;color:var(--spruce);font-weight:600;min-height:28px;display:inline-flex;align-items:center}
.subg dl{display:grid;grid-template-columns:repeat(2,auto);gap:2px 12px;margin:4px 0 0}
.subg dl div{display:flex;gap:6px}
.subg dt{color:var(--muted)}.subg dd{margin:0;font-family:var(--f-mono);font-weight:600}
.cert{font-weight:600}
.vbadge{font:600 12px var(--f-body);padding:2px 8px;border-radius:999px;background:var(--spruce-soft);color:var(--spruce)}
@media (max-width:860px){.subg summary,.cert{min-height:44px;display:inline-flex;align-items:center}}

/* ---------- sell sheet: bottom sheet on phones, side panel on desktop */
.dlg.sheet{margin:0 0 0 auto;height:100%;max-height:100%;width:min(520px,100vw);border-radius:0;overflow:auto}
.dlg.sheet .dlg-in{gap:14px;padding:20px var(--gut) calc(24px + env(safe-area-inset-bottom,0px))}
.dlg.sheet .sellbox{border:0;max-width:none;background:none;padding-inline:var(--gut)}
/* Easy selling: "List it" stays within thumb reach while the sheet scrolls; empty slots on /sell take no gap. */
.dlg.sheet #lf-submit{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:1;box-shadow:0 0 0 8px var(--paper)}
.sell-start>div:empty{display:none}
.payouts-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.payouts-line p{margin:0;flex:1 1 220px}
.s-new{display:block;margin-top:4px}
@media (max-width:640px){.dlg.sheet{margin:auto 0 0;width:100vw;max-width:100vw;height:auto;max-height:92vh;border-radius:16px 16px 0 0}}
.price-ctx{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:-6px}
.slabf{display:grid;gap:12px}
.subg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:480px){.subg-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f-group.bad legend{color:var(--down)}
.f-group .err{font-size:12.5px;color:var(--down)}
.nf-search{width:min(480px,100%)}
@media (max-width:860px){.sugg button{min-height:44px}}

/* converted amounts: a small grey word instead of a glyph */
.about{font:500 max(11px,.62em)/1 var(--f-body);color:var(--muted);letter-spacing:0;vertical-align:.08em}

/* tiles: "Name · number", set line up to two lines, variant badges, one price in marketplace mode */
.tile-title{font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-title .tile-name{display:inline;-webkit-line-clamp:unset}
.tile-no{font-weight:500;color:var(--muted);font-family:var(--f-mono);font-size:.88em;letter-spacing:-.02em}
.tile-game{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.tile-badges .vbadge{font-size:11px;padding:1px 7px}
.tile-wait{visibility:hidden}

/* search: corrected-query note, quick game chips, For sale now */
.fixnote{margin:4px 0 0;font-size:14px;color:var(--ink)}
.g-quick{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:4px 0 14px}
.chip-toggle{min-height:40px;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14px}
.chip-toggle[aria-pressed=true]{background:var(--spruce);border-color:var(--spruce);color:var(--surface)}
.empty .pop{justify-content:center;margin-top:8px}
@media (max-width:860px){.chip-toggle,.g-quick .seg button{min-height:44px}}

/* import: paste a list; drop zone wording per device; drafts: lasting live banner, sticky bulk bar on phones */
.on-phone{display:none}
@media (max-width:600px),(pointer:coarse){.on-desk{display:none}.on-phone{display:inline}}
.paste textarea{width:100%;min-height:96px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:10px 12px;font:15px/1.4 var(--f-mono);resize:vertical}
.paste-row select{height:46px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding-inline:8px;min-width:0;max-width:50%}
.live-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.live-banner p{margin:0}
@media (max-width:900px){.bulk{position:sticky;bottom:0;top:auto;z-index:6}}

/* checkout summary collapses to one line on phones (U20) */
.co-sum-d > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:44px}
.co-sum-d > summary::-webkit-details-marker{display:none}
.co-sum-d > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);align-self:center}
.co-sum-d[open] > summary::after{transform:rotate(225deg)}
.co-sum-line{font-family:var(--f-mono);font-size:14px;margin-left:auto}
.co-sum-d[open] .co-sum-line{display:none}
.co-sum-d{display:grid;gap:16px}
.co-sum-d[open]{gap:16px}
/* marketplace home (U25) */
.trust-line{margin:28px 0 0;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:560px){.fan-wrap{display:none}}
/* static skeleton reserves the page height (U26) */
#app{min-height:100vh}
/* list view on set pages (U27) */
.view-seg button{min-width:44px}
.res-tools .res-tools{display:contents}
.grid.list{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.grid.list .tile{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"a b p";align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--line)}
.grid.list .tile:first-child{border-top:0}
.grid.list .tile-art{grid-area:a;width:48px;aspect-ratio:63/88}
.grid.list .tile:hover .tile-art{transform:none}
.grid.list .tile-body{display:contents}
.grid.list .tile-title,.grid.list .tile-r,.grid.list .tile-badges{grid-area:b}
.grid.list .tile-title{align-self:start;margin-top:2px}
.grid.list .tile-r{align-self:end;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.grid.list .tile-badges{display:none}
.grid.list .tile-row,.grid.list .tile-count{grid-area:p;justify-self:end;margin:0}
.grid.list .tile-count{align-self:end;font-size:12px}
.grid.list .tile-row{align-self:start}
.tile-r{display:none}
.grid.list .tile-r{display:block}
/* filter sheet: results button stays reachable (U29) */
@media (max-width:860px){.f-done{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));margin-bottom:-4px;box-shadow:0 -10px 16px -6px var(--surface)}}
/* header buttons at least 44 px wide (U38) */
#langBtn,.acct-btn{min-width:44px;justify-content:center}

/* ---------- account dashboards (Contract 4) */
.acct{gap:16px}
.acct-tabs{position:relative;display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none;margin-bottom:8px}
.acct-tabs a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--muted);text-decoration:none;font-weight:600;border-bottom:3px solid transparent}
.acct-tabs a[aria-current=page]{color:var(--ink);border-bottom-color:var(--spruce)}
@media (max-width:420px){.acct-tabs:not(.acct-sub) a{padding:0 10px}}
.efade{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent)}
.acct-sub{border-bottom:0;margin:-8px 0 8px;gap:2px}.acct-sub a{padding:0 12px;font-size:14.5px;border-bottom-width:2px}
.olist{gap:10px}.olist li>.orow{flex:1 1 100%;min-width:0}
.orow{display:grid;gap:4px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none}
.orow:hover{border-color:var(--muted)}
.orow-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.orow-s{display:grid;gap:2px;font-size:13.5px}
.st{font:600 12px var(--f-body);padding:2px 9px;border-radius:999px;background:var(--sunk);color:var(--ink);white-space:nowrap}
.st-shipped,.st-paid,.st-c_seller_replied{background:color-mix(in srgb,var(--c-lp) 18%,transparent)}
.st-delivered,.st-c_refunded{background:color-mix(in srgb,var(--up) 18%,transparent)}
.st-pending,.st-c_open,.st-c_escalated,.st-problem{background:color-mix(in srgb,var(--star) 20%,transparent)}
.st-cancelled,.st-refunded{background:color-mix(in srgb,var(--down) 14%,transparent)}
.back{margin:0}.back a{display:inline-flex;align-items:center;min-height:44px}
.back a::before{content:"\2190";margin-right:6px}
.ohead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ohead h2{font-size:24px}
.ship-in{display:grid;gap:10px;padding-block:12px}
.ship-st{margin:0;font-size:14px}
.ship-acts{display:flex;gap:8px;flex-wrap:wrap}
.mini-form{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.mini-form h3{font-size:17px}
.mini-form textarea,.fld textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:10px 12px;font:inherit;font-size:16px}
.stars{display:flex!important;flex-direction:row;gap:2px;flex-wrap:wrap}
.stars legend{width:100%}
.star-opt{position:relative;cursor:pointer;font-size:30px;line-height:1;color:var(--line);min-width:44px;min-height:44px;display:inline-grid;place-items:center}
.star-opt input{position:absolute;opacity:0;width:1px;height:1px}
.stars:has(.star-opt:nth-of-type(1) input:checked) .star-opt:nth-of-type(-n+1),.stars:has(.star-opt:nth-of-type(2) input:checked) .star-opt:nth-of-type(-n+2),
.stars:has(.star-opt:nth-of-type(3) input:checked) .star-opt:nth-of-type(-n+3),.stars:has(.star-opt:nth-of-type(4) input:checked) .star-opt:nth-of-type(-n+4),
.stars:has(.star-opt:nth-of-type(5) input:checked) .star-opt:nth-of-type(-n+5){color:var(--star)}
.star-opt:has(input:focus-visible){outline:2px solid var(--spruce);outline-offset:2px;border-radius:6px}
.receipt .rcpt{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0}
.receipt dt{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.receipt dd{margin:2px 0 0}
.claim-n{margin:0}
.claim-photos{display:flex;gap:8px;flex-wrap:wrap}
.claim-photos img{border-radius:8px;object-fit:cover;display:block}
.thread{gap:10px}
.msg{display:grid!important;gap:2px;padding:10px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.msg p{margin:0;white-space:pre-line}
.msg-seller{border-left:3px solid var(--spruce)}
.msg-me{background:var(--sunk)}
.msg-support{border-left:3px solid var(--star)}
.msg-new{font-size:12px;font-weight:650;border-radius:999px;padding:1px 8px;background:var(--spruce);color:#fff;margin-left:4px}
.msgs .msg-list{margin:0 0 12px}
.msgs .notice{margin:6px 0 0}
.blocks{display:grid;gap:6px}
.blocks li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.away-f{align-items:end;gap:12px}
.away-f .btn{min-height:44px}
.sales-seg a{display:inline-flex;align-items:center;height:34px;padding-inline:12px;border-radius:6px;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none}
.sales-seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
@media (max-width:860px){.sales-seg a{min-height:44px}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpis div{display:grid;gap:4px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.kpis b{font-size:22px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.ptable{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
.ptable th,.ptable td{padding:10px 12px;border-top:1px solid var(--line);text-align:left}
.ptable thead th{border-top:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ptable .num{text-align:right}
.ptable tr.rev td{color:var(--muted);text-decoration:line-through}
.kpi-line{font-size:18px}
.acct{grid-template-columns:minmax(0,1fr)}
#acctBody{min-width:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}

/* SEO: plain factual summary on product, set and game pages (facts.js; also server-rendered by worker/seo.js) */
.facts{max-width:75ch;margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- account area (CMS): overview, listing manager, To do, timeline, packing slips */
.acct-btn{position:relative}
.acct-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#C8102E;color:#fff;font:700 11px/18px var(--f-body);text-align:center}
.tab-n{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:#C8102E;color:#fff;font:700 12px var(--f-body)}
.home-sec{display:grid;gap:12px}
.home-sec + .home-sec{margin-top:16px}
.home-sec .sec-h h2{font-size:22px}
.todo{display:grid;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.todo-h{margin:0;font-weight:650}
.todo-acts{display:flex;flex-wrap:wrap;gap:8px}
.todo-list{gap:4px}
.todo-list a{display:inline-flex;align-items:center;min-height:44px}
.home-kpis a.kpi{display:grid;gap:4px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none}
.home-kpis a.kpi:hover{border-color:var(--muted)}
.home-kpis b{font-size:22px}
@media (max-width:560px){.home-kpis{grid-template-columns:1fr 1fr}.home-kpis b{font-size:18px}}
/* order timeline */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;counter-reset:tl}
.tl li{position:relative;display:grid;gap:2px;padding-top:18px;font-size:14px}
.tl li::before{content:"";position:absolute;top:5px;left:0;right:-8px;height:2px;background:var(--line)}
.tl li:last-child::before{right:0}
.tl li.done::before{background:var(--spruce)}
/* A done step must not pick up the confirmation page's .done block (720 px, centred, 24 px gap). */
.tl li.done{max-width:none;margin-inline:0;gap:2px}
.tl-dot{position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.tl li.done .tl-dot{background:var(--spruce);border-color:var(--spruce)}
.tl li.tl-problem .tl-dot{background:var(--star);border-color:var(--star)}
.tl li:not(.done) .tl-t{color:var(--muted)}
.tl-t{font-weight:600}
.tl-trk{display:block;overflow-wrap:anywhere}
/* Phones: the package timeline runs down the page, one step per line. */
@media (max-width:600px){
  .tl:not(.ret-tl){grid-template-columns:minmax(0,1fr);gap:0}
  .tl:not(.ret-tl) li{display:block;padding:0 0 14px 26px}.tl:not(.ret-tl) .tl-t{margin-right:8px}
  .tl:not(.ret-tl) li::before{top:14px;bottom:0;left:5px;right:auto;width:2px;height:auto}
  .tl:not(.ret-tl) li:last-child{padding-bottom:0}.tl:not(.ret-tl) li:last-child::before{display:none}
  .tl-trk a{display:inline-flex;align-items:center;min-height:44px}
}
/* sales: To do */
.todo-sec{display:grid;gap:10px}
.todo-sec + .todo-sec{margin-top:12px}
h2.h3{font-size:19px}
.late-p{color:var(--down)!important}
.sale .notice{margin:0 14px 14px}
.pack li{gap:4px 8px}
.sales-seg .tab-n{height:18px;min-width:18px;font-size:11px}
/* drafts: the bulk bar stays reachable on phones too; publish summary */
/* Phones: the header slides away on scroll down (app.js autoHideHeader); bars stuck under it follow. */
@media (max-width:820px){.top{transition:transform .2s ease}.top.hide{transform:translateY(-100%)}}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.top{transition:none}}
.pub-sum ul{margin:6px 0 10px;padding-left:1.2em}
/* packing slips: printed alone */
.slips{display:none}
@media print{
  body.print-slips > *:not(#slips){display:none!important}
  body.print-slips .slips{display:block}
  .slip{page-break-after:always;break-after:page;font:13pt/1.45 var(--f-body);color:#000;padding:8mm 4mm}
  .slip:last-child{page-break-after:auto;break-after:auto}
  .slip-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:10px;font-size:16pt}
  .slip-to{margin:12px 0 16px}
  .slip-to address{font-style:normal;font-size:15pt;line-height:1.4}
  .slip table{width:100%;border-collapse:collapse}
  .slip th,.slip td{border-bottom:1px solid #999;padding:6px 4px;text-align:left;vertical-align:top}
  .slip-foot{margin-top:18px}
}

/* ---------------- Editorial guides (views/guides.js, rendered by the worker too) and the editor (views/editorial.js) */
.guides,.guide{max-width:760px}
.guides>h1,.guide-title{font-size:clamp(28px,5vw,42px)}
.guide-lede{font-size:18px;color:var(--muted);margin:12px 0 0;max-width:62ch}
.guide-h{margin-bottom:22px}
.guide-body{font-size:17px;line-height:1.65}
.guide-body>*{margin:0 0 18px}
.guide-body h2{font-size:26px;margin-top:34px}
.guide-body h3{font-size:21px;margin-top:28px}
.guide-body h4{font-size:17px;margin-top:22px}
.guide-body a:not(.tile):not(.btn){color:var(--spruce);text-underline-offset:3px}
.guide-body ul,.guide-body ol{padding-left:1.4em}
.guide-body li+li{margin-top:6px}
.guide-body blockquote{margin-inline:0;padding:4px 0 4px 18px;border-left:3px solid var(--spruce);color:var(--muted)}
.guide-body blockquote>:last-child{margin-bottom:0}
.guide-body code{font:14px var(--f-mono);background:var(--sunk);padding:1px 5px;border-radius:4px}
.guide-body pre{background:var(--sunk);padding:14px;border-radius:var(--r-sm);overflow:auto}
.guide-body pre code{background:none;padding:0}
.guide-body img:not(.pimg){max-width:100%;height:auto;border-radius:var(--r-sm)}
.guide-body hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.md-table{overflow-x:auto}
.md-table table{border-collapse:collapse;width:100%;font-size:15px}
.md-table th,.md-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.md-table th{font-weight:650}
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px;font-size:15px;line-height:1.5}
@media (max-width:520px){.guide-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
.guide-set,.guide-movers{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;font-size:15px;line-height:1.5}
.guide-set>*,.guide-movers>*{margin:0}
/* A long set or card name wraps inside its button on phones instead of widening the page (report 2026-11-06). */
.guide-set .btn,.zr-note .btn{white-space:normal;height:auto;min-height:36px;padding-block:7px;line-height:1.3;max-width:100%;text-align:center}
@media (pointer:coarse),(max-width:860px){.guide-set .btn,.zr-note .btn{min-height:44px}}
.guide-embed-h{font:700 18px/1.2 var(--f-display);font-stretch:112%}
.guide-embed-h a{color:inherit}
.guide-set-facts{color:var(--muted)}
.guide-miss{display:block;background:var(--red-soft);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font-size:14px}
mark.guide-miss{display:inline;padding:0 4px}
.guide-body h2,.guide-body h3{scroll-margin-top:120px}
.guide-filters{display:grid;gap:8px;margin:22px 0 26px}
.guide-chips{display:flex;flex-wrap:wrap;gap:8px}
.guide-chips .g-chip{color:inherit;text-decoration:none}
.guide-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.guide-card{display:grid;gap:6px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.guide-card>a{display:grid;gap:12px;color:inherit;text-decoration:none}
.guide-card img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r);background:var(--sunk)}
.guide-card-t{font:750 21px/1.2 var(--f-display);font-stretch:112%}
.guide-card>a:hover .guide-card-t{text-decoration:underline}
.guide-card p{margin:0}
.ed{display:grid;gap:16px}
.ed-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ed-top h1{font-size:30px}
.ed-top p{margin:0}
.ed>p{margin:0}
.ed-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ed-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;border-bottom:1px solid var(--line);padding:10px 0}
.ed-row{flex:1 1 280px;display:grid;gap:4px;color:inherit;text-decoration:none;min-height:44px}
.ed-row-t{font-weight:650;font-size:16px}
.ed-row:hover .ed-row-t{text-decoration:underline}
.ed-row-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ed-view{color:var(--spruce)}
.ed-st{font-size:12px;font-weight:650;border-radius:999px;padding:2px 9px;background:var(--sunk);color:var(--muted)}
.ed-st.pub{background:var(--spruce-soft);color:var(--spruce)}
.ed-st.sched{background:color-mix(in srgb,var(--star) 18%,transparent);color:var(--ink)}
.ed-tpl{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.ed-tpl h2{font-size:18px;margin:0}
.ed-tpl p{margin:0}
.ed-tpl-list{display:flex;flex-wrap:wrap;gap:8px}
.ed-tpl-list .btn,.ed-tools .btn,.ed-cover .btn,.ed-ins-row .btn{min-height:44px}
.ed-cover{display:flex;gap:8px;min-width:0}
.ed-cover input{flex:1;min-width:0}
.ed-tools{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.ed-ins{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;margin-bottom:6px}
.ed-ins[hidden]{display:none}
.ed-ins p{margin:0}
.ed-ins-row{display:flex;gap:8px}
.ed-ins-row input{flex:1;min-width:0}
.ed-ins-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:320px;overflow:auto}
.ed-ins-hit{display:grid;gap:1px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;color:inherit;font:inherit;cursor:pointer;min-height:44px}
.ed-ins-hit:hover,.ed-ins-hit:focus-visible{background:var(--sunk)}
.ed-ins-t{font-weight:650}
.ed-more{border-top:1px solid var(--line);padding-top:10px}
.ed-more>summary{cursor:pointer;color:var(--spruce);font-weight:600;font-size:15px;min-height:44px;display:flex;align-items:center}
.ed-more-in{display:grid;gap:16px;padding-top:8px}
@media (max-width:420px){.ed-cover{flex-wrap:wrap}.ed-cover .btn{flex:1}.ed-row2{grid-template-columns:1fr}}
.ed-status{font-size:14px;color:var(--muted)}
.ed-status a{color:var(--spruce)}
.ed-restore{display:grid;gap:8px;background:var(--spruce-soft);border-radius:var(--r);padding:14px 16px}
.ed-restore p{margin:0}
.ed-cols{display:grid;gap:24px;align-items:start}
.ed-form{display:grid;gap:16px;min-width:0}
.ed-form textarea{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:10px 12px;width:100%;min-width:0;font:16px/1.5 var(--f-body);color:inherit;resize:vertical}
.ed-form #edBody{font:15px/1.6 var(--f-mono);min-height:320px}
.ed-form textarea:focus{outline:none;border-color:var(--spruce);box-shadow:0 0 0 3px color-mix(in srgb,var(--spruce) 22%,transparent)}
.fld.bad textarea{border-color:var(--down)}
.ed-slug{display:flex;align-items:center;gap:4px;min-width:0}
.ed-slug .fine{white-space:nowrap}
.ed-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ed-tags{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.ed-tags legend{font-size:13px;font-weight:600;padding:0;margin-bottom:6px}
.ed-check{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ed-check input{width:20px;height:20px;accent-color:var(--spruce)}
.ed-count.warn{color:var(--star)}
.ed-help summary{cursor:pointer;color:var(--spruce);font-weight:600;font-size:14px;min-height:32px}
.ed-help .fine{margin:6px 0}
.ed-cheat{font:13px/1.6 var(--f-mono);background:var(--sunk);padding:10px 12px;border-radius:var(--r-sm);overflow:auto;margin:0}
.ed-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ed-del{margin-left:auto;color:var(--down)}
.ed-langs{justify-self:start}
.ed-langs button{height:44px;padding-inline:16px}
.ed-ver{display:inline-flex;align-items:center;gap:6px}
.ed-preview{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.ed-preview .eyebrow{margin-bottom:12px}
.ed-preview .guide-title{font-size:30px}
@media (max-width:1099px){.ed-cols[data-tab="preview"] .ed-form,.ed-cols:not([data-tab="preview"]) .ed-preview{display:none}}
@media (min-width:1100px){
  .ed-tabs{display:none}
  .ed-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ed-preview{position:sticky;top:130px;max-height:calc(100vh - 150px);overflow:auto}
}
/* ---- UX review fixes (2026-10-18): one block, see the finding ids (V1-V25) ---- */
/* V3: the header keeps its width while the app starts (server-rendered currency, account and cart). */
.auth-area{justify-content:flex-end}
/* V12: separators drawn by CSS, never alone at the start of a line. */
.tile-no{white-space:nowrap}
.tile-no::before{content:"·";margin:0 .3em}
.dots{display:inline-flex;flex-wrap:wrap;align-items:center;row-gap:2px}
.dots>*{white-space:nowrap}
.dots>*+*::before{content:"·";margin:0 .45em;color:var(--muted)}
.trust-line>span+span::before{content:"·";margin-right:6px}
.s-meta,.buy-sub{column-gap:12px}
/* V11: no change is neutral. */
.chg.flat{color:var(--muted)}
/* V13: segmented controls stay one row and scroll sideways on phones; grid and list are icons. */
@media (max-width:600px){
  .seg{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button,.seg a,.seg label.segopt{flex:none;white-space:nowrap}
}
.view-seg button{display:inline-grid;place-items:center;padding-inline:10px}
.badge-up{max-width:none;overflow:visible}
/* V1: the optional "For sale now" chip keeps its row from the first paint. */
.g-quick{min-height:40px}
.set-hits{margin:4px 0 16px}
.set-hits .setlist{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
/* Save and Sell sit under the buy box, secondary; nothing listed: the buy box says so with Alert me. */
.pdp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:-10px}
.pdp-acts [hidden],.lists[hidden]{display:none}
.buy-one{grid-template-columns:1fr}.buy-none p{margin:4px 0 0}
/* V10: Riftbound keywords. */
.kw{font-weight:700;letter-spacing:.01em}
/* V24: the details grid has no empty filler cells. */
.attr-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* V15: 44 px targets for row checkboxes and the packing slip. */
.ml-sel{display:grid;place-items:center;min-width:44px;min-height:44px;margin:-8px 0;cursor:pointer}
.sale-more .btn,.btn[data-slip],.pdp-acts .btn{min-height:44px}
/* V17: not found, inside the site chrome. */
.nf{display:grid;justify-items:center;text-align:center;gap:14px;padding:48px 0 24px}
.nf h1{font-size:30px}
.nf .pop{justify-content:center;margin-top:0}
.nf p{margin:0}
/* Saved cards and alerts (account). */
.saved-row,.alert-row{display:flex;gap:10px;align-items:center}
.saved-row .orow,.alert-row .orow{flex:1;min-width:0}
.alert-row.unread .orow{border-color:var(--spruce)}
.risk-note{margin:0 0 14px}
.fp-note{margin:0 0 14px}
.ptable .fp-saved{display:block;font-size:12px;color:var(--muted);white-space:nowrap}
/* Guides about this card or set (worker/editorial.js relatedGuides). */
.guides-rel{margin-top:28px}
.res-h .guides-rel{margin-top:10px}
.res-h .guides-rel h2{font-size:15px}
.guide-links{display:grid;gap:8px}
.guide-links li{display:grid;gap:2px}
.guide-links a{font-weight:600}
.guide-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.latest-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),340px))}.latest-cards.n4{grid-template-columns:repeat(4,1fr)}.latest-cards.n3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1099px){.latest-cards.n4{grid-template-columns:1fr 1fr}}@media (max-width:699px){.latest-cards.n3{grid-template-columns:1fr}}
.gcard{display:grid;gap:6px;align-content:start;color:inherit;text-decoration:none}
.gcard img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:10px;background:var(--line)}
.gcard b{font-size:16px;line-height:1.3}.gcard:hover b{text-decoration:underline}
.gcard .fine{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ---- end UX review fixes ---- */
/* ---- deals (views/deals.js): home and game rows, /deals page ---- */
.deal-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:4px}
.deal-fin{font-size:12px;color:var(--muted)}
.deal-save{font-size:13px;font-weight:600;line-height:1.3;color:var(--up)}
.deal-tools{flex-direction:column;align-items:flex-start;margin-bottom:20px}
.seg-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;border-radius:6px;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none}
.seg-links a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.seg-links a:focus-visible{outline-offset:2px}
.deal-how{margin-top:28px;max-width:75ch;font-size:14px;line-height:1.55;color:var(--muted)}
.deal-how{border-top:1px solid var(--line)}.deal-how summary{display:flex;gap:8px;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--spruce);list-style:none}.deal-how summary::-webkit-details-marker{display:none}.deal-how summary::before{content:'+';font-size:18px;width:14px}.deal-how[open] summary::before{content:'\2212'}
.deal-chip{display:inline-block;position:relative}
.deal-chip summary{display:inline-flex;align-items:center;min-height:44px;min-width:44px;list-style:none;cursor:pointer}
.deal-chip summary::-webkit-details-marker{display:none}
.deal-pill{font:600 11.5px var(--f-body);padding:2px 8px;border-radius:999px;color:var(--surface);background:var(--up)}
.deal-chip[open] .deal-pill{outline:2px solid var(--up);outline-offset:1px}
.deal-why{display:block;font-size:13px;line-height:1.35;color:var(--ink);margin:-6px 0 6px;max-width:42ch}

/* shop-ux: shopping flow (2026-10-29, docs/UX.md "Shopping"). Tokens only (no raw colours), so dark mode follows. */
/* Quick add: a real button beside the tile link, placed over the art, so wrapping the tile moves nothing. */
.tile-q{position:relative;display:flex;flex-direction:column;min-width:0}
.tile-q>.tile{flex:1}
.qa-btn{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--f-body);box-shadow:var(--shadow);cursor:pointer}
.qa-btn:hover{border-color:var(--spruce);color:var(--spruce)}
.qa-btn:focus-visible{outline:2px solid var(--spruce);outline-offset:2px}
.rail .qa-btn{top:6px;right:6px}
.grid.list .tile-q .qa-btn{position:static;align-self:center;margin:0 14px 8px auto;box-shadow:none}
.grid.list .tile-q+.tile-q .tile{border-top:1px solid var(--line)}
.grid.list .tile-q .tile{border-top:0}
.qa-sheet .qa-card{display:flex;gap:12px;align-items:center}
.qa-sheet .qa-card .thumb{width:48px}
.qa-name{font-size:16px}
.qa-body{display:grid;gap:12px;min-height:236px;align-content:start}
.qa-sk{height:220px}
.qa-offer{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.qa-copy .m{display:inline-flex;gap:4px;vertical-align:middle}
.qa-seller{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.qa-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qa-step{height:44px}.qa-step button{width:44px;height:42px;font-size:18px}
.qa-all{justify-self:center}
/* Delivered prices and the Canada chip */
.dl{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.dl-total{font:600 28px/1.1 var(--f-mono);letter-spacing:-.02em}
.dl-note,.buy-dl{font-size:14px;color:var(--ink)}
.dl-parts{display:block}
.ship-ca{display:inline-flex;align-items:center;font:600 11.5px var(--f-body);padding:2px 8px;border-radius:999px;border:1px solid var(--spruce);color:var(--spruce);white-space:nowrap}
.buy-why{font-size:12px;color:var(--muted)}
.buy-why::before{content:"· "}
.buy-prov{max-width:320px}
.l-price small{display:block}
/* More copies: ungraded and graded apart */
.copies-kind{margin:4px 0}
/* Cart packages */
.pkg-from{font-size:13px;color:var(--muted)}
.pkg-meth{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.meth{font:600 11.5px var(--f-body);padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.meth-tracked{border-color:var(--spruce);color:var(--spruce)}
.meth-prot{background:var(--spruce-soft);border-color:var(--spruce-soft);color:var(--ink)}
.meth-warn{border-color:var(--red);color:var(--red-ink)}
.line-rm{font-size:13px;color:var(--muted);padding:0 6px;min-height:44px}
.line-rm:hover{color:var(--down)}
.grp .ship-ca{margin-left:6px;vertical-align:middle}
.co-guest{color:var(--muted)}
/* Confirmation and order deadlines */
.conf-pkgs{display:grid;gap:10px}
.conf-pkgs>ul{display:grid;gap:10px}
.conf-pkg{display:grid;gap:6px;padding:12px 14px}
.dl-list{display:grid;gap:4px;margin:4px 0 8px;color:var(--muted)}
/* Zero-result recovery */
.zr-note{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}
.zr-note .fixnote{margin:0}
#gradedNote .btn{margin-left:6px;vertical-align:middle}
@media (max-width:640px){.qa-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.qa-btn{padding:0;justify-content:center}}
.conf-link{display:grid;gap:8px}
.conf-link input{flex:1;min-width:0;min-height:44px;font:13px var(--f-mono);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 10px}
.conf-keep,.conf-next{display:grid;gap:8px;padding:14px 16px}
.conf-next{min-width:0}.conf-next .btn{white-space:normal;height:auto;min-height:46px;text-align:center}
.guest-keep{margin-top:12px}
/* end shop-ux */
/* ---- SEO, GEO and visual pass (2026-10-19, docs/SEO.md and docs/UX.md "Visual rules") ---- */
/* Forced light theme on a dark system: form controls and scrollbars stay light too. */
:root{color-scheme:light}
:root[data-theme="light"]{color-scheme:light}
/* Safe areas (viewport-fit=cover): the sticky header fills the status bar area instead of leaving a gap above it;
   content keeps clear of a landscape notch. */
.top{top:0;padding-top:env(safe-area-inset-top,0px)}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
/* GEO: the answer-first line under a card or set H1, plain text in the ink colour. */
.answer{max-width:75ch;margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.facts.answer{margin-top:10px}
/* Set hub: result count with the optional "For sale now" chip (its row is reserved when the marketplace is open). */
.res-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:8px}
.res-line:has(#forSale){min-height:44px}
/* Set hub: the most valuable cards, one row (scrolls sideways on phones). */
.topcards{margin:4px 0 22px;display:grid;gap:8px;min-width:0}
.topcards ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
.topcards ol::-webkit-scrollbar{display:none}
.topcards li{flex:none}
.topcards a{display:flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
.topcards a:hover{border-color:var(--muted)}
.topcards .tc-n{font-weight:600}
.topcards .price{font-weight:600}
@media (min-width:861px){.topcards ol{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}
/* Card page: other printings, as a list of links. */
.printings .setlist .tile-no{margin-left:0}
/* Footer: guides and the price methodology. */
/* Price methodology page. */
.method-sec{margin-top:30px;gap:10px}
.g-acts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:30px}
.method-sec h2{font-size:22px}
.method-sec p{margin:0;max-width:70ch;font-size:16px;line-height:1.6}
/* Landing pages (views/hub.js) and their links on game pages. */
.hub-links,.res-h .hub-acts{margin-top:12px}
.hub-t{min-width:0}.hub-t td{vertical-align:middle}.hub-t tbody tr{position:relative}.hub-t tbody tr:hover{background:var(--surface)}
.hub-t td a{font-weight:600;color:var(--ink);text-decoration:none}.hub-t td a::after{content:'';position:absolute;inset:0}
.hub-t small{display:block;color:var(--muted);font-size:12px}.hub-t .num{white-space:nowrap}.hc{display:flex;gap:10px;align-items:center}
.hub-t .narrow{display:none}
@media (max-width:600px){.hub-t .wide{display:none}.hub-t .narrow{display:inline}.hub-t th,.hub-t td{padding:10px 6px}.hub-t .num{white-space:normal;width:38%}}
.method-sec h3{font-size:17px;margin:8px 0 0}
/* Card image standard: 63:88 frame with reserved height; the card page image opens large on tap or click. */
.pdp-art img.pimg[role=button]{cursor:zoom-in}
.pdp-art img.pimg[role=button]:focus-visible{outline:2px solid var(--spruce);outline-offset:4px}
.zoom-dlg{border:0;padding:0;margin:auto;background:transparent;max-width:100vw;max-height:100vh;overflow:visible}
.zoom-dlg::backdrop{background:rgb(0 0 0 / .85)}
.zoom-dlg img{display:block;width:auto;height:auto;max-width:min(94vw,716px);max-height:calc(100vh - 32px);border-radius:3.5%;cursor:zoom-out}
.zoom-x{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));width:44px;height:44px;background:rgb(255 255 255 / .92);color:#13201B}
/* Contrast (visual.py): an active chip keeps light text on spruce wherever it is a link (guides filters inherited ink). */
a.g-chip.on,.guide-chips a.g-chip.on{color:var(--surface)}
/* Line length: notes and summaries stay readable on wide screens. */
.pdp-info .fine,.guide-set-facts,.guides>p,.guide-card p{max-width:75ch}
/* Seller policies (2026-10-21): the signature reminder in the ship form, the return box on a claim, the US comparison. */
.ret-box{display:grid;gap:10px;padding-block:14px;margin:12px 0}
.ret-box p,.ret-box h3{margin:0}
.ret-box .mini-form{border:0;padding-block:0;background:none;max-width:560px}
.ret-box p{max-width:75ch}
.ret-tl{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));max-width:760px}
.ret-tl li{font-size:13px;padding-right:4px}
/* Phones: five short steps on one row; the dates are in the sentences below. */
@media (max-width:479px){.ret-tl{gap:4px}.ret-tl li{font-size:12px}.ret-tl .fine{display:none}}
.ret-fix summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--spruce)}
.buy-vs{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:60ch}
/* ---- help chat launcher (help.js). The panel's styles load with the chat on the first click (assets/assistant.css). ---- */
.help-fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:33;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 15px;border:0;border-radius:999px;background:var(--spruce);color:var(--surface);font-weight:650;box-shadow:var(--shadow)}
.help-fab:hover{filter:brightness(1.08)}
.help-fab{transition:transform .2s ease}.help-fab.away{transform:translateY(calc(100% + 120px))}
@media (prefers-reduced-motion:reduce){.help-fab{transition:none}}
.help-fab[aria-busy=true]{cursor:progress}
body.has-buybar .help-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
/* Phones with a buy or checkout bar at the bottom leave the Help button out
   (it sat on the card's details; Help stays in the footer). */
@media (max-width:599px){body.has-buybar .help-fab,body:has(.cart-bar) .help-fab{display:none}}
body.hp-on .help-fab{visibility:hidden}
body.has-help>footer{padding-bottom:72px}   /* the footer's last links scroll clear of the button */
@media (max-width:599px){.help-fab{width:52px;height:52px;padding:0;justify-content:center}.help-fab .help-l{display:none}}
@media print{.help-fab{display:none}}
/* Marketplace home: the feed skeleton keeps the row's height while listings load; the live counts under the title */
.feed-sk{height:300px;border-radius:var(--r)}.mkt-stats{font-weight:650;margin:2px 0 0}.fs-sort select{height:44px}
.l-ph{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px 0 0;border:0;background:none;cursor:pointer;color:var(--ink);font:inherit;font-size:13px;font-weight:600}.l-ph img{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.buy-guar{margin:0;color:var(--muted)}.buy-guar b{color:var(--ink)}.pguide .refbox{margin-bottom:16px}
/* For sale: filters in a column left of the cards on wide screens; on phones behind "Filters (n)" next to Sort. */
.fs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end;width:100%}
.fs-fbtn{min-height:44px;width:100%;gap:8px}
.fs-f{display:none}.fs-f.open{display:block;margin-bottom:20px}
.fs-fh{display:none;margin:0;font:700 17px var(--f-display);text-transform:none;letter-spacing:0;color:var(--ink)}
.fs-form{display:grid;gap:14px;padding-top:10px}.fs-set{border:0;margin:0;padding:0;display:grid;gap:2px}.fs-set legend{margin-bottom:4px}
.fs-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 12px}
.fs-form .f-opt{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.fs-form .f-opt input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--spruce)}
.fs-price{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fs-form input:not([type=checkbox]):not([type=radio]),.fs-form select{height:44px;width:100%}.fs-acts{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:900px){
  .fs-row{display:flex;gap:16px;width:auto}.fs-fbtn{display:none}.fs-fh{display:block}
  .fs-main{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
  .fs-f,.fs-f.open{display:block;position:sticky;top:calc(var(--hdr,72px) + 12px);max-height:calc(100vh - var(--hdr,72px) - 24px);overflow:auto;padding:2px 4px 16px 2px;margin:0}
  .fs-opts{grid-template-columns:1fr}.fs-form .f-opt{min-height:34px}.fs-form{gap:16px}
}
.deal-tools:has(.fs-row){flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
ol.g-list{list-style:none;counter-reset:g;padding-left:0}ol.g-list li{counter-increment:g;position:relative;padding-left:1.9em}ol.g-list li::before{content:counter(g) ".";position:absolute;left:0;font-weight:700;color:var(--spruce)}
/* Phones: 44 px targets. Inline links get the height from padding (the line does not move); the seller's name on a
   listing row is a block, so its padding is taken back with a negative margin. */
@media (max-width:599px){
  .chip-btn,.cart-btn{min-width:44px;justify-content:center}.crumbs a{min-width:44px}.seg button{min-width:44px}.f-opt{min-height:44px}
  .buy-sub a,.buy-guar a{padding-block:14px}.s-name{padding-block:11px;margin-block:-11px}
}
@media (max-width:600px){.a44{position:relative}.a44::after{content:"";position:absolute;inset:-11px -4px}}
.hero-mkt h1{font-size:clamp(28px,4vw,46px);margin:0}.app-scan{display:none}.hero-mkt .fan{height:270px}
@media (max-width:560px){.hero-mkt .lede,.hero-mkt .pop,.hero-mkt .hero-acts a+a,.hero-mkt~* .sec-sub,.guide-cards .fine{display:none}.hero-mkt .hero-acts{margin-top:14px}.hero-mkt .hero-acts .btn{flex:1 1 auto}#feed .sec:first-child .rail{grid-auto-flow:row;grid-template-columns:1fr 1fr;overflow:visible}#feed .sec:first-child .rail>:nth-child(n+7){display:none}.gtiles{grid-template-columns:1fr 1fr}.gtile{padding:12px 14px}}