/* --- icon-box labels (mobile bottom bar, USP rows) --- */
	  html[lang="ar"] .elementor-icon-box-title,
	  html[lang="ar"] .elementor-icon-box-title a,
	  html[lang="ar"] .elementor-icon-list-text {
	    white-space: normal;
	    word-break: keep-all;
	    overflow-wrap: normal;
	    hyphens: none;
	    line-height: 1.45;
	  }
	  /* the bar sizes each cell to English width; let Arabic have the room */
	  html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-wrapper {
	    min-width: 0;
	  }
	  html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-content {
	    min-width: 0;
	    max-width: none;
	  }
	  @media (max-width: 767px) {
	    html[lang="ar"] .elementor-icon-box-title,
	    html[lang="ar"] .elementor-icon-box-title a {
	      font-size: 11px;
	      letter-spacing: 0;
	    }
	  }

	  /* --- countdown --- */
	  /* Digits are numerals: keep them LTR inside an otherwise RTL page, or the
	     bidi algorithm reorders the HH:MM:SS groups. Labels stay RTL. */
	  html[lang="ar"] .elementor-countdown-wrapper,
	  html[lang="ar"] .elementor-countdown-item,
	  html[lang="ar"] .ym-countdown,
	  html[lang="ar"] [class*="countdown"] {
	    direction: ltr;
	  }
	  html[lang="ar"] .elementor-countdown-label,
	  html[lang="ar"] [class*="countdown"] [class*="label"] {
	    direction: rtl;
	    white-space: nowrap;
	    font-size: 11px;
	    letter-spacing: 0;
	  }
	  html[lang="ar"] .elementor-countdown-digits {
	    font-variant-numeric: tabular-nums;
	  }

	  /* --- marquee / announcement strip --- */
	  /* The ticker is translated but still animates left; in RTL it should run
	     the other way so text enters from the correct edge. */
	  html[lang="ar"] .elementor-widget-text-path,
	  html[lang="ar"] [class*="marquee"] {
	    direction: rtl;
	  }

	  /* --- footer --- */
	  /* The footer template hard-codes physical alignment (gf-elm-left,
	     mobile-align-left) chosen for an LTR layout, so it stays left-aligned
	     under RTL. Mirror those to the logical start/end edge for Arabic. */
	  html[lang="ar"] .elementor-location-footer,
	  html[lang="ar"] footer.elementor-location-footer {
	    direction: rtl;
	    text-align: right;
	  }
	  html[lang="ar"] .elementor-location-footer .gf-elm-left,
	  html[lang="ar"] .elementor-location-footer .gf-elm-left-sm,
	  html[lang="ar"] .elementor-location-footer .gf-elm-left-md,
	  html[lang="ar"] .elementor-location-footer [class*="-align-left"],
	  html[lang="ar"] .elementor-location-footer .elementor-widget-text-editor,
	  html[lang="ar"] .elementor-location-footer .elementor-widget-heading {
	    text-align: right !important;
	  }
	  html[lang="ar"] .elementor-location-footer .gf-elm-right,
	  html[lang="ar"] .elementor-location-footer .gf-elm-right-md,
	  html[lang="ar"] .elementor-location-footer [class*="-align-right"] {
	    text-align: left !important;
	  }
	  /* icon/link lists inside the footer.
	     The container is already RTL, so flex-direction:row puts the first item
	     on the right by itself — row-reverse (which I had here) flipped it back
	     to the left. Just pin the row to the start edge and align the text. */
	  html[lang="ar"] .elementor-location-footer .elementor-icon-list-item,
	  html[lang="ar"] .elementor-location-footer .elementor-icon-list-item a {
	    flex-direction: row;
	    justify-content: flex-start;
	    text-align: right;
	  }
	  html[lang="ar"] .elementor-location-footer .elementor-icon-list-items {
	    align-items: flex-start;
	  }
	  html[lang="ar"] .elementor-location-footer .elementor-icon-list-text {
	    text-align: right;
	  }
	  html[lang="ar"] .elementor-location-footer .elementor-icon-list-icon {
	    margin-inline-start: 0;
	    margin-inline-end: 8px;
	  }
	  /* centred rows stay centred */
	  html[lang="ar"] .elementor-location-footer [class*="-align-center"] {
	    text-align: center !important;
	  }
	  /* --- copyright line under the payment icons --- */
	  /* ym-copyright-center: it inherits the footer's right alignment and ends
	     up hugging one edge under a centred row of card logos. */
	  /* Only the copyright block centres. The earlier rule matched every
	     .elementor-widget-text-editor p in the footer, which centred the About Us
	     body copy on mobile while its heading stayed right-aligned. */
	  html[lang="ar"] .elementor-location-footer .elementor-element-72bd1cb4,
	  html[lang="ar"] .elementor-location-footer .elementor-element-72bd1cb4 * {
	    text-align: center !important;
	  }
	  /* Everything else in the footer reads from the right, including body copy
	     and any widget Elementor left on justify. */
	  html[lang="ar"] .elementor-location-footer .elementor-widget-text-editor,
	  html[lang="ar"] .elementor-location-footer .elementor-widget-text-editor p,
	  html[lang="ar"] .elementor-location-footer .elementor-widget-icon-list,
	  html[lang="ar"] .elementor-location-footer .elementor-icon-list-text {
	    text-align: right !important;
	  }
	  /* ym-footer-heading-align: one widget was left on text-align:justify, which
	     indented it ~68px from the right while its neighbours sat at 20-30. */
	  html[lang="ar"] .elementor-location-footer .elementor-widget-heading,
	  html[lang="ar"] .elementor-location-footer .elementor-heading-title,
	  html[lang="ar"] .elementor-location-footer .elementor-widget-container {
	    text-align: right;
	  }
	  html[lang="ar"] .elementor-location-footer [style*="justify"],
	  html[lang="ar"] .elementor-location-footer .elementor-widget-heading .elementor-heading-title {
	    text-align: right !important;
	  }
	  /* the marquee keeps its own centring — it scrolls, it is not a column */
	  html[lang="ar"] .elementor-location-footer .marquee .elementor-heading-title,
	  html[lang="ar"] .marquee .elementor-heading-title {
	    text-align: center !important;
	  }

	  /* --- footer columns: align their tops --- */
	  /* ym-footer-valign: columns hold different numbers of links, so without
	     this the shorter ones centre themselves and the headings never line up. */
	  html[lang="ar"] .elementor-location-footer .e-con-inner,
	  html[lang="ar"] .elementor-location-footer .elementor-container,
	  html[lang="ar"] .elementor-location-footer > .e-con > .e-con-inner {
	    align-items: flex-start !important;
	  }
	  html[lang="ar"] .elementor-location-footer .e-con.e-child,
	  html[lang="ar"] .elementor-location-footer .elementor-column {
	    align-self: flex-start !important;
	    justify-content: flex-start !important;
	  }

	  /* --- footer bottom row: centre it --- */
	  /* ym-footer-center: payment icons sat hard left with the copyright hard
	     right, which reads as two stray fragments once the row is mirrored. */
	  html[lang="ar"] .elementor-location-footer .elementor-widget-image,
	  html[lang="ar"] .elementor-location-footer .elementor-widget-image-gallery,
	  html[lang="ar"] .elementor-location-footer .elementor-widget-text-editor:last-child {
	    text-align: center !important;
	  }
	  html[lang="ar"] .elementor-location-footer .elementor-image-gallery,
	  html[lang="ar"] .elementor-location-footer .gallery {
	    justify-content: center !important;
	    text-align: center !important;
	  }

	  /* ym-footer-final-align
	     'تابعنا' is an icon-box title, not a heading widget, so the heading rules
	     never reached it and it stayed on text-align:justify.
	     The copyright needed 4 classes to out-specify the heading rule that was
	     otherwise pulling it back to the right. */
	  html[lang="ar"] .elementor-location-footer .elementor-icon-box-wrapper,
	  html[lang="ar"] .elementor-location-footer .elementor-icon-box-content,
	  html[lang="ar"] .elementor-location-footer .elementor-icon-box-title,
	  html[lang="ar"] .elementor-location-footer .elementor-icon-box-title span,
	  html[lang="ar"] .elementor-location-footer .elementor-icon-box-description {
	    text-align: right !important;
	  }
	  html[lang="ar"] .elementor-location-footer .elementor-element-72bd1cb4 .elementor-heading-title,
	  html[lang="ar"] .elementor-location-footer .elementor-element-72bd1cb4 .elementor-widget-container,
	  html[lang="ar"] .elementor-location-footer .elementor-element-72bd1cb4 p {
	    text-align: center !important;
	  }

	  /* ym-rtl-round3 */
	  /* The countdown rule below set direction:ltr on the whole widget so the
	     HH:MM:SS groups keep their order — but it cascaded to the headline too,
	     pushing its emoji to the left. Digits stay LTR, prose goes back to RTL. */
	  html[lang="ar"] .countdown-header,
	  html[lang="ar"] .countdown-header .container,
	  html[lang="ar"] .header-content,
	  html[lang="ar"] .title-container,
	  html[lang="ar"] .title-main,
	  html[lang="ar"] .title-sub {
	    direction: rtl !important;
	  }
	  html[lang="ar"] .countdown-header .countdown,
	  html[lang="ar"] .countdown-header [class*="timer"],
	  html[lang="ar"] .countdown-header [class*="digit"] {
	    direction: ltr !important;
	  }
	  /* Shop filter drawer renders LTR, so its rows read from the wrong edge. */
	  html[lang="ar"] .facets-drawer,
	  html[lang="ar"] .facets-drawer *,
	  html[lang="ar"] .facets__group,
	  html[lang="ar"] .facets__summary,
	  html[lang="ar"] .facets__content,
	  html[lang="ar"] .facets__option,
	  html[lang="ar"] .collection__filters-toggle {
	    direction: rtl !important;
	    text-align: right !important;
	  }
	  html[lang="ar"] .facets__option,
	  html[lang="ar"] .facets__summary {
	    justify-content: flex-start !important;
	  }

	  /* ym-rtl-round4 */
	  /* Reward bar: the steps run £0 -> gift -> discount. In RTL the first step
	     belongs on the right, so the row itself flips; the money figures inside
	     stay LTR so the digits and currency symbol keep their order. */
	  html[lang="ar"] .fk_progress_steps {
	    direction: rtl !important;
	  }
	  html[lang="ar"] .fk_progress_price {
	    direction: ltr !important;
	    unicode-bidi: isolate;
	  }
	  html[lang="ar"] .fk_progress_title {
	    direction: rtl !important;
	    text-align: center !important;
	  }
	  /* Floating icon nav bar (template 30190): the container spans the width but
	     its items were left on justify-content:normal, so they bunched to one
	     edge instead of sitting centred. */
	  html[lang="ar"] .elementor-element-ymiconbar2,
	  html[lang="ar"] .elementor-30190 .elementor-element-ymiconbar2 {
	    justify-content: center !important;
	    direction: rtl !important;
	  }
	  html[lang="ar"] .elementor-element-ymiconbar2 > * {
	    flex: 0 0 auto;
	  }
	  /* ym-rtl-round5
	     The rule above only reaches ymiconbar2, the shortcode wrapper. The bar
	     itself is the fixed-position container 48309cd8 inside it, and the
	     template stylesheet sets "direction:ltr" straight on that element - an
	     inherited rtl from an ancestor can never win against that. So the icons
	     kept reading left-to-right on an otherwise RTL page: Shop Gifts sat on
	     the far left where Arabic expects it on the right.
	     flex-direction stays row (forced by yourmoment-iconbar-ltr.php); under
	     direction:rtl that already lays the items out right-to-left, so the order
	     comes out correct without touching flex-direction. */
	  html[lang="ar"] .elementor-30190 .elementor-element.elementor-element-48309cd8 {
	    direction: rtl !important;
	  }
	  /* ym-rtl-round10: centre each label under its icon.
	     post-30190.css centres the oversized label box (width:125% of the 60px
	     cell) with physical LTR math: position:relative; left:50%;
	     translate(-50%,y). Under direction:rtl the static position starts from
	     the cell's RIGHT edge and the browser resolves the `right` inset instead
	     of `left`, so every label lands 15px left of its icon. Mirror the same
	     trick for RTL - right:50% pulls the box half a cell left, translateX(50%)
	     pushes it back by half its own width - keeping each state's vertical
	     offset (8px hidden / 0 shown / -3px active on v3 / -20px active on v2). */
	  html[lang="ar"] .elementor-30190 .elementor-element.elementor-element-48309cd8 .elementor-icon-box-content {
	    left: auto;
	    right: 50%;
	    transform: translate(50%, 8px);
	  }
	  html[lang="ar"] .elementor-30190 .elementor-element.elementor-element-48309cd8 .elementor-widget-icon-box.active .elementor-icon-box-content {
	    transform: translate(50%, 0px);
	  }
	  html[lang="ar"] .elementor-30190 .elementor-element.elementor-element-48309cd8.v2 .elementor-widget-icon-box.active .elementor-icon-box-content {
	    transform: translate(50%, -20px);
	  }
	  html[lang="ar"] .elementor-30190 .elementor-element.elementor-element-48309cd8.v3 .elementor-icon-box-content {
	    transform: translate(50%, 0px);
	  }
	  html[lang="ar"] .elementor-30190 .elementor-element.elementor-element-48309cd8.v3 .elementor-widget-icon-box.active .elementor-icon-box-content {
	    transform: translate(50%, -3px);
	  }

	  /* ym-rtl-round5: mobile header cart label.
	     The icon sits in a 24px column with its label underneath. "Cart" fits on
	     one line there; "سلة المشتريات" is three times as long and wraps to two
	     cramped lines beside the count badge (24x28 at 390px, squeezed to 3px
	     wide at 768). The icon and its badge already say "cart", so on Arabic the
	     label is dropped and the icon stands alone.
	     Widget 4eaf894 is the mobile/tablet header only - it lives inside an
	     .elementor-hidden-desktop container. The desktop header uses a separate
	     widget (5218cf6) whose label stays on one line and is left alone. */
	  html[lang="ar"] .elementor-element-4eaf894 {
	    display: none !important;
	  }
	  /* ym-rtl-round6: the follow-us line mixes Arabic with two Latin handles and
	     the source has no spaces around them:
	       تابعنا على<strong>@Yourmomentonline</strong>, tag <strong>#YourMoment</strong>عند...
	     Without isolation the bidi algorithm reorders those runs against the
	     Arabic and the sentence reads scrambled; without the margins the handles
	     collide with the words on either side. */
	  html[lang="ar"] .elementor-element-a0d31af strong,
	  html[lang="ar"] .elementor-element-a0d31af a {
	    unicode-bidi: isolate;
	    margin-inline: .2em;
	  }
	  html[lang="ar"] .elementor-element-a0d31af p {
	    text-align: center;
	    line-height: 1.9;
	  }

	  /* ym-rtl-round7: loyalty club panel + its popup.
	     The block is raw HTML in Elementor template 27262 with physical inline
	     styles - text-align:left on the mobile card and margin-right on the icon.
	     Inline styles outrank plain rules, so these have to be !important. */
	  html[lang="ar"] .club-member-info,
	  html[lang="ar"] #popupOverlay,
	  html[lang="ar"] #popupContent {
	    direction: rtl !important;
	  }
	  html[lang="ar"] .club-member-info.mobile-view,
	  html[lang="ar"] #popupContent p,
	  html[lang="ar"] #popupContent li {
	    text-align: right !important;
	  }
	  /* the title row is a centred flex; only its icon needs mirroring */
	  html[lang="ar"] #popupContent span[style*="margin-right"] {
	    margin-right: 0 !important;
	    margin-inline-start: 0 !important;
	    margin-inline-end: 10px !important;
	  }

	  /* ym-rtl-round9: the shop/collection grid.
	     gift-finder.css pins .gifts-collection to direction:ltr - fine when this
	     store was English-only, but every card title inherits it, so all ~395
	     Arabic product names on /shop/ read left-to-right on an RTL page. The
	     facets drawer already had its own rule further up; this is the grid. */
	  html[lang="ar"] .gifts-collection {
	    direction: rtl !important;
	  }

	  /* ym-rtl-round8: hardcoded physical alignment.
	     Elementor content and several snippets carry inline text-align:left,
	     written when this store was LTR-only. On an RTL page a physical `left`
	     is wrong by definition, and an inline style outranks any normal rule -
	     hence !important. Both spellings occur in the content. Scoped to the
	     Arabic render, so the English store is untouched.
	     Covers: the delivery/production lines and the skip-upload paragraph in
	     the description, the loyalty points block, and the club popup title. */
	  html[lang="ar"] [style*="text-align: left"],
	  html[lang="ar"] [style*="text-align:left"] {
	    text-align: right !important;
	  }

	  /* an email address or handle is a Latin run inside Arabic prose; without
	     isolation the bidi algorithm pulls surrounding punctuation into it */
	  html[lang="ar"] a[href^="mailto"],
	  html[lang="ar"] .__cf_email__,
	  html[lang="ar"] a[href*="cdn-cgi/l/email-protection"] {
	    unicode-bidi: isolate;
	  }

	  /* ym-rtl-round11: PDP quantity stepper.
	     The pill's corner rounding and hairline dividers are physical LTR
	     values — minus is rounded on its left, plus on its right, and the
	     divider pseudo-elements sit at right:-1px / left:-1px. Under RTL the
	     flex row mirrors (minus lands beside the label on the right, plus at
	     the far left), so each chip ends up rounded toward the number and
	     square on its outer edge. Mirror the corners and dividers to match. */
	  html[lang="ar"] form.cart .quantity button.minus {
	    border-radius: 0 7px 7px 0 !important;
	  }
	  html[lang="ar"] form.cart .quantity button.plus {
	    border-radius: 7px 0 0 7px !important;
	  }
	  html[lang="ar"] form.cart .quantity button.minus::after {
	    right: auto;
	    left: -1px;
	  }
	  html[lang="ar"] form.cart .quantity button.plus::before {
	    left: auto;
	    right: -1px;
	  }

	  /* the slide-cart trust badge is a CSS background image with English text
	     baked in (fkcart custom_css, English-Version.png) — serve the Arabic
	     export instead */
	  html[lang="ar"] .fkcart-slider-body::after {
	    background-image: url(/wp-content/uploads/2026/08/trust-cart-ar.png) !important;
	  }

	  /* --- stop the page scrolling sideways --- */
	  html[lang="ar"] body { overflow-x: hidden; }