:root{--brand:#0b5ed7;--muted:#6c757d}
body{font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,#f8fafc,#ffffff);color:#1f2937}
.card img{border-radius:6px}
a{color:var(--brand)}
.btn-primary{background:linear-gradient(90deg,var(--brand),#1a73e8);border:0}



/* TAMBAH */
.card-modern{ border-radius:14px; box-shadow:0 10px 30px rgba(2,6,23,0.06); overflow:hidden; background:#fff; }
.product-media{ height:220px; object-fit:cover; width:100%; display:block; }
.cat-icon{ width:72px; height:72px; object-fit:contain; border-radius:12px; background:#fff; padding:8px; box-shadow:0 6px 18px rgba(2,6,23,0.04); }
.small-muted{ color:#6c757d; font-size:0.92rem; }

/* Pastikan 3-per-row pada md ke atas (Bootstrap col-md-4): 
   pada layar kecil tiap kolom jadi full-width (bootstrap sudah handle), 
   namun kalau ingin kuatkan kamu bisa paksa ini: */
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }




.category-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
/* fallback responsive: satu kolom di layar sangat kecil */
@media (max-width: 575px){
  .category-grid{ grid-template-columns: 1fr; }
}