:root{
  --bg: #0e0f14;
  --panel: #131622;
  --panel-2: #191d2b;
  --text: #e8eaf1;
  --muted: #9aa3b2;
  --accent: #7c5cff;       /* primary accent */
  --accent-2: #16d6a8;     /* secondary accent */
  --danger: #ff5d5d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
  --radius-sm: 10px;
  --blur: saturate(120%) blur(0.5px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(900px 700px at 120% 10%, rgba(22,214,168,.15), transparent 55%),
    var(--bg);
  color: var(--text);
}

/* layout */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* header/nav */
.site-header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: var(--blur);
  background: linear-gradient(180deg, rgba(19,22,34,.9), rgba(19,22,34,.6));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px;
  font-size: 18px;
}
.nav .right, .nav .left{display:flex; align-items:center; gap:14px}
.nav a{color:var(--text); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.back{display:flex; align-items:center; gap:6px}
.back .chev{font-size:18px; line-height:0}
.nav-link{padding:8px 10px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,.08)}
.nav-link:hover{background:rgba(255,255,255,.06)}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; margin-left:6px;
  background: var(--accent); color:#fff; font-weight:700; font-size:12px;
}

/* titles */
.page-title{
  font-size: clamp(24px, 2.4vw, 34px);
  margin: 26px 0 6px;
  letter-spacing:.2px;
}
.subtitle{
  margin:0 0 24px; color: var(--muted);
}

/* grid */
.grid{
  display:grid;
  grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
  gap: 22px;
}

/* product card */
.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  position: relative;
}
.card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border-color: rgba(124,92,255,.35);
}
.media{
  position:relative;
  height: 190px;
  overflow:hidden;
  background:#0d0f15;
}
.media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.02);
  transition: transform 500ms ease;
}
.card:hover .media img{ transform: scale(1.07); }

.tag{
  position:absolute; top:10px; left:10px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
  backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.2);
}
.tag-red{ background: rgba(255,93,93,.18); color:#ffdfe0 }

.content{ padding: 14px 14px 16px; }
.title{
  margin: 4px 0 6px; font-weight:700; letter-spacing:.2px;
}
.meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
.category{
  color: var(--muted); font-size: 13px;
}
.price{
  font-weight:800; color:#fff; letter-spacing:.2px;
}
.desc{
  color: #c8cfdb; font-size: 14px; line-height: 1.5; margin: 0 0 10px;
}
.stock{
  color: var(--muted); font-size: 13px; margin-bottom: 12px;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; text-decoration:none;
  font-weight:700; letter-spacing:.2px; cursor:pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.btn-primary{
  background: linear-gradient(180deg, var(--accent), #6b4cff);
  border-color: transparent; color:#fff;
}
.btn-primary:hover{ background: linear-gradient(180deg, #876aff, var(--accent)); }
.btn-disabled{
  opacity:.55; cursor:not-allowed; background: rgba(255,255,255,.06);
}
.btn-ghost{
  background: transparent;
}

.actions{ display:flex; gap:10px; }

/* sold out visual treatment */
.card.soldout .media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,15,20,.3), rgba(14,15,20,.55));
}
.card.soldout{ opacity:.9; }

/* empty state */
.empty{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 28px;
  text-align:center;
  box-shadow: var(--shadow);
}

/* footer */
.site-footer{
  margin:36px 0 24px;
  color: var(--muted);
  text-align:center;
}
.foot-links{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px;
}
.foot-links a{ color: var(--muted); text-decoration:none; }
.foot-links a:hover{ color: var(--text); }

/* motion respect */
@media (prefers-reduced-motion: reduce) {
  .card, .media img, .btn{ transition:none }
}