/* 1. تعديلات الألوان (تطبق على اللابتوب والموبايل مع بعض) */

/* تغيير لون الزرار للبرتقالي في كل الموقع */
body.theme-raed salla-button {
    --s-button-bg: #f95c06 !important;
    --s-button-text-color: #ffffff !important;
    --s-button-border-color: transparent !important;
    --s-button-bg-hover: #f95c06 !important;
    background-color: transparent !important;
    width: 100% !important;
    display: block !important;
}

/* تأكيد خصائص الزرار والخط العريض */
body.theme-raed salla-button button,
body.theme-raed .s-button-element,
body.theme-raed .s-button-btn {
    background-color: #f95c06 !important;
    background: #f95c06 !important; 
    color: #ffffff !important;
    font-weight: 900 !important;
    border-radius: 50px !important;
    height: 48px !important;
    border: none !important;
}

/* إزالة أي برواز أو ظل غير مرغوب فيه في كارت المنتج */
body.theme-raed .s-product-card-entry,
body.theme-raed .s-product-card {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* --------------------------------------------------------- */

/* 2. تعديلات الأشكال والبانرات (تطبق على الموبايل فقط) */
@media screen and (max-width: 767px) {
    /* جعل البانرات تظهر في عمودين */
    section.s-block.s-block--banners.container > div {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    /* الحواف الدائرية للبانرات */
    section.s-block.s-block--banners.container > div a {
        width: 100% !important;
        min-height: 160px !important;
        border-radius: 15px !important;
        border-bottom: 0px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    section.s-block.s-block--banners.container > div a div {
        background-size: cover !important;
        background-position: center !important;
        border-radius: 15px !important;
    }
}

/* --- الكود النهائي والفعال لتحويل صور الأقسام لمربعة مع ظل --- */

/* 1. استهداف الصور داخل قسم الأقسام مباشرة */
.s-block--categories .slide--cat-entry img {
    border-radius: 12px !important; /* تحويل الدائرة لمربع بزوايا ناعمة */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; /* إضافة الضل */
    width: 80px !important; /* تكبير الحجم قليلاً ليكون أوضح (اختياري) */
    height: 80px !important;
    object-fit: cover !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: transform 0.3s ease !important; /* حركة ناعمة عند اللمس */
}

/* 2. حركة اختيارية: تكبير بسيط لما حد يقف بالماوس على القسم */
.s-block--categories .slide--cat-entry:hover img {
    transform: translateY(-5px) !important; /* يرتفع للأعلى قليلاً */
}

/* 3. تنسيق الخط تحت الصورة (اختياري) */
.s-block--categories .slide--cat-entry h2 {
    font-size: 14px !important;
    font-weight: bold !important;
    margin-top: 10px !important;
    color: #333 !important;
}
/* --- إلغاء المربعات البيضاء (الخلفية) للأقسام --- */

/* 1. إزالة الخلفية، الحدود، والظلال من الكارت نفسه */
body.theme-raed .s-block--categories .slide--cat-entry {
    background: transparent !important; /* جعل الخلفية شفافة */
    border: none !important;            /* إزالة أي حدود */
    box-shadow: none !important;        /* إزالة الظل من المربع الكبير */
    padding: 0 !important;             /* تقليل المسافات الزائدة */
}

/* 2. التأكد من أن النص (العنوان) يظهر بشكل واضح بدون المربع */
body.theme-raed .s-block--categories .slide--cat-entry h2 {
    color: #333 !important;             /* تأكيد لون النص */
    margin-top: 15px !important;        /* مسافة بين الصورة والاسم */
}

/* 3. تعديل المسافات بين الأقسام لو حاسس إنهم قريبين من بعض */
body.theme-raed .s-block--categories .swiper-slide {
    padding: 5px !important;
}