/* Filters: JetSmartFilters' output on product archives in the prototype's look. The groups, the price box and the apply
   button are the prototype's classes (category.css); this file adds what only the plugin produces: the chips of the
   chosen filters, the "remove all" button, hidden groups, and the empty state inside the product list. */

/* The plugin hides options and whole groups that no product matches (inline display: none); nothing to add. A group
   whose options are all hidden has its wrapper hidden by the plugin, so no empty frame is left behind. */
.pbly .category-filters .jet-filter { margin: 0; }

/* The plugin's stylesheet spaces its rows (3px margins and padding); the prototype's list has none. */
.pbly .category-filters .jet-filter-row {
  margin: 0;
  padding: 0;
}

/* The plugin's stylesheet gives the inputs its own width and margins. */
.pbly .category-filters .jet-range__inputs { display: grid; }
.pbly .category-filters .apply-filters { margin: 0; }

/* Chosen filters, above the product grid. */
.pbly .category-filters__active:not(:has(.jet-active-filter)) { display: none; }

.pbly .category-filters__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pbly-space-2-5);
  margin-bottom: var(--pbly-space-5);
}

.pbly .category-filters__active .jet-filter { margin: 0; }

.pbly .jet-active-filters__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pbly-space-2);
}

.pbly .jet-active-filters__title {
  color: var(--pbly-color-text-muted);
  font-weight: var(--pbly-font-weight-semibold);
}

.pbly .jet-active-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--pbly-space-1-5);
  padding: var(--pbly-space-1-5) var(--pbly-space-3);
  border-radius: var(--pbly-radius-full);
  background: var(--pbly-color-palette-pill);
  color: var(--pbly-color-text-primary);
  font-size: var(--pbly-font-size-sm);
}

.pbly .jet-active-filter__label { color: var(--pbly-color-text-muted); }
.pbly .jet-active-filter__val { font-weight: var(--pbly-font-weight-semibold); }

.pbly .jet-active-filter__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pbly-space-4);
  height: var(--pbly-space-4);
  border-radius: var(--pbly-radius-full);
  color: var(--pbly-color-text-muted);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pbly .jet-active-filter__remove:hover {
  background: var(--pbly-color-action-primary);
  color: var(--pbly-color-action-on-primary);
}

.pbly .jet-remove-all-filters.hide { display: none; }

.pbly .jet-remove-all-filters__button {
  padding: var(--pbly-space-1-5) var(--pbly-space-3);
  border: 1px solid var(--pbly-color-action-primary);
  border-radius: var(--pbly-radius-full);
  background: transparent;
  color: var(--pbly-color-action-primary);
  font-size: var(--pbly-font-size-sm);
  font-weight: var(--pbly-font-weight-semibold);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pbly .jet-remove-all-filters__button:hover {
  background: var(--pbly-color-action-primary);
  color: var(--pbly-color-action-on-primary);
}

/* Empty state: the message is the only item of the list and spans the row. */
.pbly .category-products > .category__empty { grid-column: 1 / -1; }