/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');* {
   font-family: "Tajawal", sans-serif!important;
}
/* =========================
   Salla Sharp Glass Header
   Corrected for #mainnav
   ========================= */

/* Header wrapper */
header.store-header {
  position: absolute !important;
  top: 16px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Main nav pill */
header.store-header #mainnav {
  width: calc(100% - 120px) !important;
  max-width: 1120px !important;
  height: 54px !important;
  margin: 0 auto !important;

  background: rgba(18, 32, 18, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  overflow: hidden !important;
}

/* Remove default white backgrounds */
header.store-header #mainnav,
header.store-header #mainnav .inner,
header.store-header #mainnav .container {
  background: transparent !important;
  box-shadow: none !important;
}

/* Inner height */
header.store-header #mainnav .inner,
header.store-header #mainnav .container {
  height: 100% !important;
}

/* Layout */
header.store-header #mainnav .container > .flex {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Left icons */
header.store-header #mainnav .header-buttons,
header.store-header #mainnav .header-actions,
header.store-header #mainnav .s-user-menu-trigger,
header.store-header #mainnav salla-cart-summary {
  color: #fff !important;
}

/* Logo to the right */
header.store-header #mainnav .navbar-brand,
header.store-header #mainnav .brand,
header.store-header #mainnav .logo,
header.store-header #mainnav a[href="/"] {
  grid-column: 3 !important;
  justify-self: end !important;
  margin: 0 !important;
}

header.store-header #mainnav img {
  max-height: 34px !important;
  width: auto !important;
}

/* Menu center */
header.store-header #mainnav custom-main-menu,
header.store-header #mainnav .main-menu,
header.store-header #mainnav nav {
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
}

/* Menu links */
header.store-header #mainnav nav a,
header.store-header #mainnav .main-menu a,
header.store-header #mainnav custom-main-menu a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
  text-decoration: none !important;
  padding: 0 16px !important;
}

header.store-header #mainnav nav a:hover,
header.store-header #mainnav .main-menu a:hover,
header.store-header #mainnav custom-main-menu a:hover {
  color: #5cff42 !important;
}

/* Force icons to white */
header.store-header #mainnav svg,
header.store-header #mainnav i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Cart count */
header.store-header #mainnav .s-cart-summary-count,
header.store-header #mainnav .badge {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* Keep banner behind header */
.main-banner,
.main-banner-slider,
section.main-banner,
section.main-banner-0 {
  margin-top: 0 !important;
}

/* Sticky effect after scroll */
body.header-scrolled header.store-header {
  position: fixed !important;
}

body.header-scrolled header.store-header #mainnav {
  background: rgba(12, 22, 12, 0.72) !important;
}

/* Mobile */
@media (max-width: 768px) {
  header.store-header {
    top: 10px !important;
  }

  header.store-header #mainnav {
    width: calc(100% - 24px) !important;
    height: 50px !important;
  }

  header.store-header #mainnav .container > .flex {
    display: flex !important;
    justify-content: space-between !important;
  }

  header.store-header #mainnav custom-main-menu,
  header.store-header #mainnav .main-menu,
  header.store-header #mainnav nav {
    display: none !important;
  }

  header.store-header #mainnav img {
    max-height: 30px !important;
  }
}
/* =====================================================
   FINAL FIX - Salla Sharp Header + Mobile Menu Problems
   Paste this at the END of Custom CSS
   ===================================================== */

/* Stop page horizontal movement */
html,
body {
  overflow-x: hidden !important;
}

/* Header should not become white block */
header.store-header {
  position: absolute !important;
  top: 14px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Main glass header pill */
header.store-header #mainnav {
  width: calc(100% - 120px) !important;
  max-width: 1120px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  background: rgba(35, 45, 35, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  overflow: visible !important;
}

/* Kill default white background inside nav */
header.store-header #mainnav,
header.store-header #mainnav .inner,
header.store-header #mainnav .container,
header.store-header #mainnav .bg-inherit,
header.store-header #mainnav .bg-white {
  background: transparent !important;
  box-shadow: none !important;
}

/* Correct inner sizing */
header.store-header #mainnav .inner,
header.store-header #mainnav .container {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  padding-inline: 22px !important;
}

/* Correct layout */
header.store-header #mainnav .container > .flex {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Left side icons */
header.store-header #mainnav .container > .flex > div:first-child {
  grid-column: 1 !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* Center menu */
header.store-header #mainnav custom-main-menu {
  grid-column: 2 !important;
  justify-self: center !important;
  display: block !important;
}

header.store-header #mainnav custom-main-menu nav,
header.store-header #mainnav .main-menu,
header.store-header #mainnav nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
}

/* Menu links */
header.store-header #mainnav custom-main-menu a,
header.store-header #mainnav nav a,
header.store-header #mainnav .main-menu a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  padding: 0 !important;
  background: transparent !important;
}

header.store-header #mainnav custom-main-menu a:hover,
header.store-header #mainnav nav a:hover,
header.store-header #mainnav .main-menu a:hover {
  color: #5cff42 !important;
}

/* Logo on the right */
header.store-header #mainnav .navbar-brand,
header.store-header #mainnav .brand,
header.store-header #mainnav .logo,
header.store-header #mainnav a[href="/"] {
  grid-column: 3 !important;
  justify-self: end !important;
  margin: 0 !important;
}

header.store-header #mainnav img {
  max-height: 34px !important;
  width: auto !important;
}

/* Make all header icons white */
header.store-header #mainnav svg,
header.store-header #mainnav i,
header.store-header #mainnav button,
header.store-header #mainnav a {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Cart badge */
header.store-header #mainnav .s-cart-summary-count,
header.store-header #mainnav .badge {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* Scroll state */
body.header-scrolled header.store-header {
  position: fixed !important;
}

body.header-scrolled header.store-header #mainnav {
  background: rgba(20, 28, 20, 0.75) !important;
}

/* =====================================================
   MOBILE FIX
   ===================================================== */

@media (max-width: 768px) {
  header.store-header {
    top: 12px !important;
  }

  header.store-header #mainnav {
    width: calc(100% - 28px) !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    overflow: visible !important;
  }

  header.store-header #mainnav .container {
    padding-inline: 16px !important;
  }

  header.store-header #mainnav .container > .flex {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    height: 100% !important;
  }

  /* Icons left */
  header.store-header #mainnav .container > .flex > div:first-child {
    grid-column: 1 !important;
    justify-self: start !important;
    display: flex !important;
    gap: 13px !important;
  }

  /* Logo center on mobile */
  header.store-header #mainnav .navbar-brand,
  header.store-header #mainnav .brand,
  header.store-header #mainnav .logo,
  header.store-header #mainnav a[href="/"] {
    grid-column: 2 !important;
    justify-self: center !important;
  }

  header.store-header #mainnav img {
    max-height: 30px !important;
  }

  /* Burger right */
  header.store-header #mainnav .burger,
  header.store-header #mainnav .mburger,
  header.store-header #mainnav .hamburger,
  header.store-header #mainnav a[href="#mobile-menu"] {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
  }

  /* Hide desktop menu only, not mobile drawer */
  header.store-header #mainnav custom-main-menu {
    display: none !important;
  }

  /* Fix the opened mobile menu position */
  body.menu-opened #mobile-menu,
  body.mm-ocd-opened #mobile-menu,
  .mobile-menu,
  .mm-menu,
  .mm-ocd {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 86vw !important;
    max-width: 340px !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 999999 !important;
  }

  /* Make mobile menu content start below the floating header */
  body.menu-opened .mobile-menu,
  body.mm-ocd-opened .mobile-menu,
  body.menu-opened .mm-menu,
  body.mm-ocd-opened .mm-menu {
    padding-top: 80px !important;
  }

  /* Fix mobile menu links */
  .mobile-menu a,
  .mm-menu a,
  #mobile-menu a {
    color: #000000 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: right !important;
  }

  /* Fix mobile drawer overlay */
  .mm-ocd__backdrop,
  .mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 999998 !important;
  }

  /* Prevent white menu from hiding behind header */
  body.menu-opened header.store-header,
  body.mm-ocd-opened header.store-header {
    z-index: 1000000 !important;
  }
}
/* =====================================================
   FIX MOBILE DRAWER / MM-OCD BLANK WHITE PANEL
   Paste at the VERY END of Custom CSS
   ===================================================== */

/* When menu is closed, force drawer and overlay to disappear */
body:not(.mm-ocd-opened) .mm-ocd,
body:not(.mm-ocd-opened) .mm-ocd__content,
body:not(.mm-ocd-opened) .mm-ocd__backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Main drawer wrapper */
.mm-ocd {
  z-index: 999999 !important;
}

/* Drawer panel */
.mm-ocd__content {
  background: #ffffff !important;
  width: 86vw !important;
  max-width: 340px !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

/* Right-side drawer position */
.mm-ocd--right .mm-ocd__content {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
}

/* Open state */
body.mm-ocd-opened .mm-ocd--right .mm-ocd__content {
  transform: translateX(0) !important;
}

/* Backdrop */
.mm-ocd__backdrop {
  background: rgba(0, 0, 0, 0.45) !important;
}

/* Open state backdrop */
body.mm-ocd-opened .mm-ocd__backdrop {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mobile menu content */
#mobile-menu,
.mobile-menu,
.mm-menu {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Mobile menu links */
#mobile-menu a,
.mobile-menu a,
.mm-menu a {
  color: #000000 !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: right !important;
}

/* Desktop: completely disable mobile drawer */
@media (min-width: 769px) {
  .mm-ocd,
  .mm-ocd__content,
  .mm-ocd__backdrop,
  #mobile-menu,
  .mobile-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body {
    overflow: auto !important;
  }
}
/* FIX: رجوع قائمة الموبايل وعدم ظهورها فوق الصفحة في الديسك توب */
@media (min-width: 769px) {
  header.store-header #mainnav nav#mobile-menu,
  header.store-header #mainnav #mobile-menu,
  header.store-header #mainnav ul.main-menu.mm-spn--open,
  header.store-header #mainnav ul.main-menu {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* إخفاء شكل قائمة الموبايل الطويلة فقط */
  header.store-header #mainnav nav#mobile-menu.mm-spn,
  header.store-header #mainnav nav#mobile-menu.mm-spn--navbar,
  header.store-header #mainnav nav#mobile-menu.mm-spn--main {
    display: none !important;
  }

  /* إظهار custom-main-menu نفسه لو فيه نسخة ديسك توب */
  header.store-header #mainnav custom-main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: 2 !important;
    background: transparent !important;
  }
}
@media (min-width: 769px) {
  header.store-header #mainnav {
    position: relative !important;
  }

  header.store-header #mainnav .desktop-menu-fix {
    position: absolute !important;
    top: 50% !important;
    left: 80% !important;
    transform: translate(-50%, -50%) !important;

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

    width: auto !important;
    height: auto !important;
    z-index: 10 !important;

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

  header.store-header #mainnav .desktop-menu-fix a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
  }

  header.store-header #mainnav .desktop-menu-fix a:hover {
    color: #5cff42 !important;
  }
}

@media (max-width: 768px) {
  header.store-header #mainnav .desktop-menu-fix {
    display: none !important;
  }
}
/* Social + Contact icons same style and inline */
footer.store-footer salla-social,
footer.store-footer salla-contacts,
footer.store-footer .s-social-list,
footer.store-footer .s-contacts-list,
footer.store-footer .s-contacts-list-horizontal,
footer.store-footer .s-contacts-list-icons-only {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* خلي بلوك التواصل والسوشيال جنب بعض */
footer.store-footer .contact-social,
footer.store-footer .lg\:hidden.contact-social,
footer.store-footer div[class*="contact-social"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 14px auto !important;
}

/* نفس شكل كل أيقونة */
footer.store-footer .s-social-list a,
footer.store-footer .s-contacts-list a,
footer.store-footer .s-contacts-item,
footer.store-footer .s-social-link {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

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

  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;

  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* توحيد حجم الأيقونات */
footer.store-footer .s-social-list a i,
footer.store-footer .s-social-list a svg,
footer.store-footer .s-contacts-list a i,
footer.store-footer .s-contacts-list a svg,
footer.store-footer .s-contacts-item i,
footer.store-footer .s-contacts-item svg,
footer.store-footer .s-social-link i,
footer.store-footer .s-social-link svg {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* إزالة أي نصوص false أو مسافات غريبة */
footer.store-footer salla-social,
footer.store-footer salla-contacts {
  font-size: 0 !important;
}

/* Hover */
footer.store-footer .s-social-list a:hover,
footer.store-footer .s-contacts-list a:hover,
footer.store-footer .s-contacts-item:hover,
footer.store-footer .s-social-link:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-2px) !important;
}footer.store-footer .contact-social > *,
footer.store-footer div[class*="contact-social"] > * {
  display: contents !important;
}
/* =====================================
   Footer logo center + all icons inline
   Add at the VERY END of CSS
   ===================================== */

@media (max-width: 768px) {

  /* اللوجو في النص */
  footer.store-footer img[alt="store logo"],
  footer.store-footer img[alt*="logo"],
  footer.store-footer img.object-contain,
  footer.store-footer .store-footer__inner img {
    display: block !important;
    width: auto !important;
    max-width: 145px !important;
    height: auto !important;
    max-height: 70px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto 18px !important;
  }

  /* البلوك اللي فيه السوشيال والتواصل */
  footer.store-footer .contact-social,
  footer.store-footer div[class*="contact-social"] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 18px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* نخلي salla-social و salla-contacts يندمجوا في نفس الصف */
  footer.store-footer .contact-social > *,
  footer.store-footer div[class*="contact-social"] > * {
    display: contents !important;
  }

  footer.store-footer salla-social,
  footer.store-footer salla-contacts,
  footer.store-footer .s-social-list,
  footer.store-footer .s-contacts-list,
  footer.store-footer .s-contacts-list-horizontal,
  footer.store-footer .s-contacts-list-icons-only {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* شكل موحد لكل الأيقونات */
  footer.store-footer .s-social-list a,
  footer.store-footer .s-contacts-list a,
  footer.store-footer .s-contacts-item,
  footer.store-footer .s-social-link {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;

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

    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;

    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  /* حجم الأيقونات */
  footer.store-footer .s-social-list a i,
  footer.store-footer .s-social-list a svg,
  footer.store-footer .s-contacts-list a i,
  footer.store-footer .s-contacts-list a svg,
  footer.store-footer .s-contacts-item i,
  footer.store-footer .s-contacts-item svg,
  footer.store-footer .s-social-link i,
  footer.store-footer .s-social-link svg {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* منع ظهور كلمة false */
  footer.store-footer salla-social,
  footer.store-footer salla-contacts {
    font-size: 0 !important;
  }

  /* ترتيب أيقونات التواصل لوحدها */
  footer.store-footer .s-contacts-list {
    order: 1 !important;
  }

  footer.store-footer .s-social-list {
    order: 2 !important;
  }
}
/* Center footer logo only - mobile */
@media (max-width: 768px) {

  /* بلوك اللوجو فقط */
  footer.store-footer .store-footer__inner .container > div > div:first-child,
  footer.store-footer .store-footer__inner .container > div > div.w-full.md\:w-1\/4:first-child {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto 18px !important;
  }

  /* اللوجو نفسه فقط */
  footer.store-footer img[alt="store logo"],
  footer.store-footer img[alt*="store"],
  footer.store-footer img.object-contain {
    display: block !important;
    width: auto !important;
    max-width: 145px !important;
    height: auto !important;
    max-height: 70px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 14px !important;

    object-position: center !important;
    float: none !important;
  }

  /* رجوع النص والرقم الضريبي لوضعهم الطبيعي */
  footer.store-footer .store-footer__inner .container > div > div:first-child p,
  footer.store-footer .store-footer__inner .container > div > div:first-child span,
  footer.store-footer .store-footer__inner .container > div > div:first-child div:not(:has(img)) {
    text-align: center !important;
  }
}
/* =====================================
   Desktop Header Menu Fix
   clickable + dropdown
   Add at the VERY END
   ===================================== */

@media (min-width: 769px) {

  header.store-header #mainnav {
    position: relative !important;
    overflow: visible !important;
  }

  header.store-header #mainnav .desktop-menu-fix {
    position: absolute !important;
    top: 50% !important;
    left: 80% !important;
    transform: translate(-50%, -50%) !important;

    height: 54px !important;
    min-height: 54px !important;

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

    z-index: 999999 !important;
    pointer-events: auto !important;

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

  header.store-header #mainnav .desktop-menu-link,
  header.store-header #mainnav .desktop-menu-item > .desktop-menu-link {
    height: 54px !important;
    min-height: 54px !important;

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

    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

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

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

    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 999999 !important;
  }

  header.store-header #mainnav .desktop-menu-link:hover {
    color: #5cff42 !important;
  }

  header.store-header #mainnav .desktop-menu-item {
    position: relative !important;
    height: 54px !important;

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

    pointer-events: auto !important;
    z-index: 999999 !important;
  }

  /* Dropdown */
  header.store-header #mainnav .desktop-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 50% !important;
    transform: translateX(50%) translateY(8px) !important;

    min-width: 190px !important;
    width: max-content !important;

    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(74, 96, 56, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18) !important;

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

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

    transition: 0.2s ease !important;
    z-index: 1000000 !important;
  }

  header.store-header #mainnav .desktop-menu-item:hover .desktop-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(50%) translateY(0) !important;
  }

  header.store-header #mainnav .desktop-dropdown a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

    color: #4A6038 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    padding: 0 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  header.store-header #mainnav .desktop-dropdown a:hover {
    background: rgba(74, 96, 56, 0.10) !important;
    color: #2f4126 !important;
  }

  /* منع أي عنصر يغطي القائمة */
  header.store-header #mainnav::before,
  header.store-header #mainnav::after,
  header.store-header #mainnav .inner::before,
  header.store-header #mainnav .inner::after {
    pointer-events: none !important;
  }

  /* نخلي عناصر الهيدر نفسها ما تمنعش الكليك على القائمة */
  header.store-header,
  header.store-header #mainnav,
  header.store-header #mainnav .inner,
  header.store-header #mainnav .container {
    overflow: visible !important;
  }
}

@media (max-width: 768px) {
  header.store-header #mainnav .desktop-menu-fix {
    display: none !important;
  }
}
/* ============================
   Desktop Menu Dropdown CSS
   ============================ */
@media (min-width: 769px) {
  header.store-header #mainnav .desktop-menu-fix {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: absolute !important;
    top: 50% !important;
    left: 80% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
  }

  header.store-header #mainnav .desktop-menu-link {
    padding: 0 12px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    position: relative !important;
  }

  header.store-header #mainnav .desktop-menu-link:hover {
    color: #5cff42 !important;
  }

  header.store-header #mainnav .desktop-menu-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  /* Main dropdown */
  header.store-header #mainnav .desktop-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    padding: 8px 0 !important;
    z-index: 99999 !important;
    transition: 0.2s ease !important;
  }

  header.store-header #mainnav .desktop-menu-item:hover .desktop-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Links inside dropdown */
  header.store-header #mainnav .desktop-dropdown > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    color: #4a6038 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: 0.15s ease !important;
    position: relative !important;
  }

  header.store-header #mainnav .desktop-dropdown > a:hover {
    background: rgba(74, 96, 56, 0.08) !important;
    color: #3b4d2d !important;
  }

  /* Nested dropdown */
  header.store-header #mainnav .nested-dropdown {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    min-width: 200px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    padding: 8px 0 !important;
    z-index: 999999 !important;
  }

  /* Show nested dropdown on hover */
  header.store-header #mainnav .desktop-dropdown > a:hover + .nested-dropdown,
  header.store-header #mainnav .nested-dropdown:hover {
    display: block !important;
  }

  /* Nested dropdown links */
  header.store-header #mainnav .nested-dropdown a {
    display: block !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    color: #4a6038 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  header.store-header #mainnav .nested-dropdown a:hover {
    background: rgba(74, 96, 56, 0.08) !important;
    color: #3b4d2d !important;
  }

  /* Add arrow for items with nested dropdown */
  header.store-header #mainnav .desktop-dropdown > a:after {
    font-size: 10px;
    margin-left: 6px;
    color: #4a6038;
  }
}