/* ===== Grid Foto Produk (Penjualan) & Foto Barang (Master Barang) =====
   Mobile (default): slider geser horizontal, 2 kartu terlihat sekaligus, foto dibuat
   lebih kecil/ringkas (tinggi tetap, bukan persegi penuh) supaya tidak "kebesaran".
   Tablet (>=768px) & Desktop (>=1280px): grid biasa, menyesuaikan lebar layar. */
.product-grid{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:6px;margin-top:14px;
  scrollbar-width:thin;width:100%;max-width:100%;
}
.product-grid-card{
  flex:0 0 calc(50% - 5px);min-width:0;scroll-snap-align:start;
  background:#fff;border:1.5px solid var(--color-mist);border-radius:var(--radius-md);
  padding:8px;display:flex;flex-direction:column;gap:6px;text-align:center;
}
@media(min-width:768px){
  .product-grid{
    display:grid;grid-template-columns:repeat(3,1fr);overflow-x:visible;
  }
  .product-grid-card{flex:unset}
}
@media(min-width:1280px){
  .product-grid{grid-template-columns:repeat(4,1fr)}
}

.product-grid-photo{
  width:100%;height:100px;border-radius:var(--radius-sm);background:var(--color-mist);
  display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;
}
@media(min-width:768px){.product-grid-photo{height:130px}}
.product-grid-photo img{width:100%;height:100%;object-fit:cover;display:block}
.product-grid-name{font-size:12.5px;font-weight:700;color:var(--color-navy-dark);min-height:30px;line-height:1.25}

.product-photo-thumb{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover}
.product-photo-placeholder{
  width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-mist);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.photo-preview-box{
  width:100%;aspect-ratio:4/3;max-height:220px;border-radius:var(--radius-md);background:var(--color-mist);
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:4px;
}
.photo-preview-box img{width:100%;height:100%;object-fit:cover}
.photo-preview-empty{font-size:12.5px;color:var(--color-text-muted)}