/* Shared country/global filters. Counts continue to load only on request. */
.catalog-controls { min-width: 0; margin-bottom: 20px; }
.filter-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.filter-panel > summary { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 15px 18px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 650; border-radius: 12px; }
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary:hover { color: var(--blue); }
.filter-icon { color: #6f8094; flex-shrink: 0; }
.filter-icon circle { fill: #fff; }
.filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: #edf3fc; color: var(--blue); font-size: 11px; font-variant-numeric: tabular-nums; }
.filter-chevron { width: 7px; height: 7px; margin-left: auto; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.filter-panel[open] > summary .filter-chevron { transform: rotate(225deg); }
.filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; padding: 0 18px 18px; }
.filter-fields-country { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filter-fields label { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #526171; font-size: 12px; line-height: 1.4; }
.catalog-controls select, .catalog-controls input:not([type="hidden"]) { width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid #dfe5ec; border-radius: 8px; background: #f9fafc; color: var(--ink); font-size: 13px; line-height: 1.4; }
.catalog-controls select { padding-right: 26px; text-overflow: ellipsis; }
.catalog-controls input::placeholder { color: #7b8796; }
.catalog-controls select:hover, .catalog-controls input:hover { border-color: #b9c7d8; }
.filter-footer { display: grid; grid-template-columns: minmax(0, 440px) auto; column-gap: 24px; row-gap: 10px; align-items: end; margin: 0 18px; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.catalog-controls .filter-apply { grid-column: 2; grid-row: 1; justify-self: end; min-height: 42px; padding: 10px 24px; border-color: var(--blue); background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }
.filter-apply:hover { filter: brightness(.94); }
.catalog-controls.is-submitting { cursor: progress; }
.catalog-controls.is-submitting .filter-apply { opacity: .7; cursor: progress; }
.catalog-controls.is-submitting .filter-apply::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 9px; border: 1.5px solid #ffffff66; border-top-color: #fff; border-radius: 50%; vertical-align: -1px; animation: filter-loading .7s linear infinite; }
@keyframes filter-loading { to { transform: rotate(360deg); } }

.brand-filter { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.brand-find { display: flex; gap: 6px; }
.brand-find > input { flex: 1; }
.brand-status { color: var(--muted); font-size: 11px; line-height: 1.4; }
.brand-filter.is-autocomplete .brand-find { position: relative; }
.brand-filter.is-autocomplete input { padding-right: 40px; }
.brand-filter.is-autocomplete select, .brand-filter.is-autocomplete [data-brand-find] { display: none; }
.brand-clear { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 34px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.brand-clear:hover { background: #edf3fd; color: var(--ink); }
.brand-popup { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; z-index: 12; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 24px #1b2d4922; overflow: hidden; }
.brand-options { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.brand-options li { padding: 11px 10px; border-radius: 5px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; cursor: pointer; }
.brand-options li:hover, .brand-options li.is-active { background: #edf3fd; color: var(--blue); }
.brand-options .brand-option-all { border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); margin-top: 4px; }
.brand-popup > .brand-status { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.4; }
.brand-popup > .brand-status:empty { display: none; }
.brand-popup[hidden], .brand-options[hidden], .brand-clear[hidden] { display: none; }

.price-filter { min-width: 0; margin: 0; padding: 0; border: 0; }
.price-filter legend { padding: 0; margin-bottom: 9px; color: #526171; font-size: 12px; font-weight: 600; line-height: 1.5; }
.price-currency { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px; color: #67788a; background: #f0f3f7; font-size: 10px; font-weight: 550; }
.price-inputs { display: flex; gap: 10px; align-items: end; }
.price-inputs label { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 6px; }
.price-inputs label > span { color: #687688; font-size: 11px; line-height: 1.4; }
.price-inputs input { font-variant-numeric: tabular-nums; }
.price-separator { display: grid; place-items: center; height: 42px; color: #93a0ae; }
.price-explainer { grid-column: 1 / -1; grid-row: 2; color: #6f7d8e; font-size: 11px; line-height: 1.6; }
.price-explainer summary { width: fit-content; max-width: 100%; cursor: pointer; }
.price-explainer summary:hover { color: var(--blue); }
.price-explainer p { max-width: 660px; margin-top: 7px; }

.active-filters { display: flex; align-items: start; flex-wrap: wrap; column-gap: 16px; row-gap: 5px; margin: 14px 0 0; }
.filter-chips { display: flex; flex: 1; flex-wrap: wrap; gap: 7px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.filter-chips li { min-width: 0; max-width: 100%; }
.filter-chip { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 7px 10px; border: 1px solid #dce5f2; border-radius: 8px; background: #edf3fb; color: #375b8b; font-size: 11px; line-height: 1.4; }
.filter-chip:hover { background: #e0ebfb; border-color: #b5cce9; }
.chip-label { color: #5f7798; white-space: nowrap; }
.chip-value { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.chip-remove { flex-shrink: 0; padding-left: 4px; font-size: 17px; line-height: 1; }
.filters-clear { padding: 9px 0; color: var(--blue); font-size: 11px; white-space: nowrap; }
.filters-clear:hover { text-decoration: underline; }
.results-heading { gap: 16px; flex-wrap: wrap; margin: 20px 0 0; color: #758293; }
.results-summary { flex: 1; min-width: 160px; }
.results-query { color: var(--ink); font-size: 13px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; margin-bottom: 5px; }
.results-sort { display: flex; align-items: center; gap: 9px; color: #667587; font-size: 11px; white-space: nowrap; }
.results-sort select { width: auto; max-width: 240px; min-height: 40px; background: #fff; font-size: 12px; }
.browse-sidebar details[data-filter-disclosure] > summary { display: flex; align-items: center; gap: 12px; }
.browse-sidebar details[data-filter-disclosure] > summary::after { content: ""; width: 6px; height: 6px; margin-left: auto; margin-right: 3px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.browse-sidebar details[data-filter-disclosure][open] > summary::after { transform: rotate(225deg); }
.browse-sidebar details[data-filter-disclosure]:not([open]) > summary { padding-bottom: 0; }

@media (min-width: 701px) and (max-width: 1050px) {
    .filter-fields-country { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-fields-country > label:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .browse-sidebar { margin-bottom: 12px; }
    .filter-fields, .filter-fields-country { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 14px 16px; }
    .filter-fields-country > label:last-child { grid-column: 1 / -1; }
    .filter-panel > summary { padding: 14px; }
    .filter-footer { margin: 0 14px; column-gap: 16px; }
    .catalog-controls select, .catalog-controls input:not([type="hidden"]) { font-size: 16px; min-height: 44px; }
    .brand-options li { font-size: 14px; }
    .brand-clear { width: 36px; }
    .filter-chip { min-height: 38px; }
    .results-sort select { max-width: 100%; }
}
@media (max-width: 480px) {
    .filter-fields, .filter-fields-country { grid-template-columns: minmax(0, 1fr); }
    .filter-footer { grid-template-columns: minmax(0, 1fr); }
    .catalog-controls .filter-apply { grid-column: 1; grid-row: 3; width: 100%; min-height: 44px; margin-top: 4px; }
    .active-filters { flex-direction: column; gap: 2px; }
    .results-sort { width: 100%; justify-content: space-between; }
    .results-sort select { flex: 1; width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-controls.is-submitting .filter-apply::after { animation: none; }
}