/* =========================================================
   عطارة المهات
   إزالة الفراغات الخارجية بين أقسام الصفحة الرئيسية
========================================================= */


/* 1) إزالة أي فراغ أسفل الهيدر */
body.index .store-header,
body.index #mainnav {
  margin-bottom: 0 !important;
}


/* 2) العنصر الموجود بين الهيدر والبنر */
body.index
.app-inner
> salla-hook[name="index:start"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* 3) البنر الرئيسي */
body.index
.app-inner
> salla-hook[name="index:start"]
+ .store_cat {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* حاوية صورة البنر */
body.index
.app-inner
> salla-hook[name="index:start"]
+ .store_cat
.bannner_div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* منع الفراغ الصغير الذي قد ينتج من img inline */
body.index
.app-inner
> salla-hook[name="index:start"]
+ .store_cat
.bannner_div img {
  display: block !important;
  margin: 0 !important;
}


/* =========================================================
   4) إزالة المسافات بين الأقسام الرئيسية
========================================================= */

/* عناصر سلة */
body.index .app-inner > section.s-block {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* أقسام الثيم من نوع store_cat */
body.index
.app-inner
> salla-hook[name="index:start"]
~ .store_cat {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   5) إزالة أي margin بين قسم والقسم الذي بعده
========================================================= */

body.index .app-inner > .store_cat + section.s-block,
body.index .app-inner > section.s-block + section.s-block,
body.index .app-inner > section.s-block + .store_cat,
body.index .app-inner > .store_cat + .store_cat {
  margin-top: 0 !important;
}


/* =========================================================
   6) شريط الثقة
========================================================= */

body.index
.app-inner
> section.s-block--bundle-trust-bar {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   7) تسوق حسب احتياجك
========================================================= */

body.index
.app-inner
> section.s-block--bundle-shop-by-need {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   8) منع فراغات ناتجة عن العناصر المخصصة نفسها
========================================================= */

body.index
.app-inner
> section.s-block
> salla-trust-bar-9mqc10,

body.index
.app-inner
> section.s-block
> salla-shop-by-need-n5e0dl {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   9) أي قسم رئيسي جديد تتم إضافته لاحقاً
========================================================= */

body.index
.app-inner
> salla-hook[name="index:start"]
~ section,

body.index
.app-inner
> salla-hook[name="index:start"]
~ .store_cat {
  margin-block: 0 !important;
}

/* ==========================================
   إخفاء قائمة الأقسام العلوية على الكمبيوتر فقط
========================================== */

@media (min-width: 1024px) {

  #mainnav,
  .main-nav-container {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

}

/* =========================================================
   عطارة المهات
   هيدر + فوتر مدمج وناعم للجوال
========================================================= */

@media (max-width: 767px) {

  /* ألوان الهوية */
  :root {
    --mahat-green: #005d37;
    --mahat-green-soft: #eef4ef;
    --mahat-green-border: #dbe7de;
    --mahat-ivory: #fffdf0;
    --mahat-card: #fffdf8;
    --mahat-gold: #c9a45c;
    --mahat-text: #34463e;
  }


  /* =======================================================
     الهيدر
  ======================================================= */

  .store-header {
    background: var(--mahat-card) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.045) !important;
  }

  .store-header .top-navbar {
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--mahat-card) !important;
    border-bottom: 1px solid rgba(0,93,55,.07) !important;
  }

  .store-header .top-navbar > .container {
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 10px !important;
  }

  .store-header .top_cont_sec {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .store-header .logo_serch,
  .store-header .flex_top {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* إخفاء مربع البحث الكبير والبريد */
  .store-header .serch_sec,
  .store-header .s-contacts-header {
    display: none !important;
  }


  /* =======================================================
     الشعار
  ======================================================= */

  .store-header .navbar-brand {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

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

    width: 96px !important;
    height: 50px !important;

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

    z-index: 3 !important;
  }

  .store-header .navbar-brand img {
    width: 100% !important;
    height: 100% !important;
    max-width: 96px !important;
    max-height: 50px !important;
    object-fit: contain !important;
  }


  /* =======================================================
     تصميم أزرار الهيدر
  ======================================================= */

  .store-header .mburger,
  .store-header .left_btn_search,
  .store-header .header-btn.btn_style,
  .store-header .cart_style .s-cart-summary-wrapper {

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

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

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

    border-radius: 11px !important;

    background: var(--mahat-green-soft) !important;

    border:
      1px solid
      var(--mahat-green-border) !important;

    color: var(--mahat-green) !important;

    box-shadow:
      0 2px 7px
      rgba(0,93,55,.06) !important;
  }


  /* القائمة - أقصى اليمين */
  .store-header .logo_serch > a.mburger {
    position: absolute !important;
    top: 50% !important;
    right: 9px !important;

    transform: translateY(-50%) !important;

    z-index: 5 !important;
  }


  /* البحث */
  .store-header .left_btn_search {
    position: absolute !important;
    top: 50% !important;
    right: 51px !important;

    transform: translateY(-50%) !important;

    z-index: 5 !important;
  }


  /* السلة - أقصى اليسار */
  .store-header .cart_style {
    position: absolute !important;
    top: 50% !important;
    left: 9px !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;

    z-index: 5 !important;
  }


  /* الحساب */
  .store-header .header-btn.btn_style {
    position: absolute !important;
    top: 50% !important;
    left: 51px !important;

    transform: translateY(-50%) !important;

    z-index: 5 !important;
  }


  /* لون الأيقونات */
  .store-header .mburger i,
  .store-header .left_btn_search span,
  .store-header .header-btn__icon,
  .store-header .cart_style i {
    color: var(--mahat-green) !important;
    font-size: 19px !important;
  }

  .store-header .cart_style svg,
  .store-header .cart_style svg path {
    fill: var(--mahat-green) !important;
  }

  .store-header .cart_style svg {
    width: 20px !important;
    height: 20px !important;
  }


  /* إخفاء سعر السلة */
  .store-header .s-cart-summary-content {
    display: none !important;
  }


  /* عداد السلة - ذهبي ناعم */
  .store-header .s-cart-summary-count {
    position: absolute !important;

    top: -5px !important;
    right: -5px !important;

    min-width: 17px !important;
    height: 17px !important;

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

    padding: 0 4px !important;

    border-radius: 20px !important;

    background: var(--mahat-gold) !important;
    color: #ffffff !important;

    border: 2px solid var(--mahat-card) !important;

    font-size: 9px !important;
    font-weight: 700 !important;
  }


  /* إخفاء شريط القائمة القديم */
  .store-header #mainnav {
    display: none !important;
  }
/* =========================================================
   عطارة المهات
   FOOTER MOBILE - تصميم نظيف ونهائي
   مهم: استخدم هذا الكود وحده للفوتر
========================================================= */

@media (max-width: 767px) {

  /* =====================================================
     الفوتر العام
  ===================================================== */

  .ps-footer {
    margin: 0 !important;
    padding: 0 !important;

    background: #fffdf0 !important;

    color: #46564f !important;
  }


  /* =====================================================
     زر الرجوع للأعلى
  ===================================================== */

  .ps-footer .back-to-top {
    position: relative !important;

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

    transform: none !important;

    display: flex !important;

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

    gap: 7px !important;

    width: fit-content !important;
    height: 38px !important;

    margin: 10px auto 12px !important;
    padding: 0 16px !important;

    background: #fffdf8 !important;

    color: #005d37 !important;

    border: 1px solid rgba(201,164,92,.45) !important;
    border-radius: 22px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
  }

  .ps-footer .back-to-top i {
    font-size: 15px !important;
    color: #005d37 !important;
  }


  /* =====================================================
     المنطقة الرئيسية
  ===================================================== */

  .ps-footer__middle {
    margin: 0 !important;

    padding: 20px 18px !important;

    background: #fffdf0 !important;

    border-top: 1px solid rgba(201,164,92,.20) !important;
    border-radius: 0 !important;
  }

  .ps-footer__middle .container-fluid {
    width: 100% !important;

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


  /* =====================================================
     شبكة الفوتر
  ===================================================== */

  .ps-footer .grid-footer {
    display: block !important;

    width: 100% !important;

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

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
  }


  /* =====================================================
     كل قسم
  ===================================================== */

  .ps-footer .col-footer {
    width: 100% !important;

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

    background: transparent !important;

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

    box-shadow: none !important;

    text-align: center !important;
  }

  .ps-footer .col-footer:first-child {
    padding-top: 4px !important;
  }

  .ps-footer .col-footer + .col-footer {
    border-top: 1px solid rgba(201,164,92,.18) !important;
  }


  /* =====================================================
     الشعار
  ===================================================== */

  .ps-footer .logo-footer {
    display: block !important;

    width: 105px !important;
    height: auto !important;

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

  .ps-footer .logo-footer img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;
  }


  /* =====================================================
     وصف المتجر
  ===================================================== */

  .ps-footer .store-description {
    width: 100% !important;
    max-width: 360px !important;

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

    text-align: center !important;
  }

  .ps-footer .store-description p {
    display: block !important;

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

    color: #64736b !important;

    font-size: 14px !important;
    line-height: 1.85 !important;

    text-align: center !important;

    overflow: visible !important;
  }


  /* =====================================================
     السوشيال
  ===================================================== */

  .ps-footer .flex-social-payment,
  .ps-footer salla-social {
    display: block !important;

    width: 100% !important;

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

  .ps-footer .s-social-list {
    display: flex !important;

    flex-direction: row !important;

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

    gap: 9px !important;

    width: 100% !important;

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

  .ps-footer .s-social-link a {
    display: flex !important;

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

    width: 38px !important;
    height: 38px !important;

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

    background: #eef5f0 !important;

    color: #005d37 !important;

    border: 1px solid #d7e6dc !important;
    border-radius: 11px !important;

    box-shadow: none !important;
  }

  .ps-footer .s-social-link svg,
  .ps-footer .s-social-link svg path {
    width: 19px !important;
    height: 19px !important;

    fill: #005d37 !important;
  }


  /* =====================================================
     عناوين الفوتر
  ===================================================== */

  .ps-footer .ps-block__title,
  .ps-footer .s-contacts-title {
    display: block !important;

    width: 100% !important;

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

    color: #005d37 !important;

    font-size: 19px !important;
    line-height: 1.5 !important;

    font-weight: 800 !important;

    text-align: center !important;
  }


  /* =====================================================
     روابط مهمة
  ===================================================== */

  .ps-footer .ps-footer--block,
  .ps-footer .ps-footer--block salla-menu,
  .ps-footer .ps-footer--block salla-menu > div {
    display: block !important;

    width: 100% !important;

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

  .ps-footer .s-menu-footer-list {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 16px !important;
    row-gap: 4px !important;

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

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

    direction: rtl !important;
  }

  .ps-footer .s-menu-footer-item {
    display: flex !important;

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

    width: 100% !important;
    min-height: 40px !important;

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

    color: #526159 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;

    font-weight: 400 !important;

    text-align: center !important;

    white-space: normal !important;

    border: 0 !important;

    text-decoration: none !important;
  }

  .ps-footer .s-menu-footer-item::before,
  .ps-footer .s-menu-footer-item::after {
    display: none !important;
    content: none !important;
  }

  /* الرابط الطويل في المنتصف */
  .ps-footer .s-menu-footer-item:last-child {
    grid-column: 1 / -1 !important;

    justify-content: center !important;

    min-height: 36px !important;

    text-align: center !important;
  }


  /* =====================================================
     منصة الأعمال
  ===================================================== */

  .ps-footer .vat-saudibusiness {
    width: 100% !important;

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

  .ps-footer .saudibusiness {
    display: flex !important;

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

    gap: 10px !important;

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

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

    background: #f3f8f4 !important;

    border: 1px solid rgba(0,93,55,.08) !important;
    border-radius: 12px !important;

    text-decoration: none !important;

    box-shadow: none !important;
  }

  .ps-footer .saudibusiness img {
    width: 40px !important;
    height: 40px !important;

    object-fit: contain !important;
  }

  .ps-footer .saudibusiness p {
    margin: 0 !important;
    padding: 0 !important;

    color: #55645c !important;

    font-size: 13px !important;
    line-height: 1.4 !important;

    white-space: nowrap !important;
  }


  /* =====================================================
     تواصل معنا
  ===================================================== */

  .ps-footer salla-contacts.ps-footer--contact {
    display: block !important;

    width: 100% !important;

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

    text-align: center !important;
  }

  .ps-footer .s-contacts-list,
  .ps-footer .s-contacts-list-vertical {
    display: flex !important;

    flex-direction: row !important;

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

    gap: 9px !important;

    width: 100% !important;

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

  .ps-footer .s-contacts-item {
    display: flex !important;

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

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;

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

    background: #eef5f0 !important;

    border: 1px solid #d7e6dc !important;
    border-radius: 11px !important;

    color: #005d37 !important;

    box-shadow: none !important;
  }

  .ps-footer .s-contacts-icon {
    display: flex !important;

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

    width: auto !important;
    height: auto !important;

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

    border: 0 !important;
    background: transparent !important;
  }

  .ps-footer .s-contacts-icon svg,
  .ps-footer .s-contacts-icon svg path {
    width: 19px !important;
    height: 19px !important;

    fill: #005d37 !important;
  }

  .ps-footer .s-contacts-item .unicode {
    display: none !important;
  }

  .ps-footer salla-apps-icons {
    display: none !important;
  }


  /* =====================================================
     الجزء السفلي
  ===================================================== */

  .ps-footer--bottom {
    margin: 0 !important;

    padding: 12px 10px !important;

    background: #f7efe3 !important;

    border-top: 1px solid rgba(201,164,92,.16) !important;
  }

  .ps-footer--bottom .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
  }

  .ps-footer .footer__bottom--inenr {
    display: flex !important;

    flex-direction: column !important;

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

    gap: 9px !important;

    width: 100% !important;

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

  .ps-footer .copyright {
    width: 100% !important;

    margin: 0 !important;

    text-align: center !important;
  }

  .ps-footer .copyright p {
    margin: 0 !important;

    color: #606d66 !important;

    font-size: 12.5px !important;
    line-height: 1.4 !important;

    text-align: center !important;
  }


  /* =====================================================
     وسائل الدفع
  ===================================================== */

  .ps-footer .footer__payment {
    width: 100% !important;

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

  .ps-footer .s-payments-list {
    display: flex !important;

    flex-wrap: wrap !important;

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

    gap: 6px !important;

    width: 100% !important;

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

  .ps-footer .s-payments-list-item {
    display: flex !important;

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

    width: 44px !important;
    height: 29px !important;

    flex: 0 0 44px !important;

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

    background: #ffffff !important;

    border-radius: 7px !important;

    box-shadow: none !important;
  }

  .ps-footer .s-payments-list-item img {
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
  }

  /* شعار منصة الأعمال موجود في الأعلى */
  .ps-footer .s-payments-list-item:last-child {
    display: none !important;
  }

}
/* =========================================================
   عطارة المهات
   روابط مهمة - تصميم موحد ونظيف للجوال
========================================================= */

@media (max-width: 767px) {

  /* الحاوية */
  body .ps-footer .ps-footer--block,
  body .ps-footer .ps-footer--block salla-menu,
  body .ps-footer .ps-footer--block salla-menu > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

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

    direction: rtl !important;
  }


  /* العنوان */
  body .ps-footer .ps-block__title {
    width: 100% !important;

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

    text-align: center !important;

    color: #005d37 !important;

    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
  }


  /* =====================================================
     لوحة الروابط الواحدة
  ===================================================== */

  body .ps-footer .s-menu-footer-list {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-auto-flow: row !important;

    width: calc(100% - 16px) !important;
    max-width: 360px !important;

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

    gap: 0 !important;

    direction: rtl !important;

    background: #fffdf8 !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.10) !important;

    border-radius: 12px !important;

    overflow: hidden !important;
  }


  /* =====================================================
     إعادة ضبط الرابط من الصفر
     حتى لا تتدخل الأكواد القديمة
  ===================================================== */

  body .ps-footer
  .s-menu-footer-list
  > a.s-menu-footer-item {

    all: unset !important;

    box-sizing: border-box !important;

    display: flex !important;

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

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

    padding: 7px 8px !important;

    cursor: pointer !important;

    color: #53625a !important;

    font-family: inherit !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;

    text-align: center !important;

    white-space: normal !important;

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

    background: transparent !important;

    border-bottom:
      1px solid
      rgba(0, 93, 55, 0.07) !important;
  }


  /* الخط العمودي بين العمودين */
  body .ps-footer
  .s-menu-footer-list
  > a.s-menu-footer-item:nth-child(odd):not(:last-child) {

    border-left:
      1px solid
      rgba(0, 93, 55, 0.07) !important;
  }


  /* =====================================================
     ترتيب الروابط صراحةً
  ===================================================== */

  /* المدونة */
  body .ps-footer
  .s-menu-footer-list
  > a:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* من نحن */
  body .ps-footer
  .s-menu-footer-list
  > a:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* سياسة الخصوصية */
  body .ps-footer
  .s-menu-footer-list
  > a:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* الشروط والأحكام */
  body .ps-footer
  .s-menu-footer-list
  > a:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* سياسة الشحن والاسترجاع */
  body .ps-footer
  .s-menu-footer-list
  > a:nth-child(5) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  /* اتصل بنا */
  body .ps-footer
  .s-menu-footer-list
  > a:nth-child(6) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }


  /* آخر رابط - عرض كامل */
  body .ps-footer
  .s-menu-footer-list
  > a:nth-child(7) {

    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    min-height: 40px !important;

    color: #005d37 !important;

    font-weight: 600 !important;

    background:
      rgba(0, 93, 55, 0.025) !important;

    border-bottom: 0 !important;
    border-left: 0 !important;
  }


  /* إزالة أي before/after قديم */
  body .ps-footer
  .s-menu-footer-list
  > a::before,

  body .ps-footer
  .s-menu-footer-list
  > a::after {

    content: none !important;
    display: none !important;
  }


  /* لمس الرابط */
  body .ps-footer
  .s-menu-footer-list
  > a:active {

    background:
      rgba(0, 93, 55, 0.055) !important;
  }


  /* منصة الأعمال */
  body .ps-footer .vat-saudibusiness {
    margin-top: 10px !important;
  }

}
/* =========================================================
   عطارة المهات
   تحسين صفحات التصنيفات على الجوال فقط
========================================================= */

@media (max-width: 767px) {

  /* =====================================================
     1) مساحة الصفحة
  ===================================================== */

  body.product-index .page_w {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }


  /* =====================================================
     2) قسم التصنيفات الفرعية
  ===================================================== */

  body.product-index .slide-sub-categories {
    margin: 6px 0 22px !important;
    padding: 0 !important;
  }


  /* عنوان التصنيف الرئيسي */
  body.product-index .slide-sub-categories > h3 {
    display: flex !important;

    align-items: center !important;

    gap: 9px !important;

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

    color: #1f3d31 !important;

    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
  }


  body.product-index .slide-sub-categories > h3 img {
    width: 48px !important;
    height: 48px !important;

    flex: 0 0 48px !important;

    object-fit: cover !important;

    border-radius: 12px !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.08) !important;
  }


  /* =====================================================
     تحويل سلايدر التصنيفات إلى شبكة 3 بطاقات مرتبة
  ===================================================== */

  body.product-index
  .slide-sub-categories
  .s-slider-container {

    width: 100% !important;

    overflow: visible !important;
  }


  body.product-index
  .slide-sub-categories
  .s-slider-swiper-wrapper {

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;

    width: 100% !important;

    transform: none !important;

    margin: 0 !important;
  }


  body.product-index
  .slide-sub-categories
  .swiper-slide {

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
  }


  /* بطاقة التصنيف */
  body.product-index
  .slide-sub-categories
  .slide--category {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

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

    overflow: hidden !important;

    background: #fffdf8 !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.09) !important;

    border-radius: 14px !important;

    text-align: center !important;

    box-shadow:
      0 3px 10px
      rgba(0, 0, 0, 0.025) !important;

    text-decoration: none !important;
  }


  /* منطقة صورة التصنيف */
  body.product-index
  .slide-sub-categories
  .slide--category > span {

    display: block !important;

    width: 100% !important;

    aspect-ratio: 4 / 3 !important;

    overflow: hidden !important;

    background: #f8f5ed !important;
  }


  /* صورة التصنيف */
  body.product-index
  .slide-sub-categories
  .slide--category > span img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition:
      transform 0.25s ease !important;
  }


  /* اسم التصنيف */
  body.product-index
  .slide-sub-categories
  .slide--category h2 {

    display: flex !important;

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

    min-height: 42px !important;

    margin: 0 !important;

    padding: 7px 4px 8px !important;

    color: #244337 !important;

    font-size: 13.5px !important;
    line-height: 1.4 !important;

    font-weight: 700 !important;

    text-align: center !important;
  }


  body.product-index
  .slide-sub-categories
  .slide--category:active img {

    transform: scale(1.03) !important;
  }


  /* =====================================================
     3) العنوان + ترتيب المنتجات
  ===================================================== */

  body.product-index .container--products-list
  .main-content > .mb-4 {

    margin-bottom: 13px !important;

    gap: 10px !important;
  }


  body.product-index #page-main-title {

    margin: 0 !important;

    padding: 0 !important;

    color: #263c33 !important;

    font-size: 17px !important;
    line-height: 1.4 !important;

    font-weight: 800 !important;
  }


  body.product-index #product-filter {

    height: 40px !important;

    min-width: 120px !important;

    padding:
      0 10px !important;

    background: #fffdf8 !important;

    color: #42564d !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.12) !important;

    border-radius: 10px !important;

    font-size: 13px !important;
  }


  /* =====================================================
     4) شبكة المنتجات
  ===================================================== */

  body.product-index
  .s-products-list-vertical-cards {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 11px !important;

    width: 100% !important;

    margin-bottom: 20px !important;
  }


  /* =====================================================
     5) بطاقة المنتج
  ===================================================== */

  body.product-index
  custom-salla-product-card.s-product-card-entry {

    display: flex !important;

    flex-direction: column !important;

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

    overflow: hidden !important;

    background: #fffdf8 !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.09) !important;

    border-radius: 16px !important;

    box-shadow:
      0 4px 14px
      rgba(0, 0, 0, 0.025) !important;
  }


  /* =====================================================
     6) صورة المنتج
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-image {

    position: relative !important;

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius:
      16px 16px
      0 0 !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-image > a {

    display: block !important;

    width: 100% !important;
    height: 100% !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-image-cover {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    object-position: center !important;
  }


  /* =====================================================
     7) محتوى البطاقة
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-content {

    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    padding:
      10px 10px
      11px !important;

    box-sizing: border-box !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-content-main {

    min-height: 68px !important;
  }


  /* اسم المنتج */
  body.product-index
  custom-salla-product-card
  .s-product-card-content-title {

    margin: 0 !important;

    min-height: 44px !important;

    font-size: 14.5px !important;
    line-height: 1.55 !important;

    font-weight: 700 !important;

    color: #263b32 !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-content-title a {

    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;

    color: #263b32 !important;

    text-decoration: none !important;
  }


  /* مثل: وزن اختياري */
  body.product-index
  custom-salla-product-card
  .s-product-card-content-subtitle {

    margin:
      4px 0
      0 !important;

    color: #7a857f !important;

    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }


  /* =====================================================
     8) السعر
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-content-sub {

    margin:
      4px 0
      8px !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-price {

    margin: 0 !important;

    color: #005d37 !important;

    font-size: 17px !important;
    line-height: 1.4 !important;

    font-weight: 800 !important;
  }


  /* =====================================================
     9) زر أضف إلى السلة
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-content-footer {

    width: 100% !important;

    margin-top: auto !important;

    padding: 0 !important;
  }


  body.product-index
  custom-salla-product-card
  salla-add-product-button,

  body.product-index
  custom-salla-product-card
  salla-add-product-button > div,

  body.product-index
  custom-salla-product-card
  salla-add-product-button salla-button {

    display: block !important;

    width: 100% !important;
  }


  /* الزر نفسه */
  body.product-index
  custom-salla-product-card
  salla-add-product-button
  .s-button-btn {

    display: flex !important;

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

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

    height: 42px !important;

    margin: 0 !important;

    padding:
      0 7px !important;

    background: #005d37 !important;

    color: #ffffff !important;

    border:
      1px solid
      #005d37 !important;

    border-radius: 11px !important;

    font-size: 13px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    box-sizing: border-box !important;
  }


  /* منع قص النص */
  body.product-index
  custom-salla-product-card
  salla-add-product-button
  .s-button-text {

    display: flex !important;

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

    gap: 5px !important;

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

    margin: 0 !important;

    overflow: visible !important;

    text-overflow: clip !important;

    white-space: nowrap !important;

    color: #ffffff !important;
  }


  body.product-index
  custom-salla-product-card
  salla-add-product-button
  .s-button-text > span {

    display: inline !important;

    max-width: none !important;

    overflow: visible !important;

    text-overflow: clip !important;

    white-space: nowrap !important;
  }


  body.product-index
  custom-salla-product-card
  salla-add-product-button
  .s-button-text i {

    flex: 0 0 auto !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 15px !important;
  }


  /* =====================================================
     10) زر المفضلة
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-wishlist-btn.s-button-element {

    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;

    padding: 0 !important;

    background:
      rgba(255, 253, 248, 0.94) !important;

    color: #005d37 !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.10) !important;

    border-radius: 50% !important;

    box-shadow:
      0 2px 7px
      rgba(0, 0, 0, 0.05) !important;
  }


  /* =====================================================
     الشاشات الصغيرة جداً
  ===================================================== */

  @media (max-width: 360px) {

    body.product-index
    .s-products-list-vertical-cards {

      gap: 8px !important;
    }


    body.product-index
    custom-salla-product-card
    .s-product-card-content {

      padding:
        9px 8px
        9px !important;
    }


    body.product-index
    custom-salla-product-card
    .s-product-card-content-title {

      font-size: 13.5px !important;
    }


    body.product-index
    custom-salla-product-card
    salla-add-product-button
    .s-button-btn {

      padding:
        0 5px !important;

      font-size: 12px !important;
    }


    body.product-index
    custom-salla-product-card
    salla-add-product-button
    .s-button-text {

      gap: 4px !important;
    }

  }

}
/* =========================================================
   عطارة المهات
   تكبير التصنيفات الفرعية وبطاقات المنتجات
   وتقليل الفراغات - الجوال فقط
========================================================= */

@media (max-width: 767px) {

  /* =====================================================
     1) استخدام عرض الشاشة بشكل أفضل
  ===================================================== */

  body.product-index .page_w {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body.product-index .page_w > .container-fluid {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.product-index .container--products-list {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.product-index .main-content {
    width: 100% !important;
    min-width: 0 !important;

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


  /* =====================================================
     2) التصنيفات الفرعية - جعلها تستغل كامل العرض
  ===================================================== */

  body.product-index .slide-sub-categories {
    width: 100% !important;

    margin: 4px 0 20px !important;
    padding: 0 !important;
  }

  body.product-index .slide-sub-categories salla-slider {
    display: block !important;

    width: 100% !important;

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

  body.product-index
  .slide-sub-categories
  .s-slider-container {

    width: 100% !important;

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

    overflow: visible !important;
  }

  body.product-index
  .slide-sub-categories
  .s-slider-swiper-wrapper {

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 6px !important;

    width: 100% !important;

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

    transform: none !important;
  }


  /* مهم: إلغاء العرض الذي يفرضه Swiper */
  body.product-index
  .slide-sub-categories
  .swiper-slide {

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

    height: auto !important;

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

    flex: none !important;
  }


  /* البطاقة */
  body.product-index
  .slide-sub-categories
  .slide--category {

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

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

    background: #fffdf8 !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.09) !important;

    border-radius: 14px !important;

    overflow: hidden !important;
  }


  /* صورة التصنيف أكبر */
  body.product-index
  .slide-sub-categories
  .slide--category > span {

    display: block !important;

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

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

    overflow: hidden !important;
  }

  body.product-index
  .slide-sub-categories
  .slide--category > span img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

    object-fit: cover !important;
  }


  body.product-index
  .slide-sub-categories
  .slide--category h2 {

    min-height: 43px !important;

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

    display: flex !important;

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

    color: #244337 !important;

    font-size: 13.5px !important;
    line-height: 1.35 !important;

    font-weight: 700 !important;

    text-align: center !important;
  }


  /* =====================================================
     3) شبكة المنتجات - تقليل الفراغ بين البطاقات
  ===================================================== */

  body.product-index
  .s-products-list-vertical-cards {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 8px !important;
    row-gap: 10px !important;

    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;
  }


  /* =====================================================
     4) بطاقة المنتج نفسها
  ===================================================== */

  body.product-index
  custom-salla-product-card.s-product-card-entry {

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

    height: auto !important;

    align-self: start !important;

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

    background: #fffdf8 !important;

    border:
      1px solid
      rgba(0, 93, 55, 0.09) !important;

    border-radius: 14px !important;

    overflow: hidden !important;

    box-shadow:
      0 3px 10px
      rgba(0, 0, 0, 0.025) !important;
  }


  /* =====================================================
     5) إزالة الفراغ حول صورة المنتج
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-image {

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

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

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius:
      14px 14px
      0 0 !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-image > a {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

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


  /* تكبير الصورة حتى تصل لحواف البطاقة */
  body.product-index
  custom-salla-product-card
  .s-product-card-image-cover {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 0 !important;
  }


  /* =====================================================
     6) تقليل الفراغ داخل محتوى البطاقة
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-content {

    display: block !important;

    width: 100% !important;

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

    margin: 0 !important;

    padding:
      9px 8px
      9px !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-content-main {

    min-height: 52px !important;
    height: auto !important;

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


  body.product-index
  custom-salla-product-card
  .s-product-card-content-title {

    min-height: 42px !important;

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

    font-size: 14px !important;
    line-height: 1.5 !important;

    font-weight: 700 !important;
  }


  /* الوصف مثل وزن اختياري */
  body.product-index
  custom-salla-product-card
  .s-product-card-content-subtitle {

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

    font-size: 12px !important;
    line-height: 1.35 !important;
  }


  /* =====================================================
     7) تقريب السعر من الاسم
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-content-sub {

    margin:
      5px 0
      8px !important;

    padding: 0 !important;
  }


  body.product-index
  custom-salla-product-card
  .s-product-card-price {

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

    color: #005d37 !important;

    font-size: 17px !important;
    line-height: 1.35 !important;

    font-weight: 800 !important;
  }


  /* =====================================================
     8) إزالة المسافة الكبيرة قبل زر السلة
  ===================================================== */

  body.product-index
  custom-salla-product-card
  .s-product-card-content-footer {

    width: 100% !important;

    margin-top: 4px !important;
    padding: 0 !important;
  }


  body.product-index
  custom-salla-product-card
  salla-add-product-button {

    width: 100% !important;

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


  body.product-index
  custom-salla-product-card
  salla-add-product-button
  .s-button-btn {

    width: 100% !important;

    height: 42px !important;

    margin: 0 !important;

    padding-left: 5px !important;
    padding-right: 5px !important;

    border-radius: 10px !important;
  }

}
/* تغيير لون خلفية جميع صفحات المتجر والحاويات الرئيسية */
body, 
.app-inner, 
.s-page, 
.store-home,
.main-content,
#app {
    background-color: #fffdf0 !important;
}