/* ============================================================
   RTL overrides. Rules only activate where html[dir="rtl"] —
   i.e. only on /ar/ pages. Loading this on EN/FR/ES is inert.

   What it fixes: hero images that are pinned right by physical
   left/right values (margin-right / right: 0) — they don't flip
   automatically when dir=rtl. We force them to the left so the
   Arabic headline (which starts at the right) has room.
   ============================================================ */

/* ---- HOME HERO (image #1) ---- */
/* Desktop: container is position:absolute; top:0; right:0; width:50%.
   Flip to left:0. */
html[dir="rtl"] .hero-leg,
html[dir="rtl"] .hero-leg.img-slot {
  right: auto !important;
  left: 0 !important;
}
html[dir="rtl"] .hero-leg.img-slot > img,
html[dir="rtl"] .hero-leg.img-slot.has-image > img {
  object-position: left center !important;
}

/* Desktop-only transform mirror. The inline LTR transform is
   translate(-299px, -6px) scale(1.06) — shifts the image LEFT to centre
   the leg in the right-half container. For RTL we mirror the X component
   so the leg shifts RIGHT into the left-half container, ending up
   visually centred again. Limit to desktop so it doesn't fight the
   mobile transform:none reset below. */
@media (min-width: 761px) {
  html[dir="rtl"] .hero-leg.img-slot > img,
  html[dir="rtl"] .hero-leg.img-slot.has-image > img {
    transform: translate(299px, -6px) scale(1.06) !important;
    transform-origin: center center !important;
  }
}

/* ---- PRODUCT HERO (image #2 across product subpages) ---- */
html[dir="rtl"] .product-hero-image,
html[dir="rtl"] .product-hero-image.img-slot {
  right: auto !important;
  left: 0 !important;
}
html[dir="rtl"] .product-hero-image.img-slot > img,
html[dir="rtl"] .product-hero-image.img-slot.has-image > img {
  object-position: left center !important;
}

/* ---- STAND SECTION (image #3) ---- */
/* Desktop: .stand-leg has margin-right: calc(50% - 50vw + 32px) so the leg
   bleeds off the right edge. In RTL we need the bleed on the LEFT. */
html[dir="rtl"] .stand-leg,
html[dir="rtl"] .stand-leg.img-slot {
  margin-right: 0 !important;
  margin-left: calc(50% - 50vw + 32px) !important;
}

/* ============================================================
   Mobile RTL overrides.
   On mobile the .hero-leg container is full-width (inset:0) and the
   image inside is the thing anchored to the right edge. Need to
   (a) RESTORE the container to full-width (the desktop RTL block
       above set right:auto which would collapse the mobile container
       to width 0) and
   (b) flip the image inside from right-anchored to left-anchored.
   ============================================================ */
@media (max-width: 760px) {
  html[dir="rtl"] .hero-leg,
  html[dir="rtl"] .hero-leg.img-slot,
  html[dir="rtl"] .hero-leg.img-slot.has-image,
  html[dir="rtl"] .product-hero-image,
  html[dir="rtl"] .product-hero-image.img-slot,
  html[dir="rtl"] .product-hero-image.img-slot.has-image {
    right: 0 !important;
    left: 0 !important;
    inset: 0 !important;
  }
  html[dir="rtl"] .hero-leg img,
  html[dir="rtl"] .hero-leg.img-slot > img,
  html[dir="rtl"] .hero-leg.img-slot.has-image > img,
  html[dir="rtl"] .product-hero-image img,
  html[dir="rtl"] .product-hero-image.img-slot > img,
  html[dir="rtl"] .product-hero-image.img-slot.has-image > img {
    /* Inset the image from the left edge so the leg sits closer to centre
       instead of bleeding off the side. Nudges ~70px inward on a 390 vw. */
    right: auto !important;
    left: 18vw !important;
    /* Wipe the inline LTR transform so the image renders at its natural
       position; the left:18vw alone does the nudge. */
    transform: none !important;
  }
}