/* ═══════════════════════════════════════════════════════════════════════════ PRACTICAL — RTL (Arabic) OVERRIDES TranslatePress sets lang="ar" on when switching to Arabic — it does NOT automatically add dir="rtl". We target html[lang^="ar"] in CSS, and a PHP hook (functions.php) injects dir="rtl" as belt-and-suspenders. ═══════════════════════════════════════════════════════════════════════════ */ /* Base direction — covers everything not explicitly listed below */ html[lang^="ar"] body, html[lang^="ar"] body * { direction: rtl; } /* ── 1. Kadence block text alignment ────────────────────────────────────── */ /* !important needed — Kadence outputs inline style="text-align:left" */ html[lang^="ar"] .wp-block-kadence-advancedheading, html[lang^="ar"] .wp-block-kadence-advancedheading .wp-block-kadence-advancedheading, html[lang^="ar"] .wp-block-kadence-column .kt-inside-inner-col, html[lang^="ar"] .wp-block-kadence-column p, html[lang^="ar"] .wp-block-kadence-column h1, html[lang^="ar"] .wp-block-kadence-column h2, html[lang^="ar"] .wp-block-kadence-column h3, html[lang^="ar"] .wp-block-kadence-column h4, html[lang^="ar"] .wp-block-kadence-row .kt-row-column-wrap, html[lang^="ar"] h1.wp-block-kadence-advancedheading, html[lang^="ar"] h2.wp-block-kadence-advancedheading, html[lang^="ar"] h3.wp-block-kadence-advancedheading, html[lang^="ar"] h4.wp-block-kadence-advancedheading, html[lang^="ar"] h5.wp-block-kadence-advancedheading, html[lang^="ar"] h6.wp-block-kadence-advancedheading { text-align: right !important; } /* ── 2. Product badges — keep on LEFT in Arabic to avoid clashing with */ /* bundle/sale badge which sits on the right side of the card */ html[lang^="ar"] .pcd-prod-new, html[lang^="ar"] .pcd-prod-best-seller { left: 10px; right: auto; } /* When both badges coexist, keep the vertical offset */ html[lang^="ar"] .pcd-prod-new + .pcd-prod-best-seller { top: 38px; } /* ── 3. Bundle slider (style.css) ───────────────────────────────────────── */ /* Badges inside the bundle slider go to the RIGHT (no bundle/sale badge conflict) */ html[lang^="ar"] .pbs-prod-unit .pcd-prod-new, html[lang^="ar"] .pbs-prod-unit .pcd-prod-best-seller { left: auto; right: 10px; } /* Second product unit has border-left + padding-left as visual divider */ html[lang^="ar"] .pbs-prod-unit--second { border-left: none; border-right: 0.5px solid rgba(0,0,0,0.1); padding-left: 0; padding-right: 20px; } @media (max-width: 1024px) { html[lang^="ar"] .pbs-prod-unit--second { border-right: none; padding-right: 0; } } /* Keep nav arrows pointing the same direction as English — don't mirror them */ html[lang^="ar"] .pbs-nav-btns { direction: ltr !important; } /* Product grid pagination arrows */ html[lang^="ar"] .ppg-pagination { direction: ltr !important; } /* ── 4. Archive (practical-archive.css) ─────────────────────────────────── */ html[lang^="ar"] .pa-sort-form { flex-direction: row-reverse; } /* Filter toggle — direction:rtl (global) already reverses flex item order; just ensure text is right-aligned and mirror the chevron */ html[lang^="ar"] .pa-filter-toggle { text-align: right; } html[lang^="ar"] .pa-ftog-icon { transform: scaleX(-1); } /* Closed state: rotate the already-mirrored icon */ html[lang^="ar"] .pa-filter-group.closed .pa-ftog-icon { transform: scaleX(-1) rotate(-90deg); } /* Sidebar head — direction:rtl on the flex container swaps "FILTER" and "Clear all" */ html[lang^="ar"] .pa-sidebar-head { direction: rtl; } /* Category items — make flex so count sits at the end (left in RTL) */ html[lang^="ar"] .pa-f-cat { display: flex; justify-content: space-between; text-align: right; } /* Active filter chips */ html[lang^="ar"] .pa-chips { flex-direction: row-reverse; } /* Archive card — price pill is bottom-left → bottom-right in RTL */ html[lang^="ar"] .pa-price-pill { left: auto; right: 10px; } /* Mobile badge overrides — archive already moves badges to bottom-right on mobile; in RTL flip those to bottom-left */ @media (max-width: 700px) { html[lang^="ar"] .pa-card-img .pcd-prod-new, html[lang^="ar"] .pa-card-img .pcd-prod-best-seller { right: auto; left: 10px; bottom: 10px; top: auto; } html[lang^="ar"] .pa-card-img .pcd-prod-new + .pcd-prod-best-seller { bottom: 38px; } } /* ── 5. Product grid (practical-product-grid.css) ───────────────────────── */ /* Price pill is bottom-left → bottom-right in RTL */ html[lang^="ar"] .ppg-price-pill { left: auto; right: 6px; } html[lang^="ar"] .ppg-price-pill del { margin-right: 0; margin-left: 2px; } /* Responsive price pill overrides */ @media (max-width: 480px) { html[lang^="ar"] .ppg-price-pill { left: auto; right: 8px; } } @media (min-width: 481px) { html[lang^="ar"] .ppg-price-pill { left: auto; right: 10px; } } /* ── 6. Product carousel (practical-carousel.css) ───────────────────────── */ /* Track peek padding: right peek → left peek in RTL */ html[lang^="ar"] .prc-track { padding-right: 0; padding-left: calc(100vw / 3.5 * 0.5); } /* Price pill: bottom-left → bottom-right */ html[lang^="ar"] .prc-price-pill { left: auto; right: 10px; } html[lang^="ar"] .prc-price-pill del { margin-right: 0; margin-left: 2px; } /* Sale/bundle badge: top-right → top-left */ html[lang^="ar"] .prc-badge { right: auto; left: 10px; } /* New badge on carousel cards: top-left → top-right */ html[lang^="ar"] .prc-img-wrap .pcd-prod-new, html[lang^="ar"] .prc-img-wrap .pcd-prod-best-seller { left: auto; right: 10px; } @media (max-width: 768px) { html[lang^="ar"] .prc-track { padding-right: 0; padding-left: calc(100vw / 1.5 * 0.5); } } /* ── 7. Single product template (practical-product-template.css) ────────── */ /* Gallery: thumbs strip should appear on the RIGHT in RTL */ html[lang^="ar"] .psp-gallery { flex-direction: row-reverse; } /* Tab panel lists — bullets indent from the right */ html[lang^="ar"] .psp-tab-panel ul { padding-left: 0; padding-right: 18px; } /* Explore modal — center all content in Arabic */ html[lang^="ar"] .psp-explore-modal-inner, html[lang^="ar"] .psp-explore-modal-body, html[lang^="ar"] .psp-explore-coming-soon, html[lang^="ar"] .psp-explore-coming-soon h2, html[lang^="ar"] .psp-explore-coming-soon p { text-align: center !important; } /* Explore button has explicit text-align:left */ html[lang^="ar"] .psp-explore { text-align: right; } /* Bundle sheet copy-all button */ html[lang^="ar"] .bp-copy-all { text-align: right; } /* Pack selector labels */ html[lang^="ar"] .psp-pk { text-align: right; } /* Breadcrumb */ html[lang^="ar"] .psp-breadcrumb { text-align: right; } /* Cross-sell card body */ html[lang^="ar"] .psp-cross-body { text-align: right; } /* Sheet slot product names */ html[lang^="ar"] .psp-shead, html[lang^="ar"] .psp-stitle, html[lang^="ar"] .psp-ssub { text-align: right; } /* Cart toast */ html[lang^="ar"] .psp-cart-toast { flex-direction: row-reverse; } /* ── 8. Cart drawer (practical-cart-drawer.css) ─────────────────────────── */ html[lang^="ar"] .pcd-drawer-item-name, html[lang^="ar"] .pcd-drawer-item-meta, html[lang^="ar"] .pcd-drawer-head { text-align: right; } /* ── 9. Letter-spacing — Arabic doesn't use Latin letter-spacing ────────── */ /* Reduce/remove letter-spacing on uppercase labels in Arabic context */ html[lang^="ar"] .pbs-tab, html[lang^="ar"] .pbs-bc-label, html[lang^="ar"] .pbs-bc-cta, html[lang^="ar"] .ppg-main-tab, html[lang^="ar"] .ppg-pill, html[lang^="ar"] .pa-sidebar-title, html[lang^="ar"] .pa-filter-toggle, html[lang^="ar"] .psp-bundle-label, html[lang^="ar"] .pcd-prod-new, html[lang^="ar"] .pcd-prod-best-seller, html[lang^="ar"] .pcd-sw-new { letter-spacing: 0; } /* ── 10. Accordion ──────────────────────────────────────────────────────── */ /* Flip icon to the end (left) so it appears after the title in RTL reading */ html[lang^="ar"] .kt-blocks-accordion-header { flex-direction: row-reverse; } /* Right-align the title text */ html[lang^="ar"] .kt-blocks-accordion-title-wrap, html[lang^="ar"] .kt-blocks-accordion-title { text-align: right !important; } /* ═══════════════════════════════════════════════════════════════════════════ TARGETED SECTIONS Overrides scoped to specific page sections or block IDs. ═══════════════════════════════════════════════════════════════════════════ */ /* Practical Plus loyalty section — center text in Arabic */ html[lang^="ar"] .kadence-column19256_ec856e-05 .kt-inside-inner-col, html[lang^="ar"] .kadence-column19256_ec856e-05 .wp-block-kadence-advancedheading, html[lang^="ar"] .kadence-column19256_ec856e-05 p { text-align: center !important; } /* Reward / referral section (row 7668) — center all content in Arabic */ html[lang^="ar"] .kadence-column7668_d6a41d-5e .kt-inside-inner-col, html[lang^="ar"] .kadence-column7668_d6a41d-5e .wp-block-kadence-advancedheading, html[lang^="ar"] .kadence-column7668_d6a41d-5e p, html[lang^="ar"] .kadence-column7668_7ac470-e9 .kt-inside-inner-col, html[lang^="ar"] .kadence-column7668_7ac470-e9 .wp-block-kadence-advancedheading, html[lang^="ar"] .kadence-column7668_7ac470-e9 p { text-align: center !important; } html[lang^="ar"] .kadence-column7668_7ac470-e9 .kb-buttons-wrap { justify-content: center !important; } /* Product carousel Kadence row wrapper: flip peek padding to left side in RTL */ html[lang^="ar"] .kb-row-layout-id19256_84b969-5f .kt-row-column-wrap { padding-left: 0 !important; padding-right: 4% !important; } /* Footer — align all content to the right in Arabic */ html[lang^="ar"] .kb-row-layout-idba2455-59 .kt-inside-inner-col, html[lang^="ar"] .kb-row-layout-idba2455-59 .wp-block-kadence-advancedheading, html[lang^="ar"] .kb-row-layout-idba2455-59 p { text-align: right !important; } /* Footer icon lists — flip icon margin so icon sits on the right of text */ html[lang^="ar"] .kb-row-layout-idba2455-59 .wp-block-kadence-iconlist { display: flex; justify-content: flex-start; } html[lang^="ar"] .kb-row-layout-idba2455-59 .kt-svg-icon-list { padding-right: 0; margin-left: 0 !important; margin-right: 0 !important; } html[lang^="ar"] .kb-row-layout-idba2455-59 .kt-svg-icon-list-item-wrap { flex-direction: row-reverse; justify-content: flex-start; } html[lang^="ar"] .kb-row-layout-idba2455-59 .kt-svg-icon-list-single { margin-left: 0 !important; margin-right: 10px; } html[lang^="ar"] .kb-row-layout-idba2455-59 .kt-svg-icon-list-text { text-align: right !important; } /* Footer social icons — align to the right */ html[lang^="ar"] .kb-row-layout-idba2455-59 .wp-block-kadence-icon { justify-content: flex-start !important; } /* Button arrows — mirror horizontally so right-arrow becomes left-arrow in Arabic */ html[lang^="ar"] .kb-button .kb-svg-icon-wrap { transform: scaleX(-1); } /* Blockquote — flip orange accent border from left to right in Arabic */ html[lang^="ar"] .wp-block-quote { border-left-width: 0 !important; border-right-color: var(--wp--preset--color--theme-palette-14) !important; border-right-width: 4px !important; border-right-style: solid !important; padding-right: 15px !important; } /* Hero banners — push content column to the LEFT in Arabic. */ /* Add new banner row IDs here as more pages are built. */ html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a .kt-row-column-wrap, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 .kt-row-column-wrap, html[lang^="ar"] .kb-advanced-slide .kt-row-column-wrap { direction: ltr !important; } html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a .wp-block-kadence-column, html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a .kt-inside-inner-col, html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a .wp-block-kadence-advancedheading, html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a h1, html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a h2, html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a h3, html[lang^="ar"] .kb-row-layout-id19239_c7c13a-5a p, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 .wp-block-kadence-column, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 .kt-inside-inner-col, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 .wp-block-kadence-advancedheading, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 h1, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 h2, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 h3, html[lang^="ar"] .kb-row-layout-id19241_5d0713-89 p, html[lang^="ar"] .kb-advanced-slide .wp-block-kadence-column, html[lang^="ar"] .kb-advanced-slide .kt-inside-inner-col, html[lang^="ar"] .kb-advanced-slide .wp-block-kadence-advancedheading, html[lang^="ar"] .kb-advanced-slide h1, html[lang^="ar"] .kb-advanced-slide h2, html[lang^="ar"] .kb-advanced-slide h3, html[lang^="ar"] .kb-advanced-slide p { direction: ltr !important; text-align: left !important; }