/* Add custom CSS styles below */ 


/* start first banner */
section:first-of-type {
    margin: 0!important;
}
section.s-block.s-block--photos-slider salla-slider.photos-slider .swiper-slide {
    width: 100%!important;
    padding: 0!important;
}
[dir=rtl] .carousel-slider .swiper {
    padding: 0!important;
}
/* start banner */
section:nth-child(1 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
    max-width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}



/* الهيدر يحتوي على خلفية بتدرج لوني يبدأ بالأسود الداكن ويمتد ليصبح شفافًا. */
header.store-header {
    position: relative;
    background: linear-gradient(#auto, transparent) !important;
    color: #000000; /* لون النص أبيض */
     background-color: #auto!important; /* لون الهيدر ثابت */
      border-radius: 0px!important;

      /* كومنت */
}

}
    .sticky-product-bar {
        display: flex !important; /* لتفعيل خاصية ترتيب العناصر داخل العنصر */
        justify-content: center !important; /* لتوسيط العناصر أفقياً */
        align-items: center !important; /* لتوسيط العناصر عمودياً */
        gap: 15px !important; /* مسافة بين العناصر */
    }
}
/* الفوتر يحتوي على خلفية بتدرج لوني */ 
footer.store-footer {
    background: linear-gradient(45deg, #A5A4A4, var(--mc)) !important;
    position: relative;
    width: 100%;
    border-radius: 0px;
    margin-top: 20px;
    padding: 0;
    box-shadow: 0 -15px #auto!important;
   
}




/* عند تحويم الفأرة فوق زر معين يحتوي على نص داخل span، يتغير لون النص إلى */ 
button:has(>span.s-button-text):hover {
    background: transparent;
    color: #A5A4A4;
    fill: transparent !important;
}


/* الصور داخل السلايدر تتكيف مع العرض الكامل للعنصر.
يتم ملء المساحة المتاحة دون تشويه. */ 
.s-block.s-block--photos-slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* الصور داخل الروابط التي تحتوي على كلاس lazy__bg يتم ضبط حجمها لتناسب العنصر، مع عدم تكرارها، وتوسيطها.*/ 

/* Add custom CSS styles below */ 
div:has(>a.square-photos) a .lazy__bg {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center 10px !important;
}

/* أي رابط يحتوي على كلمة "instagram" يحصل على خلفية بألوان التدرج الخاصة بالإنستاجرام.*/ 
a[href*=instagram] {
    background: linear-gradient(45deg, #f09433 0, #bc1888 100%)!important;
}

/* عندما تكون الشاشة أصغر من 600px، يتم ترتيب الصور داخل القسمين #Sec_01 و #Sec_00 في شبكة ذات عمودين في الموبايل  */ 
@media (max-width: 600px) {
    section:is(#Sec_01, #Sec_00) div:has(>a.square-photos) {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    }
    
    
/* إدخال النص داخل شريط البحث يحصل على ظل داخلي مميز */ 
}
input.s-search-input {
    box-shadow: #32325d40 0 30px 60px -12px inset, #0000004d 0 18px 36px -18px inset!important;
}

/* النصوص الرئيسية داخل السلايدر تحتوي على خط جانبي ملون  */ 
.s-slider-block__title h2 {
    border-right: 6px solid ##A5A4A4;
    color: var(--mc)!important;
}


.s-add-product-button-mini-checkout-content:hover {
    background-color: flex; /* لون الخلفية عند التمرير بالماوس */
    color: #141312; /* تغيير لون النص عند التمرير */
.s-add-product-button-mini-checkout-content i,
.s-add-product-button-mini-checkout-content svg {
    font-size: 2px; /* حجم الأيقونة */
}
/* ضبط زر إضافة للسلة */
button.add-to-cart-btn {
    width: 50px; /* عرض الزر */
    height: 50px; /* ارتفاع الزر */
    font-size: 18px; /* حجم النص داخل الزر */
    padding: 10px 10x; /* الحشوات الداخلية */
    border-radius: 10px; /* زوايا مستديرة */
    background-color: #808080; /* لون الخلفية الرمادي */
    color: #fff; /* لون النص */
    border: none; /* إزالة الإطار */
    display: flex; /* جعل المحتوى داخل الزر مرنًا */
    align-items: center; /* توسيط المحتوى عموديًا */
    justify-content: center; /* توسيط المحتوى أفقيًا */
    gap: 15px; /* مسافة بين النص والأيقونة */
    cursor: pointer; /* مؤشر اليد عند التمرير */
    transition: all 0.3s ease; /* تأثير الحركة عند التفاعل */
}

.responsive-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .responsive-image {
        max-width: 200px;
    }
/* تأكيد ظهور الأيقونات في جميع أحجام الشاشات */
.sicon-menu:before {
    filter: none !important; /* إزالة أي فلاتر قد تخفي الأيقونات */
    display: inline-block !important; /* ضمان عرض الأيقونات */
    color: #000000 !important; /* تعيين لون الأيقونات إلى الأسود إذا كانت تعتمد على اللون */
}

/* جعل لون النص أسود في جميع العناصر */
body, 
body * {
    color: #000000 !important;
}

/* تعديل الأيقونات إذا كانت تعتمد على صورة أو SVG */
.sicon-menu img,
.sicon-menu svg {
    width: 24px!important; /* تعيين حجم مناسب للأيقونات */
    height: 24px!important;
    fill: #000000!important; /* تعيين لون تعبئة الأيقونات إذا كانت SVG */
}

/* ضمان استجابة الأيقونات في الشاشات الصغيرة */
@media (max-width: 768px) {
    .sicon-menu:before {
        /* أي تعديلات إضافية للأيقونات على الشاشات الصغيرة يمكن إضافتها هنا */
        width: 20px!important;
        height: 20px!important;
    }
    
    /* تعديل حجم النص إذا لزم الأمر */
    body, 
    body * {
        font-size: 16px !important; /* ضبط حجم الخط حسب الحاجة */
    }
}