/* Mobile-first frontstore styles */
:root{
  --bg:#0b1020;          /* deep slate */
  --panel:#0e1629;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:#233047;
  --brand:#10b981;       /* SPK green */
  --accent:#38bdf8;      /* cyan for actions */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:12px}
.header{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;position:sticky;top:0;z-index:5}
.header .title{font-weight:700}
.header .right{display:flex;gap:10px;align-items:center}
.link{color:#93c5fd}
.btn{background:var(--accent);color:#041427;border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.btn:active{transform:scale(.98)}

input,select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px}

/* Responsive product grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:12px;
  margin-bottom:90px; /* keep space above bottom nav */
}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.thumb{height:120px;background:#0a1326 no-repeat center/cover}
.body{padding:10px}
.title{font-weight:700;margin-bottom:4px;font-size:14px}
.desc{color:var(--muted);font-size:12px;min-height:18px}
.price{color:var(--brand);font-weight:700;margin-top:6px}

/* Bottom mobile nav */
.mobile-nav{
  position:fixed;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg, rgba(1,8,20,.0), rgba(1,8,20,.35)) , var(--panel);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-around;align-items:center;z-index:50;
  backdrop-filter: blur(6px);
}
.mobile-nav a{
  display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted)
}
.mobile-nav a.active{color:var(--text)}
.icon{width:22px;height:22px;display:inline-block}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}

/* Small view polish */
@media (max-width:480px){
  .header{border-radius:0;padding:10px 12px;margin:0 -12px 8px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .thumb{height:104px}
}