/* ==========================================================================
   Store — classic Buycraft webstore anatomy, 2017 flavour.
   Category sidebar · package grid · package modal · basket ·
   Recent payments · Top donator. Checkout is stubbed.
   ========================================================================== */

.store-head{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
  padding:26px 20px 22px; text-align:center;
}
.store-head h1{
  margin:0; font-family:var(--font-pixel); font-weight:400;
  font-size:clamp(20px,3.4vw,30px); letter-spacing:.06em;
  text-shadow:2px 2px 0 var(--shadow-block);
}
.store-head p{margin:8px 0 0; color:var(--ink-faint); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.store-head .stub{
  display:inline-block; margin-top:12px; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(255,157,69,.35); background:rgba(255,157,69,.10);
  color:#ffbe7d; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}

.store-wrap{
  max-width:1280px; margin:0 auto; padding:24px 20px 90px;
  display:grid; grid-template-columns:210px minmax(0,1fr) 280px; gap:20px; align-items:start;
}
@media (max-width:1080px){ .store-wrap{grid-template-columns:minmax(0,1fr) 280px} .store-wrap > .cats{display:none} }
@media (max-width:820px){ .store-wrap{grid-template-columns:1fr} .store-wrap > .side{order:3} }

/* ---- sidebar ------------------------------------------------------------- */
.cats{position:sticky; top:60px}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list button{
  width:100%; text-align:left; display:flex; align-items:center; gap:10px;
  padding:11px 12px; margin-bottom:4px; border-radius:6px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--ink-dim);
  font:inherit; font-size:13.5px; transition:background .15s,color .15s,border-color .15s;
}
.cat-list button:hover{background:rgba(255,255,255,.04); color:var(--ink)}
.cat-list button[aria-current="true"]{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink);
}
.cat-list .n{
  margin-left:auto; font-size:11px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.cat-list .swatch{
  width:10px;height:10px;border-radius:3px;flex:none;
  background:var(--accent); box-shadow:0 0 10px var(--glow);
}

/* ---- basket -------------------------------------------------------------- */
.basket .body{padding:12px}
.basket-items{list-style:none;margin:0 0 10px;padding:0;max-height:230px;overflow:auto}
.basket-items li{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.basket-items li:last-child{border-bottom:0}
.basket-items .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.basket-items .pr{margin-left:auto;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.basket-items .rm{
  background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:3px;
}
.basket-items .rm:hover{color:#ff8a6a;background:rgba(255,255,255,.06)}
.basket-empty{color:var(--ink-faint);font-size:12.5px;padding:6px 0 10px}
.basket-total{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0 12px;border-top:1px solid var(--line);font-size:13px}
.basket-total b{font-family:var(--font-pixel);font-size:16px;color:var(--accent-bright)}
.basket .btn{width:100%}
.basket .fine{margin-top:8px;font-size:11px;color:var(--ink-faint);text-align:center}

/* ---- catalogue ----------------------------------------------------------- */
.cat-head{margin:0 0 16px}
.cat-head h2{
  margin:0; font-family:var(--font-pixel); font-weight:400;
  font-size:18px; letter-spacing:.06em;
}
.cat-head p{margin:6px 0 0; color:var(--ink-faint); font-size:13px}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:14px}

.pkg{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  transition:transform .16s ease, border-color .16s, box-shadow .16s;
}
.pkg:hover{transform:translateY(-3px); border-color:var(--accent-line); box-shadow:0 18px 34px -24px #000}
.pkg-art{
  position:relative; aspect-ratio:16/10; display:grid; place-items:center;
  background:
    radial-gradient(80% 80% at 50% 20%, rgba(255,255,255,.07), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.028) 0% 25%, transparent 0% 50%) 0 0/26px 26px,
    #0b1210;
  border-bottom:1px solid var(--line);
}
.pkg-art svg{width:62%; height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.pkg-badge{
  position:absolute; top:8px; left:8px; padding:3px 7px; border-radius:4px;
  font-family:var(--font-pixel); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,157,69,.16); border:1px solid rgba(255,157,69,.4); color:#ffbe7d;
}
.pkg-body{padding:12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.pkg-name{font-size:14px; font-weight:600; line-height:1.3}
.pkg-desc{font-size:12px; color:var(--ink-faint); line-height:1.45; flex:1}
.pkg-foot{display:flex; align-items:center; gap:8px; margin-top:6px}
.pkg-price{
  font-family:var(--font-pixel); font-size:15px; color:var(--accent-bright);
  font-variant-numeric:tabular-nums;
}
.pkg-foot .btn{margin-left:auto; min-height:34px; padding:6px 14px; font-size:12px}

/* tier accent strip */
.pkg[data-tier="gold"] .pkg-art{box-shadow:inset 0 -2px 0 rgba(224,168,60,.5)}
.pkg[data-tier="purple"] .pkg-art{box-shadow:inset 0 -2px 0 rgba(176,124,240,.5)}
.pkg[data-tier="blue"] .pkg-art{box-shadow:inset 0 -2px 0 rgba(92,150,220,.5)}
.pkg[data-tier="grey"] .pkg-art{box-shadow:inset 0 -2px 0 rgba(255,255,255,.14)}

/* ---- right rail ---------------------------------------------------------- */
.side{position:sticky; top:60px}
.payments{list-style:none;margin:0;padding:0;font-size:12.5px}
.payments li{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.payments li:last-child{border-bottom:0}
.payments .who{color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payments .what{color:var(--ink-faint);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payments .amt{margin-left:auto;color:var(--accent-bright);font-variant-numeric:tabular-nums;font-size:12px}
.payments .av{
  width:22px;height:22px;border-radius:3px;flex:none;
  background:linear-gradient(135deg,#3a4a36,#1d2a1a);border:1px solid var(--line);
}
.topdonor{text-align:center;padding:6px 0 2px}
.topdonor .crown{font-size:22px;line-height:1;margin-bottom:6px}
.topdonor .nm{font-weight:600;font-size:14px}
.topdonor .amt{color:var(--accent-bright);font-family:var(--font-pixel);font-size:12px;margin-top:4px}
.topdonor .note{color:var(--ink-faint);font-size:11px;margin-top:8px}

/* ---- modal --------------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(2,5,3,.72); backdrop-filter:blur(3px);
}
.modal.is-open{display:flex}
.modal-card{
  width:min(680px,100%); max-height:90vh; overflow:auto;
  border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(180deg,#111b17,#0b1210);
  box-shadow:0 40px 90px -30px #000;
}
.modal-top{display:grid; grid-template-columns:200px 1fr; gap:0; border-bottom:1px solid var(--line)}
@media (max-width:560px){ .modal-top{grid-template-columns:1fr} }
.modal-art{
  display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(80% 80% at 50% 30%, rgba(255,255,255,.06), transparent 70%),
    #0a100e; border-right:1px solid var(--line);
}
.modal-art svg{width:min(140px,60%); height:auto}
.modal-info{padding:20px}
.modal-info h3{margin:0 0 4px; font-size:20px}
.modal-info .price{font-family:var(--font-pixel); color:var(--accent-bright); font-size:20px; margin:8px 0 12px}
.modal-info p{margin:0 0 12px; color:var(--ink-dim); font-size:13.5px}
.grants{list-style:none;margin:0;padding:0;font-size:13px}
.grants li{padding:5px 0 5px 20px; position:relative; color:var(--ink-dim)}
.grants li::before{content:"▪"; position:absolute; left:4px; color:var(--accent)}
.modal-foot{display:flex; gap:10px; align-items:center; padding:16px 20px; border-top:1px solid var(--line)}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.qty button{width:34px;height:36px;background:transparent;border:0;color:var(--ink);cursor:pointer;font-size:16px}
.qty button:hover{background:rgba(255,255,255,.06)}
.qty span{min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.modal-foot .btn{margin-left:auto}
.modal-close{
  position:absolute; top:14px; right:16px; background:none;border:0;color:var(--ink-faint);
  font-size:22px; cursor:pointer; line-height:1;
}
.modal-close:hover{color:var(--ink)}
.modal-card{position:relative}

/* ---- checkout stub notice ------------------------------------------------ */
.notice{
  border:1px solid rgba(255,157,69,.3); background:rgba(255,157,69,.07);
  border-radius:8px; padding:14px 16px; font-size:13px; color:#f3d6b8;
}
.notice code{background:rgba(0,0,0,.35); padding:2px 6px; border-radius:4px; color:#ffd9a8; font-size:12px}
.notice .h{display:block;font-family:var(--font-pixel);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffbe7d;margin-bottom:6px}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px);
  background:#152018; border:1px solid var(--accent-line); color:var(--ink);
  padding:10px 18px; border-radius:999px; font-size:13px; z-index:120;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}