/* Keep browsing tools beside their results and leave navigation easy to scan. */
.page-browse-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.page-browse-toolbar h1 { margin: 0; font-size: 1.5rem; line-height: 1.3; }
.page-browse-toolbar .items-view-toolbar { width: 100%; margin: 0; }
.page-browse-toolbar .trading-search { flex: 1 1 220px; max-width: 480px; margin: 0; }
.page-browse-toolbar .trading-search input { width: 100%; min-height: 42px; }
.page-browse-toolbar .page-data-status { flex: 1 0 100%; margin: 0; padding: .6rem .8rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); white-space: normal; }
.page-data-status .status-text { white-space: normal; }
.mode-sync-notice { flex-basis: 100%; flex-wrap: wrap; white-space: normal; }
.mode-sync-notice[hidden] { display: none; }
.page-data-status.status-error, .page-data-status.status-warn { background: var(--surface-raised); }
.page-retry { margin-left: auto; min-height: 38px; flex-shrink: 0; }
.status-loading .status-dot { animation: page-loading 1.2s ease-in-out infinite; }
@keyframes page-loading { 50% { opacity: .3; } }
.page-filter-toggle { display: none; }
.mode-select { flex-wrap: wrap; gap: 0; width: fit-content; padding: 3px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); }
.mode-select .mode-select-btn { min-height: 38px; min-width: 62px; font-size: .8rem; border-color: transparent; }
.mode-select .mode-select-btn.active { border-color: var(--accent); }
.mode-select .mode-select-btn:focus-visible, .page-filter-toggle:focus-visible, .nav-quick-search:focus-visible, .cmdk-close:focus-visible, .cmdk-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-quick-search { display: inline-flex; align-items: center; gap: .6rem; min-height: 38px; white-space: nowrap; }
.nav-quick-search svg { flex-shrink: 0; }
.nav-quick-search kbd { font: inherit; font-size: .7rem; color: var(--text-muted); border: 1px solid var(--border-soft); border-radius: 3px; padding: 2px 4px; }
.cmdk-overlay { z-index: 2500; }
.cmdk-panel { max-height: min(76vh, 720px); }
.cmdk-heading { display: flex; justify-content: space-between; align-items: center; padding: .5rem .7rem .5rem 1rem; border-bottom: 1px solid var(--border-soft); }
.cmdk-heading h2 { margin: 0; font-size: 1rem; }
.cmdk-close { min-height: 40px; padding: .5rem; }
.cmdk-notice { display: flex; gap: .7rem; align-items: center; padding: .6rem 1rem; font-size: .85rem; color: var(--text-muted); }
.cmdk-notice[hidden] { display: none; }
.cmdk-retry { margin-left: auto; flex-shrink: 0; min-height: 38px; }
.cmdk-input { flex-shrink: 0; width: 100%; min-width: 0; }
.cmdk-entry { min-height: 44px; }
button.cmdk-entry { width: 100%; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
button.cmdk-entry:not(.active) { background: transparent; }
button.cmdk-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cmdk-footer { padding: .55rem 1rem; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: .75rem; }
.browse-page .trading-table-scroll, .browse-page #ammo-table-wrap { max-width: 100%; overflow-x: auto; }
@media (max-width: 1500px) {
  header > .btn-paypal, .nav-quick-search kbd { display: none; }
}
@media (min-width: 901px) and (max-width: 1500px) {
  body:not(.map-page) > header { gap: .55rem; }
}
@media (min-width: 901px) and (max-width: 1350px) {
  body:not(.map-page) > header > .btn-kofi { display: none; }
}
@media (max-width: 900px) {
  .browse-page > header { gap: .4rem; padding: .5rem .7rem; }
  .browse-page > header > .brand { margin-right: auto; }
  .browse-page > header .btn.nav-hamburger-btn, header .nav-quick-search { min-height: 44px; padding: .5rem .7rem; font-size: .8rem; }
  .browse-page > header > .btn-kofi, .browse-page > header > .btn-paypal { display: none; }
  .browse-page .main-layout { flex-direction: column; }
  .browse-page .catalog-main { padding: .8rem; min-width: 0; }
  .page-filter-toggle { display: flex; width: calc(100% - 1.6rem); margin: .8rem .8rem 0; min-height: 44px; align-items: center; justify-content: space-between; text-align: left; white-space: normal; }
  .page-filter-toggle::after { content: '+'; margin-left: .75rem; font-size: 1.1rem; }
  .page-filter-toggle[aria-expanded="true"]::after { content: '-'; }
  .browse-page .page-filter-panel { display: none; width: 100%; height: auto; max-height: min(48vh, 420px); border-right: 0; }
  .browse-page .page-filter-panel.page-filter-open { display: block; }
  .page-filter-panel .category-item { min-height: 44px; }
  .page-browse-toolbar { gap: .6rem; }
  .page-browse-toolbar h1 { width: 100%; font-size: 1.35rem; }
  .page-browse-toolbar .trading-search { max-width: none; }
  .page-browse-toolbar .page-data-status { align-items: flex-start; line-height: 1.45; }
  .mode-select .mode-select-btn { min-height: 44px; }
  .cmdk-overlay { padding: 1rem .65rem; }
  .cmdk-panel { max-height: calc(100dvh - 2rem); }
  .cmdk-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) { .status-loading .status-dot { animation: none; } }
@media (max-width: 700px) {
  .loot-mobile-sort > label { display: flex; align-items: center; justify-content: space-between; gap: .7rem; width: 100%; }
  .loot-mobile-sort select { min-width: 0; min-height: 44px; flex: 1; }
  .loot-mobile-options { border-top: 1px solid var(--border-soft); margin-top: .55rem; }
  .loot-mobile-options > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; }
  .loot-mobile-options > summary::-webkit-details-marker { display: none; }
  .loot-mobile-options > summary::after { content: '+'; margin-left: auto; }
  .loot-mobile-options[open] > summary::after { content: '-'; }
  .loot-mobile-basis { font-size: .8rem; font-weight: 400; color: var(--text-muted); }
  .loot-mobile-options > h2 { margin-top: .6rem; }
  .loot-mobile-options > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
