:root{
  --ink:#1C2B22;
  --walnut:#6B4226;
  --walnut-dark:#4A2E19;
  --gold:#C08A3E;
  --gold-light:#E3C48A;
  --slate:#3E5C76;
  --slate-dark:#28425A;
  --stitch:#8B2E2E;
  --bone:#EDE8DD;
  --bone-dark:#E0D8C4;
  --paper:#FBF8F1;
  --ink-soft:#3A4A3F;
  --font-brand: 'Copperplate','Copperplate Gothic Bold',Georgia,serif;
  --font-head: Georgia,'Iowan Old Style','Times New Roman',serif;
  --font-body: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-mono: 'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:3px solid var(--gold);
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{
  font-family:var(--font-brand);
  color:var(--bone);
  font-size:20px;
  letter-spacing:3px;
  display:flex; align-items:baseline; gap:4px;
}
.wordmark sup{font-family:var(--font-mono); font-size:11px; color:var(--gold); letter-spacing:0;}
nav{display:flex; gap:4px;}
nav a.nav-btn{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:.4px;
  color:var(--bone-dark);
  background:transparent;
  border:none;
  padding:8px 14px;
  cursor:pointer;
  border-radius:3px;
  transition:background .15s, color .15s;
  display:inline-block;
}
nav a.nav-btn:hover{background:rgba(255,255,255,.08); color:var(--bone);}
nav a.nav-btn.active{color:var(--gold); font-weight:600;}

main{max-width:1080px; margin:0 auto; padding:0 28px 80px;}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px;
  align-items:center; padding:20px 0 48px; border-bottom:1px solid var(--bone-dark);
}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.5px;
  color:var(--stitch); text-transform:uppercase; margin:32px 0 0;
  white-space:nowrap;
}
h1.hero-head{
  font-family:var(--font-head); font-size:44px; line-height:1.08; margin:0 0 18px;
  color:var(--ink);
}
.hero p{font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:46ch; margin:0 0 28px;}
.cta-row{display:flex; gap:14px;}
.btn{
  font-family:var(--font-body); font-size:14px; font-weight:600;
  padding:13px 22px; cursor:pointer; border:none; letter-spacing:.2px;
}
.btn-raw{
  background:var(--walnut); color:var(--paper); border-radius:20px 4px 20px 4px;
}
.btn-raw:hover{background:var(--walnut-dark);}
.btn-graded{
  background:transparent; color:var(--slate-dark); border:1.5px solid var(--slate);
  border-radius:2px;
}
.btn-graded:hover{background:var(--slate); color:var(--paper);}

.card-stage{position:relative; height:340px;}
.photo-wrap{position:relative;}
.silhouette{
  position:absolute; width:54%; height:54%; left:23%; top:24%;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
  pointer-events:none;
}
.stack-card{
  position:absolute; width:210px; height:294px; border-radius:8px;
  box-shadow:0 18px 34px rgba(28,43,34,.25);
  border:1px solid rgba(0,0,0,.15);
  overflow:hidden; cursor:pointer;
}
.stack-card .shine{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 58%);
}
.stack-card .face{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:12px; font-family:var(--font-mono); color:var(--paper);
}
.stack-card .face .num{font-size:11px; opacity:.85;}
.stack-card .face .name{font-family:var(--font-head); font-size:16px; font-weight:700; line-height:1.15;}
.stack-1{background:linear-gradient(150deg,#005A9C,#00355e); top:8px; left:70px; transform:rotate(-4deg); z-index:2;}
.stack-2{background:linear-gradient(150deg,#C6011F,#7c010f); top:26px; left:14px; transform:rotate(6deg); z-index:1;}

.trust-bar{
  display:flex; justify-content:space-between; gap:20px; padding:22px 0;
  border-bottom:1px solid var(--bone-dark); flex-wrap:wrap;
}
.trust-bar div{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); letter-spacing:.3px;}
.trust-bar div b{color:var(--stitch);}

/* ---------- featured strip ---------- */
.section-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--walnut); margin:52px 0 18px; display:flex; align-items:center; gap:12px;
}
.section-label::after{content:""; flex:1; height:1px; background:var(--bone-dark);}
.strip{display:flex; gap:16px; overflow-x:auto; padding-bottom:10px;}

.mini{
  flex:0 0 132px; border-radius:6px; overflow:hidden; position:relative;
  height:184px; box-shadow:0 6px 14px rgba(28,43,34,.15); cursor:pointer;
}
.mini .face{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:9px; font-family:var(--font-mono); color:var(--paper); font-size:10px;
}
.mini .face .name{font-family:var(--font-head); font-size:13px; font-weight:700; line-height:1.1;}
.mini .shine{position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.3) 48%, transparent 60%);}

/* ---------- type split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:52px;}
.split-card{
  padding:30px 26px; cursor:pointer; transition:transform .15s;
}
.split-card:hover{transform:translateY(-3px);}
.split-card h3{font-family:var(--font-head); font-size:22px; margin:0 0 8px;}
.split-card p{font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; line-height:1.5;}
.split-raw{background:var(--bone-dark); border-radius:20px 4px 20px 4px; border:1px solid var(--bone-dark);}
.split-graded{background:var(--slate-dark); color:var(--bone); border-radius:2px;}
.split-graded p{color:#c9d6e0;}
.split-graded h3{color:var(--paper);}
.split-cta{font-family:var(--font-mono); font-size:12px; letter-spacing:1px;}
.split-raw .split-cta{color:var(--stitch);}
.split-graded .split-cta{color:var(--gold-light);}

footer{
  background:var(--ink); color:var(--bone-dark); padding:34px 28px; margin-top:60px;
  font-family:var(--font-mono); font-size:12px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
footer .gold-rule{color:var(--gold);}

/* ---------- shop pages ---------- */
.shop-head{padding:44px 0 8px;}
.shop-head h1{font-family:var(--font-head); font-size:32px; margin:0 0 6px;}
.shop-head p{color:var(--ink-soft); font-size:14.5px; margin:0 0 20px;}
.filter-bar{
  display:flex; gap:10px; padding-bottom:26px; border-bottom:1px solid var(--bone-dark); margin-bottom:30px;
  flex-wrap:wrap;
}
.filter-bar select{
  font-family:var(--font-mono); font-size:12px; padding:8px 10px; border:1px solid var(--bone-dark);
  background:var(--paper); border-radius:3px; color:var(--ink-soft);
}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}

/* raw tile */
.raw-tile{
  background:var(--paper); border:1px solid var(--bone-dark); border-radius:8px; padding:14px;
  position:relative; cursor:pointer;
}
.raw-photo{
  height:170px; border-radius:6px; position:relative; overflow:hidden; margin-bottom:12px;
}
.raw-photo .face{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:10px;
  color:var(--paper); font-family:var(--font-mono); font-size:10px;
}
.raw-photo .face .name{font-family:var(--font-head); font-size:14px; font-weight:700;}
.raw-photo .shine{position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.3) 48%, transparent 60%);}
.tag{
  position:absolute; top:-8px; right:8px; background:var(--gold-light); color:var(--walnut-dark);
  font-family:var(--font-mono); font-size:10px; padding:4px 8px; border-radius:2px;
  transform:rotate(4deg); box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.slab{position:relative; cursor:pointer;}
.sold-badge{
  position:absolute; top:-8px; left:8px; z-index:6;
  background:var(--stitch); color:var(--paper);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1px;
  padding:4px 9px; border-radius:2px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
[data-item-id].is-sold .raw-photo,
[data-item-id].is-sold .slab-photo,
[data-item-id].is-sold.mini,
[data-item-id].is-sold.stack-card{ filter:grayscale(70%) brightness(.8); }

.ebay-photo{
  position:absolute; top:0; right:0; width:48%; height:100%;
  object-fit:cover; display:block; z-index:1;
  border-left:2px solid rgba(255,255,255,.45);
}
.has-photo .silhouette{ width:40%; height:40%; left:8%; top:30%; z-index:0; }
.raw-info .set{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); letter-spacing:.3px;}
.raw-info .player{font-family:var(--font-head); font-size:15px; font-weight:700; margin:2px 0 8px;}
.raw-info .price-row{display:flex; align-items:center; justify-content:space-between;}
.price{font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--stitch);}
.add-btn{
  font-family:var(--font-mono); font-size:11px; background:transparent; border:1px solid var(--walnut);
  color:var(--walnut); padding:7px 12px; border-radius:14px 2px 14px 2px; cursor:pointer;
}
.add-btn:hover{background:var(--walnut); color:var(--paper);}

/* graded slab */
.slab-label{
  background:var(--slate-dark); color:var(--paper); padding:9px 12px;
  display:flex; justify-content:space-between; align-items:center;
}
.slab-label .co{font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:#c9d6e0;}
.slab-label .grade{font-family:var(--font-mono); font-size:19px; font-weight:700; color:var(--gold-light);}
.slab-photo{height:150px; position:relative; margin:10px 12px 0; border-radius:4px; overflow:hidden;}
.slab-photo .face{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:9px;
  color:var(--paper); font-family:var(--font-mono); font-size:10px;
}
.slab-photo .face .name{font-family:var(--font-head); font-size:13px; font-weight:700;}
.slab-photo .shine{position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.3) 48%, transparent 60%);}
.slab-info{padding:12px;}
.slab-info .cert{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft);}
.slab-info .player{font-family:var(--font-head); font-size:14.5px; font-weight:700; margin:3px 0 9px;}
.slab-info .price-row{display:flex; justify-content:space-between; align-items:center;}
.view-btn{
  font-family:var(--font-mono); font-size:11px; background:var(--slate); color:var(--paper);
  border:none; padding:7px 12px; border-radius:2px; cursor:pointer;
}
.view-btn:hover{background:var(--slate-dark);}

@media (max-width:760px){
  .hero{grid-template-columns:1fr; padding-top:36px;}
  .card-stage{height:260px;}
  .split{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(2,1fr);}
  header{padding:12px 16px;}
  main{padding:0 16px 60px;}
  .eyebrow{white-space:normal;}
}