/* ==========================================================================
   Produk Kami — 4 kartu per baris pada tampilan web (desktop)
   Berkas terpisah; site.css tidak diubah.

   Breakpoint lain dibiarkan apa adanya:
     < 680px        1 kolom
     680 - 899px    3 kolom (gaya marketplace padat)
     900 - 1039px   2 kolom
     >= 1040px      4 kolom  <-- yang diubah di sini (sebelumnya 3)
   ========================================================================== */

@media (min-width:1040px){
  .product-grid{
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;                 /* dirapatkan sedikit karena kolom bertambah */
  }
  /* Nama produk dibatasi 2 baris supaya tinggi kartu tetap seragam
     walau kolomnya menyempit. */
  .product-grid .product-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .product-grid .product-notes{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Kolom yang lebih sempit membuat harga patah di tengah angka
     ("Rp 340.000 Rp" lalu "306.000" di baris berikutnya).
     Tiap harga dijaga utuh; kalau tidak muat, barulah pindah baris
     antar-harga, bukan di tengah angka. */
  .product-grid .product-price{
    display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.35rem; row-gap:.1rem;
  }
  .product-grid .product-price > span,
  .product-grid .product-price > small{ white-space:nowrap; margin-right:0 !important; }
  .product-grid .product-price > small{ flex-basis:100%; }
}