/* ── GE Dinar One (self-hosted, licensed) ──────────────────────────────
   Drop the licensed font files into public/fonts/ with these names and
   the face activates automatically; until then (or for any missing
   weight) the stack falls back to Tajawal, which stays loaded. Each src
   lists several filenames/formats — the browser uses the first that
   exists, so uploading any one format per weight is enough. */
@font-face {
  font-family: "GE Dinar One";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GEDinarOne-Regular.woff2") format("woff2"),
       url("../fonts/GEDinarOne-Regular.woff") format("woff"),
       url("../fonts/GEDinarOne-Regular.otf") format("opentype"),
       url("../fonts/GEDinarOne-Regular.ttf") format("truetype"),
       url("../fonts/GEDinarOne-Light.woff2") format("woff2"),
       url("../fonts/GEDinarOne-Light.woff") format("woff"),
       url("../fonts/GEDinarOne-Light.otf") format("opentype"),
       url("../fonts/GEDinarOne-Light.ttf") format("truetype");
}
@font-face {
  font-family: "GE Dinar One";
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GEDinarOne-Medium.woff2") format("woff2"),
       url("../fonts/GEDinarOne-Medium.woff") format("woff"),
       url("../fonts/GEDinarOne-Medium.otf") format("opentype"),
       url("../fonts/GEDinarOne-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "GE Dinar One";
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GEDinarOne-Bold.woff2") format("woff2"),
       url("../fonts/GEDinarOne-Bold.woff") format("woff"),
       url("../fonts/GEDinarOne-Bold.otf") format("opentype"),
       url("../fonts/GEDinarOne-Bold.ttf") format("truetype");
}

html.lang-ar body {
  direction: ltr;
}

/* Arabic typography: the site's fonts (DM Sans / Playfair / Georgia) are
   Latin-only, so Arabic glyphs were falling back to the browser default —
   worst in the footer's Georgia stack. Tajawal renders both Arabic and
   Latin, keeping mixed lines (JOD, brand names) visually unified. The
   element list carries html.lang-ar specificity (0,1,1) so it beats the
   single-class font-family rules components use. Font Awesome icons keep
   their own font — <i> is deliberately not in the list. */
html.lang-ar body,
html.lang-ar :where(h1, h2, h3, h4, h5, h6, p, a, span, label, input, textarea, select, button, li, td, th, dt, dd, strong, em, small, div) {
  font-family: "GE Dinar One", "Tajawal", "DM Sans", system-ui, sans-serif;
}

/* Arabic needs slightly more room at the footer's smallest sizes */
html.lang-ar .site-footer__list a { font-size: 0.875rem; }
html.lang-ar .site-footer__copyright { font-size: 0.8125rem; }

/* Footer columns mirror: the first column (store information) starts
   from the right, the rest flow leftward. */
html.lang-ar .site-footer__grid { direction: rtl; }

/* Phone numbers in the store-info column render LTR as one unit —
   digits, plus sign and parentheses keep their natural order. */
html.lang-ar .site-footer__text a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ── Static pages (Arabic) ─────────────────────────────────────────────
   Sections centered in English stay centered in Arabic (the global
   element flip would right-align their headings/paragraphs). */
html.lang-ar .about-hero :where(h1, h2, h3, p),
html.lang-ar .about-section-head :where(h1, h2, h3, p),
html.lang-ar .legal-hero :where(h1, h2, h3, p),
html.lang-ar .contact-hero :where(h1, h2, h3, p),
html.lang-ar .cf-success :where(h1, h2, h3, p) {
  text-align: center;
}

/* About — story section: eyebrow pill and body start from the right;
   the pull-quote mirrors its red accent bar to the right edge. */
html.lang-ar .about-story__text-col { text-align: right; }
html.lang-ar .about-story__eyebrow { direction: rtl; }
html.lang-ar .about-story__quote {
  direction: rtl;
  text-align: right;
  border-left: none;
  border-right: 3px solid #c41e3a;
  border-radius: 10px 0 0 10px;
}

/* About — highlight mini-cards: grid flows from the right and each
   card's icon/headline/label right-align (spans, so the global element
   flip never reaches them). */
html.lang-ar .about-story__card-grid { direction: rtl; }
html.lang-ar .about-story__mini-card { direction: rtl; text-align: right; }

/* About — values & offerings cards: grids flow from the right; inside
   each column-flex card the fixed-width icon box sits at the inline
   start, which direction:rtl moves to the right. */
html.lang-ar .about-values__grid,
html.lang-ar .about-offerings__grid { direction: rtl; }
html.lang-ar .about-value-card,
html.lang-ar .about-offer-card { direction: rtl; text-align: right; }

/* About — location banner: grid flips so the address block reads from
   the right and the action buttons land on the left. */
html.lang-ar .about-location__inner { direction: rtl; text-align: right; }

/* Contact — form card + info-sidebar cards: headers (icon + title) and
   bodies read from the right; the icon rows inside mirror with them. */
html.lang-ar .contact-form-card__header,
html.lang-ar .ci-card__header,
html.lang-ar .ci-card__body {
  direction: rtl;
  text-align: right;
}

/* Contact — opening-hours table mirrors: the days column sits on the
   right (right-aligned), the times column moves to the left. */
html.lang-ar .ci-hours { direction: rtl; }
html.lang-ar .ci-hours td:last-child { text-align: left; }

/* Contact — form field icons move to the right, input padding mirrors */
html.lang-ar .cf-input-wrap .cf-icon { left: auto; right: 0.85rem; }
html.lang-ar .cf-field input.has-icon,
html.lang-ar .cf-field select.has-icon { padding-left: 0.95rem; padding-right: 2.4rem; }

/* Legal pages (privacy/terms/returns) — the document body reads from the
   right (section bodies are raw-HTML divs the global element flip never
   reaches), and the sidebar card mirrors: icon and CTA anchor right. */
html.lang-ar .legal-document { direction: rtl; text-align: right; }
html.lang-ar .legal-sidebar__card { direction: rtl; text-align: right; }

/* Site map — group cards and their link lists read from the right */
html.lang-ar .sitemap-group { direction: rtl; text-align: right; }

/* Category page header: flex row mirrors so the title sits on the right
   and the result count / extras flow to its left. */
html.lang-ar .cat-header { direction: rtl; }

/* Single product page — facts list (format/publisher/year/ISBN…) reads
   from the right; the label's gap mirrors with it. */
html.lang-ar .product-facts { direction: rtl; text-align: right; }
html.lang-ar .product-facts li span:first-child { margin-right: 0; margin-left: 0.35rem; }

/* Action buttons row starts from the right with the primary button
   (Add to Cart) rightmost, then Wishlist — full mirror of English. */
html.lang-ar .product-actions { direction: rtl; }
/* Quantity stepper keeps its − [n] + order; the note aligns right */
html.lang-ar .product-qty { direction: ltr; }
html.lang-ar .product-qty-note { text-align: right; }

/* Homepage collections grid flows from the right (first card rightmost) */
html.lang-ar .collections__grid { direction: rtl; }

/* Single collection page hero mirrors: mosaic on the right, text block
   on the left reading rightward; the breadcrumb arrow points left. */
html.lang-ar .col-hero { direction: rtl; }
html.lang-ar .col-breadcrumb__sep { display: inline-block; transform: scaleX(-1); }

/* Section/feature page breadcrumb (Home → Section) starts from the
   right, with the arrow pointing left in the Arabic reading direction. */
html.lang-ar .bsp-breadcrumb { direction: rtl; }
html.lang-ar .bsp-breadcrumb__sep { display: inline-block; transform: scaleX(-1); }

/* Homepage collection cards: the circular arrow moves to the bottom-left
   corner (its reserved padding mirrors) and the glyph points left. */
html.lang-ar .collection-card__body { padding: 0 0 0.35rem 3.25rem; }
html.lang-ar .collection-card__arrow { right: auto; left: 0; }
html.lang-ar .collection-card__arrow svg { transform: scaleX(-1); }

/* Sort dropdown: keep the native arrow on the RIGHT (user decision —
   direction:rtl from the global rule moves it left); the selected value
   still aligns right for Arabic. */
html.lang-ar .cat-sort__select { direction: ltr; text-align: right; }

/* Category sidebar (Arabic): header and rows read from the right, the
   expander button lands on the left with its separator mirrored, the
   active accent bar moves to the right edge, and depth indentation
   mirrors to the right side. */
html.lang-ar .cat-sidenav__header { direction: rtl; text-align: right; }
html.lang-ar .cat-sidenav__link,
html.lang-ar .cat-sidenav__toggle {
  direction: rtl;
  text-align: right;
  border-left: none;
  border-right: 3px solid transparent;
}
html.lang-ar .cat-sidenav__link:hover { border-right-color: #f1cdd4; }
html.lang-ar .cat-sidenav__link.is-active { border-right-color: #c41e3a; }
html.lang-ar .cat-sidenav__split-row { direction: rtl; }
html.lang-ar .cat-sidenav__split-row .cat-sidenav__expander {
  border-left: none;
  border-right: 1px solid #f0ece7;
}
/* Closed chevron points LEFT in Arabic (expansion direction). The
   existing [aria-expanded="true"] rules have higher specificity and
   rotate it to a symmetric down-chevron, so the open state is safe. */
html.lang-ar .cat-sidenav__chevron { transform: scaleX(-1); }
html.lang-ar .cat-sidenav__sublist > li > .cat-sidenav__link,
html.lang-ar .cat-sidenav__sublist > li > .cat-sidenav__toggle,
html.lang-ar .cat-sidenav__sublist > li > .cat-sidenav__split-row {
  padding-left: 0;
  padding-right: 1.85rem;
}
html.lang-ar .cat-sidenav__sublist .cat-sidenav__sublist > li > .cat-sidenav__link,
html.lang-ar .cat-sidenav__sublist .cat-sidenav__sublist > li > .cat-sidenav__toggle,
html.lang-ar .cat-sidenav__sublist .cat-sidenav__sublist > li > .cat-sidenav__split-row {
  padding-left: 0;
  padding-right: 2.85rem;
}
html.lang-ar .cat-sidenav__sublist .cat-sidenav__sublist .cat-sidenav__sublist > li > .cat-sidenav__link,
html.lang-ar .cat-sidenav__sublist .cat-sidenav__sublist .cat-sidenav__sublist > li > .cat-sidenav__toggle {
  padding-left: 0;
  padding-right: 3.65rem;
}

html.lang-ar :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  label,
  input,
  textarea,
  select,
  .primary-nav a,
  .account-menu__link,
  .lang-switcher__value,
  .lang-switcher__option,
  .breadcrumb__list,
  .cat-breadcrumb,
  .bestsellers__title,
  .bestsellers__view-all,
  .collections__title,
  .cat-header__title,
  .cat-header__eyebrow,
  .cat-header__copy,
  .cat-sidenav__link,
  .cat-chip,
  .cat-empty,
  .bsp-hero__title,
  .bsp-hero__sub,
  .readers-banner__heading,
  .readers-banner__lede,
  .readers-banner__section-title,
  .product-title,
  .product-description,
  .product-tabs,
  .product-meta,
  .site-footer__col
) {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

html.lang-ar .book-card__title[dir="rtl"],
html.lang-ar .book-card__author[dir="rtl"],
html.lang-ar .related-card__title[dir="rtl"] {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

html.lang-ar .book-card__title[dir="ltr"],
html.lang-ar .book-card__author[dir="ltr"],
html.lang-ar .related-card__title[dir="ltr"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

html.lang-ar .primary-nav {
  direction: rtl;
}

html.lang-ar .primary-nav a {
  text-align: right;
}

html.lang-ar .bestsellers__head {
  direction: ltr;
}

html.lang-ar .bestsellers__head .bestsellers__title {
  order: 2;
  margin-left: auto;
  text-align: right;
}

html.lang-ar .bestsellers__head .bestsellers__view-all {
  order: 1;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* ── Cart / checkout (Arabic) ──────────────────────────────────────────
   The checkout is fully mirrored: the whole panel — and the checkout
   modals/toast, which mount on <body> — runs RTL, so every grid/flex row
   (cart lines, summary rows, stepper, forms, saved addresses/cards)
   flips automatically. Everything after the container rule is a
   deliberate exception: physical left/right values that direction:rtl
   does not mirror, plus LTR islands (Leaflet map, scroll carousel). */

html.lang-ar .cart-panel,
html.lang-ar .cart-note-modal,
html.lang-ar .cart-receipt-modal,
html.lang-ar .cart-toast {
  direction: rtl;
  text-align: right;
}

/* Opted-out sections: basket line items and the upsell carousel keep the
   same LTR layout as the English site (user decision). direction:ltr on
   the container restores the grid/flex order; the :where() override beats
   the global lang-ar element flip (0,2,1 vs 0,1,1) so their inner text
   nodes revert too. Arabic strings inside still render correctly through
   the browser's bidi algorithm — they are simply left-anchored. */
html.lang-ar .cart-line,
html.lang-ar .cart-line :where(h1, h2, h3, p, label, input, select, textarea),
html.lang-ar .cart-upsell,
html.lang-ar .cart-upsell :where(h1, h2, h3, p, label, input, select, textarea) {
  direction: ltr;
  text-align: left;
}
/* Restore the physical alignments the LTR design expects */
html.lang-ar .cart-line__total { text-align: right; }
/* …but the Remove / note actions row anchors bottom-right, flush with the
   price column's right edge (user decision). The card reserves bottom
   space so the absolutely-positioned row can never overlap content. */
html.lang-ar .cart-line:not(.cart-line--undo) {
  position: relative;
  padding-bottom: 3.1rem;
}
html.lang-ar .cart-line__row-actions {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  margin-top: 0;
}
/* Note button: sticky-note icon sits to the right of its Arabic label */
html.lang-ar .cart-line__note-btn { flex-direction: row-reverse; }

/* Upsell head: the "قد يعجبك أيضاً" heading sits on the right, the
   scroll arrows move to the left (space-between keeps the spread). The
   carousel track below stays LTR per the earlier opt-out. */
html.lang-ar .cart-upsell__head { flex-direction: row-reverse; }
html.lang-ar .cart-upsell__head .cart-upsell__title { text-align: right; }

/* Physical values that direction:rtl does not flip */
html.lang-ar .cart-order-note-btn { text-align: right; }
html.lang-ar .cart-note-modal__count { text-align: left; }   /* char count sits at the line end */
html.lang-ar .cart-summary__old-price { margin-right: 0; margin-left: 0.2em; }
html.lang-ar .cart-receipt-old-price { margin-right: 0; margin-left: 0.25em; }
html.lang-ar .cart-pickup-location__map-link { margin-left: 0; margin-right: 0.5em; }
html.lang-ar .cart-express__status { margin-left: 0; margin-right: auto; }
html.lang-ar .cart-pay-continue { margin-left: 0; margin-right: auto; }

/* Selected-state checkmark badges move to the mirrored corner */
html.lang-ar .cart-express__option.is-selected::after { right: auto; left: 7px; }
html.lang-ar .cart-payment-method:has(input:checked)::after { right: auto; left: 8px; }

/* Map search box: magnifier icon + input padding mirrored */
html.lang-ar .cart-addr-map-search__input-wrap > i { left: auto; right: 0.75rem; }
html.lang-ar .cart-addr-map-search__input { padding: 0 2.1rem 0 0.75rem; }

/* Directional icons: "back" points right in Arabic */
html.lang-ar .cart-summary__back .fa-arrow-left { transform: scaleX(-1); }

/* Stepper runs right-to-left, so a completed connector fills from the right */
html.lang-ar .cart-steps__connector-fill { transform-origin: right; }

/* LTR island: the Leaflet map's controls and attribution assume LTR.
   (The upsell carousel is already fully LTR via the opt-out above, which
   also keeps its scrollBy() arrows truthful.) */
html.lang-ar #cart-addr-map { direction: ltr; }

/* Phone entry stays visually LTR: dial code first, then the number, both
   Latin/digits — matches how Jordanian numbers are read and typed. */
html.lang-ar .cart-panel .phone-field { direction: ltr; }
html.lang-ar .cart-panel .phone-field input { direction: ltr; text-align: left; }

/* ── Auth pages (Arabic) ───────────────────────────────────────────────
   Inputs are RTL (global rule above), so the password eye moves to the
   left edge and the input padding mirrors with it. */
html.lang-ar .auth-password input { padding-right: 1rem; padding-left: 3.15rem; }
html.lang-ar .auth-password__toggle { right: auto; left: 0.4rem; }
html.lang-ar .auth-newsletter__row,
html.lang-ar .auth-newsletter__radios { direction: rtl; text-align: right; }
html.lang-ar .auth-forgot { text-align: left; }      /* mirrored from right */
html.lang-ar .otp-modal__field { text-align: right; }

/* Auth titles/ledes and the OTP modal are centered in English — keep
   them centered in Arabic (the global element flip would right-align
   their headings/paragraphs/inputs otherwise). */
html.lang-ar .auth-shell__header :where(h1, h2, p),
html.lang-ar .auth-shell__lede,
html.lang-ar .otp-modal__dialog :where(h1, h2, h3, p),
html.lang-ar .otp-modal__text,
html.lang-ar .otp-modal__input {
  text-align: center;
}

/* ── Account orders (Arabic) ───────────────────────────────────────────
   Nav items read from the right with the icon on the right; the active
   accent bar moves to the right edge. Breakdown rows fully mirror. */
html.lang-ar .orders-nav__link {
  direction: rtl;
  text-align: right;
  border-left: none;
  border-right: 3px solid transparent;
}
html.lang-ar .orders-nav__link.is-active { border-right-color: #c41e3a; }
html.lang-ar button.orders-nav__link { text-align: right; }
html.lang-ar .order-breakdown { direction: rtl; text-align: right; }
html.lang-ar .orders-search__icon { left: auto; right: 0.85rem; }
html.lang-ar .orders-search__input { padding: 0.62rem 2.3rem 0.62rem 0.9rem; }
html.lang-ar .orders-count { margin-left: 0; margin-right: auto; }

/* ── Address book (Arabic) ─────────────────────────────────────────────
   Card headers mirror (icon + title on the right, action button on the
   left); the map itself stays LTR for Leaflet. */
html.lang-ar .ab-map-card__header,
html.lang-ar .ab-form-card__header { direction: rtl; text-align: right; }
html.lang-ar #ab-map { direction: ltr; }
html.lang-ar .ab-map-search__input-wrap i { left: auto; right: 0.85rem; }
html.lang-ar .ab-map-search__input { padding: 0 2.35rem 0 0.85rem; }
html.lang-ar .ab-map-result-item { direction: rtl; text-align: right; }
html.lang-ar .ab-addr-card { direction: rtl; text-align: right; }
html.lang-ar .ab-addr-card--default::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
html.lang-ar .ab-addr-card__map-btn-text { text-align: right; }

/* ── Profile page + shared pf-* form fields (Arabic) ───────────────────
   The address-book form reuses these field styles, so this block mirrors
   the field icons on both pages: icon on the right, padding flipped,
   select chevron on the left, password toggle on the left. */
html.lang-ar .pf-input-wrap .pf-input-icon,
html.lang-ar .pf-select-wrap .pf-input-icon { left: auto; right: 0.85rem; }
html.lang-ar .pf-field input.has-icon { padding-left: 0.95rem; padding-right: 2.4rem; }
html.lang-ar .pf-select-wrap::after { right: auto; left: 0.9rem; }
html.lang-ar .pf-select-wrap select { padding-right: 0.95rem; padding-left: 2.4rem; }
html.lang-ar .pf-field select.has-icon { padding-right: 2.4rem; padding-left: 2.4rem; }
html.lang-ar .pf-password-wrap input { padding-right: 0.95rem; padding-left: 3rem; }
html.lang-ar .pf-password-toggle { right: auto; left: 0.45rem; }
html.lang-ar .pf-strength__label { text-align: left; }
/* Save bar keeps the English layout (starts from the left: unsaved tag
   left, Discard/Save buttons right) — user decision. */
html.lang-ar .pf-save-bar { direction: ltr; }
/* Gender + newsletter radio groups start from the right */
html.lang-ar .pf-radio-group { direction: rtl; }
html.lang-ar .profile-card__header { direction: rtl; text-align: right; }
html.lang-ar .profile-nav__link {
  direction: rtl;
  text-align: right;
  border-left: none;
  border-right: 3px solid transparent;
}
html.lang-ar .profile-nav__link.is-active { border-right-color: #c41e3a; }
html.lang-ar .profile-hero__avatar-badge { right: auto; left: 0; }
/* Hero content starts from the right (shared by profile + payment pages;
   the inline-styled inner row inherits the direction and mirrors too). */
html.lang-ar .profile-hero__inner { direction: rtl; text-align: right; }

/* Orders + book-requests hero (both pages share these classes): title
   block on the right, stats block on the left; inner icon/text rows
   mirror with the container. */
html.lang-ar .orders-hero__row { direction: rtl; }

/* Order card header: the id/date are spans (not covered by the global
   element flip), so the whole header mirrors and the id/date align
   right with bidi-safe rendering of "الطلب #RD-…" and Arabic dates. */
html.lang-ar .order-card__header { direction: rtl; }
html.lang-ar .order-card__id,
html.lang-ar .order-card__date {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

/* Opt-out: order item rows and book-request card bodies keep the same
   LTR layout as the English site (user decision, mirrors the cart-line
   opt-out). The :where override beats the global lang-ar element flip. */
html.lang-ar .order-item-row__info,
html.lang-ar .order-item-row__info :where(h1, h2, h3, h4, p, label, span),
html.lang-ar .br-card__body,
html.lang-ar .br-card__body :where(h1, h2, h3, h4, p, label, span) {
  direction: ltr;
  text-align: left;
}

/* Payment page section head mirrors: title group on the right, the
   action button on the left. */
html.lang-ar .pay-section__head { direction: rtl; }

/* Heroes that are centered in English stay centered in Arabic — the
   global element flip right-aligns their headings otherwise. Direction
   stays RTL so Arabic text still shapes correctly; only alignment is
   restored. Same for the centered loyalty "done" panel and the gift
   card page's centered hero/step headings/design labels. */
html.lang-ar .ab-hero :where(h1, h2, h3, p),
html.lang-ar .lc-hero :where(h1, h2, h3, p),
html.lang-ar .lc-done :where(h1, h2, h3, p),
html.lang-ar .gc-hero :where(h1, h2, h3, p),
html.lang-ar .gc-step1__heading,
html.lang-ar .gc-step1__sub,
html.lang-ar .gc-preview-card__middle :where(h1, h2, h3, p),
html.lang-ar .gc-designs-empty,
html.lang-ar .gc-image-opt,
html.lang-ar .gc-delivery-opt__label {
  text-align: center;
}

/* ── Loyalty page (Arabic) ─────────────────────────────────────────────
   Content blocks mirror; the loyalty card visual itself (lc-card front/
   back) deliberately stays as-is — it replicates the physical card. */
html.lang-ar .lc-active-header,
html.lang-ar .lc-alert,
html.lang-ar .lc-card-info,
html.lang-ar .lc-earn__title,
html.lang-ar .lc-earn__rate,
html.lang-ar .lc-earn__redeem,
html.lang-ar .lc-earn__gold,
html.lang-ar .lc-earn__brands {
  direction: rtl;
  text-align: right;
}
html.lang-ar .lc-tabs { direction: rtl; }   /* tabs start from the right */
html.lang-ar .lc-earn__rule { margin-left: auto; margin-right: 0; }   /* gold underline starts from the right */
html.lang-ar .lc-picker__check { right: auto; left: 0.55rem; }
html.lang-ar .lc-field select {
  background-position: left 0.6rem center;
  padding-right: 0.75rem;
  padding-left: 2rem;
}

/* ── Sidebars move to the RIGHT in Arabic (desktop only — both layouts
      collapse to a single column on mobile, where source order stays). ── */
@media (min-width: 861px) {
  /* Account pages (profile / address book / payment / loyalty):
     grid is 220px nav + 1fr content — mirror to content + nav. */
  html.lang-ar .profile-layout { grid-template-columns: 1fr 220px; }
  html.lang-ar .profile-layout .profile-nav { order: 2; }
}
@media (min-width: 721px) {
  /* Category pages: flex row of sidenav + products — reverse it. */
  html.lang-ar .cat-layout { flex-direction: row-reverse; }
}

/* ── Breadcrumb "›" separators point toward the NEXT crumb — leftward in
      RTL — and their spacing mirrors with them. The glyph must be forced
      into an LTR run: ‹/› are bidi-mirrored characters, so inside the RTL
      breadcrumb the browser would flip them right back. ── */
html.lang-ar .cat-breadcrumb li:not(:last-child)::after {
  content: "\2039"; /* ‹ */
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
  margin-left: 0;
  margin-right: 0.55rem;
}
html.lang-ar .breadcrumb__list li:not(:last-child)::after {
  content: "\2039"; /* ‹ */
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
  margin-left: 0;
  margin-right: 0.65rem;
}