/* Centered overlay logo (works even if theme locks layout) */
.fa76-center-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

.fa76-center-logo img {
  max-height: 32px !important;
  width: auto !important;
  display: block !important;
}

@media (min-width: 769px) {
  .fa76-center-logo img { max-height: 36px !important; }
}
/* نزّل اللوقو قليلًا لتوسيطه رأسيًا */
.fa76-center-logo{
  top: calc(50% + 10px) !important; /* جرّب 10px أولاً */
}
/* زيادة ارتفاع الهيدر لإعطاء مساحة فخمة للوقو */
header,
.site-header,
.salla-header {
  min-height: 96px !important;   /* جرّب 96 – 110 */
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
/* تكبير اللوقو ليملأ المساحة مثل Zales */
.fa76-center-logo img {
  max-height: 48px !important;   /* الأساس */
}

@media (min-width: 769px) {
  .fa76-center-logo img {
    max-height: 56px !important; /* ديسكتوب */
  }
}

/* ضبط التمركز الرأسي بعد تكبير الهيدر */
.fa76-center-logo{
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* تكبير أوضح للوقو - Mobile */
.fa76-center-logo img{
  max-height: 58px !important;  /* كان 48 - نخليه 58 */
}

/* Desktop */
@media (min-width: 769px){
  .fa76-center-logo img{
    max-height: 70px !important; /* كان 56 - نخليه 70 */
  }
}
/* Mobile: نزّل اللوقو ليكون بمنتصف الجزء الأبيض (تحت البحث) */
@media (max-width: 768px){
  .fa76-center-logo{
    top: 62% !important;  /* جرّب 62% */
  }
}
/* اجعل تمركز اللوقو بالنسبة للهيدر فقط */
header,
.site-header,
.salla-header {
  position: relative !important;
}
/* تكبير لوقو FA76 */
.site-header .logo,
.site-header .logo img,
header .logo,
header .logo img {
  max-height: 72px; /* الديسكتوب */
}














@media (max-width: 768px) {
  .site-header .logo,
  .site-header .logo img,
  header .logo,
  header .logo img {
    max-height: 54px; /* الجوال */
  }
}
.site-header .logo span,
.site-header .logo a {
  font-size: 28px;
  line-height: 1.2;
}

/* ===== FA76 Logo Size Boost (Desktop + Mobile) ===== */

/* استهدف صورة اللوقو أينما كانت */
header img,
.site-header img,
.salla-header img {
  /* لا نطبق على كل الصور، فقط اللي داخل منطقة اللوقو */
}

header .logo img,
.site-header .logo img,
.salla-header .logo img,
header [class*="logo"] img,
.site-header [class*="logo"] img,
.salla-header [class*="logo"] img {
  max-height: 92px !important;   /* الديسكتوب */
  width: auto !important;
}

/* لو اللوقو SVG داخل رابط */
header .logo svg,
.site-header .logo svg,
.salla-header .logo svg,
header [class*="logo"] svg,
.site-header [class*="logo"] svg,
.salla-header [class*="logo"] svg {
  height: 92px !important;
  width: auto !important;
}

/* الجوال */
@media (max-width: 768px) {
  header .logo img,
  .site-header .logo img,
  .salla-header .logo img,
  header [class*="logo"] img,
  .site-header [class*="logo"] img,
  .salla-header [class*="logo"] img {
    max-height: 64px !important;
  }

  header .logo svg,
  .site-header .logo svg,
  .salla-header .logo svg,
  header [class*="logo"] svg,
  .site-header [class*="logo"] svg,
  .salla-header [class*="logo"] svg {
    height: 64px !important;
  }
}











/* ===== FA76 Trust Marquee (Above Header) ===== */

.fa76-trust-ticker{
  background:
#6b2e3a; /* اللون العودي */
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.fa76-trust-track{
  display:inline-flex;
  align-items:center;
  gap:56px;
  padding:10px 0;
  animation: fa76-marquee 36s linear infinite; /* سرعة بطيئة */
}

.fa76-trust-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
}

.fa76-trust-item a{
  color:#fff;
  text-decoration:underline;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* ضبط أيقونة واتساب */
.fa76-trust-item svg{
  width:16px;
  height:16px;
  display:block;
  position:relative;
  top:1px;
  fill:currentColor;
}

/* حركة الشريط (من اليسار إلى اليمين) */
@keyframes fa76-marquee{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}











/* ========== Desktop only: logo right + menu centered ========== */
@media (min-width: 992px){

  /* 1) خلّ القائمة (روابط التصنيفات) تتوسّط */
  header .store-header__nav,
  header nav,
  header .navbar,
  header .navbar-nav,
  header .nav,
  header .main-menu {
    justify-content: center !important;
    text-align: center !important;
  }

  header .navbar-nav,
  header .nav,
  header .main-menu {
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 2) حط الشعار يمين (بدون ما نكسر الجوال) */
  header {
    position: relative;
  }

  header .store-header__logo,
  header .store-logo,
  header .header-logo,
  header a.logo,
  header .logo {
    position: absolute !important;
    right: 24px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
  }

  /* 3) أعطِ مساحة لليمين حتى ما تتزاحم القائمة مع الشعار */
  header .store-header__nav,
  header nav,
  header .navbar,
  header .main-menu {
    padding-right: 220px !important; /* زوّدها/قللها حسب حجم شعارك */
  }

}























/* ========== Desktop only: logo right + menu centered ========== */
@media (min-width: 992px){

  /* 1) خلّ القائمة (روابط التصنيفات) تتوسّط */
  header .store-header__nav,
  header nav,
  header .navbar,
  header .navbar-nav,
  header .nav,
  header .main-menu {
    justify-content: center !important;
    text-align: center !important;
  }

  header .navbar-nav,
  header .nav,
  header .main-menu {
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 2) حط الشعار يمين (بدون ما نكسر الجوال) */
  header {
    position: relative;
  }

  header .store-header__logo,
  header .store-logo,
  header .header-logo,
  header a.logo,
  header .logo {
    position: absolute !important;
    right: 24px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
  }

  /* 3) أعطِ مساحة لليمين حتى ما تتزاحم القائمة مع الشعار */
  header .store-header__nav,
  header nav,
  header .navbar,
  header .main-menu {
    padding-right: 220px !important; /* زوّدها/قللها حسب حجم شعارك */
  }

}


/* ===== Desktop: menu under logo (like reference) ===== */
@media (min-width: 992px){

  /* خلّ الهيدر يسمح بتكديس العناصر عموديًا */
  header .store-header__inner,
  header .store-header__container,
  header .store-header,
  header .header-inner,
  header .header-wrapper{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* الشعار في الوسط */
  header .store-header__logo,
  header .store-logo,
  header .header-logo,
  header a.logo,
  header .logo{
    order: 1 !important;
    margin: 10px 0 6px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: center !important;
  }

  /* القائمة/الروابط تحت الشعار */
  header .store-header__nav,
  header nav,
  header .navbar,
  header .main-menu{
    order: 2 !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  /* توسيط عناصر القائمة */
  header .navbar-nav,
  header .main-menu,
  header .nav{
    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
  }
}

/* ===== FIX: Desktop header two rows (logo then menu) ===== */
@media (min-width: 992px){

  /* 1) امنع أي تموضع/تحريك سابق للشعار */
  header .logo,
  header a.logo,
  header .store-logo,
  header .store-header__logo,
  header img[alt*="FA76"],
  header img[alt*="FA 76"]{
    position: static !important;
    transform: none !important;
    inset: auto !important;
    margin: 10px auto 6px !important;
    display: block !important;
    max-height: 58px !important; /* تقدر تزودها لاحقاً */
    width: auto !important;
  }

  /* 2) اجعل الهيدر عمودي: شعار ثم قائمة */
  header .store-header__inner,
  header .store-header__container,
  header .header-wrapper,
  header .header-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 3) القائمة تحت الشعار وبسطر واحد */
  header nav,
  header .store-header__nav,
  header .navbar,
  header .main-menu{
    width: 100% !important;
    margin-top: 8px !important;
  }

  header .navbar-nav,
  header .main-menu,
  header .nav{
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;     /* مهم: يمنع نزول "خلخال" لحاله */
    gap: 22px !important;
    white-space: nowrap !important;
  }

  /* 4) خلي روابط القائمة نفسها ما تنكسر */
  header .navbar-nav a,
  header .main-menu a,
  header .nav a{
    white-space: nowrap !important;
  }
}

@media (min-width: 992px){
  header .navbar-nav a,
  header .main-menu a,
  header .nav a{ font-size: 14px !important; }
}

/* ===== C1: نزّل قائمة الديسكتوب ووسّطها تحت الشعار ===== */
@media (min-width: 992px){

  /* نزول القائمة (جرّب 14px إلى 28px) */
  header nav,
  header .store-header__nav,
  header .navbar,
  header .main-menu{
    margin-top: 45px !important; /* <-- زوّد/قلّل هنا */
  }

  /* توسيط القائمة فعلياً */
  header .navbar-nav,
  header .main-menu,
  header .nav{
    justify-content: center !important;
  }

  /* لو فيه أي انحراف بسبب padding يمين/يسار داخل الحاوية */
  header .store-header__nav,
  header .navbar,
  header .main-menu{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}












/* ===== C1 Fix: تقليل ارتفاع الهيدر/الفراغ تحت القائمة (ديسكتوب فقط) ===== */
@media (min-width: 992px){

  /* 1) نزول بسيط للقائمة تحت الشعار */
  header .store-header__nav,
  header nav,
  header .navbar,
  header .main-menu{
    margin-top: 10px !important;   /* كان كبير -> خليه 8-12 */
    margin-bottom: 0 !important;
  }

  /* 2) تقليل الحشوات (padding) التي تسبّب الفراغ الكبير */
  header,
  header .store-header,
  header .store-header__inner,
  header .store-header__wrapper{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 3) لو فيه min-height مرفوع */
  header .store-header,
  header .store-header__wrapper,
  header .store-header__inner{
    min-height: auto !important;
    height: auto !important;
  }

  /* 4) توسيط القائمة */
  header .navbar-nav,
  header .main-menu,
  header .nav{
    justify-content: center !important;
  }
}



/* ===== ضبط نهائي لموضع القائمة تحت الشعار (Desktop فقط) ===== */
@media (min-width: 992px){

  /* ترتيب الهيدر عموديًا */
  header .store-header__inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* تثبيت الشعار في الأعلى */
  header .logo,
  header .store-logo{
    margin-bottom: 6px !important;
  }

  /* إنزال القائمة وتوسيطها */
  header nav,
  header .main-menu,
  header .navbar-nav{
    margin-top: 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
  }
}














/* ========== FA76 | Desktop Compact Search ========== */
:root{
  --fa76-maroon:#6b2d39; /* عدّلها لو عندك درجة عودي مختلفة */
  --fa76-border:#e7e7e7;
}

/* نخلي التعديل للديسكتوب فقط */
@media (min-width: 992px){

  /* 1) إخفاء الإيميل أعلى الهيدر (لو كان يظهر كنص) */
  .fa76-hide-email,
  .fa76-hide-email *{
    display:none !important;
  }

  /* 2) زر البحث المصغّر + حاوية البحث */
  .fa76-search-wrap{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin-inline-start:10px;
    z-index:50;
  }

  .fa76-search-btn{
    width:38px;
    height:38px;
    border:1px solid var(--fa76-border);
    background:#fff;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .fa76-search-btn:hover{ transform:translateY(-1px); }
  .fa76-search-btn svg{ width:18px; height:18px; opacity:.75; }

  /* صندوق البحث (مخفي افتراضيًا) */
  .fa76-search-panel{
    position:absolute;
    top:50%;
    inset-inline-end:0;
    transform:translateY(-50%);
    width:0;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    transition:width .22s ease, opacity .15s ease;
  }

  .fa76-search-panel input{
    width:320px;
    height:38px;
    border:1px solid var(--fa76-border);
    border-radius:999px;
    padding:0 14px;
    outline:none;
    background:#fff;
  }

  /* عند الفتح */
  .fa76-search-wrap.is-open .fa76-search-panel{
    width:340px;
    opacity:1;
    pointer-events:auto;
  }

  /* لو تحب يكون فيه ظل خفيف عند الفتح */
  .fa76-search-wrap.is-open .fa76-search-btn{
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    border-color:rgba(0,0,0,.06);
  }
}