/**
 * Category experience — listing + filters.
 */

.ugb-category {
  padding-block: var(--ugb-space-6, 1.5rem) var(--ugb-space-10, 2.5rem);
}

.ugb-category__header {
  margin-block: var(--ugb-space-4, 1rem) var(--ugb-space-5, 1.25rem);
}

.ugb-category__title {
  margin: 0;
}

.ugb-category__count {
  margin: 0.35rem 0 0;
  color: var(--ugb-color-muted, #5c5c5c);
}

.ugb-category__filters {
  margin-block-end: var(--ugb-space-6, 1.5rem);
  padding: var(--ugb-space-4, 1rem);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ugb-color-surface, #f7f7f5) 88%, transparent),
    transparent
  );
  border-block-end: 1px solid var(--ugb-color-border, #e4e4e0);
}

.ugb-category__filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.ugb-category__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 8rem;
  flex: 1 1 8rem;
}

.ugb-category__label input,
.ugb-category__label select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--ugb-color-border, #d8d8d4);
  border-radius: var(--ugb-radius-sm, 4px);
  background: var(--ugb-color-background, #fff);
  font: inherit;
  color: inherit;
}

.ugb-category__label input:focus,
.ugb-category__label select:focus {
  outline: 2px solid var(--ugb-color-accent, #1a5f4a);
  outline-offset: 1px;
}

.ugb-category__empty {
  padding-block: var(--ugb-space-8, 2rem);
}

.ugb-category__filters.is-busy {
  opacity: 0.72;
  pointer-events: none;
}

@media (max-width: 640px) {
  .ugb-category__filter-row {
    flex-direction: column;
    align-items: stretch;
  }
}