/* CYBRG Storefront — dark/brutalist, config-themed.
   Theme tokens (--accent, --bg, etc.) are injected per-request from config.json
   via an inline <style> block, so this file stays brand-agnostic. */

:root{
  --accent:#00e5ff; --accent-d:#00b8cc;
  --ink:#e0e0e0; --bg:#0a0a0a; --panel:#141414; --line:#262626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; font-size:15px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.01em}
h1{font-size:28px; margin:0 0 16px}
h2{font-size:18px; margin:26px 0 12px}
h3{font-size:16px; margin:0 0 8px}

/* ---- top bar ---- */
#topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:10;
}
#brand{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:20px; color:var(--ink); letter-spacing:.04em}
#brand .q{color:var(--accent)}
#nav a{color:var(--ink); margin-left:20px; font-size:14px}
#nav a:hover{color:var(--accent); text-decoration:none}

#wrap{max-width:1000px; margin:34px auto; padding:0 22px}
#footer{
  max-width:1000px; margin:60px auto 30px; padding:18px 22px;
  border-top:1px solid var(--line); color:#777; font-size:12px; text-align:center;
  font-family:"JetBrains Mono",monospace;
}

/* ---- buttons ---- */
.btn{
  display:inline-block; padding:10px 18px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); border-radius:6px;
  font-size:14px; font-weight:600; cursor:pointer; transition:.15s;
}
.btn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn.primary{background:var(--accent); color:#001014; border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-d); color:#001014}
.btn.small{padding:5px 10px; font-size:12px}

/* ---- MINIMAL LANDING ---- */
body.minimal{background:var(--bg)}
#hero{
  max-width:760px; margin:14vh auto 0; padding:0 22px; text-align:center;
}
#hero .q-mark{
  font-family:"JetBrains Mono",monospace; font-weight:900; font-size:64px;
  color:#001014; background:var(--accent); width:100px; height:100px; line-height:100px;
  border-radius:20px; margin:0 auto 24px; display:block;
}
#hero h1{font-size:56px; margin:0 0 8px; letter-spacing:-.02em}
#hero .tag{font-family:"JetBrains Mono",monospace; color:var(--accent); font-size:18px; margin:0 0 18px}
#hero .sub{color:#aaa; font-size:17px; max-width:560px; margin:0 auto 30px}
#hero .cta .btn{margin:0 6px}

/* ---- filters ---- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.filter{
  padding:6px 14px; border:1px solid var(--line); border-radius:20px;
  color:#aaa; font-size:13px; background:var(--panel);
}
.filter.on,.filter:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

/* ---- product grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px}
.card{
  display:block; border:1px solid var(--line); border-radius:10px; padding:20px;
  background:var(--panel); color:var(--ink); transition:.15s;
}
.card:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-2px)}
.card-cat{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em}
.card h3{margin:6px 0}
.blurb{color:#aaa; font-size:14px; margin:0 0 16px}
.card-foot{display:flex; justify-content:space-between; align-items:baseline}
.price{font-family:"JetBrains Mono",monospace; font-size:20px; color:var(--ink); font-weight:700}
.price.big{font-size:30px; display:block; margin:10px 0}
.price .unit{font-size:12px; color:#777; font-weight:400}
.status{font-size:11px; padding:3px 9px; border-radius:12px; text-transform:uppercase; letter-spacing:.05em; font-family:"JetBrains Mono",monospace}
.status-available{background:#0b2b1a; color:#4ade80}
.status-made-to-order{background:#2b230b; color:#fbbf24}
.tags{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px}
.pill{font-size:11px; padding:2px 9px; border:1px solid var(--line); border-radius:10px; color:#999}

/* ---- detail ---- */
.back{font-family:"JetBrains Mono",monospace; font-size:13px; display:inline-block; margin-bottom:18px}
.detail{max-width:720px}
.detail-body{color:#bbb; font-size:16px; margin:0 0 10px}
.lede{color:var(--accent); font-family:"JetBrains Mono",monospace; font-size:16px}

/* ---- forms ---- */
.inquiry{max-width:520px; display:flex; flex-direction:column; gap:14px; margin-top:14px}
.inquiry label{display:flex; flex-direction:column; font-size:13px; color:#aaa; gap:6px}
.inquiry input,.inquiry textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); padding:10px 12px; font-size:14px; font-family:inherit;
}
.inquiry input:focus,.inquiry textarea:focus{outline:none; border-color:var(--accent)}
.inquiry button{align-self:flex-start; margin-top:4px}

/* ---- notice / admin ---- */
.notice{max-width:560px; text-align:center; margin:8vh auto}
.stats{display:flex; gap:20px; margin:0 0 18px; font-family:"JetBrains Mono",monospace}
.stat{color:#aaa}
.stat b{color:var(--accent); font-size:20px}
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th,.tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{font-family:"JetBrains Mono",monospace; font-size:11px; color:#888; text-transform:uppercase; letter-spacing:.06em}
.muted{color:#777; font-size:12px}
.empty{color:#777; text-align:center; padding:30px}

@media(max-width:560px){
  #hero h1{font-size:40px}
  #nav a{margin-left:12px; font-size:13px}
}


/* ---- transacting store additions ---- */
.preorder-banner{
  background:#2b230b; color:#fbbf24; text-align:center; font-size:12px;
  padding:8px 16px; font-family:"JetBrains Mono",monospace; letter-spacing:.03em;
  border-bottom:1px solid var(--line);
}
.thumb{
  width:100%; height:180px; object-fit:cover; border-radius:8px;
  margin-bottom:14px; background:var(--bg); display:block;
}
.thumb.ph{
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono",monospace; font-weight:900; font-size:54px;
  color:var(--accent); background:linear-gradient(135deg,#0d0d0d,#151515);
  border:1px solid var(--line);
}
.detail{display:flex; gap:28px; flex-wrap:wrap}
.detail-media{flex:1 1 300px; max-width:380px}
.detail-media .thumb{height:320px}
.detail-head{flex:1 1 340px}
.digital-note{color:var(--accent); font-size:13px; font-family:"JetBrains Mono",monospace}
.addcart{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:18px}
.addcart label{display:flex; flex-direction:column; font-size:12px; color:#aaa; gap:5px}
.addcart select,.addcart input{
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); padding:9px 11px; font-size:14px; font-family:inherit; min-width:90px;
}
.addcart select:focus,.addcart input:focus{outline:none; border-color:var(--accent)}
.cart.tbl td,.cart.tbl th{vertical-align:middle}
.tbl .right{text-align:right; color:#aaa}
.tbl tr.grand td{border-top:2px solid var(--line); font-size:16px}
.cart-actions{display:flex; gap:12px; margin-top:22px}
.order-lines{color:#bbb; line-height:1.8}
code{font-family:"JetBrains Mono",monospace; color:var(--accent); background:#0d0d0d; padding:1px 6px; border-radius:4px}
.status-pending{background:#2b230b; color:#fbbf24}
.status-preorder{background:#0b1b2b; color:#38bdf8}
.status-paid{background:#0b2b1a; color:#4ade80}
.status-fulfilling{background:#1b0b2b; color:#c084fc}
.status-shipped{background:#0b2b2b; color:#2dd4bf}
.status-canceled{background:#2b0b0b; color:#f87171}
.tbl select{
  background:var(--bg); border:1px solid var(--line); border-radius:5px;
  color:var(--ink); padding:5px 8px; font-size:12px; margin-right:5px;
}