.catalogue-browser { width: 100%; min-width: 0; }
.catalogue-browser [hidden] { display: none !important; }
.catalogue-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 20px; }
.catalogue-controls input, .catalogue-browser button { min-height: 44px; min-width: 0; border: 1px solid #b68b4f80; border-radius: 10px; background-color: var(--surface); color: var(--text); font: inherit; line-height: 1.3; transition: box-shadow .2s ease, background-color .2s ease; }
.catalogue-controls input { width: 100%; padding: 11px 13px; font-size: 16px; accent-color: var(--gold); }
.catalogue-controls input::placeholder { color: var(--muted); opacity: .85; }
.catalogue-browser button { padding: 10px 16px; color: var(--gold); cursor: pointer; }
.catalogue-browser button:hover:not(:disabled) { background-color: #30273a; box-shadow: 0 0 16px #edc68128; }
.catalogue-controls input:focus, .catalogue-browser button:focus-visible { outline: none; box-shadow: 0 0 17px #edc68155; }
.catalogue-browser button:disabled { opacity: .45; cursor: default; }
.catalogue-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; min-width: 0; margin-bottom: 20px; }
.catalogue-pagination span { color: var(--muted); font-size: 14px; padding-inline: 4px; white-space: nowrap; }
.catalogue-pagination button { min-width: 76px; }
.catalogue-page-numbers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.catalogue-pagination .catalogue-page-numbers button { min-width: 44px; padding-inline: 10px; }
.catalogue-page-numbers button[aria-current="page"] { background-color: #443248; color: #ffe2a8; box-shadow: 0 0 15px #edc68130; }
.catalogue-pagination .catalogue-page-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.catalogue-empty { padding-block: 20px; color: var(--muted); text-align: center; }
@media (max-width: 680px) {
  .catalogue-controls { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-controls input, .catalogue-browser button { transition: none; }
}