:root{
  --brand:#FF9F00; --brand-2:#FFC34D; --brand-ink:#241703;
  --bg:#100D09; --panel:#1A1610; --panel-2:#221C15; --line:rgba(255,244,230,.12);
  --fg:#F6F1E8; --muted:#B0A493; --faint:#857A6A;
  --ok:#4ADE80; --deal:#4ADE80;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1000px; margin:0 auto; padding:0 20px}

/* Header */
.site-head{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(15,17,21,.86); backdrop-filter:blur(8px); z-index:5}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brandmark{font-weight:800; letter-spacing:.01em; font-size:1.1rem}
.brandmark .brand{color:var(--brand)}
.site-head nav a{color:var(--muted); font-weight:600; font-size:.95rem; margin-left:18px}
.site-head nav a:hover{color:var(--fg); text-decoration:none}

/* Product */
.product{display:grid; grid-template-columns:320px 1fr; gap:38px; padding:46px 0 30px}
@media (max-width:760px){ .product{grid-template-columns:1fr; gap:26px; padding:30px 0} }
.cover{width:100%; height:auto; border-radius:var(--radius); display:block; box-shadow:0 18px 46px rgba(0,0,0,.45); border:1px solid var(--line)}
.eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; color:var(--brand); margin:0 0 10px}
h1{font-size:2rem; line-height:1.15; margin:0 0 6px}
.subtitle{color:var(--muted); margin:0 0 18px}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.chip{font-size:.78rem; font-weight:600; color:var(--muted); border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:5px 11px}
.buybar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:6px 0 10px}
.price{font-size:1.7rem; font-weight:800}
.price .was{font-size:1rem; font-weight:600; color:var(--muted); text-decoration:line-through; margin-left:8px}
.btn{
  appearance:none; cursor:pointer; border:0; border-radius:12px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#241a00; font-weight:800; font-size:1rem; padding:13px 22px;
}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:700}
.buynote{color:var(--muted); font-size:.9rem; min-height:1.2em; margin:2px 0 0}

.desc{margin-top:8px}
.desc p{margin:0 0 14px}
.desc .lead{font-size:1.06rem}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:26px 0}
.panel h2{font-size:1rem; margin:0 0 10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.panel ul{margin:0; padding-left:18px} .panel li{margin:4px 0}

footer{border-top:1px solid var(--line); margin-top:40px; padding:24px 0 48px; color:var(--muted); font-size:.9rem}
footer a{color:var(--muted); text-decoration:underline}
.ai-note{margin:0 0 10px; color:var(--muted); font-size:.85rem; max-width:720px}

/* Success page */
.center{min-height:72vh; display:grid; place-items:center; text-align:center}
.center .card{max-width:560px; padding:20px}
.tick{width:56px; height:56px; border-radius:50%; background:color-mix(in srgb,var(--ok) 18%,transparent); color:var(--ok); display:grid; place-items:center; margin:0 auto 16px; font-size:1.7rem; border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}

/* ---------- Storefront (catalog + search) ---------- */
.head-inner{display:flex; align-items:center; gap:16px; height:60px}
.head-search{flex:1; max-width:420px}
.head-search input{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:10px; padding:9px 13px; font-size:.95rem; outline:none}
.head-search input::placeholder{color:var(--muted)}
.head-search input:focus{border-color:var(--brand)}
.site-head nav{margin-left:auto; white-space:nowrap}

.store-head{padding:32px 0 6px}
.store-head h1{font-size:1.7rem; margin:0 0 14px}
.cat-pills{display:flex; flex-wrap:wrap; gap:8px}
.cat-pill{appearance:none; cursor:pointer; background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:7px 14px; font-weight:600; font-size:.9rem}
.cat-pill:hover{color:var(--fg)}
.cat-pill.is-active{background:var(--brand); border-color:var(--brand); color:#241a00}
.subcat-pills{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.subcat-pill{appearance:none; cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:5px 12px; font-weight:600; font-size:.82rem}
.subcat-pill:hover{color:var(--fg)}
.subcat-pill.is-active{background:var(--panel-2); border-color:var(--brand-2); color:var(--fg)}

.store-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; padding:22px 0 10px}
.pcard{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
.pcard:hover{border-color:var(--brand); transform:translateY(-2px); text-decoration:none}
.pcard-media{height:190px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; overflow:hidden}
.pcard-media img{max-width:100%; max-height:190px; object-fit:contain; display:block}
.pcard-body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:5px; flex:1}
.pcard-cat{font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--brand)}
.pcard-title{font-size:1.02rem; margin:0; line-height:1.25}
.pcard-sub{font-size:.86rem; color:var(--muted); margin:0; flex:1}
.pcard-foot{margin-top:8px}
.pcard-price{font-weight:800; font-size:1.05rem}
.pcard-was{color:var(--muted); text-decoration:line-through; font-size:.85rem; margin-left:5px}
.store-empty{color:var(--muted); padding:20px 0}
@media (max-width:600px){ .head-search{max-width:none} }

/* ---------- Added polish ---------- */
.brandmark{display:inline-flex; align-items:center; gap:9px}
.brand-logo{width:27px; height:27px; border-radius:50%; display:block; flex:none}

/* discounted price shown in the "deal" colour */
.pcard-price.deal, .price .now.deal{color:var(--deal)}

/* inline audio-sample player (black panel) */
.audio-sample{margin:4px 0 2px; background:#000; border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.audio-sample-label{display:block; font-size:.74rem; color:var(--muted); margin-bottom:9px; text-transform:uppercase; letter-spacing:.09em; font-weight:700}
.audio-sample audio{width:100%; display:block}

/* album tracklist (left column, under the cover) */
.tracklist{margin-top:18px}
.tracklist h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:0 0 8px}
.tracklist ol{list-style:none; margin:0; padding:0; counter-reset:t}
.tracklist li{counter-increment:t; display:flex; align-items:baseline; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.tracklist li::before{content:counter(t); color:var(--faint); font-variant-numeric:tabular-nums; min-width:1.5em; text-align:right; font-size:.8rem}
.tracklist .t-title{flex:1; color:var(--fg)}
.tracklist .t-len{color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem}
.tracklist .t-artist{color:var(--muted); font-size:.82rem}
.tl-group{font-size:.82rem; font-weight:700; color:var(--brand-2); margin:16px 0 6px}

/* 3D viewers + preview gallery */
.viewers{margin:26px 0 0}
.viewers h2, .gallery h2{font-size:.82rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:0 0 12px}
.viewers-row{display:flex; gap:14px; flex-wrap:wrap}
.mv{margin:0; flex:1 1 180px; min-width:150px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.mv model-viewer{width:100%; height:200px; display:block; background:#0d0b08; --poster-color:transparent}
.mv figcaption{padding:8px 10px; font-size:.84rem; color:var(--muted); text-align:center}
.gallery{margin:26px 0 0}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.gitem{display:block; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel-2)}
.gitem img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover}

/* trust row under the shop heading */
.trust{display:flex; flex-wrap:wrap; gap:9px 22px; color:var(--muted); font-size:.86rem; padding:16px 0 2px}
.trust span{display:inline-flex; align-items:center; gap:7px}
.trust svg{width:15px; height:15px; color:var(--brand); flex:none}

/* ---- Accounts: auth cards, forms, library ---------------------------------- */
.muted{color:var(--muted)}
.acct a{font-weight:600}
.auth-card{max-width:420px; width:100%; margin:34px auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 30px; text-align:left}
.auth-h1{font-size:1.25rem; margin:0 0 16px}
.auth-tabs{display:flex; gap:6px; margin-bottom:18px}
.auth-tab{flex:1; appearance:none; cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:10px; padding:9px; font-weight:700; font-size:.92rem}
.auth-tab.is-active{background:var(--panel-2); border-color:var(--brand-2); color:var(--fg)}
.gbtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#fff; color:#1f1f1f; border:1px solid var(--line); font-weight:700}
.gbtn:hover{filter:brightness(.97); text-decoration:none}
.auth-or{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.82rem; margin:16px 0}
.auth-or::before, .auth-or::after{content:""; flex:1; height:1px; background:var(--line)}
.auth-pane{display:flex; flex-direction:column; gap:12px}
.auth-pane label{display:flex; flex-direction:column; gap:5px; font-size:.84rem; color:var(--muted); font-weight:600}
.auth-pane input{background:var(--panel-2); border:1px solid var(--line); color:var(--fg); border-radius:9px; padding:10px 12px; font-size:.95rem; outline:none}
.auth-pane input:focus{border-color:var(--brand)}
.auth-pane .btn{margin-top:2px}
.auth-sub{font-size:.84rem; color:var(--muted); margin:2px 0 0}
.auth-sub a{color:var(--brand-2)}
.form-msg{min-height:1.1em; font-size:.88rem; margin:0}
.form-msg.is-err{color:#f87171}
.form-msg.is-ok{color:var(--ok)}
.account-main{padding:30px 0 10px}
.account-main h1{margin:0 0 6px}
.acct-head{color:var(--muted); margin:0 0 20px}
.acct-head a{color:var(--brand-2)}
.notice{background:color-mix(in srgb,var(--brand) 12%,transparent); border:1px solid color-mix(in srgb,var(--brand) 32%,transparent); color:var(--fg); border-radius:10px; padding:11px 14px; margin:0 0 18px; font-size:.9rem}
.notice a{color:var(--brand-2)}
.library{display:flex; flex-direction:column; gap:10px; max-width:640px}
.lib-item{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px}
.lib-title{font-weight:600}
.auth-pane[hidden]{display:none}
.acct a{display:inline-block; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle}
@media (max-width:620px){.acct a{max-width:120px}}
.lib-info{display:flex; flex-direction:column; gap:3px; min-width:0}
.lib-meta{font-size:.8rem; color:var(--muted)}
.leave-shop{display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.leave-shop .ls-main{font-weight:600; font-size:.95rem; color:var(--muted)}
.leave-shop:hover .ls-main{color:var(--fg)}
.leave-shop .ls-url{font-size:.72rem; color:var(--faint); text-decoration:underline}

/* Header actions (Sign in / email, Leave shop) rendered as pill buttons */
.site-head nav{display:flex; align-items:center; gap:12px; margin-left:auto}
.site-head nav a{margin-left:0}
.site-head nav .acct a,
.site-head nav .leave-shop{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:6px 15px; line-height:1.15}
.site-head nav .acct a:hover,
.site-head nav .leave-shop:hover{border-color:var(--brand-2); background:var(--panel-2); color:var(--fg)}
.leave-shop{align-items:center}