/* =====================================================
   الحديقة السلطانية 
   تدرج الهيدر العلوي + الفوتر السفلي
   ===================================================== */


/* =====================================================
   1) الهيدر العلوي
   ===================================================== */

/* نجعل خلفيات العناصر الداخلية شفافة
   حتى يظهر التدرج الأساسي للهيدر */
header *,
.store-header *,
.main-header *,
.salla-header *,
#header * {
    background-color: transparent !important;
}


/* التدرج الأساسي للهيدر */
header,
.store-header,
.main-header,
.salla-header,
#header {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfaf5 35%,
            #f7ecd9 72%,
            #edd4a7 100%
        ) !important;

    background-color: #f7ecd9 !important;

    border-bottom:
        1px solid rgba(196, 153, 84, 0.18) !important;
}


/* تحسين وضوح روابط القائمة */
header a,
.store-header a,
.main-header a,
.salla-header a,
#header a {
    color: #2f2923 !important;
}


/* =====================================================
   2) الفوتر السفلي
   ===================================================== */

/* إزالة الخلفيات الداخلية
   حتى يظهر التدرج كخلفية واحدة */
footer *,
.store-footer *,
.salla-footer *,
.footer *,
#footer * {
    background-color: transparent !important;
}


/* التدرج الأساسي للفوتر */
footer,
.store-footer,
.salla-footer,
.footer,
#footer {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf7f0 28%,
            #f3e7d2 65%,
            #e2c28e 100%
        ) !important;

    background-color: #f3e7d2 !important;
}


/* =====================================================
   3) المحافظة على الأزرار والأيقونات
   ===================================================== */

/* لا نجبر الأزرار على لون التدرج */
header button,
footer button,
.store-header button,
.store-footer button {
    background-color: initial;
}


/* =====================================================
   4) تحسين بسيط للفصل بين الهيدر والمحتوى
   ===================================================== */

header,
.store-header,
.main-header,
.salla-header,
#header {
    box-shadow:
        0 5px 18px rgba(70, 50, 25, 0.035) !important;
}


/* =====================================================
   5) نسخة الجوال
   ===================================================== */

@media (max-width: 768px) {

    header,
    .store-header,
    .main-header,
    .salla-header,
    #header {
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #fcf8f1 50%,
                #f1dfc0 100%
            ) !important;
    }

}