/* Argos catalog: shared presentation for category navigation and product filters. */
body.catalog-page {
    --filter-ink: #2b2f3d;
    --filter-muted: #777770;
    --filter-line: #e7e3de;
    --filter-paper: #fbfaf8;
    --filter-hover: #f0ede8;
}

html:has(body.catalog-page),
.catalog-page .filter-sidebar,
.catalog-page #filtersOffcanvas .offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: #b7b4ae transparent;
}
html:has(body.catalog-page)::-webkit-scrollbar,
.catalog-page .filter-sidebar::-webkit-scrollbar,
.catalog-page #filtersOffcanvas .offcanvas-body::-webkit-scrollbar { width: 7px; height: 7px; }
html:has(body.catalog-page)::-webkit-scrollbar-track,
.catalog-page .filter-sidebar::-webkit-scrollbar-track,
.catalog-page #filtersOffcanvas .offcanvas-body::-webkit-scrollbar-track { background: transparent; margin-block: 14px; }
html:has(body.catalog-page)::-webkit-scrollbar-thumb,
.catalog-page .filter-sidebar::-webkit-scrollbar-thumb,
.catalog-page #filtersOffcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: #b7b4ae; border: 2px solid transparent; border-radius: 20px; background-clip: padding-box;
}
html:has(body.catalog-page)::-webkit-scrollbar-thumb:hover,
.catalog-page .filter-sidebar::-webkit-scrollbar-thumb:hover,
.catalog-page #filtersOffcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover { background-color: #858780; }
html:has(body.catalog-page)::-webkit-scrollbar-button,
.catalog-page .filter-sidebar::-webkit-scrollbar-button,
.catalog-page #filtersOffcanvas .offcanvas-body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Chromium otherwise gives standard scrollbar-width precedence over thumb/button styling. */
@supports selector(::-webkit-scrollbar) {
    html:has(body.catalog-page),
    .catalog-page .filter-sidebar,
    .catalog-page #filtersOffcanvas .offcanvas-body { scrollbar-width: auto; scrollbar-color: auto; }
}

.catalog-page .filter-sidebar {
    background: var(--filter-paper);
    border: 1px solid var(--filter-line);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(43,47,61,.035);
    padding: 0;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scroll-padding-block: 84px 20px;
}
/* One scroll container per panel, including long category/brand lists. */
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) .filter-group-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 18px 18px;
}
.catalog-page .filter-sidebar .filter-header {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 20px 18px;
    gap: 10px;
    background: var(--filter-paper);
    border-bottom: 1px solid var(--filter-line);
}
.catalog-page .filter-title { color: var(--filter-ink); font: 400 23px/1.2 'PT Serif', serif; }
.catalog-page .filter-reset {
    color: var(--filter-muted); background: transparent;
    border: 1px solid var(--filter-line); border-radius: 30px;
    padding: 7px 10px; gap: 6px; font: 400 11px/1.2 'Inter', sans-serif;
    text-decoration: none; white-space: nowrap; transition: background .18s, color .18s;
}
.catalog-page .filter-reset:hover { background: var(--filter-hover); color: var(--filter-ink); border-color: #ccc8c1; }
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) .filter-group { border-bottom: 1px solid var(--filter-line); }
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) .filter-group-header {
    padding: 18px; background: transparent; gap: 12px; transition: background .18s;
}
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) .filter-group-header:hover { background: var(--filter-hover); }
.catalog-page .filter-label { color: var(--filter-ink); font: 500 13px/1.4 'Inter', sans-serif; }
.catalog-page .filter-chevron { color: #8c8d87; font-size: 10px; }
.catalog-page .price-inputs { gap: 8px; margin-bottom: 16px; }
.catalog-page .price-input {
    min-width: 0; width: 100%; border: 1px solid #dad7d2; border-radius: 9px;
    padding: 11px 10px; color: var(--filter-ink); background: #fff; font: 400 13px/1.4 'Inter', sans-serif;
}
.catalog-page .price-input:focus { border-color: #8c8f99; box-shadow: 0 0 0 3px rgba(43,47,61,.08); }
.catalog-page .price-labels { color: var(--filter-muted); font-size: 11px; }
.catalog-page .range-track { background: #dedbd5; height: 3px; }
.catalog-page .range-input { height: 3px; }
.catalog-page .range-input::-webkit-slider-thumb { width: 16px; height: 16px; background: var(--filter-ink); box-shadow: 0 0 0 3px var(--filter-paper); }
.catalog-page .range-input::-moz-range-thumb { width: 16px; height: 16px; background: var(--filter-ink); box-shadow: 0 0 0 3px var(--filter-paper); }
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) .custom-checkbox {
    gap: 0; margin: 0; padding: 9px 7px; border-radius: 7px; transition: background .18s;
}
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) .custom-checkbox:hover { margin: 0; padding: 9px 7px; background: var(--filter-hover); }
.catalog-page .checkbox-box { width: 18px; height: 18px; border: 1px solid #c9c7c1; border-radius: 5px; margin-right: 10px; background: #fff; }
.catalog-page .custom-checkbox input:checked ~ .checkbox-box { background: var(--filter-ink); border-color: var(--filter-ink); }
.catalog-page .custom-checkbox input:checked ~ .checkbox-box::after { left: 5px; top: 2px; width: 5px; height: 9px; }
.catalog-page .checkbox-label { color: var(--filter-ink); font: 400 13px/1.5 'Inter', sans-serif; }
.catalog-page .checkbox-count { margin-left: 8px; color: var(--filter-muted); font: 400 11px/1.4 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.catalog-page .custom-checkbox:has(input:checked) { background: #eeece7; }
.catalog-page .custom-checkbox:has(input:focus-visible) { outline: 2px solid #8d929f; outline-offset: 1px; }
.catalog-page .facet-category-toggle { padding: 11px 7px; color: var(--filter-ink); font-size: 13px; }
.catalog-page .facet-category-children { margin: 3px 0 8px 10px; padding-left: 8px; border-left: 1px solid #dcd8d0; }
.catalog-page .facet-category-toggle-label { flex: 1; text-align: left; }

/* Production category navigation uses links; retain its selected/open state. */
.catalog-page .sidebar-cat-list { margin: 0; padding: 0; list-style: none; }
.catalog-page .sidebar-cat-row { display: flex; align-items: center; gap: 3px; }
.catalog-page .sidebar-cat {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    padding: 10px; margin: 2px 0; border-radius: 8px; color: var(--filter-ink);
    font: 400 13px/1.45 'Inter', sans-serif; text-decoration: none;
    transition: background .18s, color .18s;
}
.catalog-page .sidebar-cat:hover { background: var(--filter-hover); color: var(--filter-ink); }
.catalog-page .sidebar-cat-name { flex: 1; min-width: 0; }
.catalog-page .sidebar-cat-count { color: var(--filter-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.catalog-page .sidebar-cat.is-active { color: #fff; background: var(--filter-ink); }
.catalog-page .sidebar-cat.is-active .sidebar-cat-count { color: #d7d8dd; }
.catalog-page .sidebar-cat-toggle {
    width: 30px; height: 34px; flex-shrink: 0; border: 0; border-radius: 7px;
    background: transparent; color: #777b85; font-size: 10px;
}
.catalog-page .sidebar-cat-toggle:hover { background: var(--filter-hover); color: var(--filter-ink); }
.catalog-page .sidebar-subcat-list { margin: 4px 0 10px 12px; padding-left: 8px; border-left: 1px solid #dedad3; }
.catalog-page .sidebar-subcat { font-size: 12px; }
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) :is(.in-stock-toggle, .with-photo-toggle) {
    background: #f0ede8 !important; border: 1px solid transparent; padding: 11px 12px !important;
    border-radius: 9px !important;
}
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) :is(.in-stock-toggle, .with-photo-toggle):has(input:checked) {
    background: #e7e8eb !important; border-color: #d4d6dc;
}
.catalog-page :is(.in-stock-toggle, .with-photo-toggle) i { color: #747984 !important; }
.catalog-page :is(.in-stock-toggle, .with-photo-toggle) .toggle-switch { background: #c8c6c0 !important; }
.catalog-page :is(.in-stock-toggle, .with-photo-toggle):has(input:checked) .toggle-switch { background: var(--filter-ink) !important; }
.catalog-page .filter-apply-btn {
    width: calc(100% - 36px); margin: 18px; border-radius: 30px; padding: 13px 15px;
    background: var(--filter-ink); color: #fff; font: 500 13px/1.5 'Inter', sans-serif;
    box-shadow: none; transition: background .18s;
}
.catalog-page .filter-apply-btn:hover { background: #414655; transform: none; box-shadow: none; }
.catalog-page .filter-count { color: var(--filter-ink); }
.catalog-page :is(.filter-sidebar, #filtersOffcanvas) :is(button, a, input):focus-visible { outline: 2px solid #7c8497; outline-offset: 3px; }
.catalog-page #filtersOffcanvas { background: var(--filter-paper); border-left: 1px solid var(--filter-line); }
.catalog-page #filtersOffcanvas .offcanvas-header { background: var(--filter-paper) !important; border-bottom: 1px solid var(--filter-line) !important; padding: 20px; }
.catalog-page #filtersOffcanvas .offcanvas-title { font: 400 26px/1.2 'PT Serif', serif; color: var(--filter-ink); }
.catalog-page #filtersOffcanvas .offcanvas-body { overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.catalog-page #filtersOffcanvas .btn-close { padding: 12px; border-radius: 50%; background-color: #ece9e3; opacity: .75; }
.catalog-page #filtersOffcanvas #mobileApplyFilters { width: 100%; margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .catalog-page :is(.filter-sidebar, #filtersOffcanvas) * { transition: none !important; }
}