/* Shared document direction and font defaults for the public language hosts. */
html[lang="en"],
html[lang="en"] body,
html[lang="en"] #mainContainer,
html[lang="en"] #mainContainer *:not(.fa):not(.far):not(.fas):not(.glyphicon):not(.lg-icon) {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] #mainContainer,
html[lang="ar"] #mainContainer *:not(.fa):not(.far):not(.fas):not(.glyphicon):not(.lg-icon) {
  font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html[lang="en"] #mainContainer.ltr,
html[lang="en"] #mainContainer.ltr [dir="rtl"],
html[lang="en"] #mainContainer.ltr .rtl-dir,
html[lang="en"] #mainContainer.ltr .rtl_dir,
html[lang="en"] #mainContainer.ltr .rtldirection,
html[lang="en"] #mainContainer.ltr .rtlContent,
html[lang="en"] #mainContainer.ltr .row-rtl {
  direction: ltr !important;
  text-align: left;
}

html[lang="ar"] #mainContainer.rtl,
html[lang="fa"] #mainContainer.rtl {
  direction: rtl;
}

/* Product details were authored for the original RTL storefront and set
   .dproduct { direction: rtl } in productdetails.css. Override that legacy
   rule for English so Bootstrap columns and their text follow the locale. */
html[lang="en"] #mainContainer.ltr .dproduct {
  direction: ltr !important;
}

html[lang="en"] #mainContainer.ltr .dproduct .rprd {
  direction: ltr !important;
  text-align: left !important;
}

html[lang="fa"] #mainContainer.rtl .dproduct,
html[lang="ar"] #mainContainer.rtl .dproduct {
  direction: rtl;
}

html[lang="fa"] #mainContainer.rtl .dproduct .rprd,
html[lang="ar"] #mainContainer.rtl .dproduct .rprd {
  direction: rtl;
  text-align: right;
}