/* =========================================================
THE OA | Clean Stable Custom CSS - V208 VIDEO TITLE

مكان الإضافة:
سلة > تصميم المتجر > تخصيص > Custom CSS / CSS مخصص

يعمل مع:
THE-OA-JavaScript-FULL-V204.txt

ملاحظات:
- تم حذف CSS القديم والمتعارض الخاص باتجاه اسم المنتج والسعر.
- تم حذف محاولات صفحة المنتج V164/V165/V166/V167 بالكامل.
- تم حذف نسخ الأيقونات البيضاء المكررة والإبقاء على القاعدة النهائية فقط.
- تم حذف CSS المكرر لدرع تغيير اللغة لأن JavaScript يطبقه مباشرة.
- لا يوجد في هذه النسخة حل جديد لإخفاء كلمة "متوفر".
========================================================= */

/* =========================================================
1) Product Comments / التعليقات
========================================================= */

/* إخفاء تاب Comments / التعليقات */
#lima-tabs-pp #lima-item_2,
#lima-tabs-pp .lima-tabs-head > li:nth-child(2) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/*
محتوى التاب الثاني:
التركيب الظاهر في Inspect هو:
#lima-tabs-pp > div > ul.lima-tabs-head
ثم بانل الوصف، ثم بانل Comments.
*/
#lima-tabs-pp > .w-full > .lima-tabs-head ~ div:nth-of-type(2),
#lima-tabs-pp > div > .lima-tabs-head ~ div:nth-of-type(2),
#lima-tabs-pp [role="tabpanel"]:nth-of-type(2),
#lima-tabs-pp [id*="content_2"],
#lima-tabs-pp [id*="content-2"],
#lima-tabs-pp [id*="panel_2"],
#lima-tabs-pp [id*="panel-2"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* يبقى تبويب الوصف ظاهرًا ومستقرًا */
#lima-tabs-pp #lima-item_1,
#lima-tabs-pp .lima-tabs-head > li:first-child {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* =========================================================
2) منع ظهور شريط صور المنتج القديم العريض على الموبايل

الـDOM الحقيقي:
salla-slider.details-slider[type="thumbs"]
[slot="thumbs"]
.slide--one-fourth

يتم الإخفاء من Custom CSS قبل أول رسم للصفحة، ولذلك لا يظهر
المستطيل القديم للحظة ثم يختفي.
========================================================= */

@media (max-width: 767px) {
  /*
    إخفاء مصدر المصغرات الأصلي وشريحة المصغرات العريضة
    قبل تهيئة salla-slider وقبل تشغيل JavaScript.
  */
  salla-slider.details-slider[type="thumbs"] > [slot="thumbs"],
  salla-slider[id^="details-slider-"][type="thumbs"] > [slot="thumbs"],
  salla-slider.details-slider[type="thumbs"] [slot="thumbs"],
  salla-slider[id^="details-slider-"][type="thumbs"] [slot="thumbs"],
  salla-slider.details-slider[type="thumbs"] .slide--one-fourth,
  salla-slider[id^="details-slider-"][type="thumbs"] .slide--one-fourth {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    flex: 0 0 0 !important;
    flex-basis: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;

    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }

  /*
    احتياط ضد المقاسات التي كان يضيفها موديول الهيرو قديمًا.
  */
  salla-slider.details-slider[type="thumbs"]
  .slide--one-fourth.theoa-hero-slide-v60,
  salla-slider[id^="details-slider-"][type="thumbs"]
  .slide--one-fourth.theoa-hero-slide-v60 {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    margin: 0 !important;
  }

  /*
    شريط المصغرات الجديد الذي ينشئه JavaScript يظل ظاهرًا.
  */
  .theoa-product-thumbs-strip-v122 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* =========================================================
3) Related Products Title — Full Width / No Truncation

يمنع ظهور:
Products you may ...

ويجعل عنوان المنتجات المقترحة كاملًا في صفحة المنتج
على الموبايل والكمبيوتر.
========================================================= */

/*
استهداف Product Sliders داخل صفحة المنتج من أول Paint،
قبل إضافة كلاس JavaScript.
*/
body.product-bar salla-products-slider .s-slider-block__title,
body.product-bar salla-products-slider .s-slider-block__title-nav,
body.product-bar salla-products-slider .s-slider-block__header,
body.product-bar salla-products-slider .s-products-slider-header,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-slider-block__title,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-slider-block__title-nav,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-slider-block__header,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-products-slider-header {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.product-bar salla-products-slider .s-slider-block__title h1,
body.product-bar salla-products-slider .s-slider-block__title h2,
body.product-bar salla-products-slider .s-slider-block__title h3,
body.product-bar salla-products-slider .s-slider-block__title h4,
body.product-bar salla-products-slider .s-slider-block__title-nav h1,
body.product-bar salla-products-slider .s-slider-block__title-nav h2,
body.product-bar salla-products-slider .s-slider-block__title-nav h3,
body.product-bar salla-products-slider .s-slider-block__title-nav h4,
body.product-bar salla-products-slider .s-slider-block__header h1,
body.product-bar salla-products-slider .s-slider-block__header h2,
body.product-bar salla-products-slider .s-slider-block__header h3,
body.product-bar salla-products-slider .s-slider-block__header h4,
body.product-bar salla-products-slider .s-products-slider-header h1,
body.product-bar salla-products-slider .s-products-slider-header h2,
body.product-bar salla-products-slider .s-products-slider-header h3,
body.product-bar salla-products-slider .s-products-slider-header h4,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-slider-block__title h1,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-slider-block__title h2,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-slider-block__title h3,
main:has(salla-slider.details-slider[type="thumbs"])
salla-products-slider .s-slider-block__title h4 {
  display: block !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;

  line-height: 1.25 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/*
بعد ما JavaScript يحدد سلايدر المنتجات المقترحة،
نطبّق تنسيقًا أدق عليه فقط.
*/
salla-products-slider.theoa-related-products-slider-v130
.theoa-related-products-heading-v130 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html[lang="ar"]
salla-products-slider.theoa-related-products-slider-v130
.theoa-related-products-heading-v130 {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="en"]
salla-products-slider.theoa-related-products-slider-v130
.theoa-related-products-heading-v130 {
  direction: ltr !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  body.product-bar salla-products-slider .s-slider-block__title,
  body.product-bar salla-products-slider .s-slider-block__title-nav,
  body.product-bar salla-products-slider .s-slider-block__header,
  body.product-bar salla-products-slider .s-products-slider-header,
  main:has(salla-slider.details-slider[type="thumbs"])
  salla-products-slider .s-slider-block__title,
  main:has(salla-slider.details-slider[type="thumbs"])
  salla-products-slider .s-slider-block__title-nav,
  main:has(salla-slider.details-slider[type="thumbs"])
  salla-products-slider .s-slider-block__header,
  main:has(salla-slider.details-slider[type="thumbs"])
  salla-products-slider .s-products-slider-header {
    padding-inline: 10px !important;
  }

  salla-products-slider.theoa-related-products-slider-v130
  .theoa-related-products-heading-v130 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.3 !important;
  }
}


/* =========================================================
5) Footer Logo — Hidden on Mobile Only (V142)

الـDOM الحقيقي المستهدف:
footer
> div.space-y-4.col-span-2.md:col-span-1.h-full
> a.inline-flex.items-center.m-0
> img[alt="The OA logo"]

- إخفاء عمود الشعار كاملًا يمنع ترك مساحة فارغة في Grid.
- القاعدة داخل Media Query للموبايل فقط.
- الديسكتوب لا يتأثر.
- Selector الصورة يعمل كـ fallback من أول Paint، بينما JavaScript
  يضيف Class للعمود عند الحاجة.
========================================================= */

@media (max-width: 767px) {
  /* الاستهداف المباشر للـDOM الحقيقي في المتصفحات الحديثة. */
  footer.store-footer
  .space-y-4.col-span-2.md\:col-span-1.h-full:has(
    > a.inline-flex.items-center.m-0 > img[alt="The OA logo" i]
  ),
  footer
  .space-y-4.col-span-2.md\:col-span-1.h-full:has(
    > a.inline-flex.items-center.m-0 > img[alt="The OA logo" i]
  ),
  footer.store-footer .theoa-mobile-footer-logo-column-v142,
  footer .theoa-mobile-footer-logo-column-v142 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* Fallback يمنع ظهور الصورة نفسها حتى قبل إضافة Class الجافا. */
  footer.store-footer img[alt="The OA logo" i],
  footer img.theoa-mobile-footer-logo-image-v142 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}
/* =========================================================
5) V143 — Mobile Header + Sidebar Utilities

الموبايل فقط:
- العربية: القائمة يمين، الشعار في المنتصف، السلة يسار.
- الإنجليزية: السلة يمين، الشعار في المنتصف، القائمة يسار.
- السلة تظهر كأيقونة فقط بدون السعر أو المبلغ.
- البحث والمفضلة والحساب يختفون من الهيدر من أول Paint.
- تظهر بدائلهم داخل السايد بار قبل صف اللغة والعملة.
========================================================= */

@media (max-width: 767px) {
  /* إخفاء عناصر الهيدر الثانوية من أول Paint، Scoped داخل هيدر المتجر فقط. */
  header.store-header #mainnav salla-search,
  header.store-header .main-nav-container salla-search,
  header.store-header #mainnav salla-user-menu,
  header.store-header .main-nav-container salla-user-menu,
  header.store-header #mainnav a[href*="/wishlist"],
  header.store-header .main-nav-container a[href*="/wishlist"],
  header.store-header #mainnav button:has(.sicon-search),
  header.store-header #mainnav a:has(.sicon-search),
  header.store-header .main-nav-container button:has(.sicon-search),
  header.store-header .main-nav-container a:has(.sicon-search),
  header.store-header #mainnav button:has(.sicon-user),
  header.store-header #mainnav a:has(.sicon-user),
  header.store-header .main-nav-container button:has(.sicon-user),
  header.store-header .main-nav-container a:has(.sicon-user),
  header.store-header .theoa-mobile-header-hidden-v143 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .theoa-mobile-header-host-v143 {
    position: relative !important;
    min-height: var(--theoa-mobile-header-min-height-v143, 64px) !important;
  }

  .theoa-mobile-header-shell-v143 {
    position: absolute !important;
    top: var(--theoa-mobile-header-top-v143, 0px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 80 !important;

    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    grid-template-rows: var(--theoa-mobile-header-height-v143, 64px) !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    height: var(--theoa-mobile-header-height-v143, 64px) !important;
    box-sizing: border-box !important;
    padding-inline: 12px !important;
    pointer-events: none !important;
    direction: ltr !important;
  }

  .theoa-mobile-header-shell-v143 > * {
    pointer-events: auto !important;
  }

  .theoa-mobile-menu-v143,
  .theoa-mobile-cart-v143 {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .theoa-mobile-logo-v143 {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;

    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: min(46vw, 170px) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .theoa-mobile-logo-v143 img,
  .theoa-mobile-logo-v143 picture,
  .theoa-mobile-logo-v143 picture img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 46px !important;
    margin: 0 auto !important;
  }

  /* Arabic: Cart left / Menu right */
  html[lang^="ar"] .theoa-mobile-menu-v143,
  html[dir="rtl"] .theoa-mobile-menu-v143 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  html[lang^="ar"] .theoa-mobile-cart-v143,
  html[dir="rtl"] .theoa-mobile-cart-v143 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  /* English: Menu left / Cart right */
  html[lang^="en"] .theoa-mobile-menu-v143,
  html[dir="ltr"] .theoa-mobile-menu-v143 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  html[lang^="en"] .theoa-mobile-cart-v143,
  html[dir="ltr"] .theoa-mobile-cart-v143 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  /* إخفاء مبلغ/سعر السلة مع الحفاظ على الأيقونة وBadge عدد المنتجات. */
  header.store-header salla-cart-summary salla-money,
  header.store-header salla-cart-summary [class*="amount" i],
  header.store-header salla-cart-summary [class*="total" i],
  header.store-header salla-cart-summary [class*="price" i],
  header.store-header salla-cart-summary [class*="label" i],
  .theoa-mobile-cart-v143 salla-money,
  .theoa-mobile-cart-v143 [class*="amount" i],
  .theoa-mobile-cart-v143 [class*="total" i],
  .theoa-mobile-cart-v143 [class*="price" i],
  .theoa-mobile-cart-v143 [class*="label" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .theoa-mobile-sidebar-utilities-v143 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    list-style: none !important;
  }

  .theoa-mobile-sidebar-action-v143 {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 22px !important;

    border: 0 !important;
    border-top: 1px solid #eeeeee !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: none !important;

    font: inherit !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    text-align: start !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .theoa-mobile-sidebar-action-v143:last-child {
    border-bottom: 1px solid #eeeeee !important;
  }

  .theoa-mobile-sidebar-action-v143:hover,
  .theoa-mobile-sidebar-action-v143:focus-visible,
  .theoa-mobile-sidebar-action-v143:active {
    background: #f8f7f6 !important;
    color: #111111 !important;
    outline: none !important;
  }

  .theoa-mobile-sidebar-action-v143 svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
    fill: none !important;
    stroke: #947465 !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html[lang^="ar"] .theoa-mobile-sidebar-action-v143,
  html[dir="rtl"] .theoa-mobile-sidebar-action-v143 {
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang^="en"] .theoa-mobile-sidebar-action-v143,
  html[dir="ltr"] .theoa-mobile-sidebar-action-v143 {
    direction: ltr !important;
    text-align: left !important;
  }
}

/* =========================================================
6) V148 — Native Mobile Sidebar Actions

الموبايل فقط:
- البحث والمفضلة وتسجيل الدخول/حسابي قبل اللغة والعملة.
- نفس الشكل البسيط للغة والعملة: أيقونة + كلمة.
- إخفاء النسخ القديمة V143–V147.
- إبقاء مكوّن البحث والحساب الأصليين قابلين للتشغيل خارج الشاشة.
- تشغيل النوافذ بعد إغلاق السايد بار حتى لا يغطيها.
========================================================= */

@media (max-width: 767px) {
  .theoa-mobile-sidebar-utilities-v143,
  .theoa-mobile-sidebar-utilities-v144,
  .theoa-mobile-sidebar-utilities-v145,
  .theoa-mobile-sidebar-utilities-v146,
  .theoa-mobile-sidebar-utilities-v147 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .theoa-mobile-sidebar-utilities-v148 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 22px 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    list-style: none !important;
  }

  .theoa-mobile-sidebar-action-v148 {
    appearance: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-appearance: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #947465 !important;
    box-shadow: none !important;

    font: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-align: start !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: opacity 0.14s ease !important;
  }

  .theoa-mobile-sidebar-action-v148:hover,
  .theoa-mobile-sidebar-action-v148:focus-visible,
  .theoa-mobile-sidebar-action-v148:active,
  .theoa-mobile-sidebar-action-v148[aria-busy="true"] {
    border: 0 !important;
    background: transparent !important;
    color: #947465 !important;
    opacity: 0.68 !important;
    outline: none !important;
  }

  .theoa-mobile-sidebar-action-v148 svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .theoa-mobile-sidebar-action-v148 > span {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
  }

  html[lang^="ar"] .theoa-mobile-sidebar-utilities-v148,
  html[dir="rtl"] .theoa-mobile-sidebar-utilities-v148,
  html[lang^="ar"] .theoa-mobile-sidebar-action-v148,
  html[dir="rtl"] .theoa-mobile-sidebar-action-v148 {
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang^="en"] .theoa-mobile-sidebar-utilities-v148,
  html[dir="ltr"] .theoa-mobile-sidebar-utilities-v148,
  html[lang^="en"] .theoa-mobile-sidebar-action-v148,
  html[dir="ltr"] .theoa-mobile-sidebar-action-v148 {
    direction: ltr !important;
    text-align: left !important;
  }

  /*
    مكوّنات سلة الأصلية تظل خارج الشاشة وقابلة للترقية والتشغيل.
    لا يتم عرضها داخل الهيدر ولا تؤثر على مقاساته.
  */
  header.store-header #mainnav .theoa-native-runtime-v148,
  header.store-header .main-nav-container .theoa-native-runtime-v148,
  #mainnav .theoa-native-runtime-v148,
  .main-nav-container .theoa-native-runtime-v148 {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -10000px !important;
    right: auto !important;
    bottom: auto !important;

    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
6) V153 — Compact Mobile Footer / Original Theme Icons

- Uses the original footer icon element from the theme once only.
- Only two separators: top and legal.
- Reduced vertical spaces.
- Payment logos are individual deduplicated assets.
- Mobile only.
========================================================= */

@media (max-width: 767px) {
  html:not(.theoa-mobile-footer-ready-v152):not(.theoa-mobile-footer-fallback-v152)
  footer.store-footer,
  html:not(.theoa-mobile-footer-ready-v152):not(.theoa-mobile-footer-fallback-v152)
  footer:not(.store-footer) {
    visibility: hidden !important;
  }

  footer.store-footer.theoa-mobile-footer-ready-v152,
  footer.theoa-mobile-footer-ready-v152 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  footer.store-footer.theoa-mobile-footer-ready-v152
  > *:not(.theoa-mobile-footer-v152),
  footer.theoa-mobile-footer-ready-v152
  > *:not(.theoa-mobile-footer-v152) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .theoa-mobile-footer-v152,
  .theoa-mobile-footer-v152 * {
    box-sizing: border-box !important;
  }

  .theoa-mobile-footer-v152 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px 24px 18px !important;
    background: #ffffff !important;
    color: #a4897b !important;
    text-align: center !important;
    font-family: inherit !important;
  }

  .theoa-mobile-footer-section-v152 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 440px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .theoa-mobile-footer-divider-v152 {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #eee9e6 !important;
  }

  .theoa-mobile-footer-divider-top-v152 {
    margin-bottom: 18px !important;
  }

  .theoa-mobile-footer-heading-v152 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #92705f !important;
    font: inherit !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .theoa-mobile-footer-links-v152 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1px !important;
    width: 100% !important;
    margin-top: 5px !important;
  }

  .theoa-mobile-footer-link-v152 {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #ab9488 !important;
    font: inherit !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    transition: opacity 0.16s ease !important;
  }

  a.theoa-mobile-footer-link-v152:hover,
  a.theoa-mobile-footer-link-v152:focus-visible,
  a.theoa-mobile-footer-link-v152:active {
    color: #92705f !important;
    opacity: 0.72 !important;
    outline: none !important;
  }

  .theoa-mobile-footer-contact-section-v152 {
    margin-top: 27px !important;
  }

  .theoa-mobile-footer-contact-list-v152 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 9px !important;
  }

  .theoa-mobile-footer-contact-v152 {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #a68b7d !important;
    box-shadow: none !important;
    font: inherit !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: opacity 0.16s ease !important;
  }

  a.theoa-mobile-footer-contact-v152:hover,
  a.theoa-mobile-footer-contact-v152:focus-visible,
  a.theoa-mobile-footer-contact-v152:active {
    color: #92705f !important;
    opacity: 0.75 !important;
    outline: none !important;
  }

  .theoa-mobile-footer-icon-v152,
  .theoa-mobile-footer-social-v152 {
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #9b7765 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    line-height: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  .theoa-mobile-footer-icon-v152::before,
  .theoa-mobile-footer-icon-v152::after,
  .theoa-mobile-footer-social-v152::before,
  .theoa-mobile-footer-social-v152::after {
    content: none !important;
    display: none !important;
  }

  /*
    الأيقونة نفسها مأخوذة من DOM الفوتر الأصلي.
    نحافظ على حجمها وسمكها الأصليين؛ التغيير الوحيد هو اللون الأبيض
    مع تثبيتها هندسيًا في مركز الدائرة.
  */
  .theoa-mobile-footer-native-icon-v152 {
    display: grid !important;
    place-items: center !important;
    position: static !important;
    width: var(--theoa-native-icon-width-v152, 21px) !important;
    min-width: var(--theoa-native-icon-width-v152, 21px) !important;
    max-width: 30px !important;
    height: var(--theoa-native-icon-height-v152, 21px) !important;
    min-height: var(--theoa-native-icon-height-v152, 21px) !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    font-size: var(--theoa-native-icon-font-size-v152, 21px) !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    visibility: visible !important;
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    overflow: visible !important;
  }

  .theoa-mobile-footer-native-icon-v152::before,
  .theoa-mobile-footer-native-icon-v152::after {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
    text-align: center !important;
    position: static !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
  }

  .theoa-mobile-footer-native-icon-v152 *,
  .theoa-mobile-footer-native-icon-v152 *::before,
  .theoa-mobile-footer-native-icon-v152 *::after {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .theoa-mobile-footer-native-icon-v152 svg,
  svg.theoa-mobile-footer-native-icon-v152 {
    display: block !important;
    width: var(--theoa-native-icon-width-v152, 21px) !important;
    max-width: 30px !important;
    height: var(--theoa-native-icon-height-v152, 21px) !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  .theoa-mobile-footer-contact-value-v152 {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #a88f82 !important;
    font: inherit !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
  }

  .theoa-mobile-footer-contact-whatsapp-v152
  .theoa-mobile-footer-contact-value-v152,
  .theoa-mobile-footer-contact-email-v152
  .theoa-mobile-footer-contact-value-v152 {
    direction: ltr !important;
    unicode-bidi: isolate !important;
  }

  .theoa-mobile-footer-social-section-v152 {
    margin-top: 20px !important;
    padding-bottom: 38px !important;
  }

  .theoa-mobile-footer-social-row-v152 {
    direction: ltr !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 40px !important;
  }

  .theoa-mobile-footer-social-v152 {
    cursor: pointer !important;
    transition: opacity 0.16s ease, transform 0.16s ease !important;
  }

  .theoa-mobile-footer-social-v152:hover,
  .theoa-mobile-footer-social-v152:focus-visible,
  .theoa-mobile-footer-social-v152:active {
    color: #ffffff !important;
    opacity: 0.78 !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  .theoa-mobile-footer-legal-v152 {
    padding-bottom: 0 !important;
  }

  .theoa-mobile-footer-divider-legal-v152 {
    margin-bottom: 18px !important;
  }

  .theoa-mobile-footer-rights-v152 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #d0cdca !important;
    font: inherit !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    text-align: center !important;
  }

  .theoa-mobile-footer-payments-v152 {
    direction: ltr !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 24px !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .theoa-mobile-footer-payments-empty-v152 {
    display: none !important;
  }

  .theoa-mobile-footer-payments-v152 > img,
  .theoa-mobile-footer-payments-v152 > svg {
    display: block !important;
    width: auto !important;
    max-width: 47px !important;
    height: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  html[lang^="ar"] .theoa-mobile-footer-v152,
  html[dir="rtl"] .theoa-mobile-footer-v152 {
    direction: rtl !important;
  }

  html[lang^="en"] .theoa-mobile-footer-v152,
  html[dir="ltr"] .theoa-mobile-footer-v152 {
    direction: ltr !important;
  }
}

@media (max-width: 380px) {
  .theoa-mobile-footer-v152 {
    padding-inline: 18px !important;
  }

  .theoa-mobile-footer-heading-v152 {
    font-size: 19px !important;
  }

  .theoa-mobile-footer-link-v152,
  .theoa-mobile-footer-contact-value-v152 {
    font-size: 15px !important;
  }

  .theoa-mobile-footer-social-section-v152 {
    padding-bottom: 32px !important;
  }

  .theoa-mobile-footer-payments-v152 {
    gap: 9px !important;
  }

  .theoa-mobile-footer-payments-v152 > img,
  .theoa-mobile-footer-payments-v152 > svg {
    max-width: 42px !important;
    height: 19px !important;
    max-height: 19px !important;
  }
}

/* =========================================================
   Mobile Footer Native Icons — Final White Render
   - Fixes the actual V152 circle selectors used by the footer DOM.
   - Keeps the site's original icon glyph, size, and stroke weight.
   - Applies a color-only rendering filter to the icon element itself.
   ========================================================= */
@media (max-width: 767px) {
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-icon-v152
  > .theoa-mobile-footer-native-icon-v152,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-social-v152
  > .theoa-mobile-footer-native-icon-v152 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: brightness(0) saturate(100%) invert(100%) !important;
    opacity: 1 !important;
  }

  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-icon-v152
  > .theoa-mobile-footer-native-icon-v152::before,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-icon-v152
  > .theoa-mobile-footer-native-icon-v152::after,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-social-v152
  > .theoa-mobile-footer-native-icon-v152::before,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-social-v152
  > .theoa-mobile-footer-native-icon-v152::after {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
  }

  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-icon-v152
  > .theoa-mobile-footer-native-icon-v152 svg,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-social-v152
  > .theoa-mobile-footer-native-icon-v152 svg,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-icon-v152
  > svg.theoa-mobile-footer-native-icon-v152,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-social-v152
  > svg.theoa-mobile-footer-native-icon-v152 {
    color: #ffffff !important;
    filter: none !important;
  }

  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-icon-v152
  > .theoa-mobile-footer-native-icon-v152 svg *,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-social-v152
  > .theoa-mobile-footer-native-icon-v152 svg *,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-icon-v152
  > svg.theoa-mobile-footer-native-icon-v152 *,
  html body footer .theoa-mobile-footer-v152
  .theoa-mobile-footer-social-v152
  > svg.theoa-mobile-footer-native-icon-v152 * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* =========================================================
   Mobile Home Product Slider — Final Layout

   الموبايل + الصفحة الرئيسية فقط:
   - لا توجد Classes اتجاه ديناميكية.
   - لا يوجد Grid أو Position أو Margin سالب للنص.
   - اسم المنتج في منتصف عرض الصورة.
   - السعر في سطر مستقل تحته وفي المنتصف.
   - مسافة صغيرة وثابتة بين الصورة والاسم.
   - نفس التركيب في العربية والإنجليزية.
   ========================================================= */
@media (max-width: 767px) {
  html.theoa-home-page
  salla-products-slider .s-product-card-entry,
  html.theoa-home-page
  salla-products-slider .s-product-card,
  html.theoa-home-page
  salla-products-slider custom-salla-product-card,
  html.theoa-home-page
  salla-products-slider salla-product-card,
  html.theoa-home-page
  salla-products-slider .product-card,
  html.theoa-home-page
  salla-products-slider .product-entry {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html.theoa-home-page
  salla-products-slider .s-product-card-image,
  html.theoa-home-page
  salla-products-slider .s-product-card-image-contain,
  html.theoa-home-page
  salla-products-slider .product-card__image,
  html.theoa-home-page
  salla-products-slider .product-entry__image,
  html.theoa-home-page
  salla-products-slider .card-image {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.theoa-home-page
  salla-products-slider .s-product-card-content,
  html.theoa-home-page
  salla-products-slider .product-card-content,
  html.theoa-home-page
  salla-products-slider .product-entry-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    margin: 0 !important;
    padding: 4px 4px 6px !important;

    gap: 0 !important;
    row-gap: 0 !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;

    direction: inherit !important;
    text-align: center !important;
    background: transparent !important;
  }

  html.theoa-home-page
  salla-products-slider .s-product-card-content-main,
  html.theoa-home-page
  salla-products-slider .product-card-content-main,
  html.theoa-home-page
  salla-products-slider .product-entry-content-main,
  html.theoa-home-page
  salla-products-slider [class*="content-main"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    position: static !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
    row-gap: 0 !important;

    direction: inherit !important;
    text-align: center !important;
  }

  html.theoa-home-page
  salla-products-slider .s-product-card-content-title,
  html.theoa-home-page
  salla-products-slider .s-product-card-content-title a,
  html.theoa-home-page
  salla-products-slider .product-card-title,
  html.theoa-home-page
  salla-products-slider .product-card-title a,
  html.theoa-home-page
  salla-products-slider .product-entry-title,
  html.theoa-home-page
  salla-products-slider .product-entry-title a,
  html.theoa-home-page
  salla-products-slider h3,
  html.theoa-home-page
  salla-products-slider h3 a {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: center !important;
    justify-self: center !important;

    direction: inherit !important;
    unicode-bidi: plaintext !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html.theoa-home-page
  salla-products-slider .s-product-card-content-sub,
  html.theoa-home-page
  salla-products-slider .product-card-content-sub,
  html.theoa-home-page
  salla-products-slider .product-entry-content-sub,
  html.theoa-home-page
  salla-products-slider [class*="content-sub"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;

    margin: 2px auto 0 !important;
    padding: 0 !important;

    align-self: center !important;
    justify-self: center !important;

    direction: ltr !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.theoa-home-page
  salla-products-slider .s-product-card-price,
  html.theoa-home-page
  salla-products-slider .s-product-card-sale-price,
  html.theoa-home-page
  salla-products-slider .s-product-card-regular-price,
  html.theoa-home-page
  salla-products-slider .product-card-price,
  html.theoa-home-page
  salla-products-slider .product-entry-price,
  html.theoa-home-page
  salla-products-slider salla-money {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    align-self: center !important;
    justify-self: center !important;

    direction: ltr !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html.theoa-home-page
  salla-products-slider .s-product-card-content-sub *,
  html.theoa-home-page
  salla-products-slider [class*="content-sub"] *,
  html.theoa-home-page
  salla-products-slider .s-product-card-price *,
  html.theoa-home-page
  salla-products-slider .s-product-card-sale-price *,
  html.theoa-home-page
  salla-products-slider .s-product-card-regular-price *,
  html.theoa-home-page
  salla-products-slider .product-card-price *,
  html.theoa-home-page
  salla-products-slider .product-entry-price *,
  html.theoa-home-page
  salla-products-slider salla-money * {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;

    position: static !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
    text-align: center !important;
  }
}

/* =========================================================
   English Mobile Home Product Slider — Final Layout

   مهم:
   - مبني فوق V158 الذي ضبط النسخة العربية.
   - الإنجليزي على الموبايل فقط.
   - لا توجد أي قاعدة هنا تعمل على الكمبيوتر.
   - يعتمد على Classes V38/V98 الموجودة أصلًا في الكود.
   ========================================================= */
@media (max-width: 767px) {
  html[lang^="en"].theoa-home-page body
  salla-products-slider .s-product-card-content,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .product-card-content,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .product-entry-content,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .s-product-card-content,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .product-card-content,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .product-entry-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 4px 3px 6px !important;

    gap: 0 !important;
    row-gap: 0 !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;

    direction: ltr !important;
    text-align: center !important;
  }

  html[lang^="en"].theoa-home-page body
  salla-products-slider .s-product-card-content-main,
  html[lang^="en"].theoa-home-page body
  salla-products-slider [class*="content-main"],
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .s-product-card-content-main,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider [class*="content-main"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    order: 1 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
    text-align: center !important;
  }

  html[lang^="en"].theoa-home-page body
  salla-products-slider .theoa-home-title-v38,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .theoa-home-title-v38 *,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .s-product-card-content-title,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .s-product-card-content-title *,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .theoa-home-title-v38,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .theoa-home-title-v38 *,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .s-product-card-content-title,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .s-product-card-content-title * {
    display: block !important;

    order: 1 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: center !important;
    justify-self: center !important;

    direction: ltr !important;
    unicode-bidi: plaintext !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html[lang^="en"].theoa-home-page body
  salla-products-slider .theoa-home-price-row-v98,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .s-product-card-content-sub,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .theoa-home-price-row-v98,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .s-product-card-content-sub {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    order: 2 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;

    margin: 2px auto 0 !important;
    padding: 0 !important;

    align-self: center !important;
    justify-self: center !important;

    direction: ltr !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html[lang^="en"].theoa-home-page body
  salla-products-slider .theoa-home-price-row-v98 *,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .theoa-home-price-v38,
  html[lang^="en"].theoa-home-page body
  salla-products-slider .theoa-home-price-v38 *,
  html[lang^="en"].theoa-home-page body
  salla-products-slider salla-money,
  html[lang^="en"].theoa-home-page body
  salla-products-slider salla-money *,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .theoa-home-price-row-v98 *,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .theoa-home-price-v38,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider .theoa-home-price-v38 *,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider salla-money,
  html[dir="ltr"].theoa-home-page body
  salla-products-slider salla-money * {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;

    position: static !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: center !important;
    justify-self: center !important;
    justify-content: center !important;

    direction: ltr !important;
    text-align: center !important;
  }
}

/* =========================================================
   Mobile Category Product Names — Full Text

   الموبايل + صفحات الأقسام/الكوليكشنز فقط:
   - إلغاء truncate و line-clamp.
   - منع ظهور (...) بعد جزء من اسم المنتج.
   - السماح للاسم بالالتفاف لعدد السطور الطبيعي.
   - لا يؤثر على الهوم أو الديسكتوب.
   - يعمل بالعربي والإنجليزي.
   ========================================================= */
@media (max-width: 767px) {
  html.theoa-inner-page body
  salla-products-list .s-product-card-content-main,
  html.theoa-inner-page body
  salla-products-list .product-card-content-main,
  html.theoa-inner-page body
  salla-products-list .product-entry-content-main,
  html.theoa-inner-page body
  salla-products-list [class*="content-main"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    white-space: normal !important;
    text-overflow: clip !important;

    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  html.theoa-inner-page body
  salla-products-list .s-product-card-content-title,
  html.theoa-inner-page body
  salla-products-list .s-product-card-content-title *,
  html.theoa-inner-page body
  salla-products-list .product-card-title,
  html.theoa-inner-page body
  salla-products-list .product-card-title *,
  html.theoa-inner-page body
  salla-products-list .product-entry-title,
  html.theoa-inner-page body
  salla-products-list .product-entry-title *,
  html.theoa-inner-page body
  salla-products-list .s-product-card-entry h3,
  html.theoa-inner-page body
  salla-products-list .s-product-card-entry h3 *,
  html.theoa-inner-page body
  salla-products-list .s-product-card h3,
  html.theoa-inner-page body
  salla-products-list .s-product-card h3 *,
  html.theoa-inner-page body
  salla-products-list custom-salla-product-card h3,
  html.theoa-inner-page body
  salla-products-list custom-salla-product-card h3 *,
  html.theoa-inner-page body
  salla-products-list salla-product-card h3,
  html.theoa-inner-page body
  salla-products-list salla-product-card h3 * {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    text-overflow: clip !important;

    white-space: normal !important;

    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;

    text-align: center !important;
  }

  /*
    بعض نسخ كارت سلة تضيف القص إلى رابط المنتج نفسه
    بدل عنصر العنوان؛ لذلك يتم إلغاؤه داخل منطقة النص فقط.
  */
  html.theoa-inner-page body
  salla-products-list .s-product-card-content-main
  a[href*="/products/"],
  html.theoa-inner-page body
  salla-products-list .s-product-card-content-main
  a[href*="/product/"],
  html.theoa-inner-page body
  salla-products-list [class*="content-main"]
  a[href*="/products/"],
  html.theoa-inner-page body
  salla-products-list [class*="content-main"]
  a[href*="/product/"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
    text-overflow: clip !important;

    white-space: normal !important;

    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;

    text-align: center !important;
  }
}

/* =========================================================
Product Page — Hide Availability Badge + Center Price

DOM confirmed from the product-page source:
.main-content.part-two
  > h1
  + div.flex.whitespace-nowrap...
    > div.hidden...
    > div.gap-4.flex
    > div > span.rounded-full

Applies to mobile and desktop product pages.
========================================================= */
body.product-single
.main-content.part-two
> h1
+ div.flex.whitespace-nowrap
> div:last-child {
  display: none !important;
}

body.product-single
.main-content.part-two
> h1
+ div.flex.whitespace-nowrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin-inline: auto !important;
  padding: 0 !important;

  gap: 0 !important;
  column-gap: 0 !important;

  direction: ltr !important;
  text-align: center !important;
}

body.product-single
.main-content.part-two
> h1
+ div.flex.whitespace-nowrap
> div.gap-4.flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;

  flex: 0 0 auto !important;

  margin: 0 auto !important;
  padding: 0 !important;

  gap: 0 !important;
  column-gap: 0 !important;

  direction: ltr !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body.product-single
.main-content.part-two
> h1
+ div.flex.whitespace-nowrap
> div.gap-4.flex
> h2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  direction: ltr !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* =========================================================
Mobile Product Page — Inline Purchase Form

Confirmed DOM order inside form.product-form:
1) Product options
2) Price section
3) section.sticky-product-bar

The theme fixes the third section to the viewport.
On mobile only, restore it to normal document flow so the
quantity selector and Add to Cart button appear below price.

Arabic + English.
========================================================= */
@media (max-width: 767px) {
  body.product-single.is-sticky-product-bar {
    padding-bottom: 0 !important;
  }

  body.product-single
  form.product-form
  > section.sticky-product-bar {
    display: block !important;

    position: static !important;
    position: relative !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 1.25rem 1.25rem !important;

    border-radius: 0 0 0.375rem 0.375rem !important;

    background: #ffffff !important;
    box-shadow: none !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    overflow: visible !important;
  }

  body.product-single
  form.product-form
  > section.sticky-product-bar
  .sticky-product-bar__quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 1.25rem !important;
  }

  body.product-single
  form.product-form
  > section.sticky-product-bar
  salla-quantity-input {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.product-single
  form.product-form
  > section.sticky-product-bar
  salla-add-product-button.sticky-product-bar__btn {
    display: block !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
    Remove any space reserved by the theme for the former
    fixed purchase bar, without affecting desktop.
  */
  body.product-single.is-sticky-product-bar
  form.product-form {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================================
Mobile Product Page — Remove Empty Short Description Area

Confirmed DOM:
.main-content.part-two
  > .product__description
    > article#more-content
    > a[href="#lima-tabs-pp"]

On mobile only:
- removes the empty reserved description space
- removes Read more / قراءة المزيد
- keeps the full product-description tab below untouched
- Arabic + English
========================================================= */
@media (max-width: 767px) {
  body.product-single
  .main-content.part-two
  > .product__description {
    display: none !important;
  }

  /*
    Defensive cleanup in case the theme injects spacing on the
    surrounding product-info column.
  */
  body.product-single
  .main-content.part-two {
    padding-bottom: 0 !important;
  }
}

/* =========================================================
Desktop Product Page — Three-Column Purchase Experience

Desktop only (>= 1024px):
- Product media column.
- Product information/options column.
- Price/quantity/Add to Cart column.
- Arabic layout mirrors English logically.
- Mobile and tablet layouts remain unchanged.
========================================================= */
@media (min-width: 1024px) {
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 1rem !important;
    direction: ltr !important;
  }

  /* Arabic: media right, information center, purchase left. */
  html[dir="rtl"]
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-one {
    grid-column: 3 !important;
  }

  html[dir="rtl"]
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-three {
    grid-column: 1 / span 2 !important;
  }

  /* English: media left, information center, purchase right. */
  html[dir="ltr"]
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-one {
    grid-column: 1 !important;
  }

  html[dir="ltr"]
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-three {
    grid-column: 2 / span 2 !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-one,
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-three {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    align-self: stretch !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-one {
    position: sticky !important;
    top: 6rem !important;

    padding: 1rem !important;

    border: 1px solid rgba(148, 116, 101, 0.14) !important;
    border-radius: 1rem !important;

    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;

    overflow: hidden !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-three {
    position: static !important;

    padding: 0 !important;

    overflow: visible !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .part-three
  > form.product-form.theoa-desktop-product-form-v175 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 1rem !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  html[dir="rtl"]
  body.product-single.theoa-desktop-product-layout-v175
  form.product-form.theoa-desktop-product-form-v175 {
    grid-template-areas: "buy info" !important;
  }

  html[dir="ltr"]
  body.product-single.theoa-desktop-product-layout-v175
  form.product-form.theoa-desktop-product-form-v175 {
    grid-template-areas: "info buy" !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175,
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175 {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 100% !important;

    padding: 1.75rem !important;

    border: 1px solid rgba(148, 116, 101, 0.14) !important;
    border-radius: 1rem !important;

    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;

    overflow: visible !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175 {
    grid-area: info !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175 {
    grid-area: buy !important;
  }

  /* Product title and primary price. */
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  > .main-content.part-two {
    position: static !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  > .main-content.part-two
  > h1 {
    margin: 0 0 0.25rem !important;
    text-align: center !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  > .main-content.part-two
  > .product__description {
    display: none !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  > .main-content.part-two
  > div:has(salla-count-down) {
    display: none !important;
  }

  /* Share row and optional model row. */
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-share-v175 {
    width: 100% !important;

    margin: 1.75rem 0 1.25rem !important;
    padding: 0 !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-model-v175 {
    width: 100% !important;

    margin: 0 0 1.5rem !important;
    padding: 0.5rem 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
  }

  /* Product options and attachments stay inside the real form. */
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  > salla-product-options {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-extra-option-v175 {
    width: 100% !important;

    margin: 1.25rem 0 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
  }

  /* Purchase panel: price, quantity and CTA. */
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  > section.theoa-desktop-form-price-v175 {
    display: flex !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 0 1.5rem !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  > section.theoa-desktop-form-price-v175
  > .center-between {
    width: 100% !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  > section.sticky-product-bar {
    display: block !important;

    position: static !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    overflow: visible !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  .sticky-product-bar__quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 1.25rem !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  salla-quantity-input {
    min-width: 10.5rem !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  salla-add-product-button.sticky-product-bar__btn {
    display: block !important;

    position: static !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  > salla-installment,
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175
  > salla-quick-order {
    display: block !important;

    width: 100% !important;

    margin: 1rem 0 0 !important;
  }

  /* Hide empty hooks in the desktop grid. */
  body.product-single.theoa-desktop-product-layout-v175
  form.product-form.theoa-desktop-product-form-v175
  > salla-hook {
    display: none !important;
  }
}

/* =========================================================
V176 — Desktop Product Columns Start at the Same Top Edge

V175 assigned columns but did not explicitly assign the grid row,
so the information/purchase area could fall into a second row.
This keeps the image, information and purchase panels aligned
from the top of the product section.

Desktop only.
========================================================= */
@media (min-width: 1024px) {
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-one,
  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-three {
    grid-row: 1 !important;
    align-self: start !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .three-parts-container
  > .part-three {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .part-three
  > form.product-form.theoa-desktop-product-form-v175 {
    align-self: start !important;
    margin-top: 0 !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175,
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-buy-panel-v175 {
    align-self: start !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
V177 — Product Page: Square Corners

Applies to Arabic + English product pages on all viewport sizes.

- Radius = 0 for cards, panels, inputs, dropdowns, media frames,
  tabs, quantity controls and purchase buttons.
- Circular icon controls and rounded status badges remain circular.
- Product page only.
========================================================= */
body.product-single {
  --btn-border-radius: 0px !important;
  --border-radius-on-pc: 0px !important;
  --border-radius-btns-in-pc: 0px !important;
  --theoa-product-radius-v177: 0px;
}

/* Main product-page rectangular surfaces. */
body.product-single
.three-parts-container,
body.product-single
.three-parts-container
> .part-one,
body.product-single
.three-parts-container
> .part-two,
body.product-single
.three-parts-container
> .part-three,
body.product-single
.theoa-desktop-info-panel-v175,
body.product-single
.theoa-desktop-buy-panel-v175,
body.product-single
.details-slider,
body.product-single
.details-slider .swiper,
body.product-single
.details-slider .swiper-wrapper,
body.product-single
.details-slider .swiper-slide,
body.product-single
.details-slider img,
body.product-single
form.product-form,
body.product-single
form.product-form
> section,
body.product-single
form.product-form
.form-input,
body.product-single
form.product-form
textarea,
body.product-single
form.product-form
input,
body.product-single
form.product-form
select,
body.product-single
form.product-form
.btn-tab,
body.product-single
form.product-form
.collapse-content,
body.product-single
form.product-form
.price-wrapper,
body.product-single
form.product-form
.sticky-product-bar,
body.product-single
form.product-form
.sticky-product-bar__quantity,
body.product-single
salla-product-options,
body.product-single
salla-quantity-input,
body.product-single
salla-add-product-button,
body.product-single
salla-quick-order,
body.product-single
salla-installment,
body.product-single
.lima-tabs-container,
body.product-single
.lima-tabs-container
.lima-tabs-head,
body.product-single
.lima-tabs-container
.lima-tab-item,
body.product-single
.lima-tabs-container
[id^="lima-content_"],
body.product-single
salla-products-slider
.s-product-card-entry,
body.product-single
salla-products-slider
.s-product-card,
body.product-single
salla-products-slider
.s-product-card-image,
body.product-single
salla-products-slider
.s-product-card-image-contain {
  border-radius: 0 !important;
}

/*
  Neutralize theme utility radius classes inside the product page,
  while preserving explicitly circular controls and badges.
*/
body.product-single
:where([class*="rounded"])
:not(.rounded-full)
:not([class*="rounded-full"])
:not([shape="icon"])
:not(.salla-social-share)
:not(.btn--wishlist) {
  border-radius: 0 !important;
}

/* Common custom-element radius variables inherited by open components. */
body.product-single
salla-product-options,
body.product-single
salla-quantity-input,
body.product-single
salla-add-product-button,
body.product-single
salla-quick-order,
body.product-single
salla-installment {
  --btn-border-radius: 0px !important;
  --border-radius: 0px !important;
  --border-radius-on-pc: 0px !important;
  --border-radius-btns-in-pc: 0px !important;
}

/* Preserve genuinely circular interface elements. */
body.product-single
.rounded-full,
body.product-single
[class*="rounded-full"],
body.product-single
salla-social-share,
body.product-single
.btn--wishlist,
body.product-single
[shape="icon"] {
  border-radius: 9999px !important;
}

/* =========================================================
V178 — Thmanyah Light Typography Refinement

The active Thmanyah file is a static Light face (weight 300).
Theme utilities such as font-bold/font-semibold can otherwise
create artificial browser bolding.

This module:
- disables synthetic bold/italic rendering
- keeps major headings genuinely light
- preserves readable hierarchy through size and spacing
- keeps buttons, labels and prices clear without heavy weight
- applies to Arabic and English
========================================================= */

html,
body {
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
  font-synthesis-style: none !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Main titles — use the real Light face, never synthetic bold. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body h1 *,
body h2 *,
body h3 *,
body h4 *,
body h5 *,
body h6 * {
  font-weight: 300 !important;
  font-synthesis: none !important;
}

/* Common Salla/theme title components. */
body .s-block__title,
body .section-title,
body .title,
body .page-title,
body .product-title,
body .s-product-card-content-title,
body .s-product-card-content-title a,
body .main-content.part-two > h1,
body .lima-tab-item h3,
body .store-footer h2,
body .breadcrumbs,
body .breadcrumbs * {
  font-weight: 300 !important;
  font-synthesis: none !important;
}

/*
  Neutralize heavy utility classes only when they are used
  inside headings/titles. This avoids flattening normal UI emphasis.
*/
body :is(h1, h2, h3, h4, h5, h6)
:is(.font-bold, .font-semibold, .font-medium),
body :is(h1, h2, h3, h4, h5, h6)
:is(.font-bold, .font-semibold, .font-medium) * {
  font-weight: 300 !important;
}

/* Product-card names remain elegant and readable. */
body .s-product-card-content-title,
body .s-product-card-content-title * {
  font-weight: 300 !important;
  line-height: 1.45 !important;
}

/* Labels and controls: clear, but not visually heavy. */
body button,
body input,
body select,
body textarea,
body .form-label,
body .form-label *,
body .btn,
body [class*="btn-"],
body salla-button,
body salla-add-product-button {
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* Prices need slightly stronger hierarchy without bold 700. */
body .price-wrapper,
body .price-wrapper *,
body .total-price,
body .before-price,
body .s-product-card-price,
body .s-product-card-price * {
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* Arabic: no tracking, to preserve connected letterforms. */
html[dir="rtl"] body h1,
html[dir="rtl"] body h2,
html[dir="rtl"] body h3,
html[dir="rtl"] body h4,
html[dir="rtl"] body h5,
html[dir="rtl"] body h6,
html[dir="rtl"] body .s-block__title,
html[dir="rtl"] body .s-product-card-content-title {
  letter-spacing: normal !important;
}

/* English Serif titles benefit from very subtle spacing. */
html[dir="ltr"] body h1,
html[dir="ltr"] body h2,
html[dir="ltr"] body h3,
html[dir="ltr"] body h4,
html[dir="ltr"] body h5,
html[dir="ltr"] body h6,
html[dir="ltr"] body .s-block__title,
html[dir="ltr"] body .s-product-card-content-title {
  letter-spacing: 0.015em !important;
}

/* =========================================================
V179 — Consistent Section Spacing / Vertical Rhythm

Fixed spacing between top-level website sections:
- Mobile: 40px
- Tablet: 56px
- Desktop: 72px

Rules:
- No added gap directly below the header.
- No added gap below the footer.
- Empty Salla hook/wrapper placeholders do not create blank space.
- Nested product-form sections and internal card spacing are untouched.
- Arabic + English.
========================================================= */

:root {
  --theoa-section-gap-v179: 40px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --theoa-section-gap-v179: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --theoa-section-gap-v179: 72px;
  }
}

/*
  Remove the theme's space-y utility from direct main children.
  V179 then supplies one predictable spacing value instead.
*/
main#main-content
> :not([hidden])
~ :not([hidden]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
  Empty placeholders are common in Salla templates.
  Hiding only empty top-level placeholders prevents double gaps.
*/
main#main-content
> .s-blocks-wrapper:not(:has(> *)),
main#main-content
> .videos-in-pp:not(:has(> *)) {
  display: none !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  overflow: hidden !important;
}

/*
  A section receives spacing only when another real top-level section
  appeared before it. Therefore the first visible block stays flush
  with the beginning of main and no artificial gap appears under header.
*/
main#main-content
> :not(salla-hook):not(script):not(style):not(template):not(link):not([hidden]):not(.s-blocks-wrapper:not(:has(> *))):not(.videos-in-pp:not(:has(> *)))
~ :not(salla-hook):not(script):not(style):not(template):not(link):not([hidden]):not(.s-blocks-wrapper:not(:has(> *))):not(.videos-in-pp:not(:has(> *))) {
  margin-top: var(--theoa-section-gap-v179) !important;
  margin-bottom: 0 !important;
}

/*
  Some home-page builders place several actual blocks inside one
  top-level Salla wrapper. Apply the same rhythm only to its direct
  section children, never to nested card/form internals.
*/
main#main-content
> .s-blocks-wrapper:has(> *)
> :where(
    section,
    .s-block,
    salla-slider,
    salla-products-slider,
    salla-products-list,
    salla-custom-component
  )
+ :where(
    section,
    .s-block,
    salla-slider,
    salla-products-slider,
    salla-products-list,
    salla-custom-component
  ) {
  margin-top: var(--theoa-section-gap-v179) !important;
  margin-bottom: 0 !important;
}

/* Header boundary: absolutely no V179 spacing below it. */
header.store-header {
  margin-bottom: 0 !important;
}

header.store-header
+ main#main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/*
  Footer boundary:
  no bottom margin and no generated space after the footer.
  Existing internal footer padding remains untouched.
*/
footer.store-footer {
  margin-bottom: 0 !important;
}

footer.store-footer
~ :where(.theoa-section-spacer, .section-spacer) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
  Safety: V179 controls only top-level page sections.
  Product purchase rows, option groups and cards keep their own
  intentionally designed internal spacing.
*/
body.product-single
form.product-form
> section,
body.product-single
.theoa-desktop-info-panel-v175,
body.product-single
.theoa-desktop-buy-panel-v175,
body.product-single
.lima-tabs-container {
  --theoa-section-gap-v179: initial;
}

/* =========================================================
V180 — Desktop Product Option Icon/Text Spacing

Desktop only:
- adds a real gap between the attachment icon and its text
- aligns option text away from the dropdown icon
- Arabic + English
- mobile/tablet remain unchanged
========================================================= */
@media (min-width: 1024px) {
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  .theoa-desktop-extra-option-v175
  .btn-tab.btn--collapse {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 0.75rem !important;

    min-height: 3rem !important;
    padding-inline: 1rem !important;

    white-space: nowrap !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  .theoa-desktop-extra-option-v175
  .btn-tab.btn--collapse
  > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    line-height: 1 !important;
  }

  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  .theoa-desktop-extra-option-v175
  .btn-tab.btn--collapse
  > .fix-align {
    display: inline-block !important;

    margin: 0 !important;

    line-height: 1.45 !important;
  }

  /*
    Light-DOM fallback for product-option implementations that expose
    their native select element outside the component shadow root.
  */
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  salla-product-options
  select.s-form-control {
    box-sizing: border-box !important;

    width: 100% !important;

    padding-inline-start: 1rem !important;
    padding-inline-end: 3.25rem !important;

    text-align: start !important;
  }

  html[dir="rtl"]
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  salla-product-options
  select.s-form-control {
    direction: rtl !important;
  }

  html[dir="ltr"]
  body.product-single.theoa-desktop-product-layout-v175
  .theoa-desktop-info-panel-v175
  salla-product-options
  select.s-form-control {
    direction: ltr !important;
  }
}

/* =========================================================
V181 — Mobile Localization UX

- Globe icon beside Language & Currency.
- The icon follows Arabic/English direction automatically.
- Login modal is temporarily suppressed only after a real locale
  navigation, preventing ghost-tap login sheets after refresh.
- Mobile only.
========================================================= */
@media (max-width: 767px) {
  .theoa-mobile-locale-button-v101 {
    gap: 0.75rem !important;
  }

  .theoa-mobile-locale-button-v101
  > .theoa-mobile-locale-icon-v181 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 21px !important;

    width: 21px !important;
    height: 21px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #947465 !important;

    visibility: visible !important;
    opacity: 1 !important;
  }

  .theoa-mobile-locale-button-v101
  > .theoa-mobile-locale-icon-v181
  > svg {
    display: block !important;

    width: 21px !important;
    height: 21px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    visibility: visible !important;
    opacity: 1 !important;
  }

  .theoa-mobile-locale-button-v101
  > .theoa-mobile-locale-label-v181 {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.45 !important;
    white-space: nowrap !important;
  }

  html.theoa-locale-login-guard-v181
  salla-login-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
V185 — English Mobile Language Drawer Fix

Built from V181 (the confirmed working Arabic baseline).

English only:
- keeps native mmenu close control clickable
- keeps mmenu blocker available as a safe close fallback
- does not alter Arabic sidebar behavior
========================================================= */
@media (max-width: 767px) {
  html[dir="ltr"]
  :is(
    .mm-btn--close,
    .mm-navbar__btn.mm-btn--close,
    .mm-wrapper__blocker,
    .mm-blocker
  ) {
    pointer-events: auto !important;
  }
}

/* =========================================================
V191 — Featured Categories Beige Pill

Exact target:
the beige background behind
"تصنيفات مميزة" / "Featured Categories".

- radius 0 on mobile, tablet and desktop
- does not affect the outer frame
- does not affect the main image
- does not affect circular category thumbnails
========================================================= */
.theoa-featured-beige-pill-v191,
.theoa-featured-beige-pill-layer-v191 {
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  .theoa-featured-header-v191 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    margin: 0 0 16px !important;
    padding: 0 !important;

    gap: 0 !important;

    direction: inherit !important;
    text-align: center !important;
  }
}

/* =========================================================
V197 — THE OA Newsletter Editorial Design

Reference direction:
- clean editorial block
- background #eeebea
- title and button stroke #947465
- supporting copy #6c6d70
- square corners
- outline button becomes solid on hover
- one-column editorial layout
- Arabic / English responsive
========================================================= */

.theoa-mobile-newsletter-v193,
.theoa-mobile-newsletter-v193 * {
  box-sizing: border-box !important;
}

.theoa-mobile-newsletter-v193 {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #eeebea !important;
  color: #6c6d70 !important;

  font-family: inherit !important;
}

.theoa-mobile-newsletter__inner-v193 {
  display: block !important;

  width: 100% !important;
  max-width: 1120px !important;

  margin: 0 auto !important;
  padding: 58px 72px 62px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.theoa-mobile-newsletter__copy-v193 {
  display: block !important;

  width: 100% !important;
  max-width: 780px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.theoa-mobile-newsletter__eyebrow-v193 {
  display: none !important;
}

.theoa-mobile-newsletter__title-v193 {
  margin: 0 !important;
  padding: 0 !important;

  color: #947465 !important;

  font: inherit !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;

  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

.theoa-mobile-newsletter__description-v193 {
  width: 100% !important;
  max-width: 760px !important;

  margin: 16px 0 0 !important;
  padding: 0 !important;

  color: #6c6d70 !important;

  font: inherit !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;

  text-wrap: pretty !important;
}

.theoa-mobile-newsletter__details-v195 {
  display: inline-block !important;

  width: auto !important;

  margin: 10px 0 0 !important;
  padding: 0 0 3px !important;

  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;

  background: transparent !important;
  color: #6c6d70 !important;

  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 300 !important;

  text-decoration: none !important;
}

.theoa-mobile-newsletter__form-v193 {
  display: block !important;

  width: 100% !important;
  max-width: 850px !important;

  margin: 30px 0 0 !important;
  padding: 0 !important;
}

.theoa-mobile-newsletter__form-row-v193 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 162px !important;
  align-items: stretch !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 12px !important;
}

.theoa-mobile-newsletter__phone-control-v193 {
  direction: ltr !important;

  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  align-items: stretch !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid #c8c1be !important;
  border-radius: 0 !important;

  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.theoa-mobile-newsletter__country-v193,
.theoa-mobile-newsletter__phone-v193 {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  min-height: 54px !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background-color: transparent !important;
  color: #4d4c4d !important;

  font: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 300 !important;

  box-shadow: none !important;
}

.theoa-mobile-newsletter__country-v193 {
  padding: 0 34px 0 16px !important;

  border-inline-end: 1px solid #d7d1ce !important;

  background-image:
    linear-gradient(45deg, transparent 50%, #947465 50%),
    linear-gradient(135deg, #947465 50%, transparent 50%) !important;
  background-position:
    calc(100% - 19px) 25px,
    calc(100% - 14px) 25px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;

  cursor: pointer !important;
}

.theoa-mobile-newsletter__phone-v193 {
  direction: ltr !important;

  padding: 0 18px !important;

  text-align: left !important;
  letter-spacing: 0.015em !important;
}

.theoa-mobile-newsletter__phone-v193::placeholder {
  color: #8f8d8e !important;
  opacity: 1 !important;
}

.theoa-mobile-newsletter__phone-control-v193:focus-within {
  border-color: #947465 !important;
  box-shadow: 0 0 0 1px #947465 !important;
}

.theoa-mobile-newsletter__submit-v193 {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 24px !important;

  gap: 0 !important;

  border: 1px solid #947465 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  color: #947465 !important;

  font: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 400 !important;

  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow: none !important;
  cursor: pointer !important;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease !important;
}

.theoa-mobile-newsletter__submit-v193:hover,
.theoa-mobile-newsletter__submit-v193:focus-visible,
.theoa-mobile-newsletter__submit-v193:active {
  border-color: #947465 !important;

  background: #947465 !important;
  color: #ffffff !important;

  box-shadow: none !important;
}

.theoa-mobile-newsletter__submit-v193:disabled,
.theoa-mobile-newsletter__submit-v193[aria-busy="true"] {
  opacity: 0.58 !important;
  cursor: wait !important;
}

.theoa-mobile-newsletter__arrow-v193 {
  display: none !important;
}

.theoa-mobile-newsletter__consent-v193 {
  display: flex !important;
  align-items: flex-start !important;

  width: 100% !important;
  max-width: 760px !important;

  margin: 14px 0 0 !important;
  padding: 0 !important;

  gap: 9px !important;

  color: #6c6d70 !important;

  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;

  cursor: pointer !important;
}

.theoa-mobile-newsletter__consent-input-v193 {
  appearance: none !important;
  -webkit-appearance: none !important;

  flex: 0 0 16px !important;

  width: 16px !important;
  height: 16px !important;

  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 1px solid #947465 !important;
  border-radius: 0 !important;

  background: #ffffff !important;

  cursor: pointer !important;
}

.theoa-mobile-newsletter__consent-input-v193:checked {
  background:
    linear-gradient(
      135deg,
      transparent 42%,
      #ffffff 42% 50%,
      transparent 50%
    ),
    linear-gradient(
      45deg,
      transparent 45%,
      #ffffff 45% 54%,
      transparent 54%
    ),
    #947465 !important;
}

.theoa-mobile-newsletter__consent-input-v193:focus-visible {
  outline: 2px solid rgba(148, 116, 101, 0.24) !important;
  outline-offset: 2px !important;
}

.theoa-mobile-newsletter__status-v193 {
  min-height: 21px !important;

  margin: 10px 0 0 !important;
  padding: 0 !important;

  color: #6c6d70 !important;

  font: inherit !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
}

.theoa-mobile-newsletter__status-v193[data-state="success"] {
  color: #52705a !important;
}

.theoa-mobile-newsletter__status-v193[data-state="error"] {
  color: #9b433c !important;
}

.theoa-mobile-newsletter__honeypot-v193,
.theoa-mobile-newsletter__frame-v193,
.theoa-mobile-newsletter__sr-only-v193 {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  border: 0 !important;

  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
}

.theoa-newsletter-i18n-en-v193 {
  display: none !important;
}

html[lang^="en"]
.theoa-newsletter-i18n-ar-v193,
html[dir="ltr"]
.theoa-newsletter-i18n-ar-v193 {
  display: none !important;
}

html[lang^="en"]
.theoa-newsletter-i18n-en-v193,
html[dir="ltr"]
.theoa-newsletter-i18n-en-v193 {
  display: inline !important;
}

html[lang^="ar"]
.theoa-mobile-newsletter-v193,
html[dir="rtl"]
.theoa-mobile-newsletter-v193 {
  direction: rtl !important;
  text-align: right !important;
}

html[lang^="en"]
.theoa-mobile-newsletter-v193,
html[dir="ltr"]
.theoa-mobile-newsletter-v193 {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="rtl"]
.theoa-mobile-newsletter__copy-v193,
html[dir="rtl"]
.theoa-mobile-newsletter__form-v193 {
  margin-right: 0 !important;
  margin-left: auto !important;
}

html[dir="ltr"]
.theoa-mobile-newsletter__copy-v193,
html[dir="ltr"]
.theoa-mobile-newsletter__form-v193 {
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .theoa-mobile-newsletter__inner-v193 {
    padding: 48px 40px 52px !important;
  }
}

@media (max-width: 767px) {
  .theoa-mobile-newsletter__inner-v193 {
    padding: 34px 18px 38px !important;
  }

  .theoa-mobile-newsletter__title-v193 {
    font-size: clamp(28px, 8.2vw, 36px) !important;
    line-height: 1.25 !important;
  }

  .theoa-mobile-newsletter__description-v193 {
    margin-top: 12px !important;

    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .theoa-mobile-newsletter__details-v195 {
    margin-top: 8px !important;

    font-size: 13px !important;
  }

  .theoa-mobile-newsletter__form-v193 {
    margin-top: 24px !important;
  }

  .theoa-mobile-newsletter__form-row-v193 {
    grid-template-columns: 1fr !important;

    gap: 10px !important;
  }

  .theoa-mobile-newsletter__phone-control-v193 {
    grid-template-columns: 100px minmax(0, 1fr) !important;
  }

  .theoa-mobile-newsletter__country-v193 {
    padding-inline-start: 12px !important;

    font-size: 13px !important;
  }

  .theoa-mobile-newsletter__phone-v193 {
    padding-inline: 14px !important;

    font-size: 15px !important;
  }

  .theoa-mobile-newsletter__submit-v193 {
    width: 100% !important;
    min-width: 0 !important;
  }

  .theoa-mobile-newsletter__consent-v193 {
    margin-top: 12px !important;

    font-size: 11px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 380px) {
  .theoa-mobile-newsletter__inner-v193 {
    padding-inline: 14px !important;
  }

  .theoa-mobile-newsletter__phone-control-v193 {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }
}

/* =========================================================
V197 — Final Newsletter Alignment + Featured Star Removal

Desktop newsletter:
- centered copy and form
- centered title and subtitle
- consent stays readable inside the centered form

Mobile newsletter:
- keeps its existing placement and direction

Featured Categories:
- removes only the decorative star/icon
- keeps the beige title background and title text
========================================================= */

/* "What will I receive?" is removed from V197 HTML.
   This fallback also hides it if an older cached HTML block appears. */
.theoa-mobile-newsletter__details-v195 {
  display: none !important;
}

@media (min-width: 768px) {
  .theoa-mobile-newsletter__copy-v193,
  .theoa-mobile-newsletter__form-v193 {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .theoa-mobile-newsletter__copy-v193 {
    max-width: 850px !important;
    text-align: center !important;
  }

  .theoa-mobile-newsletter__title-v193,
  .theoa-mobile-newsletter__description-v193 {
    text-align: center !important;
  }

  .theoa-mobile-newsletter__description-v193 {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .theoa-mobile-newsletter__form-v193 {
    max-width: 850px !important;
  }

  .theoa-mobile-newsletter__consent-v193 {
    max-width: 850px !important;
    text-align: start !important;
  }

  .theoa-mobile-newsletter__status-v193 {
    text-align: center !important;
  }
}

/* Remove pseudo-element stars from the exact featured title pill. */
.theoa-featured-beige-pill-v191::before,
.theoa-featured-beige-pill-v191::after,
.theoa-featured-beige-pill-layer-v191::before,
.theoa-featured-beige-pill-layer-v191::after {
  display: none !important;
  content: none !important;
}

/* Remove only elements identified by the V197 star cleanup. */
.theoa-featured-star-v197-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  pointer-events: none !important;
  overflow: hidden !important;
}

/* =========================================================
V198 — Newsletter True Desktop Centering

Fixes the old RTL/LTR margin rules that were visually shifting
the newsletter content to one side.

Desktop only:
- equal left and right spacing
- copy and form share the same centered width
- consent and status remain inside that centered block
- mobile layout remains unchanged
========================================================= */
@media (min-width: 768px) {
  html[dir="rtl"]
  .theoa-mobile-newsletter__copy-v193,
  html[dir="rtl"]
  .theoa-mobile-newsletter__form-v193,
  html[dir="ltr"]
  .theoa-mobile-newsletter__copy-v193,
  html[dir="ltr"]
  .theoa-mobile-newsletter__form-v193,
  html[lang^="ar"]
  .theoa-mobile-newsletter__copy-v193,
  html[lang^="ar"]
  .theoa-mobile-newsletter__form-v193,
  html[lang^="en"]
  .theoa-mobile-newsletter__copy-v193,
  html[lang^="en"]
  .theoa-mobile-newsletter__form-v193 {
    width: 100% !important;
    max-width: 850px !important;

    margin-right: auto !important;
    margin-left: auto !important;
  }

  html[dir="rtl"]
  .theoa-mobile-newsletter__inner-v193,
  html[dir="ltr"]
  .theoa-mobile-newsletter__inner-v193 {
    padding-right: 72px !important;
    padding-left: 72px !important;
  }

  .theoa-mobile-newsletter__consent-v193,
  .theoa-mobile-newsletter__status-v193 {
    width: 100% !important;
    max-width: 850px !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  html[dir="rtl"]
  .theoa-mobile-newsletter__inner-v193,
  html[dir="ltr"]
  .theoa-mobile-newsletter__inner-v193 {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
}

/* =========================================================
V200 — Product Quantity Selector Removal

Product page only, all viewports and both languages.

The native quantity component stays in the form with its
default value of 1, but its visible row is removed. This keeps
Salla's native add-to-cart submission intact and lets customers
adjust quantities later from the cart.

No JavaScript and no DOM movement.
========================================================= */

/* Normal product-form structure: mobile, tablet and fallback desktop. */
body.product-single
form.product-form
> section.sticky-product-bar
> .sticky-product-bar__quantity {
  display: none !important;
  visibility: hidden !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* V175 custom desktop purchase panel. */
body.product-single.theoa-desktop-product-layout-v175
.theoa-desktop-buy-panel-v175
> section.sticky-product-bar
> .sticky-product-bar__quantity {
  display: none !important;
  visibility: hidden !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Remove the spacing previously reserved above the CTA. */
body.product-single
form.product-form
> section.sticky-product-bar
> salla-add-product-button.sticky-product-bar__btn,
body.product-single.theoa-desktop-product-layout-v175
.theoa-desktop-buy-panel-v175
> section.sticky-product-bar
> salla-add-product-button.sticky-product-bar__btn {
  margin-top: 0 !important;
}

/* =========================================================
V204 — Manual Divider HTML Section

No automatic dividers and no divider JavaScript.

Add THE-OA-Manual-Divider-Section-V204.html manually between
the required Salla sections.

Each divider instance controls:
- spacing above the line
- spacing below the line
- line width
- line color
- mobile and desktop values independently
========================================================= */

.theoa-manual-divider-v204,
.theoa-manual-divider-v204 * {
  box-sizing: border-box !important;
}

.theoa-manual-divider-v204 {
  --theoa-divider-top-v204:
    var(--theoa-divider-top-mobile-v204, 20px);

  --theoa-divider-bottom-v204:
    var(--theoa-divider-bottom-mobile-v204, 20px);

  --theoa-divider-side-v204:
    var(--theoa-divider-side-mobile-v204, 28px);

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding-top:
    var(--theoa-divider-top-v204) !important;

  padding-right:
    var(--theoa-divider-side-v204) !important;

  padding-bottom:
    var(--theoa-divider-bottom-v204) !important;

  padding-left:
    var(--theoa-divider-side-v204) !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    var(--theoa-divider-background-v204, #ffffff) !important;

  box-shadow: none !important;
  overflow: visible !important;
}

.theoa-manual-divider__line-v204 {
  display: block !important;

  width:
    var(--theoa-divider-width-v204, 100%) !important;

  max-width:
    var(--theoa-divider-max-width-v204, 1400px) !important;

  height: 0 !important;
  min-height: 0 !important;

  margin: 0 auto !important;
  padding: 0 !important;

  border: 0 !important;

  border-top:
    var(--theoa-divider-thickness-v204, 1px)
    solid
    var(
      --theoa-divider-color-v204,
      rgba(148, 116, 101, 0.22)
    ) !important;

  background: transparent !important;

  opacity: 1 !important;
  pointer-events: none !important;
}

/*
  When the manual divider is inserted as its own HTML section,
  remove the automatic V179 margin from its Salla wrapper.
*/
main#main-content
> :has(.theoa-manual-divider-v204),
main#main-content
> .s-blocks-wrapper
> :has(.theoa-manual-divider-v204) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*
  The following real section must not receive another automatic
  top gap. The divider's own bottom spacing controls that distance.
*/
main#main-content
> :has(.theoa-manual-divider-v204)
+ :not(salla-hook):not(script):not(style):not(template):not(link),
main#main-content
> .s-blocks-wrapper
> :has(.theoa-manual-divider-v204)
+ :not(salla-hook):not(script):not(style):not(template):not(link) {
  margin-top: 0 !important;
}

/*
  Common Salla case: the HTML content root is wrapped inside a
  dedicated block wrapper. Only divider-only wrappers are reset.
*/
main#main-content
> .s-blocks-wrapper:has(
  .theoa-manual-divider-v204
) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

main#main-content
> .s-blocks-wrapper:has(
  .theoa-manual-divider-v204
)
+ :not(salla-hook):not(script):not(style):not(template):not(link) {
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  .theoa-manual-divider-v204 {
    --theoa-divider-top-v204:
      var(--theoa-divider-top-desktop-v204, 28px);

    --theoa-divider-bottom-v204:
      var(--theoa-divider-bottom-desktop-v204, 28px);

    --theoa-divider-side-v204:
      var(--theoa-divider-side-desktop-v204, 48px);
  }
}

/*
  Optional spacing-only version:
  add the class "theoa-manual-divider-v204--no-line".
*/
.theoa-manual-divider-v204--no-line
.theoa-manual-divider__line-v204 {
  visibility: hidden !important;
}

/* =========================================================
V207 — Exact Video Shop Price Color

Grounded in the actual page DOM:
section.s-block--videos-shop
  .video-product-item
    .text-red-500

Changes only the injected video-product price from red to:
#414042

No JavaScript change is required.
========================================================= */

section.s-block--videos-shop
.video-product-item
.text-red-500,

section.s-block--videos-shop
.video-product-item
.text-red-500 * {
  color: #414042 !important;
  -webkit-text-fill-color: #414042 !important;
}

/*
  Extra exact fallback for the generated price row,
  while remaining fully scoped to the video section.
*/
section.s-block--videos-shop
.video-product-item
.flex.items-center.gap-2
> span.font-bold,

section.s-block--videos-shop
.video-product-item
.flex.items-center.gap-2
> div
> span.font-bold:first-child,

section.s-block--videos-shop
.video-product-item
.flex.items-center.gap-2
> span.font-bold
*,

section.s-block--videos-shop
.video-product-item
.flex.items-center.gap-2
> div
> span.font-bold:first-child
* {
  color: #414042 !important;
  -webkit-text-fill-color: #414042 !important;
}

/* =========================================================
V208 — Video Section Main Title on One Mobile Line

Targets the main title inside:
section.s-block--videos-shop

Mobile only:
- Arabic and English
- one line
- responsive font size
- subtitle remains unchanged
- desktop remains unchanged
========================================================= */

@media (max-width: 767px) {
  section.s-block--videos-shop
  .s-slider-block__title,

  section.s-block--videos-shop
  .s-slider-block__title-left,

  section.s-block--videos-shop
  .s-slider-block__title-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  section.s-block--videos-shop
  .s-slider-block__title
  :is(
    h1,
    h2,
    h3,
    .s-slider-block__title-text,
    [slot="title"]
  ) {
    display: block !important;

    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    overflow: visible !important;
    text-overflow: clip !important;
  }
}