/**
 * Styling for the relocated catalog "Sort by" widget (#catalog-sort-slot).
 * Right-justifies the control and gives the select a normal width instead of
 * the full-width Bootstrap .form-select default.
 */

/*
 * The catalog exposed form (keyword search + sort) is placed as a site-wide
 * block, so the Sort widget would otherwise show on every page. Hide it by
 * default; it is only revealed once the JS relocates it into
 * #catalog-sort-slot, which exists only on /catalog. The id selector below
 * (specificity 1,1,0) wins over this attribute selector, so the relocated
 * widget shows without !important. The prefix match tolerates Drupal's
 * "--2" id de-duplication suffix.
 */
form[id^="views-exposed-form-catalog-page-1"] .form-item-sort-by {
  display: none;
}

#catalog-sort-slot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#catalog-sort-slot .form-item-sort-by {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

#catalog-sort-slot .form-item-sort-by .form-label {
  margin: 0;
  white-space: nowrap;
  font-weight: bold;
}

#catalog-sort-slot .form-item-sort-by .form-select {
  width: auto;
  min-width: 220px;
}