/*
===================================
1. إخفاء الترويسة الأصلية
===================================
*/

/* تحديد الترويسة الرئيسية باستخدام الـ ID لإخفائها */
#site-header-outer {
    display: none !important;
}

/*
===================================
2. تعديل موضع القائمة الأفقية والمحتوى
===================================
*/

/* رفع شريط القوائم الأفقية (Hero / Horizontal Navigation) */
.header-block--nav-wrapper {
    /* هذه القيمة سيتم تحديثها تلقائياً بواسطة JavaScript! */
    margin-top: -65px; 
    
    /* ضمان أن شريط القوائم يمتد على كامل العرض */
    width: 100%;
}

/* رفع أول قسم محتوى بعد القوائم بمقدار ارتفاع الترويسة */
main section:first-of-type {
    /* هذه القيمة سيتم تحديثها تلقائياً بواسطة JavaScript! */
    margin-top: -65px; 
}


/*
===================================
3. إضافة الشعار إلى القائمة الأفقية (لشاشة الكمبيوتر)
===================================
*/

/* إضافة الشعار إلى أقصى يمين شريط القوائم الأفقية */
.nav-desktop--horizontal:before {
    content: "";
    display: block;
    width: 65px; /* عرض الشعار */
    height: 65px; /* ارتفاع الشعار */
    /* رابط الشعار المأخوذ من كود المتجر: */
    background: url(https://cdn.salla.sa/daDxA/zqbWL6i4ODYWGGpVqVuZ0IduxK76oUxyWmNE5mRS.jpg) center/contain no-repeat;
    float: right; /*  */
}

/* تعديل المسافة على يمين القائمة لتجنب تداخل الشعار مع أول عنصر */
.nav-desktop--horizontal ul {
    margin-right: 65px; /* مساحة بحجم عرض الشعار */
}