:root{
  --bg: #f6f7fb;
  --card: #fff;
  --text: #212529;
  --muted:#6b7280;
  --brand:#2563eb;        /* primary */
  --ink:#111827;
  --ring: rgba(37,99,235,.25);
  --shadow: 0 10px 30px rgba(16,24,40,.06);
  --radius: 14px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text);
  background: linear-gradient(180deg, #f9fbff 0%, var(--bg) 100%);
  line-height: 1.65;
}

.container{ width:min(1200px, 92%); margin-inline:auto }

/* Topbar */
.topbar{ background:#0f172a; color:#e5e7eb }
.topbar a{ color:inherit; text-decoration:none }
.topbar .topbar-inner{
  display:flex; align-items:center; gap:18px; padding:12px 0;
}
.brand{ font-weight:800; letter-spacing:.4px; font-size:20px }
.search{ display:flex; gap:8px; margin-inline:auto; width:min(600px, 100%) }
.search input{
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid #1f2937; background:#111827; color:#e5e7eb
}
.search button{
  border:0; background:#22c55e; color:#041307; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer
}
.quick{ display:flex; align-items:center; gap:14px }
.quick a{ color:#cbd5e1; text-decoration:none }
.cart{ background:#334155; border:0; color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer }
.cart-count{ background:#22c55e; color:#041307; padding:1px 8px; border-radius:999px; margin-left:6px }

/* Departments */
.dept{ background:#fff; box-shadow:var(--shadow) }
.dept-inner{ display:flex; gap:18px; padding:10px 0; overflow:auto }
.dept a{ color:#111827; text-decoration:none; padding:4px 10px; border-radius:8px }
.dept a:hover{ background:#eef2ff; color:var(--brand) }

/* Hero */
.hero{ background:linear-gradient(90deg, #eef2ff, #fff); }
.hero-inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; padding:40px 0 }
.hero-inner img{ width:100%; border-radius:14px; box-shadow:var(--shadow) }
.hero-copy h1{ margin:0 0 8px; font-size:40px; letter-spacing:.2px }
.hero-copy p{ color:var(--muted); margin:0 0 18px }
.btn{
  display:inline-block; text-decoration:none; background:var(--brand); color:#fff;
  padding:10px 16px; border-radius:10px; font-weight:600; box-shadow:var(--shadow); border:0; cursor:pointer
}
.btn:hover{ filter:brightness(1.05) }

/* Grid */
.section{ padding:34px 0 50px }
.section-title{ margin:0 0 14px; font-size:22px }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
@media (max-width:1000px){ .grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:720px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){
  .hero-inner{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr }
}

/* Card */
.card{ background:var(--card); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column }
.card-media{ position:relative; aspect-ratio: 16/11; overflow:hidden; background:#f0f2f8 }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block }
.badge{
  position:absolute; inset:12px auto auto 12px;
  background:#111827; color:#fff; font-size:12px; padding:4px 8px; border-radius:999px
}
.badge-sale{ background:#dc2626 }
.card-body{ padding:14px }
.card-title{ margin:0 0 6px; font-size:18px }
.card-desc{ margin:0 0 14px; color:var(--muted) }
.card-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.price{ font-weight:700; letter-spacing:.2px }

/* Footer */
.footer{ background:#0f172a; color:#9ca3af }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 0 }
.footer a{ color:#e5e7eb; text-decoration:none }
.tiny{ font-size:13px; color:#9ca3af }