/* ==========================================================================
   Kiswa — rtl.css
   RTL overrides ONLY. Loaded when the storefront locale is Arabic.
   Rules:
   - No base styles here.
   - No font-family rules here — Arabic families are decided in theme.liquid
     from the merchant's settings, so nothing in this file can override them.
   - theme.css uses logical properties wherever possible; this file handles
     the residual physical values (drawer sides, directional icons, transforms).
   ========================================================================== */

/* ── Text & direction ── */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] .container,
[dir="rtl"] .page-width { direction: rtl; }

/* ── Inputs ── */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="search"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] textarea { text-align: right; }
[dir="rtl"] input[type="number"] { text-align: right; direction: ltr; }
[dir="rtl"] select,
[dir="rtl"] .select { background-position: left 0.9rem center; }

/* ── Headings: never spaced or uppercased in Arabic (variables already do this;
      the two lines below are the safety net the guide requires) ── */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .h0, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .h4, [dir="rtl"] .h5, [dir="rtl"] .h6,
[dir="rtl"] .overline, [dir="rtl"] .eyebrow, [dir="rtl"] .btn, [dir="rtl"] .badge {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Directional icons ── */
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .icon-chevron-right,
[dir="rtl"] .icon-chevron-left,
[dir="rtl"] .icon-return,
[dir="rtl"] .breadcrumb .separator,
[dir="rtl"] .btn-back { transform: scaleX(-1); }
[dir="rtl"] .link--arrow:hover .icon { transform: scaleX(-1) translateX(4px); }

/* ── Toast (centred with translate) ── */
[dir="rtl"] .toast { transform: translate(50%, 20px); }
[dir="rtl"] .toast.is-visible { transform: translate(50%, 0); }

/* ── Swatch unavailable stroke ── */
[dir="rtl"] .swatch.is-unavailable::before { transform: translate(50%, -50%) rotate(45deg); left: auto; right: 50%; }

/* ── Numerals and prices stay LTR inside RTL text ── */
[dir="rtl"] .price,
[dir="rtl"] .numeric { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .price { justify-content: flex-end; }

/* ── Header / nav ── */
[dir="rtl"] .header__dropdown-menu { left: auto; right: 0; }
[dir="rtl"] .nav-link::after { transform-origin: right; }
[dir="rtl"] .site-header--hide-on-scroll.is-hidden { transform: translateY(-100%); }

/* ── Mobile nav: slides from the RIGHT in RTL ── */
[dir="rtl"] .mobile-nav { transform: translateX(100%); }
[dir="rtl"] .mobile-nav.open { transform: none; }
[dir="rtl"] .mobile-nav__panel { transform: translateX(-100%); }
[dir="rtl"] .mobile-nav__panel.is-open { transform: none; }
[dir="rtl"] .mobile-nav__sublist { padding-left: var(--space-5); padding-right: var(--space-7); }

/* ── Cart drawer: slides from the LEFT in RTL ── */
[dir="rtl"] .cart-drawer { left: 0; right: auto; transform: translateX(-100%); }
[dir="rtl"] .cart-drawer.open { transform: translateX(0); }
[dir="rtl"] .cart-drawer__header { padding-left: var(--space-4); padding-right: var(--space-5); }

/* ── Product page ── */
[dir="rtl"] .product-gallery__arrow--prev { left: auto; right: var(--space-3); }
[dir="rtl"] .product-gallery__arrow--next { right: auto; left: var(--space-3); }
[dir="rtl"] .variant-pill.is-unavailable::after { transform: translate(50%, -50%) rotate(12deg); left: auto; right: 50%; }

/* ── Facets drawer: slides from the RIGHT in RTL ── */
[dir="rtl"] .facets__panel { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] .facets__panel.open { transform: translateX(0); }
[dir="rtl"] .facets__panel-header { padding-left: var(--space-4); padding-right: var(--space-5); }
[dir="rtl"] .select--inline { background-position: left 0.6rem center; }
[dir="rtl"] .facets__price-input input { direction: ltr; text-align: right; }
[dir="rtl"] .cart-page__items-head { letter-spacing: 0; text-transform: none; }
@media (min-width: 990px) {
  /* The drawer rule above also sets transform: translateX(100%); the sticky sidebar
     (theme.css .facets--sidebar .facets__panel, same specificity but earlier in the
     cascade) must win here or the panel sits a full panel-width off-screen. */
  [dir="rtl"] .facets--sidebar .facets__panel { right: auto; transform: none; }
  [dir="rtl"] .facets--sidebar .facets__panel-header { padding: 0 0 var(--space-3); }
}

/* ── Marquee: travels the other way in RTL ──
   This is the ONLY rule that reacts to the locale, and it deliberately does not touch
   `animation-direction` — that belongs to the merchant's Direction setting, in theme.css. An RTL
   flex track stacks its repeat copies to the LEFT of the first, so the safe travel range is
   [0, +distance]: a negative translate walks the content off the left edge with nothing behind it
   and the loop opens on a gap. Flipping `animation-direction` instead (what this used to do) only
   changes which end of the wrong range it starts from, so the gap survives. */
[dir="rtl"] .marquee { --marquee-sign: 1; }
[dir="rtl"] .hero__placeholder { transform: scaleX(-1); }
/* Stamp badge: logical inset already mirrors; the centring translate must flip sign */
[dir="rtl"] .hero-wrap--stamp-center .hero__stamp { transform: translate(50%, var(--stamp-offset, 50%)); }
/* Arabic ring text is never letter-spaced or uppercased */
[dir="rtl"] .hero__stamp-text { letter-spacing: 0; text-transform: none; font-size: 16px; word-spacing: 0.6em; direction: rtl; }
[dir="rtl"] .before-after__range { direction: rtl; }

/* ── Homepage / fashion sections ── */
[dir="rtl"] .testimonial__quote > p:first-child::before { content: "\201D"; }
[dir="rtl"] .testimonial__quote > p:last-child::after { content: "\201C"; }
[dir="rtl"] .before-after__layer--before { clip-path: inset(0 0 0 calc(100% - var(--ba-pos, 50%))); }
[dir="rtl"] .before-after__handle { transform: translateX(50%); }
[dir="rtl"] .hotspot { left: auto; right: var(--x); transform: translate(50%, -50%); }
[dir="rtl"] .hotspot__popover--start { left: auto; right: 0; }
[dir="rtl"] .hotspot__popover--end { right: auto; left: 0; }
[dir="rtl"] .collection-tile__link:hover .collection-tile__title .icon { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .collection-tile__title .icon { transform: scaleX(-1); }

/* ============================================================================
   Round 5 — featured-collection mobile fixes — RTL companion
   Agent: featured-collection-mobile
   Intentionally empty: every rule in the theme.css additions uses logical
   properties, so the tab row, active-pill scroll script, and sold-out badge
   mirror correctly in RTL with no overrides.
   ============================================================================ */