/* ===================== Maison Sable — Arabic (RTL) overrides =====================
   Loaded after ../styles.css on /ar/. Headings: Alexandria · Body: IBM Plex Sans Arabic.
   The Latin wordmark "MaisonSable" keeps Onest. */
:root {
  --head: "Alexandria", "Onest", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", "Open Sans", system-ui, sans-serif;
}
body { font-family: var(--body); font-size: 16px; }

/* Letter-spacing and uppercase break Arabic joining — reset them everywhere */
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; text-transform: none !important; }
.brand__name { font-family: "Onest", system-ui, sans-serif; letter-spacing: -.01em !important; }
.brand__tag { font-family: var(--body); font-size: 11.5px; font-weight: 500; margin-top: 4px; }

/* Arabic needs taller line boxes and slightly calmer display sizes */
.hero__title { font-weight: 600; font-size: clamp(40px, 6.4vw, 96px); line-height: 1.25; }
.hero__sub { line-height: 1.85; }
.section-title { font-weight: 600; line-height: 1.3; }
.section-sub, .feature p, .pm__desc, .footer__intro p, .top__text p { line-height: 1.9; }
.eyebrow { font-family: var(--head); font-weight: 400; }
.top__text h2 { line-height: 1.2; font-weight: 600; }
.shop__banner h2 { line-height: 1.25; }
.footer h2 { line-height: 1.25; font-weight: 600; }
.nav__link, .btn, .pill, .pm__row, .pm__total, .footer__col h4, .top__eyebrow { font-family: var(--head); }
.nav__link { font-size: 15px; font-weight: 500; }
.btn { font-size: 14.5px; font-weight: 500; }
.pill { font-size: 14px; font-weight: 500; }
.chip { font-size: 12.5px; }
.stats span { font-size: 14px; }
.footer__col a { font-size: 14.5px; }
.top__eyebrow { font-size: 15px; }
.pm__row, .pm__total { font-size: 15px; }
.card__name { font-size: 16.5px; }
.cat h3 { line-height: 1.35; }
.hero-tip h3 { font-size: 19px; }
.hero-tip p { line-height: 1.7; }
.hero-card p { line-height: 1.75; }

/* ---------- mirror the layout ---------- */
.line--l::after { right: auto; left: -2px; }
.line--r::after { left: auto; right: -2px; }

.search__box { padding: 0 24px 0 12px; }
.s-item { text-align: right; }
.s-item:hover { transform: translateX(-6px); }
.s-item span:last-child { margin-left: 0; margin-right: auto; padding-right: 0; padding-left: 10px; }

.hero-tip { left: auto; right: 22%; padding: 7px 7px 7px 22px; }
.hero-tip::after { right: auto; left: -90px; border-right: 0; border-left: 1px solid rgba(80,60,40,.35); transform: skewX(-35deg); }
.hero-video { left: auto; right: 4%; }
.hero-card { right: auto; left: 4%; }
.heart { right: auto; left: 12px; }
.play svg { margin-left: 3px; } /* the play triangle keeps pointing right */

.top__shade { background: linear-gradient(270deg, rgba(25,18,12,.7) 0%, rgba(25,18,12,.35) 45%, rgba(25,18,12,0) 70%); }
.top__thumbs { right: auto; left: 30px; }
.thumb { margin-left: 0; margin-right: auto; }
.thumb__info { text-align: right; padding-left: 0; padding-right: 10px; }

.card__arrow { right: auto; left: 14px; }
.card__heart { left: auto; right: 14px; }
.card__arrow svg, .cat__go svg, #prev svg, #next svg { transform: scaleX(-1); }

.footer__col a:hover { transform: translateX(-4px); }

.modal__close { right: auto; left: 16px; }
.heart--lg { right: auto; left: 70px; }
.drawer__panel { right: auto; left: 0; animation-name: slideInRtl; }
@keyframes slideInRtl { from { transform: translateX(-100%); } }
.c-item__right { text-align: left; align-items: flex-start; }

/* phone numbers / handles stay left-to-right inside Arabic text */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (max-width: 1180px) {
  .hero-tip { left: auto; right: 8%; }
}
@media (max-width: 980px) {
  .hero-tip { right: auto; left: 50%; }
  .hero-card { left: 50%; right: auto; text-align: right; }
  .thumb { margin: 0; }
  .heart--lg { left: auto; right: 40px; }
}
@media (max-width: 640px) {
  .hero__title { font-size: 40px; }
  .hero-tip { padding: 7px 7px 7px 14px; }
  .heart { right: auto; left: 10px; }
  .brand__tag { font-size: 10.5px; }
}