/* Right-to-left layer: the Arabic page (locale 'ar', inc/i18n.php).

   inc/setup.php enqueues this sheet only while lc_is_rtl() is true — that is, on
   a document whose <html> carries dir="rtl" — and after every other stylesheet,
   so it overrides them by order rather than by !important. Every rule below is
   scoped to html[dir="rtl"] as well, so the English page is unreachable from
   here even if the sheet were ever loaded on it.

   Two jobs, in this order:

   1. The Arabic type layer. tokens.css is written for Inter and Plus Jakarta
      Sans, neither of which carries Arabic, and the design's type devices are
      Latin ones: 0.1em–0.17em tracking on every micro-label, all-caps
      transforms, tight negative tracking on the display face, 800 weights.
   2. The mirrored layout. One section per source sheet, naming the rule each
      override answers. Only direction-dependent properties are overridden —
      grid and flex ordering is not touched anywhere, because `direction` is
      inherited from <html dir="rtl"> and auto-placement already runs right to
      left.

   Checked and left alone, because they carry nothing direction-dependent:
   assets/wp-behaviors/base.css ([hidden] only) and
   assets/css/route-about-our-approach.css (reading measures only, max-width).
   assets/css/tokens.css carries no side-dependent rule either — it is overridden
   only for the two font stacks below. No background-position, no non-zero
   box-shadow x-offset and no percentage-based translate appears in assets/css
   at all, so there is nothing of those to mirror.

   Mobile breakpoints are the theme's own: 1100px, 900px and 560px. */


/* =====================================================================
   1. Arabic type
   ===================================================================== */

/* ---------- tokens.css: the locale's own family ----------
   :root sets --font-body:Inter,... and --font-display:'Plus Jakarta Sans',...
   inc/setup.php loads 'IBM Plex Sans Arabic' for this locale only (the family
   named in inc/i18n.php lc_locales()['ar']['font']), so the swap is made by
   re-declaring the two tokens here rather than by adding a font request. Inter
   and Plus Jakarta Sans stay in each stack behind the Arabic family, so a Latin
   name, address or number inside Arabic copy keeps the design's own face. */
html[dir="rtl"]{
  --font-body:'IBM Plex Sans Arabic',Inter,Arial,sans-serif;
  --font-display:'IBM Plex Sans Arabic','Plus Jakarta Sans',Inter,Arial,sans-serif;
}

/* ---------- layout.css: air for Arabic ----------
   body{font:400 16px/1.62 ...} is drawn for Inter, and h2{line-height:1.16} /
   h3{line-height:1.25} for the Latin display face. Arabic hangs its diacritics
   above and its final forms below the same em, so the same measure crowds; the
   display sizes the pages set themselves crowd it more than either
   (.home-hero__title 1.04, .page-head__title 1.1). */
html[dir="rtl"] body{line-height:1.75}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .home-hero__title,
html[dir="rtl"] .page-head__title{line-height:1.35}

/* ---------- home.css: .home-hero__title em ----------
   That rule is {color:var(--clay);font-style:italic}. The emphasis is the clay
   colour; the italic is a Latin convention Arabic does not have, and a browser
   fakes it by slanting the joined letterforms. The colour stays, the slant goes. */
html[dir="rtl"] .home-hero__title em{font-style:normal}

/* ---------- the 800 weight the Arabic family does not load ----------
   inc/setup.php requests this locale's family at wght@400;500;600;700, while the
   design asks for font-weight:800 on its small labels — .eyebrow, .brand__name,
   .text-link, .to-top__button, .product-card__meta, .step__no, .about-mile__year
   and the rest of the list below. 800 is past the family's axis, so it is either
   served by the 700 face anyway or faked with a synthetic bold, which on a
   joined script reads as a blurred outline. 700 is the design's bold here. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .brand__name,
html[dir="rtl"] .site-footer__name,
html[dir="rtl"] .text-link,
html[dir="rtl"] .panel__eyebrow,
html[dir="rtl"] .panel__link--strong,
html[dir="rtl"] .nav-drawer__title,
html[dir="rtl"] .wa-float,
html[dir="rtl"] .to-top__button,
html[dir="rtl"] .page-head__eyebrow,
html[dir="rtl"] .product-card__meta,
html[dir="rtl"] .product-facts__title,
html[dir="rtl"] .spec-table th,
html[dir="rtl"] .category-step__no,
html[dir="rtl"] .category-related__label,
html[dir="rtl"] .panel-card__no,
html[dir="rtl"] .step__no,
html[dir="rtl"] .link-card__title,
html[dir="rtl"] .rfq-aside__label,
html[dir="rtl"] .quote-reference__label,
html[dir="rtl"] .solution-copy__no,
html[dir="rtl"] .home-quote__checklist-title,
html[dir="rtl"] .home-step__no,
html[dir="rtl"] .home-about__fact-label,
html[dir="rtl"] .home-resource__no,
html[dir="rtl"] .about-pillar__no,
html[dir="rtl"] .about-mile__year,
html[dir="rtl"] .about-next__title,
html[dir="rtl"] .legal-toc__title,
html[dir="rtl"] .topic-filter__title,
html[dir="rtl"] .resource-card__meta,
html[dir="rtl"] .article__prose blockquote cite,
html[dir="rtl"] .article__prose th,
html[dir="rtl"] .article__topics-label,
html[dir="rtl"] .article__protected label,
html[dir="rtl"] .products-tile__count,
html[dir="rtl"] .catalogue-count__label{font-weight:700}

/* ---------- the design's tracking, and all-caps, on every label ----------
   The micro-labels of every sheet are tracked .06em–.17em: .eyebrow (.15em),
   .brand__tagline (.17em), .media-slot__size (.14em), .panel__eyebrow (.15em),
   .panel__heading (.12em), .to-top__button (.14em), .wa-float (.12em),
   .page-head__eyebrow (.15em), .product-card__meta (.13em), .spec-table th
   (.06em), .record__label (.12em), .topic-filter__title (.16em),
   .resource-card__meta (.12em), .article__date (.14em), .products-tile__count
   (.12em) and the rest listed below. Tracking is a Latin device: Arabic is a
   joined script and letter gaps pull the joins apart.

   text-transform:uppercase goes with it. Arabic has no case, so the transform
   does nothing to an Arabic label and reaches only the Latin fragments such a
   label may still carry (a price, "Pantone", a line the catalogue has not
   translated yet), which then shout inside Arabic copy. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .media-slot__label,
html[dir="rtl"] .media-slot__size,
html[dir="rtl"] .brand__tagline,
html[dir="rtl"] .panel__eyebrow,
html[dir="rtl"] .panel__heading,
html[dir="rtl"] .nav-drawer__title,
html[dir="rtl"] .wa-float,
html[dir="rtl"] .to-top__button,
html[dir="rtl"] .page-head__eyebrow,
html[dir="rtl"] .product-card__meta,
html[dir="rtl"] .product-facts__title,
html[dir="rtl"] .spec-table th,
html[dir="rtl"] .category-related__label,
html[dir="rtl"] .step__no,
html[dir="rtl"] .record__label,
html[dir="rtl"] .about-mile__year,
html[dir="rtl"] .field__optional,
html[dir="rtl"] .file-field__button,
html[dir="rtl"] .rfq-aside__label,
html[dir="rtl"] .quote-reference__label,
html[dir="rtl"] .solution-copy__no,
html[dir="rtl"] .favorite-card__group,
html[dir="rtl"] .home-quote__checklist-title,
html[dir="rtl"] .legal-toc__title,
html[dir="rtl"] .topic-filter__title,
html[dir="rtl"] .resource-card__meta,
html[dir="rtl"] .resource-card__date,
html[dir="rtl"] .article__date,
html[dir="rtl"] .article__prose blockquote cite,
html[dir="rtl"] .article__prose th,
html[dir="rtl"] .article__topics-label,
html[dir="rtl"] .article__protected label,
html[dir="rtl"] .products-tile__count,
html[dir="rtl"] .catalogue-count__label{letter-spacing:0;text-transform:none}

/* ---------- the tight display tracking, cleared ----------
   The design also tracks its display face tight, and negative tracking closes
   the word-spaces and joins Arabic needs: h2 -.045em and h3 -.027em
   (layout.css), .brand__name -.075em, .site-footer__name -.06em,
   .home-hero__title -.05em, .page-head__title -.05em, .solution-copy h3 -.04em,
   .rfq-form__title -.027em, the page leads -.015em (.subpage-hero__lead,
   .products-hero__lead, .about-hero__lead, .category-hero__lead, .legal-lead,
   .resources-head__lead), and the card titles -.02em (.link-card__title,
   .about-next__title, .resource-card__title, .rfq-aside__title, .panel__lead). */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .brand__name,
html[dir="rtl"] .site-footer__name,
html[dir="rtl"] .home-hero__title,
html[dir="rtl"] .page-head__title,
html[dir="rtl"] .media-slot__brief,
html[dir="rtl"] .panel__lead,
html[dir="rtl"] .solution-copy h3,
html[dir="rtl"] .link-card__title,
html[dir="rtl"] .about-next__title,
html[dir="rtl"] .rfq-form__title,
html[dir="rtl"] .rfq-aside__title,
html[dir="rtl"] .subpage-hero__lead,
html[dir="rtl"] .products-hero__lead,
html[dir="rtl"] .about-hero__lead,
html[dir="rtl"] .category-hero__lead,
html[dir="rtl"] .legal-lead,
html[dir="rtl"] .resources-head__lead,
html[dir="rtl"] .resource-card__title{letter-spacing:normal}

/* Left as authored: the three positive trackings below .03em — .home-trust__item
   (.025em), .product-grid__range / .resources-list__range / .quote-reference__value
   (.02em) and the numeric markers .panel-card__no / .category-step__no /
   .about-pillar__no (.14em on a digit pair). At these sizes the gap they open is
   under half a device pixel and the markers stay Latin digits, so nothing there
   reads wrong. */


/* =====================================================================
   2. The mirrored layout, sheet by sheet
   ===================================================================== */

/* ---------- layout.css: the skip link ----------
   .skip-link{position:absolute;left:-9999px} parks it off the inline-start edge,
   and .skip-link:focus{left:var(--space-md)} brings it back to that same edge.
   On an RTL page that edge is the right one. The focus rule is restated because
   the source's is more specific than a plain .skip-link override. */
html[dir="rtl"] .skip-link{inset-inline-start:-9999px;inset-inline-end:auto}
html[dir="rtl"] .skip-link:focus{inset-inline-start:var(--space-md);inset-inline-end:auto}

/* ---------- layout.css: the navigation panels ----------
   .primary-nav__item--panel > .panel--mega, .primary-nav__item--panel > .panel--menu,
   .site-search > .panel{...top:calc(100% + 14px);left:0} hangs the popover off the
   trigger's inline-start edge and opens it towards the inline-end, where there is
   room. Mirrored, the panel hangs off the trigger's right edge and opens leftwards. */
html[dir="rtl"] .primary-nav__item--panel > .panel--mega,
html[dir="rtl"] .primary-nav__item--panel > .panel--menu{inset-inline-start:0;inset-inline-end:auto}

/* .site-search > .panel{right:0;left:auto} reverses that for the search popover
   alone: it is anchored to the trigger's inline-end edge, because the trigger sits
   at the end of the header row and the panel must open back across it. The trigger
   moves to the other end of the row with the direction, so the anchor swaps too. */
html[dir="rtl"] .site-search > .panel{inset-inline-start:auto;inset-inline-end:0}

/* ---------- layout.css: the mobile drawer ----------
   .nav-drawer__dialog{margin:0 0 0 auto} — margin-left:auto pins the dialog to the
   right edge, under the drawer button at the end of the header row. Both the
   button and the dialog sit at the other end now, so the pin is the logical
   inline-start one: margin-right:auto in RTL, margin-left:auto in LTR. */
html[dir="rtl"] .nav-drawer__dialog{margin-inline-start:auto;margin-inline-end:0}

/* .drawer-nav__summary::after{content:"⌄";float:right} — the group's caret marks
   the inline-end of the summary row, which is its left side here. Written as the
   physical float:left rather than float:inline-end, whose browser support is
   still uneven. */
html[dir="rtl"] .drawer-nav__summary::after{float:left}

/* .drawer-nav__list{padding:0 0 0 2px} — the list indents from the inline-start
   edge. */
html[dir="rtl"] .drawer-nav__list{padding-inline-start:2px;padding-inline-end:0}

/* ---------- layout.css: the breadcrumb separator ----------
   .breadcrumb__item + .breadcrumb__item::before{content:"/";margin-right:6px} puts
   the gap between the "/" and the item it introduces, on the side the item is on.
   margin-inline-end is that same 6px in LTR and the mirrored side in RTL, so the
   physical margin-right the source sets has to be cleared with it. */
html[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before{margin-inline-start:0;margin-inline-end:6px}

/* ---------- layout.css: the floating WhatsApp tab ----------
   .wa-float{position:fixed;top:50%;right:0;padding:14px 20px 14px 17px;
   border-radius:999px 0 0 999px} is a tab flush with the right screen edge,
   square against that edge and rounded on the side facing the page, with the
   icon's padding a little tighter than the label's. Mirrored it is flush with the
   left edge. The logical corners say it in one line: border-start-start-radius and
   border-end-start-radius are the inline-start corners, which are the left ones in
   LTR and the right ones in RTL, so the rounded side stays the page-facing one. */
html[dir="rtl"] .wa-float{
  inset-inline-start:auto;
  inset-inline-end:0;
  padding-block:14px;
  padding-inline:17px 20px;
  border-start-start-radius:999px;
  border-end-start-radius:999px;
  border-start-end-radius:0;
  border-end-end-radius:0;
}

/* .wa-float:hover{transform:translateY(-50%) translateX(-3px)} eases the tab 3px
   away from the edge it is fixed to. That edge is the left one here, so the move
   is +3px on screen. */
html[dir="rtl"] .wa-float:hover{transform:translateY(-50%) translateX(3px)}

/* ---------- layout.css: back to top ----------
   .to-top{position:fixed;right:calc(var(--layout-gutter) / 2)} — the button sits at
   the inline-end of the viewport, which is its left edge here; inset-inline-end is
   that same right in LTR and that left in RTL, so the physical right the source
   sets is cleared with it. */
html[dir="rtl"] .to-top{inset-inline-start:auto;inset-inline-end:calc(var(--layout-gutter) / 2)}

/* ---------- layout.css: the dashed card, and its three copies ----------
   .plan{...border:1px dashed var(--line);border-left:3px solid var(--clay)} — an
   accent bar on the card's inline-start edge. The same declaration is written for
   .product-empty (catalog.css), .category-products__pending (category.css) and
   .article__protected (resources.css), so all four are mirrored together here,
   in one rule rather than four: the bar moves to the inline-start edge of an RTL
   page (the right one), and the physical left border it replaces is put back to
   the card's own 1px dashed hairline. */
html[dir="rtl"] .plan,
html[dir="rtl"] .product-empty,
html[dir="rtl"] .category-products__pending,
html[dir="rtl"] .article__protected{border-inline-start:3px solid var(--clay);border-inline-end:1px dashed var(--line)}

/* ---------- layout.css and the card arrows: the ↗ glyph ----------
   The "↗" is written into the templates as text (header.php, every closing call
   to action, the card arrows of detail-pages.css, about.css, route-products.css
   and home.css). On a right-to-left page "onward" is leftwards, so the glyph is
   mirrored about its own vertical axis: ↗ reads as ↖. display:inline-block is
   added because transform does not apply to a non-replaced inline box, which is
   what the span is inside .topline__link. */
html[dir="rtl"] .arrow{display:inline-block;transform:scaleX(-1)}

/* .round-arrow (home.css) and .products-tile__arrow (route-products.css) carry the
   same glyph without the .arrow class and are grid boxes centring it, so only the
   mirror is set on them — their display and their place-items stay as they are. */
html[dir="rtl"] .round-arrow,
html[dir="rtl"] .products-tile__arrow{transform:scaleX(-1)}

/* The hover that eases the arrow towards the reading direction — .btn:hover .arrow
   and .text-link:hover .arrow{transform:translate(2px,-2px)} (layout.css), and the
   same transform for .link-card:hover .link-card__arrow, .about-next__card:hover
   .about-next__arrow, .category-card:hover .round-arrow and .products-tile:hover
   .products-tile__arrow. Those rules are more specific than the mirror above and
   would undo it on hover, so each is restated with the mirror kept: after
   scaleX(-1), a +2px,-2px move in the flipped frame is the page's own up-and-left.
   The backgrounds those two card rules also set are untouched. */
html[dir="rtl"] .btn:hover .arrow,
html[dir="rtl"] .button:hover .arrow,
html[dir="rtl"] .text-link:hover .arrow,
html[dir="rtl"] .link-card:hover .link-card__arrow,
html[dir="rtl"] .about-next__card:hover .about-next__arrow,
html[dir="rtl"] .category-card:hover .round-arrow,
html[dir="rtl"] .products-tile:hover .products-tile__arrow{transform:scaleX(-1) translate(2px,-2px)}

/* .primary-nav__chevron{width:6px;height:6px;border-right:1.6px solid currentColor;
   border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)}
   is checked and left alone: the border-right + border-bottom corner rotated 45deg
   is a direction-neutral downward chevron, and the -1px,-1px nudge is written in
   the rotated frame, where it resolves to a purely vertical 1.4px offset — there is
   no horizontal component to mirror. */

/* ---------- catalog.css ----------
   .product-facts__value{text-align:right} and .product-facts__pending{text-align:left}:
   the label/value row is a space-between flex row, so the value already sits at the
   inline-end of an RTL row and its text must be flush to that end — that is
   text-align:end, which is right in LTR and left in RTL. The pending line takes the
   whole row and is flush to the inline-start edge instead, which is text-align:start. */
html[dir="rtl"] .product-facts__value{text-align:end}
html[dir="rtl"] .product-facts__pending{text-align:start}

/* .product-prose ul,.product-prose ol{padding-left:20px} — the room WordPress's
   list markers need on the inline-start side of copy written in a product record. */
html[dir="rtl"] .product-prose ul,
html[dir="rtl"] .product-prose ol{padding-inline-start:20px;padding-inline-end:0}

/* .spec-table th,.spec-table td{text-align:left} — the specification table is an
   ordinary reading table and starts at the inline-start edge of its cells. */
html[dir="rtl"] .spec-table th,
html[dir="rtl"] .spec-table td{text-align:start}

/* .product-empty .text-link{margin-left:6px} — the gap between the empty-range
   sentence and the link that follows it. */
html[dir="rtl"] .product-empty .text-link{margin-inline-start:6px;margin-inline-end:0}

/* ---------- category.css ----------
   .category-products__pending{...border-left:3px solid var(--clay)} is the dashed
   card of layout.css .plan once more, and is mirrored with it in that section above
   rather than here, so the four editions of the card stay in one place. Nothing
   else in this sheet reads left or right. */

/* ---------- detail-pages.css ----------
   .subpage-hero__tag{position:absolute;left:-20px;bottom:-18px} hangs the apricot
   tag off the inline-start edge of the hero photograph, into the gap between the
   hero's two columns. Mirroring it keeps it hanging into that gap instead of off
   the outside edge of the container. */
html[dir="rtl"] .subpage-hero__tag{inset-inline-start:-20px;inset-inline-end:auto}

/* .step::before{left:0} — the clay dot on the hairline above each numbered step;
   .check-list__item{padding-left:20px} with its own ::before{left:0} — the marker
   list. Both mark the inline-start edge. */
html[dir="rtl"] .step::before{inset-inline-start:0;inset-inline-end:auto}
html[dir="rtl"] .check-list__item{padding-inline-start:20px;padding-inline-end:0}
html[dir="rtl"] .check-list__item::before{inset-inline-start:0;inset-inline-end:auto}

/* .link-card__arrow{position:absolute;right:22px;bottom:20px} — the onward card's
   arrow, in the inline-end corner of the card's foot. */
html[dir="rtl"] .link-card__arrow{inset-inline-end:22px;inset-inline-start:auto}

/* ---------- forms.css ----------
   .rfq-form__feedback{margin-top:...;padding:11px 14px;border-left:3px solid
   var(--clay)} — the line that carries a failed submission, with the same accent
   bar on its inline-start edge. This card has no general border round it, so the
   bar moves and the other three sides stay bare. */
html[dir="rtl"] .rfq-form__feedback{border-inline-start:3px solid var(--clay);border-inline-end:0}

/* .field__required{margin-left:2px} and .field__optional{margin-left:6px} — the gap
   between a field's label and the asterisk or the "optional" word that follows it
   in the markup. That span comes after the label text, so on an RTL page it lies to
   the left of it and the same gap belongs on its own right side: margin-inline-start
   is the left in LTR and that right (the side facing the label) in RTL, and the
   physical margin-left the source sets is cleared with margin-inline-end. */
html[dir="rtl"] .field__required{margin-inline-start:2px;margin-inline-end:0}
html[dir="rtl"] .field__optional{margin-inline-start:6px;margin-inline-end:0}

/* .next-steps{padding-left:20px} — the numbered list of what happens after a
   request is sent, which WordPress's markers sit in. */
html[dir="rtl"] .next-steps{padding-inline-start:20px;padding-inline-end:0}

/* ---------- home.css ----------
   The hero collage is three absolutely placed, slightly tilted cards —
   .home-hero__card--tote{top:0;left:0;transform:rotate(-6deg)},
   --bottle{top:9%;right:0;transform:rotate(5deg)},
   --apparel{bottom:0;left:14%;transform:rotate(-2deg)} — with
   .home-hero__tag{right:2%} pinned across them. The collage is decoration rather
   than a reading order, but it stands beside a column that has mirrored, so its
   positions mirror with it and the tilt mirrors with them: the same fan, leaning
   the other way, instead of a stack that appears to be falling sideways. */
html[dir="rtl"] .home-hero__card--tote{inset-inline-start:0;inset-inline-end:auto;transform:rotate(6deg)}
html[dir="rtl"] .home-hero__card--bottle{inset-inline-end:0;inset-inline-start:auto;transform:rotate(-5deg)}
html[dir="rtl"] .home-hero__card--apparel{inset-inline-start:14%;inset-inline-end:auto;transform:rotate(2deg)}
html[dir="rtl"] .home-hero__tag{inset-inline-end:2%;inset-inline-start:auto}

/* .home-editorial__tag{position:absolute;left:-20px;bottom:-18px} — the editorial
   band's note, hanging off the photograph's inline-start edge like the hero tags
   on the other pages. */
html[dir="rtl"] .home-editorial__tag{inset-inline-start:-20px;inset-inline-end:auto}

/* .home-step::before{left:0} — the homepage's own marker dot on the process
   hairline; .home-resource__arrow{right:22px;bottom:20px} — the resource card's
   arrow in the inline-end corner of its foot. */
html[dir="rtl"] .home-step::before{inset-inline-start:0;inset-inline-end:auto}
html[dir="rtl"] .home-resource__arrow{inset-inline-end:22px;inset-inline-start:auto}

/* ---------- about.css ----------
   .about-hero__tag{left:-20px;bottom:-18px} — the hero's note, on the inline-start
   edge of the photograph; .about-mile::before{left:0} and
   .about-list__item{padding-left:20px} with its ::before{left:0} — the timeline dot
   and the marker list; .about-next__arrow{right:22px} — the onward card's arrow in
   its inline-end corner. */
html[dir="rtl"] .about-hero__tag{inset-inline-start:-20px;inset-inline-end:auto}
html[dir="rtl"] .about-mile::before{inset-inline-start:0;inset-inline-end:auto}
html[dir="rtl"] .about-list__item{padding-inline-start:20px;padding-inline-end:0}
html[dir="rtl"] .about-list__item::before{inset-inline-start:0;inset-inline-end:auto}
html[dir="rtl"] .about-next__arrow{inset-inline-end:22px;inset-inline-start:auto}

/* ---------- legal.css ----------
   .legal-list__item{padding-left:20px} and its ::before{left:0} — the marker list of
   the three documents. .legal-layout and .legal-toc are a grid and a sticky column,
   both of which follow the direction on their own. */
html[dir="rtl"] .legal-list__item{padding-inline-start:20px;padding-inline-end:0}
html[dir="rtl"] .legal-list__item::before{inset-inline-start:0;inset-inline-end:auto}

/* ---------- resources.css ----------
   .topic-filter__link{padding:8px 0 8px 14px} reserves the marker column of the
   TOPIC rail on the inline-start side, and .topic-filter__link::before{left:0} puts
   the current topic's dot in it. The ::before's own
   transform:translateY(-50%) scale(0) is vertical and symmetric, so it stays. */
html[dir="rtl"] .topic-filter__link{padding-inline-start:14px;padding-inline-end:0}
html[dir="rtl"] .topic-filter__link::before{inset-inline-start:0;inset-inline-end:auto}

/* .resource-card__topic + .resource-card__date::before{content:"·";margin-right:8px}
   — the middot between a card's topic and its date, on the same footing as the
   breadcrumb separator in layout.css. */
html[dir="rtl"] .resource-card__topic + .resource-card__date::before{margin-inline-start:0;margin-inline-end:8px}

/* .article__prose ul,.article__prose ol{padding-left:22px} — the article body's list
   room; .article__prose th,.article__prose td{text-align:left} — the tables an
   editor writes into the body. */
html[dir="rtl"] .article__prose ul,
html[dir="rtl"] .article__prose ol{padding-inline-start:22px;padding-inline-end:0}
html[dir="rtl"] .article__prose th,
html[dir="rtl"] .article__prose td{text-align:start}

/* .article__prose blockquote{padding:var(--space-sm) 0 var(--space-sm)
   var(--space-md);border-left:3px solid var(--apricot)} — the pull quote's apricot
   bar and its indent, both on the inline-start edge; the block padding above and
   below it is untouched. */
html[dir="rtl"] .article__prose blockquote{border-inline-start:3px solid var(--apricot);border-inline-end:0;padding-inline-start:var(--space-md);padding-inline-end:0}

/* ---------- route-products.css ----------
   .catalogue-count{margin:0 0 0 auto;text-align:right} — the "showing x of y" block
   is pushed to the inline-end of the toolbar (margin-left:auto is margin-inline-start
   here, so mirrored it is margin-right:auto) and its two lines read flush to that
   end, which text-align:end tracks in either direction. */
html[dir="rtl"] .catalogue-count{margin-inline-start:auto;margin-inline-end:0;text-align:end}

/* ---------- Narrow screens ----------
   The theme's three breakpoints are 1100px, 900px and 560px. Nothing in the
   source's 1100px blocks reads left or right, and the 900px and 560px blocks
   restate a physical side in only a handful of places. Each of those has to be
   restated here as well, because every rule above is at least as specific as the
   plain class it answers and would otherwise override the source's narrow-screen
   value at every width. */
@media (max-width:900px){
  /* .subpage-hero__tag{left:0}, .home-editorial__tag{left:0} and
     .about-hero__tag{left:0}: on a narrow screen the tag stops hanging off the
     photograph and sits inside its edge, on the same inline-start side. */
  html[dir="rtl"] .subpage-hero__tag,
  html[dir="rtl"] .home-editorial__tag,
  html[dir="rtl"] .about-hero__tag{inset-inline-start:0}

  /* .catalogue-count{margin-left:0;text-align:left}: the toolbar wraps at this
     width and the count goes back to the inline-start edge. */
  html[dir="rtl"] .catalogue-count{margin-inline-start:0;text-align:start}
}

@media (max-width:560px){
  /* .wa-float{padding:13px 16px} — symmetric, because the label is hidden at this
     width and only the icon is left. It is restated because the mirrored .wa-float
     rule above is more specific than the source's. */
  html[dir="rtl"] .wa-float{padding:13px 16px}

  /* .to-top{right:16px;bottom:16px}: the button comes in off the gutter, on the
     inline-end edge — the left one here. */
  html[dir="rtl"] .to-top{inset-inline-start:auto;inset-inline-end:16px}

  /* .product-facts__value{text-align:left}: the row stacks at this width and the
     value starts at the inline-start edge under its label, so the flush end of the
     wide-screen rule above is replaced by text-align:start. */
  html[dir="rtl"] .product-facts__value{text-align:start}
}

/* ---------- What a stylesheet cannot reach ----------
   The mobile drawer is the one direction decision made in markup rather than in
   CSS: header.php renders <div class="nav-drawer" data-behavior="drawer"
   data-side="right">, and assets/wp-behaviors/behaviors.js reads that side to
   animate the dialog in from +24px (translateX(24px)). The dialog's resting place
   is mirrored here — .nav-drawer__dialog sits at the left edge on an RTL page,
   under the drawer button, which has moved to the same edge — but the entrance
   still comes in from the right, because the side the runtime animates from is
   data-side, not a stylesheet value. The runtime animates through the Web
   Animations API, so no rule here can retarget it. Fixing it means
   data-side="left" for the RTL page in header.php (a markup change), after which
   this sheet needs no change. */