/* ===== Mille ultra — RTL layer (Arabic) ===================================== Loaded AFTER mille-ultra.css on Arabic (-ar) product pages, which carry . Mirrors the LTR ultra design for right-to-left. Logical mirroring only — colours, sizes, type scale stay identical to EN. */ [dir="rtl"]{ direction:rtl; } [dir="rtl"] body{ text-align:right; } /* --- generic text alignment flips --- */ [dir="rtl"] .definition, [dir="rtl"] .lead, [dir="rtl"] .shead, [dir="rtl"] .story-copy, [dir="rtl"] .guide-block, [dir="rtl"] .guide-lead, [dir="rtl"] .faq-a, [dir="rtl"] .qa-a, [dir="rtl"] .qa-a-inner{ text-align:right; } [dir="rtl"] .shead.center, [dir="rtl"] .cat-guide .section-inner, [dir="rtl"] .cat-faq .section-inner{ text-align:center; } /* --- tables: spec + comparison + guide --- */ [dir="rtl"] .spectbl th,[dir="rtl"] .spectbl td, [dir="rtl"] .cmptbl th,[dir="rtl"] .cmptbl td, [dir="rtl"] .guide-table th,[dir="rtl"] .guide-table td{ text-align:right; } /* --- FAQ accordion: flip the +/− marker + the summary layout --- */ [dir="rtl"] .qa-q{ flex-direction:row-reverse; text-align:right; } [dir="rtl"] .faq-item summary{ padding:22px 0 22px 42px; } [dir="rtl"] .faq-item summary::after{ right:auto; left:8px; } /* --- key-facts / why-choose / spec grids: let flex/grid flow RTL naturally --- */ [dir="rtl"] .facts,[dir="rtl"] .guide-grid,[dir="rtl"] .why,[dir="rtl"] .reasons{ direction:rtl; } [dir="rtl"] .fact,[dir="rtl"] .guide-card,[dir="rtl"] .why .card{ text-align:right; } /* --- breadcrumb: reverse the row, keep separators sensible --- */ [dir="rtl"] .crumbs .wrap,[dir="rtl"] .breadcrumbs-inner{ flex-direction:row-reverse; justify-content:flex-end; } /* --- hero watermark + any left/right-anchored decorative elements: mirror --- */ [dir="rtl"] .hero-watermark{ left:auto; right:0; } [dir="rtl"] .price-sm,[dir="rtl"] .badge,[dir="rtl"] .pill{ text-align:right; } /* --- mobile sticky bar (full-width, just flip inner flow) --- */ [dir="rtl"] .mbar{ direction:rtl; } [dir="rtl"] .mbar .mbar-inner{ flex-direction:row-reverse; } /* --- CTA / story figures / related rail flow RTL --- */ [dir="rtl"] .cta,[dir="rtl"] .story,[dir="rtl"] .related,[dir="rtl"] .relrail{ direction:rtl; } /* --- lists / checks: bullet + tick on the right --- */ [dir="rtl"] ul,[dir="rtl"] ol{ padding-right:1.2em; padding-left:0; } [dir="rtl"] .ck{ margin-left:.4rem; margin-right:0; } /* --- LTR data inside RTL --- isolate the NUMBER ITSELF (markup wraps phones/bare numbers in ). NEVER force a whole flex row to direction:ltr — it displaces the icon. Footer rows, contact info etc. inherit dir=rtl (icon on right); only digits stay LTR. */ [dir="rtl"] bdi{ unicode-bidi:isolate; } [dir="rtl"] .price,[dir="rtl"] .price-sm,[dir="rtl"] .price-sm b, [dir="rtl"] .fact dd,[dir="rtl"] time{ unicode-bidi:plaintext; } /* footer inherits dir=rtl (grid/flex/text-align mirror automatically) — just flip directional spacing */ [dir="rtl"] .foot-cta{ margin-right:0; margin-left:.5rem; } [dir="rtl"] .foot-bottom{ direction:rtl; } /* --- Google-reviews badge: keep stars + score LTR; mirror divider & padding --- */ [dir="rtl"] .greviews{ padding:.42rem .6rem .42rem .85rem; } [dir="rtl"] .grev-stars{ direction:ltr; } [dir="rtl"] .grev-score{ direction:ltr; unicode-bidi:isolate; } [dir="rtl"] .grev-by{ padding-left:0; padding-right:.55rem; border-left:0; border-right:1px solid var(--line-2); }