/* ─────────────────────────────────────────────────────────────
   Arabic (right-to-left) layer — loaded only when the visitor reads Arabic
   (partials/header.php). store.css stays untouched; everything here only
   flips what has a side (left/right) and switches to an Arabic typeface.
   ───────────────────────────────────────────────────────────── */

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  font-family: "IBM Plex Sans Arabic", "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
}
/* Arabic letters join up — spacing them apart breaks the words. The Latin logo keeps its spacing. */
html[dir="rtl"] *:not(.nav-brand):not(.foot-logo):not(.foot-mark):not(.foot-mark i):not(code):not(.trk-num) { letter-spacing: 0 !important; }
html[dir="rtl"] body { line-height: 1.75; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.45; }
html[dir="rtl"] .hero h1 { line-height: 1.3; }
html[dir="rtl"] .hero h1 em { font-family: "Amiri", "IBM Plex Sans Arabic", serif; font-weight: 700; }
/* Latin bits inside Arabic text (codes, order numbers, phone numbers, e-mails) stay readable */
html[dir="rtl"] code, html[dir="rtl"] .trk-num, html[dir="rtl"] input[type="email"], html[dir="rtl"] input[name="phone"], html[dir="rtl"] input[name="proof"], html[dir="rtl"] input[name="order"] { direction: ltr; unicode-bidi: plaintext; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[name="phone"] { text-align: right; }

/* language switch in the header */
.nav-lang { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--nav-fg, inherit); border: 1px solid currentColor; opacity: .85; text-decoration: none; }
.nav-lang:hover { opacity: 1; }
.mm-lang { opacity: .8; }

/* ── header / brand ── */
html[dir="rtl"] .nav-brand { padding-left: 0; padding-right: .36em; }
html[dir="rtl"] .nav-badge { right: auto; left: 2px; }

/* ── hero folds and the trust strip ── */
html[dir="rtl"] .f1 { right: auto; left: -6vmax; transform: rotate(-9deg); }
html[dir="rtl"] .f2 { right: auto; left: 16vmax; transform: rotate(4deg); }
html[dir="rtl"] .f3 { right: auto; left: 34vmax; transform: rotate(-13deg); }
html[dir="rtl"] .ti { border-left: 0; border-right: 1px solid var(--line2); }
html[dir="rtl"] .ti:first-child, html[dir="rtl"] .ti:nth-child(3) { border-right: 0; }

/* ── product cards / badges / prices ── */
html[dir="rtl"] .flag { left: auto; right: 10px; }
html[dir="rtl"] .off-badge { left: auto; right: 12px; }
html[dir="rtl"] .off-badge.inline { margin-left: 0; margin-right: 10px; }
html[dir="rtl"] .price-was { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .card-dots span { margin-left: 0; margin-right: 2px; }

/* Sliders (carousels, product gallery, thumbnails) keep left-to-right scrolling so swiping and the
   arrows behave exactly as before; only the text inside each slide reads right-to-left. */
html[dir="rtl"] .carousel, html[dir="rtl"] .gal-track, html[dir="rtl"] .gal-thumbs { direction: ltr; }
html[dir="rtl"] .carousel > *, html[dir="rtl"] .gal-track > * { direction: rtl; }

/* gallery controls */
html[dir="rtl"] .gal-count { left: auto; right: 14px; }
html[dir="rtl"] .gal-full { right: auto; left: 14px; }

/* ── product page ── */
html[dir="rtl"] .sg-open { margin-left: 0; margin-right: 10px; }
html[dir="rtl"] .sg-x { right: auto; left: 14px; }
html[dir="rtl"] .sg-table th, html[dir="rtl"] .sg-table td { text-align: right; }
html[dir="rtl"] .spec-row > div { text-align: left !important; }

/* ── footer ── */
html[dir="rtl"] .foot-cols a:hover { transform: translateX(-3px); }
html[dir="rtl"] .foot-mark { direction: ltr; }

/* ── tab bar ── */
html[dir="rtl"] .tb .dot { left: auto; right: calc(50% + 6px); }

/* ── wallet / tracking / offers / confirmation ── */
html[dir="rtl"] .wc-glow, html[dir="rtl"] .trk-glow, html[dir="rtl"] .offers-hero .oh-glow { right: auto; left: -150px; }
html[dir="rtl"] .wl-amt { text-align: left; }
html[dir="rtl"] .trk-step::before { left: auto; right: -50%; }
html[dir="rtl"] .cfm .cfm-items { text-align: right; }

/* ── 3D studio ── */
html[dir="rtl"] .studio-tools { left: auto; right: 18px; }
html[dir="rtl"] .studio-panel { border-left: 0; border-right: 1px solid var(--line2); }
html[dir="rtl"] .sp-prod { text-align: right; }
@media (max-width: 900px) {
  html[dir="rtl"] .studio-panel { border-right: 0; }
  html[dir="rtl"] .studio-tools { right: 12px; }
}

/* arrows that point "forward" in prose (→) are already flipped in the Arabic text itself */