/* hermit cards (/cards): Collector Crypt slabs on the desk. Same desk palette and type as style.css; the slab scans carry the colour.
   Signature: the slab itself, large, on a dark well, with the grade and the price set under it like a sale ticket. No tilts, no glows. */

.cardsp main { padding-bottom: 24px; }
.cchero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: end; padding: 30px 0 26px; }
.cchead h1 { font: 680 42px/1.05 var(--f); letter-spacing: -.04em; margin: 0; max-width: 15em; text-wrap: balance; }
.cchead h1 span { color: var(--coral); }
.cchead .lede { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 14px 0 0; max-width: 36em; text-wrap: pretty; }

.ccslip { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px 14px; box-shadow: var(--soft); }
.ccslip .fs-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ccslip .fs-h b { font: 650 14px var(--f); }
.ccslip .fs-h b span { color: var(--ink); }
.ccslip .fs-h img { opacity: .55; border-radius: 6px; }
.fs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.fs-row span { font-size: 13.5px; color: var(--ink-2); }
.fs-row b { font: 600 13.5px var(--m); text-align: right; }
.fs-row:first-of-type b { color: var(--green); }
.fs-row small { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.fs-f { font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 9px; line-height: 1.45; }

.cctabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.cctabs [role=tab] { border: 0; background: none; padding: 12px 14px; font: 620 15px var(--f); color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.cctabs [role=tab][aria-selected=true] { color: var(--ink); border-bottom-color: var(--coral); }
.cctabs [role=tab]:hover { color: var(--ink); }
.cctabs [role=tab] .n { font: 600 11px var(--m); color: var(--ink-3); margin-left: 6px; }
.ccfind { display: flex; gap: 6px; }
.ccfind input { width: 260px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--well); padding: 0 12px; font: 500 13px var(--m); outline: none; }
.ccfind input:focus, .ccfilters input:focus, .ccfilters select:focus, .ccwform input:focus, .ccwform select:focus, .act input:focus { border-color: var(--line-2); background: var(--field); }

.cchd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.cchd h2 { margin: 0; font: 680 22px/1.2 var(--f); letter-spacing: -.025em; }
.cchd .sub { font-size: 13.5px; color: var(--ink-3); }

/* ---- live on hermit: the activity rows ---- */
.cclive { margin-bottom: 34px; }
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lane { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px 10px; min-width: 0; }
.lane h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font: 650 14px var(--f); }
.lane h3 small { font: 500 11.5px var(--m); color: var(--ink-3); }
.lrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.lrow:first-of-type { border-top: 0; }
.lrow:hover .lt b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.lrow .lim { width: 44px; height: 62px; border-radius: 6px; background: var(--well); overflow: hidden; display: grid; place-items: center; }
.lrow .lim img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lt { min-width: 0; }
.lt b { display: block; font: 620 14px/1.3 var(--f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp { text-align: right; }
.lp b { display: block; font: 600 14px var(--m); }
.lp small { display: block; font-size: 11.5px; color: var(--ink-3); }
.lempty { display: flex; gap: 14px; align-items: center; padding: 6px 0 8px; }
.lempty img { width: 56px; height: 56px; flex: none; }
.lempty span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.lempty .btn { height: 34px; font-size: 13px; padding: 0 12px; border-radius: 10px; margin-top: 8px; }

/* ---- browse ---- */
.ccfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.ccfilters input[type=search] { flex: 1 1 220px; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--well); padding: 0 12px; font-size: 14px; outline: none; }
.ccfilters select, .ccfilters .rng input { height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--well); padding: 0 10px; font-size: 13.5px; outline: none; color: var(--ink); }
.ccfilters .rng { display: inline-flex; gap: 4px; }
.ccfilters .rng input { width: 78px; font-family: var(--m); font-size: 12.5px; }
.frs { display: flex; gap: 4px; flex-wrap: wrap; }
.frs button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: none; font: 600 13px var(--f); color: var(--ink-2); cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.frs button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #13302f; }
.frs button .n { font: 500 11px var(--m); opacity: .7; margin-left: 5px; }
.tog { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; padding: 0 4px; white-space: nowrap; }
.tog input { accent-color: var(--coral); width: 16px; height: 16px; }

.ccgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; }
.slab { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); min-width: 0; }
.slab:hover { border-color: var(--line-2); transform: translateY(-2px); }
.slab .well { position: relative; aspect-ratio: 480 / 700; background: var(--well); display: grid; place-items: center; padding: 12px 12px 0; overflow: hidden; }
.slab .well img { width: 100%; height: 100%; object-fit: contain; object-position: center top; display: block; }
.slab .well .ph, .bigwell .ph { font: 600 12px var(--m); color: var(--ink-3); text-align: center; padding: 12px; }
.slab .badge { position: absolute; left: 10px; bottom: 10px; display: inline-flex; gap: 6px; }
.gr { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; background: rgba(9, 25, 26, .88); color: var(--ink); font: 650 12px/1 var(--m); letter-spacing: .01em; border: 1px solid rgba(245, 238, 226, .12); }
.gr.ten { background: var(--gold); color: #2a1f05; border-color: var(--gold); }
.st { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; font: 650 11.5px/1 var(--f); background: var(--coral); color: #fff; }
.st.auc { background: var(--ink); color: #13302f; }
.slab .meta { padding: 11px 13px 13px; display: grid; gap: 3px; border-top: 1px solid var(--line); }
.slab .meta b { font: 640 14px/1.3 var(--f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slab .meta .set { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slab .meta .row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.slab .meta .row2 span { font: 500 11.5px var(--m); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slab .meta .row2 b { font: 600 13px var(--m); flex: none; }
.slab .meta .row2 b.ask { color: var(--coral-ink); }
.ccmore { display: flex; justify-content: center; padding: 22px 0 6px; }
.ccnote { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.ccnote img { width: 72px; height: 72px; flex: none; }
.ccnote b { display: block; font: 650 15px/1.3 var(--f); }
.ccnote span { font-size: 13.5px; color: var(--ink-2); }
.ccnote .btn { margin-top: 10px; height: 38px; font-size: 13.5px; border-radius: 12px; }
.skel { aspect-ratio: 196 / 380; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }

/* ---- wanted ---- */
.ccwant { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.ccwform { padding: 18px; display: grid; gap: 12px; position: sticky; top: 16px; }
.ccwform h3 { margin: 0; font: 680 18px var(--f); letter-spacing: -.02em; }
.ccwform label { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.ccwform input, .ccwform select { height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; font-size: 14.5px; color: var(--ink); outline: none; min-width: 0; width: 100%; }
.ccwform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.unit { position: relative; display: block; min-width: 0; }
.unit i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 12px var(--m); font-style: normal; color: var(--ink-3); }
.unit input { padding-right: 46px; font-family: var(--m); margin: 0; }
.ccwform .btn { margin-top: 4px; }
.ccwform .fine { padding: 0; text-align: left; min-height: 0; }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; }
.wrow b { font: 650 16px/1.3 var(--f); }
.wrow .wm { font-size: 12.5px; color: var(--ink-3); }
.wrow .wp { text-align: right; }
.wrow .wp b { display: block; font: 600 15px var(--m); }
.wrow .wp small { font-size: 11.5px; color: var(--ink-3); }
.wrow .wa { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wrow .wa .btn { height: 34px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.wrow .wa .fl { font-size: 12.5px; color: var(--ink-2); }

/* ---- a card page ---- */
.cpage { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 44px; align-items: start; padding: 4px 0 30px; }
.bigwell { position: sticky; top: 16px; background: var(--well); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; place-items: center; aspect-ratio: 440 / 690; }
.bigwell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.ctitle h1 { margin: 0; font: 680 34px/1.08 var(--f); letter-spacing: -.035em; text-wrap: balance; }
.ctitle .cset { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.cbadges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cbadges .gr { height: 30px; font-size: 13.5px; padding: 0 11px; border-radius: 9px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 20px 0 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.facts div { padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.facts div:nth-child(3n) { border-right: 0; }
.facts div:nth-last-child(-n + 3) { border-bottom: 0; }
.facts dt { font: 600 10.5px var(--m); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font: 600 14px/1.3 var(--f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts dd.mono { font: 600 13px var(--m); }
.facts dd a { text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cownr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 13.5px; color: var(--ink-2); }
.cownr .mono { color: var(--ink); }
.cact { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: var(--lift); }
.cact .ask { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cact .ask small { font-size: 12.5px; color: var(--ink-3); }
.cact .ask b { font: 650 30px/1.1 var(--m); letter-spacing: -.02em; }
.cact .ask em { font-style: normal; font: 500 14px var(--m); color: var(--ink-3); margin-left: 10px; }
.cact .ask + .btn, .cact .ask + form { margin-top: 14px; }
.cact .btn.wide + .btn.wide { margin-top: 8px; }
.cact .sep { height: 1px; background: var(--line); margin: 16px 0; }
.act { display: grid; gap: 8px; }
.act .lab { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.act .lab.sub { font-weight: 500; font-family: var(--m); font-size: 11.5px; }
.act .labrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.act select.exp { height: 32px; width: auto; border-radius: 10px; padding: 0 8px; font: 600 12.5px var(--f); color: var(--ink-2); background: var(--field); }
.act .line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.act input, .act select { height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); padding: 0 14px; font: 600 15px var(--m); color: var(--ink); outline: none; min-width: 0; width: 100%; }
.act .line .btn { height: 46px; border-radius: 14px; }
.act .seg2 { display: inline-flex; gap: 2px; background: var(--field); border-radius: 12px; padding: 3px; }
.act .seg2 button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font: 620 13px var(--f); color: var(--ink-3); cursor: pointer; }
.act .seg2 button[aria-pressed=true] { background: var(--card); color: var(--ink); }
.act .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.act .three button { height: 40px; border-radius: 12px; border: 1px solid var(--line); background: none; font: 620 13.5px var(--f); color: var(--ink-2); cursor: pointer; }
.act .three button[aria-pressed=true] { border-color: var(--ink); color: var(--ink); background: var(--field); }
.otabs { display: flex; gap: 2px; margin-bottom: 12px; }
.otabs button { border: 0; background: none; padding: 7px 11px; border-radius: 999px; font: 620 13.5px var(--f); color: var(--ink-3); cursor: pointer; }
.otabs button[aria-pressed=true] { background: var(--field); color: var(--ink); }
.fees { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.fees b { color: var(--ink-2); font-weight: 600; font-family: var(--m); }
.cmsg { margin-top: 12px; }
.csec { margin-top: 26px; }
.csec h3 { margin: 0 0 10px; font: 650 15px var(--f); }
.csec .lrow { grid-template-columns: minmax(0, 1fr) auto; }
.csec .none { font-size: 13.5px; color: var(--ink-3); padding: 4px 0; }
.cnote { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.5; }
.cnote b { color: var(--ink-2); }
.why { margin-top: 12px; }

.cchow { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 40px; }
.cchow .steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cchow .steps li { counter-increment: s; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.cchow .steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 600 12px var(--m); color: var(--coral-ink); margin-bottom: 8px; }
.cchow .steps b { color: var(--ink); display: block; font-size: 15.5px; margin-bottom: 4px; }
.cchow .more { margin: 22px 0 0; font-size: 14px; color: var(--ink-3); }
.cchow .more a { color: var(--ink-2); }

@media (max-width: 1100px) {
  .cchero { grid-template-columns: 1fr; gap: 20px; }
  .ccslip { max-width: 520px; }
  .ccwant { grid-template-columns: 1fr; }
  .ccwform { position: static; order: -1; }
  .cpage { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .cchero { padding: 18px 0 18px; }
  .cchead h1 { font-size: 29px; letter-spacing: -.035em; }
  .cchead .lede { font-size: 14.5px; margin-top: 10px; }
  .ccslip { padding: 12px 14px 10px; } .ccslip .fs-row small, .ccslip .fs-f { display: none; } .ccslip .fs-row { padding: 7px 0; }
  .cctabs { flex-wrap: wrap; }
  .cctabs .grow { display: none; }
  .ccfind { width: 100%; padding: 8px 0 10px; }
  .ccfind input { flex: 1; width: auto; min-width: 0; }
  .lanes { grid-template-columns: 1fr; }
  .ccfilters input[type=search] { flex-basis: 100%; }
  .frs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .frs button { flex: none; }
  .ccfilters select { flex: 1 1 40%; min-width: 0; }
  .ccfilters .rng { flex: 1 1 100%; } .ccfilters .rng input { flex: 1; width: auto; min-width: 0; }
  .ccgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .slab { border-radius: 14px; }
  .slab .well { padding: 8px 8px 0; }
  .slab .meta { padding: 9px 10px 11px; }
  .slab .meta b { font-size: 13px; }
  .slab .meta .row2 { flex-direction: column; gap: 2px; align-items: flex-start; }
  .cpage { grid-template-columns: 1fr; gap: 18px; }
  .bigwell { position: static; max-width: 340px; width: 100%; margin: 0 auto; padding: 14px; }
  .ctitle h1 { font-size: 26px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3n) { border-right: 1px solid var(--line); }
  .facts div:nth-child(2n) { border-right: 0; }
  .facts div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .facts div:nth-last-child(-n + 2) { border-bottom: 0; }
  .cact { padding: 14px; border-radius: 18px; }
  .cchow .steps { grid-template-columns: 1fr; gap: 18px; }
  .wrow { grid-template-columns: 1fr; }
  .wrow .wp { text-align: left; }
}