/* ============================================================
   MCATiers — Store Page (Ranks / Coins / Cosmetics / SShop)
   Builds on shared/theme.css tokens + .glass-card/.card/.btn/.input
   ============================================================ */

.store-hero{ text-align:center; padding:2.5rem 0 1.5rem; }
.store-hero .eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.store-hero h1{ font-family:'Outfit',sans-serif; font-weight:900; font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:-.02em; margin-bottom:.5rem; }
.store-hero p{ color:var(--text2); font-size:.9rem; max-width:460px; margin:0 auto; }

/* Sub navigation (Ranks / Coins / Cosmetics / SShop) */
.store-subnav{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.store-subnav button{
  font-family:inherit; cursor:pointer; padding:.5rem 1.2rem; border-radius:9999px;
  border:1px solid transparent; background:none; color:var(--text2); font-size:.85rem; font-weight:700;
  transition:all .2s;
}
.store-subnav button:hover{ color:var(--text); background:var(--accent-glow2); }
.store-subnav button.active{ color:var(--accent); background:var(--accent-glow2); border-color:var(--accent); box-shadow:0 0 14px var(--accent-glow2); }

.store-tab{ display:none; }
.store-tab.active{ display:block; }

/* ── Ranks ── */
.ranks-grid{ 
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.1rem; }
.rank-card {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.rank-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.rank-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--rank-color, var(--accent)); opacity: .06; pointer-events: none;
}
.rank-card.popular {
  border-color: var(--rank-color, var(--accent));
  box-shadow: 0 0 0 1px var(--rank-color, var(--accent)) inset, var(--glass-shadow);
}
.rank-popular-badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #050a05;
  font-size: .65rem; font-weight: 800; padding: .2rem 1rem;
  border-radius: 0 0 10px 10px; letter-spacing: .05em; text-transform: uppercase; z-index: 2;
}
.rank-card-header {
  padding: 2rem 1.5rem 1.25rem;
  text-align: center;
  position: relative;
}
.rank-name-display {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem; font-weight: 900;
  letter-spacing: .05em; margin-bottom: .375rem; line-height: 1;
}
.rank-price {
  font-size: 1.75rem; font-weight: 800;
  color: var(--text); margin-bottom: .25rem;
}
.rank-price-unit, .rank-price span {
  font-size: 1rem; font-weight: 500; color: var(--text3);
}
.rank-card-body { padding: 0 1.5rem 1.5rem; }
.nametag-preview {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .8rem; margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 700;
}
.rank-features {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.rank-feature-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--text2);
}
.rank-feature-item::before {
  content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0;
}
.rank-actions {
  display: flex; flex-direction: column; gap: .5rem;
}
.btn-pay {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn-pay:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.btn-pay:active:not(:disabled) { transform: translateY(0); }
.btn-pay:disabled { opacity: .6; cursor: not-allowed; }

.btn-stripe {
  background: linear-gradient(135deg, var(--accent), var(--accent2, #5b8fff));
  color: #fff;
  box-shadow: 0 4px 14px rgba(79,158,255,.3);
}
.btn-stripe:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(79,158,255,.45);
}

.btn-ad {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border) !important;
}
.btn-ad:hover:not(:disabled) {
  border-color: var(--accent) !important;
  color: var(--accent);
}

.rank-divider {
  display: flex; align-items: center; gap: .6rem;
  color: var(--text3); font-size: .65rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.rank-divider::before, .rank-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.rank-or{ display:flex; align-items:center; gap:.6rem; color:var(--text3); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.rank-or::before,.rank-or::after{ content:''; flex:1; height:1px; background:var(--border); }


/* ── Coins ── */
.coins-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.1rem; margin-bottom:1.75rem; }
.coin-card{ padding:1.4rem 1.1rem; text-align:center; }
.coin-card .amt{ font-family:'Outfit',sans-serif; font-weight:900; font-size:1.6rem; color:var(--warning); margin:.5rem 0 .1rem; }
.coin-card .bonus{ display:inline-block; font-size:.62rem; font-weight:800; color:var(--success); background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); border-radius:999px; padding:.05rem .5rem; margin-bottom:.7rem; min-height:16px; }
.coin-card .price{ font-size:.9rem; font-weight:700; color:var(--text2); margin:.6rem 0 .8rem; }
.earn-box{ padding:1.4rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:space-between; }
.earn-box h3{ font-family:'Outfit',sans-serif; font-weight:800; margin-bottom:.3rem; display:flex; align-items:center; gap:.5rem; }
.earn-box p{ color:var(--text2); font-size:.83rem; max-width:400px; }

/* ── Cosmetics ── */
.cos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem; }
.cos-card{ padding:0; overflow:hidden; }
.cos-preview{ height:110px; display:flex; align-items:center; justify-content:center; font-size:2.1rem; background:radial-gradient(circle at 50% 30%, var(--accent-glow2), transparent 70%); border-bottom:1px solid var(--border); position:relative; }
.cos-type{ position:absolute; top:.55rem; left:.55rem; font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.14rem .5rem; border-radius:999px; background:rgba(0,0,0,.45); color:var(--text2); border:1px solid var(--border); }
.cos-body{ padding:.9rem; }
.cos-body h4{ font-family:'Outfit',sans-serif; font-weight:800; font-size:.9rem; margin-bottom:.65rem; }
.cos-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.cos-price{ font-weight:800; color:var(--warning); font-size:.82rem; }
.btn-sm{ padding:.4rem .75rem; font-size:.72rem; border-radius:9px; }

/* ── SShop ── */
.sell-cta{ padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.sell-cta p{ font-size:.83rem; color:var(--text2); }
.sshop-toolbar{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:1.3rem; }
.sshop-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{ padding:.4rem .95rem; border-radius:999px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); font-size:.76rem; font-weight:700; cursor:pointer; transition:.2s; }
.chip.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-glow2); }
.sshop-search{ position:relative; flex:1; max-width:400px; min-width:200px; }
.sshop-search i{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--text3); font-size:.78rem; }
.sshop-search .input{ padding-left:2.1rem; }
.items-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:1.1rem; }
.item-card{ padding:0; overflow:hidden; cursor:pointer; border:1px solid var(--glass-border); text-align:left; font-family:inherit; color:inherit; width:100%; }
.item-thumb-wrap{ position:relative; }
.item-thumb{ height:105px; display:flex; align-items:center; justify-content:center; font-size:1.9rem; background:var(--bg3); border-bottom:3px solid var(--cat-color,var(--accent)); }
.item-cat{ position:absolute; margin:.55rem; font-size:.58rem; font-weight:800; text-transform:uppercase; padding:.14rem .5rem; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid var(--border); color:var(--cat-color,var(--text2)); }
.item-body{ padding:.85rem .95rem; }
.item-body h4{ font-size:.85rem; font-weight:700; margin-bottom:.25rem; }
.item-seller{ font-size:.68rem; color:var(--text3); margin-bottom:.45rem; }
.item-price{ font-weight:800; color:var(--warning); font-size:.82rem; }
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--text3); grid-column:1/-1; }

@media(max-width:600px){
  .earn-box, .sell-cta{ flex-direction:column; align-items:stretch; text-align:center; }
}

/* Matches the scroll-reveal convention used across the rest of the site (shop.js/tiers.js) */
.scroll-reveal{ opacity:0; transform:translateY(20px); transition:opacity .55s, transform .55s; }
.scroll-reveal.visible{ opacity:1; transform:translateY(0); }