/* filter_bar.css — SilkDrop
 * UX de filtros del catálogo (PLP). Patrón adaptado de Saleor
 * (plp/filter-bar + use-product-filters): sidebar sticky en desktop,
 * colapsable en mobile, y chips de filtros activos removibles.
 * Solo tokens --sd-*; CSP-safe (sin JS propio: usa Bootstrap collapse). */

.catalog-filters__card {
  border: 1px solid hsl(var(--sd-text-primary) / 0.08);
  border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow-sm);
}

@media (min-width: 992px) {
  .catalog-filters {
    position: sticky;
    top: 88px; /* deja respirar la navbar sticky */
  }
}

.catalog-results__bar {
  min-height: 2.25rem;
}

/* --- Chips de filtros activos --- */
.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.2;
  text-decoration: none;
  color: hsl(var(--sd-primary));
  background: hsl(var(--sd-primary) / 0.08);
  border: 1px solid hsl(var(--sd-primary) / 0.18);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.catalog-chip:hover,
.catalog-chip:focus-visible {
  background: hsl(var(--sd-primary) / 0.16);
  color: hsl(var(--sd-primary-hover));
}

.catalog-chip svg {
  flex: none;
  opacity: 0.7;
}

.catalog-chip--clear {
  color: hsl(var(--sd-text-muted));
  background: transparent;
  border-color: hsl(var(--sd-text-primary) / 0.15);
}

.catalog-chip--clear:hover,
.catalog-chip--clear:focus-visible {
  color: hsl(var(--sd-danger));
  background: hsl(var(--sd-danger) / 0.08);
  border-color: hsl(var(--sd-danger) / 0.25);
}

.catalog-filters__card {
  box-shadow: var(--sd-shadow-soft);
  border-radius: var(--sd-radius-lg);
}