/* ==========================================================================
   Arabic (RTL) adjustments — loaded after the mirrored stylesheets in rtl/.
   ========================================================================== */
:root {
  --serif: 'Source Serif 4', 'Noto Naskh Arabic', Georgia, serif;
  --sans: 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}
body { font-family: var(--sans); }

/* Arabic letters must stay joined: no letter-spacing, no synthetic italics. */
body * { letter-spacing: 0 !important; }
em, .hero-title em, h1 em, h2 em, h3 em { font-style: normal !important; }

/* Arrows and chevrons point the other way. */
.ic-i-arrow, .ic-i-chev-right, .ic-i-chev-left, .ico-arrow { transform: scaleX(-1); }
.ic-i-arrow.flip, .ic-i-chev-left.flip { transform: none; }
.arf-go:hover { transform: translateX(-3px); }
.how-steps li:not(:last-child)::after { transform: scaleX(-1); }
.hw-bar li:not(:last-child)::after { transform: rotate(-135deg); }

/* Phone numbers, prices, emails and codes read left-to-right inside Arabic text. */
.ct-other small, .plan-price, .cmp small, .pr-foot b, .hw-kpis b, .cc-body b, .dv-stats b, .ab-stats b, .nf-code { direction: ltr; unicode-bidi: isolate; }
.ct-grid input[type="email"], .ct-grid input[type="url"], .news-form input[type="email"] { direction: ltr; text-align: right; }

/* Line height: Arabic script needs more room than Latin. */
.hero-title, .ph-title, .ov-copy h2, .adv-copy h2, .markets-copy h2, .cta-copy h2, .pcta-copy h2,
.phero h1, .ar-hero h1, .ct-hero h1, .hw-hero h1, .art-hero h1, .nf-hero h1, .page-head h1,
.sec-head h2, .ab-mission-copy h2, .ab-values h2, .ab-why-copy h2, .ab-vision-copy h2, .cs-copy h2, .cc-inner h2,
.ct-card h2, .pr-side-copy h2, .sol-why-copy h2, .news-copy h2, .ar-featured h2, .how-head h2, .hw-copy h2 { line-height: 1.32 !important; }
.feature h3, .module h3, .sol-copy h3, .pc-body h3, .acv-body h3, .gc-body h3, .cc-body h3, .insight h3, .plan h3, .how-steps h3, .adv-points h3 { line-height: 1.4; }
.prose { line-height: 1.95; }
.prose h2 { line-height: 1.4; }
.lead, .hero-lead, .ph-lead, .adv-lead, .ov-lead, .hw-text, .hw-sub { line-height: 1.8 !important; }

/* Logo lockup keeps its original (Latin) layout. */
.brand { direction: ltr; }

/* Headline sizes: Arabic letters are taller, so headlines run ~20% smaller to keep the same layout. */
@media (min-width: 761px) {
  .hero-title { font-size: 56px; }
  .ph-title, .ov-copy h2 { font-size: 52px; }
  .phero h1, .ct-hero h1, .ar-hero h1 { font-size: 48px; }
  .hw-hero h1, .page-head h1, .phero--legal h1 { font-size: 46px; }
  .art-hero h1 { font-size: 42px; }
  .nf-hero h1 { font-size: 42px; }
  .adv-copy h2, .markets-copy h2, .sec-head h2, .how-head h2, .ab-mission-copy h2, .ab-why-copy h2, .ab-values h2 { font-size: 40px; }
  .res-sec .sec-head h2, .pr-plans .sec-head h2 { font-size: 38px; }
  .pr-compare .sec-head h2, .pr-faq .sec-head h2, .sol-list .sec-head h2 { font-size: 36px; }
  .cta-copy h2, .cc-inner h2, .cta-split--articles h2, .cta-split--contact h2 { font-size: 34px; }
  .pcta-copy h2, .ct-card h2, .sol-why-copy h2 { font-size: 38px; }
  .cta-split--about h2 { font-size: 42px; }
  .cta-split--404 h2, .news-copy h2 { font-size: 30px; }
  .ab-vision-copy h2, .pr-side-copy h2, .ar-featured h2 { font-size: 36px; }
  .hw-copy h2 { font-size: 30px; }
  .insights-head h2, .ar-head h2 { font-size: 28px; }
  .adv-points h3 { font-size: 28px; }
  .nf-code { font-size: 150px; }
}
@media (max-width: 760px) {
  .hero-title, .ph-title, .ov-copy h2, .phero h1, .ct-hero h1, .ar-hero h1, .hw-hero h1, .art-hero h1, .nf-hero h1 { font-size: 34px; }
  .sec-head h2, .adv-copy h2, .markets-copy h2, .how-head h2, .cs-copy h2, .cc-inner h2, .pcta-copy h2, .ct-card h2 { font-size: 30px; }
}

/* Small labels: Arabic needs a readable size where the English design uses tiny caps. */
.eyebrow, .strip-label, .ph-eyebrow { font-size: 13px !important; }
.btn-login { width: auto; padding: 0 18px; }
.markets-copy p:not(.eyebrow) { font-size: 15px; line-height: 1.7; }
.hero-note, .dv-stats span, .dv-legend, .dv-months { font-size: 12px; }
.nf-code { text-align: right; }
@media (min-width: 761px) { .ph-title { font-size: 46px; } }
@media (max-width: 760px) {
  .res-sec .sec-head h2, .pr-plans .sec-head h2, .pr-compare .sec-head h2, .pr-faq .sec-head h2, .sol-list .sec-head h2, .ab-mission-copy h2, .ab-why-copy h2, .ab-values h2, .ar-featured h2 { font-size: 30px; }
}

/* ---------- Discovery: the design uses a bold sans for Arabic headings ---------- */
.dh-copy h1, .dh-head h2, .occ-txt b, .lk-body h3, .dh-band-copy h2, .da-card b, .dr-title, .dr-empty h2,
.pp-info h1, .lp-info h1, .dp-body h3, .lp-item-info h3 { font-family: 'IBM Plex Sans Arabic', var(--sans); font-weight: 700; }
.dh-copy h1 { font-size: 52px; line-height: 1.3; }
.dh-copy h1 em { color: var(--gold-soft); }
.dh-head h2 { font-size: 25px; }
.occ-txt b { font-size: 20px; }
.lk-body h3 { font-size: 17px; line-height: 1.45; }
.dh-band-copy h2 { font-size: 38px; line-height: 1.35; }
.dh-band-copy h2 span { color: var(--gold-soft); }
.da-card b { font-size: 15.5px; line-height: 1.6; }
.dr-title, .lp-info h1 { line-height: 1.35; }
.pp-info h1 { font-size: 34px; line-height: 1.4; }
.dh-lead, .lp-lead, .pp-why p { line-height: 1.85; }
.dp-brand, .pp-brand { letter-spacing: 0; }
/* The design keeps the gold “go” arrows pointing right. */
.lk-go .ic-i-arrow, .dh-look-go .ic-i-arrow { transform: none; }
.dp-price b, .lk-price, .pp-price, .lp-total b, .lp-item-buy b { unicode-bidi: plaintext; }
.dsearch input, .dr-budget input { text-align: right; }
@media (max-width: 760px) {
  .dh-copy h1 { font-size: 34px; }
}
/* Hero photo sits flush with the page edge; the look card covers the same spot as in the design. */
.dh-hero-img { right: 0; }
.dh-look { right: 26px; }

/* ---------- Looks + occasion pages ---------- */
.of-hero-in h1, .oo-hero-in h1, .of-head h2, .oo-head h2, .of-cap h3, .ol-cap h3 { font-family: 'IBM Plex Sans Arabic', var(--sans); font-weight: 700; }
.of-hero-in h1 { line-height: 1.25; }
.of-hero-in h1, .of-lead { margin-right: 112px; }
.of-hero-in h1 { font-size: 54px; }
.of-hero-in h1 em { color: #b5874f; }
.oo-hero-in .crumbs, .oo-hero-in h1, .oo-lead { margin-right: 150px; }
.oo-hero-in h1 { font-size: 46px; line-height: 1.22; }
.oo-hero-in h1 em { color: #a67b45; }
.of-head h2 { font-size: 28px; }
.oo-head h2 { font-size: 26px; }
.of-cap h3 { font-size: 18px; line-height: 1.45; }
.ol-cap h3 { font-size: 22px; line-height: 1.4; }
.oo-feature .ol-cap h3 { font-size: 19px; }
.of-lead, .oo-lead { line-height: 1.75; }
/* The design lays these rows out left to right in Arabic too. */
.of-cats-in, .oo-layout, .oo-grid, .oo-feature, .of-grid { direction: ltr; }
.of-cats-in > *, .oo-layout > *, .oo-grid > *:not(.oo-feature), .oo-feature > *, .of-grid > * { direction: rtl; }
.ol-arrow .ic-i-arrow, .of-shop .ic-i-arrow, .ol-shop .ic-i-arrow { transform: none; }
.oo-head, .oo-tools, .oo-filters label, .oo-swatches, .ol-items { direction: ltr; }
.oo-head > div:first-child { direction: rtl; text-align: left; }
.ol-items li { direction: rtl; }
.ol-arrow .ic-i-arrow.flip { transform: scaleX(-1); }
.ol-items b { unicode-bidi: plaintext; }
@media (max-width: 1200px) {
  .of-hero-in h1, .of-lead, .oo-hero-in .crumbs, .oo-hero-in h1, .oo-lead { margin-right: 0; }
}
@media (max-width: 760px) {
  .of-hero-in h1, .oo-hero-in h1 { font-size: 30px; }
}

/* ---------- Beauty: category, product and routine pages ---------- */
.bc-hero-in h1, .bc-sub, .br-hero-in h1, .bpp-info h1 { font-family: 'IBM Plex Sans Arabic', var(--sans); font-weight: 700; }
.bc-hero-in h1 { font-size: 52px; line-height: 1.25; }
.bc-sub { font-size: 32px; line-height: 1.35; color: #a8743f; }
.bc-hero-in { text-align: left; }
.bc-hero-in .crumbs { justify-content: flex-end; }
.bc-hero-in .bc-chips { justify-content: flex-end; }
.br-hero-in h1 { font-size: 44px; line-height: 1.35; }
.br-hero:not(.br-hero--comp) .br-hero-img { -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 75%, transparent); }
.bpp-price b, .bpp-price s, .bpp-store-price, .bp-price, .br-step-price, .bpp-steps strong, .bpp-alts strong { unicode-bidi: plaintext; }
/* The design lays these rows out left to right in Arabic too. */
.bc-cats-in, .bc-layout, .bc-bar, .bc-grid, .bc-promos, .bc-colls-car .car-track, .bpp-top, .bpp-steps, .bpp-stores li, .bpp-quick dl div, .br-step-list { direction: ltr; }
.bc-cats-in > *, .bc-layout > *, .bc-bar > *, .bc-grid > *:not(.bc-promos), .bc-promos > *, .bc-colls-car .car-track > *, .bpp-top > *, .bpp-steps > li, .bpp-stores li > *, .br-step-list > li { direction: rtl; }
.bc-lead { margin-left: 0; margin-right: auto; }
.bpp-gallery, .bpp-sizes, .bpp-cta, .br-cta, .bpp-why li, .br-step-note { direction: ltr; }
.bpp-cta span, .br-cta span { direction: rtl; }
.bpp-why li { justify-content: flex-start; }
.bp-body { text-align: left; }
.bc-bar > .oo-tools { direction: ltr; }
.bpp-quick dt { direction: ltr; }
.bpp-quick dd { direction: rtl; }
.br-step-next .ic-i-chev-right, .bpp-main .ol-arrow .ic-i-arrow { transform: none; }
.bpp-main .ol-arrow .ic-i-arrow.flip { transform: scaleX(-1); }
.bpp-cta .ic-i-arrow, .br-cta .ic-i-arrow, .bp-cta .ic-i-arrow, .br-step-cta .ic-i-arrow, .bpp-stores .btn .ic-i-arrow, .br-others .btn .ic-i-arrow { transform: none; }
@media (max-width: 1200px) {
  .bc-hero-in { text-align: right; }
  .bc-hero-in .crumbs, .bc-hero-in .bc-chips { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .bc-hero-in h1 { font-size: 38px; }
  .br-hero-in h1 { font-size: 30px; }
}

/* Header v2: Arabic labels are shorter, so the links sit wider apart as in the design. */
@media (min-width: 1381px) { .site-header .main-nav { gap: 46px; margin-right: 110px; } }

/* ---------- Discover v2 ---------- */
.dx-copy h1, .dx-head h2, .dx-band-copy h2, .dx-cat b, .dx-pick-body h3, .dx-art b { font-family: 'IBM Plex Sans Arabic', var(--sans); font-weight: 700; }
.dx-copy h1 { font-size: 60px; line-height: 1.25; }
.dx-copy h1 em { color: #b5874f; }
.dx-head h2 { font-size: 26px; }
.dx-band-copy h2 { line-height: 1.45; }
.dx-band-copy h2 span { color: #e3ad6a; }
.dx-lead, .dx-band-copy > p { line-height: 1.75; }
.dx-card-go .ic-i-arrow, .dx-pick-go .ic-i-arrow { transform: none; }
.dx-band-copy h2 { font-size: calc(var(--u) * 36); line-height: 1.4; }
.dx-band-btns { flex-direction: row-reverse; justify-content: flex-end; }
.dx-chips a, .dx-trust li, .dx-strip li { flex-direction: row-reverse; }
.dx-chips { justify-content: flex-start; }
.dx-cat-grid, .dx-car .car-track { direction: ltr; }
.dx-cat-grid > *, .dx-car .car-track > * { direction: rtl; }
.dx-pick-body small { text-align: left; }
@media (max-width: 900px) { .dx-band-copy h2 { font-size: 28px; } }
@media (max-width: 760px) { .dx-copy h1 { font-size: 36px; } }
@media (min-width: 1201px) { .dx-chips { width: 780px; margin-right: -80px; } }
@media (min-width: 901px) { .dx-band-copy { text-align: left; width: calc(var(--u) * 430); } }

.bc-hero--plain .bc-hero-in { text-align: right; }
.bc-hero--plain .bc-hero-in .crumbs, .bc-hero--plain .bc-hero-in .bc-chips { justify-content: flex-start; }
.bc-hero--plain .bc-lead { margin-left: auto; margin-right: 0; }

/* Fashion and Home pages: the designs keep the photo/side layout and the item rows left to right.
   (Children first, so the row rules below win for rows that sit inside another row.) */
.fl-top > *, .fl-gallery > *, .fl-feats > *, .fl-pieces > *, .fl-row > *, .fl-occs li, .fl-sim > *, .fp-complete-body > *, .fp-pieces > *, .fp-fits li, .fp-alts li, .fp-swatches > *, .fp-car .car-track > *, .slm-grid > * { direction: rtl; }
.fl-top, .fl-gallery, .fl-feats, .fl-pieces, .fl-row, .fl-occs ul, .fl-sim, .fp-complete-body, .fp-pieces, .fp-fits ul, .fp-alts ul, .fp-swatches, .fp-car .car-track, .slm-grid { direction: ltr; }
.fp-pieces li + li::before { right: auto; left: -31px; }
@media (max-width: 760px) { .fp-pieces li + li::before { left: -24px; } }
/* Fashion look photo: the text block sits on the empty (left) side of the photo, as in the design. */
.fl-story h1 { max-width: 260px; }
.fl-story h1, .fl-story p { margin-left: 0; margin-right: auto; }