/* sst-tcg-market-20261021: "TCG Market" screen for /tcg-index — trading-terminal look in BOTH site themes: light is the
   default (html without data-sst-theme) and the dark palette applies under html[data-sst-theme="dark"], i.e. the site's own
   Dark / Light toggle (theme-toggle.js, sst:themechange) switches this screen too. SNKRDUNK + PriceCharting market data
   beside the shop's own price, photo and − / + add to cart for every PSA10 card and sealed box.
   Loaded by tcg-market.js (preview: appended to site.js; live: mu-plugin sst-tcg-market.php). Scope: everything is
   under #sst-tm; outside it only the page column / title of this one page is touched. */
article.sst-page:has(#sst-tm){max-width:none;padding-top:0;margin-top:0}
.sst-page-content:has(#sst-tm){max-width:none;padding-top:0;margin-top:0}
.sst-container:has(#sst-tm){padding-top:0}
body:has(#sst-tm) .pc[data-pc-root]{display:none !important}
article.sst-page:has(#sst-tm) > .sst-page-header, article.sst-page:has(#sst-tm) > .sst-page-breadcrumb, article.sst-page:has(#sst-tm) > nav.sst-page-breadcrumb{display:none}

/* ---------- tokens: LIGHT (default) ---------- */
#sst-tm{
  --tm-bg:#f3f5fa; --tm-bg2:#ffffff; --tm-panel:#ffffff; --tm-panel2:#f6f8fc; --tm-line:#e2e7f0; --tm-line2:#cbd4e3;
  --tm-fg:#111827; --tm-muted:#5b6780; --tm-dim:#8a95aa; --tm-ink:#ffffff;
  --tm-up:#0e9f5f; --tm-up-bg:rgba(14,159,95,.12); --tm-down:#e0245e; --tm-down-bg:rgba(224,36,94,.1);
  --tm-gold:#f0a500; --tm-gold-text:#b97a00; --tm-cyan:#0891b2; --tm-violet:#7c5cff; --tm-brand:#d4215f; --tm-brand2:#ff5a8a; --tm-brand-dark:#8b1646;
  --tm-glow1:rgba(212,33,95,.14); --tm-glow2:rgba(8,145,178,.12); --tm-gridline:rgba(17,24,39,.035);
  --tm-tape-bg:linear-gradient(90deg,#ffffff,#f3f5fa 50%,#ffffff); --tm-tile-bg:linear-gradient(160deg,#ffffff,#f6f8fc);
  --tm-card-bg:linear-gradient(180deg,#ffffff,#f8fafd); --tm-card-shadow:0 18px 40px -24px rgba(17,24,39,.35);
  --tm-media-bg:radial-gradient(260px 160px at 50% 65%, rgba(17,24,39,.08), rgba(17,24,39,.02) 70%);
  --tm-hover:rgba(17,24,39,.04); --tm-chip-bg:#ffffff; --tm-drawer-bg:#ffffff; --tm-dimmer:rgba(17,24,39,.45);
  --tm-cartbar-bg:#ffffff; --tm-toast-bg:#eefbf3; --tm-toast-err-bg:#fff1f4; --tm-tag-up-border:rgba(14,159,95,.35); --tm-tag-down-border:rgba(224,36,94,.35);
  --tm-title-grad:linear-gradient(90deg,#111827,#d4215f 55%,#b97a00); --tm-chart-text:#5b6780; --tm-chart-grid:rgba(17,24,39,.06); --tm-chart-border:#cbd4e3;
  --tm-area-top:rgba(240,165,0,.35); --tm-area-line:#d9930a; --tm-qty-bg:#f6f8fc;
  --tm-radius:14px; --tm-font:var(--sst-font-sans, "Figtree", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --tm-mono:"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  position:relative; color:var(--tm-fg); font-family:var(--tm-font); background:var(--tm-bg);
  margin:0 calc(50% - 50vw); padding:0 0 32px; width:100vw; box-sizing:border-box; font-size:14px; line-height:1.35;
  background-image:
    radial-gradient(1200px 500px at 15% -10%, var(--tm-glow1), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, var(--tm-glow2), transparent 60%),
    linear-gradient(var(--tm-gridline) 1px, transparent 1px), linear-gradient(90deg, var(--tm-gridline) 1px, transparent 1px);
  background-size:auto, auto, 36px 36px, 36px 36px;
}
/* ---------- tokens: DARK (site toggle) ---------- */
html[data-sst-theme="dark"] #sst-tm{
  --tm-bg:#0a0d14; --tm-bg2:#0f141f; --tm-panel:#131a28; --tm-panel2:#182134; --tm-line:#223049; --tm-line2:#2c3b57;
  --tm-fg:#e8edf6; --tm-muted:#8b9ab5; --tm-dim:#5d6b85; --tm-ink:#0a0d14;
  --tm-up:#22e37a; --tm-up-bg:rgba(34,227,122,.12); --tm-down:#ff4d6d; --tm-down-bg:rgba(255,77,109,.12);
  --tm-gold:#ffcf4a; --tm-gold-text:#ffcf4a; --tm-cyan:#3dd6ff; --tm-violet:#9d7bff;
  --tm-glow1:rgba(212,33,95,.22); --tm-glow2:rgba(61,214,255,.14); --tm-gridline:rgba(255,255,255,.025);
  --tm-tape-bg:linear-gradient(90deg,#0d1220,#111a2c 50%,#0d1220); --tm-tile-bg:linear-gradient(160deg,#131a28,#0f141f);
  --tm-card-bg:linear-gradient(180deg,#131a28,#0f141f); --tm-card-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  --tm-media-bg:radial-gradient(260px 160px at 50% 65%, rgba(255,255,255,.14), rgba(255,255,255,.03) 70%);
  --tm-hover:rgba(255,255,255,.04); --tm-chip-bg:#131a28; --tm-drawer-bg:#0f141f; --tm-dimmer:rgba(4,6,10,.72);
  --tm-cartbar-bg:#111a2c; --tm-toast-bg:#0f1a12; --tm-toast-err-bg:#1a0f12; --tm-tag-up-border:rgba(34,227,122,.35); --tm-tag-down-border:rgba(255,77,109,.35);
  --tm-title-grad:linear-gradient(90deg,#fff,#ffd3e1 45%,#ffcf4a); --tm-chart-text:#8b9ab5; --tm-chart-grid:rgba(255,255,255,.05); --tm-chart-border:#223049;
  --tm-area-top:rgba(255,207,74,.35); --tm-area-line:#ffcf4a; --tm-qty-bg:#0f141f;
}
#sst-tm *, #sst-tm *::before, #sst-tm *::after{box-sizing:border-box}
#sst-tm button{all:unset; box-sizing:border-box; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.2}
#sst-tm a{color:inherit}
#sst-tm canvas{max-width:none}
#sst-tm output{display:inline-block}
#sst-tm h1, #sst-tm h2, #sst-tm h3{color:inherit; margin:0}
#sst-tm .tm-num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
#sst-tm .tm-up{color:var(--tm-up)} #sst-tm .tm-down{color:var(--tm-down)} #sst-tm .tm-flat{color:var(--tm-muted)}
#sst-tm .tm-wrap{max-width:1600px; margin:0 auto; padding:0 20px}
@media (max-width:749px){ #sst-tm .tm-wrap{padding:0 12px} }

/* ---------- ticker tape ---------- */
#sst-tm .tm-tape{position:relative; overflow:hidden; border-bottom:1px solid var(--tm-line); background:var(--tm-tape-bg); height:38px}
#sst-tm .tm-tape__live{position:absolute; left:0; top:0; bottom:0; z-index:2; display:flex; align-items:center; gap:8px; padding:0 14px; background:var(--tm-bg); border-right:1px solid var(--tm-line); font-weight:800; letter-spacing:.14em; font-size:11px; color:var(--tm-gold-text)}
#sst-tm .tm-tape__live i{width:8px; height:8px; border-radius:50%; background:var(--tm-up); animation:tm-pulse 1.6s infinite}
@keyframes tm-pulse{0%{box-shadow:0 0 0 0 rgba(34,227,122,.6)}70%{box-shadow:0 0 0 9px rgba(34,227,122,0)}100%{box-shadow:0 0 0 0 rgba(34,227,122,0)}}
#sst-tm .tm-tape__track{display:flex; width:max-content; animation:tm-marquee 70s linear infinite; padding-left:96px}
#sst-tm .tm-tape:hover .tm-tape__track{animation-play-state:paused}
@keyframes tm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#sst-tm .tm-tape__item{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px; border-right:1px solid var(--tm-line); white-space:nowrap; font-size:12.5px; cursor:pointer; color:var(--tm-muted)}
#sst-tm .tm-tape__item b{color:var(--tm-fg); font-weight:700}
#sst-tm .tm-tape__item .tm-num{font-family:var(--tm-mono); font-size:12px}
#sst-tm .tm-tape__item:hover{background:var(--tm-hover)}

/* ---------- head ---------- */
#sst-tm .tm-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:26px 0 14px; flex-wrap:wrap}
#sst-tm .tm-head__t{margin:0; font-size:30px; line-height:1.05; font-weight:900; letter-spacing:-.02em; background:var(--tm-title-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
#sst-tm .tm-head__t small{display:block; margin-top:6px; font-size:12px; letter-spacing:.18em; font-weight:700; color:var(--tm-cyan); -webkit-text-fill-color:var(--tm-cyan)}
#sst-tm .tm-head__meta{display:flex; gap:18px; flex-wrap:wrap; color:var(--tm-muted); font-size:12px}
#sst-tm .tm-head__meta b{display:block; color:var(--tm-fg); font-size:13px; font-family:var(--tm-mono)}
#sst-tm .tm-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--tm-line2); background:var(--tm-chip-bg); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--tm-muted)}
#sst-tm .tm-chip i{width:7px; height:7px; border-radius:50%; background:var(--tm-gold)}

/* ---------- index tiles ---------- */
#sst-tm .tm-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:6px 0 16px}
@media (max-width:1100px){ #sst-tm .tm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ #sst-tm .tm-tiles{grid-template-columns:1fr 1fr; gap:8px} }
#sst-tm .tm-tile{position:relative; display:block; text-align:left; border:1px solid var(--tm-line); background:var(--tm-tile-bg); border-radius:var(--tm-radius); padding:14px 14px 10px; color:var(--tm-fg); overflow:hidden; transition:transform .15s, border-color .15s, box-shadow .15s; box-shadow:var(--tm-card-shadow)}
#sst-tm .tm-tile > *{display:block}
#sst-tm .tm-tile:hover{transform:translateY(-2px); border-color:var(--tm-line2)}
#sst-tm .tm-tile[aria-pressed="true"]{border-color:var(--tm-gold); box-shadow:0 0 0 1px var(--tm-gold), 0 12px 40px -18px rgba(240,165,0,.6)}
#sst-tm .tm-tile__k{display:flex; font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--tm-muted); justify-content:space-between; align-items:center}
#sst-tm .tm-tile__k span{color:var(--tm-dim); font-weight:600; letter-spacing:0}
#sst-tm .tm-tile__v{font-family:var(--tm-mono); font-size:26px; font-weight:700; margin-top:6px; letter-spacing:-.01em}
@media (max-width:520px){ #sst-tm .tm-tile__v{font-size:20px} }
#sst-tm .tm-tile__c{display:flex; gap:10px; margin-top:4px; font-size:12px; font-family:var(--tm-mono); flex-wrap:wrap}
#sst-tm .tm-tile__c span{color:var(--tm-dim); font-family:var(--tm-font)}
#sst-tm .tm-tile canvas{display:block; width:100%; height:44px; margin-top:8px}

/* ---------- chart + movers ---------- */
#sst-tm .tm-main{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:12px; margin-bottom:18px}
@media (max-width:1100px){ #sst-tm .tm-main{grid-template-columns:1fr} }
#sst-tm .tm-panel{border:1px solid var(--tm-line); background:var(--tm-panel); border-radius:var(--tm-radius); padding:14px; min-width:0; box-shadow:var(--tm-card-shadow)}
#sst-tm .tm-chart__head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap}
#sst-tm .tm-chart__name{font-size:17px; font-weight:800; margin:0}
#sst-tm .tm-chart__sub{color:var(--tm-muted); font-size:12px; margin-top:2px}
#sst-tm .tm-chart__val{font-family:var(--tm-mono); font-size:24px; font-weight:700; text-align:right}
#sst-tm .tm-chart__val small{display:block; font-size:12px; font-weight:600}
#sst-tm .tm-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--tm-muted); margin:8px 0 4px}
#sst-tm .tm-legend i{display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}
#sst-tm .tm-chart__mount{height:320px; width:100%; margin-top:6px; position:relative}
@media (max-width:749px){ #sst-tm .tm-chart__mount{height:230px} }
#sst-tm .tm-chart__mount .tm-fallback{position:absolute; inset:0}
#sst-tm .tm-ranges{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; align-items:center}
#sst-tm .tm-ranges button, #sst-tm .tm-btn-ghost{border:1px solid var(--tm-line2); background:transparent; color:var(--tm-muted); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700}
#sst-tm .tm-ranges button[aria-pressed="true"]{background:var(--tm-fg); color:var(--tm-ink); border-color:var(--tm-fg)}
#sst-tm .tm-ranges .tm-spacer{flex:1}
#sst-tm .tm-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin-top:12px}
#sst-tm .tm-stat{border:1px solid var(--tm-line); border-radius:10px; padding:8px 10px; background:var(--tm-panel2)}
#sst-tm .tm-stat b{display:block; font-size:10.5px; letter-spacing:.12em; color:var(--tm-dim); font-weight:800}
#sst-tm .tm-stat span{font-family:var(--tm-mono); font-size:17px; font-weight:600; display:block; margin-top:2px}
#sst-tm [hidden]{display:none !important}
#sst-tm .tm-alts:empty{display:none}
#sst-tm .tm-alts{margin-top:14px}
#sst-tm .tm-alts h3{margin:0 0 6px; font-size:11px; letter-spacing:.14em; color:var(--tm-muted); font-weight:800; display:flex; gap:8px; align-items:center}
#sst-tm .tm-alts h3 span{font-family:var(--tm-mono); font-size:10.5px; color:var(--tm-dim); letter-spacing:0}
/* best deals vs eBay US (10/22): mini cards, our price + eBay US + SAVE ¥ + − / + Add to cart */
#sst-tm .tm-alts h3 [data-deals-all]{margin-left:auto; border:0; background:none; padding:0; color:#9e2c5f; font:800 11.5px/1 var(--tm-font); letter-spacing:normal; cursor:pointer}
#sst-tm .tm-alts h3 [data-deals-all]:hover{text-decoration:underline}
#sst-tm .tm-alts ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
#sst-tm .tm-deal{display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; padding:10px; border:1px solid var(--tm-line); border-radius:10px; background:var(--tm-panel)}
#sst-tm .tm-deal button.tm-deal__media, #sst-tm .tm-deal button.tm-deal__name{border:0; padding:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
#sst-tm .tm-deal__media img{width:72px; height:72px; object-fit:contain; border-radius:6px; background:var(--tm-panel2)}
#sst-tm .tm-deal__body{min-width:0; display:flex; flex-direction:column; gap:3px}
#sst-tm .tm-deal button.tm-deal__name{display:block; width:100%; min-height:0; justify-content:flex-start; font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sst-tm .tm-deal button.tm-deal__name:hover{color:#9e2c5f}
/* fixed rows (name / our price / TCGplayer / save / buttons): every card lines up whatever the wording or price length */
#sst-tm .tm-deal__prices{display:flex; flex-direction:column; gap:1px}
#sst-tm .tm-deal__prices b{font-size:16px; line-height:20px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
#sst-tm .tm-deal__prices span{font-size:12px; line-height:16px; color:var(--tm-muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#sst-tm .tm-deal__save{white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box}
#sst-tm .tm-deal__save{align-self:flex-start; padding:2px 7px; border-radius:4px; background:var(--tm-up-bg); color:var(--tm-up); font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums}
#sst-tm .tm-deal .tm-buy{margin-top:auto; padding-top:4px}
#sst-tm .tm-deal .tm-qty{height:30px; grid-template-columns:28px minmax(26px,auto) 28px}
#sst-tm .tm-deal .tm-add{height:30px}
#sst-tm .tm-movers h3{margin:0 0 8px; font-size:11px; letter-spacing:.14em; color:var(--tm-muted); font-weight:800}
#sst-tm .tm-movers ul{list-style:none; margin:0 0 12px; padding:0}
#sst-tm .tm-movers li button{width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; gap:8px; align-items:center; background:transparent; border:0; border-bottom:1px solid var(--tm-line); color:var(--tm-fg); padding:6px 2px; text-align:left; font-size:12.5px; justify-content:start}
#sst-tm .tm-movers li button:hover{background:var(--tm-hover)}
#sst-tm .tm-movers img{width:34px; height:34px; object-fit:contain; border-radius:6px; background:#fff}
#sst-tm .tm-movers .tm-nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sst-tm .tm-movers .tm-num{font-family:var(--tm-mono); font-size:12px}

/* ---------- board ---------- */
#sst-tm .tm-board__bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0 12px}
#sst-tm .tm-tabs{display:flex; gap:6px; flex-wrap:wrap}
#sst-tm .tm-tabs button{border:1px solid var(--tm-line2); background:var(--tm-panel); color:var(--tm-muted); border-radius:12px; padding:9px 14px; font-weight:800; font-size:13px; letter-spacing:.02em; display:inline-flex; gap:8px; align-items:center}
#sst-tm .tm-tabs button em{font-style:normal; font-family:var(--tm-mono); font-size:11px; color:var(--tm-dim); background:var(--tm-hover); padding:1px 6px; border-radius:6px}
#sst-tm .tm-tabs button[aria-pressed="true"]{color:#0a0d14; background:linear-gradient(90deg,var(--tm-gold),#ffb347); border-color:transparent}
#sst-tm .tm-tabs button[aria-pressed="true"] em{color:#0a0d14; background:rgba(0,0,0,.12)}
#sst-tm .tm-tabs button[data-game="onepiece"][aria-pressed="true"]{background:linear-gradient(90deg,#ff5a8a,#ff7a59); color:#fff}
#sst-tm .tm-tabs button[data-game="onepiece"][aria-pressed="true"] em{color:#fff}
#sst-tm .tm-tools{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; align-items:center}
#sst-tm .tm-search{border:1px solid var(--tm-line2); background:var(--tm-bg2); color:var(--tm-fg); border-radius:10px; padding:8px 12px; min-width:200px; font-size:13px; font-family:inherit}
#sst-tm .tm-select{border:1px solid var(--tm-line2); background:var(--tm-bg2); color:var(--tm-fg); border-radius:10px; padding:8px 10px; font-size:13px; font-family:inherit}
#sst-tm .tm-toggle{display:inline-flex; gap:6px; align-items:center; font-size:12.5px; color:var(--tm-muted); cursor:pointer; user-select:none}
#sst-tm .tm-toggle input{accent-color:var(--tm-gold)}
#sst-tm .tm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
@media (max-width:749px){ #sst-tm .tm-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px} }
#sst-tm .tm-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--tm-line); background:var(--tm-card-bg); border-radius:var(--tm-radius); overflow:hidden; transition:transform .15s, border-color .15s, box-shadow .15s; box-shadow:var(--tm-card-shadow)}
#sst-tm .tm-card:hover{transform:translateY(-3px); border-color:var(--tm-line2)}
/* frame colour = 30-day market move: up green, down red (owner 2026-10-21) */
#sst-tm .tm-card--up{border:2px solid var(--tm-up); box-shadow:0 0 0 1px var(--tm-up-bg), 0 14px 34px -20px var(--tm-up)}
#sst-tm .tm-card--down{border:2px solid var(--tm-down); box-shadow:0 0 0 1px var(--tm-down-bg), 0 14px 34px -20px var(--tm-down)}
#sst-tm .tm-card--up:hover, #sst-tm .tm-card--up:focus-within{border-color:var(--tm-up)}
#sst-tm .tm-card--down:hover, #sst-tm .tm-card--down:focus-within{border-color:var(--tm-down)}
#sst-tm .tm-card__rank{position:absolute; left:10px; top:10px; z-index:2; font-family:var(--tm-mono); font-size:10.5px; font-weight:700; color:var(--tm-dim); background:var(--tm-panel); border:1px solid var(--tm-line); border-radius:6px; padding:2px 6px}
#sst-tm .tm-card__tag{position:absolute; right:10px; top:10px; z-index:2; font-size:10px; font-weight:900; letter-spacing:.08em; padding:3px 7px; border-radius:6px; background:var(--tm-up-bg); color:var(--tm-up); border:1px solid var(--tm-tag-up-border)}
#sst-tm .tm-card__tag--down{background:var(--tm-down-bg); color:var(--tm-down); border-color:var(--tm-tag-down-border)}
#sst-tm .tm-card__tag--hot{background:rgba(240,165,0,.16); color:var(--tm-gold-text); border-color:rgba(240,165,0,.45)}
#sst-tm .tm-card__media{position:relative; height:190px; background:var(--tm-media-bg); display:flex; align-items:center; justify-content:center; cursor:pointer}
@media (max-width:749px){ #sst-tm .tm-card__media{height:140px} }
#sst-tm .tm-card__media img{max-width:82%; max-height:170px; object-fit:contain; transition:transform .2s}
#sst-tm .tm-card:hover .tm-card__media img{transform:scale(1.04)}
#sst-tm .tm-card__media .tm-noimg{width:100px; height:140px; border:1px dashed var(--tm-line2); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--tm-dim); font-size:11px; text-align:center; padding:8px}
#sst-tm .tm-card--box .tm-card__media img{max-height:160px}
#sst-tm .tm-card__spark{position:absolute; left:0; right:0; bottom:0; height:46px; opacity:.9; pointer-events:none}
#sst-tm .tm-card__body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
#sst-tm .tm-card__name{font-size:13px; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; cursor:pointer}
#sst-tm .tm-card__code{font-family:var(--tm-mono); font-size:11px; color:var(--tm-muted)}
#sst-tm .tm-card__mkt{display:flex; align-items:baseline; justify-content:space-between; gap:6px; white-space:nowrap}
/* US market price (eBay US) above our price */
#sst-tm .tm-card__us{margin-top:auto; border-top:1px solid var(--tm-line); padding-top:8px; display:flex; align-items:flex-end; justify-content:space-between; gap:6px; white-space:nowrap}
#sst-tm .tm-card__us + .tm-card__shop{margin-top:6px; border-top:0; padding-top:0}
#sst-tm .tm-card__us-k{min-width:0; display:flex; flex-direction:column}
#sst-tm .tm-card__us .tm-src{font-size:10px; letter-spacing:.1em; color:var(--tm-muted); font-weight:800}
#sst-tm .tm-card__us a{font-size:11px; color:var(--tm-cyan); text-decoration:none; overflow:hidden; text-overflow:ellipsis}
#sst-tm .tm-card__us a:hover{text-decoration:underline}
#sst-tm .tm-card__us-v{text-align:right; font-family:var(--tm-mono)}
#sst-tm .tm-card__us-v b{display:block; font-size:15px; font-weight:700; color:var(--tm-muted)}
#sst-tm .tm-card__us-v b.tm-us-out{font-family:var(--tm-font); font-size:12px; font-weight:800; color:var(--tm-dim)}
#sst-tm .tm-card__us-v small{font-size:10.5px; color:var(--tm-dim)}
/* TCGplayer: market price (sold) + listed price (ships to US), one row each */
#sst-tm .tm-card__us--tcg{flex-direction:column; align-items:stretch; gap:4px}
#sst-tm .tm-card__us-rows{margin:0; display:grid; gap:2px}
#sst-tm .tm-card__us-rows > div{display:flex; justify-content:space-between; align-items:baseline; gap:6px}
#sst-tm .tm-card__us-rows dt{font-size:11px; color:var(--tm-muted)}
#sst-tm .tm-card__us-rows dd{margin:0; font-family:var(--tm-mono); text-align:right; white-space:nowrap}
#sst-tm .tm-card__us-rows b{font-size:14px; font-weight:700; color:var(--tm-muted)}
#sst-tm .tm-card__us-rows b.tm-us-out{font-family:var(--tm-font); font-size:12px; font-weight:800; color:var(--tm-dim)}
#sst-tm .tm-card__us-rows small{display:block; font-size:10.5px; color:var(--tm-dim)}   /* USD under the yen: narrow cards cut a same-line USD */
#sst-tm .tm-card__us-rows > div{min-width:0}
#sst-tm .tm-card__us-rows dd{min-width:0; overflow:hidden; text-overflow:ellipsis}
#sst-tm .tm-card__diff em{display:block; font-style:normal; font-weight:700; font-size:10px; opacity:.85}#sst-tm .tm-card__mkt > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
#sst-tm .tm-card__mkt b{font-family:var(--tm-mono); font-size:17px; font-weight:700}
#sst-tm .tm-card__mkt .tm-src{font-size:10px; letter-spacing:.08em; color:var(--tm-dim); font-weight:800; margin-right:4px}
#sst-tm .tm-card__chg{font-family:var(--tm-mono); font-size:12.5px; font-weight:700}
#sst-tm .tm-card__pc{display:flex; flex-direction:column; gap:1px; font-size:11.5px; color:var(--tm-muted); font-family:var(--tm-mono)}
#sst-tm .tm-card__pc > span + span{font-size:10.5px; color:var(--tm-dim); font-family:var(--tm-font)}
#sst-tm .tm-card__pc .tm-src{font-family:var(--tm-font); font-size:10px; letter-spacing:.08em; font-weight:800; color:var(--tm-dim)}
#sst-tm .tm-card__shop{margin-top:auto; border-top:1px solid var(--tm-line); padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:6px}
#sst-tm .tm-card__price{font-family:var(--tm-mono); font-size:16px; font-weight:800; color:var(--tm-fg)}
#sst-tm .tm-card__price small{display:block; font-family:var(--tm-font); font-size:10px; letter-spacing:.1em; color:var(--tm-gold-text); font-weight:800}
#sst-tm .tm-card__diff{font-size:11px; font-weight:800; padding:3px 7px; border-radius:6px}
#sst-tm .tm-card__diff.tm-good{background:var(--tm-up-bg); color:var(--tm-up)}
#sst-tm .tm-card__diff.tm-fair{background:var(--tm-hover); color:var(--tm-muted)}
#sst-tm .tm-card__stock{font-size:11px; color:var(--tm-muted)}
#sst-tm .tm-card__stock.tm-in{color:var(--tm-up)} #sst-tm .tm-card__stock.tm-low{color:var(--tm-gold-text)} #sst-tm .tm-card__stock.tm-out{color:var(--tm-down)}
#sst-tm .tm-buy{display:flex; gap:6px; align-items:center}
/* stepper + add to cart = the site's PSA10 card style (sidebar.css .sst-psa-bo__add / pdp-buttons.css stepper) */
#sst-tm .tm-qty{display:inline-grid; grid-template-columns:32px minmax(28px,auto) 32px; align-items:stretch; height:34px; border:1px solid #d9d9d9; border-radius:2px; overflow:hidden; background:#fff; box-sizing:border-box}
#sst-tm .tm-qty button{display:flex; align-items:center; justify-content:center; height:auto; padding:0 0 2px; border:0; border-radius:0; background:transparent; color:#1a1a1a; font:500 18px/1 var(--tm-font); cursor:pointer; transition:background .15s, color .15s}
#sst-tm .tm-qty button[data-q="-1"]{font-size:0} #sst-tm .tm-qty button[data-q="-1"]::before{content:"\2212"; font-size:18px; line-height:1}
@media (hover:hover){ #sst-tm .tm-qty button:hover:not(:disabled){background:#fff3f7; color:#9e2c5f} }
#sst-tm .tm-qty button:disabled{color:#c8c8c8; cursor:default}
#sst-tm .tm-qty output{display:flex; align-items:center; justify-content:center; padding:0 3px; border-left:1px solid #ececec; border-right:1px solid #ececec; color:#1a1a1a; font:700 14px/1 var(--tm-font); font-variant-numeric:tabular-nums}
#sst-tm .tm-add{flex:1; height:34px; border:1px solid #9e2c5f; border-radius:2px; background:#9e2c5f; color:#fff; font:700 12px/1 var(--tm-font); letter-spacing:normal; cursor:pointer; box-shadow:none; transition:background-color .15s, border-color .15s}
#sst-tm .tm-add:hover{background:#7a2149; border-color:#7a2149}
#sst-tm .tm-add:disabled{opacity:.6; cursor:wait}
#sst-tm .tm-add.tm-added{background:#7a2149; border-color:#7a2149}
#sst-tm .tm-add.tm-busy{opacity:.6; cursor:progress}
/* add-to-cart animation (owner 10/22): button pop, photo flies into the header cart (.tm-fly lives on body), cart bumps */
#sst-tm .tm-add.tm-added{animation:tm-add-pop .35s ease-out}
@keyframes tm-add-pop{0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)}}
.tm-fly{position:fixed; z-index:100000; pointer-events:none; object-fit:contain; border-radius:6px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25); will-change:transform,opacity}
span.tm-fly{background:#9e2c5f; border-radius:50%}
.tm-cart-bump{animation:tm-cart-bump .45s ease-out}
@keyframes tm-cart-bump{0%{transform:scale(1)} 35%{transform:scale(1.25)} 70%{transform:scale(.95)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#sst-tm .tm-add.tm-added,.tm-cart-bump{animation:none}}
/* smartphone (owner 10/22): cart icon instead of "Add to cart" (the text stays as the accessible name); tick after adding */
@media (max-width:749px){
  #sst-tm .tm-add{font-size:0; display:inline-flex; align-items:center; justify-content:center}
  #sst-tm .tm-add::before{content:""; width:20px; height:20px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.4a1.5 1.5 0 0 0 1.5 1.1h8.7a1.5 1.5 0 0 0 1.5-1.2L21 7H6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.4a1.5 1.5 0 0 0 1.5 1.1h8.7a1.5 1.5 0 0 0 1.5-1.2L21 7H6'/%3E%3C/svg%3E") center/contain no-repeat}
  #sst-tm .tm-add.tm-added::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
}
#sst-tm .tm-soldout{flex:1; height:34px; border:1px solid #9e2c5f; border-radius:2px; background:transparent; color:#9e2c5f; font:700 12px/1 var(--tm-font); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:background-color .15s}
#sst-tm .tm-soldout:hover{background:#faf3f7; color:#7a2149; border-color:#7a2149}
html[data-sst-theme="dark"] #sst-tm .tm-qty{background:var(--sst-surface,#1a1a1c); border-color:var(--sst-line,#2e2e32)}
html[data-sst-theme="dark"] #sst-tm .tm-qty button{color:var(--sst-ink,#e8e8e8)}
@media (hover:hover){ html[data-sst-theme="dark"] #sst-tm .tm-qty button:hover:not(:disabled){background:#2a1c23; color:var(--sst-accent-text,#e58bb5)} }
html[data-sst-theme="dark"] #sst-tm .tm-qty button:disabled{color:#55555a}
html[data-sst-theme="dark"] #sst-tm .tm-qty output{border-color:var(--sst-line,#2e2e32); color:var(--sst-ink,#e8e8e8)}
html[data-sst-theme="dark"] #sst-tm .tm-add{background:var(--sst-accent,#bd3d76); border-color:var(--sst-accent,#bd3d76)}
html[data-sst-theme="dark"] #sst-tm .tm-add:hover, html[data-sst-theme="dark"] #sst-tm .tm-add.tm-added{background:var(--sst-accent-dark,#a02f62); border-color:var(--sst-accent-dark,#a02f62)}
html[data-sst-theme="dark"] #sst-tm .tm-soldout{border-color:var(--sst-accent,#bd3d76); color:var(--sst-accent-text,#e58bb5)}
html[data-sst-theme="dark"] #sst-tm .tm-soldout:hover{background:var(--sst-soft,#2a1c23)}
#sst-tm .tm-notshop{font-size:11.5px; color:var(--tm-dim); display:flex; align-items:center; gap:8px; justify-content:space-between}
#sst-tm .tm-notshop a{color:var(--tm-cyan); font-weight:700; text-decoration:none}
#sst-tm .tm-empty{padding:40px; text-align:center; color:var(--tm-muted); border:1px dashed var(--tm-line2); border-radius:var(--tm-radius)}
#sst-tm .tm-more{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:14px auto 0; border:1px solid var(--tm-line2); background:var(--tm-panel); color:var(--tm-fg); border-radius:50%; padding:0; cursor:pointer; transition:transform .15s, border-color .15s}
#sst-tm .tm-more[hidden]{display:none}
#sst-tm .tm-more svg{display:block; margin-top:2px}
@media (hover:hover){#sst-tm .tm-more:hover{transform:translateY(2px); border-color:var(--tm-fg)}}

/* ---------- item drawer ---------- */
#sst-tm .tm-dim{position:fixed; inset:0; background:var(--tm-dimmer); backdrop-filter:blur(2px); z-index:9998; display:none}
#sst-tm .tm-drawer{position:fixed; top:0; right:0; bottom:0; width:min(560px,100vw); background:var(--tm-drawer-bg); border-left:1px solid var(--tm-line2); z-index:9999; transform:translateX(102%); transition:transform .22s; overflow:auto; padding:18px; color:var(--tm-fg); font-family:var(--tm-font); box-shadow:-20px 0 60px -30px rgba(0,0,0,.5)}
#sst-tm.tm-open .tm-dim{display:block} #sst-tm.tm-open .tm-drawer{transform:none}
#sst-tm .tm-drawer__close{position:absolute; right:14px; top:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--tm-line2); background:var(--tm-panel); color:var(--tm-fg); font-size:18px}
#sst-tm .tm-drawer__hero{display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:start; margin-top:30px}
@media (max-width:420px){ #sst-tm .tm-drawer__hero{grid-template-columns:110px minmax(0,1fr)} }
#sst-tm .tm-drawer__hero img{width:150px; max-width:100%; height:190px; object-fit:contain; background:var(--tm-media-bg); border-radius:10px}
#sst-tm .tm-drawer h2{margin:0 0 4px; font-size:17px; line-height:1.3}
#sst-tm .tm-drawer .tm-code{font-family:var(--tm-mono); color:var(--tm-muted); font-size:12px}
#sst-tm .tm-drawer__chart{height:240px; margin-top:12px; position:relative}
#sst-tm .tm-drawer .tm-buybox{margin-top:14px; border:1px solid var(--tm-line2); border-radius:12px; padding:12px; background:var(--tm-panel)}
#sst-tm .tm-drawer .tm-buybox .tm-row{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px}
#sst-tm .tm-drawer .tm-buybox .tm-row .tm-code{text-align:right; max-width:70%}
#sst-tm .tm-drawer .tm-link{display:inline-block; margin-top:10px; font-size:12px; color:var(--tm-cyan)}

/* ---------- cart bar + toast ---------- */
#sst-tm .tm-cartbar{position:fixed; left:50%; transform:translate(-50%,120%); bottom:16px; z-index:9990; display:flex; align-items:center; gap:14px; padding:10px 12px 10px 16px; border-radius:999px; background:var(--tm-cartbar-bg); border:1px solid var(--tm-line2); box-shadow:0 20px 50px -20px rgba(0,0,0,.6); transition:transform .25s; font-family:var(--tm-font); color:var(--tm-fg); max-width:calc(100vw - 24px)}
#sst-tm .tm-cartbar.tm-show{transform:translate(-50%,0)}
#sst-tm .tm-cartbar b{font-family:var(--tm-mono)}
#sst-tm .tm-cartbar a{text-decoration:none; font-weight:900; font-size:13px; border-radius:999px; padding:8px 16px}
#sst-tm .tm-cartbar .tm-view{border:1px solid var(--tm-line2); color:var(--tm-fg)}
#sst-tm .tm-cartbar .tm-checkout{background:linear-gradient(90deg,var(--tm-brand),var(--tm-brand2)); color:#fff}
#sst-tm .tm-toast{position:fixed; left:50%; bottom:80px; transform:translate(-50%,20px); background:var(--tm-toast-bg); border:1px solid var(--tm-tag-up-border); color:var(--tm-up); padding:10px 16px; border-radius:12px; font-weight:800; font-size:13px; opacity:0; transition:all .2s; z-index:9991; pointer-events:none; font-family:var(--tm-font)}
#sst-tm .tm-toast.tm-show{opacity:1; transform:translate(-50%,0)}
#sst-tm .tm-toast.tm-err{color:var(--tm-down); border-color:var(--tm-tag-down-border); background:var(--tm-toast-err-bg)}

/* ---------- footer note ---------- */
#sst-tm .tm-note{margin-top:22px; padding:14px 16px; border:1px solid var(--tm-line); border-radius:var(--tm-radius); color:var(--tm-muted); font-size:11.5px; line-height:1.5; background:var(--tm-panel2)}
#sst-tm .tm-note b{color:var(--tm-fg)}
