/*
* RahkarTheme — Phase 4 faceted-search skin.
*
* The WP product-archive block had NO faceted filters (sort only), so there is
* no verbatim WP source for this surface. This file is the net-new rpa skin that
* "covers" PrestaShop's ps_facetedsearch UI (left-column filters + active-filter
* chips) in the rahkar design language — keyed off the same --wp--preset--*
* design tokens (Phase 1.2) the rest of the theme uses. We never rebuild the
* faceting itself; the module's data, links (.js-search-link / [data-search-url])
* and slider hooks (.faceted-slider) are preserved 1:1 by the template override.
*
* Kept separate from the verbatim product-archive.css so that file stays a pure
* byte-copy of the WP block style.
*/
/* ═══════════════════════ archive layout (2026 refresh) ═══════════════════════
The category/archive page is now a SINGLE full-width content column whose
inner layout we own (product-list.tpl overrides the side-column blocks):
┌────────────────────────────────────────────────────────┐
│ .rpa-catnav (full-width horizontal category strip) │
├──────────────────────────────┬─────────────────────────┤
│ .rpa-archive__main (grid) │ .rpa-archive__filters │ ← RTL: filters
│ ← inline-start (LEFT) │ inline-end (RIGHT) │ on the right
├──────────────────────────────┴─────────────────────────┤
│ .rpa-terminfo (title + description, full width) │
└────────────────────────────────────────────────────────┘
In RTL a CSS-grid's first track maps to the inline-start (visual RIGHT), so the
filter aside (first in DOM) lands on the right and the grid on the left exactly
as required — no explicit ordering needed. */
.rpa-archive__cols { min-width: 0; }
.rpa-archive__cols--withfilter {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.rpa-archive__main { min-width: 0; }
/* Sticky filter column (desktop): the aside follows the scroll so the filters
stay reachable while paging a long grid. The grid container already sets
`align-items: start`, which is what lets a single tall track stick. The top
offset clears the sticky site header — rpa-listing.js measures #header at
runtime and writes the exact value into --rpa-sticky-top (re-measured on
resize), so this never guesses the header height; the 120px is just the
pre-JS fallback. max-height + overflow keeps a very tall filter list
scrollable within the viewport instead of overflowing it. */
@media (min-width: 992px) {
.rpa-archive__filters {
position: sticky;
top: var(--rpa-sticky-top, 120px);
align-self: start;
max-height: calc(100vh - var(--rpa-sticky-top, 120px) - 16px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.rpa-archive__filters::-webkit-scrollbar { width: 8px; }
.rpa-archive__filters::-webkit-scrollbar-thumb {
background: var(--wp--preset--color--border, #d8dbe0);
border-radius: 999px;
}
}
/* The filter aside reserves its track only on desktop. On mobile the whole
column stacks and the facet panel becomes a toggled fixed sheet (its only
child, #search_filters_wrapper, is .hidden-sm-down → display:none until the
mobile filter button strips that class), so it occupies zero flow space. */
@media (max-width: 991px) {
.rpa-archive__cols--withfilter { display: block; }
}
/* Bottom term info (title + long description), full width under both columns. */
.rpa-archive #js-product-list-header {
margin-block-start: 32px;
}
.rpa-archive #js-product-list-header + #js-product-list-footer .rpa-terminfo,
.rpa-archive #js-product-list-footer .rpa-terminfo {
margin-block-start: 12px;
}
/* ── Page head (Digikala-style) ──────────────────────────────────────────────
Desktop: breadcrumb on top, then the title. (no back button)
Mobile: [title ········· ←] row on top, breadcrumb below it.
The head owns the gap below the sticky header so the crumb/title never butt
against it. DOM order is [titlerow, breadcrumb]; desktop re-orders the crumb
above the title with `order:-1`. */
.rpa-archive__head {
display: flex;
flex-direction: column;
padding-block-start: 22px;
}
.rpa-archive__titlerow {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Title sits tight (override the 32px top margin the same #js-product-list-header
rule above uses for its old below-grid position; same specificity, later in
source → wins). */
.rpa-archive__head #js-product-list-header {
margin-block-start: 0;
min-width: 0;
}
.rpa-archive__head .rpa-terminfo__title {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rpa-archive__head .breadcrumb {
padding-top: 0;
margin: 0;
}
/* Back button — hidden by default (desktop); revealed on mobile below. */
.rpa-archive__back { display: none; }
/* Desktop: breadcrumb ABOVE the title. */
@media (min-width: 992px) {
.rpa-archive__head .breadcrumb { order: -1; margin-block-end: 6px; }
}
/* Mobile: title + back-arrow row, then the breadcrumb under it. */
@media (max-width: 991px) {
.rpa-archive__head .rpa-terminfo__title { font-size: 1.125rem; }
.rpa-archive__head .breadcrumb { margin-block-start: 8px; }
.rpa-archive__back {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
order: -1; /* lead the title: sit at the inline-start (right in RTL), right before it */
margin-inline-end: 2px; /* small gap to the title (titlerow gap adds the rest) */
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--wp--preset--color--contrast, #0f1115);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.rpa-archive__back:active { background: var(--wp--preset--color--surface, #f1f2f4); }
}
/* ═══════════════════════ horizontal category strip ═══════════════════════
Ported from the WP rahkar/products-slider block (.rps-*): a horizontal
scroll-snap rail on BOTH desktop and mobile, with arrow buttons as a
progressive enhancement (rpa-listing.js, RTL-safe via scrollIntoView). */
.rpa-catnav {
--catnav-media: 132px; /* tile image box (desktop — large + prettier) */
--catnav-w: 142px; /* item slot width (centres the media + wraps the title) */
--catnav-gap: 8px; /* tighter spacing between tiles */
/* Top margin keeps the strip from butting against the header; bottom margin
separates it from the toolbar/grid below. */
margin-block: 14px 24px;
}
.rpa-catnav__frame { position: relative; }
.rpa-catnav__track {
display: flex;
gap: var(--catnav-gap);
list-style: none;
margin: 0;
padding: 4px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.rpa-catnav__track::-webkit-scrollbar { display: none; }
.rpa-catnav__item {
flex: 0 0 var(--catnav-w);
min-width: 0;
scroll-snap-align: start;
}
.rpa-catnav__link {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--wp--preset--color--text, #1a1d23);
}
.rpa-catnav__media {
width: var(--catnav-media);
height: var(--catnav-media);
margin-inline: auto;
border-radius: 20px;
overflow: hidden;
background: var(--wp--preset--color--surface, #f5f6f8);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
display: grid;
place-items: center;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rpa-catnav__img {
width: 100%;
height: 100%;
object-fit: cover; /* fill the tile — cleaner, Digikala-style */
display: block;
}
.rpa-catnav__ph {
color: var(--wp--preset--color--text-muted, #aeb4bf);
}
.rpa-catnav__ph .material-icons { font-size: 46px; }
.rpa-catnav__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
/* Smaller + tidier + DARK (was primary-blue, which read like a link and
shouted over the product grid). Now a calm, compact label. */
font-size: 0.75rem;
line-height: 1.35;
font-weight: var(--rh-fw-base);
color: var(--wp--preset--color--text, #1a1d23);
}
.rpa-catnav__link:hover .rpa-catnav__media {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* Active = the current leaf among its siblings. */
.rpa-catnav__item.is-active .rpa-catnav__media {
box-shadow: 0 0 0 2px var(--wp--preset--color--primary, #0a66c2);
}
.rpa-catnav__item.is-active .rpa-catnav__title {
font-weight: var(--rh-fw-strong);
}
/* Arrow buttons — pinned over the rail edges; flip automatically in RTL via
logical inset properties. Hidden via opacity at the rail extremes (set by JS). */
.rpa-catnav__arrow {
position: absolute;
top: calc(var(--catnav-media) / 2 + 4px);
transform: translateY(-50%);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
color: var(--wp--preset--color--contrast, #0f1115);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
cursor: pointer;
z-index: 2;
transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.rpa-catnav__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.rpa-catnav__arrow:active { transform: translateY(-50%) scale(0.95); }
.rpa-catnav__arrow:focus-visible {
outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
outline-offset: 2px;
}
.rpa-catnav__arrow[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.rpa-catnav__arrow--prev { inset-inline-start: -6px; }
.rpa-catnav__arrow--next { inset-inline-end: -6px; }
@media (max-width: 782px) {
.rpa-catnav { --catnav-media: 92px; --catnav-w: 100px; --catnav-gap: 8px; margin-block-end: 14px; }
.rpa-catnav__arrow { width: 36px; height: 36px; }
}
/* Phones: size each tile as a fraction of the rail's own width so ~3.5 tiles
peek past the edge — the half-cut tile makes it obvious the strip scrolls.
The fraction is taken of the flex track's inner width (NOT the viewport), so
it's independent of the page's side padding: between 3.5 tiles there are 3
visible gaps, hence `(100% − 3×gap) / 3.5`. The tile image goes fluid (square)
to fill its slot, and arrows give way to swipe at this size. */
@media (max-width: 600px) {
.rpa-catnav { --catnav-gap: 10px; }
.rpa-catnav__item { flex-basis: calc((100% - 30px) / 3.5); }
.rpa-catnav__media {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 16px;
}
.rpa-catnav__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.rpa-catnav__track { scroll-behavior: auto; }
}
/* ───────────────── mobile filter toggle button (toolbar) ─────────────────
The "فیلترها" button only opens the off-canvas filter sheet on mobile. On
desktop the filters live in the sidebar, so the button must NOT show. Mirrors
the sort trigger's hidden-on-desktop / pill-on-mobile pattern. */
.rpa-filter-btn { display: none; }
@media (max-width: 991px) {
.rpa-filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding-inline: 12px;
border: 1px solid var(--wp--preset--color--border, #e2e4e9);
border-radius: 8px;
background: var(--wp--preset--color--base, #fff);
font: inherit;
font-size: 0.875rem;
font-weight: var(--rh-fw-strong);
color: inherit;
cursor: pointer;
}
.rpa-filter-btn .material-icons { font-size: 18px; }
}
/* Active-groups badge on the filter button. */
.rpa-filter-btn__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding-inline: 5px;
border-radius: 999px;
background: var(--wp--preset--color--primary, #0a66c2);
color: #fff;
font-size: 0.6875rem;
font-weight: var(--rh-fw-strong);
line-height: 1;
}
/* ───────────────── Digikala-style filter chip line (mobile) ─────────────────
ONE horizontally scrollable line: مرتبسازی → فیلترها → a chip per facet group.
Everything scrolls together; nothing is pinned. Desktop uses the sidebar +
.rpa-toolbar, so this whole line is mobile-only. */
.rpa-fchips { display: none; }
@media (max-width: 991px) {
/* The desktop toolbar (sort chips + count) is replaced by the chip line. */
.rpa-toolbar { display: none; }
.rpa-fchips {
display: flex;
align-items: center;
gap: 8px;
/* Balanced breathing room: a small gap above (the catnav already sits
above it) and a clear gap below before the product grid — previously
it had a large top gap and none at the bottom. */
margin-block: 8px 14px;
max-width: 100%;
/* the single scroll container — sort + filter + facet chips scroll as one */
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.rpa-fchips::-webkit-scrollbar { display: none; }
/* Holds the JS-built facet chips; flows inline within the scroll line (it is
NOT a separate scroller — everything moves together). */
.rpa-fchips__rail {
flex: 0 0 auto;
display: flex;
gap: 8px;
}
.rpa-fchips__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding-inline: 5px;
border-radius: 999px;
background: var(--wp--preset--color--primary, #0a66c2);
color: #fff;
font-size: 0.6875rem;
font-weight: var(--rh-fw-strong);
line-height: 1;
}
}
.rpa-fchip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
height: 38px;
padding-inline: 12px;
border: 1px solid var(--wp--preset--color--border, #e2e4e9);
border-radius: 10px;
background: var(--wp--preset--color--base, #fff);
color: var(--wp--preset--color--text, #1a1d23);
font: inherit;
font-size: 0.8125rem;
font-weight: var(--rh-fw-base);
white-space: nowrap;
cursor: pointer;
}
/* «فیلترها» chip — primary accent + filter icon. */
.rpa-fchip--all {
border-color: var(--wp--preset--color--primary, #0a66c2);
color: var(--wp--preset--color--primary, #0a66c2);
font-weight: var(--rh-fw-strong);
}
.rpa-fchip--all .material-icons { font-size: 18px; }
/* «مرتبسازی» chip — neutral, slightly bolder. */
.rpa-fchip--sort { font-weight: var(--rh-fw-strong); }
.rpa-fchip__c { font-size: 18px; color: var(--wp--preset--color--text-muted, #5b6271); margin-inline-start: -2px; }
.rpa-fchip__n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding-inline: 4px;
border-radius: 999px;
background: var(--wp--preset--color--primary, #0a66c2);
color: #fff;
font-size: 0.625rem;
font-weight: var(--rh-fw-strong);
line-height: 1;
}
/* Active group: tinted chip. */
.rpa-fchip.is-active {
border-color: var(--wp--preset--color--primary, #0a66c2);
color: var(--wp--preset--color--primary, #0a66c2);
background: color-mix(in srgb, var(--wp--preset--color--primary, #0a66c2) 8%, #fff);
font-weight: var(--rh-fw-strong);
}
.rpa-fchip.is-active .rpa-fchip__c { color: var(--wp--preset--color--primary, #0a66c2); }
/* ───────────────────────── desktop panel (left column) ───────────────────────── */
#search_filters {
background: var(--wp--preset--color--base, #fff);
border: 1px solid var(--wp--preset--color--border, #e2e4e9);
border-radius: 12px;
padding: 16px;
}
#search_filters .clear-all-wrapper {
margin-block-end: 12px;
}
.js-search-filters-clear-all {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
border: 0;
background: transparent;
color: var(--wp--preset--color--primary, #0a66c2);
font: inherit;
font-size: 0.875rem;
font-weight: var(--rh-fw-strong);
cursor: pointer;
}
.js-search-filters-clear-all:hover { color: var(--wp--preset--color--primary-dark, #074a8d); }
.js-search-filters-clear-all .material-icons { font-size: 18px; }
/* Panel heading ("فیلترها"). */
#search_filters > .h6:first-child,
#search_filters .facets-title {
margin: 0 0 12px;
font-size: 1rem;
font-weight: var(--rh-fw-strong);
color: var(--wp--preset--color--contrast, #0f1115);
}
/* ───────────────────────── facet accordion (Digikala-style) ─────────────────
Each facet group is a header button + a collapsible panel. CLOSED by default;
.is-open (set server-side when a filter is active, or toggled by rpa-listing.js)
reveals the panel. */
.rpa-facet {
border-top: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rpa-facet:first-of-type { border-top: 0; }
.rpa-facet__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 14px 0;
margin: 0;
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
text-align: start;
color: var(--wp--preset--color--contrast, #0f1115);
}
.rpa-facet__title {
font-size: 0.9375rem;
font-weight: var(--rh-fw-strong);
}
.rpa-facet__chev {
flex: 0 0 auto;
font-size: 22px;
color: var(--wp--preset--color--text-muted, #5b6271);
transition: transform 0.2s ease;
}
.rpa-facet.is-open .rpa-facet__chev { transform: rotate(180deg); }
.rpa-facet__panel { display: none; padding-bottom: 14px; }
.rpa-facet.is-open > .rpa-facet__panel { display: block; }
/* Per-facet search box. */
.rpa-facet__search {
position: relative;
margin-bottom: 10px;
}
/* The icon sits on the RIGHT (the input's larger padding is on that same side, so
the text never runs under it). We use the PHYSICAL `right` here on purpose:
`.material-icons` forces `direction: ltr` on this element (for its glyph), and a
logical `inset-inline-start` resolves against the element's OWN direction — so on
an ltr icon it would compute to the LEFT and collide with the text. Physical
`right` is direction-proof for this RTL filter panel. */
.rpa-facet__search-icon {
position: absolute;
right: 12px;
left: auto;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: var(--wp--preset--color--text-muted, #9aa1ad);
pointer-events: none;
}
.rpa-facet__search-input {
width: 100%;
height: 38px;
padding-inline: 38px 14px; /* start (right): clears the icon · end (left): text breathing room */
border: 1px solid var(--wp--preset--color--border, #e2e4e9);
border-radius: 10px;
background: var(--wp--preset--color--surface, #f7f7f8);
font: inherit;
font-size: 0.875rem;
color: var(--wp--preset--color--text, #1a1d23);
text-align: start;
}
.rpa-facet__search-input:focus {
outline: 0;
border-color: var(--wp--preset--color--primary, #0a66c2);
background: var(--wp--preset--color--base, #fff);
}
/* Bounded + scrollable option list. */
.rpa-facet__list--scroll {
max-height: 240px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
padding-inline-end: 4px;
}
.rpa-facet__list--scroll::-webkit-scrollbar { width: 8px; }
.rpa-facet__list--scroll::-webkit-scrollbar-thumb {
background: var(--wp--preset--color--border, #d8dbe0);
border-radius: 999px;
}
/* ───────────────────── availability — "کالاهای موجود" toggle ─────────────────
Redesigned from the default browser checkbox (which looked cheap) into a clean
pill-card row with a custom toggle switch, in the theme's design language. The
markup is unchanged (label > span.custom-checkbox > input[checkbox] + icon span,
then the .rpa-avail__link text) — we drive the whole switch from CSS using the
real , so the AJAX filter hooks (data-search-url / .js-search-link) keep
working untouched and the control degrades to a native checkbox without JS. */
.rpa-facet--avail {
border-top: 0;
margin-block-end: 14px;
}
.rpa-avail {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
margin: 0;
cursor: pointer;
border-radius: 12px;
background: var(--wp--preset--color--surface, #f7f7f8);
font-size: 0.9375rem;
font-weight: var(--rh-fw-strong);
color: var(--wp--preset--color--contrast, #0f1115);
transition: background-color 0.15s ease;
}
.rpa-avail:hover { background: var(--wp--preset--color--muted, #eceef1); }
/* Label text sits first (inline-start / right in RTL); the switch is pushed to
the inline-end by the link's flex-grow. */
.rpa-avail__link {
order: -1;
color: inherit;
text-decoration: none;
flex: 1 1 auto;
}
.rpa-avail__link:hover { color: inherit; text-decoration: none; }
/* Hide the default checkmark-icon span; the input itself becomes the switch. */
.rpa-avail .custom-checkbox { display: inline-flex; flex: 0 0 auto; }
/* Hide the classic fake-checkbox span (the switch IS the input). Two sheets fight
to SHOW this span at (0,3,2): the bundled classic base, AND our own theme-wide
checkbox restyle in classic-overrides.css (`.custom-checkbox input+span:not(.color)
{display:inline-flex}`, which loads LAST at priority 200). A plain
`.rpa-facet--avail …+span` (0,3,2) ties the latter and LOSES on source order —
that re-showed the empty square next to the switch. Prefixing with the
`#search_filters` ID lifts this to (1,3,2) so it beats every (0,3,2) rule no
matter the load order. */
#search_filters .rpa-facet--avail .custom-checkbox input[type="checkbox"] + span { display: none; }
/* The switch — built on the native checkbox via appearance:none so it stays a
real, accessible, keyboard-focusable control. Knob position uses the logical
inset-inline-start so it slides the correct way in RTL with no JS.
CRITICAL: the bundled classic base ships `.custom-checkbox input[type=checkbox]`
(0,2,1) with `opacity:0; position:absolute; width:18px` to hide the native box.
That has the SAME specificity as a bare `.rpa-facet--avail input[type=checkbox]`,
so source order let it win and the switch never showed (the fake square did).
Prefixing with `.custom-checkbox` raises every switch rule to (0,3,1)+ so it
reliably beats the classic rule — and `opacity:1` undoes its hide. */
.rpa-facet--avail .custom-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
width: 42px;
height: 24px;
margin: 0;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--border, #d3d7de);
opacity: 1;
cursor: pointer;
transition: background-color 0.18s ease;
}
.rpa-facet--avail .custom-checkbox input[type="checkbox"]::before {
content: "";
position: absolute;
top: 3px;
inset-inline-start: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: inset-inline-start 0.18s ease;
}
.rpa-facet--avail .custom-checkbox input[type="checkbox"]:checked {
background: var(--wp--preset--color--primary, #0a66c2);
}
.rpa-facet--avail .custom-checkbox input[type="checkbox"]:checked::before {
inset-inline-start: calc(100% - 21px);
}
.rpa-facet--avail .custom-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
outline-offset: 2px;
}
/* ───────────────────────── filter list items ───────────────────────── */
.rpa-facet__list {
list-style: none;
margin: 0;
padding: 0;
}
.rpa-facet__list li { margin: 0; }
.rpa-facet__label,
.facet-label {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
margin: 0;
cursor: pointer;
font-size: 0.875rem;
color: var(--wp--preset--color--text, #1a1d23);
}
/* The link fills the row beside the control; text-align:start (= right in RTL)
keeps the label tight against its control. Kept as a plain block (NOT a flex
container) so a short label like "بژ" still hugs the control instead of being
pulled to the far edge. */
.rpa-facet__label .search-link,
.facet-label .search-link {
flex: 0 1 auto; /* sit right next to the control; don't stretch across the row */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
text-decoration: none;
text-align: start;
}
.rpa-facet__label:hover .search-link { color: var(--wp--preset--color--primary, #0a66c2); }
.facet-label.active .search-link { font-weight: var(--rh-fw-strong); color: var(--wp--preset--color--contrast, #0f1115); }
/* Option count — a muted number just after the label. */
.rpa-facet__label .magnitude,
.facet-label .magnitude {
margin-inline-start: 4px;
color: var(--wp--preset--color--text-muted, #5b6271);
font-size: 0.8125rem;
}
/* ── Custom checkbox / radio (clean, token-based, RTL-safe) ───────────────────
The classic base (theme.css) draws these as grey #979797 boxes positioned
with physical left / margin-right / text-align:left — that is exactly the
"ugly + not-RTL" look in the filter column. We rebuild them from the
template's own .custom-checkbox / .custom-radio spans into rounded,
primary-accent controls using design tokens and logical properties.
Scope: every rule is keyed under `#search_filters .rpa-facet__label` so it
(a) reliably out-specifies the single-class classic rules (the ID makes
every rule (1,x,x), so no per-rule specificity gymnastics), and
(b) stays on the FACET OPTION rows only — the availability toggle
(.rpa-avail, a CSS switch built from the same .custom-checkbox markup)
carries .facet-label but NOT .rpa-facet__label, so it is left untouched.
The native stays in the DOM (opacity:0, overlaid, focusable) so
ps_facetedsearch's data-search-url change hook keeps firing — we only restyle. */
/* Wrapper — a fixed 20px box; drop the classic border/background/abs-positioning. */
#search_filters .rpa-facet__label .custom-checkbox,
#search_filters .rpa-facet__label .custom-radio {
position: relative;
display: inline-flex;
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
background: none;
border: 0;
}
/* Native input overlays the control: invisible, clickable, keyboard-focusable. */
#search_filters .rpa-facet__label .custom-checkbox input[type="checkbox"],
#search_filters .rpa-facet__label .custom-radio input[type="radio"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
/* Visible box / circle = the span immediately after the input (not a swatch). */
#search_filters .rpa-facet__label .custom-checkbox > span:not(.color),
#search_filters .rpa-facet__label .custom-radio > span {
position: static;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin: 0;
background: var(--wp--preset--color--base, #fff);
border: 1.5px solid var(--wp--preset--color--border, #d3d7de);
box-shadow: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
#search_filters .rpa-facet__label .custom-checkbox > span:not(.color) { border-radius: 6px; }
#search_filters .rpa-facet__label .custom-radio > span { border-radius: 50%; }
#search_filters .rpa-facet__label .custom-checkbox:hover > span:not(.color),
#search_filters .rpa-facet__label .custom-radio:hover > span {
border-color: var(--wp--preset--color--primary, #0a66c2);
}
/* Checkbox tick — fades in on :checked (overrides the classic display toggle). */
#search_filters .rpa-facet__label .custom-checkbox .checkbox-checked {
display: block;
margin: 0;
font-size: 15px;
line-height: 1;
color: #fff;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.12s ease, transform 0.12s ease;
}
#search_filters .rpa-facet__label .custom-checkbox input[type="checkbox"]:checked + span:not(.color) {
background: var(--wp--preset--color--primary, #0a66c2);
border-color: var(--wp--preset--color--primary, #0a66c2);
}
#search_filters .rpa-facet__label .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
opacity: 1;
transform: scale(1);
}
/* Radio dot — centred, scales in on :checked. */
#search_filters .rpa-facet__label .custom-radio > span::after {
content: "";
position: absolute;
top: 50%;
left: 50%; /* centred dot — symmetric, so RTL-agnostic */
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wp--preset--color--primary, #0a66c2);
transform: translate(-50%, -50%) scale(0.4);
opacity: 0;
transition: opacity 0.12s ease, transform 0.12s ease;
}
#search_filters .rpa-facet__label .custom-radio input[type="radio"]:checked + span {
border-color: var(--wp--preset--color--primary, #0a66c2);
}
#search_filters .rpa-facet__label .custom-radio input[type="radio"]:checked + span::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Keyboard focus ring driven by the real input. */
#search_filters .rpa-facet__label .custom-checkbox input:focus-visible + span,
#search_filters .rpa-facet__label .custom-radio input:focus-visible + span {
outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
outline-offset: 2px;
}
/* Color / texture swatches — round, with a primary ring when selected. */
#search_filters .rpa-facet__label .custom-checkbox > span.color {
position: static;
flex: 0 0 auto;
display: inline-block;
width: 20px;
height: 20px;
margin: 0;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.12);
background-size: cover;
background-position: center;
box-shadow: none;
transition: box-shadow 0.15s ease;
}
#search_filters .rpa-facet__label .custom-checkbox:hover > span.color {
box-shadow: 0 0 0 2px var(--wp--preset--color--base, #fff),
0 0 0 3px var(--wp--preset--color--border, #d3d7de);
}
#search_filters .rpa-facet__label .custom-checkbox input[type="checkbox"]:checked + span.color {
box-shadow: 0 0 0 2px var(--wp--preset--color--base, #fff),
0 0 0 4px var(--wp--preset--color--primary, #0a66c2);
}
/* ── Neutralize ps_facetedsearch's own front.css ─────────────────────────────
The module ships modules/ps_facetedsearch/views/dist/front.css with rules keyed
on `#search_filters .facet .facet-label …` that fight this skin:
• .facet-label { text-align:left } → labels jump LEFT (wrong in RTL)
• .facet-label a { width:calc(100% - 30px) } → the takes a fixed width,
leaving a stray gap to the control
• .facet-label .custom-* { top:-7px } → knocks the radios/checkboxes up
Our template carries the rpa-* classes ALONGSIDE the module's .facet/.facet-label,
so we chain BOTH names to out-specify the module's (1,3,0)/(1,4,0) selectors and
undo each conflicting property. (We can't edit the module per the theme rules, so
this is the sanctioned CSS-reskin override.) */
#search_filters .facet.rpa-facet .facet-label.rpa-facet__label {
text-align: start; /* RTL start = right */
}
#search_filters .facet.rpa-facet .facet-label.rpa-facet__label .search-link {
width: auto; /* drop the fixed calc() width → flex sizes it next to the control */
}
#search_filters .facet.rpa-facet .facet-label.rpa-facet__label .custom-checkbox,
#search_filters .facet.rpa-facet .facet-label.rpa-facet__label .custom-radio {
top: 0; /* undo top:-7px → control stays centred in the flex row */
}
/* Dropdown facet (rare). */
.facet-dropdown .select-title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 12px;
border: 1px solid var(--wp--preset--color--border, #e2e4e9);
border-radius: 8px;
background: var(--wp--preset--color--base, #fff);
cursor: pointer;
font-size: 0.875rem;
}
/* ───────────────────────── price/weight slider ───────────────────────── */
.faceted-slider { padding: 4px 0 8px; }
.faceted-slider p { margin: 0 0 12px; font-size: 0.875rem; color: var(--wp--preset--color--text, #1a1d23); }
.ui-slider {
position: relative;
height: 4px;
background: var(--wp--preset--color--border, #e2e4e9);
border-radius: 999px;
margin: 10px 6px;
}
.ui-slider .ui-slider-range {
position: absolute;
height: 100%;
background: var(--wp--preset--color--primary, #0a66c2);
border-radius: 999px;
}
.ui-slider .ui-slider-handle {
position: absolute;
top: 50%;
width: 16px;
height: 16px;
margin-left: -8px;
transform: translateY(-50%);
background: var(--wp--preset--color--base, #fff);
border: 2px solid var(--wp--preset--color--primary, #0a66c2);
border-radius: 50%;
cursor: grab;
}
/* ───────────────────────── active-filter chips ───────────────────────── */
#js-active-search-filters.hide { display: none; }
#js-active-search-filters .active-filter-title {
margin: 0 0 8px;
font-size: 0.875rem;
font-weight: var(--rh-fw-strong);
color: var(--wp--preset--color--text-muted, #5b6271);
}
#js-active-search-filters ul {
list-style: none;
margin: 0 0 var(--rpa-gap, 16px);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#js-active-search-filters .filter-block {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding-inline: 12px;
border-radius: 9999px;
background: var(--wp--preset--color--muted, #eceef1);
color: var(--wp--preset--color--text, #1a1d23);
font-size: 0.8125rem;
}
#js-active-search-filters .filter-block a {
display: inline-flex;
color: var(--wp--preset--color--text-muted, #5b6271);
text-decoration: none;
}
#js-active-search-filters .filter-block a:hover { color: var(--wp--preset--color--contrast, #0f1115); }
#js-active-search-filters .filter-block .material-icons { font-size: 16px; }
/* ═══════════════════════ mobile filter bottom-sheet (Digikala-style) ═══════════
The toolbar "فیلترها" button opens #rpa-sheet-filters (a