/* Arabic (right-to-left) overrides. Loaded only on /ar/ pages, after site.css.
   Arabic has no capitals and joins its letters, so uppercase and letter-spacing are switched off. */
:root{--font:'Cairo','Space Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
html[dir=rtl] body{font-weight:400;line-height:1.6;text-align:right}
html[dir=rtl] *{letter-spacing:0!important;text-transform:none!important}
html[dir=rtl] .display,html[dir=rtl] .h-lg,html[dir=rtl] .h{line-height:1.25}
html[dir=rtl] .display{font-size:clamp(40px,9vw,120px)}
html[dir=rtl] .eyebrow,html[dir=rtl] .btn,html[dir=rtl] .link,html[dir=rtl] .menu nav a{line-height:1.5}
html[dir=rtl] .menu nav a{line-height:1.3}
html[dir=rtl] .btn{font-weight:600}
html[dir=rtl] .h-sm,html[dir=rtl] .step h3,html[dir=rtl] .tier h3,html[dir=rtl] .pv h3{line-height:1.3}
html[dir=rtl] .lead{line-height:1.7}
/* language link in the header */
.lang{font-size:14px;color:var(--frost);border:1px solid var(--graphite);border-radius:9999px;padding:8px 16px;margin-inline-end:12px;white-space:nowrap}
.lang:hover{background:var(--frost);color:var(--void);text-decoration:none}
/* mirrored spacing */
html[dir=rtl] .step + .step{padding-left:0;border-left:0;padding-right:22px;border-right:1px solid var(--graphite)}
html[dir=rtl] .tier .badge{left:auto;right:26px}
html[dir=rtl] .switch em{margin-left:0;margin-right:8px}
html[dir=rtl] .bk-p s{margin-left:0;margin-right:8px}
html[dir=rtl] .pair figcaption{left:auto;right:10px}
html[dir=rtl] .final{text-align:right}
html[dir=rtl] .hero-fig{right:auto;left:max(0vw,calc((100vw - 1400px)/2 - 10px))}
@media(max-width:900px){html[dir=rtl] .hero-fig{left:auto;margin:-8vw auto 0 0}}
html[dir=rtl] .wa-float,html[dir=rtl] .totop{right:auto;left:28px}
html[dir=rtl] .snd{right:auto;left:14px}
/* things that must stay left-to-right */
html[dir=rtl] .strip,html[dir=rtl] .carousel,html[dir=rtl] .tr-strip,html[dir=rtl] .bk-strip,html[dir=rtl] [data-render=insta],html[dir=rtl] .player{direction:ltr}
html[dir=rtl] .price,html[dir=rtl] .bprice,html[dir=rtl] .pv-price,html[dir=rtl] .cart-p,html[dir=rtl] [data-egp]{unicode-bidi:plaintext}
html[dir=rtl] input[type=email],html[dir=rtl] input[type=tel]{text-align:right}
/* the Arabic book titles are already shown as the main title */
html[dir=rtl] .book .ar{display:none}
html[dir=rtl] .hero .display{font-size:clamp(56px,13vw,160px);line-height:1.05}
html[dir=rtl] .hero .display span:last-child{font-size:1.45em;line-height:1.05}
/* phones: the Arabic pitch is longer, so the picture and text are tightened to keep it above the red bar */
@media(max-width:820px){
  html[dir=rtl] .hero{padding-top:84px;padding-bottom:104px}
  html[dir=rtl] .hero-text{margin-top:2vh}
  html[dir=rtl] .hero-fig{width:min(60vw,400px);margin-top:-14vw}
  html[dir=rtl] .hero-copy .lead{font-size:15px;line-height:1.55}
}
/* statistics strip: dividers mirrored (a line on the right of every cell except the first one on the right) */
html[dir=rtl] .proof .cell{border-left:0;padding-left:0;border-right:1px solid var(--graphite);padding-right:22px}
html[dir=rtl] .proof .cell:first-child{border-right:0;padding-right:0}
@media(max-width:700px){html[dir=rtl] .proof .cell:nth-child(3){border-right:0;padding-right:0}}
/* sliding strips scroll by script, which expects left-to-right; their text stays right-to-left */
html[dir=rtl] .marquee,html[dir=rtl] .mq-wrap,html[dir=rtl] .inside,html[dir=rtl] .thumbs,html[dir=rtl] .story-strip{direction:ltr}
html[dir=rtl] .inside p,html[dir=rtl] .inside small,html[dir=rtl] .pg-end{direction:rtl}
