html[lang="ar"],
html[lang^="ar-"],
html.is-arabic {
 direction: rtl;
  overflow-x: clip;
  max-width: 100%;

  body {
    overflow-x: clip;
    max-width: 100%;
    position: relative;
    letter-spacing:0px !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  .price__regular,
  a,
  span,
  #shopify-section-template--27025253597464__section_K6rPR4 h2,
  #shopify-section-template--27025253597464__section_AWGU7P h2,
  #shopify-section-template--27025253597464__section_AWGU7P h4, button {
    font-family: 'GreyCliffArabic' !important;
    letter-spacing:0px !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  .price__regular {
    text-align: right;
  }
gift-card-recipient-form input, gift-card-recipient-form textarea{
  text-align:right;
}
  .blog-post-details {
    flex-direction: row-reverse;
    justify-content: flex-end;
    display:flex;
  }
.asteri-article-hero .blog-post-details{
  justify-content:flex-end !important;
}
.products-criteria .layout-panel-flex--row > .group-block--width-custom {
  margin-left: 24px;
  margin-right:0px !important;
}
.asteri-cur-x .money{
  direction:LTR;
}
.asteri-article-hero__cap h1{
  font-family:'Kermes' !important;
}
 #ContactForm-phone{
  text-align:end;
 }
  .pull-quote p,
  .pull-quote p, .video-text p, .video-text h4, .xpert p, .gifts-columns p, .about-text p, .makeup-movement p{
    text-align: center;
  }

  /* Arabic header logo swap */
  .header-logo__image-container--lang-en {
    display: none !important;
  }
  .header-logo__image-container--original.header-logo__image-container--lang-ar {
    display: var(--header-logo-display, block) !important;
  }
  .header-logo__image-container--inverse.header-logo__image-container--lang-ar {
    display: var(--header-logo-inverse-display, none) !important;
  }
  .header-logo:not(:has(.header-logo__image-container--inverse))
    .header-logo__image-container--original.header-logo__image-container--lang-ar {
    display: block !important;
  }
 /* Arabic footer / image-block theme logo swap */
  .image-block--has-arabic-logo .image-block__logo--lang-en {
    display: none !important;
  }
  .image-block--has-arabic-logo .image-block__logo--lang-ar {
    display: flex !important;
  }

  .category-title a {
    margin-right: auto;
    margin-left: unset;
  }

  #shopify-section-template--27071565955352__section_AWGU7P h4,
  .product-installments__title {
    text-align: center;
  }

  .product-card .product-card-swatch-selected {
    margin-right: 5px;
   margin-left: 0;
    text-align: right;
  }

  /*
    Keep the card swatch rail LTR in Arabic. Page-level RTL makes scrollLeft /
    start-end geometry treat both ends as reached, which hid the arrows.
  */
  .product-card .product-card-swatches-slider-wrap,
  .product-card .product-card-swatches-slider-viewport,
  .product-card .product-card-swatches-slider {
    direction: rtl;
  }
  
  .product-card .product-card-swatches-slider__fade--start {
    left: auto;
    right: 0;
    background: linear-gradient(to right, rgb(255 255 255 / 0%), #fff 78%);
  }

  .product-card .product-card-swatches-slider__fade--end {
    right: auto;
    left: 0;
    background: linear-gradient(to left, rgb(255 255 255 / 0%), #fff 78%);
  }

  .product-card .product-card-swatches-slider__arrow--prev {
    left: auto;
    right: 4px;
  }
  .predictive-search__icon{
    right:0.8rem;
    left:unset;
  }
   .sorting-filter__options{
    left:0 !important;
    right:unset;
   }
   .asteri-article-hero__cap h1{
    text-align:right !important; 
   }
.cart-drawer__close-button{
  left:var(--margin-lg);
  right:unset;
}
  .product-card .product-card-swatches-slider__arrow--next {
    right: auto;
    left: 4px;
  }

  .product-card .product-card-swatches-slider__arrow--prev .svg-wrapper {
    transform: none;
  }

  .product-card .product-card-swatches-slider__arrow--next .svg-wrapper {
    transform: scaleX(-1);
  }

  .product-media-gallery__favorites {
    left: 12px;
    right: unset;
  }
.product-short-description .product-metafield-content {
    text-align: right;
    font-family: 'GreyCliffArabic' !important;
  }
  .product-claims-metafield .pdp-mf__ar metafield-html-content{
    text-align:right;
    font-family: 'GreyCliffArabic' !important;
  }
  .product-variant-title .pdp-mf__ar, .product-card .product-card__content .text-block p, .cart-items__product-info span{
    font-family:'Kermes' !important;
  }
  .product-card .pdp-mf, .blog-post-card__content div, .blog-post-details span time, .blog-post-card__content a{
    text-align:right !important;
  }
.product-details .details-content .pdp-mf__ar, .product-short-description .pdp-mf__ar{
  font-family:'GreyCliffArabic' !important;
}
.cart-items-component[data-drawer] .cart-items__remove{
  left:1.25em;
  right:unset;
}
  /*
    Slideshow banner text uses view-timeline animation on the inline axis.
    In RTL that timeline is inverted, so .slide__content stays at opacity: 0.
    Keep banner copy visible in Arabic (Stories page + all slideshows).
  */
  .slide__content {
    opacity: 1 !important;
    animation: none !important;
    
  }
  /*
    Banner drag uses scrollLeft like English. RTL on the track reverses the
    flex order and makes Firefox use negative scrollLeft, so swipe feels stuck
    or inverted. Keep the rail LTR; only the slide copy stays RTL.
  */
  .slideshow-section slideshow-component,
  .slideshow-section slideshow-slides {
    direction: ltr;
    unicode-bidi: isolate;
  }
  .slideshow-section .slide__content {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: start;
  }
  .slideshow-section .slideshow-control--previous.flip-x {
    scale: -1 1;
  }

  .slideshow-section .slideshow-control--next {
    scale: 1 1;
  }
  .product-full-look-slideshow slideshow-arrows.product-full-look-slideshow__arrows .slideshow-control--previous{
    left:unset;
    right:-30px;
  }
  .product-full-look-slideshow slideshow-arrows.product-full-look-slideshow__arrows .slideshow-control--next{
    right:unset;
    left:-30px;
  }
  .contact-form-success-dialog__title{
    font-family:'Kermes' !important;
  }
.slide__content p, .product-details .group-block-content .h3 h1{
font-family:'Kermes' !important;
}
.product-information__grid accordion-custom details .details-content li{
  text-align:right;
  margin-right:15px;
}
.product-metafield-content ul{
  padding-right:0px;
}
.product-metafield-content ul li, .details__header, .product-metafield-content, .shade-name{
font-family:'GreyCliffArabic' !important;
}
.cart-page__title .cart-title h1,
.cart-page__title .cart-title .h4,
.cart-items-component:not([data-drawer]) .cart-title h1 {
  font-family: 'Kermes' !important;
}
.email-signup__button svg{
  transform:rotate(180deg);
}

  .slideshow-control--previous.flip-x {
    scale: 1 1;
  }
  .slideshow-control--next {
    scale: -1 1;
  }

  /* PDP gallery: absolute left/right pins ignore dir=rtl; swap sides so flipped icons point outward */
  .media-gallery--carousel slideshow-arrows.pdp-gallery-arrows .slideshow-control--previous {
    left: auto;
    right: 16px;
  }
  .media-gallery--carousel slideshow-arrows.pdp-gallery-arrows .slideshow-control--next {
    right: auto;
    left: 16px;
  }

.slideshow-controls__thumbnails{
  padding-left:1px;
}

.cart-title{
  display:flex;
}
.cart-title h4{
  margin-left:auto;
}
.cart-items-component:not([data-drawer]) .cart-items__remove{
  left:28px;
  right:unset;
}
li{
  text-align:right;
}
.header-logo__image{
  width:83px !important;
  height:26px !important;
}
.product-title .pdp-mf__ar:not([hidden]), .pull-quote .text-block--AdHdWRzNaaEk5U3JEd__text_Gyij8G p:first-of-type, .video-text h1{
  font-family:'Kermes' !important;
  font-weight:100;
  font-size:18px;
}
.bogos-progress-bar-container .bogos-progress-count-down-message, .bogos-progress-bar-container .bogos-progress-goal-title, .bogos-progress-bar-container .bogos-progress-goal-description{
  font-family:'GreyCliffArabic';
}
.video-text h4{
  font-weight:400;
}
h2{
  font-size:40px;
}
.menu-drawer__menu-item-text, .asteri-df__acct span, .asteri-df__lnk span{
  font-weight:600;
}
.search-action .svg-wrapper{
  justify-content:left;
}
.asl-banner-title, .asl-card-title{
  font-family:'Kermes';
}
#freegifts-main-popup-container[data-animation=slideInOutTop].sca-is-visible-fg .bogos-gifts-slider-container{
  transform:translate(50%,-50%) !important;
  right:50% !important;
}
input.kl-private-reset-css-Xuajs1{
  text-align:right !important;
  padding-right:16px !important;
} 

 #klaviyo-bis-button-container button,
 [data-testid="POPUP"] .klaviyo-form-richtext,
 [data-testid="POPUP"] .klaviyo-form-richtext *,
 [data-testid="POPUP"] input,
 [data-testid="POPUP"] .klaviyo-form-button,
 [data-testid="POPUP"] label {
  font-family: 'Kermes' !important;
  }
  
.bogos-slider-header-info {
  justify-content:end !important;
}
.bogos-slider-offer-title {
  text-align:right !important;
}
.bogos-slider-info-title{
  direction:rtl;
}
.bogos-slider-offer .bogos-slider-offer-badge-container{
  right:10px;
}
.product-title div{
  margin-top:-5px;
}
.asteri-usp__label{
  font-size:15px;
}
.text-block--ATkxteVE4d1d1aHZQc__text_HPabN4 strong{
  font-weight:200 !important;
  text-decoration:underline !important;
  font-size:16px;
}
.asteri-signup-thanks__title, .asteri-signup-thanks__body{
  text-align:center;
}
.snize-title, #snize_results .snize-price-list.snize-compare-price-right{
  justify-content:right;
  text-align:right !important;
}
/*
  Sale row laid out as a flex line so the compare-at and sale amounts sit next to
  each other in RTL. The :not() is required, not cosmetic: nesting under
  html[lang^="ar-"] outranks .price__hidden, so an unscoped rule reveals the sale
  row on every full-price product — and its empty compare-at span still paints the
  currency glyph, printing the amount twice with a struck symbol beside it.
*/
.price__sale:not(.price__hidden){
  display:flex;
}
@media screen and (max-width: 749px) {
  .product-title .pdp-mf__ar:not([hidden]){
    font-size:14px;
  }
 
.header-logo__image{
  width:99px !important;
  height:36px !important;
}
.cart-page__title .cart-title h1,
.cart-page__title .cart-title .h4,
.cart-items-component:not([data-drawer]) .cart-title h1 {
  font-size: 25px !important;
}
.cart-items-component:not([data-drawer]) .cart-page {
  padding-top: 32px;
}
}
  @media screen and (min-width: 750px) {
    .product-information__grid:not(.product-information--media-none).product-information--media-left
      .product-details {
      padding-right: calc(var(--gap, 0) / 2);
    }
    .payment-icons__list{
      margin-left:unset;
    }
    .utilities--blocks-1>*{
      text-align:left;
    }
  }

  /* Collection page banner title */
  .hero__content-wrapper--collection .text-block,
  .hero__content-wrapper--collection .text-block p,
  .hero__content-wrapper--collection .h1 {
    font-family: 'Kermes' !important;
    font-weight: 400 !important;
  }
   /* Currency stays on the LEFT of the amount. RTL would put ::before / symbolFirst
     codes on the right; isolate each price as LTR so SAR/AED/$/ISO sit first. */
  .price,
  .price-item,
  .price-item--sale,
  .price-item--regular,
  .compare-at-price,
  .unit-price,
  .money,
  .cart-totals__total-value,
  .cart-totals__total-value .money,
  .currency-note__total-value {
    direction: ltr;
    unicode-bidi: isolate;
  }
}


