/* Glowpedia right-to-left (Arabic). Loaded after the other stylesheets when <html dir="rtl">.
   Arabic letters must never be spaced apart (letter-spacing breaks the joins), and a few physical left/right rules flip. */
:root{
  --f-display:"Readex Pro","Unbounded","Segoe UI",Tahoma,system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Plus Jakarta Sans","Segoe UI",Tahoma,system-ui,sans-serif;
}
body{line-height:1.8}
h1,h2,h3,.h3,.eyebrow,.sample,.k,.pbrand,.pbrand-l,.verdict,.tag,.qnum,.bl-sidek,.famfacts dt,.doctor b,.suggest .sg-k,.bl-tocm summary,.bl-body th,.rtbl th,.logo,.marquee a,.stat b,.fact b,.letters a{letter-spacing:0!important}
.eyebrow,.sample,.k,.pbrand,.pbrand-l,.verdict,.qnum,.bl-sidek,.famfacts dt,.doctor b,.suggest .sg-k,.bl-tocm summary,.bl-body th,.rtbl th{text-transform:none}
.eyebrow{font-size:.84rem}
.k,.sample{font-size:.78rem}
h1{line-height:1.3}
.hero h1{line-height:1.25}
h2,h3{line-height:1.4}
.lede{line-height:1.8}

/* the logo, product data, prices and ingredient chips stay left to right inside the Arabic page */
.logo,.marquee,.letters,.inci,.chip,.price,.pprice,.oprice,.oper,.pricebar b,.deal-p,.stars{direction:ltr}
.logo{unicode-bidi:isolate}
.marquee .track{direction:ltr}

/* search box */
.qbox{padding:0 14px 0 6px}
.qbox.big{padding:6px 18px 6px 6px}
.suggest .sg-p{margin-left:0;margin-right:auto}
.suggest button{text-align:right}

/* breadcrumbs */
.crumbs li+li::before{content:"‹";margin-right:0;margin-left:6px}

/* lists and cards */
.chip{text-align:right}
.chip-link.ing,.az,.inci{text-align:left}
.pprice{margin-right:0;margin-left:auto}
.off{left:auto;right:8px}
.chiprow .k{margin-right:0;margin-left:4px}
.routine{padding-left:0;padding-right:1.3em}
.orow.best{background:linear-gradient(270deg,var(--pink-s),transparent 70%)}

/* switches */
.tog input::after{left:auto;right:3px}
.tog input:checked::after{transform:translateX(-16px)}

/* blog / articles */
.bl-body ul,.bl-body ol{padding-left:0;padding-right:1.3em}
.bl-body th,.bl-body td{text-align:right}
.bl-body a.ext::after{margin-left:0;margin-right:2px}
.bl-cover b{right:auto;left:16px}
.bl-tocm summary::after{transform:translateY(-2px) rotate(45deg)}
@media (min-width:761px){.bl-feat > .bl-card:first-child .bl-cover b{right:auto;left:22px}}
.bl-body[lang="en"],[lang="en"] .bl-body{text-align:left}

/* range slider: numbers read left to right */
.range input{direction:ltr}

/* skip link: hide it off the right edge, which never adds a horizontal scrollbar in RTL */
.skip{left:auto;right:-9999px}
.skip:focus{left:auto;right:12px}