/* sst-cardlist2 0.1 (preview 2026-11-12) - new card list layout.
   Colours and font = the theme tokens (--sst-*), so light and dark both follow the site. No :has() anywhere. */

/* ---- page frame: the card list uses the full page width, the old blocks are hidden ---- */
body.sst-cl2-on .cl2-old{display:none!important}
body.sst-cl2-on .sst-page-breadcrumb,
body.sst-cl2-on .sst-page-header{display:none!important}
body.sst-cl2-on main .sst-page,
body.sst-cl2-on main .sst-page-content{max-width:none!important;width:auto!important}
/* the old card list style made <body> a scroll box (overflow-x:hidden), which stops anything from sticking; clip keeps the same cut-off without that */
body.sst-cl2-on{overflow-x:clip!important;overflow-y:visible!important}
html.cl2-lock{overflow:hidden}
/* blocks that keep their own look, under the new layout */
#sst-cl2-after{box-sizing:border-box;width:100%;max-width:1480px;margin:0 auto;padding:0 0 56px}
#sst-cl2-after #sst-cl-journal{max-width:none;margin:34px 0 0;padding:0}
#sst-cl2-after #sst-cl-journal .sst-clj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
#sst-cl2-after .sst-other-sets{max-width:none;margin:34px 0 0}
#sst-cl2-after [data-cl2-note] p{margin:22px 0 0;font-size:11px;line-height:1.6;color:var(--sst-muted,#5f5f5f)}

:is(#sst-cl2,#sst-cl2-modal){
  --c-ink:var(--sst-ink,#121212);--c-muted:var(--sst-muted,#5f5f5f);--c-line:var(--sst-line,#ececec);
  --c-paper:var(--sst-paper,#fff);--c-surface:var(--sst-surface,#fff);--c-accent:var(--sst-accent,#9e2c5f);
  --c-accent-dark:var(--sst-accent-dark,#7a2149);--c-soft:var(--sst-soft,#faf3f7);--c-gray:var(--sst-gray,#f7f7f7);
  --c-label:#4c5668;--c-radius:var(--sst-radius,6px);
  font-family:var(--sst-font,"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif);font-size:14px;line-height:1.45;color:var(--c-ink);text-align:left;
}
html[data-sst-theme="dark"] :is(#sst-cl2,#sst-cl2-modal){--c-label:#aab3c5}
#sst-cl2{--c-top:0px;box-sizing:border-box;width:100%;max-width:1480px;margin:0 auto;padding:6px 0 0}
:is(#sst-cl2,#sst-cl2-modal) *,:is(#sst-cl2,#sst-cl2-modal) *::before,:is(#sst-cl2,#sst-cl2-modal) *::after{box-sizing:border-box}
:is(#sst-cl2,#sst-cl2-modal) a{color:inherit;text-decoration:none}
:is(#sst-cl2,#sst-cl2-modal) img{display:block;max-width:100%;height:auto;border:0;margin:0}
:is(#sst-cl2,#sst-cl2-modal) :is(button,select,input){font:inherit;color:inherit;margin:0;min-height:0;letter-spacing:normal;text-transform:none;box-shadow:none}
:is(#sst-cl2,#sst-cl2-modal) :is(h1,h2,h3,p,ul,ol,li,dl,dt,dd){margin:0;padding:0;list-style:none;font-family:inherit;letter-spacing:normal;text-transform:none}
#sst-cl2 .cl2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(#sst-cl2,#sst-cl2-modal) :is(a,button,select,input):focus-visible{outline:2px solid var(--sst-focus,#1f6feb);outline-offset:2px}

/* ---- top row: where am I + jump to another set ---- */
#sst-cl2 .cl2-top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 14px;font-size:13px;color:var(--c-muted)}
#sst-cl2 .cl2-crumb a{text-decoration:underline;text-underline-offset:3px}
#sst-cl2 .cl2-crumb .sep{margin:0 7px;opacity:.55}
#sst-cl2 .cl2-switch{display:flex;align-items:center;gap:6px;min-width:0}
#sst-cl2 .cl2-nav{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--c-radius);background:var(--c-surface);color:var(--c-ink);font-weight:600;max-width:230px}
#sst-cl2 .cl2-nav__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-nav:hover{border-color:var(--c-ink)}
#sst-cl2 .cl2-setsel select,#sst-cl2 .cl2-sort select{height:36px;max-width:250px;padding:0 30px 0 12px;border:1px solid var(--c-line);border-radius:var(--c-radius);background-color:var(--c-surface);color:var(--c-ink);font-size:13px;font-weight:600;cursor:pointer}

/* ---- set header ---- */
#sst-cl2 .cl2-head{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center;padding:18px 22px;border:1px solid var(--c-line);border-radius:var(--sst-card-radius,12px);background:var(--c-surface)}
#sst-cl2 .cl2-head--side{grid-template-columns:132px minmax(0,1fr) minmax(260px,400px)}
#sst-cl2 .cl2-head--nobox{grid-template-columns:minmax(0,1fr)}
#sst-cl2 .cl2-head--nobox.cl2-head--side{grid-template-columns:minmax(0,1fr) minmax(260px,400px)}
#sst-cl2 .cl2-head__box{display:flex;align-items:center;justify-content:center;width:132px;height:132px;border-radius:8px;background:var(--c-gray);overflow:hidden}
#sst-cl2 .cl2-head__box img{width:100%;height:100%;object-fit:contain}
#sst-cl2 .cl2-eyebrow,#sst-cl2-modal .cl2-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sst-accent-text,var(--c-accent))}
#sst-cl2 .cl2-titleRow{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:4px}
#sst-cl2 .cl2-titleRow h1{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--c-ink);border:0;padding:0}
#sst-cl2 .cl2-h1sub{font-weight:400;color:var(--c-muted)}
#sst-cl2 .cl2-code{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--c-ink);border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.06em}
#sst-cl2 .cl2-jp{margin-top:3px;font-size:13px;color:var(--c-muted)}
#sst-cl2 .cl2-stats{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px;font-size:13px;color:var(--c-muted)}
#sst-cl2 .cl2-stats b{margin-right:5px;font-size:15px;font-weight:700;color:var(--c-ink)}
#sst-cl2 .cl2-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
:is(#sst-cl2,#sst-cl2-modal) .cl2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid var(--c-ink);border-radius:var(--c-radius);background:transparent;color:var(--c-ink);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;text-decoration:none}
:is(#sst-cl2,#sst-cl2-modal) .cl2-btn svg{width:15px;height:15px;flex:none}
:is(#sst-cl2,#sst-cl2-modal) .cl2-btn--primary{border-color:var(--c-accent);background:var(--c-accent);color:var(--sst-btn-label,#fff)}
@media(hover:hover){
  :is(#sst-cl2,#sst-cl2-modal) .cl2-btn:hover{background:var(--c-gray)}
  :is(#sst-cl2,#sst-cl2-modal) .cl2-btn--primary:hover{border-color:var(--c-accent-dark);background:var(--c-accent-dark)}
}
/* switched-off button (owner 2026-11-12: "Shop singles" grey and not pressable while single cards are not on sale):
   after the hover rules on purpose, so pointing at it changes nothing */
:is(#sst-cl2,#sst-cl2-modal) .cl2-btn.cl2-btn--off,
:is(#sst-cl2,#sst-cl2-modal) .cl2-btn.cl2-btn--off:hover{border-color:var(--c-line);background:var(--c-gray);color:var(--c-muted);opacity:.7;cursor:not-allowed;user-select:none}
/* pull rates (the page's own block, moved next to the title) */
#sst-cl2 .cl2-head__side{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-left:22px;border-left:1px solid var(--c-line);min-width:0}
#sst-cl2 .cl2-pulls summary{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);list-style:none;pointer-events:none}
#sst-cl2 .cl2-pulls summary::-webkit-details-marker{display:none}
#sst-cl2 .cl2-pulls div{margin:0;padding:0;border:0;background:none;max-width:none}
#sst-cl2 .cl2-head__side .sst-pl-h{display:none}
#sst-cl2 .cl2-head__side .sst-pl-spec{margin-top:3px;font-size:13px;font-weight:600;color:var(--c-ink)}
#sst-cl2 .cl2-head__side .sst-pl-table{width:100%;margin:8px 0 0;border-collapse:collapse;border:0;font-size:12.5px}
#sst-cl2 .cl2-head__side .sst-pl-table td{padding:4px 0;border:0;border-top:1px solid var(--c-line);background:none;color:var(--c-ink);vertical-align:top}
#sst-cl2 .cl2-head__side .sst-pl-table td:first-child{padding-right:12px;font-weight:700;white-space:nowrap}
#sst-cl2 .cl2-head__side .sst-pl-table td:last-child{text-align:right;color:var(--c-muted)}
#sst-cl2 .cl2-head__side .sst-pl-note{margin-top:6px;font-size:11px;color:var(--c-muted)}

/* ---- section titles + chase strip ---- */
#sst-cl2 .cl2-h{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
#sst-cl2 .cl2-h h2{font-size:18px;line-height:1.2;font-weight:700;color:var(--c-ink)}
#sst-cl2 .cl2-h span{font-size:12px;color:var(--c-muted)}
#sst-cl2 .cl2-chase{margin-top:22px}
#sst-cl2 .cl2-chase__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(108px,200px);justify-content:start;gap:12px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
#sst-cl2 .cl2-chase .cl2-card{position:relative;scroll-snap-align:start}
#sst-cl2 .cl2-rank{position:absolute;top:6px;left:6px;z-index:1;display:flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--c-ink);color:var(--c-paper);font-size:12px;font-weight:700;line-height:1}

/* ---- one toolbar: rarity chips + search + sort + view ---- */
#sst-cl2 .cl2-bar{position:sticky;top:var(--c-top);z-index:30;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:22px 0 0;padding:10px 0;background:var(--c-paper);border-bottom:1px solid var(--c-line)}
#sst-cl2 .cl2-chips{display:flex;gap:6px;flex:1 1 420px;min-width:0;overflow-x:auto;padding:2px;scrollbar-width:none}
#sst-cl2 .cl2-chips::-webkit-scrollbar{display:none}
#sst-cl2 .cl2-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);color:var(--c-ink);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
#sst-cl2 .cl2-chip small{font-size:11px;font-weight:600;color:var(--c-muted)}
#sst-cl2 .cl2-chip[aria-pressed="true"]{border-color:var(--c-ink);background:var(--c-ink);color:var(--c-paper)}
#sst-cl2 .cl2-chip[aria-pressed="true"] small{color:inherit;opacity:.72}
#sst-cl2 .cl2-chip--psa{border-color:var(--c-accent);color:var(--sst-accent-text,var(--c-accent))}
#sst-cl2 .cl2-chip--psa small{color:inherit;opacity:.8}
#sst-cl2 .cl2-chip--psa[aria-pressed="true"]{border-color:var(--c-accent);background:var(--c-accent);color:#fff}
@media(hover:hover){#sst-cl2 .cl2-chip:hover{border-color:var(--c-ink)}}
#sst-cl2 .cl2-tools{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
#sst-cl2 .cl2-search{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
#sst-cl2 .cl2-search svg{position:absolute;left:11px;width:14px;height:14px;color:var(--c-muted);pointer-events:none}
#sst-cl2 .cl2-search input{width:230px;max-width:100%;height:36px;padding:0 10px 0 32px;border:1px solid var(--c-line);border-radius:var(--c-radius);background:var(--c-surface);color:var(--c-ink);font-size:13px}
#sst-cl2 .cl2-view{display:inline-flex;flex:none;border:1px solid var(--c-line);border-radius:var(--c-radius);overflow:hidden}
#sst-cl2 .cl2-view button{display:flex;align-items:center;justify-content:center;width:38px;height:34px;padding:0;border:0;border-left:1px solid var(--c-line);border-radius:0;background:var(--c-surface);color:var(--c-muted);cursor:pointer}
#sst-cl2 .cl2-view button:first-child{border-left:0}
#sst-cl2 .cl2-view button svg{width:16px;height:16px}
#sst-cl2 .cl2-view button[aria-pressed="true"]{background:var(--c-ink);color:var(--c-paper)}
#sst-cl2 .cl2-count{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 12px;font-size:13px;color:var(--c-muted)}
#sst-cl2 .cl2-count b{color:var(--c-ink)}
#sst-cl2 .cl2-count__note{margin-left:auto;font-size:12px}
#sst-cl2 .cl2-clear{padding:0;border:0;background:none;color:var(--sst-accent-text,var(--c-accent));font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- cards ---- */
#sst-cl2 .cl2-sec + .cl2-sec{margin-top:30px}
#sst-cl2 .cl2-sec__h{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--c-line);font-size:16px;line-height:1.2;font-weight:700;color:var(--c-ink)}
#sst-cl2 .cl2-sec__h small{font-size:12px;font-weight:600;color:var(--c-muted)}
#sst-cl2 .cl2-sec__h .cl2-rar{height:24px;padding:0 9px;font-size:13px}
#sst-cl2 .cl2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:20px 14px}
#sst-cl2 .cl2-card{display:flex;flex-direction:column;min-width:0;cursor:zoom-in;border-radius:8px}
#sst-cl2 .cl2-card__img{display:block;width:100%;aspect-ratio:63/88;border-radius:4.6%/3.3%;overflow:hidden;background:var(--c-gray);transition:transform .16s ease,box-shadow .16s ease}
#sst-cl2 .cl2-card__img img,#sst-cl2 .cl2-row__img img{width:100%;height:100%;object-fit:cover}
#sst-cl2 img.is-odd,#sst-cl2-modal img.is-odd{object-fit:contain}
:is(#sst-cl2,#sst-cl2-modal) .is-missing{position:relative;border:1px solid var(--c-line)}
:is(#sst-cl2,#sst-cl2-modal) .is-missing img{display:none}
:is(#sst-cl2,#sst-cl2-modal) .is-missing::after{content:attr(data-no);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6px;font-size:13px;font-weight:700;color:var(--c-muted);text-align:center;overflow-wrap:anywhere}
#sst-cl2 .cl2-row__img.is-missing::after{content:""}
@media(hover:hover){#sst-cl2 .cl2-card:hover .cl2-card__img{transform:translateY(-3px);box-shadow:0 10px 22px rgba(18,18,18,.18)}}
#sst-cl2 .cl2-card__meta{display:flex;align-items:center;justify-content:space-between;gap:6px;height:18px;margin-top:9px;font-size:12px;font-weight:700;line-height:18px;color:var(--c-label)}
#sst-cl2 .cl2-card__no{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-card__no em{font-style:normal;font-weight:600}
#sst-cl2 :is(.cl2-card__no em,.cl2-card__rarline).is-hi{color:var(--sst-accent-text,var(--c-accent));font-weight:700}
:is(#sst-cl2,#sst-cl2-modal) .cl2-rar{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 6px;border:1px solid var(--c-line);border-radius:4px;background:var(--c-surface);color:var(--c-label);font-size:11px;font-weight:700;line-height:1;letter-spacing:.03em;white-space:nowrap}
:is(#sst-cl2,#sst-cl2-modal) .cl2-rar--hi{border-color:var(--c-accent);background:var(--c-accent);color:#fff}
#sst-cl2 .cl2-card__name{height:20px;margin-top:3px;overflow:hidden;font-size:14px;font-weight:600;line-height:20px;text-overflow:ellipsis;white-space:nowrap;color:var(--c-ink)}
#sst-cl2 .cl2-card__sub{height:17px;overflow:hidden;font-size:12px;line-height:17px;color:var(--c-muted);text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-card__price{display:flex;align-items:center;justify-content:space-between;gap:6px;height:20px;margin-top:3px;font-size:13px;line-height:20px;color:var(--c-ink)}
#sst-cl2 .cl2-card__price b{font-weight:700}
#sst-cl2 .cl2-card__price b:empty,#sst-cl2 .cl2-row__price b:empty{display:none}
#sst-cl2 .cl2-psa{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--sst-accent-text,var(--c-accent));white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent}
@media(hover:hover){#sst-cl2 .cl2-psa:hover{text-decoration-color:currentColor}}
/* pictures only */
#sst-cl2[data-view="compact"] .cl2-results .cl2-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
#sst-cl2[data-view="compact"] .cl2-results :is(.cl2-card__meta,.cl2-card__name,.cl2-card__sub,.cl2-card__price){display:none}
/* list */
#sst-cl2 .cl2-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start}
#sst-cl2 .cl2-list--one{grid-template-columns:minmax(0,1fr)}
#sst-cl2 .cl2-list__col{min-width:0;border-top:1px solid var(--c-line)}
#sst-cl2 .cl2-row{display:grid;grid-template-columns:34px var(--no-w,52px) minmax(0,1fr) var(--rar-w,0px) var(--price-w,0px);align-items:center;gap:12px;min-height:58px;padding:5px 8px;border-bottom:1px solid var(--c-line);cursor:zoom-in}
@media(hover:hover){#sst-cl2 .cl2-row:hover{background:var(--c-gray)}}
#sst-cl2 .cl2-row__img{display:block;width:34px;aspect-ratio:63/88;border-radius:3px;overflow:hidden;background:var(--c-gray)}
#sst-cl2 .cl2-row__no{font-size:12px;font-weight:700;color:var(--c-label);white-space:nowrap}
#sst-cl2 .cl2-row__name{min-width:0}
#sst-cl2 .cl2-row__name b{display:block;overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-row__name small{display:block;overflow:hidden;font-size:12px;color:var(--c-muted);text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-row__name small:empty{display:none}
#sst-cl2 .cl2-row__rr{display:none;font-style:normal;font-weight:700}
#sst-cl2 .cl2-row__rar{display:flex;justify-content:flex-start;min-width:0}
#sst-cl2 .cl2-row__price{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:13px;white-space:nowrap}
#sst-cl2 .cl2-row__price b{font-weight:700}
#sst-cl2 .cl2-empty{padding:48px 16px;border:1px dashed var(--c-line);border-radius:12px;text-align:center;color:var(--c-muted)}
#sst-cl2 .cl2-empty p{margin-bottom:14px;font-size:15px}

/* ---- bottom: buy the box, about, FAQ, other sets ---- */
#sst-cl2 .cl2-buy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;margin-top:40px;padding:18px 22px;border:1px solid var(--c-line);border-radius:var(--sst-card-radius,12px);background:var(--c-soft)}
#sst-cl2 .cl2-buy__img{display:block;width:104px;height:104px;border-radius:8px;overflow:hidden;background:var(--c-surface)}
#sst-cl2 .cl2-buy__img img{width:100%;height:100%;object-fit:contain}
#sst-cl2 .cl2-buy__name{font-size:18px;font-weight:700;line-height:1.25}
#sst-cl2 .cl2-buy__sub{font-size:13px;color:var(--c-muted)}
#sst-cl2 .cl2-buy__perks{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;font-size:13px}
#sst-cl2 .cl2-buy__perks li::before{content:"\2713";margin-right:6px;font-weight:700;color:var(--sst-accent-text,var(--c-accent))}
#sst-cl2 .cl2-more{margin-top:30px;border-top:1px solid var(--c-line)}
#sst-cl2 .cl2-more details{border-bottom:1px solid var(--c-line)}
#sst-cl2 .cl2-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;font-size:15px;font-weight:700;cursor:pointer;list-style:none}
#sst-cl2 .cl2-more summary::-webkit-details-marker{display:none}
#sst-cl2 .cl2-more summary::after{content:"+";font-size:20px;font-weight:400;line-height:1;color:var(--c-muted)}
#sst-cl2 .cl2-more details[open] > summary::after{content:"\2212"}
#sst-cl2 .cl2-more__body{max-width:900px;padding:0 2px 18px;font-size:14px;line-height:1.65;color:var(--c-muted)}
#sst-cl2 .cl2-more__body :is(div,section){margin:0;padding:0;border:0;background:none}
#sst-cl2 .cl2-more__body h2{display:none}
#sst-cl2 .cl2-more__body h3{margin:14px 0 4px;font-size:14px;font-weight:700;color:var(--c-ink)}
#sst-cl2 .cl2-more__body p{margin:0 0 6px;font-size:14px;color:var(--c-muted)}
#sst-cl2 .cl2-more__body a{color:var(--sst-accent-text,var(--c-accent));text-decoration:underline;text-underline-offset:3px}

/* ---- quick view ---- */
#sst-cl2-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgba(10,10,12,.8)}
#sst-cl2-modal.is-open{display:flex}
#sst-cl2-modal .cl2-modal__box{position:relative;display:grid;grid-template-columns:minmax(0,400px) minmax(0,340px);gap:30px;align-items:center;width:100%;max-width:850px;max-height:calc(100vh - 48px);padding:28px;border-radius:14px;background:var(--c-surface);color:var(--c-ink);overflow:auto}
#sst-cl2-modal .cl2-modal__img{aspect-ratio:63/88;border-radius:4.6%/3.3%;overflow:hidden;background:var(--c-gray)}
#sst-cl2-modal .cl2-modal__img img{width:100%;height:100%;object-fit:cover}
#sst-cl2-modal .cl2-modal__info{display:flex;flex-direction:column;min-width:0;padding-right:8px}
#sst-cl2-modal .cl2-modal__no{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:700;color:var(--c-label)}
#sst-cl2-modal .cl2-modal__name{margin-top:4px;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--c-ink)}
#sst-cl2-modal .cl2-modal__sub{margin-top:2px;font-size:15px;color:var(--c-muted)}
#sst-cl2-modal .cl2-modal__jp{margin-top:4px;font-size:13px;color:var(--c-muted)}
#sst-cl2-modal .cl2-modal__facts{margin-top:16px;border-top:1px solid var(--c-line)}
#sst-cl2-modal .cl2-modal__facts > div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--c-line);font-size:14px}
#sst-cl2-modal .cl2-modal__facts dt{color:var(--c-muted)}
#sst-cl2-modal .cl2-modal__facts dd{font-weight:700;text-align:right}
#sst-cl2-modal .cl2-modal__facts dd span{font-weight:400;font-size:12px;color:var(--c-muted)}
#sst-cl2-modal .cl2-modal__cta{display:flex;flex-direction:column;gap:8px;margin-top:18px}
#sst-cl2-modal .cl2-link{align-self:flex-start;margin-top:4px;font-size:13px;font-weight:600;color:var(--sst-accent-text,var(--c-accent));text-decoration:underline;text-underline-offset:3px}
#sst-cl2-modal .cl2-modal__pos{margin-top:16px;font-size:12px;color:var(--c-muted)}
#sst-cl2-modal .cl2-modal__close{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--c-gray);color:var(--c-ink);font-size:15px;line-height:1;cursor:pointer}
#sst-cl2-modal .cl2-modal__nav{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0 0 4px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer}
#sst-cl2-modal .cl2-modal__nav:disabled{visibility:hidden}
@media(hover:hover){#sst-cl2-modal .cl2-modal__nav:hover{background:rgba(255,255,255,.3)}}

/* ---- tablet ---- */
@media(max-width:1100px){
  #sst-cl2 .cl2-head--side{grid-template-columns:132px minmax(0,1fr)}
  #sst-cl2 .cl2-head--nobox.cl2-head--side{grid-template-columns:minmax(0,1fr)}
  #sst-cl2 .cl2-head__side{grid-column:1/-1;padding:14px 0 0;border-left:0;border-top:1px solid var(--c-line)}
  #sst-cl2 .cl2-list{grid-template-columns:minmax(0,1fr)}
  #sst-cl2 .cl2-list__col + .cl2-list__col{border-top:0}
}
/* ---- phone ---- */
@media(max-width:760px){
  #sst-cl2{padding-bottom:40px}
  #sst-cl2 .cl2-top{margin-bottom:10px}
  #sst-cl2 .cl2-switch{width:100%}
  #sst-cl2 .cl2-setsel{flex:1 1 auto;min-width:0}
  #sst-cl2 .cl2-setsel select{width:100%;max-width:none}
  #sst-cl2 .cl2-nav{padding:0 12px;font-size:18px}
  #sst-cl2 .cl2-nav__t{display:none}
  #sst-cl2 .cl2-head,#sst-cl2 .cl2-head--side{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px}
  #sst-cl2 .cl2-head--nobox,#sst-cl2 .cl2-head--nobox.cl2-head--side{grid-template-columns:minmax(0,1fr)}
  #sst-cl2 .cl2-head__box{width:84px;height:84px;align-self:start}
  #sst-cl2 .cl2-titleRow h1{font-size:22px}
  #sst-cl2 .cl2-stats{gap:2px 14px;font-size:12px}
  #sst-cl2 .cl2-stats b{font-size:13px}
  #sst-cl2 .cl2-actions{grid-column:1/-1}
  #sst-cl2 .cl2-actions .cl2-btn{flex:1 1 auto}
  #sst-cl2 .cl2-chase__row{grid-auto-columns:31%;gap:10px}
  #sst-cl2 .cl2-bar{margin-top:16px;padding:8px 0;gap:8px}
  #sst-cl2 .cl2-chips{flex:1 1 100%}
  #sst-cl2 .cl2-tools{flex:1 1 100%}
  #sst-cl2 .cl2-search{flex:1 1 0}
  #sst-cl2 .cl2-search input{width:100%;font-size:16px}
  #sst-cl2 .cl2-sort{flex:1 1 0;min-width:126px}
  #sst-cl2 .cl2-sort select{width:100%;max-width:none}
  #sst-cl2 .cl2-pulls summary{pointer-events:auto;cursor:pointer;padding:2px 0}
  #sst-cl2 .cl2-pulls summary::after{content:"+";font-size:18px;font-weight:400;line-height:1;letter-spacing:0}
  #sst-cl2 .cl2-pulls[open] summary::after{content:"\2212"}
  #sst-cl2 .cl2-row__rr{display:inline}
  #sst-cl2 .cl2-count__note{flex-basis:100%;margin-left:0}
  #sst-cl2 .cl2-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
  #sst-cl2[data-view="compact"] .cl2-results .cl2-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  #sst-cl2 .cl2-card__meta{margin-top:6px;font-size:11px}
  #sst-cl2 .cl2-rar{height:16px;padding:0 4px;font-size:10px}
  #sst-cl2 .cl2-card__name{height:18px;font-size:12.5px;line-height:18px}
  #sst-cl2 .cl2-card__sub{height:16px;font-size:11px;line-height:16px}
  #sst-cl2 .cl2-card__price{font-size:12px}
  #sst-cl2.has-usd.has-psa .cl2-card__price{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;height:36px;line-height:18px}
  #sst-cl2.has-usd.has-psa .cl2-card__price b{min-height:18px}
  #sst-cl2 .cl2-row{grid-template-columns:30px var(--no-w,52px) minmax(0,1fr) auto;gap:8px;padding:5px 2px}
  #sst-cl2 .cl2-row__img{width:30px}
  #sst-cl2 .cl2-row__rar{display:none}
  #sst-cl2 .cl2-row__price{flex-direction:column;align-items:flex-end;gap:0}
  #sst-cl2 .cl2-buy{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px}
  #sst-cl2 .cl2-buy__img{width:72px;height:72px}
  #sst-cl2 .cl2-buy > .cl2-btn{grid-column:1/-1}
  #sst-cl2-modal{padding:0;align-items:flex-end;gap:0}
  #sst-cl2-modal .cl2-modal__box{grid-template-columns:minmax(0,1fr);gap:16px;max-width:none;max-height:94vh;max-height:94dvh;padding:18px 18px 26px;border-radius:16px 16px 0 0}
  #sst-cl2-modal .cl2-modal__img{width:min(62vw,280px);margin:0 auto}
  #sst-cl2-modal .cl2-modal__info{padding-right:0}
  #sst-cl2-modal .cl2-modal__no{margin-top:8px}
  #sst-cl2-modal .cl2-modal__name{font-size:21px}
  #sst-cl2-modal .cl2-modal__nav{position:fixed;top:26%;z-index:3;width:40px;height:40px;background:rgba(18,18,18,.55)}
  #sst-cl2-modal .cl2-modal__nav[data-dir="-1"]{left:8px}
  #sst-cl2-modal .cl2-modal__nav[data-dir="1"]{right:8px}
}

/* ---- 1.0.3: the newer hand-made pages (M6, M6a, M7, OP16-18, EB05) ---- */
/* the page's own status line ("card list so far - official database not yet published") */
#sst-cl2 .cl2-notice{max-width:820px;margin-top:10px;padding:8px 12px;border:1px solid var(--c-line);border-left:3px solid var(--c-accent);border-radius:4px;background:var(--c-soft);font-size:13px;line-height:1.5;color:var(--c-ink)}
/* text copied from the page (about, FAQ, shop / guide lists): plain theme look */
#sst-cl2 .cl2-more__body p + p{margin-top:10px}
#sst-cl2 .cl2-more__body strong{font-weight:700;color:var(--c-ink)}
#sst-cl2 .cl2-more__body--copy ul{margin:4px 0 0}
#sst-cl2 .cl2-more__body--copy li{padding:4px 0;font-size:14px}
#sst-cl2 .cl2-more__body--copy details{border-bottom:0;border-top:1px solid var(--c-line)}
#sst-cl2 .cl2-more__body--copy details:first-of-type{border-top:0}
#sst-cl2 .cl2-more__body--copy summary{padding:11px 2px;font-size:14px;font-weight:600;color:var(--c-ink)}
#sst-cl2 .cl2-more__body--copy summary::after{font-size:17px}
#sst-cl2 .cl2-more__body--copy details > p{padding:0 2px 10px}
#sst-cl2-after [data-cl2-note] a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){
  #sst-cl2 .cl2-notice{font-size:12px}
}

/* ---- sets without card pictures (XY, BW, CP ...): a plain list, no thumbnail column ---- */
#sst-cl2.no-img .cl2-row{grid-template-columns:var(--no-w,52px) minmax(0,1fr) var(--rar-w,0px) var(--price-w,0px);min-height:46px}
#sst-cl2.no-img .cl2-row__img{display:none}
@media(max-width:760px){
  #sst-cl2.no-img .cl2-row{grid-template-columns:var(--no-w,52px) minmax(0,1fr) auto}
}

/* ---- 1.0.4: "- 0 +" of the booster box (owner 2026-11-13: "buy booster box button change to - 1 + type button, just
   like quick order"). Stands where the "Buy booster box" button stood when the box can be ordered from this page:
   "Booster box" and, as on a Quick Order card, one line per offer (Sealed, No Shrink ...) - label, price and the
   quantity box (the number = how many are in the cart). The theme's own button / input rules (min-height 40px, hover
   fill) are switched off inside the box. ---- */
#sst-cl2 .cl2-qo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 16px;max-width:100%;min-height:40px;padding:3px 4px 3px 14px;border:1px solid var(--c-accent);border-radius:var(--c-radius);background:var(--c-surface);color:var(--c-ink);white-space:nowrap}
/* (the buttons beside the box keep their own height: without this "Shop singles" stretched to the height of four lines) */
#sst-cl2 .cl2-actions{align-items:flex-start}
#sst-cl2 .cl2-qo .cl2-qo__name{display:inline-flex;align-items:center;gap:8px;color:var(--sst-accent-text,var(--c-accent));font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#sst-cl2 .cl2-qo__name svg{width:15px;height:15px;flex:none}
#sst-cl2 .cl2-qo__rows{display:grid;grid-template-columns:auto auto auto;gap:4px 12px;align-items:center}
#sst-cl2 .cl2-qo__row{position:relative;display:grid;grid-column:1/-1;grid-template-columns:minmax(74px,auto) minmax(58px,auto) auto;gap:12px;align-items:center}
@supports (grid-template-columns:subgrid){
  #sst-cl2 .cl2-qo__row{grid-template-columns:subgrid}
}
#sst-cl2 .cl2-qo .cl2-qo__label{font-size:12px;font-weight:700;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:var(--c-label)}
#sst-cl2 .cl2-qo__nb{white-space:nowrap}
@media(hover:hover){
  #sst-cl2 .cl2-qo a.cl2-qo__label:hover{text-decoration:underline}
}
#sst-cl2 .cl2-qo__price{font-size:15px;font-weight:700;line-height:1.15;text-align:right}
/* owner 2026-11-13: "we have 4 type of condition, show it all" - a version that cannot be ordered right now keeps its
   line: "Out of stock" stands where the quantity box would be (same width, so the lines stay in step) */
#sst-cl2 .cl2-qo__out{display:flex;align-items:center;justify-content:center;min-width:112px;height:32px;font-size:12px;font-weight:600;color:var(--c-muted);white-space:nowrap}
#sst-cl2 .cl2-qo__row.is-out .cl2-qo__price{font-weight:600;color:var(--c-muted)}
#sst-cl2 .cl2-qo__qty{flex:none;display:grid;grid-template-columns:34px 42px 34px;grid-template-rows:minmax(0,1fr);height:32px;border:1px solid var(--c-line);border-radius:var(--c-radius);background:var(--c-surface);overflow:hidden}
#sst-cl2 .cl2-qo .cl2-qo__step{display:flex;align-items:center;justify-content:center;align-self:stretch;width:auto;min-width:0;height:auto;min-height:0;margin:0;padding:0 0 2px;border:0;border-radius:0;background:transparent!important;color:var(--c-ink)!important;font-family:inherit;font-size:19px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;box-shadow:none;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#sst-cl2 .cl2-qo .cl2-qo__step:disabled{color:var(--c-muted)!important;opacity:.4;cursor:default}
@media(hover:hover){
  #sst-cl2 .cl2-qo .cl2-qo__step:not(:disabled):hover{background:var(--c-gray)!important}
}
#sst-cl2 .cl2-qo .cl2-qo__step:not(:disabled):active{background:var(--c-line)!important}
#sst-cl2 .cl2-qo .cl2-qo__n{align-self:stretch;width:100%;min-width:0;height:auto;min-height:0;margin:0;padding:0;border:0;border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-ink);font-family:inherit;font-size:15px;font-weight:600;line-height:1;text-align:center;box-shadow:none;-webkit-appearance:none;appearance:none}
#sst-cl2 .cl2-qo .cl2-qo__step:focus-visible,#sst-cl2 .cl2-qo .cl2-qo__n:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
/* what the shop says about a press ("Only 3 in stock"): a small note under the box, nothing moves */
#sst-cl2 .cl2-qo__msg{position:absolute;left:0;top:calc(100% + 6px);z-index:4;width:max-content;max-width:min(340px,86vw);padding:5px 10px;border:1px solid var(--c-line);border-radius:var(--c-radius);background:var(--c-surface);color:#b3261e;font-size:12px;font-weight:600;line-height:1.35;white-space:normal;box-shadow:0 4px 14px rgba(0,0,0,.12)}
#sst-cl2 .cl2-qo__msg[hidden]{display:none}
#sst-cl2 .cl2-qo--foot .cl2-qo__msg{left:auto;right:0}
html[data-sst-theme="dark"] #sst-cl2 .cl2-qo__msg{color:#ff9d94}
@media(max-width:760px){
  /* phone: "Booster box" on its own line, the offer lines under it over the full width, bigger buttons for a thumb */
  #sst-cl2 .cl2-actions .cl2-qo,#sst-cl2 .cl2-buy > .cl2-qo{display:flex;padding:8px 6px 6px 12px}
  #sst-cl2 .cl2-actions .cl2-qo{flex:1 1 100%}
  #sst-cl2 .cl2-buy > .cl2-qo{grid-column:1/-1}
  #sst-cl2 .cl2-qo .cl2-qo__name{flex:1 1 100%}
  #sst-cl2 .cl2-qo__rows{flex:1 1 100%;display:block}
  /* a line: label on the left, price and quantity box on the right; when even that does not fit, the quantity box
     drops under the label and the price (never over them) */
  #sst-cl2 .cl2-qo__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 10px}
  #sst-cl2 .cl2-qo__row + .cl2-qo__row{margin-top:6px}
  /* (a long name - "Damaged (Sealed)" - takes two lines before anything else gives way) */
  #sst-cl2 .cl2-qo .cl2-qo__label{flex:1 1 64px;min-width:0;white-space:normal}
  #sst-cl2 .cl2-qo__price{flex:none}
  #sst-cl2 .cl2-qo__qty{grid-template-columns:42px 44px 42px;height:40px}
  #sst-cl2 .cl2-qo__out{min-width:130px;height:40px}
  #sst-cl2 .cl2-qo .cl2-qo__n{font-size:16px}
  /* the buttons sit in the column beside the box photo, which is too narrow for a line with label, price and "- 0 +":
     once they start below the photo (the script checks and sets is-wide) they use the full width of the header */
  #sst-cl2 .cl2-head:not(.cl2-head--nobox) .cl2-actions.is-wide{margin-left:-98px}
}
