/* ============================================================================ Kalles RTL / Arabic stylesheet — loaded only when the active language is RTL (dir="rtl" on , gated by kalles_rtl in header.twig). Two jobs: 1) apply a proper Arabic webfont (Cairo) everywhere text renders; 2) mirror the handful of places the theme hardcodes physical left/right. The already flips normal block/inline flow, so this only patches explicit LTR assumptions — it is intentionally conservative. ========================================================================== */ /* ---- 1. Arabic typography ---- */ [dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] button, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] .kalles-pdp__title, [dir="rtl"] .kalles-section-title, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: "Cairo", "Tajawal", "Segoe UI", "Tahoma", sans-serif; } /* Arabic digits stay Latin (prices/specs read better); keep numerals upright. */ [dir="rtl"] .kalles-pcard__price, [dir="rtl"] .kalles-pdp__price, [dir="rtl"] .kalles-mini-cart__price { direction: ltr; unicode-bidi: embed; } /* ---- 2. Base alignment ---- */ [dir="rtl"] body { text-align: right; } [dir="rtl"] .kalles-container { text-align: right; } [dir="rtl"] ul { padding-right: 0; } /* ---- 3. Header / nav ---- */ [dir="rtl"] .kalles-header__top-inner, [dir="rtl"] .kalles-header__actions, [dir="rtl"] .kalles-header__nav-inner { flex-direction: row-reverse; } [dir="rtl"] .kalles-switcher__menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .kalles-megamenu { left: auto; right: 0; } [dir="rtl"] .kalles-megamenu__viewall i { transform: scaleX(-1); } /* ---- 4. Breadcrumb separators / chevrons that point the wrong way ---- */ [dir="rtl"] .breadcrumb i, [dir="rtl"] .kalles-pdp .breadcrumb, [dir="rtl"] .fa-angle-right, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-arrow-right { transform: scaleX(-1); } /* ---- 5. Product cards / grids ---- */ [dir="rtl"] .kalles-pcard, [dir="rtl"] .kalles-pcard__info, [dir="rtl"] .kalles-pcard__title { text-align: right; } [dir="rtl"] .kalles-mbadge, [dir="rtl"] .kalles-pcard__badges, [dir="rtl"] .kalles-pcard__discount { left: auto; right: .8rem; } [dir="rtl"] .kalles-mwish { right: auto; left: .8rem; } /* ---- 6. PDP ---- */ [dir="rtl"] .kalles-pdp__meta, [dir="rtl"] .kalles-pdp__summary, [dir="rtl"] .kalles-pdp__features { text-align: right; } [dir="rtl"] .kalles-pdp__coupon { flex-direction: row-reverse; } /* ---- 7. Footer ---- */ [dir="rtl"] .kalles-footer__top, [dir="rtl"] .kalles-footer__col, [dir="rtl"] .kalles-footer__bottom { text-align: right; } [dir="rtl"] .kalles-footer__col ul { padding-right: 0; } [dir="rtl"] .kalles-newsletter-band__inner { text-align: right; } /* ---- 8. Cart drawer ---- */ [dir="rtl"] .kalles-drawer--end { left: 0; right: auto; } [dir="rtl"] .kalles-mini-cart__remove { right: auto; left: 0; } /* ---- 9. Forms ---- */ [dir="rtl"] .form-control, [dir="rtl"] .form-select, [dir="rtl"] .kalles-facet__input { text-align: right; } [dir="rtl"] label.col-form-label { text-align: right; }