/* ==========================================
   🌐 GLOBAL NAVBAR — BASE
   ========================================== */


/* دعم أي alias مستعمل */
.home-navbar,
#main-nav{
 
  z-index: 9999999;
}

/* بنية داخلية */
nav.main-nav .nav-container{
  position: relative;
  box-sizing: border-box;
  width: 100vw;
}

/* القوائم */
nav.main-nav ul.nav-main{
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.main-nav ul.nav-main > li{
  list-style: none;
}

/* الروابط والأزرار داخل nav فقط */
nav.main-nav ul.nav-main a,
nav.main-nav ul.nav-main button{
  box-sizing: border-box;
  white-space: nowrap;
  text-decoration: none;
}

/* الصور داخل nav */
nav.main-nav img{
  display: block;
  max-width: 100%;
}

/* ==========================================
   🧱 MAIN CONTENT LAYERING
   ========================================== */

.main{
  position: relative;
  z-index: 99999999;    /* أقل من navbar */
}




nav.main-nav .nav-right{
  width: 100vw !important;
  z-index: 99999999;
}



.floating-cart-badge{
  width: 6vw;
  height: 15vh;
 
  position: relative;
  display: flex;
  overflow: hidden;
  
}


/* ==========================================
   ✅ POLICIES DROPDOWN 
   ========================================== */

/* 0) حماية: لا تسمح لقواعد الـ UL العامة أن تجعل dropdown-menu flex */
nav.main-nav .dropdown-menu{
 

  background: rgba(179, 201, 185, 0.98);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);



}

/* 1) مرجع التموضع */
nav.main-nav li.dropdown{
  position: relative;
  z-index: 9999999;
}






/* 3) عناصر القائمة: عمودية دائمًا */
nav.main-nav .dropdown-menu li{
  display: block;
  margin: 0;
  padding: 0;
}

nav.main-nav .dropdown-menu li a{
  display: block;
  width: 100%;
  padding: .65rem 1rem;

  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}

nav.main-nav .dropdown-menu li a:hover{
  background: #f0f0f0;
}

/* 4) زر Policies نفسه — بدون تكرار display */
nav.main-nav .dropdown-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  cursor: pointer;
  line-height: 1;
  white-space: nowrap;

  background: #9fac9fcc;
  color: #fff;
  border: 2px solid #133113cc;
  border-radius: 6px;
  padding-inline: 1rem;
  min-height: 36px;
}











/* ================================
   DESKTOP: hover 
   ================================ */
@media (hover:hover) and (pointer:fine){

  nav.main-nav li.dropdown > .dropdown-menu{
    display: none;
  }

  nav.main-nav li.dropdown:hover > .dropdown-menu{
    display: block;
  }

}






/* ==========================================
   📲 1. MOBILE LANDSCAPE
   ========================================== */
@media (orientation: landscape) and (max-width: 889px) {

  nav.main-nav li.dropdown > .dropdown-menu{
    display: none;
  }

  nav.main-nav li.dropdown.open > .dropdown-menu{ 
    display:block; 
    z-index: 999999;
  }

}








/* ==========================================
   📲 1. MOBILE PORTRAIT
   ========================================== */
@media (orientation: portrait) and (min-width: 367px) {


  nav.main-nav li.dropdown > .dropdown-menu{
    display: none;
  }


  nav.main-nav li.dropdown.open > .dropdown-menu{ display:block; }


}





/* Tablet / iPad Portrait */
@media (orientation: portrait) and (min-width: 490px) and (max-width: 1249px) {

  nav.main-nav li.dropdown > .dropdown-menu{
    display: none;
  }

  nav.main-nav li.dropdown.open > .dropdown-menu{ display:block; }

}


/* ==========================================
   💻  TABLET LANDSCAPE
   ========================================== */

@media only screen 
  and (min-device-width: 899px)
  and (max-device-width: 1370px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {


  nav.main-nav li.dropdown > .dropdown-menu{
    display: none;
  }

  nav.main-nav li.dropdown.open > .dropdown-menu{ 
    margin-top: 22vh;;
    display:block; }

}






 nav.main-nav .nav-container{
  z-index: 99999999;
 }



/* ==========================================
   🖥️ LAPTOP / DESKTOP (1024px+)
   Navbar Layout + Equal Buttons + Dropdown
   ========================================== */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine){

  :root{
     --pst-btn-font-size: 0.95rem;
    --pst-nav-btn-h: 34px;     /* ارتفاع موحد */
    --pst-nav-btn-w: 7.5rem;  /* عرض موحد (عدّله) */
    --pst-nav-gap: 1rem;
     --pst-btn-gap: 4.5rem;
      
  }


nav.main-nav a,
nav.main-nav button{
  font-size: var(--pst-btn-font-size);
  line-height: 1;                 /* مهم للتوسيط العمودي */
  font-weight: 500;               /* اختياري */
}



  /* NAV BAR */
  nav.main-nav{
    position: sticky;
    top: 0;
    left: 0vw;
  
align-items: center;

    display: flex;
    justify-content: center;

    padding-inline: 2vw;
    box-sizing: border-box;
    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);
  }

  /* nav container: صف واحد */
  nav.main-nav .nav-container{
    width: 100%;
   
    margin-inline: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: var(--pst-nav-gap);

    box-sizing: border-box;
  }

  /* اليسار: nav-right يأخذ المساحة */
  nav.main-nav .nav-right{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* nav-links: كل مجموعات الـ UL في صف واحد */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
     gap: var(--pst-btn-gap);
  }

  


.floating-cart-badge{
margin-top: 2vh;
margin-left: 2vw;
z-index: 9999;

}


 .nav-links{
 transform: translateX(-12%);

 }
 

  /* تنظيف ULs داخل nav-links */
  nav.main-nav .nav-links ul{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
     gap: var(--pst-nav-gap);
  }



  /* ✅ توحيد شكل/عرض الأزرار الأساسية */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button
 {
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: 36px;

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

    padding-inline: 2rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
  }

 
}











/* 📲 MOBILE LANDSCAPE */
@media (orientation: landscape) and (max-width: 699px) {

  :root{
     --pst-btn-font-size: 0.95rem;
    --pst-nav-btn-h: 34px;     /* ارتفاع موحد */
    --pst-nav-btn-w: 7rem !important;  /* عرض موحد (عدّله) */
    --pst-nav-gap: 0rem;
     --pst-btn-gap: 0.4rem;
  }


nav.main-nav a,
nav.main-nav button{
  font-size: var(--pst-btn-font-size);
  line-height: 1;                 /* مهم للتوسيط العمودي */
  font-weight: 500;               /* اختياري */
}



  /* NAV BAR */
  nav.main-nav{
    position: sticky;
    top: 0;
    left: 0vw;
    z-index: 1000;
align-items: center;
width: 100%;
    display: flex;
    justify-content: center;

    padding-inline: 2vw;
    box-sizing: border-box;
    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);
  }

  /* nav container: صف واحد */
  nav.main-nav .nav-container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: var(--pst-nav-gap);

    box-sizing: border-box;
  }

  /* اليسار: nav-right يأخذ المساحة */
  nav.main-nav .nav-right{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* nav-links: كل مجموعات الـ UL في صف واحد */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
     gap: var(--pst-btn-gap);
     z-index: 999999;
    
   
  }




.floating-cart-badge{
margin-top: 2vh;
margin-left: 2vw;
z-index: 9999;

}





 .nav-links{

 transform: translate(-9vw, 1vh);
 }

  /* تنظيف ULs داخل nav-links */
  nav.main-nav .nav-links ul{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
     gap: var(--pst-nav-gap);
     z-index: 999999;
  }

  /* ✅ توحيد شكل/عرض الأزرار الأساسية */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button
 {
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: 36px;

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

    padding-inline: 1rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
    z-index: 999999;
  position: relative;
  }


}











/* 📲 MOBILE LANDSCAPE  */
@media (orientation: landscape)  and (min-width: 700px) and (max-width: 849px) {

  :root{
     --pst-btn-font-size: 0.95rem;
    --pst-nav-btn-h: 34px;     /* ارتفاع موحد */
    --pst-nav-btn-w: 5.5rem !important;  /* عرض موحد (عدّله) */
    --pst-nav-gap: 0rem;
     --pst-btn-gap: 0.7rem;
  }


nav.main-nav a,
nav.main-nav button{
  font-size: var(--pst-btn-font-size);
  line-height: 1;                 /* مهم للتوسيط العمودي */
  font-weight: 400;  
  display: flex;             /* اختياري */
}



  /* NAV BAR */
  nav.main-nav{
    position: sticky;
    top: 0;
    left: 0vw;
  
align-items: center;
width: 100%;
    display: flex;
    justify-content: center;

   
    box-sizing: border-box;
    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);
  }

  /* nav container: صف واحد */
  nav.main-nav .nav-container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: var(--pst-nav-gap);

    box-sizing: border-box;
  }

  /* اليسار: nav-right يأخذ المساحة */
  nav.main-nav .nav-right{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* nav-links: كل مجموعات الـ UL في صف واحد */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
     gap: var(--pst-btn-gap);
    
   
  }








.floating-cart-badge{
margin-top: 2vh;
margin-left: 2vw;
z-index: 9999;

}




 .nav-links{
 transform: translateX(-16%);

 }

  /* تنظيف ULs داخل nav-links */
  nav.main-nav .nav-links ul{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
     gap: var(--pst-nav-gap);
  }


  /* ✅ توحيد شكل/عرض الأزرار الأساسية */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button
 {
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
display: flex;
    padding-inline: 1rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
  }

}









/* 📲 MOBILE LANDSCAPE  */
@media (orientation: landscape)  and (min-width: 850px) and (max-width: 900px) {

  :root{
     --pst-btn-font-size: 0.95rem;
    --pst-nav-btn-h: 34px;     /* ارتفاع موحد */
    --pst-nav-btn-w: 6rem;  /* عرض موحد (عدّله) */
    --pst-nav-gap: 0rem;
     --pst-btn-gap: 0.7rem;
  }


nav.main-nav a,
nav.main-nav button{
  font-size: var(--pst-btn-font-size);
  line-height: 1;                 /* مهم للتوسيط العمودي */
  font-weight: 400;  
  display: flex;             /* اختياري */
}



  /* NAV BAR */
  nav.main-nav{
    position: sticky;
    top: 0;
    left: 0vw;
  
align-items: center;
width: 100%;
    display: flex;
    justify-content: center;

   
    box-sizing: border-box;
    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);
  }

  /* nav container: صف واحد */
  nav.main-nav .nav-container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: var(--pst-nav-gap);

    box-sizing: border-box;
  }

  /* اليسار: nav-right يأخذ المساحة */
  nav.main-nav .nav-right{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* nav-links: كل مجموعات الـ UL في صف واحد */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
     gap: var(--pst-btn-gap);
    
   
  }








.floating-cart-badge{
margin-top: 2vh;
margin-left: 2vw;
z-index: 9999;

}




 .nav-links{
 transform: translateX(-16%);

 }

  /* تنظيف ULs داخل nav-links */
  nav.main-nav .nav-links ul{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
     gap: var(--pst-nav-gap);
  }


  /* ✅ توحيد شكل/عرض الأزرار الأساسية */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button
 {
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
display: flex;
    padding-inline: 1rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
  }

}









/* Mobile Portrait */
@media (orientation: portrait) and (max-width: 367px) {

  

  :root{
     --pst-btn-font-size: 0.95rem;
    --pst-nav-btn-h: 30px;     /* ارتفاع موحد */
    --pst-nav-btn-w: 7rem;  /* عرض موحد (عدّله) */
    --pst-nav-gap: 1rem;
     --pst-btn-gap: 1.7rem;
  }


nav.main-nav a,
nav.main-nav button{
  font-size: var(--pst-btn-font-size);
  line-height: 1;                 /* مهم للتوسيط العمودي */
  font-weight: 500;               /* اختياري */
}



  /* NAV BAR */
  nav.main-nav{
    position: sticky;
    top: 0vh;
    
align-items: center;
width: 100%;
    display: flex;
    justify-content: center;

    padding-inline: 2vw;
    box-sizing: border-box;
    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);
  }

  /* nav container: صف واحد */
  nav.main-nav .nav-container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: var(--pst-nav-gap);

    box-sizing: border-box;
  }

  /* اليسار: nav-right يأخذ المساحة */
  nav.main-nav .nav-right{
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* nav-links: كل مجموعات الـ UL في صف واحد */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
     gap: var(--pst-btn-gap);
     margin-top: 18vh;
     margin-left: 2vw;
    
   
  }








.floating-cart-badge{
margin-top: 2vh;
margin-left: 2vw;
z-index: 9999;

}









  /* تنظيف ULs داخل nav-links */
  nav.main-nav .nav-links ul{
   
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
     gap: var(--pst-nav-gap);
  }


  /* ✅ توحيد شكل/عرض الأزرار الأساسية */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button
  {
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: 36px;
    gap: var(--pst-btn-gap);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-inline: 2rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
  }


}














/* Mobile Portrait */
@media (orientation: portrait) and (min-width: 368px) and (max-width: 480px) {

  

  :root{
     --pst-btn-font-size: 0.94rem;
    --pst-nav-btn-h: 34px;     /* ارتفاع موحد */
    --pst-nav-btn-w: 6rem;  /* عرض موحد (عدّله) */
    --pst-nav-gap: 0rem;
     --pst-btn-gap: 0rem;
  }


nav.main-nav a,
nav.main-nav button{
  font-size: var(--pst-btn-font-size);
  line-height: 1;                 /* مهم للتوسيط العمودي */
  font-weight: 500;               /* اختياري */
}



  /* NAV BAR */
  nav.main-nav{
    position: sticky;
    top: 0vh;
   
align-items: center;
width: 100%;
    display: flex;
    justify-content: center;
;
    padding-inline: 0vw;
    box-sizing: border-box;
    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);
  }

  /* nav container: صف واحد */
  nav.main-nav .nav-container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: var(--pst-nav-gap);

    box-sizing: border-box;
  }

  /* اليسار: nav-right يأخذ المساحة */
  nav.main-nav .nav-right{
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* nav-links: كل مجموعات الـ UL في صف واحد */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
     gap: var(--pst-btn-gap);
     margin-top: 18vh;
     margin-left: -1vw;
    
   
  }



.pastura-btn {
  font-size: 2.7vw !important;
}


.floating-cart-badge{
margin-top: 2vh;
margin-left: 2vw;
z-index: 9999;

}




  /* تنظيف ULs داخل nav-links */
  nav.main-nav .nav-links ul{
   
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
     gap: var(--pst-nav-gap);
  }


  /* ✅ توحيد شكل/عرض الأزرار الأساسية */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button
 {
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: 36px;

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

    padding-inline: 2rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
  }
}




/*===========================================
  Tablet Portrait
============================================*/
@media (orientation: portrait) and (min-width: 490px) and (max-width: 1249px) {

  /* =========================
     0) Variables
  ========================== */
  :root{
    --pst-btn-font-size: 0.95rem;
    --pst-nav-btn-h: 34px;      /* ارتفاع موحّد */
    --pst-nav-btn-w: 8rem;      /* عرض موحّد */
    --pst-nav-gap: 0.7rem;      /* ✅ المسافة بين مجموعات الأزرار (UL) */
    --pst-btn-gap: 0.2rem;      /* ✅ المسافة داخل الزر (أيقونة + نص) إن وُجدت */
  }

  /* =========================
     1) Base text styling
  ========================== */
  nav.main-nav a,
  nav.main-nav button{
    font-size: var(--pst-btn-font-size);
    line-height: 1;
    font-weight: 500;
  }

  /* =========================
     2) NAV BAR (main wrapper)
  ========================== */
  nav.main-nav{
    position: sticky;

   

  
   

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

   
    box-sizing: border-box;

    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);
  }

  /* =========================
     3) nav-container
  ========================== */
  nav.main-nav .nav-container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;

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

    /* (اختياري) لو عندك عناصر متعددة داخل nav-container */
    gap: var(--pst-nav-gap);

    box-sizing: border-box;
  }

  /* =========================
     4) nav-right
  ========================== */
  nav.main-nav .nav-right{
   
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* =========================
     5) nav-links (UL groups row)
  ========================== */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
    justify-content: center;

    /* ✅ NAV GAP الحقيقي بين المجموعات الأربع (UL) */
    gap: var(--pst-nav-gap);

    margin-top: 14vh;
    margin-left: -26vw;
  }

  /* ✅ كل UL مجموعة: لازم تكون flex حتى ما يصير سلوك غريب */
  nav.main-nav .nav-links > ul{
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ✅ إن وُجد li، خلّيه flex */
  nav.main-nav .nav-links > ul > li{
    display: flex;
    align-items: center;
  }

  /* =========================
     6) Buttons (links + policies button)
  ========================== */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button{
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: var(--pst-nav-btn-h);

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

    /* ✅ BTN GAP داخل الزر (يفيد فقط إذا في أيقونة + نص) */
    gap: var(--pst-btn-gap);

    padding-inline: 2rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
  }




  /* =========================
     7) Cart / Badge
  ========================== */
  .floating-cart-badge{
    margin-top: 2vh;
    margin-left: 2vw;
    z-index: 9999;
  }


}

/* ==========================================
   💻  TABLET LANDSCAPE (منظّم + gap صحيح)
   ========================================== */
@media only screen
  and (min-device-width: 899px)
  and (max-device-width: 1370px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {

  /* =========================
     0) Variables
  ========================== */
  :root{
    --pst-btn-font-size: 0.95rem;
    --pst-nav-btn-h: 34px;     /* ارتفاع موحّد */
    --pst-nav-btn-w: 8rem;     /* عرض موحّد */
    --pst-nav-gap: 0.7rem;     /* ✅ مسافة بين مجموعات الأزرار (UL) */
    --pst-btn-gap: 0.7rem;     /* ✅ مسافة داخل الزر (أيقونة+نص) إن وُجدت */
  }

  /* =========================
     1) Base text styling
  ========================== */
  nav.main-nav a,
  nav.main-nav button{
    font-size: var(--pst-btn-font-size);
    line-height: 1;
    font-weight: 500;
  }

  /* =========================
     2) NAV BAR
  ========================== */
  nav.main-nav{
    position: sticky;
    top: 0;

   

    width: 100%;
    

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

    padding-inline: 2vw;
    box-sizing: border-box;

    background-color: rgba(179, 201, 185, 0.9);
    box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.1);

    
  }

  /* =========================
     3) nav-container
  ========================== */
  nav.main-nav .nav-container{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;

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

    box-sizing: border-box;
  }

  /* =========================
     4) nav-right
  ========================== */
  nav.main-nav .nav-right{
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* =========================
     5) nav-links (UL groups row)
  ========================== */
  nav.main-nav .nav-links{
    display: flex;
    align-items: center;
    justify-content: center;

    /* ✅ NAV GAP الحقيقي بين المجموعات (UL) */
    gap: var(--pst-nav-gap);

    /* بدل .nav-links{ transform: translateX(-35%) } خليها هنا بشكل أوضح */
    transform: translateX(-9%);
  }

  /* ✅ كل UL مجموعة (اعملها flex لتكون ثابتة) */
  nav.main-nav .nav-links > ul{
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ✅ li flex (يفيد مع dropdown/contact) */
  nav.main-nav .nav-links > ul > li{
    display: flex;
    align-items: center;
  }

  /* =========================
     6) Buttons (links + policies button)
  ========================== */
  nav.main-nav .nav-links a,
  nav.main-nav .nav-links button{
    width: var(--pst-nav-btn-w);
    height: var(--pst-nav-btn-h);
    min-height: var(--pst-nav-btn-h);

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

    /* ✅ BTN GAP داخل الزر (لن يظهر إذا نص فقط) */
    gap: var(--pst-btn-gap);

    padding-inline: 1rem;
    padding-block: 0;

    box-sizing: border-box;
    white-space: nowrap;
  }

  /* =========================
     7) Cart / Badge
  ========================== */
  .floating-cart-badge{
    margin-top: 2vh;
    margin-left: 2vw;
    z-index: 9999;
  }

}