:root{
  --bg:#0b0f14;
  --card:#0f151c;
  --glass:rgba(255,255,255,.06);
  --brand:#72f2ff;
  --brand2:#7bf7c1;
  --text:#e9f1ff;
  --muted:#b7c4d3;
  --accent:#ffd166;
  --danger:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(135deg,#070a0f 0%,#0c1220 60%,#101825 100%);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:24px}
.nav{
  position:sticky;top:0;background:rgba(12,18,32,.7);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);z-index:10
}
.nav-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
.brand h1{font-size:20px;margin:0;letter-spacing:.6px}
.search{flex:1;max-width:520px;margin:0 24px}
.search input{
  width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,#0e1722,#0b111a);color:var(--text);outline:none
}
.cta{display:flex;gap:12px}
.btn{
  padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:var(--glass);
  display:inline-flex;gap:10px;align-items:center
}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#05161b;font-weight:700;border:none}
.hero{
  position:relative;overflow:hidden;border-radius:28px;margin:24px;
  background:radial-gradient(1200px 500px at 110% -10%, rgba(114,242,255,.3), transparent 60%),
             radial-gradient(1200px 500px at -10% 110%, rgba(123,247,193,.3), transparent 60%),
             linear-gradient(135deg,#0d141f,#0b0f16);
  border:1px solid rgba(255,255,255,.08);
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding:28px}
.hero h2{font-size:36px;margin:0 0 6px}
.hero p{color:var(--muted);margin:0 0 16px}
.hero .banner{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.ribbon{
  position:absolute;inset:auto -60px 24px auto;rotate:-6deg;background:linear-gradient(135deg,#10202a,#19323f);
  padding:10px 22px;border:1px dashed rgba(255,255,255,.16);border-radius:16px;color:#c9f6ff
}
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:24px
}
.card{
  grid-column:span 4;position:relative;border-radius:22px;padding:14px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden
}
.card::before{
  content:"";position:absolute;inset:-40% -40% auto auto;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(114,242,255,.18), transparent 60%);
  filter:blur(20px)
}
.card img{width:100%;height:180px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.card .meta{display:flex;justify-content:space-between;align-items:center;margin:10px 2px 4px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.price{font-weight:800;color:var(--accent)}
.title{font-size:18px;margin:6px 2px 10px}
.actions{display:flex;gap:8px}
small.muted{color:var(--muted)}
.footer{margin:40px 24px 60px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

.details{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin:24px}
.details img{width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.08)}
.details .panel{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.details h2{margin:0 0 10px}
.variant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.variant{padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);cursor:pointer;background:rgba(255,255,255,.03)}
.variant.active{outline:2px solid var(--brand)}
.field{display:grid;gap:6px;margin:10px 0}
input[type=text],select{
  width:100%;padding:12px;border-radius:12px;background:linear-gradient(135deg,#0e1722,#0b111a);
  border:1px solid rgba(255,255,255,.12);color:var(--text);outline:none
}
.total{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.checkout-card{margin:24px;padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.order-items{display:grid;gap:10px;margin:8px 0}
.order-row{display:flex;justify-content:space-between;gap:8px;background:rgba(255,255,255,.03);padding:10px;border-radius:12px}
hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:14px 0}
.note{font-size:13px;color:var(--muted)}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .details{grid-template-columns:1fr}
  .card{grid-column:span 12}
}