/*
|--------------------------------------------------------------------------
| المتغيرات (Variables)
|--------------------------------------------------------------------------
| الحفاظ على الألوان الأساسية الخاصة بك
*/
:root {
    --primary-dark: #13544a;       /* الأخضر الداكن الأساسي */
    --secondary-dark: #0e3c35;     /* لون أغمق مشتق */
    --accent-light: #3ab39b;       /* لون التمييز: الأخضر النعناعي */
    --bg-light: #f5fbf9;           /* خلفية فاتحة مريحة */
    --text-dark: #2c3e50;          /* لون النص الداكن */
    --text-light: #ffffff;         /* لون النص الفاتح */
}

/* 1. الخلفية العامة والنص */
body {
    background-color: var(--bg-light) !important;
    color: var(--text-dark);


/* 2. الشريط العلوي (Header) - التصميم المبتكر */

/* الهيكل الرئيسي للشريط العلوي لتمكين التوزيع */
.main-nav-container {
    min-height: 90px;
    background-color: var(--text-light); /* خلفية بيضاء نظيفة */
    border-bottom: 3px solid var(--primary-dark); /* خط فاصل أنيق */
    display: flex;
    justify-content: space-between; /* توزيع العناصر على الأطراف */
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* الحاوي الرئيسي للـ Navbar */
header .header-wrapper {
    display: flex;
    flex-direction: column; /* عمودي: اللوجو أعلى، القائمة أسفل */
    align-items: center;    /* تمركز كل العناصر أفقيًا */
}

/* اللوجو */
header .header-logo {
    order: 1; /* للتأكد أن اللوجو يظهر أولًا */
    margin-bottom: 15px; /* مسافة بين اللوجو والقائمة */
    text-align: center;
}

header .header-logo img {
    max-width: 180px; /* حجم اللوجو */
    height: auto;
}

/* قائمة التصنيفات */
header .main-menu {
    order: 2; /* لتكون أسفل اللوجو */
    display: flex;
    gap: 25px; /* مسافة بين التصنيفات */
    justify-content: center;
    flex-wrap: wrap; /* لتبقى متجاوبة */
}

header .main-menu li {
    list-style: none;
}

header .main-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

header .main-menu li a:hover {
    color: #640d5f; /* لون عند المرور */
}

/* متجاوبة للجوال */
@media (max-width: 768px) {
    header .main-menu {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
}sform: scale(1.1);
}

|--------------------------------------------------------------------------
| 2. الخلفية والـ Loader (شاشة التحميل الأولية) - تم تحسين السلاسة
|--------------------------------------------------------------------------
*/
body {
  color: var(--text-dark); /* لون نص داكن واضح */
  background-color: var(--bg-light) !important; /* خلفية بيضاء نقية */
}

/* شاشة التحميل (Loader) */
body:after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  position: fixed;
  z-index: 99999;
  left: 0;
  /* خلفية اللودر بلون Primary Dark الجديد */
  background: var(--bg-light) url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/pQmqpp/WvxeTkXVR0bUZBaCWuoYrbWrl3QuNeTkPkZaObHg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 300px;
  animation-name: fade-out-loader;
  animation-duration: 1.2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  transform: scale(1);
}

@keyframes fade-out-loader {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
  }
}

/* 3. البنرات (Banners) - ستايل نظيف وأنيق */

.s-slider-block {
    margin-top: 20px;
    border-radius: 15px; /* حواف مستديرة للمسة أنيقة */
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* ظل خفيف وواضح */
}

/* العناوين داخل البنر (للتأكيد على جودة الصورة) */
.s-slider-block__title h2 {
    color: var(--text-light) !important;
    background-color: rgba(19, 84, 74, 0.85); /* خلفية نصف شفافة بلون العلامة التجارية */
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    backdrop-filter: blur(4px); /* تأثير ضبابي خفيف */
}

/* البنرات الصغيرة (Mini Banners) - تصميم البطاقات */
.s-mini-banner-col {
    padding: 10px;
}
.s-mini-banner-col img {
    border-radius: 10px;
    transition: transform 0.4s ease-out;
}
.s-mini-banner-col:hover img {
    transform: scale(1.03); /* تكبير خفيف عند التمرير */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}


/* 4. بطاقات المنتجات (Products) - للتركيز على الجودة */

.s-product-card-vertical {
    background: var(--text-light);
    border-radius: 12px;
    border: 1px solid #eee; /* إطار خفيف جداً */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}
.s-product-card-vertical:hover {
    box-shadow: 0 8px 25px rgba(19, 84, 74, 0.2);
    transform: translateY(-6px); /* رفع قوي لإبراز المنتج */
}
.s-product-card-content a {
    color: var(--primary-dark); /* تمييز اسم المنتج باللون الأساسي */
    font-weight: 700;
}
.s-product-card-content .price {
    color: var(--accent-light); /* تمييز السعر بلون التمييز النعناعي */
    font-size: 1.5em;
    font-weight: 800;
}

/* 5. الأزرار - لمسة تقنية قوية */
.s-button-btn {
    background-color: var(--primary-dark);
    color: var(--text-light) !important;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    transition: 0.3s;
}

.s-button-btn:hover {
    background-color: var(--accent-light);
    color: var(--text-dark) !important;
    transform: scale(1.05);
}