/* * RahkarTheme — product-archive faceted filters (layered nav). * * Loaded only on product archive pages (inc/enqueue.php gating). Styles the * two-column layout + the #search_filters sidebar rendered by * inc/product-filters.php. All values from theme.json tokens. * * Progressive disclosure: panels are OPEN by default (so a no-JS visitor can * use every filter). product-filters.js stamps `html.rpa-pf-js`, which * collapses the non-active accordions (matching the reference's desktop look); * active facets keep `.is-open` so the visitor always sees their selection. * * Desktop (≥769px): sticky two-column sidebar. Mobile (≤768px): the sidebar is * hidden and the same #search_filters node is MOVED into a bottom-sheet * (#rpa-sheet-filters) with a two-level drill-down + a toolbar chip rail. */ /* ─────────────────────────── two-column layout ─────────────────────────── */ .rpa-archive__cols--withfilter { display: grid; grid-template-columns: 1fr; gap: var(--rpa-gap, 16px); } @media (min-width: 769px) { /* Aside is first in source order → inline-start (right in RTL), matching the reference where filters sit on the right. */ .rpa-archive__cols--withfilter { grid-template-columns: 264px minmax(0, 1fr); align-items: start; } } .rpa-archive__main { min-width: 0; } /* let the grid shrink, never overflow */ /* ─────────────────────────── filter column ─────────────────────────── */ .rpa-archive__filters-inner { position: static; } @media (min-width: 769px) { .rpa-archive__filters-inner { position: sticky; top: var(--rpa-sticky-top, 100px); max-height: calc(100vh - var(--rpa-sticky-top, 100px) - 16px); overflow-y: auto; overscroll-behavior: contain; } } .rpa-filters { border: 1px solid var(--wp--preset--color--border, #e2e4e9); border-radius: var(--wp--custom--radius--lg, 0.75rem); background: var(--wp--preset--color--base, #fff); padding: 4px 14px; } .rpa-filters__title { margin: 12px 0 4px; font-size: var(--wp--preset--font-size--base, 1rem); font-weight: var(--wp--custom--fw--strong); color: var(--wp--preset--color--contrast, #0f1115); } .rpa-filters__clear { display: inline-block; margin: 0 0 8px; font-size: var(--wp--preset--font-size--sm, 0.875rem); color: var(--wp--preset--color--primary, #0a66c2); text-decoration: none; } .rpa-filters__clear:hover { text-decoration: underline; } /* ─────────────────────────── facet section ─────────────────────────── */ .rpa-facet { border-top: 1px solid var(--wp--preset--color--border, #e2e4e9); } .rpa-filters > .rpa-facet:first-of-type { border-top: 0; } .rpa-facet__header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; padding: 14px 0; background: none; border: 0; cursor: pointer; text-align: start; color: var(--wp--preset--color--contrast, #0f1115); font: inherit; } .rpa-facet__title { font-size: var(--wp--preset--font-size--sm, 0.875rem); font-weight: var(--wp--custom--fw--strong); } .rpa-facet__chev { flex: 0 0 auto; color: var(--wp--preset--color--text-muted, #6b7280); transition: transform 0.16s ease; } .rpa-facet.is-open .rpa-facet__chev { transform: rotate(180deg); } /* Collapse the non-open accordions only once JS can re-open them. The flag lives on (set once) so it survives the AJAX sidebar swap. Scoped to the DESKTOP wrapper (#search_filters_wrapper) — NOT .rpa-filters — because on mobile the same #search_filters node is moved into the sheet, where the drill rules (not this collapse) must own panel visibility. */ html.rpa-pf-js #search_filters_wrapper .rpa-facet:not(.is-open) .rpa-facet__panel { display: none; } .rpa-facet__panel { padding-bottom: 12px; } .rpa-facet__search { margin-bottom: 8px; } .rpa-facet__search input { width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit; font-size: var(--wp--preset--font-size--sm, 0.875rem); border: 1px solid var(--wp--preset--color--border, #e2e4e9); border-radius: var(--wp--custom--radius--md, 0.5rem); background: var(--wp--preset--color--surface, #f7f7f8); } .rpa-facet__list { list-style: none; margin: 0; padding: 0; } .rpa-facet__list--scroll { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; } .rpa-facet__item { margin: 0; } /* Each value row is a single link (works no-JS; JS intercepts). */ .rpa-facet__label { display: flex; align-items: center; gap: 9px; padding: 6px 0; color: var(--wp--preset--color--text, #1a1d23); text-decoration: none; font-size: var(--wp--preset--font-size--sm, 0.875rem); cursor: pointer; } .rpa-facet__label:hover { color: var(--wp--preset--color--primary, #0a66c2); } /* Faux checkbox box. */ .rpa-facet__check { flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--wp--preset--color--border, #cfd3da); border-radius: var(--wp--custom--radius--sm, 0.25rem); position: relative; transition: border-color 0.12s, background-color 0.12s; } .rpa-facet__label.active .rpa-facet__check { background: var(--wp--preset--color--primary, #0a66c2); border-color: var(--wp--preset--color--primary, #0a66c2); } .rpa-facet__label.active .rpa-facet__check::after { content: ""; position: absolute; inset-inline-start: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .rpa-facet__label.active { color: var(--wp--preset--color--contrast, #0f1115); } /* Color swatch (color attributes). */ .rpa-facet__swatch { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); } .rpa-facet__name { flex: 1 1 auto; min-width: 0; } .magnitude { color: var(--wp--preset--color--text-muted, #6b7280); font-size: var(--wp--preset--font-size--xs, 0.75rem); } /* ─────────────────────────── availability toggle ─────────────────────────── */ .rpa-facet--avail { } .rpa-avail { display: flex; align-items: center; gap: 10px; padding: 14px 0; color: var(--wp--preset--color--contrast, #0f1115); text-decoration: none; font-size: var(--wp--preset--font-size--sm, 0.875rem); font-weight: var(--wp--custom--fw--strong); } .rpa-avail__sw { flex: 0 0 auto; width: 40px; height: 22px; border-radius: var(--wp--custom--radius--pill, 9999px); background: var(--wp--preset--color--border, #d7dade); position: relative; transition: background-color 0.15s ease; } .rpa-avail__sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; } .rpa-avail.active .rpa-avail__sw { background: var(--wp--preset--color--primary, #0a66c2); } .rpa-avail.active .rpa-avail__sw::after { transform: translateX(18px); } [dir="rtl"] .rpa-avail.active .rpa-avail__sw::after { transform: translateX(-18px); } .rpa-avail__t { flex: 1 1 auto; } /* ─────────────────────────── price facet ─────────────────────────── */ .rpa-price { display: block; } .rpa-price__row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .rpa-price__in { flex: 1 1 0; min-width: 0; box-sizing: border-box; padding: 7px 8px; font: inherit; font-size: var(--wp--preset--font-size--sm, 0.875rem); border: 1px solid var(--wp--preset--color--border, #e2e4e9); border-radius: var(--wp--custom--radius--md, 0.5rem); text-align: center; } .rpa-price__sep { color: var(--wp--preset--color--text-muted, #6b7280); font-size: var(--wp--preset--font-size--xs, 0.75rem); } .rpa-price__apply { width: 100%; padding: 8px; font: inherit; font-size: var(--wp--preset--font-size--sm, 0.875rem); font-weight: var(--wp--custom--fw--strong); color: var(--wp--preset--color--primary, #0a66c2); background: transparent; border: 1px solid var(--wp--preset--color--primary, #0a66c2); border-radius: var(--wp--custom--radius--md, 0.5rem); cursor: pointer; transition: background-color 0.12s, color 0.12s; } .rpa-price__apply:hover { background: var(--wp--preset--color--primary, #0a66c2); color: #fff; } /* Slider track placeholder — enhanced by JS later; hidden until then. */ .rpa-price__track { display: none; } /* ═══════════════════════════ mobile (≤768px) ═══════════════════════════ */ /* The whole filter UX collapses to ONE horizontal scroll rail (.rpa-fchips): sort chip + filters chip + a chip per facet group — all on one line that scrolls together. The desktop toolbar + sidebar are hidden; the sidebar's #search_filters node is MOVED into the bottom-sheet on open. */ .rpa-fchips { display: none; /* desktop: hidden (the .rpa-toolbar chips are used there) */ gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 6px 0 2px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .rpa-fchips::-webkit-scrollbar { display: none; } /* The JS facet-chip rail is transparent to layout (display:contents) so its chips become direct flex items of .rpa-fchips and scroll in the same line. */ .rpa-fchips__rail { display: contents; } @media (max-width: 768px) { .rpa-toolbar { display: none; } /* replaced by the rail */ .rpa-archive__filters { display: none; } /* facets live in the sheet */ .rpa-fchips { display: flex; } } /* Chip — shared by the sort, filters, and facet chips so borders/radius all come from the same tokens. */ .rpa-fchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; font: inherit; font-size: var(--wp--preset--font-size--sm, 0.875rem); white-space: nowrap; color: var(--wp--preset--color--text, #1a1d23); background: var(--wp--preset--color--base, #fff); border: 1px solid var(--wp--preset--color--border, #e2e4e9); /* Follow the theme/skin radius token (the active skin squares corners — so no hard-coded pill). */ border-radius: var(--wp--custom--radius--md, 0.5rem); cursor: pointer; } .rpa-fchip__ico { flex: 0 0 auto; color: var(--wp--preset--color--text-muted, #6b7280); } .rpa-fchip__c { flex: 0 0 auto; display: inline-flex; color: var(--wp--preset--color--text-muted, #6b7280); } .rpa-fchip.is-active .rpa-fchip__c { color: var(--wp--preset--color--primary, #0a66c2); } .rpa-fchip__t { line-height: 1; } .rpa-fchip--sort, .rpa-fchip--filters { font-weight: var(--wp--custom--fw--strong); color: var(--wp--preset--color--contrast, #0f1115); } .rpa-fchip.is-active { color: var(--wp--preset--color--primary, #0a66c2); border-color: var(--wp--preset--color--primary, #0a66c2); background: color-mix(in srgb, var(--wp--preset--color--primary, #0a66c2) 8%, var(--wp--preset--color--base, #fff)); } .rpa-fchip.is-active .rpa-fchip__ico { color: var(--wp--preset--color--primary, #0a66c2); } .rpa-fchip__n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--wp--custom--radius--pill, 9999px); background: var(--wp--preset--color--primary, #0a66c2); color: #fff; font-size: var(--wp--preset--font-size--xs, 0.75rem); line-height: 18px; text-align: center; } /* ───────────────────────── the filter sheet ───────────────────────── */ /* Inherits the base .rpa-sheet (fixed bottom, slide-up, ::backdrop, and the ≥769px display:none lock). Here we make it a tall flex column with a sticky head + footer and a scrollable body, and add the two drill levels. */ /* Only flex-lay-out the sheet WHEN OPEN. Setting display unconditionally would override the UA `dialog:not([open]){display:none}` and leave a permanent, empty sheet covering the page. The `dialog.…[open]` specificity (0,2,1) wins over the base `.rpa-sheet[open]` regardless of stylesheet order. */ dialog.rpa-sheet--filters[open] { display: flex; flex-direction: column; height: 90vh; max-height: 90vh; } .rpa-sheet--filters .rpa-sheet__head { flex: 0 0 auto; justify-content: flex-start; } .rpa-sheet--filters .rpa-sheet__title { text-align: start; } .rpa-mf__back { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; color: inherit; padding: 0; } .rpa-sheet--filters .rpa-sheet__body { flex: 1 1 auto; max-height: none; padding: 0 16px; } .rpa-mf__foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--wp--preset--color--border, #e2e4e9); background: var(--wp--preset--color--base, #fff); } .rpa-mf__clear { flex: 0 0 auto; padding: 0 16px; height: 46px; font: inherit; font-size: var(--wp--preset--font-size--sm, 0.875rem); color: var(--wp--preset--color--text, #1a1d23); background: transparent; border: 1px solid var(--wp--preset--color--border, #e2e4e9); border-radius: var(--wp--custom--radius--md, 0.5rem); cursor: pointer; } .rpa-mf__clear:disabled { opacity: 0.45; cursor: default; } .rpa-mf__apply { flex: 1 1 auto; height: 46px; font: inherit; font-size: var(--wp--preset--font-size--base, 1rem); font-weight: var(--wp--custom--fw--strong); color: #fff; background: var(--wp--preset--color--primary, #0a66c2); border: 0; border-radius: var(--wp--custom--radius--md, 0.5rem); cursor: pointer; } /* Inside the sheet the facet column has no card chrome (it fills the body). */ .rpa-sheet--filters .rpa-filters { border: 0; border-radius: 0; padding: 0; } .rpa-sheet--filters .rpa-filters__title { display: none; } /* sheet head shows it */ .rpa-sheet--filters .rpa-filters__clear { display: none; } /* footer has clear-all */ /* ── Level 1: list of groups (headers as rows, panels hidden) ── */ .rpa-sheet--filters:not(.rpa-sheet--drilled) .rpa-facet > .rpa-facet__panel { display: none; } .rpa-sheet--filters .rpa-facet { border-top: 1px solid var(--wp--preset--color--border, #e2e4e9); } .rpa-sheet--filters .rpa-facet__header { padding: 16px 0; } .rpa-facet__summary { margin-inline-start: auto; padding-inline: 8px; font-size: var(--wp--preset--font-size--xs, 0.75rem); font-weight: var(--wp--custom--fw--base); color: var(--wp--preset--color--text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; } /* Level-1 chevron points to the inline-start (drill affordance), not down. */ .rpa-sheet--filters:not(.rpa-sheet--drilled) .rpa-facet__chev { transform: rotate(90deg); } [dir="rtl"] .rpa-sheet--filters:not(.rpa-sheet--drilled) .rpa-facet__chev { transform: rotate(-90deg); } /* ── Level 2: one drilled group (its panel only, header hidden) ── */ .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet:not(.is-drilled) { display: none; } .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet.is-drilled > .rpa-facet__header { display: none; } .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet.is-drilled > .rpa-facet__panel { display: block; } .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet.is-drilled .rpa-facet__list--scroll { max-height: none; } .rpa-sheet--filters .rpa-facet__search { position: sticky; top: 0; background: var(--wp--preset--color--base, #fff); padding-top: 8px; z-index: 1; } /* Lock body scroll behind the open sheet. */ html.rpa-mf-lock { overflow: hidden; }