/* Filter Container */
.filter-container {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.filter-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--accent-warm);
  color: var(--white);
  border: none;
  border-radius: var(--radius-button);
  font-weight: 600;
  transition: all var(--transition-base);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.filter-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  background-color: var(--accent-rust);
}

.filter-button.active,
.filter-button.active:hover {
  background-color: var(--ash-darkest) !important;
  color: var(--white);
  transform: none;
}