/* ═══════════════════════════════════════════════════════
   Planto — RTL (Arabic) overrides
   Loaded on top of main.css when is_rtl(). Flex and grid
   flows mirror automatically under dir="rtl"; this file
   fixes the remaining physical (left/right) properties.
   The hero EN/AR blocks are intentionally NOT mirrored —
   each language already sits on its suited side.
   ═══════════════════════════════════════════════════════ */

/* Arabic-first typography */
body { font-family: var(--font-ar); }

/* ── Navigation (logo lands right, links flow right→left) ── */

.nav__links { margin-left: 0; margin-right: auto; }
.nav__icons { margin-left: 0; margin-right: 2.2rem; }
/* on the Arabic site the toggle shows a Latin "E" */
.nav__lang { margin-left: 0; margin-right: 1.1rem; }
.nav__lang--en { font-family: var(--font-en); padding-bottom: 0; }

.nav__links a:not(.nav__cta)::after {
  left: auto;
  right: 0;
  transform-origin: left;
}
.nav__links a:not(.nav__cta):hover::after { transform-origin: right; }

.nav__cart-count { right: auto; left: 0; }

/* ── Drawer slides in from the left ── */

.drawer__panel {
  right: auto;
  left: 0;
  transform: translateX(-102%);
}
.drawer__links a { transform: translateX(-2rem); }
body.menu-open .drawer__links a { transform: translateX(0); }

/* ── Hero: keep EN left / AR right exactly as designed ── */

.hero__content { direction: ltr; }

/* ── Split panels: underline mirrors ── */

.split__more::after,
.pots__more::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

/* ── Pots: the plant sits on the LEFT of the video frame, so the
      text column intentionally stays on the right (not mirrored);
      only its internal alignment turns Arabic. ── */

.pots__content { text-align: right; }

/* ── Search overlay ── */

.search__input { padding: 1.35rem 1.8rem 1.35rem 4rem; }
.search__submit { right: auto; left: 1rem; }
.search__close { right: auto; left: calc(var(--pad-x)); }

/* ── Arabic script must never be letter-spaced — kill it site-wide.
      The hero EN block stays Latin and keeps its designed spacing. ── */

* { letter-spacing: 0 !important; }
.hero__en .hero__eyebrow { letter-spacing: .34em !important; }
.hero__en .hero__title   { letter-spacing: .085em !important; }
.hero__en .hero__tagline { letter-spacing: .12em !important; }

/* ── Footer: grid order mirrors automatically; fix underlines ── */

.footer__col a::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

/* ── Mobile ── */

@media (max-width: 820px) {
  .nav__icons { margin-right: 0; }
  .nav__lang { margin-right: auto; margin-left: .6rem; }
}