/* ============================================================
   ShopFlow — Main Stylesheet
   Mobile-first, tested at 375px · 768px · 1280px
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --clr-primary: #2563eb; --clr-accent: #f59e0b;
  --clr-bg: #f8fafc;      --clr-text: #1e293b;
  --clr-muted: #64748b;   --clr-card: #ffffff;
  --shadow: 0 2px 8px rgba(0,0,0,.08); --radius: 10px; --max-w: 1200px;
}
body { font-family: system-ui, sans-serif; background: var(--clr-bg); color: var(--clr-text); }

/* NAVBAR */
.navbar { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.5rem; background:var(--clr-primary); position:sticky; top:0; z-index:100; gap:1rem; }
.logo { color:#fff; font-size:1.4rem; font-weight:700; text-decoration:none; }
.nav-search { display:flex; gap:.5rem; flex:1; max-width:480px; }
.nav-search input { flex:1; padding:.45rem .75rem; border-radius:6px; border:none; font-size:.95rem; }
.nav-search button { padding:.45rem 1rem; background:var(--clr-accent); color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600; }
.nav-links { display:flex; gap:1.25rem; }
.nav-links a { color:#fff; text-decoration:none; font-weight:500; }

/* HERO */
.hero { text-align:center; padding:4rem 1rem; background:linear-gradient(135deg,#1d4ed8,#7c3aed); color:#fff; }
.hero h1 { font-size:clamp(1.8rem,5vw,3rem); margin-bottom:.75rem; }
.hero p { font-size:1.1rem; margin-bottom:1.5rem; color:#dde8ff; }
.btn-primary { display:inline-block; padding:.75rem 2rem; background:var(--clr-accent); color:#fff; border-radius:8px; font-weight:700; text-decoration:none; transition:opacity .2s; border:none; cursor:pointer; }
.btn-primary:hover { opacity:.85; }

/* FILTERS */
.filters { display:flex; gap:1rem; padding:1.25rem 1.5rem; justify-content:center; flex-wrap:wrap; }
.filters select { padding:.5rem 1rem; border:1px solid #cbd5e1; border-radius:6px; background:#fff; cursor:pointer; }

/* PRODUCT GRID */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1.25rem; padding:1.5rem; max-width:var(--max-w); margin:0 auto; }
.product-card { background:var(--clr-card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s; display:flex; flex-direction:column; }
.product-card:hover { transform:translateY(-4px); }
.product-card img { width:100%; height:200px; object-fit:cover; background:#e2e8f0; }
.card-body { padding:1rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.card-body h3 { font-size:1rem; }
.card-price { font-size:1.2rem; font-weight:700; color:var(--clr-primary); }
.card-rating { font-size:.85rem; color:var(--clr-muted); }
.card-body .btn-primary { margin-top:auto; text-align:center; }
.loading { color:var(--clr-muted); text-align:center; padding:2rem; grid-column:1/-1; }
footer { text-align:center; padding:2rem; color:var(--clr-muted); font-size:.9rem; }

@media (max-width:768px) { .nav-search { display:none; } }
@media (max-width:375px) { .product-grid { grid-template-columns:1fr; } }
/* ── Mobile navbar fix ── */
@media (max-width:600px) {
  .navbar { flex-wrap:nowrap; padding:.6rem .75rem; gap:.5rem; overflow:hidden; }
  .nav-search { display:none !important; }
  .nav-links { gap:.5rem; }
  .nav-links a { font-size:.85rem; }
}

/* ── Global Responsive ── */
@media (max-width:768px) {
  .navbar { padding:.6rem 1rem; gap:.5rem; }
  .nav-links { gap:.75rem; }
  .hero { padding:2.5rem 1rem; }
  .hero h1 { font-size:clamp(1.5rem,6vw,2.5rem); }
  .filters { padding:.75rem 1rem; gap:.5rem; }
  .product-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; padding:1rem; }
  .product-card img { height:150px; }
}
@media (max-width:480px) {
  .navbar { flex-wrap:wrap; }
  .nav-search { max-width:100%; width:100%; order:3; }
  .product-grid { grid-template-columns:1fr 1fr; gap:.75rem; padding:.75rem; }
  .btn-primary { padding:.65rem 1.25rem; font-size:.9rem; }
  footer { font-size:.8rem; padding:1.25rem; }
}
@media (max-width:375px) {
  .product-grid { grid-template-columns:1fr; }
}

/* ── Navbar overflow fix ── */
@media (max-width:900px) {
  .nav-search { max-width:220px; }
  .nav-links { gap:.75rem; }
}
@media (max-width:768px) {
  .navbar { flex-wrap:nowrap; overflow:hidden; }
  .nav-search { display:none; }
  .nav-links { gap:.5rem; }
}
@media (max-width:600px) {
  .nav-links a:not(:last-child) { display:none; }
}