/* ===== RTL Styles for Arabic Locale - Shopify Dawn Theme ===== */
/* 1. Import Cairo if not already loaded elsewhere */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
/* Apply RTL text alignment but preserve layout */
body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Keep header in LTR for both languages */
body[dir="rtl"] .header,
body[dir="rtl"] .header * {
  direction: ltr !important;
  text-align: left !important;
}

/* Ensure footer stays RTL */
body[dir="rtl"] .footer__menu-item {
  text-align: right;
}

/* Adjust drawer/menu for RTL */
body[dir="rtl"] .menu-drawer__navigation {
  direction: rtl;
}
body[dir="rtl"] .menu-drawer__menu-item {
  text-align: right;
}
body[dir="rtl"] .menu-drawer,
body[dir="rtl"] .menu-drawer__inner {
  direction: ltr !important;
}
body[dir="rtl"] .menu-drawer {
  left: auto !important;
  right: 0 !important;
  transform: translateX(100%);
}
body[dir="rtl"] .menu-drawer[open] {
  transform: translateX(0);
}

/* Localization dropdown RTL */
body[dir="rtl"] .localization-wrapper {
  direction: rtl;
}

/* Slider arrow flip for main slider */
body[dir="rtl"] .section-slider .swiper-button-next,
body[dir="rtl"] .section-slider .swiper-button-prev {
  transform: scaleX(-1);
}

/* Keep header slider arrows normal */
body[dir="rtl"] .header .swiper-button-prev,
body[dir="rtl"] .header .swiper-button-next {
  transform: none !important;
}

/* Reverse slideshow__controls arrows only in RTL */
body[dir="rtl"] .slideshow__controls .slider-button--prev svg,
body[dir="rtl"] .slideshow__controls .slider-button--next svg {
  transform: scaleX(-1);
}

/* Wishlist button fixed bottom-right in all languages */
.wishlist-button,
.wishlist-widget {
  position: fixed;
  bottom: 20px;
  right: 20px !important;
  left: auto !important;
  z-index: 9999;
}

/* Small screens spacing fix between icons */
@media screen and (max-width: 749px) {
  body[dir="rtl"] .header__icons > *:nth-child(4) {
    margin-left: 0.8rem;
  }
}

/* ===== Mobile fixes: ensure zoom/image fit on small screens ===== */
@media screen and (max-width: 749px) {
  .product__media-wrapper [data-zoom-on-hover],
  .product__media-wrapper .image-magnify-hover {
    pointer-events: auto !important;
    touch-action: pan-y pinch-zoom;
  }
  .product__media img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
  }
  .product-media-modal__content img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100vh !important;
  }
}

/* ===== TEST: RTL alignment for product title only ===== */
body[dir="rtl"] .product__title,
body[dir="rtl"] .product__title * {
  direction: rtl !important;
  text-align: right !important;
}
/* hide all caret icons on mobile when RTL is active */
@media screen and (max-width: 749px) {
  .icon-caret {
    display: none !important;
  }
}
/* RTL-align the collection title block */
body[dir="rtl"] .collection__title.title-wrapper {
  direction: rtl !important;
  text-align: right !important;
}
/* RTL-align the “inline-richtext” titles */
body[dir="rtl"] .title.inline-richtext {
  direction: rtl !important;
  text-align: right !important;
}

/* Make sure any child elements also flow RTL */
body[dir="rtl"] .title.inline-richtext * {
  direction: rtl !important;
  text-align: right !important;
}
/* 1) Make the whole collection block RTL and right-aligned */
body[dir="rtl"] 
  #collection-template--24712590786871__featured_collection_Li3Gck,
body[dir="rtl"] 
  #collection-template--24712590786871__featured_collection_Li3Gck * {
  direction: rtl !important;
  text-align: right !important;
}

/* 2) Flip the slider arrows */
body[dir="rtl"] 
  .slider-button--prev svg,
body[dir="rtl"] 
  .slider-button--next svg {
  transform: scaleX(-1);
}

/* 3) Have the product grid flow RTL */
body[dir="rtl"] 
  #Slider-template--24712590786871__featured_collection_Li3Gck {
  direction: rtl;
}

/* 4) If you need to restore left-to-right on any sub-element (e.g. numbers or LTR text), target it explicitly: */
/*
body[dir="rtl"] 
  .card__badge,
body[dir="rtl"] 
  .slider-counter {
  direction: ltr;
  text-align: left;
}
*/
/* ensure all carets are shown */
.svg-wrapper .icon-caret {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* RTL‐align the product tax notice */
body[dir="rtl"] .product__tax.caption.rte {
  direction: rtl !important;
  text-align: right !important;
}

/* And ensure any inline links/text inside also flow RTL */
body[dir="rtl"] .product__tax.caption.rte *,
body[dir="rtl"] .product__tax.caption.rte a {
  direction: rtl !important;
  text-align: right !important;
}
/* ===== RTL for MainContent policy page ===== */
body[dir="rtl"] #MainContent,
body[dir="rtl"] #MainContent .shopify-policy__container,
body[dir="rtl"] #MainContent .shopify-policy__title,
body[dir="rtl"] #MainContent .shopify-policy__body,
body[dir="rtl"] #MainContent .shopify-policy__body .rte {
  direction: rtl !important;
  text-align: right !important;
}

/* Ensure any inline elements within the RTE also respect RTL */
body[dir="rtl"] #MainContent .shopify-policy__body .rte * {
  direction: rtl !important;
  text-align: right !important;
}
/* new – only hits the DIV with class="product__title" */
div.product__title {
  direction: rtl !important;
  text-align: right !important;
}
div.card__information {
  direction: rtl !important;
  text-align: right !important;
}
/* ===== Breadcrumbs RTL Overrides ===== */
body[dir="rtl"] .breadcrumbs {
  font-size: 1rem !important;
  font-weight: 400 !important;
  margin-bottom: 1rem;
  line-height: 1.6 !important;
  direction: rtl !important;
  text-align: right !important;
}

body[dir="rtl"] .breadcrumbs__list {
  list-style: none !important;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body[dir="rtl"] .breadcrumbs__item + .breadcrumbs__item::before {
  content: "›";
  margin: 0 0 0 0.5em !important;
}

body[dir="rtl"] .breadcrumbs__item a,
body[dir="rtl"] .breadcrumbs__item {
  color: var(--color-text) !important;
  text-decoration: none !important;
}

body[dir="rtl"] .breadcrumbs__item[aria-current="page"] {
  font-weight: 600 !important;
}

/* ===== Breadcrumbs Font Size RTL Only ===== */
body[dir="rtl"] nav.breadcrumbs,
body[dir="rtl"] nav.breadcrumbs .breadcrumbs__item,
body[dir="rtl"] nav.breadcrumbs .breadcrumbs__item a {
  font-size: 1.375rem !important; /* ← adjust as needed */
}

.shopify-policy__container {
  direction: rtl;
  text-align: right;
}

[lang="ar"] .collection-list-title {
  font-family: 'Cairo', sans-serif;
}
/* Ensure Arabic .title headings render in Cairo font */
[lang="ar"] .title {
  font-family: 'Cairo', sans-serif;
}
[lang="ar"] .multicolumn-card__info {
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  text-align: right;
}

/* Price fields read RTL and align text on the right */
.facets__price .field__input {
  direction: rtl !important;
  text-align: right !important;
}
/* 2. Globally override to Cairo in RTL/Arabic */
html[dir="rtl"],
html[lang="ar"] {
  font-family: 'Cairo', sans-serif !important;
}

/* 3. (Optional) Ensure form inputs & buttons also pick up Cairo */
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
  font-family: 'Cairo', sans-serif !important;
}
/* 1. Force RTL direction & right-align labels/placeholders */
.facets__price {
  direction: rtl !important;
  text-align: right !important;
}
.facets__header-vertical {
  direction: rtl !important;
  text-align: right !important;
}
.form__label {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: embed;   /* ensures embedded LTR text (like “Color:”) stays in order */
}
/* Enlarge the color legend text */
legend.form__label {
  font-size: 1.5rem !important;   /* try 1.5rem (≈24px) or adjust as needed */
  line-height: 1.2 !important;    /* keep it vertically balanced */
}