/* Responsive Product Grid Styles */

/* Desktop: 4 columns */
.product-grid-4col {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .product-grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .product-grid-4col {
    grid-template-columns: 1fr !important;
  }
}