/*----------------------------------------------------------------------------
  CARRYON — RTL overrides (loaded only when dir="rtl")
  ---------------------------------------------------------------------------
  The inherited stylesheet already uses ~900 logical properties
  (inset-inline-*, margin-inline-*, padding-inline-*) which flip on their own,
  as do Bootstrap's .text-start/.text-end and .ms-*/.me-* utilities.

  What is left here is the genuinely physical stuff: left/right offsets,
  translateX transforms, one-sided borders, and a handful of components whose
  direction is baked into markup order.
----------------------------------------------------------------------------*/

/* --------------------------------------------------------------- 1. basics */
body { text-align: right; }

/* Bootstrap's directional utilities are PHYSICAL in the LTR build and every
   one of them carries !important — so a plain override silently loses. These
   restate the whole family, per breakpoint, with matching specificity.
   This is what puts .text-lg-start (gallery title, section headings) on the
   right and .text-lg-end (gallery follower, section links) on the left. */
.text-start { text-align: right !important; }
.text-end   { text-align: left  !important; }
.float-start { float: right !important; }
.float-end   { float: left  !important; }

@media (min-width: 576px) {
  .text-sm-start { text-align: right !important; }
  .text-sm-end   { text-align: left  !important; }
  .float-sm-start { float: right !important; }
  .float-sm-end   { float: left  !important; }
}

@media (min-width: 768px) {
  .text-md-start { text-align: right !important; }
  .text-md-end   { text-align: left  !important; }
  .float-md-start { float: right !important; }
  .float-md-end   { float: left  !important; }
}

@media (min-width: 992px) {
  .text-lg-start { text-align: right !important; }
  .text-lg-end   { text-align: left  !important; }
  .float-lg-start { float: right !important; }
  .float-lg-end   { float: left  !important; }
}

@media (min-width: 1200px) {
  .text-xl-start { text-align: right !important; }
  .text-xl-end   { text-align: left  !important; }
  .float-xl-start { float: right !important; }
  .float-xl-end   { float: left  !important; }
}

@media (min-width: 1400px) {
  .text-xxl-start { text-align: right !important; }
  .text-xxl-end   { text-align: left  !important; }
  .float-xxl-start { float: right !important; }
  .float-xxl-end   { float: left  !important; }
}

/* latin runs inside Arabic copy (prices, sizes, card numbers, the wordmark) */
.brand-wordmark,
.cart-line-price, .cart-line-total,
.product-new-price, .product-old-price,
.pdp-price, .order-row span:last-child,
.cartmini-total-value,
input[type="email"], input[type="tel"], input[inputmode="numeric"],
.field input[name="cardNumber"], .field input[name="cardExpiry"], .field input[name="cardCvc"] {
  direction: ltr;
  unicode-bidi: isolate;
}
.order-row span:last-child,
.cart-line-total { text-align: left; }
.field input[name="cardNumber"],
.field input[name="cardExpiry"],
.field input[name="cardCvc"],
.field input[type="email"] { text-align: right; }

/* --------------------------------------------------------------- 2. header */
.header-right-options { text-align: left !important; }
.header-discount-close button { right: auto; left: 10px; }
@media (min-width: 768px) { .header-discount-close button { right: auto; left: 24px; } }

.header-style-3 .header-right-options > ul > li .count-box { right: auto; left: -4px; }
@media (min-width: 992px) {
  .header-style-3 .header-right-options > ul > li .count-box { right: auto; left: -6px; }
}

/* the promo/product carousels are LTR-driven by Swiper; keep their internals
   in logical order but let the text inside read right-to-left */
.swiper { direction: rtl; }
.header-discount-item, .swiper-slide { text-align: center; }
.product-item, .sale-item { text-align: right; }

/* nav arrows swap meaning */
.header-3-arrow .header-prev svg,
.header-3-arrow .header-next svg,
.product-inner-arrow svg,
.checkout-back svg,
.product-view-details-btn svg,
.btn-white.btn-h-54 span svg,
.hero-actions .btn-link svg { transform: scaleX(-1); }

/* ----------------------------------------------------------------- 3. hero */
.hero-scroll { inset-inline-start: 60px; }
.hero-facts, .hero-actions { text-align: right; }

/* ------------------------------------------------------------- 4. products */
.product-badge { inset-inline-start: 14px; }
.product-color-square ul { justify-content: flex-start; }
.tip-item { direction: rtl; }

/* the action rail is inset-inline-end in the base sheet, so it already flips */

/* --------------------------------------------------------------- 5. drawers */
/* `transform` is NOT direction-aware: the base sheet parks these off-canvas
   with translateX(±100%), and once inset-inline-* flips the sign is wrong and
   the panel slides into view instead of away from it. Mirror each transform. */

/* cart: anchored inset-inline-end (= left in RTL), so park it further left */
.cartmini-area { transform: translateX(calc(-100% - 80px)); }
.cartmini-area.opened { transform: translateX(0); }

/* offcanvas menu: base uses a physical left:0, so re-anchor it to the right */
.offcanvas-wrap {
  left: auto;
  right: 0;
  transform: translateX(calc(100% + 80px));
}
.offcanvas-wrap.opened { transform: translateX(0); }

/* wishlist is a centred modal — pin it with a physical 50% so the centring
   maths stays direction-neutral */
.wishlist-popup {
  inset-inline-start: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

/* compare bar slides up from the bottom; vertical, so nothing to mirror */

/* ------------------------------------------------------------- 6. commerce */
.breadcrumb-nav { direction: rtl; }
.shop-filters { direction: rtl; }

.cart-line { direction: rtl; }
.cart-table-head span:nth-child(n+2) { text-align: center; }

.pdp-details summary::after { float: left; }
.pdp-reassure li { padding-inline-start: 22px; }
.pdp-reassure li::before { inset-inline-start: 0; }

.demo-notice { border-inline-start: 3px solid var(--primary); border-inline-end: 0; }

.checkout-steps li { flex-direction: row; }
.field-error, .field-note { text-align: right; }

.confirm-address { text-align: right; }

/* toast is centred, but its shadow direction reads better mirrored */
.cy-toast { direction: rtl; }

/* ----------------------------------------------------------------- 7. misc */
.progress-wrap { right: auto; left: 30px; }
.bottom-menu-item .count-box { inset-inline-end: -10px; }

.footer-widget-social a i svg,
.newsletter-social a svg { transform: none; }

.copyright-sep { margin: 0 6px; }

/* --------------------------------------------------- 8. Arabic typography */
/* Cormorant Garamond and Jost have no Arabic coverage. The Arabic system
   mirrors the Latin one's logic:
     display -> Amiri    (editorial naskh, answers Cormorant's serif)
     sans    -> Tajawal  (geometric grotesque, answers Jost)
   Loaded from Google Fonts in partials/head.php, only when the locale is ar. */
body.lang-ar {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
}
body.lang-ar .ff-onest,
body.lang-ar p, body.lang-ar a, body.lang-ar li, body.lang-ar span,
body.lang-ar button, body.lang-ar label,
body.lang-ar input, body.lang-ar select, body.lang-ar textarea,
body.lang-ar .btn-black, body.lang-ar .btn-white, body.lang-ar .btn-border,
body.lang-ar .shop-chip, body.lang-ar .cart-line-name, body.lang-ar .product-title {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0;
}
body.lang-ar .ff-libre,
body.lang-ar .section-title, body.lang-ar .page-title,
body.lang-ar .hero-title, body.lang-ar .pdp-title,
body.lang-ar .preloader-title, body.lang-ar .newsletter-title,
body.lang-ar .confirm-title, body.lang-ar .order-summary-title,
body.lang-ar .checkout-legend, body.lang-ar .error-title,
body.lang-ar .sale-title, body.lang-ar .category-title,
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4 {
  font-family: "Amiri", "Tajawal", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
}
/* Arabic glyphs carry more vertical detail — give headings room */
body.lang-ar .hero-title { line-height: 1.35; }
body.lang-ar .page-title,
body.lang-ar .pdp-title,
body.lang-ar .section-title,
body.lang-ar .confirm-title,
body.lang-ar .newsletter-title { line-height: 1.4; }
body.lang-ar .sale-title { line-height: 1.45; }
/* uppercase is meaningless in Arabic and mangles the shaping */
body.lang-ar .uppercase,
body.lang-ar .btn-black, body.lang-ar .btn-white,
body.lang-ar .btn-border, body.lang-ar .newsletter-btn,
body.lang-ar .hero-eyebrow, body.lang-ar .pdp-eyebrow,
body.lang-ar .section-subtitle, body.lang-ar .confirm-eyebrow,
body.lang-ar .confirm-card-title, body.lang-ar .cart-table-head {
  text-transform: none;
  letter-spacing: 0;
}
/* keep the latin wordmark in the display serif */
body.lang-ar .brand-wordmark,
body.lang-ar .preloader-monogram { font-family: var(--ff-display); letter-spacing: .06em; }

/* ----------------------------------------------- 9. form fields + placeholders */
/* Arabic placeholders must start at the right edge and be legible. The base
   sheet sets a very light placeholder colour that disappears against the
   off-white field backgrounds. */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .field-control {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
  text-align: right;
  direction: rtl;
  color: #6E6E73;
  opacity: 1;                 /* Firefox dims placeholders by default */
}
/* fields whose VALUE must stay latin-ordered: keep the box right-aligned so
   the Arabic placeholder still reads correctly, but type digits left-to-right */
[dir="rtl"] input[name="cardNumber"],
[dir="rtl"] input[name="cardExpiry"],
[dir="rtl"] input[name="cardCvc"],
[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: right;
}
[dir="rtl"] input[name="cardNumber"]::placeholder,
[dir="rtl"] input[name="cardExpiry"]::placeholder,
[dir="rtl"] input[name="cardCvc"]::placeholder { direction: ltr; text-align: right; }
/* email reads fine either way; keep it RTL so the Arabic label-style
   placeholder is not stranded on the far side of a wide field */
[dir="rtl"] input[type="email"] { direction: rtl; text-align: right; }
/* the newsletter popup field is centred by design */
[dir="rtl"] .newsletter-field input,
[dir="rtl"] .newsletter-field input::placeholder { text-align: center; }
/* select caret sits on the left in RTL */
[dir="rtl"] .shop-sort select { padding: 0 14px 0 34px; background-position: left 13px center; }

/* ------------------------------------------------- 10. latin-ordered runs */
/* "-22%" must not render as "22%-", and "Save $46.00" keeps its latin order */
.product-badge span,
.pdp-save,
.clr-sale { direction: ltr; unicode-bidi: isolate; }