/* * LTR mirror for the customer-facing surface (English pages). * Loaded only when dir="ltr" (see functions.php: is_rtl() check). * * IMPORTANT: style.css:47 sets `body { direction: rtl; }` unconditionally * (base reset, loaded on every page). That single rule out-specifies the * attribute for direction/text-align inheritance across * the whole page — it's why English pages (especially the homepage, which * has the least amount of its own per-component dir handling: hero, * schools ticker, banners, sections, trust bar) kept rendering RTL despite * `dir` being correctly dynamic. This is the first, most important rule * below — everything else here is secondary polish on top of it. * * Context: this theme's CSS is already dir-aware for a lot of components * — the *unscoped* rules across style.css/schooly-v2.css/clean-ui.css are * written LTR-first, with `html[dir="rtl"] { ... }` blocks layered on top * to retrofit RTL (mobile menu slide direction, badges, cart sidebar, * dropdowns, toasts, etc). Making `dir` dynamic (header.php) already makes * all of that correct for both languages automatically — nothing to do * there. * * This file only covers the remaining declarations that hardcode `right` * unconditionally (no dir scoping at all), which were fine while `dir` * was permanently "rtl" but are now wrong on English/LTR pages. */ /* The one rule that matters most — see note at the top of this file. */ [dir="ltr"] body { direction: ltr; } /* Cart sidebar: related-products card copy */ [dir="ltr"] .cs-related-card__info { align-items: flex-start; text-align: left; } [dir="ltr"] .cs-related-card__price { justify-content: flex-start; direction: ltr; } /* My Account page layout (sidebar + content grid) */ [dir="ltr"] body.woocommerce-account .ecommza-page-body > .woocommerce, [dir="ltr"] body.woocommerce-account .woocommerce { direction: ltr !important; } /* Homepage: schools ticker/marquee card content (the marquee track itself stays direction:ltr on purpose, for the scroll animation math) */ [dir="ltr"] .schooly-ticker-card { direction: ltr; } /* Schools directory filter form */ [dir="ltr"] .sv2-school-filter form#sv2SchoolFilterForm > * { direction: ltr; } /* Compare table (page-compare.php): sticky label column */ [dir="ltr"] .compare-table th.compare-table__label { text-align: left; right: auto; left: 0; } [dir="ltr"] .compare-modal-table__label { text-align: left; right: auto; left: 0; box-shadow: 1px 0 0 #e6ece8; } /* WooCommerce cart / totals / my-account tables */ [dir="ltr"] .woocommerce-cart-form th { text-align: left; } [dir="ltr"] .cart_totals th { text-align: left; } [dir="ltr"] .cart_totals td { text-align: right; } [dir="ltr"] body.woocommerce-account:not(.logged-in) .woocommerce #customer_login h2 { text-align: left; } [dir="ltr"] body.woocommerce-account .woocommerce table.shop_table th, [dir="ltr"] body.woocommerce-account .woocommerce table.shop_table td { text-align: left; } /* WooCommerce notice action button (float direction) */ [dir="ltr"] .woocommerce-message a.button, [dir="ltr"] .woocommerce-info a.button { float: right; margin-right: 0; margin-left: 12px; } /* Generic page content lists (FAQ / info pages) */ [dir="ltr"] .ecommza-page-body ul, [dir="ltr"] .ecommza-page-body ol { padding-right: 0; padding-left: 24px; } [dir="ltr"] .schooly-info-body ul { padding-right: 0; padding-left: 20px; } /* Icon-before-text spacing */ [dir="ltr"] .ecommza-topbar i { margin-left: 0; margin-right: 6px; } [dir="ltr"] .schooly-product-card__price del { margin-right: 0; margin-left: 6px; } [dir="ltr"] .quickview-price del { margin-right: 0; margin-left: 8px; } [dir="ltr"] .schooly-search-group__head small { margin-right: 0; margin-left: auto; } /* FAQ accordion question row */ [dir="ltr"] .sv2-faq-question { text-align: left; } /* Single product: virtual fitting button label */ [dir="ltr"] body.single-product .schooly-virtual-fitting-button span { text-align: left; } /* Returns table (My Account > Returns) */ [dir="ltr"] .schooly-returns__table th, [dir="ltr"] .schooly-returns__table td { text-align: left; } /* Schools directory app + its search field */ [dir="ltr"] .schooly-schools-app { direction: ltr; text-align: left; } [dir="ltr"] .sv2-school-filter__search input { text-align: left; } [dir="ltr"] .sv2-school-filter__options { padding-left: 0; padding-right: 3px; } /* -------------------------------------------------------------------- Forward CTAs use fa-arrow-left for RTL. On LTR, flip the glyph and reverse hover travel so arrows point / move to the right. -------------------------------------------------------------------- */ [dir="ltr"] .fa-arrow-left, [dir="ltr"] .fa-chevron-left { transform: scaleX(-1); } [dir="ltr"] .sf__support-card:hover .sf__support-arrow { transform: translateX(4px) scaleX(-1); } [dir="ltr"] .schooly-campaign-card:hover .schooly-campaign-card__cta i, [dir="ltr"] .schooly-ticker-card:hover .schooly-ticker-card__cta i, [dir="ltr"] .schooly-schools-strip__more-btn:hover i, [dir="ltr"] .sv2-btn:hover i, [dir="ltr"] .schooly-section-card:hover i, [dir="ltr"] .schooly-promo-tile:hover i, [dir="ltr"] a.sv2-text-link:hover i { transform: translateX(5px) scaleX(-1); } [dir="ltr"] .schooly-campaign-card:hover .schooly-campaign-card__cta i { transform: translateX(5px) scaleX(-1) rotate(8deg); }