header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #0f2027 !important; /* لون خلفية ثابت عند التمرير */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.3s ease-in-out;
}



/* لتعويض المساحة تحت الهيدر حتى لا يغطي المحتوى */
body {
    padding-top: 80px; /* غيّر هذا الرقم حسب ارتفاع الهيدر الفعلي */
}

/* تثبيت الهيدر في أعلى الصفحة عند التمرير */
header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #E6D3BD !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
}

/* لتعويض المساحة تحت الهيدر حتى لا يغطي المحتوى */
body {
    padding-top: 80px;
}

/* 🎨 خلفية بلون بيج فاتح ثابت */
body, .main-content, .salla-body, .s-page, html {
  background-color: #E6D3BD !important;
  color: #4A2A24 !important;
  box-shadow: none !important;
  transition: background 0.4s ease;
}

/* 🩵 النصوص الصغيرة */
p {
  color: #4A2A24 !important;
}

/* 🌟 العناوين الرئيسية */
h1, h2, h3 {
  color: #2B1E16 !important;
  filter: none !important;
}

h4 {
  color: #2B1E16 !important;
}

strong, b {
  color: #2B1E16 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* 🩵 زر تفاصيل أكثر + زر إضافة للسلة */
.s-button-btn,
.btn--primary,
button.s-button-element {
  background: #2B1E16 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
  transition: 0.3s ease;
}

.s-button-btn:hover,
.btn--primary:hover,
button.s-button-element:hover {
  background: #4A2A24 !important;
  transform: scale(1.03);
}

/* 💰 لون السعر */
[class*="price"],
#sub-total,
[data-cart-total],
.item-price,
.item-total {
  color: #2B1E16 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* ❓ الأسئلة الشائعة */
.faqs-list__item {
  background-color: #E6D3BD !important;
  border: 1px solid rgba(43, 30, 22, 0.25) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 1rem !important;
  color: #2B1E16 !important;
}

/* 🧾 الإجابة */
.faq-answer p {
  color: #4A2A24 !important;
}

/* 💳 طرق الدفع */
.product-page-payment-methods {
  background-color: #E6D3BD !important;
  border: 1px solid rgba(43, 30, 22, 0.15) !important;
  border-radius: 18px !important;
  padding: 20px !important;
}

/* 🧩 تبويبات الوصف والمراجعات */
.s-tabs-content {
  background-color: #E6D3BD !important;
  border-radius: 18px !important;
  border: 1px solid rgba(43, 30, 22, 0.15) !important;
  padding: 25px !important;
}

/* ⭐ النجوم */
.s-rating-stars-btn-star svg path,
.s-reviews-testimonial__rating svg path {
  fill: #2B1E16 !important;
  filter: none !important;
}

/* 🧱 الفوتر */
.store-footer,
.store-footer__inner,
.footer-copyright {
  background-color: #E6D3BD !important;
  color: #4A2A24 !important;
  border-top: 1px solid rgba(43, 30, 22, 0.35);
}

/* 🧊 الهيدر */
header, .main-header, .store-header {
  backdrop-filter: none !important;
  background: #E6D3BD !important;
  border-bottom: 1px solid rgba(43, 30, 22, 0.2);
}
/* =========================================
   OVERRIDE PRIMARY / CYAN COLORS
   Put this at the END of your CSS
========================================= */

/* اللون الأساسي */
:root {
  --color-primary: #4A2A24 !important;
  --color-primary-dark: #3A201C !important;
  --color-primary-light: #6A3A32 !important;
  --color-primary-reverse: #E6D3BD !important;

  /* Swiper / sliders */
  --swiper-theme-color: #4A2A24 !important;

  /* Salla / Theme variables */
  --t-footer-heading-color: #4A2A24 !important;
  --t-global-add-to-cart-bg-color: #4A2A24 !important;
  --t-global-add-to-cart-text-color: #E6D3BD !important;
  --t-rating-color: #4A2A24 !important;
}

/* مؤشرات الإدخال والتحديد */
* {
  accent-color: #4A2A24 !important;
  caret-color: #4A2A24 !important;
}

/* الروابط */
a,
a:hover,
a:focus {
  color: #4A2A24 !important;
}

/* الأزرار الافتراضية */
button,
.btn,
.s-button-element {
  background-color: #4A2A24 !important;
  border-color: #4A2A24 !important;
  color: #E6D3BD !important;
}




/* أيقونات SVG */
svg path {
  fill: currentColor;
}

/* النجوم والتقييم */
.s-rating-stars-btn-star svg path,
.s-reviews-testimonial__rating svg path {
  fill: #4A2A24 !important;
}



/* ====== إصلاح الهيدر الأبيض نهائيًا ====== */
header,
.main-header,
.store-header,
header *,
.main-header *,
.store-header * {
  background-color: #E6D3BD !important;
}

/* إزالة أي طبقة بيضاء أو شفافية */
header::before,
header::after,
.main-header::before,
.main-header::after,
.store-header::before,
.store-header::after {
  content: none !important;
  background: none !important;
}

/* نفس ستايل الفوتر (حد + ظل) */
header,
.main-header,
.store-header {
  border-bottom: 1px solid rgba(43, 30, 22, 0.25) !important;
  box-shadow: 0 4px 12px rgba(43, 30, 22, 0.12) !important;
  backdrop-filter: none !important;
}

/* صندوق الوصف – بوردير ناعم ومنحني */
.s-tabs-content,
.product-description,
.product__description,
.description,
section[style*="background-color"] {
  border-radius: 22px !important; /* انحناء ناعم */
  overflow: hidden;     /* يمنع الزوايا الحادة داخل الصندوق */
  
}

h3 {
  color: #2B1E16;
  text-shadow:
    2px 0 6px rgba(230, 211, 189, 0.8),
   -2px 0 6px rgba(230, 211, 189, 0.8),
    0 2px 6px rgba(230, 211, 189, 0.8),
    0 -2px 6px rgba(230, 211, 189, 0.8),
    0 0 18px rgba(230, 211, 189, 0.6);
}

تغيير لون الخانة في السياسات
salla-comment-form {
  display: none !important;
}

.s-comments s-comments-page-container {
  display: none !important;
}
/* ===== HERO DESKTOP ===== */

.hero,
.hero-slider,
.s-slider,
.s-block--hero,
section[class*="hero"] {

  height: 1100px !important;
  min-height: 1100px !important;
  max-height: 1100px !important;

  overflow: hidden !important;
  position: relative !important;
}

/* السلايدر الداخلي */
.hero .swiper,
.hero-slider .swiper,
.s-slider .swiper,
.swiper-wrapper,
.swiper-slide {
  height: 100% !important;
}

/* الصورة */
.hero img,
.hero-slider img,
.s-slider img,
.swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important; /* النقص من فوق */
}


/* ===== HERO MOBILE ===== */

@media (max-width: 768px) {

  .hero,
  .hero-slider,
  .s-slider,
  .s-block--hero,
  section[class*="hero"] {

    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
  }

}