/* Reduced gap for products header */
.products-header {
  margin-top: 80px; 
  background-color: var(--off-white);
  padding: 40px 0 20px 0; /* Reduced bottom padding */
  text-align: center;
}

.products-header h1 {
  margin-bottom: var(--space-xs);
}

.filter-section {
  padding-top: var(--space-md); /* Just a bit of spacing */
}

/* Ensure minimal gap on mobile too */
@media (max-width: 768px) {
  .products-header {
     padding: 30px 0 10px 0;
  }
}