/* Prime-like clean-room theme: ElectroHub (original work)
   - Pure HTML+CSS (no framework)
   - Responsive, accessible, lightweight
*/
:root{
  --bg:#0b1220;
  --bg-2:#111827;
  --text:#e5e7eb;
  --muted:#a1a1aa;
  --card:#0f172a;
  --accent:#3b82f6;
  --accent-2:#22d3ee;
  --ring:#60a5fa;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoi UI,Roboto,Helvetica,Arial;
  color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg-2));
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.grid{display:grid;gap:16px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:white;border-radius:10px;padding:10px 16px;border:none;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.1)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(59,130,246,.15);color:#bfdbfe;font-weight:600;font-size:12px}

/* Top bar */
.topbar{background:#0a0f1c;border-bottom:1px solid #1f2937}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:14px;color:#cbd5e1}
.topbar .right{display:flex;gap:12px;align-items:center}
.topbar .right a{opacity:.9}
.topbar .right a:hover{opacity:1}

/* Header */
.header{position:sticky;top:0;z-index:30;background:#0d1528;border-bottom:1px solid #1f2937;backdrop-filter:saturate(1.1) blur(6px)}
.header .wrap{display:grid;grid-template-columns:180px 1fr 180px;align-items:center;padding:14px 0;gap:16px}
.logo{font-weight:800;font-size:22px;letter-spacing:.3px}
.logo span{color:var(--accent)}
.search{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid #1f2937;border-radius:12px;padding:8px 10px;gap:8px}
.search input{flex:1;background:transparent;border:none;color:var(--text);outline:none}
.actions{justify-self:end;display:flex;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid #1f2937;background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:#334155}

/* Nav */
.nav{border-bottom:1px solid #1f2937;background:#0c1426}
.nav .wrap{display:flex;gap:18px;overflow:auto;padding:10px 0}
.nav a{padding:8px 10px;border-radius:8px;color:#cbd5e1;white-space:nowrap}
.nav a:hover{background:rgba(59,130,246,.15);color:#e5f0ff}

/* Hero slider (CSS-only) */
.hero{position:relative}
.hero .slides{position:relative;overflow:hidden;border-radius:18px;box-shadow:var(--shadow)}
.hero input[type="radio"]{display:none}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero .slide img{width:100%;height:420px;object-fit:cover;display:block}
.hero .controls{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hero .dot{width:10px;height:10px;border-radius:50%;background:#cbd5e150;border:1px solid #cbd5e1;cursor:pointer}
.hero .dot:hover{background:#cbd5e1}
#s1:checked ~ .slides .slide:nth-child(1){opacity:1;position:relative}
#s2:checked ~ .slides .slide:nth-child(2){opacity:1;position:relative}
#s3:checked ~ .slides .slide:nth-child(3){opacity:1;position:relative}

/* Sections */
.section{padding:32px 0}
.section h2{font-size:28px;margin:0 0 12px}
.section .sub{color:var(--muted);margin-bottom:20px}

/* Product grid */
.products{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid #1f2937;border-radius:16px;overflow:hidden;transition:transform .15s ease, border-color .15s ease}
.card:hover{transform:translateY(-3px);border-color:#334155}
.card img{width:100%;height:220px;object-fit:cover;background:#020617}
.card .pad{padding:12px}
.price{display:flex;align-items:baseline;gap:8px}
.price .now{font-weight:800}
.price .was{color:#94a3b8;text-decoration:line-through;font-size:14px}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

/* Categories grid */
.categories{grid-template-columns:repeat(6,1fr)}
.category{border:1px dashed #1f2937;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.category img{width:100%;height:140px;object-fit:cover}
.category .pad{padding:10px}

/* Brand strip */
.brands{display:flex;gap:12px;overflow:auto;padding:2px}
.brands img{height:48px;flex:0 0 auto;border-radius:10px;border:1px solid #1f2937;background:#0b1220}

/* USP */
.usp{grid-template-columns:repeat(3,1fr)}
.usp .item{background:rgba(255,255,255,.03);border:1px solid #1f2937;border-radius:16px;padding:18px}

/* Newsletter */
.newsletter{display:flex;gap:12px}
.newsletter input{flex:1;border-radius:12px;border:1px solid #1f2937;background:rgba(255,255,255,.06);padding:12px;color:var(--text);outline:none}
.newsletter button{white-space:nowrap}

/* Footer */
.footer{background:#0a0f1c;border-top:1px solid #1f2937;margin-top:40px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;padding:28px 0}
.footer h4{margin:0 0 12px}
.footer a{display:block;color:#cbd5e1;margin:6px 0;opacity:.9}
.footer a:hover{opacity:1}
.footbar{border-top:1px solid #1f2937;color:#94a3b8;padding:12px 0;font-size:14px}

/* Responsive */
@media (max-width: 1024px){
  .products{grid-template-columns:repeat(3,1fr)}
  .categories{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 720px){
  .header .wrap{grid-template-columns:1fr auto auto}
  .logo{font-size:20px}
  .nav .wrap{gap:12px}
  .hero .slide img{height:280px}
  .products{grid-template-columns:repeat(2,1fr)}
  .usp{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 480px){
  .products{grid-template-columns:1fr}
  .categories{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr}
}