/* =========================================================
   Lumea Maison — Arabic (RTL) layer, loaded after styles.css
   Fonts:  IBM Plex Sans Arabic  → text, headings, UI
           Amiri                 → calligraphic accent words (replaces the italic serif)
   Rules:  never letter-space Arabic (it breaks the joined letters), give it more line-height,
           and mirror every physical left/right and every arrow.
   ========================================================= */
html[lang="ar"] {
  --sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --serif: "Amiri", "Noto Naskh Arabic", serif;
  --ar: var(--sans);
}
html[lang="ar"] body { font-size: 17px; line-height: 1.8; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; text-transform: none !important; }

/* accent words: Amiri has no italic, so it carries the contrast on its own */
html[lang="ar"] em { font-style: normal; font-weight: 400; font-size: 1.1em; line-height: 1; }
html[lang="ar"] .brand__mark,
html[lang="ar"] .ig__avatar { font-style: normal; font-weight: 700; }
html[lang="ar"] .brand__mark { font-size: 24px; padding-bottom: 5px; }
html[lang="ar"] .ig__avatar { font-size: 58px; padding-bottom: 8px; }

/* ---------- headings: tighter than body, but with room for Arabic ascenders / dots ---------- */
html[lang="ar"] .sec-title { font-weight: 500; line-height: 1.3; font-size: clamp(32px, 4.2vw, 56px); }
html[lang="ar"] .big-copy { line-height: 1.75; font-size: clamp(21px, 2.1vw, 29px); font-weight: 400; }
html[lang="ar"] .mid-copy { line-height: 1.8; font-size: clamp(18px, 1.6vw, 22px); }
html[lang="ar"] .banner h2 { font-weight: 500; line-height: 1.3; font-size: clamp(28px, 3.4vw, 46px); }
html[lang="ar"] .banner p { font-size: 16px; line-height: 1.8; }
html[lang="ar"] .hero__lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.8; }
html[lang="ar"] .hero__meta { font-size: 14px; }
html[lang="ar"] .sec-tag { font-size: 14px; }
html[lang="ar"] .nav__link { font-size: 15px; }
html[lang="ar"] .brand__name { font-size: 19px; font-weight: 600; }
html[lang="ar"] .brand__name em { font-size: 22px; }
html[lang="ar"] .btn { font-size: 16px; }
html[lang="ar"] .btn--ghost, html[lang="ar"] .btn--light { font-size: 15px; }
html[lang="ar"] .chip { font-size: 14px; padding: 7px 18px; }
html[lang="ar"] .coll__name { font-size: clamp(19px, 1.8vw, 24px); }
html[lang="ar"] .coll__desc { font-size: 14px; }
html[lang="ar"] .feat li { font-size: 16px; }
html[lang="ar"] .stats dd { font-size: 14px; }
html[lang="ar"] .info h3 { font-size: 21px; font-weight: 600; }
html[lang="ar"] .info p { font-size: 15px; line-height: 1.85; }
html[lang="ar"] .tcard p { font-size: 17px; line-height: 1.85; }
html[lang="ar"] .tcard b { font-size: 15px; font-weight: 600; }
html[lang="ar"] .tcard small { font-size: 13px; }
html[lang="ar"] .card__name { font-size: 15px; font-weight: 500; }
html[lang="ar"] .card__tag { font-size: 12px; }
html[lang="ar"] .card__price { font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; }
html[lang="ar"] .card__order { font-size: 13px; }
html[lang="ar"] .rail-note { font-size: 14px; }
html[lang="ar"] .ig__handle { font-weight: 600; }
html[lang="ar"] .ig__name { font-size: 14px; }
html[lang="ar"] .ig__stats { font-size: 15px; }
html[lang="ar"] .footer__intro p { font-size: 16px; line-height: 1.85; }
html[lang="ar"] .footer__col { font-size: 15px; }
html[lang="ar"] .footer__col h4 { font-size: 13px; font-weight: 600; }
html[lang="ar"] .order input { font-size: 15px; }
html[lang="ar"] .order button { font-size: 14px; }
html[lang="ar"] .order__hint { font-size: 13px; }
html[lang="ar"] .footer__bottom { font-size: 13px; }
html[lang="ar"] .drag-cursor { font-size: 15px; }

/* the giant wordmarks are Arabic calligraphy-weight, not Latin-tight */
html[lang="ar"] .hero__word { line-height: 1.05; font-weight: 600; text-align: center; top: clamp(56px, 7vh, 84px); }
html[lang="ar"] .footer__word { line-height: 1.15; font-weight: 600; text-align: center; margin-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(16px, 2.4vw, 34px); }
html[lang="ar"] .hero__letters { display: inline-block; }

/* ---------- mirror physical left/right ---------- */
html[lang="ar"] .btn { padding: 6px 20px 6px 6px; }
html[lang="ar"] .btn--ghost, html[lang="ar"] .btn--light { padding: 4px 18px 4px 4px; }
html[lang="ar"] .btn__dot svg { transform: scaleX(-1); }            /* ↗ becomes ↖ */
html[lang="ar"] .btn:hover .btn__dot { transform: rotate(-45deg); }
html[lang="ar"] .arrow svg { transform: scaleX(-1); }               /* prev sits on the right → points right */

html[lang="ar"] .stats div { padding: 20px 0 0 16px; }
html[lang="ar"] .intro__img--a { left: auto; right: 0; }
html[lang="ar"] .intro__img--b { right: auto; left: 0; }
html[lang="ar"] .rail { padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 6px var(--gutter); }
html[lang="ar"] .card__tag { left: auto; right: 12px; }
html[lang="ar"] .card__order { right: auto; left: 12px; }
html[lang="ar"] .card__price small { margin-left: 0; margin-right: 6px; }
html[lang="ar"] .fab { right: auto; left: 18px; }
html[lang="ar"] .hero__bottom { left: auto; }

/* phone numbers, handles and digits stay left-to-right inside Arabic text */
html[lang="ar"] bdi { unicode-bidi: isolate; }

/* ---------- language switch ---------- */
html[lang="ar"] .lang-btn { font-family: var(--sans); font-size: 12.5px; }

@media (max-width: 900px) {
  html[lang="ar"] .nav__link { font-size: 34px; line-height: 1.5; }
  html[lang="ar"] .nav { align-items: flex-start; }
}

@media (max-width: 640px) {
  html[lang="ar"] body { font-size: 16px; }
  html[lang="ar"] .filters { margin-right: 0; padding-right: 0; margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); }
  html[lang="ar"] .hero__word { top: 76px; }
  html[lang="ar"] .hero__lead { font-size: 16px; }
  html[lang="ar"] .hero__meta { display: none; }   /* the WhatsApp button sits here on phones */
}