/** * Frontend RTL overrides. * All rules apply only when (e.g. Arabic). */ /* Use IBM Plex Sans Arabic instead of Jost/Cormorant Garamond in RTL */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .brand-mark, [dir="rtl"] .navbar-misk .navbar-brand, [dir="rtl"] .category-title { font-family: "IBM Plex Sans Arabic", sans-serif !important; } [dir="rtl"] body { font-weight: 500; } [dir="rtl"] .btn { font-family: "IBM Plex Sans Arabic", sans-serif !important; font-weight: 500; } [dir="rtl"] .category-card .btn-ghost { font-size: 0.8rem; } /* Category card light sweep: right → left in RTL */ [dir="rtl"] .category-card::after { left: auto; right: 0; background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.18), transparent); transform: translateX(100%); } [dir="rtl"] .category-card:hover::after { transform: translateX(-280%); } [dir="rtl"] .dropdown-menu-end { right: auto; left: 0; } [dir="rtl"] .dropdown-menu-end[data-bs-popper] { right: auto; left: 0; } [dir="rtl"] .dropdown-menu { left: auto; } [dir="rtl"] .dropdown-menu, [dir="rtl"] .dropdown-item { text-align: right; } /* Navbar brand: margin on the left in RTL (instead of right in LTR) */ [dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; } /* Navbar controls (icons + toggler) on the left on mobile in RTL */ [dir="rtl"] .navbar-controls { margin-right: auto !important; margin-left: 0px !important; } /* Dropdown toggle caret: margin on the right in RTL */ [dir="rtl"] .dropdown-toggle::after { margin-left: 0; margin-right: 0.255em; } /* .btn-cart hover effect: slide in from the right in RTL */ [dir="rtl"] .btn-cart::before { transform: translateX(100%); } [dir="rtl"] .btn-cart:hover::before { transform: translateX(0); } /* Icon with me-2: margin on the left in RTL (between text and icon) */ [dir="rtl"] .me-2 { margin-right: 0; margin-left: 0.5rem; } /* Contact info icons: keep spacing between the icon and text in RTL */ [dir="rtl"] .contact-info .icon-circle { margin-right: 0; margin-left: 0.75rem; } /* Form check: input on the right in RTL */ [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .form-check .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; } /* Color swatch: on the right of the label text in RTL (swap margin) */ [dir="rtl"] .color-swatch { margin-right: 0; margin-left: 0.5rem; } /* Form select: arrow on the left in RTL */ [dir="rtl"] .form-select { background-position: left 0.75rem center; padding-left: 2.25rem; padding-right: 0.75rem; } [dir="rtl"] .sort-select, [dir="rtl"] #sortSelect { background-position: left 0.75rem center; padding-left: 2.25rem; padding-right: 1rem; } /* Breadcrumb: flip separator and padding for RTL (override Bootstrap LTR defaults) */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right !important; padding-right: 0 !important; padding-left: var(--bs-breadcrumb-item-padding-x) !important; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0 !important; padding-right: var(--bs-breadcrumb-item-padding-x) !important; } /* Product card category tag: position on the right in RTL */ [dir="rtl"] .product-tag { left: auto; right: 0.75rem; } /* Product share icon: position on the left in RTL */ [dir="rtl"] .product-share { right: auto; left: 0.75rem; } /* Product wishlist: position on the left in RTL (share moves right) */ [dir="rtl"] .product-wishlist { right: auto; left: 3rem; } /* Price compare: swap margin in RTL */ [dir="rtl"] .price-compare { margin-right: 0; margin-left: 0.5rem; } /* Cart attributes list: no padding on the right in RTL */ [dir="rtl"] .cart-attributes { padding-right: 0; } /* Footer links ul: no padding on the right in RTL */ [dir="rtl"] .site-footer .footer-links { padding-right: 0; } /* View product button: show left-pointing arrow in RTL */ [dir="rtl"] .view-product-arrow .view-product-arrow-r { display: none; } [dir="rtl"] .view-product-arrow .view-product-arrow-l { display: inline; } [dir="rtl"] .style-look__content, [dir="rtl"] .style-look__description { text-align: right; }