/* ============================================================ SAFQA — grid_override.css NOTE: UniTheme2 sets --gl-cols via inline style which cannot be overridden by CSS (inline styles beat any CSS selector). The grid-template-columns is calculated from --gl-cols. Columns are controlled via DB block settings (number_of_columns). ============================================================ */ /* ── FORCE WHITE BACKGROUNDS: override --color-general grey ───────────── CSS custom properties don't support !important; target elements directly */ .ut2-sidebox__body, .ut2-sidebox-important, .ty-mainbox-body, [style*="--color-general"] { background: #fff !important; } /* ── ADD-TO-CART BUTTON FIX: icon inline with text ────────────────────── */ /* This file loads via in , after compiled CSS, so it */ /* wins over UniTheme2's .ty-btn bdi{display:flex;-webkit-box-orient:vert} */ button.ty-btn__add-to-cart > span, a.ty-btn__add-to-cart > span { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } button.ty-btn__add-to-cart i, a.ty-btn__add-to-cart i, button.ty-btn__add-to-cart .ty-icon, a.ty-btn__add-to-cart .ty-icon { display: inline-flex !important; height: auto !important; line-height: 1 !important; font-size: 20px !important; flex-shrink: 0 !important; } button.ty-btn__add-to-cart bdi, a.ty-btn__add-to-cart bdi { display: inline !important; -webkit-box-orient: horizontal !important; -webkit-line-clamp: unset !important; overflow: visible !important; } /* ── WRITE A REVIEW button: reset from ty-btn giant size ─────────────── */ /* The base .ty-btn sets height:var(--height-button)=40px, min-width:40px, */ /* display:inline-flex. We must reset ALL of those + font-size. */ a.ty-btn.ty-product-review-write-product-review-button, .ty-btn.ty-product-review-write-product-review-button, a.ty-product-review-write-product-review-button.ty-btn__text, a.ty-product-review-write-product-review-button.ty-btn__secondary, .sqz-pb__rating .ty-product-review-write-product-review-button, .ty-product-review-write-product-review .ty-btn { height: auto !important; min-height: 0 !important; min-width: 0 !important; width: auto !important; padding: 0 4px !important; margin: 0 !important; font-size: 13px !important; font-weight: 400 !important; display: inline !important; line-height: 1.4 !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #007185 !important; text-decoration: none !important; border-radius: 0 !important; vertical-align: middle !important; } a.ty-btn.ty-product-review-write-product-review-button:hover, .ty-product-review-write-product-review .ty-btn:hover { text-decoration: underline !important; color: #c7511f !important; background: transparent !important; } /* ── IMAGE COLUMN: constrain all content to column width ───── */ /* UniTheme2 sets inline width:570px on thumbnails gallery; */ /* this can overflow the grid column. Force max-width:100%. */ .sqz-pb__col-images { overflow: hidden !important; max-width: 100% !important; } .sqz-pb__col-images .ty-product-img, .sqz-pb__col-images .ty-previewer, .sqz-pb__col-images .ty-product-thumbnails, .sqz-pb__col-images .cm-image-gallery { max-width: 100% !important; width: 100% !important; } .sqz-pb__col-images img { max-width: 100% !important; height: auto !important; } /* ── LIGHTBOX: ensure it covers sticky bar and header ────── */ html #jquery-lightbox, html #jquery-overlay, .ty-previewer-wrap, .fancybox-overlay, .fancybox-wrap { z-index: 9999 !important; } /* ── STICKY BAR: hide when lightbox is open ──────────────── */ body.lightbox-active .ut2-pb__sticky-add-to-cart, body.cm-previewer-active .ut2-pb__sticky-add-to-cart { z-index: 1 !important; visibility: hidden !important; } /* ── FIX: Product grid spacing ─────────────────────────────────────────── */ /* grid-auto-rows: 1fr forces all rows to same height → huge gaps for short */ /* items. Use auto to let each row size to its content. */ .grid-list.ut2-gl > div[id*="pagination"], .grid-list.ut2-gl > .ut2-gl__wrap, #products_search_pagination_contents, [id*="category_products"] { grid-auto-rows: auto !important; } /* ── FIX: Product card - let grid rows size naturally ───────────────────*/ /* grid-auto-rows:auto (set above) sizes each row to its tallest card. */ /* align-self:stretch makes all cards in a row fill to the same height. */ /* We keep the inline min-height from UniTheme2 (via CSS var) as a floor. */ .ut2-gl__item { align-self: stretch !important; } /* The form/body should fill full card height so buttons align at bottom */ .ut2-gl__item > form { display: flex !important; flex-direction: column !important; height: 100% !important; } .ut2-gl__item .ut2-gl__body { display: flex !important; flex-direction: column !important; flex: 1 !important; height: 100% !important; } .ut2-gl__item .ut2-gl__content { flex: 1 !important; } .ut2-gl__item .ut2-gl__price-wrap { margin-top: auto !important; } /* ── CRITICAL: Kill hover popup expansion (UniTheme2 float-card effect) ── */ /* Cover all selector paths: direct column, through pagination wrapper, any */ @media (hover: hover) { [class*="grid-list"] > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body, [class*="grid-list"] .ut2-gl > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body, [class*="grid-list"].ut2-gl > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body, .grid-list > [id] > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body, .grid-list.ut2-gl > [id] > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body, .ut2-gl__item:hover .ut2-gl__body, .ut2-gl__item:hover > form { position: relative !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; inset: unset !important; box-shadow: 0 4px 20px rgba(0,0,0,0.13) !important; z-index: auto !important; } } .ut2-gl__item:hover { position: relative !important; z-index: 2 !important; } /* ── WHITE FILTER BAR + SORT BAR (remove grey @base/#e7e7e7 background) ─ */ .ty-sort-container { background: #fff !important; border: 1px solid #dde0e4 !important; border-radius: 8px !important; } .ty-sort-container__views-a.active { background: #f0f0f0 !important; } .ty-sort-dropdown__wrapper:hover { background: #f0f0f0 !important; } /* Filter panel wrapper (sidebar + horizontal) */ .ty-product-filters__wrapper, .ty-dropdown-box__content .ty-product-filters__wrapper { background: #fff !important; border: none !important; border-radius: 0 !important; } /* Horizontal filter bar (sticky under header) */ .ty-horizontal-filters-content, .ty-horizontal-filters, .ut2-horizontal-filters, .ty-horizontal-product-filters, .ty-horizontal-product-filters .ty-product-filters__wrapper, [class*="horizontal-filter"] { background: #fff !important; border-bottom: 1px solid #e0e0e0 !important; } /* ── HORIZONTAL FILTER DROPDOWN ────────────────────────────────────────── */ .ty-horizontal-product-filters { position: relative !important; z-index: 100 !important; overflow: visible !important; } .ty-horizontal-product-filters .ty-product-filters__wrapper { overflow: visible !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; padding: 8px 12px !important; } .ty-horizontal-product-filters-dropdown { position: relative !important; z-index: 101 !important; overflow: visible !important; } /* ── Trigger button ─────────────────────────────────────────────────────── */ .ty-horizontal-product-filters-dropdown__wrapper { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 6px 14px !important; border: 1px solid #dde0e4 !important; border-radius: 6px !important; background: #fff !important; cursor: pointer !important; font-size: 13.5px !important; font-weight: 500 !important; color: #0f1111 !important; white-space: nowrap !important; user-select: none !important; transition: background .12s, border-color .12s !important; line-height: 1.4 !important; } .ty-horizontal-product-filters-dropdown__wrapper.active, .ty-horizontal-product-filters-dropdown__wrapper.open { background: #ff9900 !important; border-color: #e68900 !important; color: #0f1111 !important; } .ty-horizontal-product-filters-dropdown__wrapper:hover { background: #f5f5f5 !important; } .ty-horizontal-product-filters-dropdown__wrapper.active:hover, .ty-horizontal-product-filters-dropdown__wrapper.open:hover { background: #e68900 !important; } /* ── Dropdown panel — kill UniTheme2's padding-block:45px + inline-size:285px ── */ .ty-horizontal-product-filters-dropdown__content { background: #fff !important; z-index: 9999 !important; position: absolute !important; overflow: hidden !important; /* Kill the 45px arrow gap and fixed 285px width */ padding-block: 4px !important; padding-block-start: 4px !important; padding-block-end: 4px !important; padding-inline: 0 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; padding: 4px 0 !important; inline-size: auto !important; width: auto !important; min-width: 240px !important; max-width: min(400px, 92vw) !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important; border: 1px solid #dde0e4 !important; border-radius: 6px !important; margin-block-start: 2px !important; /* Direction: let inherits RTL from html[dir=rtl] */ } /* ── Variant list — scrollable, scrollbar always at inline-end ─────────── */ .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants { max-height: 260px !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 2px 0 !important; /* Force scrollbar to always appear on the visual RIGHT regardless of RTL/LTR — achieved by setting direction:ltr on the scroll container, then direction:rtl on the inner list */ direction: ltr !important; scrollbar-width: thin !important; scrollbar-color: #ccc transparent !important; } .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants::-webkit-scrollbar { width: 5px !important; } .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants::-webkit-scrollbar-thumb { background: #ccc !important; border-radius: 3px !important; } /* Restore RTL direction for the content inside the scroll container */ .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants ul, .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants .ty-product-filters__group { direction: rtl !important; } /* For LTR pages keep the scroll content LTR */ html[dir="ltr"] .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants { direction: ltr !important; } html[dir="ltr"] .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants ul, html[dir="ltr"] .ty-horizontal-product-filters-dropdown__content .ty-product-filters__variants .ty-product-filters__group { direction: ltr !important; } /* ── Each filter row (li) ───────────────────────────────────────────────── */ .ty-horizontal-product-filters-dropdown__content .ty-product-filters__group { padding: 0 !important; margin: 0 !important; list-style: none !important; } /* checkbox + label — horizontal flex, checkbox on inline-start (left in LTR, right in RTL) */ .ty-horizontal-product-filters-dropdown__content .cm-product-filters-checkbox-container { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 5px 14px !important; min-height: 36px !important; cursor: pointer !important; transition: background .1s !important; /* Ensure correct RTL text alignment */ direction: inherit !important; text-align: start !important; } .ty-horizontal-product-filters-dropdown__content .cm-product-filters-checkbox-container:hover { background: #f6f6f6 !important; } /* Label: fills remaining space, wraps on long values */ .ty-horizontal-product-filters-dropdown__content .cm-product-filters-checkbox-container label, .ty-horizontal-product-filters-dropdown__content .ty-product-filters__group label { flex: 1 !important; font-size: 13px !important; color: #0f1111 !important; cursor: pointer !important; line-height: 1.5 !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word !important; padding: 0 !important; padding-inline: 0 !important; margin: 0 !important; text-align: start !important; /* Kill UniTheme2's check-radio-inline-gap padding that pushes text */ padding-inline-end: 0 !important; padding-inline-start: 0 !important; } /* Checkbox — static position, accent-colored, correct size */ .ty-horizontal-product-filters-dropdown__content input[type="checkbox"].cm-product-filters-checkbox { position: static !important; inset: unset !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; flex-shrink: 0 !important; margin: 0 !important; top: auto !important; accent-color: #ff9900 !important; cursor: pointer !important; order: 0 !important; /* always first in flex row (inline-start) */ } /* ── Close / Apply button row ───────────────────────────────────────────── */ .ty-horizontal-product-filters-dropdown__content .ty-product-filters__tools { background: #fff !important; padding: 6px 12px !important; border-top: 1px solid #eef0f2 !important; margin-top: 2px !important; display: flex !important; justify-content: flex-start !important; direction: inherit !important; } .ty-horizontal-product-filters-dropdown__content .ty-product-filters__tools .ty-btn { font-size: 12.5px !important; padding: 4px 14px !important; height: auto !important; min-height: 0 !important; min-width: 0 !important; border-radius: 4px !important; } /* Selected filters tools area */ .ty-product-filters__tools { background: #fff !important; } /* Sidebar block background */ .ty-column3 .ty-dropdown-box__content, .ty-column4 .ty-dropdown-box__content, .ty-sidebox .ty-dropdown-box__content { background: #fff !important; } /* ab-mix block bodies */ .ab-mix-center .ty-mainbox-body, .ab-mix-first .ty-mainbox-body, .ab-mix-last .ty-mainbox-body { background: #fff !important; } /* ── FILTER "products found" TOOLTIP — plain text, no teal badge ──────── */ /* UniTheme2 shows a floating teal pill (--color-link) when filter changes. Restyle to a compact neutral chip matching Amazon's inline count text. */ #tygh_container ~ .ty-tooltip--filter, .ty-tooltip--filter { background: #fff !important; color: #0f1111 !important; border: 1px solid #dde0e4 !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; font-size: 13px !important; font-weight: 400 !important; padding: 4px 10px !important; height: auto !important; } /* The arrow pointer — hide it, plain tooltip doesn't need it */ #tygh_container ~ .ty-tooltip--filter .tooltip-arrow, .ty-tooltip--filter .tooltip-arrow { display: none !important; } /* The "show (N)" button inside the tooltip */ #tygh_container ~ .ty-tooltip--filter .ty-btn, .ty-tooltip--filter .ty-btn, .ut2-products_found_message { background: #ff9900 !important; border: 1px solid #e68900 !important; color: #0f1111 !important; font-size: 12px !important; font-weight: 600 !important; padding: 3px 10px !important; height: auto !important; min-height: 0 !important; min-width: 0 !important; border-radius: 4px !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════════ SIDEBAR PRODUCT FILTERS — Amazon-style vertical filter panel Selector scope: #product_filters_397 / .ty-product-filters__wrapper ══════════════════════════════════════════════════════════════ */ /* * Confirmed DOM structure (from live HTML audit): * .ty-product-filters__wrapper * .ty-product-filters__block (one per filter group) * .ty-product-filters__switch (collapsible header) * span.ty-product-filters__title * .ty-product-filters / ul * li.cm-product-filters-checkbox-container.ty-product-filters__group.ut2-product-filters__variant * input.cm-product-filters-checkbox ← checkbox FIRST in DOM * label > span > span.ut2-product-filters__variant__value * .ut2-more-btn ← "اعرض الكل (53)" toggle * .ty-price-slider * .ty-price-slider__inputs * .ty-price-slider__bidi-container (x2) * .ty-range-slider * .ty-range-slider__wrapper > li.ty-range-slider__item */ /* ── 1. Sidebar wrapper — white, no border, padding ─────────── */ .side-grid .ty-product-filters__wrapper, #product_filters_397 .ty-product-filters__wrapper { background: #fff !important; border: none !important; padding: 0 !important; } /* ── 2. Each filter group block ──────────────────────────────── */ .side-grid .ty-product-filters__block, #product_filters_397 .ty-product-filters__block { border-bottom: 1px solid #f0f2f2 !important; padding: 14px 18px !important; margin: 0 !important; } .side-grid .ty-product-filters__block:last-child, #product_filters_397 .ty-product-filters__block:last-child { border-bottom: none !important; } /* ── 3. Filter group title ───────────────────────────────────── */ .side-grid .ty-product-filters__switch, #product_filters_397 .ty-product-filters__switch { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; padding: 0 0 10px 0 !important; gap: 8px !important; } html[dir="rtl"] .side-grid .ty-product-filters__switch, html[dir="rtl"] #product_filters_397 .ty-product-filters__switch { flex-direction: row !important; direction: rtl !important; } .side-grid .ty-product-filters__title, #product_filters_397 .ty-product-filters__title { font-size: 14px !important; font-weight: 700 !important; color: #0f1111 !important; line-height: 1.3 !important; } /* +/− toggle: show only ONE icon at a time. switch-down = "+" (collapsed state icon) switch-right = "−" (expanded/open state icon) The .open class on .ty-product-filters__switch controls which is visible. */ .side-grid .ty-product-filters__switch .ty-product-filters__switch-right, .side-grid .ty-product-filters__switch .ty-product-filters__switch-down { flex-shrink: 0 !important; color: #565959 !important; } /* Default (collapsed): show +, hide − */ .side-grid .ty-product-filters__switch .ty-product-filters__switch-right { display: none !important; } .side-grid .ty-product-filters__switch .ty-product-filters__switch-down { display: inline-block !important; } /* Open (expanded): show −, hide + */ .side-grid .open.ty-product-filters__switch .ty-product-filters__switch-right { display: inline-block !important; } .side-grid .open.ty-product-filters__switch .ty-product-filters__switch-down { display: none !important; } /* ── 4. Filter variant list — override overflow clipping ─────── */ /* * UniTheme2 compiled CSS applies: * .ty-product-filters__variants:not(.none-overflow) { * max-block-size: var(--ut2-product-filter-variant-list-_max-height_-shortened); * overflow-y: hidden !important; * } * This clips the filter list vertically. Our selector adds .side-grid * ancestor for higher specificity (0,3,0 vs 0,2,0) + later source order. */ .side-grid .ty-product-filters__variants:not(.none-overflow), .side-grid .ty-product-filters__variants { overflow-y: visible !important; overflow: visible !important; max-block-size: none !important; max-height: none !important; } /* When "show all" is toggled (none-overflow added), allow scroll */ .side-grid .ty-product-filters__variants.none-overflow { overflow-y: auto !important; max-block-size: min(60vh, 400px) !important; scrollbar-width: thin !important; scrollbar-color: #ccc transparent !important; } /* ── 4b. Checkbox + label rows ─────────────────────────────────── */ /* * UniTheme2 checkbox system: * - Real is display:none * - label::before = checkbox box (24×24px, absolute right:0 top:0) * - label::after = checkmark icon (same position) * - label has padding-right:30px to make room for pseudo-checkbox * - In RTL: padding-right is the START side → checkbox on right = correct * * We DON'T fight this system. We fix: * 1. li container overflow and spacing * 2. label line-height (base sets line-height:0 which collapses text) * 3. label text wrapping for long values * 4. Inner span overflow */ .side-grid .cm-product-filters-checkbox-container, .side-grid .ty-product-filters__group.ut2-product-filters__variant, .side-grid li.ty-product-filters__group { display: block !important; padding: 2px 0 !important; margin: 0 0 2px 0 !important; list-style: none !important; overflow: visible !important; width: 100% !important; box-sizing: border-box !important; } .side-grid .cm-product-filters-checkbox-container:hover { background: #f7f8f8 !important; border-radius: 3px !important; } /* Label — the ENTIRE clickable row (pseudo-checkbox + text) ──── * Base CSS: display:flex; align-items:center; padding-right:30px; * position:relative; min-height:24px; line-height:0 * Problems: line-height:0 collapses text; no text wrapping allowed. */ .side-grid .ty-product-filters__group [type="checkbox"]:not(:checked) + label, .side-grid .ty-product-filters__group [type="checkbox"]:checked + label { line-height: 1.4 !important; min-height: 22px !important; /* LTR: checkbox at LEFT (inline-start), 26px = 18px box + 8px gap */ padding-left: 26px !important; padding-right: 0 !important; padding-top: 2px !important; padding-bottom: 2px !important; font-size: 12.5px !important; color: #0f1111 !important; white-space: normal !important; overflow: visible !important; word-break: normal !important; overflow-wrap: anywhere !important; display: flex !important; align-items: center !important; position: relative !important; cursor: pointer !important; } /* Pseudo-checkbox box (::before) — LTR: inline-start = physical LEFT */ .side-grid .ty-product-filters__group [type="checkbox"]:not(:checked) + label:before, .side-grid .ty-product-filters__group [type="checkbox"]:checked + label:before { position: absolute !important; left: 0 !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; border: 1px solid #d5d9d9 !important; background: #fff !important; border-radius: 3px !important; } /* Pseudo-checkbox checkmark (::after) — same position */ .side-grid .ty-product-filters__group [type="checkbox"]:not(:checked) + label:after, .side-grid .ty-product-filters__group [type="checkbox"]:checked + label:after { position: absolute !important; left: 0 !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; line-height: 18px !important; border-radius: 3px !important; } /* Checked state — Amazon orange */ .side-grid .ty-product-filters__group [type="checkbox"]:checked + label:after { background: #ff9900 !important; border: 1px solid #ff9900 !important; color: #fff !important; } /* Hover — slight highlight on box */ .side-grid .ty-product-filters__group label:hover:before { border-color: #ff9900 !important; box-shadow: none !important; } /* Inner span (wraps the text) — must allow wrapping */ .side-grid .ty-product-filters__group label > span { line-height: 1.4 !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere !important; display: inline !important; } .side-grid .ut2-product-filters__variant__value { display: inline !important; overflow: visible !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* RTL: inline-start = physical RIGHT — checkbox on right, text on left */ html[dir="rtl"] .side-grid .ty-product-filters__group [type="checkbox"]:not(:checked) + label, html[dir="rtl"] .side-grid .ty-product-filters__group [type="checkbox"]:checked + label { direction: rtl !important; text-align: right !important; padding-right: 26px !important; /* space for checkbox at right:0 */ padding-left: 0 !important; flex-direction: row !important; /* keep row, direction:rtl flips it */ justify-content: flex-start !important; } /* RTL pseudo-checkbox: physical RIGHT (inline-start in RTL) */ html[dir="rtl"] .side-grid .ty-product-filters__group [type="checkbox"]:not(:checked) + label:before, html[dir="rtl"] .side-grid .ty-product-filters__group [type="checkbox"]:checked + label:before, html[dir="rtl"] .side-grid .ty-product-filters__group [type="checkbox"]:not(:checked) + label:after, html[dir="rtl"] .side-grid .ty-product-filters__group [type="checkbox"]:checked + label:after { right: 0 !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; } html[dir="rtl"] .side-grid .ty-product-filters__group label > span { direction: rtl !important; text-align: right !important; } /* RTL: filter section header — title on right, +/- icon on left */ html[dir="rtl"] .side-grid .ty-product-filters__switch { direction: rtl !important; flex-direction: row !important; padding-left: 0 !important; padding-right: 0 !important; } /* Fix compiled padding-left:20px from CSSJanus flip on .ut2-filters switch */ html[dir="rtl"] .ut2-filters > div .ty-product-filters__switch { direction: rtl !important; flex-direction: row !important; padding-left: 0 !important; padding-right: 0 !important; padding-inline: 0 !important; } /* Kill the fade gradient overlay on collapsed filter lists */ .side-grid .items-more:not(.none-overflow)::after, .side-grid .ty-product-filters__variants:not(.none-overflow)::after { display: none !important; content: none !important; } /* ── 5. "اعرض الكل / طي" toggle (ut2-more-btn in sidebar) ───── */ .side-grid .ty-product-filters .ut2-more-btn, #product_filters_397 .ty-product-filters .ut2-more-btn, .side-grid .ty-product-filters__item-more .ut2-more-btn, #product_filters_397 .ty-product-filters__item-more .ut2-more-btn { display: flex !important; align-items: center !important; gap: 4px !important; color: #007185 !important; font-size: 12.5px !important; font-weight: 500 !important; cursor: pointer !important; margin-top: 6px !important; padding: 0 !important; background: none !important; border: none !important; text-decoration: none !important; direction: rtl !important; } .side-grid .ty-product-filters .ut2-more-btn:hover, #product_filters_397 .ty-product-filters .ut2-more-btn:hover { color: #c7511f !important; text-decoration: underline !important; } .side-grid .ty-product-filters .ut2-more-btn i, #product_filters_397 .ty-product-filters .ut2-more-btn i { font-size: 14px !important; color: inherit !important; } /* The "طي" (collapse) span — visible only when expanded */ .side-grid .ty-product-filters .ut2-more-btn .more, #product_filters_397 .ty-product-filters .ut2-more-btn .more { display: inline !important; } .side-grid .ty-product-filters .ut2-more-btn.open .more, #product_filters_397 .ty-product-filters .ut2-more-btn.open .more { display: none !important; } .side-grid .ty-product-filters .ut2-more-btn .hidden, #product_filters_397 .ty-product-filters .ut2-more-btn .hidden { display: none !important; } .side-grid .ty-product-filters .ut2-more-btn.open .hidden, #product_filters_397 .ty-product-filters .ut2-more-btn.open .hidden { display: inline !important; } /* ── 6. Price slider — fix RTL number reversal ───────────────── */ /* * Problem: in RTL the price inputs show "1561363 — 0" (max left, min right) * because the flex container flows right-to-left. * Fix: force the inputs container to LTR so min stays on the left / right * of the slider track in the correct visual order, then re-align text inside. */ .side-grid .ty-price-slider__inputs, #product_filters_397 .ty-price-slider__inputs { display: flex !important; flex-direction: row !important; /* LTR order: min [—] max */ align-items: center !important; gap: 6px !important; direction: ltr !important; /* force left→right: min on left, max on right */ margin-bottom: 10px !important; } /* Re-align individual input text to match Arabic RTL */ .side-grid .ty-price-slider__input-text, #product_filters_397 .ty-price-slider__input-text { direction: rtl !important; text-align: center !important; width: 80px !important; padding: 5px 8px !important; border: 1px solid #D5D9D9 !important; border-radius: 4px !important; font-size: 12px !important; color: #0f1111 !important; background: #fff !important; box-sizing: border-box !important; } /* Suffix (جنيه) */ .side-grid .ty-price-slider__filter-suffix, #product_filters_397 .ty-price-slider__filter-suffix { font-size: 11px !important; color: #565959 !important; white-space: nowrap !important; } /* Separator (–) */ .side-grid .ab__ut2--price-slider__sep, #product_filters_397 .ab__ut2--price-slider__sep { flex-shrink: 0 !important; color: #565959 !important; font-size: 13px !important; } /* Price range slider track labels */ .side-grid .ty-range-slider__num, #product_filters_397 .ty-range-slider__num { font-size: 11px !important; color: #565959 !important; direction: ltr !important; /* keep numbers reading left-to-right */ white-space: nowrap !important; } /* The track itself — accent bar */ .side-grid .ty-range-slider, #product_filters_397 .ty-range-slider { direction: ltr !important; } /* ── 7. Reset / apply tools bar ──────────────────────────────── */ .side-grid .ty-product-filters__tools, #product_filters_397 .ty-product-filters__tools { padding: 10px 0 0 !important; border-top: 1px solid #f0f2f2 !important; margin-top: 4px !important; display: flex !important; direction: rtl !important; } .side-grid .ty-product-filters__reset-button, #product_filters_397 .ty-product-filters__reset-button { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: #007185 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; cursor: pointer !important; padding: 4px 8px !important; border-radius: 4px !important; transition: background .1s, color .1s !important; } .side-grid .ty-product-filters__reset-button:hover, #product_filters_397 .ty-product-filters__reset-button:hover { background: #f7f8f8 !important; color: #c7511f !important; text-decoration: underline !important; } .side-grid .ty-product-filters__reset-icon, #product_filters_397 .ty-product-filters__reset-icon { font-size: 14px !important; color: inherit !important; } /* ── 8. No-items-found message ───────────────────────────────── */ .side-grid .ty-product-filters__no-items-found, #product_filters_397 .ty-product-filters__no-items-found { font-size: 12px !important; color: #888 !important; padding: 4px 0 !important; direction: rtl !important; text-align: right !important; } /* ── Mobile: hide sidebar, show horizontal filter only ──────── */ @media (max-width: 767px) { .span7.side-grid { display: none !important; } } /* Desktop: horizontal filter is in main column, sidebar is in span7. Both are visible by default. The horizontal one is already styled correctly via the existing ty-horizontal-product-filters rules. */