/* =========================================
   1. متغيرات الألوان الأساسية (Theme Variables)
   ========================================= */
:root {
    --main-color: #613230; /* اللون الرئيسي للمتجر (بنّي غامق) */
}

/* =========================================
   2. تنسيقات الجسم العام (Body Styles)
   ========================================= */
body {
    background-color: #ffff !important; /* خلفية الصفحة بيضاء */
}

/* =========================================
   3. شريط التنقل العلوي (Header / Navigation)
   ========================================= */
/** تنسيق أيقونات المستخدم وسلة التسوق **/
.main-nav-container i.header-btn__icon.sicon-user-circle,
.main-nav-container i.header-btn__icon.icon.sicon-shopping-bag {
    background-color: white !important;
    color: var(--main-color);
}

/* ضبط ارتفاع قائمة التنقل المخصصة */
custom-main-menu {
    min-height: fit-content !important;
}

/* ضبط حجم شعار المتجر (Aluma logo) */
img[alt="Aluma logo"] {
    max-height: 4.1rem !important;
}

/* تعديل ارتفاع القائمة (تعديل لاحق يلغي السابق) */
custom-main-menu {
    min-height: unset !important;
}

/* تنسيق أيقونة القائمة (الهمبرغر) */
i.sicon-menu.text-primary.text-2xl {
    color: var(--main-color);
    width: 40px !important;
    height: 40px;
    padding: 2px;
    overflow: hidden;
    position: relative;
    border-radius: 50px;
    background-color: white;
}

/* توسيط أيقونة القائمة */
.sicon-menu:before {
    left: 50% !important;
    top: 50% !important;
    position: absolute;
    transform: translate(-50%, -50%);
}

/* تنسيق عداد المنتجات في السلة */
.main-nav-container span.s-cart-summary-count {
    background-color: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

/* تنسيق السعر الإجمالي في السلة */
.main-nav-container b.s-cart-summary-total {
    color: #ffffff;
}

/* خلفية شريط الهيدر العلوي */
header .inner.bg-inherit.w-full {
    background-color: var(--main-color);
    color: #fff;
}
/*** نهاية تنسيقات الهيدر ***/

/* =========================================
   4. البانرات الإعلانية (Banners)
   ========================================= */
a.banner-entry.square-photos {
    background-color: transparent;
    height: 100%;
    padding: 0;
}

/* تنسيق شبكة البانرات (عمودين للشاشات المتوسطة) */
section.s-block.s-block--banners.container .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* =========================================
   5. السلايدر الرئيسي (Photo Slider)
   ========================================= */
section.s-block.s-block--photos-slider {
    margin-top: 0;
}

/* ضبط شرائح السلايدر لإلغاء الحواف والمسافات */
section.s-block.s-block--photos-slider .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

section.s-block.s-block--photos-slider .swiper-slide,
section.s-block.s-block--photos-slider .swiper-slide img {
    border-radius: 0 !important;
}

section.s-block.s-block--photos-slider .swiper.s-slider-container {
    padding: 0 !important;
}

/* إخفاء أسهم التنقل في السلايدر الرئيسي */
.home-slider.photos-slider .s-slider-block__title-nav {
    display: none !important;
}
/** نهاية تنسيقات السلايدر ***/

/* =========================================
   6. البانرات الثابتة والعروض (Fixed Banners)
   ========================================= */
section#IRT__photos-slider-0 {
    margin-bottom: 0 !important;
}

/* جعل البانر العريض يملأ الشاشة دون هوامش */
section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
}

.banner--fixed img {
    border-radius: 0 !important;
}

/* =========================================
   7. بطاقات المنتجات (Product Cards)
   ========================================= */
custom-salla-product-card {
    border: 1px solid #dddd;
    transition: 0.5s !important;
    overflow: hidden;
}

/* تأثير عند مرور الماوس على زر الإضافة للسلة (رفع البطاقة وظل) */
custom-salla-product-card:has(button.s-button-element.s-button-btn.s-button-outline:hover) {
    box-shadow: 3px 3px 5px 4px #ddd !important;
    border: 1px solid var(--main-color);
}

/* نفس التأثير السابق مخصص لصفحة الرئيسية فقط */
body.index custom-salla-product-card:has(button.s-button-element.s-button-btn.s-button-outline:hover) {
    transform: translateY(-10px);
    box-shadow: 3px 3px 5px 4px #ddd !important;
    border: 1px solid var(--main-color);
}

/* ضبط مسافات سلايدر المنتجات في الصفحة الرئيسية */
body.index salla-products-slider.s-products-slider-wrapper.hydrated .swiper.s-slider-container {
    padding: 30px 0 0 !important;
}

/* تنسيق زر "أضف للسلة" */
button.s-button-element.s-button-btn.s-button-outline {
    background-color: var(--main-color);
    color: #fff !important;
}
/** نهاية تنسيقات المنتجات ***/

/* =========================================
   8. تذييل الصفحة (Footer)
   ========================================= */
.store-footer__inner {
    background-color: var(--main-color) !important;
    color: #fff;
}

/* =========================================
   9. عناوين الأقسام (Section Titles)
   ========================================= */
.s-block__title h2,
.s-slider-block__title h2 {
    color: var(--main-color);
    font-size: 25px;
}

/* =========================================
   10. التجاوب مع الشاشات (Media Queries)
   ========================================= */

/* شاشات الكمبيوتر (أكبر من 992 بكسل) */
@media(min-width: 992px) {
    .main-nav-container.fixed-header .inner.bg-inherit.w-full {
        padding-block: 12px;
    }
}

/* شاشات التابلت والموبايل (أصغر من 992 بكسل) */
@media(max-width: 992px) {
    /* توسيط عناصر الفوتر */
    footer * {
        justify-content: center;
        text-align: center;
        justify-content: center;
    }

    /* مسافة شعار الفوتر */
    img.footer-logo {
        margin-bottom: 1.5rem;
    }

    /* ضبط حجم شعار الهيدر الثابت */
    .main-nav-container.fixed-pinned .navbar-brand img {
        max-height: 61px;
    }

    /* تصغير حجم عناوين الأقسام للموبايل */
    .s-block__title h2,
    .s-slider-block__title h2 {
        color: var(--main-color);
        font-size: 20px;
    }

    /* ضبط ارتفاع القائمة الرئيسية */
    div#mainnav {
        height: fit-content !important;
    }
}

/* شاشات اللابتوب الكبيرة (1024 بكسل فأكثر) */
@media only screen and (min-width: 1024px) {
    /* لون رابط القائمة عند التحويم */
    .main-menu li>a:hover {
        color: #fff !important;
        text-decoration-line: none;
    }
}