@charset "UTF-8";
/* ==========================================================================
   LÉYA — Right-to-left corrections
   --------------------------------------------------------------------------
   Deliberately short. The rest of the CSS uses logical properties
   (margin-inline, inset-inline, padding-block…) so direction is handled by
   `dir="rtl"` alone. What remains here are the four things logical properties
   genuinely cannot express: physical gradients, transform directions, glyphs
   that must not mirror, and typographic adjustments Arabic needs and Latin
   does not.
   ========================================================================== */

/* --- 1. Gradients ---------------------------------------------------------
   `linear-gradient(to left, …)` has no logical form. The hero scrim must
   weight itself toward whichever edge the headline sits on. */

/* The shade pools in the corner the headline occupies — bottom-right when the
   page reads right-to-left, bottom-left when it reads the other way. */
[dir="rtl"] .hero__scrim { --scrim-anchor: 100% 100%; }
[dir="ltr"] .hero__scrim { --scrim-anchor: 0% 100%; }

/* --- 2. Directional glyphs ------------------------------------------------
   Arrows point the way the reader travels; chevrons in breadcrumbs, "next"
   links and carousel controls all flip. Icons that represent an object rather
   than a direction — the bag, a ruler, the clock — must NOT flip, which is why
   this is an allow-list and not a blanket `svg { transform: scaleX(-1) }`. */

[dir="rtl"] .icon--arrow-right,
[dir="rtl"] .icon--arrow-left,
[dir="rtl"] .icon--chevron-right,
[dir="rtl"] .icon--chevron-left,
[dir="rtl"] .icon--arrow-up-right,
[dir="rtl"] .icon--return { transform: scaleX(-1); }

/* --- 3. Type -------------------------------------------------------------
   Arabic is cursive: letter-spacing severs the joins between letters and is
   the fastest way to make a headline look broken. Any tracking the Latin
   design language uses is zeroed out, and leading is opened instead, since
   Arabic ascenders and descenders need more room than Latin ones. */

[dir="rtl"] body { letter-spacing: 0; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .display, [dir="rtl"] .hero__title, [dir="rtl"] .quote__text {
	letter-spacing: 0;
	line-height: 1.32;
}
[dir="rtl"] .display--xl, [dir="rtl"] .hero__title { line-height: 1.2; }

[dir="rtl"] .btn,
[dir="rtl"] .badge,
[dir="rtl"] .eyebrow,
[dir="rtl"] .footer__col h3,
[dir="rtl"] .mega__heading { letter-spacing: 0; text-transform: none; }

/* The Latin wordmark keeps its tracking even inside an RTL document — it is a
   Latin word set in a Latin face and should be typeset as one. */
[dir="rtl"] .brand__text,
[dir="rtl"] .latin { letter-spacing: .16em; direction: ltr; unicode-bidi: isolate; }

/* Prices, sizes and phone numbers are numeric runs inside RTL text. Isolating
   them stops the currency mark from jumping to the wrong side of the digits —
   the single most common bug on Arabic storefronts.

   `unicode-bidi: isolate` alone, deliberately: adding `direction: ltr` here
   would also flip the element's own inline axis, so any `.num` that is
   absolutely positioned with `inset-inline-start` (the step numbers, the card
   count bubble) would jump to the opposite edge. Runs that genuinely need to
   read left-to-right — phone numbers, the CR and VAT numbers, measurement
   ranges — carry `dir="ltr"` on the element itself. */
[dir="rtl"] .num,
[dir="rtl"] .price__value { unicode-bidi: isolate; }

/* --- 4. Physical transforms ----------------------------------------------- */

[dir="rtl"] .toast-stack { transform: translateX(50%); }

[dir="rtl"] .nav-primary > ul > li > a::after { transform-origin: right; }
[dir="ltr"] .nav-primary > ul > li > a::after { transform-origin: left; }

/* --- 5. Native form controls ---------------------------------------------
   The select caret is a background image positioned physically. */

[dir="rtl"] select,
[dir="rtl"] .select {
	background-position: left var(--s-4) center;
	padding-inline-start: var(--s-7);
	padding-inline-end: var(--s-4);
}

/* --- 6. Scrollbar --------------------------------------------------------- */

[dir="rtl"] .drawer__body { direction: rtl; }