:root{
  --bg:#0a0a0a;
  --text:#ffffff;
  --muted:#cfcfcf;
  --red:#e10600;
  --gold:#ffd700;
  --card:#111214;
  --border:#1e1f23;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
a{color:inherit; text-decoration:none}
header{
  position:sticky; top:0; z-index:100;
  backdrop-filter: blur(6px);
  background: rgba(10,10,10,.72);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:20px;
  padding:10px 16px;
}
.nav img.logo{height:36px}
.nav .spacer{flex:1}
.nav a.link{padding:10px 12px; border-radius:8px}
.nav a.link:hover{background:#141518}
.btn{display:inline-block; padding:12px 18px; border-radius:10px; background:var(--red); color:white; font-weight:600; border:none; cursor:pointer}
.btn.alt{background:transparent; border:1px solid var(--border)}
.btn.gold{background:var(--gold); color:#111}
.container{max-width:1200px; margin:0 auto; padding:24px 16px}
.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; padding:36px 0;
}
.hero h1{font-size:42px; line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted)}
.hero .card{background:linear-gradient(180deg,#121316, #0c0d10); border:1px solid var(--border); border-radius:16px; padding:20px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.card img{width:100%; height:220px; object-fit:cover; display:block}
.card .body{padding:12px 14px}
.card .title{font-weight:700}
.price{color:var(--gold); font-weight:700}
.tag{display:inline-block; font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
footer{border-top:1px solid var(--border); color:var(--muted)}
footer .row{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; padding:24px 0}
.badge{display:flex; align-items:center; gap:10px}
.searchbar{display:flex; gap:8px}
input, select{background:#0f1114; border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:10px; outline:none}
.cart-fab{
  position:fixed; right:16px; bottom:16px; background:var(--gold); color:#111; padding:12px 16px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.35); font-weight:700
}
small.ital{font-style:italic; color:var(--muted)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
}