/* ===== Garments List Page (matches home liquid-glass aesthetic) ===== */

/* Hero Section styles inherited from base.css */

/* Garments grid: same system, just tuned for list page */
.garments-grid--list {
  gap: 28px; /* slightly tighter than home, still airy */
}

/* Responsive - Filter adjustments only */
@media (max-width: 1200px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 18px;
  }
}

@media (max-width: 992px) {
  .filters-glass {
    padding: 28px;
  }

  .filters-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .filter-field--search {
    grid-column: span 2;
  }

  .filter-actions {
    flex-direction: row;
    gap: 12px;
  }

  .btn-filter {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .filters-glass {
    padding: 24px;
    margin-bottom: 40px;
  }

  .filters-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }

  .filter-field--search {
    grid-column: span 1;
  }

  .filter-actions {
    flex-direction: column;
    gap: 12px;
  }

  .btn-filter {
    width: 100%;
  }
}

@media (max-width: 576px) {

  .filters-glass {
    padding: 20px;
    margin-bottom: 32px;
  }

  .filters-grid {
    gap: 14px;
    margin-bottom: 16px;
  }

  .filters-form input[type="text"],
  .filters-form select {
    height: 42px;
    font-size: 0.85rem;
  }

  .filter-label {
    font-size: 0.7rem;
  }

  .btn-filter {
    padding: 11px 24px;
    font-size: 0.8rem;
  }
}