/**
 * Reflexi — WP Grid Builder facet styling, site-wide.
 *
 * Renders every button facet as the same chip used for product categories:
 * pill, hairline border, JetBrains Mono uppercase label, filled when active.
 *
 * Selectors deliberately carry one more class than WP Grid Builder's own
 * (.wpgb-facet .wpgb-button-facet .wpgb-button beats .wpgb-button-facet
 * .wpgb-button) so this wins on specificity no matter which stylesheet the
 * browser loads first. That keeps it working without !important.
 */

/* Facet label — matches the section eyebrows.
 *
 * The class is repeated to outrank WP Grid Builder's own
 * `.wpgb-facet .wpgb-facet-title { font-size: 20px; line-height: 24px;
 * margin: 0 0 24px }`, which has identical specificity and loads later.
 * line-height and margin are restated for the same reason. */
.wpgb-facet .wpgb-facet-title.wpgb-facet-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8d93;
  font-weight: 400;
  margin: 0 0 12px;
}

/* WP Grid Builder wraps button facets in a fieldset that carries UA styling. */
.wpgb-facet fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* WP Grid Builder adds `.wpgb-facet > fieldset:last-child { margin-bottom: 40px }`,
 * which outranks the rule above and leaves 40px of dead space under every set
 * of buttons. Spacing below a facet is handled by .bde-wpgbfacet instead, so
 * the class is doubled here to take this past WPGB's specificity. */
.wpgb-facet.wpgb-facet > fieldset:last-child {
  margin-bottom: 0;
}

.wpgb-facet .wpgb-button-facet .wpgb-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpgb-facet .wpgb-button-facet .wpgb-inline-list > li {
  margin: 0;
}

.wpgb-facet .wpgb-button-facet .wpgb-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e6e8;
  border-radius: 999px;
  padding: 8px 14px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wpgb-facet .wpgb-button-facet .wpgb-button:hover {
  border-color: #26282b;
}

.wpgb-facet .wpgb-button-facet .wpgb-button[aria-pressed="true"] {
  background: #26282b;
  border-color: #26282b;
}

.wpgb-facet .wpgb-button-facet .wpgb-button[aria-pressed="true"] .wpgb-button-label {
  color: #ffffff;
}

.wpgb-facet .wpgb-button-facet .wpgb-button-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #26282b;
  line-height: 1;
}

/* Keyboard focus stays visible — the buttons are divs with role="button". */
.wpgb-facet .wpgb-button-facet .wpgb-button:focus-visible {
  outline: 2px solid #26282b;
  outline-offset: 2px;
}

/* Spacing below a facet when one sits directly above a grid. */
.bde-wpgbfacet {
  margin-bottom: 32px;
}

/* Stacked filters sit closer to each other than to the grid below them. */
.bde-wpgbfacet:has(+ .bde-wpgbfacet) {
  margin-bottom: 12px;
}