/* =========================================================
 * IFAD i18n — Right-to-Left overrides.
 *
 * Loaded only when ifad_i18n_dir() === 'rtl' (assets.php).
 * Scope: storefront only — admin keeps WP's own rtl handling.
 *
 * Goals:
 *  1. Mirror horizontal padding / margin / floats / alignment for the
 *     main theme layout blocks so the page reads naturally right-to-left.
 *  2. Fix bidirectional rendering of mixed English + Arabic strings
 *     (numbers, prices, "-30%" badges, latin product specs) by anchoring
 *     them with explicit dir="ltr"/"rtl" classes.
 *  3. Re-apply Arabic-friendly typography (font, line-height) on UI text.
 *
 * Anything that is supposed to stay LTR (gemstone specs, SKUs, prices,
 * carat labels, lab codes) is forced via the .ifadj-ltr utility further
 * down — apply that class in templates where mixed scripts get scrambled
 * by the browser's bidi algorithm.
 * ========================================================= */

/* ---------- Typography baseline ----------
 * Font intentionally left to the theme's own Nunito Sans — it carries
 * Arabic glyphs well enough and avoids an extra Google Fonts request. */
[dir="rtl"] body,
[dir="rtl"] .product_title,
[dir="rtl"] .home-info-banner .title,
[dir="rtl"] .home-info-banner .text,
[dir="rtl"] .home-info-block .title,
[dir="rtl"] .home-info-block .text,
[dir="rtl"] .tetle2,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
    line-height: 1.7;
    letter-spacing: 0;
}

/* ---------- Global text alignment + direction ---------- */
[dir="rtl"] body {
    text-align: right;
}
[dir="rtl"] .text-center,
[dir="rtl"] .home-info-banner,
[dir="rtl"] .home-products-header h1 {
    text-align: center;
}

/* ---------- Header / menu ----------
 * The page root is dir="rtl", so these flex rows ALREADY mirror on their own
 * (logo ends up on the right, the icon cluster reads right-to-left). Use
 * flex-direction: row, NOT row-reverse — on a dir:rtl flex container
 * row-reverse double-flips: it shoves the logo back to the LEFT and un-mirrors
 * the icons into their English order. That was the bug. */
[dir="rtl"] header .header-menu {
    flex-direction: row;
}
[dir="rtl"] header .logo-left {
    margin-right: 26px;
    margin-left: auto;
}
/* Mobile: drop the 26px nudge, keep the logo pushed to the start (right). */
@media (max-width: 768px) {
    [dir="rtl"] header .logo-left {
        margin-right: 0px;
        margin-left: auto;
    }
}
[dir="rtl"] .menu-top .header-icon-right {
    flex-direction: row;
    margin-left: 30px;
}
[dir="rtl"] header nav,
[dir="rtl"] header .menu {
    direction: rtl;
}
[dir="rtl"] header .sub-menu {
    left: auto;
    right: 0;
}

/* ---------- Currency switcher (already RTL-friendly, only menu side) ---------- */
[dir="rtl"] .ifadj-mc-switcher__menu {
    right: auto;
    left: 0;
}

/* ---------- IFAD CATALOG carousel header (arrows flip to left side) ---------- */
[dir="rtl"] .home-products-header {
    flex-direction: row-reverse;
}
[dir="rtl"] .home-products-header h1 {
    padding-left: 90px;
    padding-right: 0px;
}

/* ---------- Sale banner — mirror the background photo so the gems sit on the
 *            LEFT, away from the RTL text on the right. Flip the whole section
 *            (mirrors its inline background-image), then counter-flip the
 *            content container so the text + button render the right way round. */
[dir="rtl"] .home-info-banners {
    transform: scaleX(-1);
}
[dir="rtl"] .home-info-banners > .container {
    transform: scaleX(-1);
}

/* ---------- "Be part of something special" block (.home-info-block) ----------
 * The theme hard-codes LTR for this section: title/text/list-copy are
 * text-align:left and the diamond list marker is a background-image at
 * "left center" with padding-left. Mirror it all for RTL. */
[dir="rtl"] .home-info-block .title,
[dir="rtl"] .home-info-block .text,
[dir="rtl"] .home-info-block .list ul li span,
[dir="rtl"] .home-info-block .list ul li p {
    text-align: right;
}
/* The theme zeroes the list's padding-left, but the browser default
 * padding-inline-start (40px) maps to padding-RIGHT in RTL, so the whole list
 * gets pushed off the right edge. Clear it (covers mobile + desktop). */
[dir="rtl"] .home-info-block .list ul {
    padding-left: 0;
    padding-right: 0;
}
[dir="rtl"] .home-info-block .list ul li {
    background-position: right center;
    padding-left: 0;
    padding-right: 34px;
}

/* ---------- WooCommerce shop loop / catalog ----------
 * The catalogue uses a custom theme wrapper .main-content-product
 * (not the default WC ul.products), inside which each card is the
 * .cat_pronuct block. Flip the wrapper to RTL so the grid flows
 * right-to-left, then lock each card's text content to LTR + right-
 * aligned — Latin product title, Latin prices, sale badge. */
[dir="rtl"] .main-content-product,
[dir="rtl"] ul.products,
[dir="rtl"] .swiper-wrapper {
    direction: rtl;
}

[dir="rtl"] .main-content-product .cat_pronuct,
[dir="rtl"] .cat_pronuct,
[dir="rtl"] ul.products li.product,
[dir="rtl"] .swiper-slide .cat_pronuct {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}
/* Title: theme emits <a class="woocommerce-loop-product__title"> with
 * flex: 0 0 calc(100% - 40px). Force full width + block so text-align
 * actually pushes to the right edge. */
[dir="rtl"] .cat_pronuct a.woocommerce-loop-product__title,
[dir="rtl"] .cat_pronuct .woocommerce-loop-product__title {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: block !important;
    width: 100% !important;
    direction: ltr !important;
    text-align: right !important;
    unicode-bidi: isolate;
}

/* Price: theme sets it to display:flex; flex-wrap:wrap and uses `order`
 * to position <del>/<ins>/badge. We must KEEP display:flex (block would
 * blow the gap between old/new price wide). Override only the flex-basis
 * of .price as a row, and use justify-content:flex-end to push children
 * to the right edge. */
[dir="rtl"] .cat_pronuct .price,
[dir="rtl"] .cat_pronuct p.price {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    direction: ltr !important;
    justify-content: flex-end !important;
    text-align: right !important;
    unicode-bidi: isolate;
}

/* Tighten the visual gap between the old and new price chips. The theme
 * adds margin-right: 10px on every direct child of .price — kill it so
 * the chips sit naturally close together at the right edge. */
[dir="rtl"] .cat_pronuct .price > *,
[dir="rtl"] .cat_pronuct p.price > * {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* Inner Latin-only spans (amounts, currency symbols) — kept LTR. */
[dir="rtl"] .cat_pronuct .woocommerce-Price-amount,
[dir="rtl"] .cat_pronuct .woocommerce-Price-currencySymbol {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Discount badge inside loop cards — catch every variant of its class.
 * Force LTR-isolate so "-19%" never renders as "19%-" or "--19%". */
[dir="rtl"] .cat_pronuct .onsale,
[dir="rtl"] .cat_pronuct span.onsale,
[dir="rtl"] .cat_pronuct .discount-badge-single,
[dir="rtl"] .cat_pronuct [class*="discount"],
[dir="rtl"] .cat_pronuct [class*="badge"],
[dir="rtl"] .cat_pronuct [class*="sale"] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: center !important;
}

[dir="rtl"] .woocommerce-breadcrumb,
[dir="rtl"] .woocommerce-result-count,
[dir="rtl"] .woocommerce-ordering {
    direction: rtl;
    text-align: right;
}

/* Sale badge: position swap from top-left to top-right. AND force LTR
 * direction on the badge itself so the "-18%" doesn't render as "18%-".
 * The badge is a small island of Latin punctuation in an RTL block;
 * without isolate the trailing "%" can swap to the start. */
[dir="rtl"] .onsale,
[dir="rtl"] span.onsale,
[dir="rtl"] .product .onsale,
[dir="rtl"] .cat_pronuct .onsale,
[dir="rtl"] .discount-badge-single {
    left: auto !important;
    right: 12px !important;
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: center !important;
}

/* ---------- Form fields ---------- */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* ---------- Bidi anchoring utilities ---------- */
/* Wrap any mixed-script run in this when the browser scrambles it.
 * Latin text inside an RTL block is the usual culprit (e.g. "30-day"
 * comes out as "day-30"). */
[dir="rtl"] .ifadj-ltr,
[dir="rtl"] .ifadj-ltr * {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: left;
}

/* Numbers + units in product attribute tables — diamond carat, mm, %.
 * Cells that hold these stay LTR regardless of column direction. */
[dir="rtl"] .product_information td,
[dir="rtl"] .product_information th,
[dir="rtl"] .information_param,
[dir="rtl"] .information_shippings,
[dir="rtl"] .price,
[dir="rtl"] .sku,
[dir="rtl"] .summary .price del,
[dir="rtl"] .summary .price ins {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Discount badge ("-23%") — keep number+sign together LTR. */
[dir="rtl"] .onsale,
[dir="rtl"] .badge-discount {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- Footer ---------- */
[dir="rtl"] footer {
    direction: rtl;
    text-align: right;
}
/* The footer Bootstrap row is dir-sensitive: dir=rtl already mirrors the
 * columns (logo -> right, policy menu -> left). 'row-reverse' double-flipped
 * it back to the LTR look, so use plain 'row' and let the mirror stand. */
[dir="rtl"] footer .row {
    flex-direction: row;
}

/* Inside the swapped columns text-align is physical, not logical, so pin the
 * logo to the far right and the policy menu to the far left on desktop. */
@media (min-width: 768px) {
    [dir="rtl"] .footers .footer-left,
    [dir="rtl"] .footers .footer-left .wp-block-image {
        text-align: right;
    }
    [dir="rtl"] .footers #menu-footer {
        justify-content: flex-start;
    }
}

/* ---------- WC Mini-Cart Block (drawer / popup) ----------
 * The block is rendered by React; its DOM is wc-block-* classes. We
 * flip the whole drawer to RTL, then explicitly LTR-isolate the price
 * numbers so they don't visually scramble.
 *
 * Drawer ALWAYS slides from the right edge in RTL (mirror of the LTR
 * version which slides from the right too — Arabic users expect their
 * shopping cart on the "start" side, which IS the right side). */
[dir="rtl"] .wc-block-mini-cart__drawer,
[dir="rtl"] .wc-block-mini-cart,
[dir="rtl"] .wc-block-components-drawer,
[dir="rtl"] .wc-block-cart {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .wc-block-components-drawer,
[dir="rtl"] .wc-block-mini-cart__drawer .wc-block-components-drawer {
    right: 0 !important;
    left: auto !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Kill the blue focus ring on the drawer itself — it's there for a11y
 * but here it just looks like a stray border because the popup is huge
 * and the ring traces its full perimeter. Focus styles on real
 * interactive controls (close-X, Checkout button) are kept by browser
 * defaults — we only nuke it on the drawer container. */
[dir="rtl"] .wc-block-components-drawer:focus,
[dir="rtl"] .wc-block-components-drawer:focus-visible,
[dir="rtl"] .wc-block-mini-cart__drawer:focus,
[dir="rtl"] .wc-block-mini-cart__drawer:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Header row — title on the right, close-X on the left. */
[dir="rtl"] .wc-block-mini-cart__title,
[dir="rtl"] .wc-block-components-drawer__title {
    text-align: right;
}
[dir="rtl"] .wc-block-mini-cart__close-button,
[dir="rtl"] .wc-block-components-drawer__close {
    margin-left: 0;
    margin-right: auto;
    right: auto;
    left: 12px;
}

/* Cart item row: thumbnail on the right, text on the left of it. */
[dir="rtl"] .wc-block-cart-items__row,
[dir="rtl"] .wc-block-cart-item {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .wc-block-cart-item__image,
[dir="rtl"] .wc-block-mini-cart-item__image {
    margin-left: 12px;
    margin-right: 0;
}

/* Prices: keep LTR isolation so "$235" / "$197" never invert. */
[dir="rtl"] .wc-block-formatted-money-amount,
[dir="rtl"] .wc-block-components-product-price,
[dir="rtl"] .wc-block-cart-item__price,
[dir="rtl"] .wc-block-mini-cart__amount,
[dir="rtl"] .wc-block-cart__totals .wc-block-components-totals-item__value,
[dir="rtl"] .wc-block-components-totals-item__value {
    direction: ltr !important;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Subtotal row */
[dir="rtl"] .wc-block-mini-cart__footer,
[dir="rtl"] .wc-block-components-totals-item {
    flex-direction: row-reverse;
    text-align: right;
}

/* "Shipping, taxes, and discounts..." disclaimer line — bidi-anchor so
 * the trailing "." doesn't jump to the visual start. */
[dir="rtl"] .wc-block-components-totals-item__description,
[dir="rtl"] .wc-block-mini-cart__footer-actions p {
    text-align: right;
    unicode-bidi: plaintext;
}

/* Checkout button stays full-width but with RTL-aware text alignment. */
[dir="rtl"] .wc-block-mini-cart__footer .wc-block-components-button,
[dir="rtl"] .wc-block-components-checkout-button {
    text-align: center;
}

/* Remove item link */
[dir="rtl"] .wc-block-cart-item__remove-link {
    text-align: right;
    direction: rtl;
}

/* ---------- Bootstrap grid sanity ---------- */
/* Bootstrap 5 has its own RTL build; here we just nudge a couple of
 * theme-side overrides where columns float left explicitly. */
[dir="rtl"] [class*="col-"] {
    float: none;
}

/* ---------- "Showing X of Y / Sort by" alignment ---------- */
[dir="rtl"] .woocommerce-result-count {
    float: right;
}
[dir="rtl"] .woocommerce-ordering {
    float: left;
}

/* ---------- IFAD title generator second line ---------- */
[dir="rtl"] .product_title .ifadj-title-line2 {
    text-align: right;
}

/* =========================================================
 * Single product page — summary column
 * (price / SKU / shipping line / "per carat" / action buttons)
 *
 * The product title stays English (auto-generated, no translation),
 * so it should read LTR. Everything else that the customer reads
 * (shipping note, action buttons) flips to RTL. Price + SKU + per-carat
 * stay LTR because they're numbers and Latin codes — the bidi algorithm
 * scrambles them otherwise (you see "S032\IFS\23\A :SKU" instead of
 * "SKU: S032\IFS\23\A").
 * ========================================================= */

/* Product title block stays LTR (English auto-generated title), but
 * the block itself is right-anchored to mirror the summary's RTL flow.
 * !important needed because the theme has higher-specificity rules. */
[dir="rtl"] .product_title,
[dir="rtl"] .summary > .product_title,
[dir="rtl"] h1.product_title,
[dir="rtl"] .woocommerce div.product .product_title {
    direction: ltr !important;
    text-align: right !important;
    unicode-bidi: isolate;
}

/* Summary container — default RTL for everything else inside it. */
[dir="rtl"] .summary,
[dir="rtl"] .summary.entry-summary {
    direction: rtl;
    text-align: right;
}

/* The theme already lays out summary as flex (.summary{display:flex}),
 * with .price taking 70% on the left and .product_meta 30% on the right.
 * For RTL we keep the flex pipeline intact and just flip direction —
 * flex auto-mirrors, so price ends up on the RIGHT and product_meta on
 * the LEFT, which is what we want. We deliberately avoid float/inline-
 * block here — they nuke the theme's flex sizing. */
[dir="rtl"] .woocommerce div.product div.summary {
    direction: rtl;
}

/* Price block — content stays LTR (Latin amounts + Latin per-carat).
 * The theme sets .price{display:flex; flex-wrap:wrap} so text-align is a
 * no-op; we need justify-content:flex-end to push the children to the
 * right edge of the 70%-wide flex item. */
[dir="rtl"] .summary p.price,
[dir="rtl"] .woocommerce div.product div.summary .price {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: right !important;
    justify-content: flex-end !important;
}

/* product_meta in RTL: text starts on the right (mirror of the theme's
 * default text-align: right which was visually-right in LTR). */
[dir="rtl"] .woocommerce div.product div.summary .product_meta {
    text-align: left;
}
[dir="rtl"] .summary .sku_wrapper,
[dir="rtl"] .summary .sku {
    direction: ltr;
    unicode-bidi: isolate;
}

/* .posted_in is hidden by the theme (style.css: .posted_in{display:none}).
 * Re-state it here with !important in case some earlier cached version of
 * this file or another rule turned it back on. */
[dir="rtl"] .summary .posted_in,
[dir="rtl"] .product_meta .posted_in,
[dir="rtl"] .posted_in {
    display: none !important;
}

/* Per-carat line is a price → LTR. */
[dir="rtl"] .price-per-carat,
[dir="rtl"] .summary .price-per-carat,
[dir="rtl"] .summary .per-carat,
[dir="rtl"] [class*="per_carat"],
[dir="rtl"] [class*="per-carat"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* Shipping / returns / appraisal info — the inner <p class="icon">
 * holds an SVG followed by the Arabic shipping line. We flip the
 * paragraph to RTL so the icon naturally sits on the right and the
 * text reads right-to-left. */
[dir="rtl"] .information_shipping_text,
[dir="rtl"] .information_shipping_text p,
[dir="rtl"] .information_shipping_text p.icon,
[dir="rtl"] .information_shipping,
[dir="rtl"] .information_shippings,
[dir="rtl"] .information_returns,
[dir="rtl"] .information_appraisal {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .information_shipping_text p.icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
[dir="rtl"] .information_shipping_text p.icon svg {
    flex-shrink: 0;
    order: 0; /* svg first in flow → on the right in row + rtl */
}

/* Trust badges grid (free returns / appraisal / free shipping). Each
 * .information_shipping is a flex row [.icon][.texts] laid out LTR by the
 * theme, and .title/.text are hard-set text-align:left. Force an RTL context
 * (icon → right via the default flex-row) and right-align the copy. Higher
 * specificity than the theme's .information_shipping .title/.text. */
[dir="rtl"] .information_shippings .information_shipping {
    direction: rtl;
    flex-direction: row;
}
[dir="rtl"] .information_shippings .information_shipping .title,
[dir="rtl"] .information_shippings .information_shipping .text {
    text-align: right;
}

/* Attribute pills row ("Certificate: IGI", "Eye Clean: Yes", "Cut: Very Good"…)
 * Real class on the page is .information_top_param > .param. Each pill is
 * "English label: English value" → keep each pill LTR, but lay the row
 * right-to-left so the first pill sits on the right edge. */
[dir="rtl"] .information_top_param,
[dir="rtl"] .summary .information_top_param {
    direction: rtl;
    text-align: right;
    justify-content: flex-start;
}
[dir="rtl"] .information_top_param .param {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: center;
}

/* product_meta block (SKU + Categories) — pin the whole block to the
 * right edge of summary; both rows inside stay LTR (English labels). */
[dir="rtl"] .summary .product_meta {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .summary .product_meta .sku_wrapper,
[dir="rtl"] .summary .product_meta .posted_in {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    text-align: left;
}

/* WishSuite heart button — keep it pinned to the right of the title row. */
[dir="rtl"] .summary .wishsuite_button {
    direction: ltr;
    text-align: right;
}

/* Form.cart wraps the quantity + Add to cart button. Reverse so the
 * button sits at the right edge (same logical place as in LTR). */
[dir="rtl"] .summary form.cart {
    direction: rtl;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
}

/* Action button row (Add to cart / Need a consultation / Request info)
 * stays in a row but reversed so primary action sits on the right. */
[dir="rtl"] .information_buttons,
[dir="rtl"] .summary .information_buttons {
    direction: rtl;
    justify-content: flex-end;
}

/* Diamond Information attribute table — labels on the right, values on
 * the left in RTL. Numbers/grades inside cells stay LTR. */
[dir="rtl"] .product_information table,
[dir="rtl"] .product_information ul,
[dir="rtl"] .product_information {
    direction: rtl;
}
[dir="rtl"] .product_information td,
[dir="rtl"] .product_information th,
[dir="rtl"] .product_information li,
[dir="rtl"] .product_information .label,
[dir="rtl"] .product_information .value {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}
[dir="rtl"] .product_information .title {
    direction: rtl;
    text-align: right;
}

/* Sale badge "-18%" — keep number + sign together, never flip. */
[dir="rtl"] .summary .onsale,
[dir="rtl"] .summary span.onsale,
[dir="rtl"] .product .onsale {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: center;
}

/* ---------- Pagination + carousel arrows (RTL: "next" points/leads left) ----------
 * Catalog pagination: flow the numbers right-to-left and mirror the
 * next/prev glyphs so "next" (→) becomes ← in Arabic. Digits aren't touched. */
[dir="rtl"] .woocommerce-pagination ul,
[dir="rtl"] nav.woocommerce-pagination ul {
    direction: rtl;
}
[dir="rtl"] .woocommerce-pagination .next,
[dir="rtl"] .woocommerce-pagination .prev {
    display: inline-block;
    transform: scaleX(-1);
}
/* Swiper carousels (home shapes / featured products / hero). The theme draws
 * its own arrow icons via ::after; mirror them and swap sides. The swipers are
 * also forced into RTL mode in custom.js so the scroll direction matches the
 * arrows (otherwise the button would lead the opposite way to where it points). */
[dir="rtl"] .swiper-button-next::after,
[dir="rtl"] .swiper-button-prev::after {
    transform: scaleX(-1);
}
[dir="rtl"] .swiper-button-next {
    right: auto;
    left: 20px;
}
[dir="rtl"] .swiper-button-prev {
    left: auto;
    right: 20px;
}
[dir="rtl"] .home-info-slidershape .swiper-button-next {
    right: auto;
    left: calc(50% - 29px);
}
[dir="rtl"] .home-info-slidershape .swiper-button-prev {
    left: auto;
    right: calc(50% - 29px);
}

/* ---------- Product "Shop with confidence" tabs (trust 2x2 tiles) ----------
 * Tab buttons + tiles flow right-to-left; the theme hard-codes the tile copy
 * to text-align:left, so override to right. */
[dir="rtl"] .information_tabs {
    direction: rtl;
}
[dir="rtl"] .information_tabs_info,
[dir="rtl"] .information_tabs_info .title,
[dir="rtl"] .information_tabs_info .text {
    text-align: right;
}

/* ---------- Filter Everything sliders (ion.rangeSlider) ----------
 * ion.rangeSlider has no RTL mode: under the page's dir=rtl its pointer math
 * inverts, so dragging one way moves the handle the other way (the reported
 * "drag one side, shows the other" bug). Both the carat slider (numeric,
 * .wpc-filter-range-form) and the grade sliders (Cut / Polish / Symmetry /
 * Fluorescence, .wpc-filter-rangetext-form) are value scales whose labels are
 * English technical terms we never translate. So render the whole widget LTR
 * exactly like the English site — the drag behaves correctly and the labels
 * keep their natural left-to-right order. */
[dir="rtl"] .wpc-filter-range-form,
[dir="rtl"] .wpc-filter-range-form .irs,
[dir="rtl"] .wpc-filter-rangetext-form,
[dir="rtl"] .wpc-filter-rangetext-form .irs {
    direction: ltr;
}

/* ---------- Catalog "Sort By" dropdown (RTL) ----------
 * The select is sized to its widest option, so in RTL the native arrow (which
 * sits on the left edge) ends up far from the shorter selected text — a big
 * visible gap. Drop the native arrow, add our own chevron, and let the box
 * hug the current selection (field-sizing) so the arrow sits next to the text.
 * field-sizing is honoured by modern Chromium/Safari; elsewhere the chevron
 * still pins to a fixed offset, which is far tighter than the default. */
[dir="rtl"] .woocommerce .woocommerce-ordering select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    field-sizing: content;
    width: auto;
    min-width: 0;
    padding-right: 0;
    padding-left: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230E0E31' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 11px 8px;
}

/* ---------- IFAD CATALOG carousel header (RTL) ----------
 * The title carries padding-left:80px so it stays optically centred against the
 * nav arrows that sit on the right in LTR. In RTL the flex header mirrors and
 * the arrows move to the left, so that offset has to flip to the right or the
 * title drifts off-centre. The custom prev/next arrow glyphs (long-line arrows)
 * are also mirrored so "next" leads left, matching the RTL scroll direction. */
[dir="rtl"] .home-products-header h1 {
    padding-left: 80px;
    padding-right: 0px;
}
[dir="rtl"] .home-info-products .home-products-nav .swiper-button-prev:after,
[dir="rtl"] .home-info-products .home-products-nav .swiper-button-next:after {
    display: inline-block;
    transform: scaleX(-1);
}
@media (max-width: 768px) {
    /* Mobile drops the centring offset entirely (see style.css) — keep RTL in sync. */
    [dir="rtl"] .home-products-header h1 {
        padding-left: 0;
    }
}