/* ==========================================================================
   FRONTGRADE  ·  fg2 PRODUCT CATEGORY TERM PAGE
   What the term page adds to the catalog pattern: the child chips with their
   counts (above the table), the exposed filter form over the table, and the table's server pager.
   The head band is page-header.css's, the component bands are catalog.css's
   and the table is product-table.css's and the module's catalog-table.css.
   Requires tokens.css and components.css to be loaded first.

   EVERY RULE STARTS .fg-catalog-term, so nothing here reaches another page.
   Colours are tokens only.
   ========================================================================== */

/* THE CHILD CHIPS: one quiet row of the child categories between the head band
   and the table (ink text, hairline outline, no fill, a tint on hover). The
   current one is marked by weight, not colour. The row owns the space under
   it, down to the table. */
.fg-catalog-term__nav { margin: 0 0 var(--space-6); }

/* THE VERTICAL RHYTHM OF THE HEAD AND THE TABLE BAND, one owner per gap.
     headline to the head band's lower edge: the band's own bottom padding
       (page-header.css, --fg-band-pad-bottom, 40-64px). The 300px floor the
       other page families give their head is released here, because it left
       ~140px of empty band under the headline with the table following.
     head band to the chips (or to the table when there are none): this band's
       top padding, 32px (--space-7). The finder layout's own 24px top margin
       is cleared.
     chips to the table: the chip row's 24px bottom margin (--space-6).
     table to the Search all link: that link's 24px top margin.
   The table band's bottom padding stays the section token. */
.fg-catalog-term .fg-pagehead { min-height: 0; }
.fg-catalog-term__products { padding-top: var(--space-7); }
.fg-catalog-term__products .fg-catalog-term__table.fgpf-layout { margin-block: 0; }

/* The authored bands follow the table band; the stack's first band carries no
   top rule of its own, so the table band hands it one. */
.fg-catalog-term__products + .fg-bands { border-top: var(--border-hairline-w) solid var(--border-hairline); }

.fg-catalog-term__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fg-catalog-term .fg-catalog-term__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-hairline-strong, var(--border-hairline));
  border-radius: 0;
}

.fg-catalog-term .fg-catalog-term__button:hover,
.fg-catalog-term .fg-catalog-term__button:focus-visible {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-color: var(--border-hairline-strong, var(--border-hairline));
}

.fg-catalog-term__count {
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The link to the whole catalog under the table. */
.fg-catalog-term__all { margin: var(--space-6) 0 0; }

/* The current one among its siblings: heavier, same colours. */
.fg-catalog-term .fg-catalog-term__button--current,
.fg-catalog-term .fg-catalog-term__button--current:hover { font-weight: var(--fw-bold); }

.fg-catalog-term__button--current .fg-catalog-term__count { color: var(--text-primary); }

@media (max-width: 64rem) {
  .fg-catalog-term .fg-catalog-term__button { min-height: 44px; }
}

/* A select the page fixes (the category on a term page) is shown as set. */
.fg-catalog-term .views-exposed-form select:disabled { opacity: 0.75; }

/* THE EXPOSED FILTER FORM: search, category, subcategory and the two buttons,
   in one row that wraps. It is Views' own markup (form.views-exposed-form),
   so the rules name its classes. */
.fg-catalog-term .views-exposed-form { margin: 0 0 var(--space-6); }

.fg-catalog-term .views-exposed-form .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.fg-catalog-term .views-exposed-form .form-item {
  flex: 1 1 14rem;
  margin: 0;
}

.fg-catalog-term .views-exposed-form label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.fg-catalog-term .views-exposed-form input[type="text"],
.fg-catalog-term .views-exposed-form input[type="search"],
.fg-catalog-term .views-exposed-form input[type="number"],
.fg-catalog-term .views-exposed-form select {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-primary);
  background-color: var(--surface-panel);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}

.fg-catalog-term .views-exposed-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.fg-catalog-term .views-exposed-form input[type="text"]:focus,
.fg-catalog-term .views-exposed-form input[type="search"]:focus,
.fg-catalog-term .views-exposed-form input[type="number"]:focus,
.fg-catalog-term .views-exposed-form select:focus { border-color: var(--border-accent); }

.fg-catalog-term .views-exposed-form .form-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  margin: 0;
}

.fg-catalog-term .views-exposed-form .form-actions input[type="submit"] {
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-btn);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-ui);
  border-radius: 0;
  cursor: pointer;
}

.fg-catalog-term .views-exposed-form .form-actions input[type="submit"]:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.035);
}

/* The server pager on category and capability pages is styled by the product
   finder module's finder.css, on the pager's real markup. */

/* THE FINDER'S FILTER COLUMN. The inline row above is for the catalog view's
   own form; inside the finder's sticky column the same form is one column, so
   the row rules are answered here at the same specificity. */
.fg-catalog-term .fgpf-layout__filters .views-exposed-form { margin: 0; }

.fg-catalog-term .fgpf-layout__filters .views-exposed-form .form--inline {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
}

.fg-catalog-term .fgpf-layout__filters .views-exposed-form .form-item { flex: none; }
.fg-catalog-term .fgpf-layout__filters .views-exposed-form .form-actions { flex-wrap: wrap; }

/* The facet rows, labels and controls inside the sticky column are the
   finder module's own (finder.css owns their spacing and colour). */
.fg-catalog-term .fgpf-table th,
.fg-catalog-term .fgpf-table td { border-color: var(--border-hairline); }