/* BLVR store — dark, sharp, quiet. No frameworks. */
:root{
  /* BLVR brand: stark monochrome, glitch-white on black. Green survives
     only as the "paid" state; everything else is grayscale. */
  --bg:#070809; --panel:#101214; --panel2:#16181b; --border:#24272c;
  --text:#f2f4f6; --dim:#8d949e; --accent:#2ecc71; --accent-press:#27ae60;
  --cta:#ffffff; --cta-press:#c9ced4;
  --danger:#f85149; --gold:#e8c268; --radius:14px;
  --shadow:0 12px 32px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}

/* header */
header{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;
  padding:14px 28px;background:rgba(10,12,16,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.wordmark{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:.18em}
.wordmark img{height:34px;width:34px;border-radius:50%;border:1px solid var(--border)}
nav{display:flex;gap:4px;margin-left:auto;align-items:center}
nav a{padding:8px 14px;border-radius:9px;color:var(--dim);font-weight:500;transition:color .15s,background .15s}
nav a:hover{color:var(--text);background:var(--panel2)}
nav a.on{color:var(--text)}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:10px;border:1px solid transparent;
  background:var(--cta);color:#000;font-weight:700;
  transition:transform .08s,filter .15s,box-shadow .15s;
}
.btn:hover{box-shadow:0 4px 22px rgba(255,255,255,.22)}
.btn:active{transform:scale(.97);background:var(--cta-press)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.ghost:hover{border-color:var(--dim);box-shadow:none}
.btn[disabled]{opacity:.45;pointer-events:none}

/* layout */
main{max-width:1080px;margin:0 auto;padding:36px 24px 80px}
.hero{
  position:relative;text-align:center;padding:74px 24px 60px;
  border-radius:var(--radius);border:1px solid var(--border);
  overflow:hidden;margin-bottom:12px;background:#000;
}
.hero .bg{position:absolute;inset:0;background:url(/static/hero.jpg) center/cover;opacity:.6}
.hero .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(7,8,9,.94) 96%)}
.hero .inner{position:relative}
.hero .mark{width:min(520px,84%);margin:0 auto;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at center,#000 48%,transparent 74%);
  mask-image:radial-gradient(ellipse 62% 58% at center,#000 48%,transparent 74%)}
.hero p{color:#c7cdd4;margin-top:10px;font-size:16.5px;max-width:520px;margin-inline:auto;text-shadow:0 1px 8px #000}
.section-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:36px 0 16px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-3px);border-color:#31394a;box-shadow:var(--shadow)}
.card:active{transform:translateY(-1px)}
.card .thumb{aspect-ratio:16/9;background:#000;
  display:flex;align-items:center;justify-content:center}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb img.ph{width:72%;height:auto;object-fit:contain;
  mix-blend-mode:screen;opacity:.55;transition:opacity .2s;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at center,#000 48%,transparent 74%);
  mask-image:radial-gradient(ellipse 62% 58% at center,#000 48%,transparent 74%)}
.card:hover .thumb img.ph{opacity:.85}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:16.5px;font-weight:700}
.card .blurb{color:var(--dim);font-size:13.5px;flex:1}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.price{font-weight:800;font-size:17px}
.stars{color:var(--gold);font-size:13px;letter-spacing:1px}
.stars .n{color:var(--dim);letter-spacing:0;margin-left:4px}

/* product page */
.product-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
@media(max-width:800px){.product-wrap{grid-template-columns:1fr}}
.product-image{border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;
  background:#000;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-image img.ph{width:78%;height:auto;object-fit:contain;mix-blend-mode:screen;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at center,#000 48%,transparent 74%);
  mask-image:radial-gradient(ellipse 62% 58% at center,#000 48%,transparent 74%)}
.buy-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.buy-box h1{font-size:26px;font-weight:800;letter-spacing:-.01em}
.buy-box .price{font-size:30px;margin:12px 0 4px}
.buy-box .desc{color:var(--dim);margin:14px 0 20px}
.buy-box .desc p+p{margin-top:8px}
#paypal-slot{min-height:120px;margin-top:8px}
.line-status{font-size:13px;border-radius:9px;padding:9px 13px;margin-bottom:14px}
.line-status.open{background:#0f2b1a;color:var(--accent)}
.line-status.closed{background:#2b230f;color:var(--gold)}
.signin-note{color:var(--dim);font-size:13.5px;margin-top:12px;text-align:center}

/* reviews */
.review-summary{display:flex;gap:34px;align-items:center;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;padding:18px 24px;margin-bottom:14px;flex-wrap:wrap}
.review-summary .avg{text-align:center}
.review-summary .num{font-size:40px;font-weight:800;line-height:1}
.review-summary .n{color:var(--dim);font-size:12.5px;margin-top:2px}
.review-summary .bars{flex:1;min-width:220px;display:grid;gap:4px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
.bar-row .bar{flex:1;height:7px;background:var(--panel2);border-radius:4px;overflow:hidden}
.bar-row .bar div{height:100%;background:var(--gold);border-radius:4px;transition:width .4s}
.bar-row .c{min-width:18px;text-align:right}
.review{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.review .head{display:flex;justify-content:space-between;color:var(--dim);font-size:13px;margin-bottom:4px;gap:10px;flex-wrap:wrap}
.review .head b{color:var(--text)}
.review .rdate{color:var(--dim);font-size:12px;margin-top:6px}
.vbadge{margin-left:8px;font-size:11px;padding:1.5px 8px;border-radius:12px;
  background:#0f2b1a;color:var(--accent);font-weight:600}
.vbadge.whop{background:var(--panel2);color:var(--dim)}
.review-form{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.review-form textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);
  border-radius:9px;padding:10px 12px;margin:10px 0;font:inherit;resize:vertical;min-height:70px}
.star-pick{font-size:22px;color:#3a4152;cursor:pointer;user-select:none}
.star-pick .lit{color:var(--gold)}

/* tables (account / admin) */
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
th,td{padding:12px 16px;text-align:left;font-size:14px}
th{color:var(--dim);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border)}
tr+tr td{border-top:1px solid var(--border)}
.pill{padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600}
.pill.paid{background:#0f2b1a;color:var(--accent)}
.pill.pending{background:#2b230f;color:var(--gold)}
.pill.refunded{background:#2b1212;color:var(--danger)}

/* forms (admin) */
.form{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:grid;gap:12px;max-width:640px}
.form label{font-size:13px;color:var(--dim);display:grid;gap:5px}
.form input,.form select,.form textarea{
  background:var(--bg);color:var(--text);border:1px solid var(--border);
  border-radius:9px;padding:10px 12px;font:inherit;width:100%}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:#5a6270}

/* misc */
.center{max-width:520px;margin:80px auto;text-align:center}
.center .big{font-size:56px}
.skeleton{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius);min-height:220px}
@keyframes shimmer{to{background-position:-200% 0}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:12px 22px;box-shadow:var(--shadow);opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}
footer{border-top:1px solid var(--border);color:var(--dim);font-size:13px;
  text-align:center;padding:26px;margin-top:60px}
