/* Global look */

*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,Arial,sans-serif; color:#fff;
  background: linear-gradient(to bottom,#000 0%,#0a0f2d 40%,#11215b 80%,#1e3a8a 100%);
  background-attachment: fixed; background-repeat:no-repeat; background-size:cover;
}
.hidden{display:none !important}

/* Nav */
/* Scope to .topnav so we don't override per-page header styles */
.topnav{
  display:flex; align-items:center; justify-content:flex-start; gap:15px; flex-wrap:wrap;
  padding:0; background:transparent; border-bottom:0;
}
.topnav a{ color:inherit; text-decoration:none; border-radius:8px; }
.topnav a:hover{ background:#1f2937 }
#nav-user{ margin-left:auto; margin-right:10px; color:#93c5fd }

/* Logo image (used in top-left of nav) */
.brand-logo{ display:flex; align-items:center; margin-right:8px }
.logo{ height:24px; width:auto; display:block }

/* Layout helpers */
.container{ max-width:1100px; margin:auto; padding:20px }
h1{ color:#60a5fa; text-align:center; margin:10px 0 20px }

/* Cards / grids (builds) */
.product-grid{ display:grid; gap:26px; grid-template-columns:repeat(3,1fr) }
@media (max-width:1024px){ .product-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .product-grid{ grid-template-columns:1fr } }

.card{ background:#0f1115; border:1px solid #1f2937; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.45); transition:.18s ease }
.card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.6) }
.card img{ width:100%; height:240px; object-fit:cover; display:block; background:#0b0d12 }
.content{ padding:16px }
.tag{ display:inline-block; font-size:.78rem; color:#a5b4fc; background:#111827; padding:3px 10px; border-radius:999px; margin-bottom:10px }
.desc{ color:#cbd5e1; margin:6px 0 10px; font-size:.95rem }
.specs{ list-style:none; padding:0; margin:0 0 12px; color:#d1d5db }
.specs li{ margin:4px 0; font-size:.92rem }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.price{ color:#93c5fd; font-weight:800 }
.btn{ background:#3b82f6; color:#fff; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700 }
.btn:hover{ background:#2563eb }

/* Forms */
.formwrap{ max-width:520px; margin:40px auto; padding:20px; background:#0f1115; border:1px solid #1f2937; border-radius:14px }
label{ display:block; margin:12px 0 6px; font-weight:700 }
input,select{ width:100%; padding:12px; border-radius:10px; border:1px solid #374151; background:#0b0d12; color:#e5e7eb }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.err{ color:#fda4af; min-height:1.25rem; margin-top:8px }