*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
:root{
  --void:#0a0a0b;
  --panel:#17171b;
  --hair:#2a2a30;
  --ink:#f1ede2;
  --ink-dim:#8d8d95;
  --ink-faint:#5c5c63;
  --gold:#c6a15b;
  --gold-bright:#e8c878;
  --emerald:#4fae74;
  --radius:12px;
  --chrome-gold:linear-gradient(120deg, #6b4f1e 0%, #d9ac52 16%, #fff3cf 34%, #f0cd7a 46%, #8a6423 58%, #f6dc9a 72%, #c99a44 86%, #7a5a26 100%);
  --chrome-gold-soft:linear-gradient(120deg, rgba(107,79,30,0.9) 0%, rgba(217,172,82,0.95) 20%, rgba(255,243,207,0.98) 38%, rgba(240,205,122,0.95) 52%, rgba(138,100,35,0.9) 68%, rgba(246,220,154,0.95) 84%, rgba(122,90,38,0.9) 100%);
}
body{
  background:var(--void);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Oswald',sans-serif; text-transform:uppercase;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:0;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--hair);
}
.hero-img{
  position:absolute; inset:0;
  background-image:url('img/hero/hero-800.webp');
  background-size:cover;
  background-position:center 18%;
  filter:saturate(0.95) brightness(0.68);
  transform:scale(1.06);
}
@media (min-width:900px){
  .hero{min-height:46vh;}
  .hero-img{background-image:url('img/hero/hero-1600.webp');}
}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.2) 0%, rgba(10,10,11,0.45) 55%, var(--void) 97%),
    linear-gradient(90deg, rgba(10,10,11,0.78) 0%, rgba(10,10,11,0.05) 55%);
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:28px 18px 20px;
}
@media (min-width:640px){.hero-inner{padding:40px 32px 32px;}}
.hero-plate{
  border:1px solid rgba(198,161,91,0.55);
  background:rgba(10,10,11,0.55);
  backdrop-filter:blur(6px);
  padding:18px;
  max-width:620px;
  opacity:0;
  transform:translateY(14px);
  animation:rise 0.8s cubic-bezier(.16,.8,.3,1) 0.1s forwards;
}
@media (min-width:640px){.hero-plate{padding:20px 22px;}}
@keyframes rise{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.hero-plate{animation:none; opacity:1; transform:none;}}
.hero-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:7.5px;
  letter-spacing:0.1em;
  background:var(--chrome-gold);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:flex; align-items:center; gap:6px;
  margin-bottom:12px;
  white-space:nowrap;
  animation:chromeSweep 6s linear infinite;
}
@media (min-width:420px){.hero-eyebrow{font-size:9px; letter-spacing:0.14em; gap:8px;}}
@media (min-width:640px){.hero-eyebrow{font-size:10px; letter-spacing:0.18em;}}
.hero-eyebrow::before{content:""; width:16px; height:1px; background:var(--gold-bright); display:inline-block; flex-shrink:0;}
@keyframes chromeSweep{0%{background-position:0% 0;}100%{background-position:220% 0;}}
@media (prefers-reduced-motion:reduce){.hero-eyebrow{animation:none;}}
.hero-title{
  font-size:clamp(20px,7.8vw,44px);
  line-height:0.98;
  font-weight:600;
  margin-bottom:10px;
  white-space:nowrap;
}
.hero-sub{
  font-size:13px;
  color:var(--ink-dim);
  line-height:1.5;
  max-width:480px;
  font-family:'IBM Plex Sans',sans-serif;
  text-transform:none;
}
.hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--hair);}
.hero-meta div{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-faint); letter-spacing:0.05em;}
.hero-meta span{display:block; color:var(--ink); font-size:14px; margin-top:2px; font-weight:500;}

.hero-seller{
  display:flex; align-items:center; gap:8px;
  flex-basis:100%;
  width:100%;
  padding:7px 12px 7px 7px;
  border:1px solid var(--hair);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
  text-decoration:none;
  transition:border-color .18s, background .18s;
}
@media (min-width:520px){.hero-seller{flex-basis:auto; width:auto; margin-left:auto;}}
@media (hover:hover){.hero-seller:hover{border-color:rgba(198,161,91,0.4); background:rgba(255,255,255,0.05);}}
.hero-seller-avatar{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  object-fit:cover; object-position:50% 25%;
  border:1px solid rgba(198,161,91,0.5);
}
.hero-seller-info{min-width:0; flex:1;}
.hero-seller-name{display:block; color:var(--ink); font-size:10.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hero-seller-phone{display:block; color:var(--gold-bright); font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:0.01em; line-height:1.25; white-space:nowrap;}
.hero-seller-icon{flex-shrink:0; width:16px; height:16px; color:#3fbf5f; opacity:0.9;}

/* ---------- SEARCH / FILTER BAR ---------- */
.searchbar-wrap{
  position:sticky; top:0; z-index:40;
  background:rgba(10,10,11,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.searchbar{
  max-width:1240px; margin:0 auto;
  padding:14px 14px 10px;
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
@media (min-width:640px){.searchbar{padding:18px 32px 12px; gap:12px;}}
.search-input-wrap{position:relative; flex:2 1 180px; min-width:120px; order:1;}
.search-input{
  width:100%;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:9px;
  padding:10px 12px 10px 34px;
  color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.search-input:focus{border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(232,200,120,0.12);}
.search-input::placeholder{color:var(--ink-faint);}
.search-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:13px; height:13px; opacity:0.55;}

.select-wrap{position:relative; order:2; flex:0 1 auto; display:flex; align-items:center; max-width:118px;}
@media (min-width:480px){.select-wrap{max-width:none;}}
.select-icon{position:absolute; left:9px; top:50%; transform:translateY(-50%); width:11px; height:11px; color:var(--ink-faint); pointer-events:none;}
.select-chevron{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:11px; height:11px; color:var(--ink-faint); pointer-events:none;}
.sort-select{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  width:100%;
  background:var(--panel);
  border:1px solid var(--hair);
  color:var(--ink-dim);
  border-radius:9px;
  padding:9px 24px 9px 26px;
  cursor:pointer;
  outline:none;
  appearance:none; -webkit-appearance:none;
  transition:border-color .2s, color .2s;
  text-overflow:ellipsis;
}
@media (min-width:480px){.sort-select{font-size:11px; padding:10px 30px 10px 32px;}}
.sort-select:hover, .sort-select:focus{border-color:var(--gold-bright); color:var(--ink);}
.count-tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); white-space:nowrap; order:3; margin-left:auto;}

.chipsbar{max-width:1240px; margin:0 auto; padding:2px 14px 14px;}
@media (min-width:640px){.chipsbar{padding:2px 32px 18px;}}
.chips{
  display:flex; gap:6px; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
@media (min-width:480px){.chips{gap:8px;}}
.chips::-webkit-scrollbar{display:none;}
@media (min-width:900px){.chips{flex-wrap:wrap; overflow:visible;}}
.tcg-chips{margin-bottom:8px;}
.sub-chips{padding-top:10px; margin-top:2px; border-top:1px solid var(--hair); position:relative;}
.sub-chips::before{content:""; position:absolute; top:-1px; left:0; width:44px; height:1px; background:var(--chrome-gold);}

.chip{
  position:relative;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:0.03em;
  padding:8px 14px;
  border-radius:9px;
  border:1px solid var(--hair);
  background:var(--panel);
  color:var(--ink-dim);
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
  transition:border-color .18s,color .18s,transform .15s,box-shadow .18s;
  user-select:none;
  overflow:hidden;
}
.chip:hover{
  border-color:rgba(232,200,120,0.45);
  color:var(--ink);
  transform:translateY(-1px);
  box-shadow:0 3px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(232,200,120,0.12);
}
.chip.active{
  background:var(--chrome-gold);
  background-size:240% 100%;
  border-color:transparent;
  color:#241a06;
  font-weight:600;
  box-shadow:0 2px 10px rgba(198,161,91,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
  animation:chromeSweep 3.5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion:reduce){.chip.active{animation:none;}}
.chip.tcg{
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:12px; letter-spacing:0.04em; font-weight:500;
  padding:9px 15px; border-radius:9px;
}
@media (min-width:480px){.chip.tcg{font-size:12.5px; letter-spacing:0.05em; padding:10px 18px; border-radius:10px;}}
.chip.tcg .chip-n{font-family:'IBM Plex Mono',monospace; font-size:9px; opacity:0.65; margin-left:3px; font-weight:400;}
@media (min-width:480px){.chip.tcg .chip-n{font-size:9.5px;}}
.chip.tcg.active .chip-n{opacity:0.75;}
.chip.sub{
  font-size:10.5px; padding:6px 12px; border-radius:20px;
  border-color:transparent; background:rgba(255,255,255,0.03); color:var(--ink-faint);
}
.chip.sub:hover{color:var(--ink); transform:none; background:rgba(255,255,255,0.06);}
.chip.sub.active{
  background:rgba(232,200,120,0.14);
  border-color:rgba(232,200,120,0.55);
  color:var(--gold-bright);
  box-shadow:none; animation:none; font-weight:600;
}

/* ---------- GRID ---------- */
.grid-section{max-width:1240px; margin:0 auto; padding:22px 12px 70px;}
@media (min-width:640px){.grid-section{padding:40px 32px 100px;}}
.cat-heading{display:flex; align-items:baseline; gap:12px; margin:34px 0 14px;}
@media (min-width:640px){.cat-heading{margin:52px 0 22px;}}
.cat-heading:first-child{margin-top:0;}
.cat-heading h2{font-size:18px; font-weight:600; letter-spacing:0.01em;}
@media (min-width:640px){.cat-heading h2{font-size:22px;}}
.cat-heading .line{flex:1; height:1px; background:var(--hair);}
.cat-heading .n{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint);}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
@media (min-width:640px){.grid{gap:16px;}}
@media (min-width:920px){.grid{grid-template-columns:repeat(3,1fr); gap:22px;}}

.card{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  /* Cards must be visible by default, with nothing — no JS class, no
     content-visibility, no media query — required to make them show up.
     Screenshot/print/PDF capture tools render the DOM as-is; anything that
     depends on a JS timer or an intersection/scroll event ends up blank in
     those captures, which is exactly what kept happening. The fade-in is
     now a harmless one-shot CSS animation that plays on normal load and
     can't leave content invisible if it doesn't run. */
  animation:cardin 0.4s ease-out both;
}
@keyframes cardin{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.card{animation:none;}}
@media (hover:hover){.card:hover{border-color:#3a3a42; transform:translateY(-2px);}}
.card.museum{border-color:rgba(198,161,91,0.35);}

.card.spotlight{
  border-color:rgba(214,182,120,0.55);
  box-shadow:0 0 0 1px rgba(214,182,120,0.12), 0 0 22px rgba(198,161,91,0.22), 0 0 48px rgba(198,161,91,0.10);
}
.detail-imgwrap.spotlight{
  border-color:rgba(214,182,120,0.55);
  box-shadow:0 0 0 1px rgba(214,182,120,0.14), 0 0 30px rgba(198,161,91,0.25), 0 0 70px rgba(198,161,91,0.12);
}
@media (hover:hover){
  .card.museum::before{
    content:"";
    position:absolute; inset:0;
    padding:1px;
    border-radius:var(--radius);
    background:conic-gradient(from var(--ang,0deg), #7bdff2, #e8c878, #f2b5d4, #7bdff2);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity 0.35s;
    pointer-events:none;
    animation:spin 5s linear infinite paused;
  }
  .card.museum:hover::before{opacity:1; animation-play-state:running;}
  @keyframes spin{to{--ang:360deg;}}
  @property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg;}
}

.card-imgwrap{position:relative; aspect-ratio:3/4; background:#050506; overflow:hidden;}
.card-imgwrap img{width:100%; height:100%; object-fit:contain; padding:8px; transition:transform 0.3s ease; display:block;}
@media (min-width:640px){.card-imgwrap img{padding:14px;}}
@media (hover:hover){.card:hover .card-imgwrap img{transform:scale(1.03);}}
.badge-oficial{
  position:absolute; top:6px; right:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:7.5px; letter-spacing:0.05em;
  color:var(--gold-bright);
  background:rgba(10,10,11,0.75);
  border:1px solid rgba(198,161,91,0.4);
  padding:2px 6px; border-radius:20px;
}
@media (min-width:640px){.badge-oficial{font-size:9px; top:10px; right:10px; padding:3px 7px;}}

.badge-feature{
  position:absolute; bottom:6px; left:6px; right:6px;
  width:calc(100% - 12px); max-width:calc(100% - 12px);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px; font-weight:600; letter-spacing:0.005em; line-height:1.3;
  white-space:normal; overflow:visible; text-overflow:clip; text-align:center;
  color:var(--gold-bright);
  background:rgba(10,10,11,0.72);
  border:1px solid rgba(198,161,91,0.35);
  padding:6px 8px; border-radius:7px;
}
@media (min-width:640px){.badge-feature{font-size:13px; bottom:10px; left:10px; right:10px; width:calc(100% - 20px); max-width:calc(100% - 20px); padding:8px 10px; border-radius:8px;}}

.card-body{padding:10px 10px 12px;}
@media (min-width:640px){.card-body{padding:16px 16px 18px;}}
.card-toprow{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:6px;}
@media (min-width:640px){.card-toprow{margin-bottom:10px;}}
.card-cat{font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:0.1em; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (min-width:640px){.card-cat{font-size:9.5px;}}
.card-grade{
  font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:0.02em;
  font-weight:600;
  background:var(--chrome-gold); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  border:1px solid rgba(198,161,91,0.4);
  padding:2px 6px; border-radius:20px; white-space:nowrap;
}
@media (min-width:640px){.card-grade{font-size:10px; padding:3px 8px;}}
.card-name{font-size:12.5px; font-weight:600; line-height:1.22; margin-bottom:3px;}
@media (min-width:640px){.card-name{font-size:16.5px; margin-bottom:5px;}}
.card-det{font-size:9.5px; color:var(--ink-dim); line-height:1.35; margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
@media (min-width:640px){.card-det{font-size:11.5px; margin-bottom:14px; min-height:30px;}}
.card-pricerow{display:flex; justify-content:space-between; align-items:baseline; padding-top:9px; border-top:1px solid var(--hair); flex-wrap:wrap; gap:2px;}
@media (min-width:640px){.card-pricerow{padding-top:12px;}}
.price-usd{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px; color:var(--emerald);}
@media (min-width:640px){.price-usd{font-size:15.5px;}}
.price-brl{font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-faint);}
@media (min-width:640px){.price-brl{font-size:10.5px;}}
.price-consult{font-family:'IBM Plex Sans',sans-serif; font-style:italic; font-size:11px; color:var(--ink-faint);}
@media (min-width:640px){.price-consult{font-size:13px;}}
.price-freight{opacity:0.7; font-style:italic;}

.card-ref{display:block; margin-top:7px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:0.03em; color:var(--ink-faint); text-decoration:none; transition:color 0.2s ease;}
.card-ref:hover{color:var(--gold-bright);}
@media (min-width:640px){.card-ref{font-size:10px; margin-top:9px;}}

.empty-state{text-align:center; padding:60px 16px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; font-size:13px; display:none;}

.skeleton{background:linear-gradient(100deg, var(--panel) 30%, #202027 50%, var(--panel) 70%); background-size:200% 100%; animation:shimmer 1.3s linear infinite;}
@keyframes shimmer{to{background-position:-200% 0;}}

footer{border-top:1px solid var(--hair); padding:26px 14px 32px; max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
@media (min-width:640px){footer{padding:34px 32px 40px;}}
footer p{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-faint); line-height:1.7;}

/* ---------- CARD (clickable) ---------- */
.card{cursor:pointer;}

/* ---------- DETAIL PAGE ---------- */
.detail-topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(10,10,11,0.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  padding:14px 14px;
}
@media (min-width:640px){.detail-topbar{padding:16px 32px;}}
.back-link{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.03em;
  color:var(--ink-dim); text-decoration:none; transition:color .18s;
}
.back-link:hover{color:var(--gold-bright);}

.detail-wrap{max-width:1000px; margin:0 auto; padding:22px 14px 60px;}
@media (min-width:640px){.detail-wrap{padding:36px 32px 90px;}}
.detail-loading{padding:60px 0; text-align:center; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; font-size:13px;}
.detail-loading a{color:var(--gold-bright);}

.detail-grid{display:grid; grid-template-columns:1fr; gap:22px;}
@media (min-width:760px){.detail-grid{grid-template-columns:minmax(0,420px) 1fr; gap:40px;}}

.detail-imgwrap{
  position:relative; background:#050506; border:1px solid var(--hair); border-radius:var(--radius);
  overflow:hidden; aspect-ratio:3/4; cursor:zoom-in;
}
.detail-imgwrap img{width:100%; height:100%; object-fit:contain; padding:16px; display:block;}
.detail-imgwrap .badge-oficial{top:12px; right:12px;}
.detail-imgwrap .badge-feature{
  bottom:12px; left:12px; right:12px; top:auto;
  max-width:calc(100% - 24px); width:calc(100% - 24px);
  text-align:center; font-size:13.5px; font-weight:600; line-height:1.35;
  white-space:normal; overflow:visible; text-overflow:clip;
  padding:10px 14px; border-radius:9px;
}
@media (min-width:640px){.detail-imgwrap .badge-feature{font-size:19px; padding:14px 18px;}}

.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(5,5,6,0.96);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox-img{max-width:92vw; max-height:82vh; object-fit:contain; touch-action:pan-y;}
.lightbox-close{
  position:absolute; top:16px; right:18px; background:none; border:none;
  color:var(--ink-dim); font-size:32px; line-height:1; cursor:pointer; padding:6px 10px;
}
.lightbox-close:hover{color:var(--ink);}
.lightbox-hint{
  margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.04em; color:var(--ink-faint);
}

.face-toggle{display:flex; gap:8px; margin-top:12px;}
.face-btn{
  flex:1; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em;
  padding:9px 0; border-radius:8px; border:1px solid var(--hair); background:var(--panel);
  color:var(--ink-dim); cursor:pointer; transition:border-color .18s,color .18s;
}
.face-btn:hover{border-color:var(--gold); color:var(--ink);}
.face-btn.active{
  background:var(--chrome-gold); background-size:220% 100%;
  border-color:transparent; color:#241a06; font-weight:600;
}

.detail-info{display:flex; flex-direction:column;}
.detail-name{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:clamp(24px,4.2vw,34px); font-weight:600; margin:10px 0 6px; line-height:1.05;}
.detail-det{font-size:13.5px; color:var(--ink-dim); line-height:1.5; margin-bottom:18px;}

.detail-pricebox{
  border:1px solid var(--hair); border-radius:var(--radius); padding:16px 18px;
  margin-bottom:16px; background:var(--panel);
}
.detail-price-usd{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:26px; color:var(--emerald);}
.detail-price-brl{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-faint); margin-top:2px;}

.detail-fact{display:flex; justify-content:space-between; align-items:center; padding:10px 2px; border-bottom:1px solid var(--hair); font-family:'IBM Plex Mono',monospace; font-size:12px;}
.detail-fact span{color:var(--ink-faint);}
.detail-fact strong{
  background:var(--chrome-gold); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600;
}

.detail-btn{
  display:inline-block; margin-top:16px; align-self:flex-start;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.03em;
  padding:11px 20px; border-radius:9px; border:1px solid rgba(232,200,120,0.5);
  color:var(--gold-bright); text-decoration:none; transition:border-color .18s, background .18s;
}
.detail-btn:hover{background:rgba(232,200,120,0.1); border-color:var(--gold-bright);}

.buy-share-row{display:flex; gap:8px; margin-top:16px;}
.buy-seller-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  flex:1; padding:13px 20px; margin-top:0;
  background:#25D366; border:none; border-radius:10px;
  color:#0a1a0f; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13.5px; letter-spacing:0.02em;
  box-shadow:0 4px 14px rgba(37,211,102,0.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.buy-seller-btn svg{width:19px; height:19px; flex-shrink:0;}
@media (hover:hover){.buy-seller-btn:hover{background:#2ee375; transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,211,102,0.38);}}

.share-btn{
  flex-shrink:0; width:48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--hair); border-radius:10px;
  color:var(--ink-dim); cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.share-btn svg{width:19px; height:19px;}
@media (hover:hover){.share-btn:hover{border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-1px);}}
.ig-btn-row{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
@media (min-width:480px){.ig-btn-row{flex-direction:row;}}
.ig-btn{
  cursor:pointer; background:var(--panel); font-family:'IBM Plex Mono',monospace;
  display:block; width:100%; text-align:center; margin-top:0; flex:1;
}
.ig-btn:disabled{opacity:0.6; cursor:default;}

.detail-section{max-width:760px; margin-top:34px; padding-top:22px; border-top:1px solid var(--hair);}
.detail-section h2{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:14px; letter-spacing:0.04em; margin-bottom:10px; color:var(--gold-bright);}
.detail-section p{font-size:13.5px; line-height:1.65; color:var(--ink-dim);}

.detail-nav{display:flex; justify-content:space-between; gap:12px; margin-top:40px; padding-top:18px; border-top:1px solid var(--hair);}
.detail-nav a{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-dim); text-decoration:none; transition:color .18s; max-width:45%;}
.detail-nav a:hover{color:var(--gold-bright);}

/* ---------- ADMIN ---------- */
.admin-toggle-btn{
  background:none; border:1px solid var(--hair); color:var(--ink-faint);
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em;
  padding:6px 12px; border-radius:20px; cursor:pointer; transition:border-color .18s,color .18s;
}
.detail-topbar .admin-toggle-btn{float:right;}
.admin-toggle-btn:hover{border-color:var(--gold-bright); color:var(--gold-bright);}
body.is-admin .admin-toggle-btn{border-color:rgba(214,40,40,0.55); color:#e8878a;}

.admin-only{display:none;}
body.is-admin .admin-only{display:block;}
.admin-panel{
  margin-top:18px; padding:16px; border:1px dashed rgba(214,40,40,0.4); border-radius:10px;
  background:rgba(214,40,40,0.05);
}
.price-edit-row{display:flex; gap:8px; margin-bottom:12px;}
.price-edit-input{
  flex:1; min-width:0; background:var(--panel); border:1px solid var(--hair); border-radius:9px;
  padding:10px 12px; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:12.5px; outline:none;
}
.price-edit-input:focus{border-color:rgba(214,40,40,0.6);}
.price-edit-btn{
  flex:0 0 auto; margin-top:0; border-color:rgba(214,40,40,0.55); color:#e8878a; white-space:nowrap;
}
.price-edit-btn:hover{background:rgba(214,40,40,0.12); border-color:#e8878a;}

.sold-toggle-btn{
  width:100%; text-align:center; border-color:rgba(214,40,40,0.55); color:#e8878a; margin-top:0;
}
.sold-toggle-btn:hover{background:rgba(214,40,40,0.12); border-color:#e8878a;}
.sold-stamp-check{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-dim); cursor:pointer;
}
#saveChangesBtn{
  width:100%; text-align:center; border-color:rgba(214,40,40,0.55); color:#e8878a; margin-top:14px;
}
#saveChangesBtn:hover{background:rgba(214,40,40,0.12); border-color:#e8878a;}
#saveChangesBtn:disabled{opacity:0.55; pointer-events:none;}
.save-status{
  margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; min-height:1em;
}
.save-status-ok{color:#4fae74;}
.save-status-err{color:#e8878a;}
body.is-admin .ig-btn-row{display:flex;}

.card-imgwrap.is-sold img,
.detail-imgwrap.is-sold img{filter:grayscale(0.9) brightness(0.85);}
.card-imgwrap.is-sold::after,
.detail-imgwrap.is-sold::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,0.10); pointer-events:none;
}

.sold-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-16deg);
  pointer-events:none; display:flex; align-items:center; justify-content:center;
  padding:14px 34px; background:rgba(10,10,11,0.55);
  border:3px solid rgba(214,40,40,0.95);
  box-shadow:0 0 0 5px rgba(10,10,11,0.55), 0 0 0 7px rgba(214,40,40,0.6);
}
.sold-badge::before, .sold-badge::after{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background:rgba(214,40,40,0.95); top:6px; left:6px;
}
.sold-badge::after{top:auto; left:auto; bottom:6px; right:6px;}
.sold-badge span{
  font-family:'Oswald',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:0.14em; color:rgba(214,40,40,0.98); font-size:28px;
}
@media (min-width:640px){.sold-badge span{font-size:40px;} .sold-badge{padding:18px 44px;}}

.card .sold-badge{padding:8px 18px;}
.card .sold-badge span{font-size:15px;}
@media (min-width:640px){.card .sold-badge span{font-size:19px;} .card .sold-badge{padding:10px 22px;}}

/* Printing / "Save as PDF" from the iPhone Share sheet — more reliable than
   the OS "Full Page" screenshot toggle, which has been flaky. Force colors
   to render (mobile browsers strip backgrounds by default when printing),
   hide controls that don't make sense on paper, and let every card render
   in full instead of relying on scroll position. */
@media print{
  html, body{background:#0a0a0a !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}
  .searchbar-wrap, .admin-toggle-btn, .lightbox, .detail-topbar .admin-toggle-btn{display:none !important;}
  .grid{display:grid !important; grid-template-columns:repeat(2, 1fr) !important;}
  .hero{page-break-after:avoid;}
  a[href]{color:inherit; text-decoration:none;}
}

/* ---------- ADMIN: private note on a card ---------- */
.obs-input{
  width:100%; margin-top:12px; resize:vertical;
  background:var(--panel); border:1px solid var(--hair); border-radius:9px;
  padding:10px 12px; color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; line-height:1.45; outline:none;
}
.obs-input:focus{border-color:rgba(214,40,40,0.6);}
.obs-input::placeholder{color:var(--ink-faint);}

/* ---------- ADMIN: sales dashboard ---------- */
.sales-wrap{max-width:1240px; margin:0 auto; padding:28px 14px 80px;}
@media (min-width:640px){.sales-wrap{padding:40px 32px 100px;}}

.sales-locked{padding:40px 0; text-align:center;}
.sales-locked h1{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:24px; margin-bottom:12px;}
.sales-locked p{color:var(--ink-dim); font-size:13.5px; line-height:1.6;}
.sales-locked strong{color:var(--gold-bright);}

.sales-head{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:22px;}
.sales-head h1{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:24px; letter-spacing:0.01em;}
@media (min-width:640px){.sales-head h1{font-size:30px;}}
.sales-actions{margin-left:auto;}
.sales-export-btn{
  margin-top:0; cursor:pointer; background:var(--panel);
  font-family:'IBM Plex Mono',monospace; white-space:nowrap;
}

.sales-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:24px;
}
@media (min-width:760px){.sales-stats{grid-template-columns:repeat(5,1fr);}}
.sales-stat{
  background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:12px 14px;
}
.sales-stat span{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:8.5px;
  letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:5px;
}
.sales-stat strong{
  font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--ink);
}
@media (min-width:640px){.sales-stat strong{font-size:17px;}}
.sales-stat strong.pos{color:var(--emerald);}

.sales-tabs{display:flex; gap:8px; margin-bottom:16px;}
.sales-tab{
  cursor:pointer; background:var(--panel); border:1px solid var(--hair); border-radius:9px;
  padding:9px 16px; color:var(--ink-dim);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.03em;
  transition:border-color .18s, color .18s, background .18s;
}
.sales-tab.active{
  background:var(--chrome-gold); background-size:240% 100%;
  border-color:transparent; color:#241a06; font-weight:600;
}
@media (hover:hover){.sales-tab:not(.active):hover{border-color:var(--gold-bright); color:var(--ink);}}

.sales-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.sales-table{width:100%; border-collapse:collapse; min-width:720px;}
.sales-table th{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--hair);
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.08em;
  color:var(--ink-faint); text-transform:uppercase; white-space:nowrap;
}
.sales-table th.num, .sales-table td.num{text-align:right;}
.sales-table td{
  padding:11px 12px; border-bottom:1px solid rgba(42,42,48,0.6);
  font-size:12.5px; vertical-align:middle;
}
.sales-table tbody tr:hover{background:rgba(255,255,255,0.02);}
.sales-td-name a{color:var(--ink); text-decoration:none; font-weight:600;}
.sales-td-name a:hover{color:var(--gold-bright);}
.sales-det{
  display:block; margin-top:2px; color:var(--ink-faint);
  font-size:10.5px; line-height:1.35; max-width:280px;
}
.sales-td-grade, .sales-td-cert{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-dim); white-space:nowrap;
}
.sales-td-usd{
  font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--emerald);
  text-align:right; white-space:nowrap;
}
.sales-td-brl{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint);
  text-align:right; white-space:nowrap;
}
.sales-td-obs{min-width:200px; position:relative;}
.obs-cell{
  width:100%; background:transparent; border:1px solid transparent; border-radius:7px;
  padding:7px 9px; color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif; font-size:12px; outline:none;
  transition:border-color .15s, background .15s;
}
.obs-cell:hover{border-color:var(--hair);}
.obs-cell:focus{border-color:var(--gold-bright); background:var(--panel);}
.obs-cell::placeholder{color:var(--ink-faint);}
.obs-cell:disabled{opacity:0.5;}
.obs-cell-status{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint);
}
.obs-cell-status.ok{color:var(--emerald);}
.obs-cell-status.err{color:#e8878a;}

.sales-table tfoot td{
  padding:13px 12px; border-top:1px solid var(--hair); border-bottom:none;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--ink);
  letter-spacing:0.03em;
}

/* Link to the sales dashboard — only visible once admin is unlocked.
   Needs its own display rule because the generic .admin-only reveal uses
   display:block, which would push it onto its own line next to the button. */
.sales-link{
  display:none;
  margin-top:8px; margin-left:8px; padding:7px 14px;
  border:1px solid rgba(198,161,91,0.5); border-radius:20px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em;
  color:var(--gold-bright); text-decoration:none;
  transition:border-color .18s, background .18s;
}
body.is-admin .sales-link{display:inline-block;}
@media (hover:hover){.sales-link:hover{background:rgba(232,200,120,0.1); border-color:var(--gold-bright);}}

/* Slab thumbnail inside the sales table */
.sales-td-thumb{width:52px; padding-right:0;}
.sales-td-thumb a{display:block; width:44px; height:60px; border-radius:6px; overflow:hidden; background:#050506; border:1px solid var(--hair);}
.sales-td-thumb img{width:100%; height:100%; object-fit:contain; display:block; padding:2px;}
@media (hover:hover){.sales-td-thumb a:hover{border-color:var(--gold-bright);}}

/* Per-seller consignment breakdown */
.sales-sellers{margin-bottom:26px;}
.sales-subtitle{
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:14px; letter-spacing:0.04em; color:var(--gold-bright); margin-bottom:10px;
}
.sellers-table{min-width:520px;}
.sales-td-seller{font-weight:600; color:var(--ink);}

/* Sticky batch-save bar for the sales table */
.sales-save-bar{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%, 140%);
  display:flex; align-items:center; gap:14px; z-index:60;
  background:rgba(23,23,27,0.97); backdrop-filter:blur(10px);
  border:1px solid rgba(198,161,91,0.45); border-radius:999px;
  padding:10px 12px 10px 20px;
  box-shadow:0 10px 34px rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition:transform .22s cubic-bezier(.16,.8,.3,1), opacity .22s ease;
}
.sales-save-bar.visible{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
.sales-save-btn{
  cursor:pointer; border:none; border-radius:999px; padding:10px 20px;
  background:var(--chrome-gold); background-size:240% 100%; color:#241a06;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; letter-spacing:0.02em;
  white-space:nowrap;
}
.sales-save-btn:disabled{opacity:0.6; pointer-events:none;}
.save-bar-status{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-dim); white-space:nowrap;
}
.save-bar-status.ok{color:var(--emerald);}
.save-bar-status.err{color:#e8878a;}

/* Unsaved / failed row markers */
.sales-table tr.is-dirty .obs-cell{border-color:var(--gold-bright); background:var(--panel);}
.sales-table tr.is-error .obs-cell{border-color:#e8878a;}

/* Floating full-size slab preview on thumbnail hover (pointer devices only) */
.slab-preview{
  position:fixed; z-index:80; pointer-events:none;
  width:300px; padding:8px;
  background:rgba(10,10,11,0.97); backdrop-filter:blur(8px);
  border:1px solid rgba(198,161,91,0.5); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,0.7);
  opacity:0; transform:scale(0.94);
  transition:opacity .14s ease, transform .14s ease;
}
.slab-preview.visible{opacity:1; transform:scale(1);}
.slab-preview img{
  display:block; width:100%; height:400px;
  object-fit:contain; border-radius:7px; background:#050506;
}
.sales-td-thumb a{transition:border-color .15s ease, transform .15s ease;}
@media (hover:hover){.sales-td-thumb a:hover{transform:scale(1.06);}}

/* Toolbar: tabs + search */
.sales-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px;}
.sales-tabs{margin-bottom:0;}
.sales-search{
  flex:1; min-width:180px; max-width:340px; margin-left:auto;
  background:var(--panel); border:1px solid var(--hair); border-radius:9px;
  padding:9px 13px; color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.sales-search:focus{border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(232,200,120,0.12);}
.sales-search::placeholder{color:var(--ink-faint);}

/* Active filter chips */
.sales-filter-bar{display:none; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.sales-filter-bar.visible{display:flex;}
.filter-chip{
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  background:rgba(198,161,91,0.12); border:1px solid rgba(198,161,91,0.45); border-radius:999px;
  padding:6px 14px; color:var(--gold-bright);
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  transition:background .15s ease;
}
.filter-chip span{font-size:14px; line-height:1; opacity:0.8;}
@media (hover:hover){.filter-chip:hover{background:rgba(198,161,91,0.22);}}

/* Seller rows are clickable filters */
.seller-row{cursor:pointer; transition:background .15s ease;}
@media (hover:hover){.seller-row:hover{background:rgba(232,200,120,0.06);}}
.seller-row.is-active{background:rgba(198,161,91,0.14);}
.seller-row.is-active .sales-td-seller{color:var(--gold-bright);}
.sales-subtitle em{
  font-style:normal; font-family:'IBM Plex Mono',monospace;
  font-size:10px; color:var(--ink-faint); text-transform:none; letter-spacing:0;
}

/* Per-sale exchange rate */
.sales-td-rate{width:92px;}
.rate-cell{
  width:100%; background:transparent; border:1px solid transparent; border-radius:7px;
  padding:7px 8px; color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; outline:none;
  transition:border-color .15s, background .15s;
}
.rate-cell:hover{border-color:var(--hair);}
.rate-cell:focus{border-color:var(--gold-bright); background:var(--panel);}
.rate-cell::placeholder{color:var(--ink-faint); opacity:0.6;}
.sales-td-brl.own-rate{color:var(--gold-bright);}
.sales-stat-note{
  display:block; margin-top:4px; font-style:normal;
  font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:var(--ink-faint);
}