/* ============================================================
   RTL LAYER — Arabic. Loaded only by /ar/.
   Flex and grid mirror themselves under dir=rtl; this layer
   resets latin letterspacing (poison for Arabic) and mirrors
   the few absolutely-positioned details.
   ============================================================ */
body, h1, h2, h3, p, a, span, li, input, textarea, button {
  letter-spacing: 0 !important;
}
.eyebrow, .hero__kicker, .cat__kicker, .footer__addr-k,
.piece__maison, .phero__note, .shelf__title--caps { letter-spacing: 0.02em !important; }

/* system Arabic type rides behind the latin stacks. Geeza Pro must sit
   BEFORE -apple-system: Safari otherwise resolves Arabic glyphs through
   -apple-system to SF Arabic (wider, taller) while Chrome falls through
   to Geeza Pro, so the same headline wraps onto more lines in Safari
   and whole sections come out 60-165px taller. Pinning Geeza Pro first
   makes every engine on macOS shape Arabic identically; Windows falls
   through to Segoe UI as before. Latin never reaches Geeza Pro because
   Inter (and Hanken Grotesk for headings) covers it first. */
body { font-family: "Inter", "Geeza Pro", "Noto Kufi Arabic", "Segoe UI", -apple-system, sans-serif; }
h1, h2, h3, h4, h5, h6, button, input, textarea, select {
  font-family: "Hanken Grotesk", "Inter", "Geeza Pro", "Noto Kufi Arabic", "Segoe UI", -apple-system, sans-serif;
}

/* mirrored absolutes */
.cat__no { left: auto; right: 16px; }
.cat__meta { left: 16px; right: 16px; text-align: right; }
.hero__card .hero__dots--h { justify-content: flex-start; }

/* keep latin identity marks LTR inside RTL flow */
.nav__wordmark, .footer__name, .loader__mark, .footer__addr-lines,
.piece__ref, .piece__price, .hero__cap-price, .footer__addr-tel,
.cert__v, .pdp__price, .pdp__price-alt, .pdp__metaline, .buybar__price,
.zoomview__ref, .zoomview__price { direction: ltr; unicode-bidi: isolate; }

/* progress bar grows from the right */
.nav__progress { transform-origin: right; }

/* maison-page hero glow: pinned to the physical right to sit behind the
   watch lineup, which the RTL grid moves to the left */
.phero__glow { right: auto; left: -6%; }

/* shop toolbar: count + sort block flips to the start (right) side */
.toolbar__right { margin-left: 0; margin-right: auto; }
@media (max-width: 768px) {
  .toolbar__right { margin-right: 0; }
}

/* sell page: scroll-drawn process line mirrors its fill + node dots */
.process__rail-fill { transform-origin: right center; }
.process__dot { left: auto; right: 1px; }
@media (max-width: 899px) {
  .process__rail { left: auto; right: 6px; }
  .process__node { padding: 0 40px 0 0; }
  .process__dot { left: auto; right: 0; }
}

/* about page: manifesto hairline draws right to left */
.manifesto__rule { transform-origin: right; }

/* ============================================================
   NEW ARRIVALS "Three Bays" — RTL layer
   ============================================================ */

/* .piece__ref is forced direction:ltr above so the Latin reference
   stays readable. An ltr element aligns to its own left, which left
   the ref flush-left while everything else sat flush-right. */
.shelf--arrivals .piece__ref { text-align: right; }

/* both drawn underlines use background-position, which is physical:
   mirror them so each still enters from the leading edge */
.shelf--arrivals .piece__model a { background-position: 100% 100%; }
.shelf--ruled .shelf__more { background-position: 0 100%; }
.shelf--ruled .shelf__more:hover,
.shelf--ruled .shelf__more:focus-visible { background-position: 100% 100%; }

/* the blanket letter-spacing reset also hits "AED", which stays Latin */
.piece__cur { letter-spacing: 0.02em !important; }

/* pre-existing: the shared model underline drew from the wrong side
   under RTL on every other shelf and on all the maison/shop pages */
.piece__model a::after { transform-origin: 0 50%; }
.piece:hover .piece__model a::after,
.piece__model a:hover::after { transform-origin: 100% 50%; }

/* footer Explore links: the drawn underline enters from the leading
   (right) edge under RTL, mirroring the LTR behaviour */
.footer__col[aria-label="استكشف"] a { background-position: 100% 94%; }