/* ========================================================================== Hush — RTL / Arabic (loaded when is_rtl() — WPML sets this for Arabic) Most direction handling already uses logical properties (inline-start/end, margin-inline, etc.) in the base CSS, so this file only fixes the few physical cases + swaps the typeface for Arabic legibility. ========================================================================== */ /* Arabic display + body faces (self-hosted). Cairo reads well as a rounded Arabic companion to Fraunces/Jakarta. */ @font-face{ font-family:"Cairo"; font-style:normal;font-weight:400 800;font-display:swap; src:url("../fonts/cairo-variable.woff2") format("woff2"); } html[dir="rtl"] body{ font-family:"Cairo","Plus Jakarta Sans",system-ui,sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .hush-logo, html[dir="rtl"] .hush-card__title, html[dir="rtl"] .hush-card__price{ font-family:"Cairo","Fraunces",serif; letter-spacing:0; /* Arabic dislikes negative tracking */ } html[dir="rtl"] em, html[dir="rtl"] .hush-italic{font-style:normal;font-weight:700} /* no faux-italic in Arabic */ /* Marquee direction flip */ html[dir="rtl"] .hush-topbar__track, html[dir="rtl"] .hush-ticker__track{animation-name:hush-marquee-rtl} @keyframes hush-marquee-rtl{to{transform:translateX(50%)}} /* Dropdown carets / arrows that used SVG chevrons stay fine; only mirror the select background arrow position (already right via logical bg? force LTR-safe) */ html[dir="rtl"] .hush-shop-toolbar select, html[dir="rtl"] .woocommerce-ordering select{ background-position:left 1em center; padding:.55em 1.1em .55em 2.4em; } /* Quote glyph mirrors */ html[dir="rtl"] .hush-story__q{transform:scaleX(-1)} /* Nav underline + hover animations use transforms centered on 50%, unaffected. Cart badge / wish button use inset-inline, unaffected. */ /* View-all arrows: flip the arrow glyph direction if using ->; handled in markup with logical icons, but ensure chevrons mirror */ html[dir="rtl"] .hush-viewall svg, html[dir="rtl"] .hush-cat__link svg, html[dir="rtl"] .hush-btn svg.hush-arrow{transform:scaleX(-1)} /* Hero visual split keeps grid order; force product image on correct side */ html[dir="rtl"] .hush-blob--1{inset-inline-end:-20px} /* Prices & numbers stay LTR internally (so "From 244.00 EGP" reads correctly), but the whole price block aligns to the right in RTL. No row-reverse — that jumbled the From / old-price / new-price order. */ html[dir="rtl"] .hush-card__price, html[dir="rtl"] .price, html[dir="rtl"] .hush-stars, html[dir="rtl"] .amount{direction:ltr;unicode-bidi:isolate} html[dir="rtl"] .hush-card__price{display:block;text-align:right} /* ========================================================================== Robust RTL fixes (added for Hush Translate / Arabic) ========================================================================== */ /* Base direction — belt and braces in case dir isn't on . */ html[dir="rtl"] body, body.hushtr-rtl, body.rtl{direction:rtl;text-align:right} /* Header: keep the nav flowing from the right, actions on the left. */ /* Header in RTL: the flex row mirrors automatically via logical margins. Logo sits on the right, nav flows from the right, actions on the left. We only need to make sure the nav's auto-margin still pushes it away from the logo. */ body.hushtr-rtl .hush-nav, html[dir="rtl"] .hush-nav{margin-inline-start:auto;margin-inline-end:0} body.hushtr-rtl .hush-header__actions, html[dir="rtl"] .hush-header__actions{margin-inline-start:0} /* Mobile RTL header: logo pinned right, actions (language + hamburger) pinned to the LEFT edge with the space between them — mirrors the LTR layout so it doesn't bunch in the middle. */ @media (max-width:860px){ body.hushtr-rtl .hush-header__actions, html[dir="rtl"] .hush-header__actions{margin-inline-start:auto;margin-inline-end:0} body.hushtr-rtl .hush-header__inner, html[dir="rtl"] .hush-header__inner{flex-direction:row} /* Language switcher keeps LTR internally (EN | ع reads correctly). */ body.hushtr-rtl .hush-lang, html[dir="rtl"] .hush-lang{direction:ltr} } /* Mega menu: the featured panel + columns already use logical grid columns, but ensure the grid column assignment mirrors. */ /* Mega menu in RTL: the flexbox layout mirrors automatically because we use logical gap + row-reverse. Featured panel goes to the LEFT, categories right. */ body.hushtr-rtl .hush-nav .hush-mega .hush-mega__layout, html[dir="rtl"] .hush-nav .hush-mega .hush-mega__layout{flex-direction:row-reverse !important} body.hushtr-rtl .hush-mega__heading, html[dir="rtl"] .hush-mega__heading{text-align:right} body.hushtr-rtl .hush-mega__grouplinks a:hover, html[dir="rtl"] .hush-mega__grouplinks a:hover{padding-inline-start:0;padding-inline-end:.4em} /* Cart drawer slides from the LEFT in RTL. */ /* Cart drawer: in RTL it slides in from the LEFT edge. Use explicit physical properties to avoid conflicting with the base inset-inline-end. */ body.hushtr-rtl .hush-drawer, html[dir="rtl"] .hush-drawer{inset-inline-end:auto !important;inset-inline-start:auto !important; right:auto !important;left:0 !important;transform:translateX(-100%)} body.hushtr-rtl .hush-drawer.is-open, html[dir="rtl"] .hush-drawer.is-open{transform:translateX(0)} /* Nav underline centered — fine, but nudge for RTL baseline. */ /* Product cards + prices align right. */ body.hushtr-rtl .hush-card__title, body.hushtr-rtl .hush-card__price, body.hushtr-rtl .hush-card__cat{text-align:right} /* WooCommerce ships its own cart-rtl.css / checkout-rtl.css which handle block cart/checkout RTL correctly once is_rtl() is true (the plugin forces this). We deliberately do NOT override the block layout here, to avoid fighting it. */ /* Breadcrumbs + toolbars. */ body.hushtr-rtl .hush-breadcrumb, body.hushtr-rtl .hush-shop-toolbar{text-align:right} /* Footer columns align right. */ body.hushtr-rtl .hush-footer__grid, body.hushtr-rtl .hush-footer__trust-item{text-align:right} body.hushtr-rtl .hush-footer__trust-item{flex-direction:row-reverse;justify-content:flex-end} /* Forms: labels and inputs. */ body.hushtr-rtl input, body.hushtr-rtl textarea, body.hushtr-rtl select{text-align:right} /* Icons that imply direction (arrows) flip. */ body.hushtr-rtl .hush-btn .hush-icon-arrow, body.hushtr-rtl .hush-mega__featured-cta svg, body.hushtr-rtl .hush-arrow{transform:scaleX(-1)} /* Toast + search sheet stay centered (no change needed). */ /* ========================================================================== Cart drawer (mini-cart) RTL fixes — padding, spacing, image containment ========================================================================== */ /* The free-shipping message: exclamation and icon flow correctly in RTL. */ body.hushtr-rtl .hush-ship-bar__msg, html[dir="rtl"] .hush-ship-bar__msg{flex-direction:row-reverse;justify-content:flex-end;text-align:right} body.hushtr-rtl .hush-ship-bar__fill, html[dir="rtl"] .hush-ship-bar__fill{margin-inline-start:auto} /* Drawer header: cart title + count on the right, close button on the left. */ body.hushtr-rtl .hush-drawer__head, html[dir="rtl"] .hush-drawer__head{flex-direction:row-reverse} body.hushtr-rtl .hush-drawer__head h3, html[dir="rtl"] .hush-drawer__head h3{flex-direction:row-reverse} /* Cart items: in RTL the row mirrors — image on the right, name to its left, remove × on the left edge. The li is padded on the correct side. */ body.hushtr-rtl .hush-drawer .widget_shopping_cart_content ul.cart_list li, html[dir="rtl"] .hush-drawer .widget_shopping_cart_content ul.cart_list li{ flex-direction:row-reverse;text-align:right;padding:1rem 0 1rem 1.9rem} body.hushtr-rtl .hush-drawer .cart_list li > a:not(.remove), html[dir="rtl"] .hush-drawer .cart_list li > a:not(.remove){flex-direction:row-reverse;text-align:right} body.hushtr-rtl .hush-drawer .cart_list .quantity, html[dir="rtl"] .hush-drawer .cart_list .quantity{text-align:right;padding-inline-start:0;padding-inline-end:calc(60px + .8rem)} /* Remove button moves to the LEFT edge in RTL. */ body.hushtr-rtl .hush-drawer .cart_list li .remove, body.hushtr-rtl .hush-drawer .cart_list li a.remove, html[dir="rtl"] .hush-drawer .cart_list li .remove, html[dir="rtl"] .hush-drawer .cart_list li a.remove{inset-inline-end:auto;inset-inline-start:0;right:auto;left:0} /* Prices stay LTR internally. */ body.hushtr-rtl .hush-drawer .cart_list .amount, html[dir="rtl"] .hush-drawer .cart_list .amount{direction:ltr;unicode-bidi:isolate;display:inline-block} /* Totals + buttons align right. */ body.hushtr-rtl .hush-drawer .woocommerce-mini-cart__total, html[dir="rtl"] .hush-drawer .woocommerce-mini-cart__total{flex-direction:row-reverse} /* ========================================================================== Product card RTL — align content right, keep prices/ratings LTR internally ========================================================================== */ body.hushtr-rtl .hush-card__body, html[dir="rtl"] .hush-card__body{text-align:right} body.hushtr-rtl .hush-card__cat, body.hushtr-rtl .hush-card__title, html[dir="rtl"] .hush-card__cat, html[dir="rtl"] .hush-card__title{text-align:right} /* Rating + review count row: keep on one line, aligned right, numbers LTR. */ body.hushtr-rtl .hush-card__rating, html[dir="rtl"] .hush-card__rating{flex-direction:row-reverse;justify-content:flex-end} body.hushtr-rtl .hush-stars, html[dir="rtl"] .hush-stars{direction:ltr;display:inline-flex} /* Wishlist heart stays top-left in RTL (mirrors from top-right). */ body.hushtr-rtl .hush-card__wish, html[dir="rtl"] .hush-card__wish{inset-inline-end:auto;inset-inline-start:.8rem;right:auto;left:.8rem} /* ========================================================================== Cart drawer — bundle child items (hush-bundles plugin) RTL Real classes from the plugin: - dl.variation / .hush-bundle-includes → "Includes: Product (price)" lines - ul.hush-bundle-mini-includes → mini-cart child product list - .hush-bundle-mini-save → "You save X" badge ========================================================================== */ body.hushtr-rtl .hush-drawer .cart_list li *, html[dir="rtl"] .hush-drawer .cart_list li *{text-align:right} /* WooCommerce item_data list (Includes: ...) — dt/dd read right, no float. */ body.hushtr-rtl .hush-drawer dl.variation, html[dir="rtl"] .hush-drawer dl.variation{text-align:right;direction:rtl;margin:.4rem 0 0} body.hushtr-rtl .hush-drawer dl.variation dt, body.hushtr-rtl .hush-drawer dl.variation dd, html[dir="rtl"] .hush-drawer dl.variation dt, html[dir="rtl"] .hush-drawer dl.variation dd{text-align:right;float:none;margin:0;padding:0;display:block} /* The plugin's "Includes" span. */ body.hushtr-rtl .hush-bundle-includes, html[dir="rtl"] .hush-bundle-includes{display:block;text-align:right;direction:rtl} body.hushtr-rtl .hush-bundle-includes small, html[dir="rtl"] .hush-bundle-includes small{direction:ltr;unicode-bidi:isolate} /* Mini-cart child product list: bullets on the right, right-aligned. */ body.hushtr-rtl .hush-bundle-mini-includes, html[dir="rtl"] .hush-bundle-mini-includes{text-align:right;direction:rtl;padding-inline-start:0;padding-inline-end:1rem;margin:.35rem 0 0;list-style:none} body.hushtr-rtl .hush-bundle-mini-includes li, html[dir="rtl"] .hush-bundle-mini-includes li{text-align:right;position:relative;padding-inline-end:1.3rem;padding-inline-start:0} body.hushtr-rtl .hush-bundle-mini-includes li::before, html[dir="rtl"] .hush-bundle-mini-includes li::before{inset-inline-end:.1rem;inset-inline-start:auto} /* "You save X" badge → right side, amount stays LTR. */ body.hushtr-rtl .hush-bundle-mini-save, html[dir="rtl"] .hush-bundle-mini-save{display:inline-block;text-align:right;margin-inline-start:0;margin-inline-end:auto} body.hushtr-rtl .hush-bundle-mini-save .amount, body.hushtr-rtl .hush-bundle-mini-save .woocommerce-Price-amount, html[dir="rtl"] .hush-bundle-mini-save .amount, html[dir="rtl"] .hush-bundle-mini-save .woocommerce-Price-amount{direction:ltr;unicode-bidi:isolate;display:inline-block} /* Prices/amounts inside cart items stay LTR (numbers) but sit right. */ body.hushtr-rtl .hush-drawer .cart_list .amount, body.hushtr-rtl .hush-drawer .cart_list .woocommerce-Price-amount, html[dir="rtl"] .hush-drawer .cart_list .amount, html[dir="rtl"] .hush-drawer .cart_list .woocommerce-Price-amount{direction:ltr;unicode-bidi:isolate;display:inline-block} /* Free-shipping unlocked message: checkmark + text read right-to-left. */ body.hushtr-rtl .hush-ship-bar.is-unlocked .hush-ship-bar__msg, html[dir="rtl"] .hush-ship-bar.is-unlocked .hush-ship-bar__msg{flex-direction:row-reverse;justify-content:flex-end} /* Journal / blog RTL */ body.hushtr-rtl .hush-post__content, body.hushtr-rtl .hush-post__meta, body.hushtr-rtl .hush-post__body, html[dir="rtl"] .hush-post__content, html[dir="rtl"] .hush-post__meta, html[dir="rtl"] .hush-post__body{text-align:right} body.hushtr-rtl .hush-post__content ul, body.hushtr-rtl .hush-post__content ol, html[dir="rtl"] .hush-post__content ul, html[dir="rtl"] .hush-post__content ol{padding-inline-start:0;padding-inline-end:1.4rem} body.hushtr-rtl .hush-post__content blockquote, html[dir="rtl"] .hush-post__content blockquote{border-inline-start:none;border-inline-end:4px solid var(--hush-blue)} /* ========================================================================== Block Cart & Checkout (WooCommerce 10/11 blocks) — RTL WooCommerce ships cart-rtl/checkout-rtl stylesheets, but our custom block styles need mirroring too. These keep the two-column layout, totals, and fields correct in Arabic. ========================================================================== */ /* Two-column: main on the right, sidebar on the left in RTL (flex handles it, but be explicit so a failed container query can't misplace it). */ body.hushtr-rtl .wc-block-components-sidebar-layout, html[dir="rtl"] .wc-block-components-sidebar-layout{direction:rtl} /* Cart line items: image on the right, text flows right. */ body.hushtr-rtl .wc-block-cart-items__row, html[dir="rtl"] .wc-block-cart-items__row{text-align:right} body.hushtr-rtl .wc-block-cart-item__product-name, body.hushtr-rtl .wc-block-components-product-name, body.hushtr-rtl .wc-block-components-product-metadata, html[dir="rtl"] .wc-block-cart-item__product-name, html[dir="rtl"] .wc-block-components-product-name, html[dir="rtl"] .wc-block-components-product-metadata{text-align:right} /* Totals rows: label right, amount left, amount stays LTR. */ body.hushtr-rtl .wc-block-components-totals-item, html[dir="rtl"] .wc-block-components-totals-item{flex-direction:row-reverse;text-align:right} body.hushtr-rtl .wc-block-components-totals-item__value, body.hushtr-rtl .wc-block-components-product-price__value, html[dir="rtl"] .wc-block-components-totals-item__value, html[dir="rtl"] .wc-block-components-product-price__value{direction:ltr;unicode-bidi:isolate;display:inline-block} /* Checkout form fields: labels + inputs align right. */ body.hushtr-rtl .wc-block-components-text-input, body.hushtr-rtl .wc-block-components-text-input input, body.hushtr-rtl .wc-block-components-text-input label, body.hushtr-rtl .wc-block-components-select select, html[dir="rtl"] .wc-block-components-text-input, html[dir="rtl"] .wc-block-components-text-input input, html[dir="rtl"] .wc-block-components-text-input label, html[dir="rtl"] .wc-block-components-select select{text-align:right;direction:rtl} /* Keep email / phone / numeric inputs LTR (they read left-to-right). */ body.hushtr-rtl .wc-block-components-text-input input[type="email"], body.hushtr-rtl .wc-block-components-text-input input[type="tel"], html[dir="rtl"] .wc-block-components-text-input input[type="email"], html[dir="rtl"] .wc-block-components-text-input input[type="tel"]{direction:ltr;text-align:right} /* Checkout step titles + descriptions align right. */ body.hushtr-rtl .wc-block-components-checkout-step__title, body.hushtr-rtl .wc-block-components-checkout-step__description, html[dir="rtl"] .wc-block-components-checkout-step__title, html[dir="rtl"] .wc-block-components-checkout-step__description{text-align:right} /* Order summary item: image right, quantity badge on the correct side. */ body.hushtr-rtl .wc-block-components-order-summary-item, html[dir="rtl"] .wc-block-components-order-summary-item{text-align:right} /* Quantity selector mirrors. */ body.hushtr-rtl .wc-block-components-quantity-selector, html[dir="rtl"] .wc-block-components-quantity-selector{flex-direction:row-reverse} /* ---- Classic (shortcode) cart/checkout RTL, in case pages use shortcodes ---- */ body.hushtr-rtl .woocommerce-cart-form table.cart th, body.hushtr-rtl .woocommerce-cart-form table.cart td, html[dir="rtl"] .woocommerce-cart-form table.cart th, html[dir="rtl"] .woocommerce-cart-form table.cart td{text-align:right} body.hushtr-rtl .hush-cart-layout, html[dir="rtl"] .hush-cart-layout{direction:rtl} body.hushtr-rtl .woocommerce form .form-row label, html[dir="rtl"] .woocommerce form .form-row label{text-align:right;display:block} body.hushtr-rtl .woocommerce form .form-row input, body.hushtr-rtl .woocommerce form .form-row select, html[dir="rtl"] .woocommerce form .form-row input, html[dir="rtl"] .woocommerce form .form-row select{text-align:right;direction:rtl} /* ---- Checkout redesign RTL ---- */ body.hushtr-rtl .hush-checkout__cols, html[dir="rtl"] .hush-checkout__cols{direction:rtl} /* Error list reads right in RTL with markers on the right. */ body.hushtr-rtl .woocommerce-error, html[dir="rtl"] .woocommerce-error{direction:rtl;text-align:right;padding:1em 1.6em 1em 1.4em;list-style-position:inside} body.hushtr-rtl .woocommerce-error li, html[dir="rtl"] .woocommerce-error li{text-align:right} body.hushtr-rtl .woocommerce-billing-fields h3, body.hushtr-rtl .woocommerce-shipping-fields h3, body.hushtr-rtl #order_review_heading, body.hushtr-rtl .woocommerce form .form-row label, html[dir="rtl"] .woocommerce-billing-fields h3, html[dir="rtl"] .woocommerce-shipping-fields h3, html[dir="rtl"] #order_review_heading, html[dir="rtl"] .woocommerce form .form-row label{text-align:right} body.hushtr-rtl .woocommerce form .form-row input.input-text, body.hushtr-rtl .woocommerce form .form-row textarea, body.hushtr-rtl .woocommerce-checkout select, html[dir="rtl"] .woocommerce form .form-row input.input-text, html[dir="rtl"] .woocommerce form .form-row textarea, html[dir="rtl"] .woocommerce-checkout select{text-align:right;direction:rtl} /* Email/phone stay LTR */ body.hushtr-rtl .woocommerce form .form-row input[type="email"], body.hushtr-rtl .woocommerce form .form-row input[type="tel"], html[dir="rtl"] .woocommerce form .form-row input[type="email"], html[dir="rtl"] .woocommerce form .form-row input[type="tel"]{direction:ltr;text-align:right} body.hushtr-rtl .woocommerce-checkout-review-order-table th, body.hushtr-rtl .woocommerce-checkout-review-order-table td, html[dir="rtl"] .woocommerce-checkout-review-order-table th, html[dir="rtl"] .woocommerce-checkout-review-order-table td{text-align:right} body.hushtr-rtl .woocommerce-checkout-review-order-table .product-total, html[dir="rtl"] .woocommerce-checkout-review-order-table .product-total{text-align:left;direction:ltr;unicode-bidi:isolate} body.hushtr-rtl .woocommerce-info, body.hushtr-rtl .woocommerce-message, html[dir="rtl"] .woocommerce-info, html[dir="rtl"] .woocommerce-message{border-inline-start:none;border-inline-end:4px solid var(--hush-blue);text-align:right} /* Single article — RTL (Arabic posts) */ body.hushtr-rtl .hush-article__navlink--next, html[dir="rtl"] .hush-article__navlink--next{text-align:start} body.hushtr-rtl .hush-article__body blockquote, html[dir="rtl"] .hush-article__body blockquote{border-inline-start:4px solid var(--hush-blue)} /* Reviews carousel — RTL */ body.hushtr-rtl .hush-review-cards__arrow--prev .hush-arrow, html[dir="rtl"] .hush-review-cards__arrow--prev .hush-arrow{transform:rotate(0deg)} body.hushtr-rtl .hush-review-cards__arrow--next .hush-arrow, html[dir="rtl"] .hush-review-cards__arrow--next .hush-arrow{transform:rotate(180deg)} /* Hero slider arrows — RTL: prev points right, next points left */ body.hushtr-rtl .hush-hero-slider__arrow--prev .hush-arrow, html[dir="rtl"] .hush-hero-slider__arrow--prev .hush-arrow{transform:rotate(0deg)} body.hushtr-rtl .hush-hero-slider__arrow--next .hush-arrow, html[dir="rtl"] .hush-hero-slider__arrow--next .hush-arrow{transform:rotate(180deg)} /* Hero title — Arabic needs more line-height (diacritics/marks) and no negative letter-spacing, plus a slightly smaller scale so it fits nicely. */ body.hushtr-rtl .hush-hero-slide__title, html[dir="rtl"] .hush-hero-slide__title{ font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.35; letter-spacing:0; } body.hushtr-rtl .hush-hero-slide__title em, html[dir="rtl"] .hush-hero-slide__title em{ font-style:normal; /* Arabic display fonts have no true italic */ line-height:1.4; /* extra room for the highlighted line */ padding-block:.04em; /* stop tall marks touching the line above */ } body.hushtr-rtl .hush-hero-slide__lead, html[dir="rtl"] .hush-hero-slide__lead{ line-height:1.9; /* Arabic body copy reads better with more leading */ } body.hushtr-rtl .hush-hero-slide__eyebrow, html[dir="rtl"] .hush-hero-slide__eyebrow{ letter-spacing:0; } @media (max-width:900px){ body.hushtr-rtl .hush-hero-slide__title, html[dir="rtl"] .hush-hero-slide__title{font-size:2rem;line-height:1.4} }