/* * 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 (2027 refresh) ═══════════════════════ The category/archive page is a SINGLE full-width content column whose inner layout we own (product-list.tpl overrides the side-column blocks). Desktop stacks filters ABOVE the grid, as a horizontal row of per-facet dropdown pills — not beside it, and not behind a fixed "open filters" button: ┌────────────────────────────────────────────────────────┐ │ .rpa-catnav (full-width horizontal category strip) │ ├────────────────────────────────────────────────────────┤ │ .rpa-archive__filters (فیلتر · Collection ▾ · Type ▾ …) │ ├────────────────────────────────────────────────────────┤ │ .rpa-archive__main (the product grid) │ ├────────────────────────────────────────────────────────┤ │ .rpa-terminfo (title + description, full width) │ └────────────────────────────────────────────────────────┘ Below 992px the two stack in DOM order too, but .rpa-archive__filters itself renders empty (mobile uses the fchips bar + bottom-sheet instead — see the "horizontal filter toolbar" section further down for the desktop pill/dropdown rules, and the "Digikala-style filter chip line" section for mobile). */ .rpa-archive__cols { min-width: 0; } /* Base = mobile: a plain stack (filters row above, empty on mobile; the grid below). The desktop media query further down turns this into a flex column with its own gap; nothing here needs its own display/gap since block-level children already stack with no extra rule. */ .rpa-archive__cols--withfilter { min-width: 0; } .rpa-archive__main { min-width: 0; } /* Desktop's own layout for .rpa-archive__filters (a horizontal row of per-facet dropdown pills, not a sticky sidebar any more) lives further down, in the "horizontal filter toolbar" section — kept together with the pill/dropdown rules it depends on rather than split across two places in this file. */ /* On mobile the whole column stacks and the facet panel becomes a toggled fixed sheet (#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 (2027 refresh) ──────────────────────────────────────────────── [back + breadcrumb] row, THEN the title row — archive_header is empty on every listing type except category, and category no longer puts anything there either (its title lives in the centered hero band further down, category-hero.tpl); .rpa-archive__titlerow is kept as an empty slot rather than removed, in case a future listing type wants archive_header again. The head owns the gap below the sticky header so the crumb never butts against it. Breadcrumb stays START-aligned (not centered) even under a centered hero title below it — a breadcrumb trail is read start-to-end from a fixed edge; centering it would make that scan harder for no real gain, while the hero's title is centered on purpose as a one-off display heading, not something a visitor scans through. */ .rpa-archive__head { display: flex; flex-direction: column; padding-block-start: 22px; } .rpa-archive__crumbrow { display: flex; align-items: center; gap: 4px; min-width: 0; } .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; } /* Category's H1 lives in the hero band instead (category-hero.tpl), not the head — same #js-product-list-header id, same stray 32px top margin to cancel, or the hero's own padding (clamp(28px,5vw,48px)) becomes lopsided: 32px extra on top, none on the bottom. .rpa-cat-hero__title already sets margin:0, but that rule's lower specificity (one class vs. class+id) loses to the 32px rule above — this one matches it. */ .rpa-cat-hero #js-product-list-header { margin-block-start: 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 — MOBILE ONLY (a listing page reachable by a normal tap-through always has a page to go back TO; desktop has no equivalent "back to the previous screen" gesture users reach for the same way). Lives in the header row now (header.tpl, .rh-zone--start, next to the hamburger), server- rendered there directly for every $rc.page_name listing controller — it used to render inside .rpa-archive__crumbrow (product-list.tpl) and get JS-moved up here after load, which flashed in that old spot for a moment first on anything slower than an instant paint; rendering it in its final place from the start removes that flash entirely. This file still owns its styling (the button is still conceptually "the listing page's", just physically in header markup). */ .rpa-archive__back { display: none; } @media (max-width: 991px) { .rpa-archive__back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; /* Matches .rh-toggle (header.css) — same row, same tap-target size. */ min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rpa-archive__back:active { background: var(--wp--preset--color--surface, #f1f2f4); } .rpa-archive__head .rpa-terminfo__title { font-size: 1.125rem; } /* .rh-zone--start's own gap (header.css) is 20px — sized for the desktop split-mode's multi-link nav, not two adjacent 40px icon buttons, which it left looking oddly far apart. Scoped to the mobile row so that desktop layout is untouched. */ .rh-row--mobile .rh-zone--start { gap: 2px; } } /* ═══════════════════════ 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; } /* Edge-to-edge, split exactly 50/50 between «فیلترها» and «مرتب‌سازی» — the classic full-bleed trick (identical to .rh-home/.rh-hero in home-hero.css) pulls it out to the viewport edges regardless of the page gutter around it, and `display: grid` with two 1fr tracks is what makes the two buttons share the width equally. The dialog + the (hidden) facet rail are also children of this container but both render `display: none` when inactive, so neither one claims a grid track — only the two buttons do. */ /* Sticky under the header on scroll — same --rpa-sticky-top rpa-listing.js already measures for the desktop bar (setStickyTop()); an opaque background is what makes it read as "stuck" rather than the grid just scrolling underneath a transparent line. position:sticky's stick RANGE is bounded by the element's own PARENT box, not the page — and .rpa-fchips's real parent, #js-product-list-top, is a thin toolbar wrapper exactly as tall as .rpa-fchips itself (its other child, .rpa-toolbar, is display:none on mobile). With zero extra height in that parent there was zero room to stick in: it unstuck again within a couple of scrolled pixels and just scrolled away with the rest of the page — no visual difference from not being sticky at all. Taking the wrapper out of the box tree (display:contents) promotes .rpa-fchips to a layout child of #products.rpa instead, which spans the entire grid — the room it actually needs. Core still finds #js-product-list-top by id for its AJAX replaceWith() regardless of its display value. */ #js-product-list-top { display: contents; } .rpa-fchips { display: grid; grid-template-columns: 1fr 1fr; width: 100vw; margin-inline: calc(50% - 50vw); margin-block: 8px 16px; position: sticky; top: var(--rpa-sticky-top, 60px); z-index: 25; background: var(--wp--preset--color--base, #fff); border-block: 1px solid var(--wp--preset--color--border, #e2e4e9); } /* Holds the JS-built facet chips (one per facet group). Hidden by request — the mobile bar stays exactly two items, «فیلترها» and «مرتب‌سازی» — rather than growing a chip per facet group; rpa-listing.js still BUILDS the rail (buildChips()), it just has nowhere visible to put it, so nothing needs touching there if this is ever turned back on. */ .rpa-fchips__rail { display: none; } .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; } /* The two buttons themselves: square corners (not the rounded chip look — this bar reads as one divided control, not two separate pills), each filling its 1fr track, with a single shared border line between them instead of two separate borders. */ .rpa-fchips > .rpa-fchip { flex: initial; justify-content: center; height: 48px; border: 0; border-radius: 0; background: transparent; } /* The divider goes on «فیلترها» specifically (not a sibling-order selector — a sits between the two buttons in the DOM, so "+" would never match them as adjacent). */ .rpa-fchips > .rpa-fchip--all { border-inline-start: 1px solid var(--wp--preset--color--border, #e2e4e9); } } .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; margin-bottom: 0 !important; } #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 ───────────────────────── Clean inline row (label · chips, all on one line) — no boxed/grey band. theme.css's classic base ships `.active_filters{background:#dededd; padding:.625rem 1.875rem 0;margin-bottom:1.25rem}`, the grey band the chips used to sit inside; overridden below (id+class outranks theme.css's bare class, no !important needed). Chips themselves: outlined pill, white fill — not the solid-grey-fill chip this replaces. */ #js-active-search-filters.hide { display: none; } #js-active-search-filters.active_filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; margin: 0 0 var(--rpa-gap, 16px); background: transparent; } #js-active-search-filters .active-filter-title { margin: 0; font-size: 0.875rem; font-weight: var(--rh-fw-base); color: var(--wp--preset--color--text-muted, #5b6271); white-space: nowrap; } #js-active-search-filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } #js-active-search-filters .filter-block { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px; border-radius: 9999px; background: var(--wp--preset--color--base, #fff); border: 1px solid var(--wp--preset--color--border, #d8dbe0); color: var(--wp--preset--color--text, #1a1d23); font-size: 0.8125rem; transition: border-color 150ms ease; margin: 0 !important; } #js-active-search-filters .filter-block:hover { border-color: var(--wp--preset--color--text-muted, #9ba1ac); } #js-active-search-filters .filter-block__label { white-space: nowrap; } #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; } /* "پاک کردن همه" — moved here from #search_filters by rpa-listing.js's relocateClearAll() (desktop only), landing as this row's last flex child so it trails the chips, reference-style. #search_filters's own rule for it (margin-block-end: 12px, meant for its old stacked toolbar position) doesn't reach here since the node is no longer inside #search_filters. */ #js-active-search-filters .clear-all-wrapper { display: inline-flex; align-items: center; margin: 0; } /* "N کالا" item count — moved here from #js-product-list-top by rpa-listing.js's relocateItemCount() (desktop only), landing as this row's FIRST child (before "فیلترهای فعال") so count and active filters read as one line, by request. A thin divider on its trailing edge (inline-end: left, in RTL) separates it from the label next to it — plain gap alone read as too little separation between two unrelated pieces of text. */ #js-active-search-filters .rpa-toolbar__right { margin-inline-start: 0; padding-inline-end: 10px; border-inline-end: 1px solid var(--wp--preset--color--border, #d8dbe0); } /* ═══════════════════════ mobile filter bottom-sheet (Digikala-style) ═══════════ The toolbar "فیلترها" button opens #rpa-sheet-filters (a reusing the .rpa-sheet look). rpa-listing.js MOVES the real #search_filters node into the sheet host on open, so all of ps_facetedsearch's behaviour is preserved. Two CSS-driven levels: • Level 1 — list of filter GROUPS (the .rpa-facet__header rows + a summary of each group's active selection). Panels hidden. • Level 2 — drilled into one group: that group's .rpa-facet__panel fills the sheet (search + scrollable options or the price slider). Desktop (≥992px) never opens it; the base .rpa-sheet rule already display:none's the dialog there, and #search_filters stays in the sticky sidebar. */ /* On mobile the sidebar home of #search_filters is hidden (closed state); the facets live in the sheet. When the sheet opens, the node is moved OUT of here, so this never hides the open sheet. */ @media (max-width: 991px) { .rpa-archive__filters > #search_filters_wrapper { display: none; } } /* The dialog is a flex column: fixed head, scrolling body, fixed footer. */ .rpa-sheet--filters[open] { display: flex; flex-direction: column; max-height: 85vh; } .rpa-sheet--filters .rpa-sheet__body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 0 16px; overscroll-behavior: contain; } .rpa-mf-lock { overflow: hidden; } /* Back button (shown only when drilled into a group). */ .rpa-mf__back { width: 32px; height: 32px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; } .rpa-mf__back .material-icons { font-size: 24px; } .rpa-sheet--filters .rpa-sheet__title { text-align: start; } /* Inside the sheet the #search_filters card chrome is dropped — it's flush. */ .rpa-sheet--filters #search_filters { border: 0; border-radius: 0; padding: 0; background: transparent; } /* The desktop clear-all (inside #search_filters) is replaced by the sheet footer. */ .rpa-sheet--filters #_desktop_search_filters_clear_all { display: none; } /* ── Level 1: groups as rows ── The :not(.rpa-sheet--drilled) selector raises specificity above the desktop `.rpa-facet.is-open > .rpa-facet__panel{display:block}` rule, so a server-marked active (is-open) facet does NOT render expanded in the Level-1 list. */ .rpa-sheet--filters:not(.rpa-sheet--drilled) .rpa-facet > .rpa-facet__panel { display: none; } .rpa-sheet--filters .rpa-facet__header { display: flex; padding: 16px 0; } /* The chevron points along the inline axis (a "go deeper" affordance) rather than down; rtl-no-flip keeps it pointing the reading-start way in RTL. */ .rpa-sheet--filters:not(.rpa-sheet--drilled) .rpa-facet__chev { transform: rotate(90deg); } .rpa-sheet--filters .rpa-facet.is-open .rpa-facet__chev { transform: rotate(90deg); } /* Per-group selection summary, pushed to the inline-end before the chevron. */ .rpa-facet__summary { margin-inline-start: auto; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wp--preset--color--primary, #0a66c2); font-size: 0.8125rem; font-weight: var(--rh-fw-strong); } .rpa-sheet--filters .rpa-facet.has-active .rpa-facet__title { color: var(--wp--preset--color--contrast, #0f1115); } /* ── Level 2: drilled group fills the sheet ── */ .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet:not(.is-drilled) { display: none; } .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet--avail { display: none; } .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet.is-drilled { border-top: 0; } .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; padding: 12px 0 4px; } /* The option list scrolls with the sheet body, not its own 240px box. */ .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet.is-drilled .rpa-facet__list--scroll { max-height: none; overflow: visible; } /* Sticky per-group search box at the top of the drilled view. */ .rpa-sheet--filters.rpa-sheet--drilled .rpa-facet.is-drilled .rpa-facet__search { position: sticky; top: 0; z-index: 1; background: var(--wp--preset--color--base, #fff); padding-block: 4px; margin-bottom: 8px; } /* Roomier tap targets for options on touch. */ .rpa-sheet--filters .rpa-facet__label, .rpa-sheet--filters .facet-label { padding: 10px 0; } /* ── Footer (apply + clear) ── */ .rpa-mf__foot { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wp--preset--color--border, #e2e4e9); background: var(--wp--preset--color--base, #fff); } .rpa-mf__clear { flex: 0 0 auto; height: 46px; padding-inline: 16px; border: 0; background: transparent; color: var(--wp--preset--color--primary, #0a66c2); font: inherit; font-weight: var(--rh-fw-strong); cursor: pointer; } .rpa-mf__clear:disabled { color: var(--wp--preset--color--text-muted, #aeb4bf); cursor: default; } .rpa-mf__apply { flex: 1 1 auto; height: 46px; border: 0; border-radius: 12px; background: var(--wp--preset--color--primary, #0a66c2); color: #fff; font: inherit; font-size: 0.9375rem; font-weight: var(--rh-fw-strong); cursor: pointer; } .rpa-mf__apply:active { transform: translateY(1px); } /* ───────────────────── loading state: skeleton, not overlay ───────────────── ps_facetedsearch's front.js appends a dimming spinner overlay (.faceted-overlay) to on every filter/sort. We replace that with the SAME skeleton the infinite-scroll uses: rpa-listing.js shows .rpa-skeleton + sets .rpa[data-rpa-busy="sort"] (which hides the stale grid, see product-archive.css) on `updateFacets`, and clears it on `updateProductList`. Hiding the module's overlay here keeps a single, consistent loading affordance. */ .faceted-overlay { display: none !important; } /* The fixed "فیلترها" pill + its side-drawer are retired (replaced by the horizontal per-facet toolbar below) but the