/* * Echo Perfume — RTL overrides (Arabic). * Most flex/grid layouts already mirror automatically once * is set (row-direction flex/grid follows text direction natively). This * file only fixes the specific physical left/right, margin/padding, and * text-align declarations elsewhere in the CSS that don't auto-flip, plus * directional icons like arrows. */ [dir="rtl"] { text-align: right; } /* Skip link: reveal from the reading-start side (right, in RTL) */ [dir="rtl"] .skip-link { left: auto; right: -999px; } [dir="rtl"] .skip-link:focus { right: var(--space-sm); left: auto; } /* Nav underline grows from the reading-start side */ [dir="rtl"] .primary-nav a::after { left: auto; right: 0; } /* Cart/wishlist count badge + sale badge: mirror to the opposite corner */ [dir="rtl"] .icon-btn__badge { right: auto; left: 2px; } [dir="rtl"] .product-card__badge { left: auto; right: 12px; } /* Price strike-through spacing */ [dir="rtl"] .product-card__price del, [dir="rtl"] .product-info__price del { margin-right: 0; margin-left: 0.4em; } /* Shop filters */ [dir="rtl"] .filter-check .count { margin-left: 0; margin-right: auto; } [dir="rtl"] .active-filters .pill { padding-right: 0; padding-left: 0.6em; } /* Tables (cart / checkout / reviews) */ [dir="rtl"] table.shop_table th, [dir="rtl"] table.shop_table td, [dir="rtl"] table.woocommerce-checkout-review-order-table th, [dir="rtl"] table.woocommerce-checkout-review-order-table td { text-align: right; } /* AI Consultant chat: the avatar sits on the visual right in RTL flex rows, so the options/input indent needs to follow it there instead. */ [dir="rtl"] .consultant__options, [dir="rtl"] .consultant__textrow, [dir="rtl"] .consultant__skip, [dir="rtl"] .consultant__back { padding-left: 0; padding-right: calc(36px + var(--space-sm)); } /* Directional arrow glyphs/icons: mirror horizontally so "forward" still reads as "forward" in a right-to-left flow. */ [dir="rtl"] .btn__icon { display: inline-block; transform: scaleX(-1); } /* Breadcrumb separator spacing already comes from margin-inline via the default styles' use of plain margin; flip explicitly for clarity. */ [dir="rtl"] .breadcrumbs .sep { transform: scaleX(-1); display: inline-block; }