/* ==========================================================================
   كود CSS القاطع لإلغاء الشريط البني والفراغات البيضاء بالكامل
   ========================================================================== */

/* 1. تصفير الهوامش العلوية لجسم المتجر بالكامل وإلغاء أي بياض */
html, body, #app, .app-layout, .main-content, .page-wrapper, .content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: #2B1A0F !important; /* ربط الخلفية بالبني الغامق تماماً */
}

/* 2. إخفاء الهيدر والشريط البني العلوي تماماً ومنع حجز أي مساحة */
header, .main-header, .top-header, .header-top, .nav-wrapper, .main-menu, #main-header, .store-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 3. سحب القسم الأول المخصص (صورة الخشب) لأعلى حافة الشاشة بالقوة */
.main-content > div:first-child, 
[data-component-id="424968771"] {
    margin-top: -60px !important; /* سحب التصميم للأعلى ليلتصق بالحافة صفر تماماً */
    padding-top: 0 !important;
}

/* 4. إلغاء المساحة البيضاء المتبقية أسفل الكروت وحولها وتوحيدها بالبني */
[data-component-id="424968771"] {
    background-color: #2B1A0F !important; /* يغطي الفراغ الأبيض الخلفي بالبني الغامق */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 5. الحفاظ على توسيط الكروت الأربعة منضبطة بجانب بعضها */
[data-component-id="424968771"] .container,
[data-component-id="424968771"] .grid,
[data-component-id="424968771"] .row {
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}