/* Storefront RTL shell — loaded only when html[dir=rtl] */
html[dir="rtl"] body {
  font-family: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
  letter-spacing: normal;
}

html[dir="rtl"] {
  text-align: start;
}

/* Keep phone / price / SKU islands readable in mixed bidi content */
html[dir="rtl"] .sf-ltr,
html[dir="rtl"] [data-ltr],
html[dir="rtl"] .price,
html[dir="rtl"] .product-code,
html[dir="rtl"] .pdp-product-code__value,
html[dir="rtl"] .sku,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* -------------------------------------------------------------------------- */
/* Bootstrap form-check is LTR-physical (padding-left + float:left) — fix RTL  */
/* -------------------------------------------------------------------------- */
html[dir="rtl"] .form-check {
  padding-left: 0;
  padding-right: 1.5em;
}

html[dir="rtl"] .form-check .form-check-input {
  float: right;
  margin-left: 0;
  margin-right: -1.5em;
}

/* Facet / common-check: flex layout avoids label↔box overlap in RTL */
html[dir="rtl"] .common-check.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 0;
  padding-right: 0;
  min-height: 0;
}

html[dir="rtl"] .common-check .form-check-input {
  float: none;
  margin: 0.15rem 0 0;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

html[dir="rtl"] .common-check .form-check-label {
  width: auto;
  flex: 1 1 auto;
  padding-inline-start: 0;
  line-height: 1.45;
}

/* Inline checkboxes that use m-0 (checkout / account) */
html[dir="rtl"] .form-check-input.m-0 {
  float: none;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Directional SVG icons (sprite <svg class="icon">, not Phosphor classes)    */
/* -------------------------------------------------------------------------- */
html[dir="rtl"] .breadcrumb .icon,
html[dir="rtl"] .brand-slider-arrows .icon,
html[dir="rtl"] .slick-arrow .icon,
html[dir="rtl"] .product-lightbox__nav .icon,
html[dir="rtl"] #collection-prev .icon,
html[dir="rtl"] #collection-next .icon,
html[dir="rtl"] #new-arrival-prev .icon,
html[dir="rtl"] #new-arrival-next .icon,
html[dir="rtl"] .has-submenus-submenu > a > .icon,
html[dir="rtl"] .has-submenu > a > .icon.text-md,
html[dir="rtl"] .nav-menu .has-submenu .icon,
html[dir="rtl"] .account-sidebar .icon.ms-auto,
html[dir="rtl"] .pagination .icon {
  transform: scaleX(-1);
}

/* Card CTA arrows rendered as "→" via ::before / ::after */
html[dir="rtl"] .brand-collection::before,
html[dir="rtl"] .new-arrival .product-card::after,
html[dir="rtl"] .shop .product-card::after {
  content: "←";
}

html[dir="rtl"] .brand-collection:hover::before,
html[dir="rtl"] .new-arrival .product-card:hover::after,
html[dir="rtl"] .shop .product-card:hover::after {
  transform: translateX(-3px);
}

/* -------------------------------------------------------------------------- */
/* Header / cart badge: in RTL flex order puts text beside badge             */
/* -------------------------------------------------------------------------- */
html[dir="rtl"] .header-action__icon small {
  inset-inline-end: auto;
  inset-inline-start: -8px;
}

html[dir="rtl"] .header-action {
  gap: 0.55rem;
}

/* -------------------------------------------------------------------------- */
/* Breadcrumb: start from the inline-start edge                               */
/* -------------------------------------------------------------------------- */
html[dir="rtl"] .breadcrumb {
  direction: rtl;
}

html[dir="rtl"] .breadcrumb-wrapper {
  flex-direction: row-reverse;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: start;
}

/* -------------------------------------------------------------------------- */
/* Media / promo arrows                                                       */
/* -------------------------------------------------------------------------- */
html[dir="rtl"] .brand-media-showcase .icon,
html[dir="rtl"] .hero-slide__btn .icon,
html[dir="rtl"] .arrow-white > a::before {
  transform: scaleX(-1);
}

html[dir="rtl"] .hero-slide__content {
  align-items: flex-end;
}

/* -------------------------------------------------------------------------- */
/* Off-canvas menus: translateX is physical — in RTL hide to the right        */
/* inset-inline-start docks to the right; translateX(-100%) would pull on-screen */
/* -------------------------------------------------------------------------- */
html[dir="rtl"] .mobile-menu {
  inset-inline-start: 0;
  inset-block-start: 0;
  transform: translateX(100%);
}

html[dir="rtl"] .mobile-menu.active {
  transform: translateX(0);
}

@media screen and (max-width: 991px) {
  html[dir="rtl"] .responsive-dropdown {
    transform: translateX(100%);
  }

  html[dir="rtl"] .responsive-dropdown.active {
    transform: translateX(0);
  }
}

/* Section header actions already sit on inline-end via flex-between — OK     */
/* Ensure slider arrow hover colors keep contrast after icon mirror           */
html[dir="rtl"] .brand-slider-arrows button .icon,
html[dir="rtl"] .slick-arrow .icon {
  display: block;
}