@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap");

/* SHAMODEST — Arabic visual mirror.
   Only applies when the storefront uses <html dir="rtl">.
   Keep the original Webflow theme, measurements, media and image transitions untouched.
   Intentionally never use scaleX(-1) or row-reverse on product galleries. */

/* Text and form direction: browser handles bidi, not CSS transforms. */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] :is(input, textarea, select) { text-align: right; }
html[dir="rtl"] :is(input[type="email"], input[type="url"], input[type="tel"], input[type="number"]) {
    direction: ltr;
    text-align: right;
}
html[dir="rtl"] :is(.product-details-price, .checkout-item-price, .shamodest-detail-price-row,
    .shamodest-cart-page-price, .header-cart-price, .shamodest-checkout-discount-price,
    .shamodest-payment-status-badge, .shamodest-detail-quantity-control input) {
    unicode-bidi: isolate;
}
/* Logo and media remain physically unflipped. */
html[dir="rtl"] :is(.header-brand, .shamodest-footer-logo-link,
    .shamodest-auth-logo, .shamodest-account-top > a:first-child) { direction: ltr; }

/* Shared two-tier navbar: physical left/right positions are mirrored by the
   existing grid's RTL writing direction. Explicit anchors below mirror only
   the hardcoded physical edges that would otherwise break this grid. */
html[dir="rtl"] .header-section .header-block { direction: rtl; }
html[dir="rtl"] .header-nav-menu { text-align: right; }
html[dir="rtl"] .header-nav-wrap { direction: rtl; }
html[dir="rtl"] .header-search-box { direction: rtl; }
html[dir="rtl"] .header-search-field { text-align: right; }
html[dir="rtl"] .shamodest-account-dot { right: auto; left: -2px; }
html[dir="rtl"] .header-nav-icon { direction: rtl; }
html[dir="rtl"] .header-mega-block,
html[dir="rtl"] .header-mega-wrap { direction: rtl; }
html[dir="rtl"] .header-dropdown-list { text-align: right; }
html[dir="rtl"] .header-search-box .header-search-button { margin-inline-start: 0; }

/* Flyouts and search: reverse edge alignment, not the search field contents. */
html[dir="rtl"] .shamodest-search-popup-dialog,
html[dir="rtl"] .shamodest-search-popup-form,
html[dir="rtl"] .shamodest-search-popup-grid { direction: rtl; text-align: right; }
html[dir="rtl"] .shamodest-search-popup-close { right: auto; left: 18px; }
html[dir="rtl"] .header-cart-continer,
html[dir="rtl"] .header-cart-header,
html[dir="rtl"] .header-cart-list,
html[dir="rtl"] .header-cart-footer { direction: rtl; text-align: right; }

/* Home hero, category cards, and footer: place overlays on the opposite side. */
html[dir="rtl"] .shamodest-home-page .home-trending-name { right: auto; left: 30px; }
html[dir="rtl"] .home-trending-tag,
html[dir="rtl"] .product-tag { left: auto; right: 20px; }
html[dir="rtl"] .product-card { right: auto; left: 12px; }
html[dir="rtl"] .product-card-close { right: auto; left: 18px; }
html[dir="rtl"] .product-bag { right: auto; left: 30px; }
html[dir="rtl"] .header-mega-watermark { right: auto; left: 60px; }
html[dir="rtl"] .trending-hero-title-block { margin-right: 0; margin-left: 40px; }
html[dir="rtl"] .shamodest-footer,
html[dir="rtl"] .shamodest-footer-grid,
html[dir="rtl"] .shamodest-footer-intro,
html[dir="rtl"] .shamodest-instagram-heading-row { direction: rtl; text-align: right; }
html[dir="rtl"] .shamodest-footer-column { align-items: flex-start; }
html[dir="rtl"] .shamodest-footer-shop-link > span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
/* The small arrow glyph alone is flipped above; photographs are not. */

/* Shop and category listings: sidebar goes to the right, grid to the left.
   The parent .shop-tabs is already flex and RTL, so DON'T reverse it again. */
html[dir="rtl"] .shop-tabs { direction: rtl; }
html[dir="rtl"] .shop-tabs-menu { margin-right: 0; margin-left: 40px; }
html[dir="rtl"] .shop-tabs-content,
html[dir="rtl"] .shop-content-block { direction: rtl; text-align: right; }
html[dir="rtl"] .shop-tab-link { text-align: center; }
html[dir="rtl"] .shamodest-shop-page .shop-product { min-width: 0; }

/* Product detail: first column (gallery) becomes RIGHT; description LEFT.
   RTL flex-start already mirrors the original child order. */
html[dir="rtl"] .product-details-block { direction: rtl; }
html[dir="rtl"] .product-details-content-block { text-align: right; }
html[dir="rtl"] .shamodest-detail-price-row,
html[dir="rtl"] .shamodest-detail-options,
html[dir="rtl"] .shamodest-detail-purchase-row,
html[dir="rtl"] .shamodest-detail-quantity { direction: rtl; }
html[dir="rtl"] .faq-question-block,
html[dir="rtl"] .faq-answer-block { direction: rtl; text-align: right; }

/* Isolate sliding canvases from inherited RTL. Their JS applies negative
   translateX based on LTR image indexes, and must keep that coordinate system. */
html[dir="rtl"] :is(.shamodest-mobile-cover-slider,
    .shamodest-mobile-cover-track,
    .shamodest-gallery-main-frame,
    .shamodest-gallery-main-image,
    .shamodest-product-image.is-color-slide-out-left,
    .shamodest-product-image.is-color-slide-out-right,
    .shamodest-image-lightbox) { direction: ltr; }
/* Keep thumbnails laid out naturally from the right without flipping photos. */
html[dir="rtl"] .shamodest-gallery-thumbnails { direction: rtl; }
/* Keep the gallery images unmodified, but mirror the navigation controls. */
html[dir="rtl"] .shamodest-lightbox-prev { grid-column: 3; }
html[dir="rtl"] .shamodest-lightbox-next { grid-column: 1; }

/* Checkout, payment results, cart: rely on RTL flex/grid item placement;
   these rules address fixed LTR alignments without moving data-bound fields. */
html[dir="rtl"] .shamodest-checkout-live,
html[dir="rtl"] .checkout-block,
html[dir="rtl"] .shamodest-confirmation-layout,
html[dir="rtl"] .checkout-left-block,
html[dir="rtl"] .checkout-right-block,
html[dir="rtl"] .shamodest-cart-page,
html[dir="rtl"] .shamodest-order-success-header { direction: rtl; text-align: right; }
html[dir="rtl"] .shamodest-checkout-live .checkout-block-header,
html[dir="rtl"] .shamodest-checkout-live .checkout-line-item { direction: rtl; }
html[dir="rtl"] .shamodest-payment-contact-preview,
html[dir="rtl"] .shamodest-bank-instruction-preview,
html[dir="rtl"] .shamodest-confirmation-detail-grid { direction: rtl; }
html[dir="rtl"] .shamodest-order-success-header { text-align: right; }
html[dir="rtl"] .shamodest-checkout-live .checkout-text-field,
html[dir="rtl"] .shamodest-checkout-live .shamodest-checkout-textarea { text-align: right; }

/* Account and auth: mirrored columns but centered wordmark, as in LTR. */
html[dir="rtl"] .shamodest-account-page,
html[dir="rtl"] .shamodest-auth-page { direction: rtl; text-align: right; }
html[dir="rtl"] .shamodest-account-grid,
html[dir="rtl"] .shamodest-form-grid,
html[dir="rtl"] .shamodest-account-side { direction: rtl; }
html[dir="rtl"] .shamodest-account-actions { right: auto; left: 0; }
html[dir="rtl"] .shamodest-account-header,
html[dir="rtl"] .shamodest-panel { text-align: right; }
html[dir="rtl"] .shamodest-auth-card :is(h1, .shamodest-auth-subtitle, .shamodest-auth-switch) { text-align: center; }
html[dir="rtl"] .shamodest-auth-card :is(input, label, .shamodest-errors, .shamodest-status) { text-align: right; }

/* On standalone checkout/auth/launch pages the flag is in a top-right
   inline-positioned wrapper rather than the regular header. Mirror it. */
html[dir="rtl"] body > div[dir="ltr"]:has(> .shamodest-language-switcher) {
    right: auto !important;
    left: 12px !important;
}

/* Other side-attached UI pieces: invert only physical anchors. */
html[dir="rtl"] .newsletter-button { right: auto; left: 20px; }
html[dir="rtl"] .shamodest-welcome-offer-close { right: auto; left: 14px; }
html[dir="rtl"] .shamodest-lightbox-close { right: auto; left: 20px; }

@media screen and (min-width: 992px) {
    /* The icon area has an explicit grid-column:3 in backend.css. In RTL,
       column 3 is the left edge and column 1 is the right edge. */
    html[dir="rtl"] .header-block .header-nav-icon { grid-column: 3 !important; justify-self: end !important; }
    /* Place language select to outside of search while keeping the logo central. */
    html[dir="rtl"] .header-block .shamodest-language-switcher {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        position: relative;
        z-index: 10;
        margin: 0 0 0 0 !important;
    }
    /* Place selector at the far outer edge, icon after it. */
    html[dir="rtl"] .header-block .shamodest-language-switcher { justify-self: start; }
    html[dir="rtl"] .home-hero-video-block { right: auto; left: 4.167vw; }
}

@media screen and (max-width: 991px) {
    /* Existing compact header uses CSS grid and fixed right positioning for
       the account icon; its RTL counterpart must attach to the left. */
    html[dir="rtl"] .header-block .header-menu-button { justify-self: start; }
    html[dir="rtl"] .trending-hero-title-block { margin-left: 0; margin-right: 0; }
    html[dir="rtl"] .header-block .header-cart-wrapper { justify-self: end; }
    html[dir="rtl"] .header-block .shamodest-account-wrap { right: auto !important; left: 58px !important; }
    html[dir="rtl"] .header-block .header-search-box { text-align: right; }
    html[dir="rtl"] .header-section .header-nav-menu,
    html[dir="rtl"] .header-section .header-nav-wrap { direction: rtl; text-align: right; }
    html[dir="rtl"] .shop-tabs-menu { margin-right: 0; margin-left: 30px; }
    html[dir="rtl"] .shamodest-home-page .home-trending-name { left: 18px; right: auto; }
}

@media screen and (max-width: 767px) {
    /* Mirror the reduced collection-card overlays without enlarging the cards. */
    html[dir="rtl"] .shamodest-home-page .home-trending-tag {
        left: auto;
        right: 9px;
    }
    html[dir="rtl"] .shamodest-home-page .home-trending-name {
        left: 10px;
        right: 10px;
        text-align: start;
    }
    html[dir="rtl"] .shop-tabs-menu { margin-right: 0; margin-left: 0; }
    html[dir="rtl"] .faq-question-text { margin-right: 0; margin-left: 10px; }
    html[dir="rtl"] .shamodest-product-media .product-bag { right: auto; left: 8px; }
    html[dir="rtl"] .shamodest-product-card { right: auto; left: 6px; }
    html[dir="rtl"] .product-card-close { right: auto; left: 15px; }
}

@media screen and (max-width: 479px) {
    html[dir="rtl"] .header-block .shamodest-account-wrap { left: 52px !important; right: auto !important; }
    html[dir="rtl"] .shamodest-lightbox-close { left: 12px; right: auto; }
    html[dir="rtl"] .shamodest-lightbox-prev { right: 8px; left: auto; }
    html[dir="rtl"] .shamodest-lightbox-next { left: 8px; right: auto; }
    html[dir="rtl"] .shamodest-welcome-offer-close { left: 9px; right: auto; }
}


/* Arabic typography: one family for normal copy AND editorial titles.
   Keep logo artwork, icon glyphs and the unchanged LTR site untouched. */
html[dir="rtl"] {
    --_font-family---body: "Tajawal", sans-serif;
    --_font-family---heading: "Tajawal", sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] body :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, small, strong, em, b, li, blockquote),
html[dir="rtl"] body :is(.home-hero-title, .home-hero-title-line, .home-hero-subtitle,
    .home-hero-desktop-subtitle, .home-trending-title, .home-trending-name,
    .trending-hero-title, .trending-hero-subtitle, .testimonial-title,
    .testimonial-name, .testimonial-except, .ribbon-text, .shamodest-footer-statement,
    .launch-title, .shop-heading, .product-details-title, .shamodest-cart-page-title,
    .shamodest-cart-page-item-info, .shamodest-cart-page-summary,
    .shamodest-account-page, .shamodest-auth-page, .faq-question-text) {
    font-family: "Tajawal", sans-serif !important;
}
/* Decorative Latin-only watermark is intentionally unchanged. */
html[dir="rtl"] :is(.launch-eyebrow, .launch-date, .countdown-label, .shamodest-auth-kicker,
    .home-hero-title, .home-hero-subtitle, .home-hero-desktop-subtitle) {
    letter-spacing: normal;
}

/* The English desktop hero uses MODESTY and a cursive subtitle on one line.
   That composition overlaps Arabic words. Compose the two translated headline
   segments as one natural RTL title, then set the subtitle on its own row.
   Original dynamic Filament translations and animation hooks stay intact. */
@media screen and (min-width: 768px) {
    html[dir="rtl"] .shamodest-home-page .home-hero-wrap {
        width: min(92vw, 1160px) !important;
        max-width: calc(100vw - 32px) !important;
        top: 18% !important;
    }
    html[dir="rtl"] .shamodest-home-page .home-hero-title-block {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    html[dir="rtl"] .shamodest-home-page .home-hero-title {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        justify-content: center !important;
        column-gap: .22em !important;
        row-gap: 0 !important;
        width: 100% !important;
        font-size: clamp(34px, 4.15vw, 70px) !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        font-weight: 700 !important;
        direction: rtl;
        text-align: center;
    }
    html[dir="rtl"] .shamodest-home-page .home-hero-title-line {
        display: inline !important;
        width: auto !important;
        max-width: 100%;
        margin: 0 !important;
        white-space: normal !important;
    }
    html[dir="rtl"] .shamodest-home-page .home-hero-title-last-line {
        display: contents !important;
    }
    html[dir="rtl"] .shamodest-home-page .home-hero-desktop-subtitle {
        display: block !important;
        flex-basis: 100% !important;
        width: 100%;
        margin-top: 8px;
        font-size: clamp(18px, 1.9vw, 31px) !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

/* Infinite tracks use physical negative X coordinates. If flex direction is
   inherited as RTL, the repeated tracks are placed on the wrong physical side
   and slide into an empty region. Keep the tracks LTR, but each card RTL. */
html[dir="rtl"] .testimonial-card-block,
html[dir="rtl"] .testimonial-card-wrapper {
    direction: ltr;
}
html[dir="rtl"] .testimonial-card {
    direction: rtl;
    text-align: right;
}

/* Two identical ribbons are already duplicated in the Blade template.
   Keep track coordinates LTR and render text RTL inside each item; animate
   by exactly one copy width, giving an uninterrupted seamless loop.  This
   overrides the original Webflow transform for the Arabic ribbons ONLY. */
html[dir="rtl"] .ribbon-container,
html[dir="rtl"] .ribbon-marquee {
    direction: ltr;
}
html[dir="rtl"] .ribbon-marquee {
    animation: shamodest-ar-ribbon-loop 36s linear infinite !important;
    will-change: transform;
}
html[dir="rtl"] .ribbon-marquee > :is(.ribbon-text, .ribbon-link) {
    direction: rtl;
    unicode-bidi: isolate;
    white-space: nowrap;
}
@keyframes shamodest-ar-ribbon-loop {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
}


/* Arabic-only corrections, October 2026. All LTR locales stay untouched.
   The movable canvases and rolling digits use physical LTR coordinates,
   while Arabic prose and the page structure remain RTL. */

/* 1. The Home mobile carousel JS calculates negative translateX from a left
   origin. It must not inherit RTL flex positioning or all slides disappear. */
@media screen and (max-width: 767px) {
  html[dir="rtl"] .shamodest-home-page .mobile-hero-slider,
  html[dir="rtl"] .shamodest-home-page .mobile-hero-track {
    direction: ltr !important;
  }
  html[dir="rtl"] .shamodest-home-page .mobile-hero-track {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  html[dir="rtl"] .shamodest-home-page .mobile-hero-slide {
    direction: ltr;
    flex: 0 0 100%;
  }
}

/* 2. Mobile navbar: logical and visual parity. Keep the logo exactly centered,
   cart/account to the left, search/menu to the right. The flag lives neatly
   inside the slim announcement bar rather than creating a stray grid row. */
@media screen and (max-width: 991px) {
  /* In the exported mobile Webflow layout the header has a physical -10px
     offset; inherited RTL can double that negative offset and clip the cart. */
  html[dir="rtl"] .header-section {
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
  }
  html[dir="rtl"] .header-section .header-menu-button {
    display: flex !important;
    align-items: center !important;
  }
  html[dir="rtl"] .header-section .header-block {
    direction: ltr !important;
    grid-template-areas: "cart account brand search menu" !important;
    grid-template-columns: 28px 28px minmax(0, 1fr) 28px 28px !important;
    column-gap: clamp(7px, 1.5vw, 15px) !important;
    align-items: center !important;
  }
  html[dir="rtl"] .header-section .header-navbar,
  html[dir="rtl"] .header-section .header-nav-icon { display: contents !important; }
  html[dir="rtl"] .header-section .header-brand {
    grid-area: brand !important;
    justify-self: center !important;
    align-self: center !important;
  }
  html[dir="rtl"] .header-section .header-cart-wrapper {
    grid-area: cart !important;
    justify-self: center !important;
    align-self: center !important;
  }
  html[dir="rtl"] .header-section .shamodest-account-wrap {
    grid-area: account !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
  }
  html[dir="rtl"] .header-section .header-search-wrap {
    grid-area: search !important;
    justify-self: center !important;
    align-self: center !important;
  }
  html[dir="rtl"] .header-section .header-menu-button {
    grid-area: menu !important;
    justify-self: center !important;
    align-self: center !important;
  }
  html[dir="rtl"] .header-section .shamodest-language-switcher {
    position: absolute !important;
    top: 3px !important;
    right: 7px !important;
    left: auto !important;
    z-index: 5 !important;
    margin: 0 !important;
    height: 27px;
    direction: ltr;
  }
  html[dir="rtl"] .header-section .shamodest-language-switcher select {
    width: 47px !important;
    max-width: 47px !important;
    height: 26px !important;
    padding: 1px 2px !important;
    font-size: 15px !important;
    box-sizing: border-box;
  }
  html[dir="rtl"] .header-section .shamodest-announcement-bar {
    padding-right: 56px !important;
    padding-left: 10px !important;
  }
}
@media screen and (max-width: 479px) {
  html[dir="rtl"] .header-section .header-block {
    grid-template-columns: 24px 24px minmax(0, 1fr) 24px 24px !important;
    column-gap: clamp(5px, 2vw, 9px) !important;
  }
}

/* 3. Rolling figures: the counting digits, Latin units and percentage must
   keep the same physical order in either language (5K+, 4+, 8%). Each roller
   glyph must fit its animated viewport, including Tajawal's baseline. */
html[dir="rtl"] .shamodest-home-purpose-section .overview-number-wrap {
  --shamodest-ar-counter-size: clamp(44px, 4.6vw, 76px);
  direction: ltr !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--shamodest-ar-counter-size);
  gap: 1px;
  white-space: nowrap;
}
html[dir="rtl"] .shamodest-home-purpose-section .overview-number,
html[dir="rtl"] .shamodest-home-purpose-section .overview-number-reverse {
  direction: ltr !important;
  height: var(--shamodest-ar-counter-size) !important;
  flex: none;
}
html[dir="rtl"] .shamodest-home-purpose-section .overview-count-title {
  font-family: "Tajawal", sans-serif !important;
  font-size: var(--shamodest-ar-counter-size) !important;
  font-weight: 700;
  line-height: 1 !important;
  height: var(--shamodest-ar-counter-size) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
}

/* 4. Ribbon background needs to overhang BOTH physical edges even in RTL.
   Rotation stays unchanged; only its physical bounds are made symmetrical. */
html[dir="rtl"] .shamodest-home-page .ribbon-section {
  overflow: hidden;
}
html[dir="rtl"] .shamodest-home-page .ribbon-block._400,
html[dir="rtl"] .shamodest-home-page .ribbon-block._000 {
  position: relative;
  width: calc(100% + 32vw) !important;
  left: -16vw !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html[dir="rtl"] .shamodest-home-page .ribbon-block._400 {
  transform: rotate(5deg) !important;
}
html[dir="rtl"] .shamodest-home-page .ribbon-block._000 {
  transform: rotate(-5deg) !important;
}

/* 5. Popup headline lines up with the brand wordmark on the physical right. */
html[dir="rtl"] .shamodest-search-popup-eyebrow,
html[dir="rtl"] .shamodest-search-popup-title {
  text-align: right !important;
}
html[dir="rtl"] .shamodest-search-popup-title {
  direction: rtl;
  margin: 0 0 28px 56px !important;
  letter-spacing: normal !important;
  line-height: 1.22 !important;
}

/* 6. Shop desktop: text anchored to the right and scroll circle BELOW it.
   The picture and shop interactions stay the same. */
@media screen and (min-width: 992px) {
  html[dir="rtl"] .shamodest-shop-page .shamodest-category-hero .trending-hero-block {
    direction: rtl !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  html[dir="rtl"] .shamodest-shop-page .shamodest-category-hero .trending-hero-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    direction: rtl;
    text-align: right;
  }
  html[dir="rtl"] .shamodest-shop-page .shamodest-category-hero .trending-hero-title-block {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: min(470px, 42vw);
    text-align: right;
  }
  html[dir="rtl"] .shamodest-shop-page .shamodest-category-hero .trending-hero-button {
    align-self: flex-start !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* 7. Arabic Lookbook watermark has normal connected lettering. */
html[dir="rtl"] .shamodest-home-page .lookbook-watermark {
  letter-spacing: 0 !important;
  text-transform: none !important;
  direction: rtl;
}


/* Arabic-only seamless reviews & crossed ribbons — original Webflow
   translations, markup layout and all other locales remain unchanged. */

/* Webflow's interaction animates the container based on its original LTR
   coordinates. Neutralize that transform: only the two repeated children move. */
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-wrapper {
  direction: ltr;
}
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-container[data-w-id] {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  direction: ltr !important;
  width: max-content;
  min-width: 100%;
}
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-marquee {
  direction: ltr !important;
  flex: 0 0 auto !important;
  animation: shamodest-ar-ribbon-loop 55s linear infinite !important;
}
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-text,
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-link {
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
  flex: none;
}
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-dot {
  flex: 0 0 8px;
}

/* The RTL page's block formatting starts oversized strips at the RIGHT edge.
   Keep the ribbon coordinate origin LTR and deliberately overhang BOTH sides. */
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-block._400,
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-block._000 {
  direction: ltr !important;
  box-sizing: border-box;
  width: calc(100% + 48vw) !important;
  left: -24vw !important;
  right: auto !important;
  margin-inline: 0 !important;
  transform-origin: 50% 50%;
}

/* Desktop Home contains TWO five-card copies. Disable Webflow's original
   transform on the *parent* and move each identical copy by its own width. */
@media screen and (min-width: 992px) {
  html[dir="rtl"] .shamodest-home-page .shamodest-home-testimonial-section
  .testimonial-card-block:not(.display-none-for-desktop) {
    direction: ltr !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html[dir="rtl"] .shamodest-home-page .shamodest-home-testimonial-section
  .testimonial-card-block:not(.display-none-for-desktop) > .testimonial-card-wrapper {
    direction: ltr !important;
    flex: 0 0 auto !important;
    animation: shamodest-ar-testimonials-loop 32s linear infinite !important;
    will-change: transform;
  }
  @keyframes shamodest-ar-testimonials-loop {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
  }
}

/* Arabic-only final placement adjustments. All motion timings, images,
   Webflow slider JS and non-Arabic layouts intentionally stay unchanged. */

/* Flag selector: preserve the native dropdown, but no visible rectangle. */
html[dir="rtl"] .shamodest-language-switcher select {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* The crossed ribbons rotate beyond the section's own top boundary.
   Clip only horizontally so the upper diagonal is not sliced straight. */
html[dir="rtl"] .shamodest-home-page .ribbon-section {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Lookbook overlay copy sits on the image's RIGHT in Arabic, inset gently. */
html[dir="rtl"] .shamodest-home-page .lookbook-card .lookbook-name {
  direction: rtl;
  align-items: flex-start !important;
  text-align: right !important;
  padding-right: clamp(20px, 2.2vw, 38px) !important;
  padding-left: 20px !important;
}
html[dir="rtl"] .shamodest-home-page .lookbook-card .lookbook-name > * {
  text-align: right !important;
}

/* Shop desktop: right-aligned copy as before, but anchored BOTTOM like LTR. */
@media screen and (min-width: 992px) {
  html[dir="rtl"] .shamodest-shop-page .shamodest-category-hero .trending-hero-block {
    align-items: flex-end !important;
  }
}

/* Mobile flag now stays next to the account icon (not in welcome strip).
   Preserve the five-cell header grid and the centred brand/logo. */
@media screen and (max-width: 991px) {
  html[dir="rtl"] .header-section .shamodest-language-switcher {
    top: calc(50% - 13px) !important;
    right: auto !important;
    left: calc(62px + 4.5vw) !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 32px !important;
    justify-content: center;
    z-index: 6 !important;
  }
  html[dir="rtl"] .header-section .shamodest-language-switcher select {
    width: 36px !important;
    max-width: 36px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 17px !important;
  }
  html[dir="rtl"] .header-section .shamodest-announcement-bar {
    padding-inline: 10px !important;
  }
}

/* SHAMODEST — final two isolated fixes. Arabic ribbon layering: the solid
   black (_000) strip crosses ABOVE the lighter (_400) strip, as in LTR. */
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-block._400 {
  position: relative;
  z-index: 1 !important;
}
html[dir="rtl"] .shamodest-home-page .ribbon-section .ribbon-block._000 {
  position: relative;
  z-index: 2 !important;
}

/* Mobile Arabic: anchor the language picker to the account icon row, not to
   the welcome bar; preserve the earlier five-column grid and icon order. */
@media screen and (max-width: 991px) {
  html[dir="rtl"] .header-section .header-block {
    position: relative;
  }
  html[dir="rtl"] .header-section .header-block .shamodest-language-switcher {
    /* Existing RTL offset tracks the 32px account icon box exactly. */
    top: calc(50% - 13px) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    align-items: center !important;
  }
}

/* Arabic mobile header — keep the flag in the account's GRID TRACK rather
   than anchoring it to viewport pixels.  This corrects both the horizontal
   separation and the higher vertical placement on actual mobile devices. */
@media screen and (max-width: 991px) {
  html[dir="rtl"] .header-section .header-block .shamodest-language-switcher {
    grid-area: account !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 32px !important;
    margin: 0 !important;
    transform: translateX(30px) !important;
    z-index: 8 !important;
  }
  html[dir="rtl"] .header-section .header-block .shamodest-account-wrap {
    grid-area: account !important;
    z-index: 9;
  }
}
@media screen and (max-width: 479px) {
  html[dir="rtl"] .header-section .header-block .shamodest-language-switcher {
    transform: translateX(26px) !important;
  }
}
@media screen and (max-width: 359px) {
  html[dir="rtl"] .header-section .header-block .shamodest-language-switcher {
    width: 30px !important;
    transform: translateX(24px) !important;
  }
  html[dir="rtl"] .header-section .shamodest-language-switcher select {
    width: 30px !important;
    max-width: 30px !important;
    font-size: 15px !important;
  }
}

/* Arabic collection pages: restore the missing right-side page gutter when
   RTL reverses the collection columns. Scope to collection body only. */
html[dir="rtl"] body.shamodest-collection-page .trending-section {
  box-sizing: border-box;
  padding-inline-start: clamp(18px, 2.083vw, 40px);
}
html[dir="rtl"] body.shamodest-collection-page .trending-text-block {
  box-sizing: border-box;
  min-width: 0;
  max-width: min(525px, 100%);
  align-items: flex-start;
  text-align: right;
}
html[dir="rtl"] body.shamodest-collection-page :is(.trending-title-block, .trending-except-block) {
  max-width: 100%;
  overflow: visible;
  text-align: right;
}
html[dir="rtl"] body.shamodest-collection-page :is(.trending-title, .trending-except) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
}

/* SHAMODEST — final Arabic collections spacing polish.
   Keep the collection intro on the right, but give it breathing room so the
   title/description never stick to the page edge on desktop or mobile. */
html[dir="rtl"] body.shamodest-collection-page .trending-section {
  box-sizing: border-box;
  padding-inline-start: clamp(18px, 2.083vw, 40px) !important;
}
html[dir="rtl"] body.shamodest-collection-page .trending-text-block {
  box-sizing: border-box;
  padding-inline-start: clamp(16px, 1.8vw, 28px) !important;
  align-items: flex-start !important;
  text-align: right !important;
}
html[dir="rtl"] body.shamodest-collection-page :is(.trending-title-block, .trending-except-block) {
  box-sizing: border-box;
  width: 100%;
  padding-inline-start: 0 !important;
  text-align: right !important;
}
html[dir="rtl"] body.shamodest-collection-page :is(.trending-title, .trending-except) {
  text-align: right !important;
  margin-inline-start: 0 !important;
}
@media screen and (max-width: 991px) {
  html[dir="rtl"] body.shamodest-collection-page .trending-section {
    padding-inline-start: 14px !important;
  }
  html[dir="rtl"] body.shamodest-collection-page .trending-text-block {
    padding-inline-start: 14px !important;
  }
}