/* إضافة الخط Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

body, *:not(i) {
    font-family: "Cairo", sans-serif !important; /* تطبيق الخط Cairo */
}

/* تعديل ألوان المتجر */
:root {
    --color-primary: #467D78;
    --color-primary-dark: #345E5A;
    --color-primary-light: #6BA294;
    --color-primary-reverse: #ffffff;
    --1: #467D78; /* اللون الأساسي */
    --2: #345E5A; /* لون أغمق */
    --3: #6BA294; /* لون أفتح */
    --4: #E5F2EF; /* لون فاتح جداً */
}

/* تعديل ألوان الهيدر والفوتر */
header.store-header .inner.bg-inherit {
    background: var(--1);
}

.mm-spn.mm-spn--light, .s-slider-nav-arrow, .top-navbar, .footer-is-light .store-footer .store-footer__inner, .footer-is-light .store-footer {
    background: linear-gradient(to top, var(--1), var(--2)) !important;
    color: var(--color-primary-reverse);
}

/* ألوان النصوص */
i.sicon-menu.text-primary.text-2xl.rtl\:ml-2\.5.ltr\:mr-2\.5,
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center,
.main-menu li>a, a.topnav-link-item.right-side, .header-btn__icon, .topnav-link-item,
.s-cart-summary-total, .store-footer h3, p.max-w-sm.leading-6.mb-6, p.text-sm.text-text-grey.mb-1, b.text-sm, .store-footer a {
    color: var(--color-primary-reverse);
}

.main-menu .has-children li a, .main-menu .has-children .has-children:hover>a {
    color: var(--1);
}

.main-menu>.has-children:hover>a, .main-menu li>a:hover {
    color: var(--color-primary-reverse);
}

.s-slider-nav-arrow svg {
    fill: var(--color-primary-reverse);
}

/* البنر */
section.s-block.s-block--fixed-banner.wide-placeholder .container {
    padding: 0;
    margin: 0;
    max-width: 100%; /* عرض الحاوية بكامل الشاشة */
}

section.s-block.s-block--fixed-banner.wide-placeholder .container:hover, 
.lazy__bg.lazy.entered.loaded:hover {
    transform: translateY(-8px); /* حركة خفيفة عند التمرير */
    background-color: var(--2);
}

section.s-block.s-block--fixed-banner.wide-placeholder .container, :hover {
    transition: transform 0.3s, box-shadow 0.3s;
}

/* بطاقات المنتجات */
.s-block.s-block--banners > .grid .banner-entry {
    background-color: var(--4); /* خلفية البطاقات */
    border-radius: 10px; /* زوايا دائرية */
    color: var(--1); /* لون النصوص */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.s-block.s-block--banners > .grid .banner-entry:hover {
    background-color: var(--3);
    transform: translateY(-5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* الأزرار */
button, .btn {
    background-color: var(--color-primary-light);
    color: var(--color-primary-reverse);
    border: 2px solid var(--1);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

button:hover, .btn:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-primary-reverse);
    transform: scale(1.05);
}
/* تغيير لون الشريط العلوي إلى الأبيض */
header.store-header .inner.bg-inherit {
    background: #ffffff; /* لون خلفية الشريط العلوي أبيض */
    color: #467D78; /* لون النصوص داخل الشريط */
}

/* تغيير لون النصوص داخل الشريط العلوي */
header.store-header .inner.bg-inherit a,
header.store-header .inner.bg-inherit .header-btn__icon {
    color: #467D78; /* لون النصوص والأيقونات */
}

/* إزالة المسافة بين الشريط العلوي والبانر */
section.s-block.s-block--fixed-banner.wide-placeholder {
    margin-top: 0; /* إزالة المسافة العلوية */
    padding-top: 0; /* إزالة الحشوات العلوية */
}

/* تعديل عرض البانر ليكون متصلًا بالشريط العلوي */
section.s-block.s-block--fixed-banner.wide-placeholder .container {
    padding: 0;
    margin: 0;
    max-width: 100%; /* عرض البانر بكامل الشاشة */
}
/* تحسين مقاسات الصور المحسنة */
.s-block.s-block--photos-slider .swiper-slide {
    position: relative; /* لجعل العنصر الأساسي قابل للتخصيص */
    margin: 0; /* إزالة أي مسافات إضافية */
    width: 100%; /* ضبط العرض ليغطي الحاوية بالكامل */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    overflow: hidden; /* قص أي محتوى خارج الحدود */
    border-radius: 0.375rem; /* زوايا دائرية */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* إضافة تأثيرات حركة وظل */
}

.s-block.s-block--photos-slider .swiper-slide:hover {
    transform: scale(1.05); /* تكبير خفيف عند التمرير */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* إضافة ظل خفيف */
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 991px) {
    .s-block.s-block--photos-slider .swiper-slide {
        border-radius: 0px !important; /* إزالة الزوايا الدائرية */
        width: 100%; /* تأكيد التناسب الكامل */
        margin: 0; /* إزالة أي مسافات إضافية */
        padding: 0; /* إزالة الحشوات */
    }
}
/* جعل الصورة في المنتصف ومناسبة للشاشة بالكامل */
.s-block.s-block--photos-slider .swiper-slide {
    display: flex; /* لجعل الصورة في المنتصف أفقياً وعمودياً */
    align-items: center; /* محاذاة عمودية */
    justify-content: center; /* محاذاة أفقية */
    width: 100%; /* عرض الصورة يغطي الشاشة بالكامل */
    height: auto; /* الحفاظ على نسب الأبعاد */
    overflow: hidden; /* قص أي محتوى زائد */
    background-color: #ffffff; /* يمكنك تحديد لون خلفية إذا كانت الصورة أصغر من الحاوية */
    padding: 0; /* إزالة أي مسافات إضافية */
    margin: 0; /* إزالة أي مسافات إضافية */
    border-radius: 0; /* إزالة الزوايا الدائرية إن وجدت */
}

/* جعل الصورة تغطي الحاوية بالكامل */
.s-block.s-block--photos-slider .swiper-slide img {
    display: block;
    width: 100%; /* تغطية عرض الحاوية بالكامل */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    object-fit: cover; /* لجعل الصورة تغطي الحاوية بالكامل مع اقتصاص الزائد */
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 991px) {
    .s-block.s-block--photos-slider .swiper-slide {
        height: auto; /* السماح بارتفاع تلقائي للشاشات الصغيرة */
    }

    .s-block.s-block--photos-slider .swiper-slide img {
        width: 100%; /* التأكد من تغطية العرض الكامل للشاشة */
        height: auto; /* الحفاظ على النسب الأصلية */
        border-radius: 0; /* إزالة أي زوايا دائرية */
    }
}
/* جعل الصورة في المنتصف ومناسبة للشاشة بالكامل */
.s-block.s-block--photos-slider .swiper-slide {
    display: flex; /* لجعل الصورة في المنتصف أفقياً وعمودياً */
    align-items: center; /* محاذاة عمودية */
    justify-content: center; /* محاذاة أفقية */
    width: 100%; /* عرض الصورة يغطي الشاشة بالكامل */
    height: auto; /* الحفاظ على نسب الأبعاد */
    overflow: hidden; /* قص أي محتوى زائد */
    background-color: #ffffff; /* يمكنك تحديد لون خلفية إذا كانت الصورة أصغر من الحاوية */
    padding: 0; /* إزالة أي مسافات إضافية */
    margin: 0; /* إزالة أي مسافات إضافية */
    border-radius: 0; /* إزالة الزوايا الدائرية إن وجدت */
}

/* جعل الصورة تغطي الحاوية بالكامل */
.s-block.s-block--photos-slider .swiper-slide img {
    display: block;
    width: 100%; /* تغطية عرض الحاوية بالكامل */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    object-fit: cover; /* لجعل الصورة تغطي الحاوية بالكامل مع اقتصاص الزائد */
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 991px) {
    .s-block.s-block--photos-slider .swiper-slide {
        height: auto; /* السماح بارتفاع تلقائي للشاشات الصغيرة */
    }

    .s-block.s-block--photos-slider .swiper-slide img {
        width: 100%; /* التأكد من تغطية العرض الكامل للشاشة */
        height: auto; /* الحفاظ على النسب الأصلية */
        border-radius: 0; /* إزالة أي زوايا دائرية */
    }
}
/* جعل علامة الزائد والناقص باللون الأبيض وتوسيطها داخل الزر */
.s-quantity-input-button {
    position: relative; /* لتحديد موضع العناصر الداخلية */
    display: flex; /* استخدام flexbox للتوسيط */
    align-items: center; /* محاذاة عمودية */
    justify-content: center; /* محاذاة أفقية */
    width: 40px; /* عرض الزر */
    height: 40px; /* ارتفاع الزر */
    background-color: #467D78; /* لون خلفية الزر (يمكنك تغييره إذا أردت) */
    border: none; /* إزالة الحدود الافتراضية */
    border-radius: 50%; /* جعل الزر دائريًا */
    cursor: pointer; /* إضافة مؤشر اليد عند التمرير */
    transition: background-color 0.3s ease, transform 0.2s ease; /* تأثيرات للزر */
}

.s-quantity-input-button:hover {
    background-color: #345E5A; /* تغيير لون الخلفية عند التمرير */
    transform: scale(1.1); /* تكبير خفيف عند التمرير */
}

.s-quantity-input-button span svg {
    fill: #ffffff; /* جعل علامة الزائد والناقص باللون الأبيض */
    width: 20px; /* عرض العلامة */
    height: 20px; /* ارتفاع العلامة */
}

/* التأكد من أن الأزرار متماثلة على جميع الأجهزة */
.s-quantity-input-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* إزالة الشريط الرفيع خلف الأزرار */
.s-quantity-input {
    border: none; /* إزالة الحدود */
    background: none; /* إزالة الخلفية */
    box-shadow: none; /* إزالة أي ظل */
    padding: 0; /* إزالة الحشوات الإضافية */
    margin: 0; /* إزالة أي مسافات إضافية */
}

<div class="product-card">
    <div class="badge">تخفيض</div>
    ...
</div>

}
.s-design-before {
    display: block; /* تأكد من أن العنصر يعرض ككتلة */
    margin: 0; /* إزالة الهوامش */
    padding: 0; /* إزالة الحشوات */
    width: 100%; /* جعل العنصر يغطي العرض بالكامل */
    height: auto; /* الحفاظ على النسبة الأصلية للصورة */
    border-radius: 0; /* إزالة أي حواف مستديرة */
    overflow: hidden; /* منع أي محتوى زائد */
    background: none; /* إزالة أي خلفية إضافية */
    box-shadow: none; /* إزالة أي ظل */
    position: relative; /* إعداد الوضع الافتراضي للعنصر */
}

/* إلصاق البانر بالشريط السفلي */
.s-design-before + footer {
    margin-top: 0; /* إزالة المسافة بين البانر والشريط السفلي */
    padding-top: 0; /* إزالة الحشوات العلوية */
}

/* تخصيص الصورة داخل البانر */
.s-design-before img {
    display: block
    }
    /* إزالة الحواف والفراغات وإلصاق البانر بالشريط السفلي */
.s-footer-banner {
    display: block; /* عرض البانر ككتلة */
    margin: 0 !important; /* إزالة الهوامش */
    padding: 0 !important; /* إزالة الحشوات */
    width: 100% !important; /* جعل البانر يغطي العرض بالكامل */
    height: auto !important; /* الحفاظ على النسبة الأصلية للصورة */
    border-radius: 0 !important; /* إزالة أي حواف مستديرة */
    overflow: hidden !important; /* منع أي محتوى زائد */
    background: none !important; /* إزالة أي خلفيات إضافية */
    box-shadow: none !important; /* إزالة أي تأثيرات ظل */
    position: relative !important; /* الوضع الافتراضي */
}

/* إلصاق البانر بالشريط السفلي */
.s-footer-banner + footer {
    margin-top: 0 !important; /* إزالة أي مسافات بين البانر والشريط السفلي */
    padding-top: 0 !important; /* إزالة الحشوات العلوية */
}

/* تخصيص الصورة داخل البانر */
.s-footer-banner img {
    display: block; /* تأكد من عرض الصورة بشكل صحيح */
    width: 100% !important; /* تغطية العرض بالكامل */
    height: auto !important; /* الحفاظ على النسبة الأصلية للصورة */
    object-fit: cover !important; /* تغطية الحاوية بالكامل واقتصاص الزائد */
    border-radius: 0 !important; /* إزالة الحواف المستديرة */
}
/* إزالة الحواف والفراغات وإلصاق البانر بالشريط السفلي */
.s-footer-banner {
    display: block; /* عرض البانر ككتلة */
    margin: 0 !important; /* إزالة الهوامش */
    padding: 0 !important; /* إزالة الحشوات */
    width: 100% !important; /* جعل البانر يغطي العرض بالكامل */
    height: auto !important; /* الحفاظ على النسبة الأصلية للصورة */
    border-radius: 0 !important; /* إزالة أي حواف مستديرة */
    overflow: hidden !important; /* منع أي محتوى زائد */
    background: none !important; /* إزالة أي خلفيات إضافية */
    box-shadow: none !important; /* إزالة أي تأثيرات ظل */
    position: relative !important; /* الوضع الافتراضي */
}

/* إلصاق البانر بالشريط السفلي */
.s-footer-banner + salla-apps-icons {
    margin-top: 0 !important; /* إزالة أي مسافات بين البانر والشريط السفلي */
    padding-top: 0 !important; /* إزالة الحشوات العلوية */
}