/* --- إعدادات الهاتف: تموضع أفقي في المنتصف وعمودي في الأسفل --- */
@media (max-width: 768px) {
    .gr-main-banner__content {
        /* محاذاة المحتوى (النصوص والزر) للمنتصف */
        align-items: center !important;
        text-align: center !important;
        
        /* دفع الصندوق بالكامل لأسفل البانر */
        margin-top: auto !important;
        margin-bottom: 30px !important; /* يمكنك تعديل هذه القيمة لزيادة أو تقليل المسافة من الأسفل */
        justify-content: flex-end !important;
    }
}

/* --- إعدادات الكمبيوتر: تموضع أفقي لليمين وعمودي في المنتصف --- */
@media (min-width: 769px) {
    .gr-main-banner__content {
        /* محاذاة المحتوى لليمين (بداية المحور في اتجاه اللغة العربية) */
        align-items: flex-start !important;
        text-align: right !important;
        
        /* توسيط الصندوق بالكامل بشكل عمودي */
        margin-top: auto !important;
        margin-bottom: auto !important;
        justify-content: center !important;
    }
}
/* --- إصلاح تمدد الصور المصغرة في صفحة المنتج فقط --- */

/* تحديد ارتفاع الصور المصغرة (Thumbnails) فقط */
.s-slider-swiper-wrapper .details-thumb {
    height: 90px !important; 
    margin-bottom: 16px !important;
}

/* تقييد ارتفاع الحاوية التي تحتوي على الصور المصغرة فقط (تجاهل البانر الرئيسي) */
.s-slider-swiper-wrapper:has(.details-thumb) {
    max-height: 500px !important; 
}
/* --- تخصيص لون زر أضف للسلة وتأثير التمرير بشكل دقيق --- */

/* --- إضافة تأثير التمرير (الهوفر) فقط مع ترك اللون الأساسي للثيم --- */

/* 1. إضافة نعومة للحركة عند التمرير (دون المساس بألوان الثيم الأساسية) */
custom-salla-product-card .s-button-element.s-button-btn {
    transition: all 0.3s ease-in-out !important;
}

/* 2. تأثير التمرير (Hover) للزر - يتحول للذهبي (يعمل فقط للمنتجات المتوفرة) */
custom-salla-product-card .s-button-element.s-button-btn:not(:disabled):not(.s-button-disabled):hover {
    background-color: #b88739 !important;
    border-color: #b88739 !important;
    color: #ffffff !important;
}

/* 3. إجبار النص والأيقونات بداخل الزر على البقاء باللون الأبيض عند التمرير */
custom-salla-product-card .s-button-element.s-button-btn:not(:disabled):not(.s-button-disabled):hover * {
    color: #ffffff !important;
}

/* توحيد لون خلفية عنصر المنتحات المميزة */
#featured-products-style2-2 {
    background-color: transparent !important;
}

/* توحيد لون خلفية العنوان الترويجي في المتجر كاملاً */
.s-product-card-promotion-title,
.promotion-title {
    background-color: #af884c !important;
}

/* إظهار العنوان الترويجي في بطاقات المنتجات */
.s-product-card-promotion-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99 !important;
}

salla-product-card, custom-salla-product-card {
    position: relative !important; 
    overflow: visible !important;
}

/*لتطبيق الهامش على جميع سلايدرات المنتجات في المتجر */
salla-slider.s-products-slider-slider {
    padding-top: 30px !important;
    display: block;
}

/* تطبيق اللون فقط إذا كانت الصفحة تحتوي على مسار تنقل (صفحة فرعية) */
body:has(salla-breadcrumb) .top-navbar,
body:has(salla-breadcrumb) .top-navbar a,
body:has(salla-breadcrumb) .top-navbar .s-menu-topnav-item,
body:has(salla-breadcrumb) .top-navbar .s-contacts-topnav-link,
body:has(.breadcrumb) .top-navbar,
body:has(.breadcrumb) .top-navbar a,
body:has(.breadcrumb) .top-navbar .s-menu-topnav-item,
body:has(.breadcrumb) .top-navbar .s-contacts-topnav-link {
    color: #44362a !important;
}

/* إضافة هامش أسفل عنصر أزرار التواصل الاجتماعي */
.hidden.lg\:block salla-social,
salla-social {
    margin-bottom: 25px !important; /* يمكنك تغيير 30px إلى المسافة التي تناسبك */
    display: block !important;
}

/* --- 1. تحويل القائمة الجانبية لعمودية في جميع الشاشات --- */
#mobile-menu .main-menu {
    display: flex !important;
    flex-direction: column !important;
}

/* --- 2. ترتيب العناصر بأرقام سالبة لرفعها للأعلى وتجاوز أي فراغات --- */
/* هذا الترتيب سيطبق على النسختين (الكمبيوتر والجوال) بدون إخفاء أي منهما */
#mobile-menu .main-menu > li[id="1125589174"] { order: -6 !important; } /* عروض اليوم الوطني */
#mobile-menu .main-menu > li[id="1933432451"] { order: -5 !important; } /* اقمشة صيفية */
#mobile-menu .main-menu > li[id="34004619"] { order: -4 !important; } /* اقمشة شتوية */
#mobile-menu .main-menu > li[id="547709160"] { order: -3 !important; } /* طاقات كاملة */
#mobile-menu .main-menu > li[id="1608777108"] { order: -2 !important; } /* بكجات الاهداء */
#mobile-menu .main-menu > li[id="offers"] { order: -1 !important; } /* تخفيضات */

/* --- 3. تمييز تصنيف عروض اليوم الوطني باللون الأخضر السعودي --- */
li[id="1125589174"] > a, 
li[id="1125589174"] > a span,
li[id="1125589174"] > span {
    color: #006C35 !important; 
    font-weight: bold !important; 
}

/* 1. إخفاء حاوية المنتجات المجاورة تماماً لكي لا تحجز 66% من مساحة الشاشة */
.special-offer-layout .content {
    display: none !important;
}

/* 2. جعل الحاوية الرئيسية تقوم بتوسيط محتواها في المنتصف */
.special-offer-layout {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* 3. إلغاء تقييد عرض الصورة بـ 32% وتوسيطها بحجم متناسق */
.special-offer-layout .special-offer-media {
    width: 100% !important;
    max-width: 550px !important; /* يمكنك زيادة أو تقليل هذا الرقم للتحكم في حجم الصورة بالكمبيوتر */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* توسيط النص الفرعي في كارت المنتج */
.s-product-card-content-subtitle {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* 1. تصفير حجم النص المباشر ليختفي في صفحة المنتج وكروت العرض مع الحفاظ على التوسيط */
salla-add-product-button[product-id="1434481997"][product-status="out"] .s-button-text,
salla-add-product-button[product-id="1778239873"][product-status="out"] .s-button-text,
salla-add-product-button[product-id="659852423"][product-status="out"] .s-button-text {
    font-size: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    line-height: 1 !important;
}

/* 2. إخفاء أي وسوم فرعية داخل الزر لضمان عدم حجز أي مساحة في الكروت */
salla-add-product-button[product-id="1434481997"][product-status="out"] .s-button-text > *,
salla-add-product-button[product-id="1778239873"][product-status="out"] .s-button-text > *,
salla-add-product-button[product-id="659852423"][product-status="out"] .s-button-text > * {
    display: none !important;
}

/* 3. إظهار كلمة "قريباً" بحجم خط مناسب ومتوسط */
salla-add-product-button[product-id="1434481997"][product-status="out"] .s-button-text::after,
salla-add-product-button[product-id="1778239873"][product-status="out"] .s-button-text::after,
salla-add-product-button[product-id="659852423"][product-status="out"] .s-button-text::after {
    content: "قريباً" !important;
    font-size: 0.95rem !important; /* حجم الخط في الكرت وصفحة المنتج */
    line-height: 2 !important;
    display: block !important;
    text-align: center !important;
}