/* =========================
STORE HEADER HERO
نفس ارتفاع السلايدر بالهوم
========================= */
header.header-hero{
position: relative;
width: 100%;
height: 610px;              /* نفس .hero-slide img */
overflow: hidden;
}
/* خلي الخلفية تملأ الهيدر */
header.header-hero > div{
position: absolute;
inset: 0;                   /* top/right/bottom/left:0 */
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/* نفس بريكبوينتات السلايدر */
@media (max-width: 992px){
header.header-hero{ height: 360px; }
}
@media (max-width: 576px){
header.header-hero{ height: 181px !important; }
}
/* =========================
GLOBAL FONT
========================= */
:root{
--store-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
/* ✅ خدي اللون الديناميك من النظام */
--brand: var(--primary-bg);
--brandText: var(--main-text-color);
}
html, body,
body, button, input, select, textarea,
h1,h2,h3,h4,h5,h6,
p,span,a,li,label,small,strong,em,
div,section,article,nav,header,footer{
font-family: var(--store-font) !important;
}
/* =========================
NAVBAR BASE
========================= */
#navbar{
background:#fff !important;
box-shadow: 0 2px 14px rgba(0,0,0,.06);
z-index:1000 !important;
}
/* =========================================================
DESKTOP ONLY
========================================================= */
@media (min-width: 992px){
#navbar .navbar{
position:relative !important;
background:transparent !important;
padding-top:16px !important;
padding-bottom:22px !important;
min-height:150px !important;
flex-wrap:wrap !important;
overflow:visible !important;
transition: all .22s ease !important;
}
/* اللوغو بالنص */
#navbar .navbar-brand{
position:absolute !important;
left:50% !important;
top:16px !important;
transform:translateX(-50%) !important;
margin:0 !important;
z-index:60 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
transition: all .22s ease !important;
}
#navbar .navbar-brand img{
height:44px !important;
width:50px !important;
object-fit:cover !important;
display:block !important;
box-shadow:none !important;
transition: all .22s ease !important;
}
/* خلي المحتوى تحت اللوغو */
#navbar #navbarSupportedContent{
width:100% !important;
padding-top:82px !important;
padding-bottom:10px !important;
background:transparent !important;
}
/* أيقونات (بحث/سلة/لغة) */
#navbar .left-part{
position:absolute !important;
left:0 !important;
right:0 !important;
top:16px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
direction:ltr !important;
z-index:70 !important;
transition: all .22s ease !important;
}
#navbar .left-part > li{ direction:rtl; }
/* ترتيب عربي (افتراضي): search - orders - lang - cart يمين */
#navbar .left-part .margin-link-url-search-left-part{ order:1; padding:0 !important; }
#navbar .left-part #dropdownMenuOrder{ order:2; }
#navbar .left-part .lang-div{ order:3; }
#navbar .left-part .nav-item-cart{ order:99; margin-left:auto !important; }
/* زر السلة */
#navbar .left-part .nav-item-cart .nav-link{
width:44px !important;
height:44px !important;
border-radius:999px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
position:relative !important;
}

/* البحث (مغلق = أيقونة) */
#navbar #searchInput.search-input{
width:44px !important;
height:44px !important;
border-radius:999px !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
padding:0 !important;
cursor:pointer !important;
background-repeat:no-repeat !important;
background-position:center !important;
color:transparent !important;
caret-color:transparent !important;
transition: width .25s ease, padding .25s ease, background-position .25s ease !important;
}
#navbar #searchInput.search-input::placeholder{ color:transparent !important; }
/* البحث (مفتوح = يتمدد) */
#navbar .margin-link-url-search-left-part.search-open #searchInput.search-input{
width:320px !important;
max-width:36vw !important;
padding:0 16px 0 44px !important;
background-position:left 16px center !important;
color:#222 !important;
caret-color:auto !important;
cursor:text !important;
direction:rtl !important;
text-align:right !important;
}
#navbar .margin-link-url-search-left-part.search-open #searchInput.search-input::placeholder{ color:#999 !important; }
/* فتح البحث على focus */
#navbar #searchInput.search-input:focus{
width:320px !important;
max-width:36vw !important;
padding:0 16px 0 44px !important;
background-position:left 16px center !important;
color:#222 !important;
caret-color:auto !important;
cursor:text !important;
direction:rtl !important;
text-align:right !important;
}
#navbar #searchInput.search-input:focus::placeholder{ color:#999 !important; }
/* ====== MENU ROW (مع أسهم) ====== */
#navbar .menu-wrap{ position:relative; width:100%; }
#navbar #menuLinks.navbar-nav-links{
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:30px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
white-space:nowrap !important;
-webkit-overflow-scrolling:touch !important;
scrollbar-width:none !important;
padding:0 52px !important;
margin:0 !important;
}
#navbar #menuLinks.navbar-nav-links::-webkit-scrollbar{ display:none !important; }
#navbar #menuLinks > li{ flex:0 0 auto; }
#navbar #menuLinks .nav-link,
#navbar #menuLinks .tags-item-link{
display:inline-flex !important;
align-items:center !important;
padding:17px 0 14px !important;
background:transparent !important;
border-radius:0 !important;
font-weight:600 !important;
font-size:14px !important;
color:#222 !important;
position:relative !important;
}
#navbar .menu-scroll-btn{
position:absolute !important;
top:50% !important;
transform:translateY(-50%) !important;
width:28px !important;
height:28px !important;
border-radius:999px !important;
border:0 !important;
background:#f6f8fb !important;
color:#222 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
z-index:80 !important;
opacity:.95 !important;
user-select:none !important;
direction:ltr !important;
font-size:18px !important;
line-height:1 !important;
}
#navbar .menu-scroll-left{ left:-45px !important; }
#navbar .menu-scroll-right{ right:-45px !important; }
/* ✅ إذا كان النظام حاطط is-shrink بصفحات داخلية، نثبّت نفس ستايل الديسكتوب */
#navbar.is-shrink .navbar{
padding-top:16px !important;
padding-bottom:22px !important;
min-height:150px !important;
}
#navbar.is-shrink .navbar-brand{ top:16px !important; }
#navbar.is-shrink .navbar-brand img{ height:44px !important; }
#navbar.is-shrink .left-part{ top:16px !important; }
#navbar.is-shrink #navbarSupportedContent{
padding-top:82px !important;
padding-bottom:10px !important;
}
}
/* =========================================================
MOBILE / TABLET
========================================================= */
@media (max-width: 991.98px){
html, body{ overflow-x:hidden !important; max-width:100% !important; }
#mySidenav2{ max-width:100vw !important; }
#navbar .navbar{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:70px !important;
padding:10px 0 !important;
}
#navbar .navbar-brand{
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
margin:0 !important;
max-width:62% !important;
white-space:nowrap !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
#navbar .navbar-brand img{
height:40px !important;
width:auto !important;
object-fit:contain !important;
display:block !important;
box-shadow:none !important;
}
#navbar .menu-collapse{
position:absolute !important;
left:0px !important;
top:50% !important;
transform:translateY(-50%) !important;
z-index:90 !important;
}
#navbar .navbar-nav-cart-mobile{
position:absolute !important;
right:16px !important;
top:50% !important;
transform:translateY(-50%) !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
gap:15px !important;
z-index:90 !important;
direction:ltr !important;
}
#navbar .navbar-nav-cart-mobile .nav-link{ padding:0 !important; }
#navbar .navbar-nav-cart-mobile .badge{
position:absolute !important;
top:0px !important;

left:auto !important;
background-color:var(--main-color) !important;
font-size:9px !important;
height:15px !important;
padding:4px 5px !important;
color:#fff !important;
border-radius:50% !important;
font-weight:bold !important;
}
}
/* =========================================================
EN / LTR MODE (إذا الصفحة dir=ltr)
search + lang RIGHT  | cart LEFT
+ تقليل المسافة بين البحث واللغة
========================================================= */
@media (min-width: 992px){
html[dir="ltr"] #navbar .left-part > li{ direction:ltr !important; }
html[dir="ltr"] #navbar .left-part{ gap:10px !important; }
html[dir="ltr"] #navbar .left-part .nav-item-cart{
margin-left:0 !important;
margin-right:auto !important;
}
#navbar .left-part .margin-link-url-left-part{
order: 2 !important;
}
html[dir="ltr"] #navbar .left-part .margin-link-url-left-part{
order: 2 !important;
}
html[dir="ltr"] #navbar .left-part .lang-div{
order:99 !important;
margin:0 !important;
}
html[dir="ltr"] #navbar .left-part .margin-link-url-search-left-part + .lang-div{
margin-left:8px !important;
}
html[dir="ltr"] #navbar .margin-link-url-search-left-part.search-open #searchInput.search-input,
html[dir="ltr"] #navbar #searchInput.search-input:focus{
direction:ltr !important;
text-align:left !important;
}
}
@media (min-width: 992px) {
#navbar .navbar-brand {
font-size: 0;
}
}
/* =========================
Center the menu row (desktop)
========================= */
@media (min-width: 992px){
/* وسّط الحاوية تبع سطر الأقسام */
#navbar #navbarSupportedContent{
display:flex !important;
justify-content:center !important;
}
/* وسّط قائمة المينيو نفسها */
#navbar #menuLinks,
#navbar .navbar-nav-links{
width:auto !important;
margin:0 auto !important;
justify-content:center !important;
text-align:center !important;
}
@media (min-width: 992px) {
#navbar #menuLinks, #navbar .navbar-nav-links {
gap: 40px;
}
}
/* تأكيد توسيط العناصر */
#navbar #menuLinks > li,
#navbar .navbar-nav-links > li{
text-align:center !important;
}
}
/* =========================
Menu text: black + bold
========================= */
@media (min-width: 992px){
#navbar #menuLinks .nav-link,
#navbar #menuLinks .tags-item-link,
#navbar .navbar-nav-links .nav-link,
#navbar .navbar-nav-links .tags-item-link{
color:#000 !important;
font-weight:700 !important;
}
/* hover */
#navbar #menuLinks .nav-link:hover,
#navbar #menuLinks .tags-item-link:hover,
#navbar .navbar-nav-links .nav-link:hover,
#navbar .navbar-nav-links .tags-item-link:hover{
color:#000 !important;
}
}
/* =========================
LUX FOOTER (Scoped)
========================= */
#footer_dark {
position: relative;
background: linear-gradient(180deg, #f9f9f99e 0%, #c4c4c47d 100%) !important;
color: #fff !important;
padding: 48px 0 34px !important;
border-top: 1px solid rgba(255, 255, 255, .10);
overflow: hidden;
}
#footer_dark::before{
content:"";
position:absolute;
inset:-120px -80px auto -80px;
height:220px;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 60%);
pointer-events:none;
}
#footer_dark::after{
content:"";
position:absolute;
inset:auto -80px -140px -80px;
height:240px;
background: radial-gradient(circle at 70% 80%, rgba(255,255,255,.08), transparent 60%);
pointer-events:none;
}
#footer_dark .container{ position:relative; z-index:2; }
#footer_dark h6{
color: #201f1f !important;
font-weight:800;
letter-spacing:.6px;
margin-bottom:14px;
position:relative;
}
#footer_dark h6::after{
content:"";
display:block;
width:44px;
height:2px;
margin-top:10px;
background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0));
border-radius:99px;
}
#footer_dark p{
color:rgb(60 24 52 / 84%) !important;
line-height:1.75;
margin-bottom:0;
}
#footer_dark .part-1,
#footer_dark .part-2,
#footer_dark .part-3{
padding: 18px 18px;
border-radius: 18px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 40px rgba(0,0,0,.25);
height:100%;
}
#footer_dark .logo-name-footer{
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
}
#footer_dark .logo-name-footer img{
width:56px;
height:56px;
object-fit:cover;
border: 2px solid rgba(255,255,255,.35);
box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
#footer_dark .logo-name-footer h5{
margin:0;
color: #1e1e1e;
font-weight:900;
letter-spacing:.2px;
font-size:18px;
}
#footer_dark .part-2 i[data-feather]{
width:18px;
height:18px;
stroke: rgba(255,255,255,.80);
margin-right:8px;
}
@media (max-width: 991.98px) {
#navbar .navbar-brand {
font-size: 0px;
}
}
@media (max-width: 991.98px) {
#navbar .navbar-nav-cart-mobile .nav-link {
padding: 8px !important;
}
}
@media only screen and (max-width: 767px) {
footer .part-2 {
margin: 4px 0px;
}
}
#footer_dark svg.feather {
width: 16px !important;
height: 27px !important;
}
  [dir="rtl"] #footer_dark .part-2 i[data-feather]{
    margin-right:0;
    margin-left:8px;
  }
  #footer_dark a.contact{
    color: rgb(60 24 52 / 84%) !important;
    text-decoration:none !important;
    border-bottom: 1px solid rgba(255,255,255,.18);
    padding-bottom:2px;
    transition: opacity .2s ease, border-color .2s ease;
  }
  #footer_dark a.contact:hover{
    opacity:1;
    border-color: rgba(255,255,255,.45);
  }
  #footer_dark .part-3 ul.nav{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
  }
  #footer_dark .part-3 .nav-link{
    color: rgb(60 24 52 / 84%) !important;
    text-decoration:none !important;
    padding:0 !important;
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition: transform .18s ease, opacity .18s ease;
    opacity:.9;
  }
  #footer_dark .part-3 .nav-link::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:999px;
    background: rgb(255 255 255);
    box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  }
  #footer_dark .part-3 .nav-link:hover{
    transform: translateX(4px);
    opacity:1;
  }
  [dir="rtl"] #footer_dark .part-3 .nav-link:hover{
    transform: translateX(-4px);
  }
  #footer_dark .contact-social{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
  }
  #footer_dark .contact-social a{
    width:42px;
    height:42px;
    border-radius:999px;
    display:contents;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 26px rgba(0,0,0,.28);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
    text-decoration:none !important;
  }
  #footer_dark .contact-social a:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
  }
  #footer_dark .contact-social i {
    color: rgb(0 0 0 / 90%);
    font-size:18px;
  }
  #footer_dark .logo{
    margin-top:26px;
    padding-top:18px;
    border-top: 1px solid rgba(255,255,255,.10);
    display:flex;
    justify-content:center;
  }
  #footer_dark .logo span{
    color: rgba(255,255,255,.70);
  }
  #footer_dark .logo img{
    height:26px;
    margin-left:10px;
    opacity:.95;
  }
  [dir="rtl"] #footer_dark .logo img{
    margin-left:0;
    margin-right:10px;
  }
  @media (max-width: 767px){
    #footer_dark{
      padding:34px 0 24px !important;
    }
    #footer_dark .part-1,
    #footer_dark .part-2,
    #footer_dark .part-3{
      padding:16px 14px;
      margin-bottom:14px;
    }
    #footer_dark .logo-name-footer img{
      width:52px;
      height:52px;
    }
  }
  @media (min-width: 768px) {
    .margin-link-url-left-part {
      margin-left: 0px;
      margin-right: 0px;
    }
  }
  #footer .feather {
    background-color: var(--brand) !important;
    /* ✅ ديناميك */
    color: var(--brandText, #fff) !important;
    width: 16px;
  }
  /* =========================
  FIX BADGE POSITION (DESKTOP)
  خلي الرقم يلزق بأيقونة السلة + ينقلب بالـ EN
  ========================= */
  @media (min-width: 992px){
    /* مهم: خلي كل nav-link يكون مرجع للـ badge */
    #navbar .left-part a.nav-link{
      position:relative !important;
    }
    /* الافتراضي (RTL): يمين */
    /* =========================
    STORE HEADER HERO
    نفس ارتفاع السلايدر بالهوم
    ========================= */
    header.header-hero{
      position: relative;
      width: 100%;
      height: 610px;
      /* نفس .hero-slide img */
      overflow: hidden;
    }
    /* خلي الخلفية تملأ الهيدر */
    header.header-hero > div{
      position: absolute;
      inset: 0;
      /* top/right/bottom/left:0 */
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    /* نفس بريكبوينتات السلايدر */
    @media (max-width: 992px){
      header.header-hero{
        height: 360px;
      }
    }
    @media (max-width: 576px){
      header.header-hero{
        height: 181px !important;
      }
    }
    .mr-1, .mx-1 {
      margin-right: 0rem !important;
    }
    /* ✅ 1) عرّفي براند آمن مع fallback */
    #footer_dark svg.feather {
      color: var(--main-color);
    }
    #footer_dark .part-3 .nav-link::before {
      background: var(--main-color);
    }
    /* =========================================
    CART PAGE: show logo only in navbar
    ========================================= */
    /* اخفاء كل أزرار وروابط النافبار بصفحة السلة */
    html.cart-page-only-logo #navbar .left-part,
    html.cart-page-only-logo #navbar #navbarSupportedContent,
    html.cart-page-only-logo #navbar .navbar-nav-cart-mobile,
    html.cart-page-only-logo #navbar .menu-collapse,
    html.cart-page-only-logo #navbar .search-mobile-div,
    body.cart-page-only-logo #navbar .left-part,
    body.cart-page-only-logo #navbar #navbarSupportedContent,
    body.cart-page-only-logo #navbar .navbar-nav-cart-mobile,
    body.cart-page-only-logo #navbar .menu-collapse,
    body.cart-page-only-logo #navbar .search-mobile-div {
      display: none !important;
    }
    /* ديسكتوب */
    @media (min-width: 992px) {
      html.cart-page-only-logo #navbar .navbar,
      body.cart-page-only-logo #navbar .navbar {
        min-height: 80px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
      }
      html.cart-page-only-logo #navbar .navbar-brand,
      body.cart-page-only-logo #navbar .navbar-brand {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 100 !important;
      }
    }
    /* موبايل */
    @media (max-width: 991.98px) {
      html.cart-page-only-logo #navbar .navbar,
      body.cart-page-only-logo #navbar .navbar {
        min-height: 70px !important;
        padding: 10px 0 !important;
        justify-content: center !important;
      }
      html.cart-page-only-logo #navbar .navbar-brand,
      body.cart-page-only-logo #navbar .navbar-brand {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: 70% !important;
        z-index: 100 !important;
      }
    }
    /* التاغ العادي */
    #navbar #menuLinks .nav-link,
    #navbar #menuLinks .tags-item-link,
    #navbar .navbar-nav-links .nav-link,
    #navbar .navbar-nav-links .tags-item-link{
      position: relative !important;
      transition: color .2s ease, background-color .2s ease, border-color .2s ease !important;
    }
    /* التاغ المحدد */
    #navbar #menuLinks .nav-link.active-tag,
    #navbar #menuLinks .tags-item-link.active-tag,
    #navbar .navbar-nav-links .nav-link.active-tag,
    #navbar .navbar-nav-links .tags-item-link.active-tag{
      color: var(--main-color) !important;
    }
    /* خط تحت التاغ المحدد */
    #navbar #menuLinks .nav-link.active-tag::after,
    #navbar #menuLinks .tags-item-link.active-tag::after,
    #navbar .navbar-nav-links .nav-link.active-tag::after,
    #navbar .navbar-nav-links .tags-item-link.active-tag::after{
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 8px !important;
      height: 3px !important;
      border-radius: 999px !important;
      background: var(--main-color) !important;
    }
    #navbar #menuLinks .nav-link,
    #navbar #menuLinks .tags-item-link,
    #navbar .navbar-nav-links .nav-link,
    #navbar .navbar-nav-links .tags-item-link{
      position: relative !important;
      transition: color .2s ease !important;
    }
    #navbar #menuLinks .nav-link.active-tag,
    #navbar #menuLinks .tags-item-link.active-tag,
    #navbar .navbar-nav-links .nav-link.active-tag,
    #navbar .navbar-nav-links .tags-item-link.active-tag{
      color: var(--main-color) !important;
    }
    #navbar #menuLinks .nav-link.active-tag::after,
    #navbar #menuLinks .tags-item-link.active-tag::after,
    #navbar .navbar-nav-links .nav-link.active-tag::after,
    #navbar .navbar-nav-links .tags-item-link.active-tag::after{
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      bottom: 4px !important;
      height: 2px !important;
      border-radius: 999px !important;
      background: var(--main-color) !important;
      transform: none !important;
    }
    /* FIX BADGE POSITION */
    @media (min-width: 992px){
      #navbar .left-part #dropdownMenuOrder .nav-link,
      #navbar .left-part .nav-item-cart .nav-link{
        position: relative !important;
      }
      #navbar .left-part #dropdownMenuOrder .badge,
      #navbar .left-part .nav-item-cart .badge,
      #navbar .left-part .badge{
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        left: auto !important;
      }
    }
    @media (max-width: 991.98px){
      #navbar .navbar-nav-cart-mobile .nav-link{
        position: relative !important;
      }
      #navbar .navbar-nav-cart-mobile .badge{
        position: absolute !important;
        top: 2px !important;
        right: 1px !important;
        left: auto !important;
      }
    }
    .badge {
      height: 20px;
    }
    @media (max-width: 991.98px) {
      .badge {
        right: 0px !important;
      }
    }
    .margin-link-url {
      margin-right: 0px !important;
      margin-left: 0px;
    }
    .mb-3 {
      color: rgb(60 24 52 / 84%) !important;
    }
  }