/*
 * rtl.css — Lumière. Loaded by layout/theme.liquid only when the storefront language is Arabic.
 *
 * theme.css uses logical properties (inset-inline-*, margin-inline-*, padding-inline-*,
 * border-inline-*, text-align: start/end), so layout mirrors on its own under dir="rtl".
 * This file holds only what CSS cannot mirror automatically:
 *   - Arabic typography (no letter tracking)
 *   - transforms and keyframes that encode a direction
 *   - glyphs and icons that point somewhere
 */

/* Arabic script must not be letter-spaced: connected letterforms break. */
[dir="rtl"] * { letter-spacing: 0 !important; }

/* Directional icons: arrows mirror. Chevrons (down) and the search magnifier do not, so they never get this class. */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }
[dir="rtl"] .btn--arrow::after,
[dir="rtl"] .collection-card__cta::after { content: '←'; }
[dir="rtl"] .btn--arrow:hover::after { transform: translateX(-6px); }
[dir="rtl"] .hero-3d__button:hover .hero-3d__arrow { transform: scaleX(-1) translateX(4px); }

/* Off-canvas panels slide in from their own side. */
[dir="rtl"] .mobile-drawer { transform: translateX(100%); }
[dir="rtl"] .mobile-drawer.is-open { transform: none; }
[dir="rtl"] .cart-drawer { transform: translateX(-100%); }
[dir="rtl"] .cart-drawer.is-open { transform: none; }

/* Marquee reads right-to-left. */
[dir="rtl"] .marquee-track { animation-direction: reverse; }