/* Native controls remain usable when JavaScript is unavailable. */
select:not([multiple]) {
  color: var(--ink, #30312c);
  background-color: var(--paper, #efede7);
  border-radius: 0;
  font: inherit;
  accent-color: var(--ink, #30312c);
}
select option, select optgroup { color: var(--ink, #30312c); background: var(--paper, #efede7); }
.os-select { position: relative; display: block; width: 100%; min-width: 0; }
.os-select[hidden], .os-select-options[hidden], .os-select-option[hidden] { display: none !important; }
.os-select-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.os-select .os-select-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
  margin: 0 !important; border: 0 !important; overflow: hidden !important;
  clip-path: inset(50%); white-space: nowrap; pointer-events: none;
}
.os-select .os-select-button {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 46px; padding: 10px 0; margin: 0;
  border: 0; border-bottom: 1px solid var(--line, #888a7d); border-radius: 0;
  background: transparent; color: var(--ink, #30312c); font: inherit;
  text-align: left; line-height: 1.4; cursor: pointer; box-shadow: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.os-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-select-arrow { flex: 0 0 6px; width: 6px; height: 6px; margin: -3px 3px 0 0; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.os-select-button[aria-expanded="true"] .os-select-arrow { transform: rotate(225deg); margin-top: 3px; }
.os-select-button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.os-select-button[aria-invalid="true"] { border-bottom: 2px solid var(--ink); }
.os-select-button:disabled { color: var(--muted, #696a61); cursor: default; opacity: .65; }
.filter-select.has-os-select::after { display: none; }
.catalogue-filter .os-select { width: 23ch; max-width: 100%; }
.compact-catalogue-heading > .catalogue-filter .os-select-button { border: 0; font-size: .875rem; }
.compact-collection-filter .os-select { width: 100%; }
.os-select-options {
  position: fixed; inset: auto; z-index: 2147483646; box-sizing: border-box;
  margin: 0; padding: 4px; max-width: calc(100vw - 24px); overflow: auto;
  background: var(--paper, #efede7); color: var(--ink, #30312c);
  border: 1px solid var(--fine-line, #c1c1b5); border-radius: 0;
  box-shadow: 0 8px 24px #00000012; font: inherit; text-align: left;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.os-select-options::backdrop { background: transparent; }
.os-select-option { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 30px 10px 12px; line-height: 1.4; cursor: pointer; user-select: none; }
.os-select-option[aria-selected="true"]::after { content: '✓'; position: absolute; right: 10px; font-size: .875em; }
.os-select-option.is-active { outline: 1px solid var(--ink); outline-offset: -1px; }
.os-select-option[aria-disabled="true"] { opacity: .4; cursor: default; }
.os-select-group { padding: 12px 12px 4px; color: var(--muted, #696a61); font-size: .8em; }
@media (hover: hover) { .os-select-option:not([aria-disabled="true"]):hover { background: #00000008; } }
@media (max-width: 760px) {
  .os-select .os-select-button, .os-select-options { font-size: 16px; }
  .compact-catalogue-heading > .catalogue-filter .os-select-button { font-size: 1rem; }
  .catalogue-filter .os-select { width: 100%; max-width: 23ch; }
  .os-select-option { min-height: 48px; }
}