/* Catalog controls only: 24px row gaps, 4 desktop columns, 760px mobile panel. */
/* Shared interaction colors, scoped to the catalog form and its result actions. */
.catalog-filters, .catalog-result-bar, .catalog-chips {
  --catalog-control-line: var(--color-border);
  --catalog-control-accent: var(--color-link-hover);
  --catalog-control-focus: var(--catalog-control-accent);
}
.catalog-filters { margin-bottom: 24px; }
.catalog-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.catalog-field { min-width: 0; }
.catalog-field label { display: block; margin-bottom: 8px; font-size: 13px; }
.catalog-field input, .catalog-field select { display: block; width: 100%; min-width: 0; max-width: 100%; height: 44px; padding: 10px 12px; border: 1px solid var(--catalog-control-line); border-radius: 4px; color: var(--ink); background: var(--bg); font: inherit; font-size: 14px; }
.catalog-field input::placeholder { color: var(--muted); opacity: 1; }
.catalog-field [aria-invalid="true"] { border-color: var(--ink); border-style: dashed; }
.catalog-filter-panel { padding-top: 24px; }
.catalog-filter-toggle svg { flex-shrink: 0; }
.catalog-filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.catalog-filter-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.catalog-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--catalog-control-line); border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; gap: 6px; }
/* Native details stay in flow without JS; only the enhanced desktop panel overlays. */
.catalog-price-field { min-width: 0; align-self: end; }
.catalog-price { position: relative; min-width: 0; }
.catalog-price summary { display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 44px; min-width: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--catalog-control-line); border-radius: 0; color: var(--ink); background: transparent; font-size: 14px; cursor: pointer; list-style: none; }
.catalog-price summary::-webkit-details-marker { display: none; }
.catalog-price summary > [aria-hidden] { flex-shrink: 0; }
.catalog-price[open] summary > [aria-hidden]:first-child { transform: rotate(90deg); }
.catalog-price-currency { color: var(--muted); font-size: 12px; }
#catalog-price-applied { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-price-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; min-width: 0; }
.catalog-price-apply { grid-column: 1 / -1; justify-self: end; }
.catalog-filters[data-enhanced] .catalog-filter-actions { display: none; }
@media (min-width: 761px) {
  .catalog-filters[data-enhanced] .catalog-price-fields { position: absolute; z-index: 30; inset: calc(100% + 8px) 0 auto auto; width: min(360px, calc(100vw - 32px)); max-height: var(--catalog-price-space, calc(100dvh - 32px)); overflow-y: auto; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); box-shadow: var(--shadow-action); }
}
.catalog-help { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.catalog-price-fields > .catalog-help, .catalog-checkbox { grid-column: 1 / -1; }
.catalog-checkbox { display: flex; align-items: start; gap: 10px; min-height: 44px; padding-block: 8px; font-size: 13px; cursor: pointer; }
.catalog-checkbox input { margin: 3px 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--ink); }
.catalog-filter-actions { display: flex; align-items: center; gap: 24px; padding-top: 20px; font-size: 14px; }
.catalog-error { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.catalog-result-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 28px 0 24px; font-size: 14px; }
.catalog-result-count { color: var(--muted); }
.catalog-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 28px; }
.catalog-chips li { min-width: 0; max-width: 100%; }
.catalog-chips a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--catalog-control-line); border-radius: 4px; font-size: 12px; overflow-wrap: anywhere; }
.catalog-chips a span { font-size: 18px; }
.catalog-result-bar .text-link { text-decoration-color: var(--catalog-control-line); }
.catalog-button:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible),
.catalog-field :is(input, select):not(:disabled, [aria-disabled="true"], [aria-invalid="true"]):is(:hover, :focus-visible),
.catalog-price summary:is(:hover, :focus-visible),
.catalog-price[open] summary,
.catalog-chips a:is(:hover, :focus-visible) { border-color: var(--catalog-control-accent); }
.catalog-result-bar .text-link:is(:hover, :focus-visible) { color: var(--catalog-control-accent); text-decoration-color: var(--catalog-control-accent); }
.catalog-filters :is(button, input, select, summary):focus-visible,
.catalog-result-bar a:focus-visible,
.catalog-chips a:focus-visible { outline-color: var(--catalog-control-focus); }

.catalog-empty { grid-column: 1 / -1; padding: 40px 0; }
.catalog-empty p { margin-bottom: 16px; color: var(--muted); }
.catalog-apply-mobile, .catalog-filters [hidden] { display: none !important; }
@media (max-width: 760px) {
  .catalog-search { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 8px; }
  .catalog-search > .catalog-field { grid-column: 1 / -1; }
  .catalog-filter-fields { grid-template-columns: 1fr; gap: 16px; }
  .catalog-filters[data-enhanced] .catalog-filter-actions { display: flex; }
  .catalog-filters[data-enhanced] .catalog-price-apply { display: none; }
  .catalog-filter-toggle { justify-self: end; }
  .catalog-apply-desktop { display: none; }
  .catalog-apply-mobile { display: inline !important; }
  .catalog-filter-actions { justify-content: space-between; }
  .catalog-result-bar { margin-top: 24px; }
}