/* --- MOBILE-FIRST BASE STYLES --- */

/* Aturan dasar untuk grid produk di layar kecil (2 kolom) */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  height: 100%;
  /* Transisi dinonaktifkan di mobile untuk performa lebih baik */
  transition: none !important;
}

.product-img {
  aspect-ratio: 4 / 3;
  height: auto;
  overflow: hidden;
  pointer-events: none; /* Pastikan gambar tidak bisa diklik */
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-info {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.product-info h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: #222;
}

.product-info h3 a {
  color: inherit;
  text-decoration: none;
}

.product-info p {
  color: #666;
  font-size: 0.86rem;
  line-height: 1.45;
  margin-bottom: 12px;
  flex-grow: 1;
}

/* --- TABLET & DESKTOP STYLES (min-width: 769px) --- */
@media (min-width: 769px) {
  .product-grid {
    /* Ubah menjadi 3 kolom di layar besar */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
  }

  .product-card {
    /* Aktifkan kembali transisi HANYA di desktop */
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease !important;
  }

  .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  }

  .product-card:hover .product-img img {
    transform: scale(1.05);
  }

  .product-img img {
    transition: transform 0.4s ease;
  }

  .product-info {
    padding: 25px !important;
  }

  .product-info h3 {
    font-size: 1.3rem;
  }

  .product-info p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
  }
}