/* sst-cardhub2 0.1 (preview 2026-11-12) - card list MAIN page + game pages. Needs cardlist2.css (same frame, toolbar, chips, buttons).
   Every box photo sits in the same square, whatever the words under it. No :has() anywhere. */

#sst-cl2.sst-cl2--hub .cl2-head{padding:20px 22px}
#sst-cl2.sst-cl2--hub .cl2-bar{margin-top:16px}
#sst-cl2 a.cl2-chip{text-decoration:none}

/* ---- game block + series block ---- */
#sst-cl2 .cl2-game + .cl2-game{margin-top:44px;padding-top:30px;border-top:1px solid var(--c-line)}
#sst-cl2 .cl2-game__h{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font-size:22px;line-height:1.2;font-weight:700;color:var(--c-ink)}
#sst-cl2 .cl2-game__h small{font-size:13px;font-weight:600;color:var(--c-muted)}
#sst-cl2 .cl2-game__h a{margin-left:auto;font-size:13px;font-weight:600;color:var(--sst-accent-text,var(--c-accent));text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
#sst-cl2.sst-cl2--hub .cl2-sec + .cl2-sec{margin-top:30px}
#sst-cl2.sst-cl2--hub h3.cl2-sec__h{font-size:15px}

/* ---- set tiles ---- */
#sst-cl2 .cl2-setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:22px 14px}
#sst-cl2 .cl2-set{display:flex;flex-direction:column;min-width:0}
#sst-cl2 .cl2-set__img{display:block;width:100%;aspect-ratio:1/1;border:1px solid var(--c-line);border-radius:8px;overflow:hidden;background:var(--c-gray);transition:transform .16s ease,box-shadow .16s ease}
#sst-cl2 .cl2-set__img img,#sst-cl2 .cl2-srow__img img{width:100%;height:100%;object-fit:contain}
@media(hover:hover){#sst-cl2 .cl2-set:hover .cl2-set__img{transform:translateY(-3px);box-shadow:0 10px 22px rgba(18,18,18,.14)}}
#sst-cl2 .cl2-set__top{display:flex;align-items:center;justify-content:space-between;gap:6px;height:20px;margin-top:9px}
#sst-cl2 .cl2-set .cl2-code,#sst-cl2 .cl2-srow .cl2-code{height:20px;padding:0 7px;border-color:var(--c-line);background:var(--c-surface);color:var(--c-label);font-size:11px;white-space:nowrap}
#sst-cl2 .cl2-set__game{min-width:0;overflow:hidden;font-size:11px;font-weight:600;color:var(--c-muted);text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-set__name{display:-webkit-box;height:38px;margin-top:5px;overflow:hidden;font-size:14px;font-weight:600;line-height:19px;color:var(--c-ink);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
#sst-cl2 .cl2-set__meta{height:17px;margin-top:2px;overflow:hidden;font-size:12px;line-height:17px;color:var(--c-muted);text-overflow:ellipsis;white-space:nowrap}

/* ---- list rows ---- */
#sst-cl2 .cl2-srow{display:grid;grid-template-columns:44px 84px minmax(0,1fr) 104px 76px;align-items:center;gap:12px;min-height:60px;padding:6px 8px;border-bottom:1px solid var(--c-line)}
@media(hover:hover){#sst-cl2 .cl2-srow:hover{background:var(--c-gray)}}
#sst-cl2 .cl2-srow__img{display:block;width:44px;height:44px;border-radius:5px;overflow:hidden;background:var(--c-gray)}
#sst-cl2 .cl2-srow__name{min-width:0}
#sst-cl2 .cl2-srow__name b{display:block;overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-srow__name small{display:block;overflow:hidden;font-size:12px;color:var(--c-muted);text-overflow:ellipsis;white-space:nowrap}
#sst-cl2 .cl2-srow__c{display:none;font-style:normal;font-weight:700}
#sst-cl2 .cl2-srow__count,#sst-cl2 .cl2-srow__rel{font-size:13px;color:var(--c-muted);text-align:right;white-space:nowrap}
#sst-cl2 .cl2-srow__img.is-missing::after{content:""}

/* ---- older sets that have no box photo: plain links ---- */
#sst-cl2 .cl2-older{display:grid;gap:12px;margin-top:28px;padding:16px 18px;border:1px solid var(--c-line);border-radius:var(--sst-card-radius,12px);background:var(--c-surface)}
#sst-cl2 .cl2-older__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
#sst-cl2 .cl2-older__label{flex:0 0 132px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
#sst-cl2 .cl2-older a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);color:var(--c-ink);font-size:12.5px;font-weight:600;white-space:nowrap}
@media(hover:hover){#sst-cl2 .cl2-older a:hover{border-color:var(--c-ink)}}

/* ---- the page's own blocks under the list (PSA 10 vault, rankings, shop links) keep their look ---- */
#sst-cl2-after.cl2-after--hub .cl2-after__item{margin-top:36px}
#sst-cl2-after.cl2-after--hub .cl2-after__item > *{max-width:none;margin-left:0;margin-right:0;margin-top:0}

@media(max-width:760px){
  #sst-cl2.sst-cl2--hub .cl2-head{padding:14px}
  #sst-cl2.sst-cl2--hub .cl2-sort{min-width:142px}
  #sst-cl2 .cl2-game + .cl2-game{margin-top:32px;padding-top:22px}
  #sst-cl2 .cl2-game__h{flex-wrap:wrap;gap:4px 10px;font-size:19px}
  #sst-cl2 .cl2-setgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}
  #sst-cl2 .cl2-set__top{margin-top:7px}
  #sst-cl2 .cl2-set__game{display:none}
  #sst-cl2 .cl2-set__name{height:34px;font-size:12.5px;line-height:17px}
  #sst-cl2 .cl2-set__meta{font-size:11px}
  #sst-cl2 .cl2-srow{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:6px 2px}
  #sst-cl2 .cl2-srow__img{width:40px;height:40px}
  #sst-cl2 .cl2-srow__code,#sst-cl2 .cl2-srow__rel{display:none}
  #sst-cl2 .cl2-srow__c{display:inline}
  #sst-cl2 .cl2-older{padding:14px}
  #sst-cl2 .cl2-older__label{flex-basis:100%}
}