* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }

body { background:#f5f7fb; color:#222; }

.topbar {
  background:#000; color:#fff; padding:6px 20px;
  display:flex; justify-content:space-between; font-size:13px;
}

.header {
  display:flex; gap:15px; align-items:center;
  padding:15px 20px; background:#fff;
}

.logo { font-size:24px; font-weight:800; color:#ff7a00; }
.logo span { color:#000; }

.header input {
  flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:6px;
}

.actions .btn {
  padding:8px 12px; border:none; border-radius:6px;
  margin-left:6px; cursor:pointer; background:#2f6bff; color:#fff;
}
.actions .outline { background:#fff; border:1px solid #2f6bff; color:#2f6bff; }
.actions .green { background:#1dbf73; }

.navbar {
  background:#244baf; padding:10px 20px;
}
.navbar a {
  color:#fff; margin-right:15px; text-decoration:none; font-weight:600;
}

.categories {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:15px; padding:20px;
}
.cat-card {
  height:120px; background:#ddd; border-radius:12px;
  display:flex; align-items:flex-end; padding:10px; font-weight:700;
}

.products { padding:20px; }
.product-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}
.product-card {
  background:#fff; border-radius:10px; padding:10px; text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.product-card img { width:100%; height:160px; object-fit:cover; border-radius:8px; }
.buy {
  display:inline-block; margin-top:8px; padding:8px 12px;
  background:#1e33e8; color:#fff; text-decoration:none; border-radius:6px;
}

.footer {
  background:#000; color:#aaa; text-align:center; padding:12px; margin-top:30px;
}