/* Responsive Design */
@media (max-width: 575.98px) {
  .container { padding: var(--spacing-sm); }
  .header { flex-direction: column; gap: var(--spacing-lg); text-align: center; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .products-grid { grid-template-columns: 1fr; }
  .modal-content { width: 95%; padding: var(--spacing-lg); }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}