/* ============================================================ RTL layer — loaded only when (Arabic). The storefront is built mostly with flexbox/grid + gap, which the browser mirrors automatically under dir=rtl. This sheet handles the physical-direction exceptions (text-align, hard left/right paddings, ::before tick markers) and keeps Latin-script/number runs (prices, phone, email, code) left-to-right. ============================================================ */ /* Numbers, prices, codes, emails, phone — keep these LTR even in an RTL page */ [dir="rtl"] .price, [dir="rtl"] .pd-price, [dir="rtl"] .price-block, [dir="rtl"] .cs-total, [dir="rtl"] .summary-total, [dir="rtl"] [data-cart-count], [dir="rtl"] .lang-switch__code, [dir="rtl"] .mono, [dir="rtl"] .tabular, [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; } /* Eyebrow ticks / inline markers drawn with a left margin → flip to the right */ [dir="rtl"] .eyebrow::before, [dir="rtl"] .section-eyebrow::before { margin-right: 0; margin-left: 8px; } /* Forms: labels and inputs read right-to-left */ [dir="rtl"] label, [dir="rtl"] .field label, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } /* Buttons / pills with an icon + text: let flexbox mirror, but keep single-line centering */ [dir="rtl"] .btn, [dir="rtl"] .add-btn { text-align: center; } /* Header switcher dropdown opens toward the in(line)-start in RTL (already flipped in shop.css) */ /* Cart / summary rows: amount column moves to the (visual) left */ [dir="rtl"] .cs-row, [dir="rtl"] .summary-row { flex-direction: row-reverse; } /* Generic: anything explicitly left-aligned in LTR should follow the reading side */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* Floating WhatsApp button hugs the other corner */ [dir="rtl"] .wa-float { right: auto; left: 16px; } /* Skip-link */ [dir="rtl"] .skip-link { right: 12px; left: auto; }