/* Add custom CSS styles below */ 
/* 1. التأكد من أن الفوتر يمثل الحاضن الرئيسي */
footer, .site-footer, #footer {
    position: relative !important;
}

/* 2. رفع كتلة السجل التجاري وأزرار السوشيال المرافقة لتوازي الأقسام الأخرى على الويب */
div.flex.flex-wrap.gap-4.items-end {
    position: absolute !important;
    bottom: auto !important; 
    top: 40px !important;     /* مسافة علوية ممتازة لتوازي بداية عناوين الأقسام */
    left: 4% !important;      /* الحفاظ على التموضع بأقصى اليسار */
    right: auto !important; 
    margin: 0 !important;
    
    /* ترتيب داخلي مستقر للويب */
    display: flex !important;
    flex-direction: column !important; 
    align-items: flex-start !important;
    justify-content: flex-start !important;
    
    z-index: 10 !important;
}

/* 3. ❌ إخفاء الكتلة بشكل نهائي وكامل على شاشات الموبايل ❌ */
@media screen and (max-width: 991px) {
    div.flex.flex-wrap.gap-4.items-end {
        display: none !important; /* تختفي الأيقونة تماماً هنا غصباً عن أي قالب */
    }
}




/* تصغير الشعار جداً على شاشات الكمبيوتر (الويب) */
a.flex.items-center.m-0.athena-slide-down-top.athena-animate img,
a.athena-slide-down-top img {
    width: auto !important;
    max-width: 75px !important; /* تم تصغيره للنصف تقريباً ليصبح ناعماً جداً */
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
}

/* تصغير الشعار جداً على شاشات الجوال (الموبايل) */
@media screen and (max-width: 767px) {
    a.flex.items-center.m-0.athena-slide-down-top.athena-animate img,
    a.athena-slide-down-top img {
        max-width: 60px !important; /* حجم صغير ومناسب جداً لشاشات الهاتف */
        margin: 0 auto 8px auto !important;
    }
}



/* تقليص المسافة العلوية والسفلية للفوتر (الويب) */
div.store-footer__inner {
    padding-top: 30px !important;    /* تقليل المسافة من الأعلى */
    padding-bottom: 30px !important; /* تقليل المسافة من الأسفل */
}

/* ضبط المسافات على شاشات الجوال (الموبايل) ليكون ملموماً ومريحاً للتصفح */
@media screen and (max-width: 767px) {
    div.store-footer__inner {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* تغيير خلفية الفوتر بالكامل إلى اللون المخصص */
.store-footer.store-footer--live-editor,
footer.store-footer {
    background-color: #630343 !important; /* اللون العنابي الفاخر المطلوب */
}
/* تغيير خلفية الفوتر بالكامل والجزء الداخلي منه إلى اللون المخصص */
.store-footer.store-footer--live-editor,
footer.store-footer,
.store-footer__inner {
    background-color: #630343 !important; /* اللون العنابي الفاخر المعتمد */
}


/* 🖥️ ضبط ارتفاع البنر إلى 550 بكسل وإلغاء المسافة السفلية تماماً على الويب */
@media screen and (min-width: 768px) {
    
    /* ضبط الحاوية المحددة */
    div.relative.w-full.h-full {
        height: 550px !important;     /* الارتفاع الجديد */
        min-height: 550px !important;
        max-height: 550px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* إجبار السيكشن الأكبر المحيط بالبانر على الانكماش لمنع ظهور أي فراغ */
    section:has(.relative.w-full.h-full),
    div:has(> .relative.w-full.h-full) {
        height: 550px !important;
        min-height: 550px !important;
        max-height: 550px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}


/* 🖥️ رفع القائمة الرئيسية للأعلى قليلاً على شاشات الويب فقط */
@media screen and (min-width: 768px) {
    .main-menu,
    div.main-menu {
        margin-top: -30px !important; /* سحب القائمة للأعلى بمقدار 15 بكسل */
        position: relative !important; /* لضمان استجابة الهامش السالب بشكل صحيح */
        z-index: 50 !important;        /* الحفاظ على ظهور القائمة فوق البنر وعناصر الواجهة */
    }
}


/* تنظيف واقتلاع اللون السكني وتحويل القسم بالكامل للأبيض الصافي */
[class*="s-block--tabs-produtcs"],
.s-block-tabs,
.s-block--tabs-produtcs,
.bg-gray-100 {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* استهداف الطبقات الداخلية المزعجة التي قد تحمل اللون السكني في القالب */
.s-block--tabs-produtcs .s-block__content,
.s-block--tabs-produtcs .tabs-wrapper,
.s-block--tabs-produtcs .container {
    background-color: #ffffff !important;
    background: #ffffff !important;
}


/* 🖥️ رفع قسم التصنيفات للأعلى قليلاً على شاشات الويب فقط */
@media screen and (min-width: 768px) {
    .store_categories_section.section-spacing.container.athena-slide-down-top.athena-animate,
    .store_categories_section {
        margin-top: 15px !important; /* سحب القسم للأعلى بمقدار 40 بكسل */
        position: relative !important;  /* لضمان استجابة وقبول الهامش السالب */
        z-index: 20 !important;         /* لضمان عدم اختفائه تحت البنر */
    }
}


/* 🖥️ تقليل المسافة العلوية لقسم المنتجات على شاشات الويب فقط */
@media screen and (min-width: 768px) {
    .s-block.s-block-tabs.s-block--tabs-produtcs.s-block--full-bg.as-slider.tabs-initialized,
    .s-block--tabs-produtcs {
        padding-top: 15px !important;    /* تقليص المساحة الداخلية العلوية المزعجة */
        margin-top: 30px !important;    /* سحب القسم بالكامل للأعلى لتقريب المسافة */
        position: relative !important;   /* لضمان تطبيق الهامش السالب بنجاح */
    }
}

/* 📱🖥️ إزالة المسافة العلوية تماماً (بادينج ومارجين) على الموبايل والويب */
.s-block.s-block--bundle-products-by-category,
.s-block--bundle-products-by-category {
    padding-top: 15px !important;      /* تصفير البادينج العلوي تماماً */
    margin-top: -45px !important;    /* سحب القسم للأعلى لإلغاء أي فراغ متبقي غصباً عن القالب */
    position: relative !important;   /* تأمين تفعيل الهامش السالب */
}