/* Add custom CSS styles below */ 

@media (min-width: 1024px) {
    /* استهداف الروابط والنصوص داخل القائمة الرئيسية */
    custom-main-menu .main-menu li.root-level a,
    custom-main-menu .main-menu li.root-level a span {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
    }

    /* لضمان التلوين عند تمرير الماوس */
    custom-main-menu .main-menu li.root-level a:hover span {
        color: #ffffff !important;
        opacity: 0.8 !important; /* شفافية بسيطة عند التمرير ليعطي إيحاء بالتفاعل */
    }
}


/* =========================================
   توحيد خلفية المتجر للون الأبيض
   ========================================= */

body, 
html, 
.store-layout, 
 .content-wrapper {
    background-color: #ffffff !important; /* لون أبيض صافي */
    background-image: none !important;    /* إزالة أي صور أو زخارف في الخلفية */
}




------------------------
/* =========================================
   تلوين عناوين الأقسام (نسخة مخصصة لمتجرك)
   ========================================= */

/* 1. استهداف عناوين السلايدر (مثل: منتجاتنا البطلة، التصنيفات) */
.s-slider-block__title h2,
.s-slider-block__title-right h2 {
    background: linear-gradient(to top, #FFEA00 40%, transparent 40%) !important;
    display: inline-block !important;
    width: fit-content !important;
    color: #572F78 !important;
    padding: 0 5px !important;
    border-radius: 4px !important;
    line-height: 1.6 !important;
}

/* 2. استهداف عناوين الأقسام العادية (مثل: آراء العملاء) */
.s-block__title h2,
.s-block__header h2,
.section-header h2 {
    background: linear-gradient(to top, #FFEA00 40%, transparent 40%) !important;
    display: inline-block !important;
    width: fit-content !important;
    color: #572F78 !important;
    padding: 0 5px !important;
}

/* =========================================
   تنسيق عنوان "آراء العملاء" (باستخدام الكلاس الدقيق)
   ========================================= */

h1.s-reviews-header {
    /* 1. تأثير الماركر الأصفر */
    background: linear-gradient(to top, #FFEA00 40%, transparent 40%) !important;
    
    /* 2. جعل الخلفية على قد الكلمة فقط */
    display: inline-block !important;
    width: fit-content !important;
    
    /* 3. اللون البنفسجي */
    color: #572F78 !important;
    
    /* 4. تنسيقات تجميلية */
    padding: 0 10px !important;
    border-radius: 4px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important; /* مسافة أسفله لترتيب الشكل */
}



-----------------------

/* =========================================
   إجبار صور سلايدر المنتج الرئيسي لتكون مربعة
   ========================================= */

/* استهداف الصور داخل عارض الصور المتحرك (Swiper) */
.homeslider__slide img,
.product-detials__slider .swiper-slide img {
    /* 1. تحديد النسبة لتكون مربعة 1:1 */
    aspect-ratio: 1 / 1 !important;
    
    /* 2. ملء العرض والارتفاع بالكامل */
    width: 100% !important;
    height: 100% !important;
    
    /* 3. قص الزوائد لمنع تمطط الصورة (مهم جداً) */
    object-fit: cover !important;
    object-position: center !important;
    
    /* 4. (اختياري) إضافة انحناء بسيط للزوايا ليتماشى مع تصميمك */
    border-radius: 8px !important;
}

/* تعديل حاوية الرابط لضمان احترام الشكل المربع */
.homeslider__slide,
.product-detials__slider .swiper-slide {
    height: auto !important; /* السماح للحاوية بالتكيف مع المربع */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}





---------------------------



/* إزالة الحدود (الإطار) من صور التصنيفات */
#main-links-2 .slide--cat-entry img {
    border: none !important;
    padding: 0 !important; /* إزالة المسافة التي كانت بين الصورة والإطار */
}

/* إزالة الحدود في حالة كانت مطبقة على الرابط نفسه */
#main-links-2 .slide--cat-entry {
    border: none !important;
    box-shadow: none !important;
}
------------------------
 /* =========================================
   تعديلات رأس الصفحة (Header) - بنفسجي
   ========================================= */

/* 1. تغيير لون خلفية الهيدر إلى البنفسجي */
#mainnav, .main-nav-container {
    background-color: #572F78 !important; /* اللون البنفسجي */
    border-bottom: 1px solid #9E5985 !important; /* خط رفيع زهري أسفل الهيدر للجمالية */
}

/* 2. تحويل الشعار إلى اللون الأبيض (فلتر) */
/* هذا الكود يجعل أي صورة شعار تصبح بيضاء بالكامل لتناسب الخلفية الداكنة */
.navbar-brand img {
    filter: brightness(0) invert(1) !important;
}

/* 3. تغيير لون بقية الأيقونات والنصوص إلى الأبيض */
.header-btn__icon,        /* أيقونة المستخدم */
.sicon-menu,              /* أيقونة القائمة في الجوال */
.s-cart-summary-total,    /* سعر السلة */
.s-cart-summary-count {   /* عدد منتجات السلة */
    color: #ffffff !important;
}


-----------------------------------------------

/* =========================================
   توحيد حجم صور المنتجات وإضافة إطار
   ========================================= */

/* استهداف صور المنتجات بناءً على الكلاس الموجود في الكود */
.s-product-card-image-contain,
.s-product-card-entry img,
.product-entry__image img {
    /* 1. إجبار الصورة لتكون مربعة (نسبة 1:1) */
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    
    /* 2. منع تمطط الصورة (قص الزوائد للحفاظ على الجودة) */
    object-fit: cover !important;
    object-position: center !important;

    /* 3. إضافة الإطار البنفسجي */
    border: 0px solid #572F78 !important; /* سمك الإطار 3 بكسل ولونه بنفسجي */
    
    /* (اختياري) إضافة انحناء بسيط للزوايا لجمالية أكثر */
    border-radius: 8px !important; 
    
    /* ضمان أن الإطار يحسب ضمن حجم الصورة ولا يخرج عنها */
    box-sizing: border-box !important;
}


-------------------

/* =========================================
   تحديث: رسم الشعار (Watermark) باللون البنفسجي
   ========================================= */

/* استبدل الكود السابق الذي يبدأ بـ .s-product-card-image-contain::after بهذا الكود */
.s-product-card-image-contain::after,
.s-product-card-entry::after,
.product-entry__image::after {
    content: "" !important;
    position: absolute;

    /* --- هنا السحر: نضع خلفية بنفسجية صلبة --- */
    background-color: #572F78 !important; /* كود اللون البنفسجي */

    /* --- ثم نستخدم رابط صورة شعارك الأبيض كـ "قناع" لقص اللون --- */
    -webkit-mask-image: url('https://cdn.salla.sa/yRDnx/rcqH2aclchpZha8sxtjz0086ZuifiTgu97dYxgaP.png');
    mask-image: url('https://cdn.salla.sa/yRDnx/rcqH2aclchpZha8sxtjz0086ZuifiTgu97dYxgaP.png');
    
    /* إعدادات القناع لضمان ظهور الشعار كاملاً */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* == التحكم في المكان والحجم (نفس السابق) == */
    top: 200px;
    left: 10px;
    width: 45px;
    height: 45px;
    
    /* == الشفافية والمظهر == */
    opacity: 1; /* جعلته 1 ليكون اللون البنفسجي واضحاً وقوياً */
    z-index: 5; /* لضمان ظهوره فوق الفلتر وفوق الصورة */
    pointer-events: none;
    
    /* (تمت إزالة ظل الـ drop-shadow الأبيض السابق لأنه لا يناسب الشعار البنفسجي) */
}


------------------

/* =========================================
   إضافة فلتر بنفسجي خفيف على صور المنتجات
   ========================================= */

/* 1. التأكد من أن حاوية الصورة تقص أي زوائد (مهم للأطراف الدائرية) */
.s-product-card-image-contain,
.s-product-card-entry,
.product-entry__image {
    /* إضافة انحناء للزوايا ليتماشي مع الإطار */
    border-radius: 8px !important; 
    /* إخفاء أي شيء يخرج عن هذا الانحناء (مهم جداً للفلتر) */
    overflow: hidden !important; 
}

/* 2. إنشاء طبقة الفلتر البنفسجي */
/* نستخدم ::before ليكون الفلتر "قبل" الشعار الذي استخدمنا له ::after */
.s-product-card-image-contain::before,
.s-product-card-entry::before,
.product-entry__image::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* === إعدادات لون وشفافية الفلتر === */
    /* لقد قمت بتحويل كود لونك البنفسجي #572F78 إلى نظام RGBA */
    /* الرقم الأخير (0.25) هو نسبة الشفافية: */
    /* 0.1 = خفيف جداً جداً */
    /* 0.5 = متوسط */
    /* 0.8 = غامق جداً */
    background-color: rgba(87, 47, 120, 0.09) !important;

    /* ترتيب الطبقات: 2 تعني فوق الصورة الأصلية، ولكن تحت الشعار (الذي رقمه 5) */
    z-index: 2;
    /* للسماح بمرور ضغطة الماوس للمنتج */
    pointer-events: none; 
    /* تأثير ناعم عند دمج اللون */
    mix-blend-mode: multiply; 
}




----------------------


/* =========================================
   تعديلات سلايدر التصنيفات (متجاوب مع الجوال)
   ========================================= */

/* 1. إزالة الخلفية البيضاء والحدود الافتراضية للبطاقة (مشترك للكل) */
#main-links-2 .slide--cat-entry {
    background-color: transparent !important;
    box-shadow: none !important;
    border : none !important;
  outline: none !important;
}



/* -----------------------------------------
   أولاً: إعدادات شاشات الكمبيوتر والتابلت (الشاشات الكبيرة)
   (تطبق إذا كانت الشاشة أكبر من 768 بكسل)
----------------------------------------- */
@media (min-width: 768px) {
    #main-links-2 .slide--cat-entry img {
        width: 90px !important;  /* حجم كبير ومريح للعين */
        height: 90px !important;
    }
    
    #main-links-2 .slide--cat-entry h2 {
        font-size: 16px !important;
        margin-top: 12px !important;
        font-weight: bold;
    }
}

/* -----------------------------------------
   ثانياً: إعدادات الجوال (الشاشات الصغيرة)
   (تطبق تلقائياً في الجوالات)
----------------------------------------- */
@media (max-width: 767px) {
    #main-links-2 .slide--cat-entry img {
        width: 75px !important;   /* حجم أصغر ليناسب شاشة الجوال */
        height: 75px !important;
    }

    #main-links-2 .slide--cat-entry h2 {
        font-size: 12px !important; /* خط أصغر قليلاً حتى لا يتداخل */
        margin-top: 8px !important;
        font-weight: bold;
        white-space: nowrap; /* يمنع نزول النص لسطرين إذا أمكن */
    }
}



/* =========================================
   تحديث ألوان نصوص التصنيفات (بنفسجي مع حدود زهرية)
   ========================================= */

#main-links-2 .slide--cat-entry h2 {
    color: #572F78 !important; /* لون النص البنفسجي */