/* 1. يستهدف الحاوية الأبوية ويجعلها لا تحد من العرض أو تضيف هوامش */
.container {
    /* يجعل العرض كاملاً ويمنع ظهور شريط التمرير الأفقي عند التمدد */
    max-width: 100% !important; 
    overflow-x: hidden !important; 
    /* يلغي أي حشو (Padding) قد يترك مساحة على الجوانب */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. يستهدف البانر ويجعله بعرض الشاشة كاملاً مع التخلص من أي إزاحة */
.container .banner.banner--fixed {
    /* 100vw = 100% من عرض الشاشة */
    width: 100vw !important; 
    
    /* يستخدم هذه التقنية للإزاحة الكاملة من اليسار واليمين */
    position: relative !important; 
    left: 0 !important; /* إلغاء أي إزاحة سابقة */
    right: 0 !important; /* إلغاء أي إزاحة سابقة */
    
    /* هذه المعادلة تضمن أن يبدأ البانر من حافة الشاشة بغض النظر عن هوامش الحاوية الأبوية */
    margin-left: calc(-100vw / 2 + 50%) !important;
    margin-right: calc(-100vw / 2 + 50%) !important;
    
    /* إلغاء أي حشو داخلي للبانر نفسه */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. يضمن أن الصورة تملأ عرض البانر الجديد */
.container .banner.banner--fixed img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 1. يستهدف الشريط العلوي للمتجر (الذي يحمل اللوجو) لإزالة الهامش السفلي */
.header-bar, .navbar, .header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. يستهدف القسم الرئيسي الذي يلي شريط اللوجو */
/* (هذا العنصر هو الأكثر احتمالاً لإضافة المسافة البيضاء) */
.main-content, .main-header, .page-content-wrapper, section, .page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. يستهدف الحاوية التي تحتوي على البانر لإزالة أي مسافات */
.container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* تأكد من عدم وجود هامش سفلي يزيح البانر للأسفل */
    margin-bottom: 0 !important;
}

/* 4. يستهدف البانر نفسه لتصفير الهامش العلوي */
.banner.banner--fixed {
    margin-top: 0 !important;
}

/* 1. تكبير الصورة بوضوح */
.navbar-brand img {
    width: 250px !important;  /* حجم كبير للشعار */
    height: 250px !important; 
}

/* 2. تقييد ارتفاع الشريط العلوي لمنعه من التمدد بشكل كبير */
.navbar, .header-bar {
    max-height: 80px !important; /* قيد ارتفاع الشريط العلوي، اختر القيمة المناسبة */
    overflow: visible !important; /* يسمح للشعار بالبروز خارج حدود الشريط إذا لزم الأمر */
}

/* 3. لضبط موضع الشعار ليظهر بشكل أفضل */
.navbar-brand {
    margin-top: 5px !important; /* لتنزيل الشعار قليلاً ليتوسط الشريط */
}
.navbar-brand img {
  width: 180px; /* غيّر الرقم حسب الحجم اللي يناسبك */
  height: auto; /* يحافظ على التناسب */
  max-height: 100px; /* يمكنك التحكم في أقصى ارتفاع */
  transition: all 0.3s ease; /* حركة ناعمة عند التغيير */
}

.navbar-brand img:hover {
  transform: scale(1.1); /* تكبير بسيط عند تمرير الماوس */
}

.text-gray-400 {
  color: #ffffff !important; /* يجعل النص أبيض */
}

.text-gray-400 a {
  color: #ffffff !important; /* يجعل الرابط أبيض أيضًا */
}

.text-gray-400 a:hover {
  color: #cccccc !important; /* لون رمادي فاتح عند التمرير */
}
----------------
/* تخصيص الفوتر الرئيسي في سلة */
.footer,
.s-footer,
.site-footer {
    background-color: #1a1a1a !important; /* خلفية سوداء فاخرة */
    color: #ffffff !important; /* نص أبيض */
    padding: 40px 0 20px !important; /* مسافة داخلية أكبر */
    font-family: 'Arial', sans-serif !important; /* خط أنيق */
    font-size: 14px !important; /* حجم نص مناسب */
    border-top: 3px solid #d4af37 !important; /* خط فاصل ذهبي أعلى الفوتر */
}

/* تخصيص الروابط في الفوتر */
.footer a,
.s-footer a,
.site-footer a {
    color: #ffffff !important; /* لون الروابط أبيض */
    text-decoration: none !important; /* إزالة الخط تحت */
    transition: color 0.3s ease !important; /* انتقال سلس */
}

.footer a:hover,
.s-footer a:hover,
.site-footer a:hover {
    color: #d4af37 !important; /* لون ذهبي عند التحويم */
    text-decoration: underline !important; /* خط تحت عند التحويم */
}

/* تخصيص قسم حقوق النشر السفلي (غالباً .footer-bottom في سلة) */
.footer-bottom,
.footer-bar,
.site-info {
    background-color: #0f0f0f !important; /* خلفية أغمق */
    color: #cccccc !important; /* نص رمادي فاتح */
    padding: 15px 0 !important; /* مسافة داخلية */
    text-align: center !important; /* ترتيب في المنتصف */
    font-size: 12px !important; /* حجم أصغر */
}

.footer-bottom a,
.footer-bar a,
.site-info a {
    color: #d4af37 !important; /* روابط ذهبية */
}

.footer-bottom a:hover,
.footer-bar a:hover,
.site-info a:hover {
    color: #ffffff !important; /* أبيض عند التحويم */
}

/* تحسين الاستجابة للهواتف (Responsive) - مهم في سلة للمتاجر المتنقلة */
@media (max-width: 768px) {
    .footer,
    .s-footer,
    .site-footer {
        padding: 30px 0 15px !important; /* تقليل المسافات على الموبايل */
        text-align: center !important; /* ترتيب كل شيء في المنتصف */
    }
    
    .footer-bottom,
    .footer-bar,
    .site-info {
        padding: 10px 0 !important;
    }
    
    /* إخفاء بعض العناصر إذا كانت مزدحمة على الموبايل */
    .footer .widget {
        margin-bottom: 20px !important;
    }
}

/* تخصيص الأيقونات الاجتماعية إذا كانت موجودة في الفوتر */
.footer .social-icons a,
.s-footer .social-icons a,
.site-footer .social-icons a {
    background-color: #333333 !important; /* خلفية للأيقونات */
    border-radius: 50% !important; /* شكل دائري */
    padding: 10px !important;
    margin: 0 5px !important;
    color: #ffffff !important;
}

.footer .social-icons a:hover,
.s-footer .social-icons a:hover,
.site-footer .social-icons a:hover {
    background-color: #d4af37 !important; /* ذهبي عند التحويم */
    color: #1a1a1a !important;
}
nt; 
    text-align: center !important; 
}


--------