/* NEREMAI — Arabic/RTL layout support for the v2 homepage.
 * Loaded only by Arabic pages. v2.css stays untouched; everything here is an
 * additive [dir="rtl"] override. The brand photography, product shots and icons
 * are deliberately NOT mirrored. */

/* Arabic needs an Arabic-capable face in every stack. No extra font file is
 * downloaded: the system's Arabic face is used per glyph, after the Latin brand
 * face, so "NEREMAI" and prices keep the original look. */
[dir="rtl"] {
  --sans: "Instrument Sans", "Geeza Pro", "SF Arabic", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --serif: "Iowan Old Style", Baskerville, "Palatino Linotype", Palatino, Georgia, "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", serif;
}

/* Arabic is cursive: letter-spacing breaks joined letters, so the Latin display
 * tracking is reset. Arabic also needs more leading than the Latin display. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a, [dir="rtl"] span,
[dir="rtl"] button, [dir="rtl"] label, [dir="rtl"] strong, [dir="rtl"] small,
[dir="rtl"] .eyebrow, [dir="rtl"] .lede, [dir="rtl"] .text-link,
[dir="rtl"] .field-note, [dir="rtl"] .slot-label, [dir="rtl"] .counter-value {
  letter-spacing: 0 !important;
  word-spacing: normal;
}
[dir="rtl"] h1, [dir="rtl"] h2 { line-height: 1.28; }
[dir="rtl"] h3 { line-height: 1.32; }
[dir="rtl"] .counter-value { line-height: 1; }
/* Tashkeel needs headroom or it clips against the line box. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { padding-block: .08em; }
[dir="rtl"] body { line-height: 1.75; }

/* Physical offsets -> logical, so the whole page mirrors. */
[dir="rtl"] .skip-link { left: auto; inset-inline-start: .75rem; }
[dir="rtl"] .chapter-nav a::after { right: auto; left: auto; inset-inline: 0; transform-origin: left; }
[dir="rtl"] .chapter-nav a:hover::after,
[dir="rtl"] .chapter-nav a:focus-visible::after,
[dir="rtl"] .chapter-nav a.is-active::after { transform-origin: right; }
[dir="rtl"] .hero-index { right: auto; inset-inline-end: var(--page); }
[dir="rtl"] .story-steps li.is-active { transform: translateX(-.45rem); }
[dir="rtl"] .counter-notice { left: auto; inset-inline-start: 1.75rem; }
[dir="rtl"] .gallery-thumbs button { text-align: start; }
[dir="rtl"] .gallery-thumbs button::after { right: auto; left: auto; inset-inline: 1rem; transform-origin: right; }
[dir="rtl"] .feature-icon--history::before { transform: translateX(-.1rem); }
[dir="rtl"] .lifestyle-controls {
  right: auto; left: auto; inset-inline: 1.25rem;
  padding: .8rem 1rem .8rem .9rem;
}
[dir="rtl"] .bot-field { left: auto; inset-inline-start: -10000px; }
[dir="rtl"] .lightbox-close { right: auto; inset-inline-end: 1rem; }
[dir="rtl"] .lightbox-nav--previous { left: auto; inset-inline-start: 1rem; }
[dir="rtl"] .lightbox-nav--next { right: auto; inset-inline-end: 1rem; }
[dir="rtl"] .waitlist-form::after { right: auto; inset-inline-end: -6rem; }
[dir="rtl"] .success-mark { right: auto; inset-inline-end: 2rem; }
[dir="rtl"] .success-mark::before { left: auto; inset-inline-start: .55rem; }

@media (max-width: 700px) {
  [dir="rtl"] .lifestyle-controls { inset-inline: .75rem; }
}

/* Latin/neutral runs (email, URL, code, price) must not be re-ordered by the
 * bidi algorithm inside an Arabic paragraph. */
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] code,
[dir="rtl"] .ltr,
[dir="rtl"] [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] code,
[dir="rtl"] .ltr,
[dir="rtl"] [dir="ltr"] {
  display: inline-block;
}

/* Health + Our promise modules (2026-11-05) — additive Arabic overrides.
 * Arabic is cursive, so the Latin tracking used by these small labels is
 * reset exactly like the rest of the page. Centre-aligned blocks and the
 * swipe strip need no other mirroring: they are already logical. */
[dir="rtl"] .health-lede,
[dir="rtl"] .health-strip figcaption,
[dir="rtl"] .health-note,
[dir="rtl"] .promise-sign,
[dir="rtl"] .promise-sign__brand,
[dir="rtl"] .promise-sign__line,
[dir="rtl"] .promise p:not(.eyebrow) {
  letter-spacing: 0 !important;
  word-spacing: normal;
}