/*=========================================
1. الهيدر - الحالة العادية (شفاف ولوجو أبيض)
============================================*/
.main-nav-container.shadow-default.bg-white {
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.main-nav-container.shadow-default.bg-white .navbar-brand img {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease;
}

.main-nav-container.shadow-default.bg-white a,
.main-nav-container.shadow-default.bg-white .icon,
.main-nav-container.shadow-default.bg-white svg,
.header-btn,
.header-btn *,
.s-cart-summary-wrapper,
.s-cart-summary-wrapper * {
    color: #fff !important;
    fill: #fff !important;
    transition: color 0.3s ease, fill 0.3s ease;
}

/* حل مشكلة قائمة المستخدم: تأكد من ظهورها في كل الحالات */
.main-nav-container .s-user-menu-dropdown-item-title {
    color: #6b4e3d !important;
}

.main-nav-container .s-user-menu-dropdown-item svg path {
    fill: #6b4e3d !important;
}

/* =========================================
2. الهيدر - حالة التمرير (خلفية بيضاء ولوجو ملون وألوان بني داكن)
============================================ */
.main-nav-container.shadow-default.bg-white.scrolled {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.main-nav-container.shadow-default.bg-white.scrolled .navbar-brand img {
    filter: none !important;
}

.main-nav-container.shadow-default.bg-white.scrolled a,
.main-nav-container.shadow-default.bg-white.scrolled .icon,
.main-nav-container.shadow-default.bg-white.scrolled svg,
.main-nav-container.shadow-default.bg-white.scrolled .header-btn,
.main-nav-container.shadow-default.bg-white.scrolled .header-btn *,
.main-nav-container.shadow-default.bg-white.scrolled .s-cart-summary-wrapper,
.main-nav-container.shadow-default.bg-white.scrolled .s-cart-summary-wrapper * {
    color: #5a3e1b !important;
    fill: #5a3e1b !important;
}

/* حل مشكلة قائمة المستخدم عند التمرير: تأكد من تغيير الألوان */
.main-nav-container.scrolled .s-user-menu-dropdown-item-title {
    color: #5a3f31 !important;
}

.main-nav-container.scrolled .s-user-menu-dropdown-item svg path {
    fill: #5a3f31 !important;
}

/* =========================================
3. تكبير اللوجو (عام لكل الصفحات)
============================================ */
.navbar-brand img {
    max-height: 100px !important;
    height: auto;
}

/* =========================================
4. تنسيق القائمة داخل الهيدر
============================================ */
.top-navbar {
    padding-top: 1rem !important;
    padding-bottom: 1.2rem !important;
}

/* تنسيق داخلي الهيدر */
.inner.bg-inherit {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* حاوية اللوجو + القائمة */
.inner.bg-inherit .navbar-brand,
.inner.bg-inherit .main-nav-container {
    display: flex;
    align-items: center;
}

/* مسافة بين اللوجو والقائمة */
.inner.bg-inherit .navbar-brand {
    margin-right: 15px;
}

/* =========================================
5. ألوان الأيقونات وأزرار الهيدر (في الحالة العادية - أبيض)
============================================ */
.top-navbar .icon,
.top-navbar svg,
.header-btn,
.header-btn *,
.s-cart-summary-wrapper,
.s-cart-summary-wrapper * {
    fill: #fff !important;
    color: #fff !important;
}

/* =========================================
6. ترتيب موبايل لقائمة الموبايل
============================================ */
#mobile-menu {
    display: flex !important;
    justify-content: center !important;
}

/* =========================================
7. شفافية الهيدر الأساسية (موضع مطلق + شفاف)
============================================ */
.store-header {
    background-color: transparent !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

/* ألوان القائمة العلوية */
.s-menu-topnav-list,
.s-menu-topnav-list a {
    color: #fff !important;
}

/* =========================================
8. السلايدر - ضبط مكانه أسفل الهيدر (الصفحة الرئيسية)
============================================ */
/* السلايدر نفسه */
.s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder,
.s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder .swiper-container,
.s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder .swiper-slide {
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: 100vh !important;
    min-height: 800px !important;
}

/* الصور داخل السلايدر */
.s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* تعديل السلايدر على شاشات الموبايل */
@media (max-width: 768px) {
    .store-header {
        height: 0 !important;
        padding: 0 !important;
    }

    .store-header .top-navbar,
    .store-header .top-navbar button,
    .store-header .top-navbar a {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder,
    .s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder .swiper-container,
    .s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder .swiper-slide {
        height: 50vh !important;
        min-height: auto !important;
    }

    .s-block.s-block--hero-slider.s-block--full-bg.wide-placeholder img {
        object-position: center center !important;
        height: 100% !important;
        width: 100% !important;
    }
}

.s-slider-prev,
.s-slider-next {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* تكبير حجم الـ SVG داخل الأزرار */
.s-slider-prev svg,
.s-slider-next svg {
    width: 48px !important;
    height: 48px !important;
    fill: #fff !important;
}

@media (max-width: 768px) {
    .s-slider-prev svg,
    .s-slider-next svg {
        width: 30px !important;
        height: 30px !important;
    }

    .s-slider-prev,
    .s-slider-next {
        width: 30px !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .store-footer,
    .store-footer__inner {
        padding-right: 15px !important;
        padding-left: 15px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

.s-slider-container .swiper-slide {
    position: relative;
}

.slide-link-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: block;
    text-decoration: none;
    color: transparent;
    cursor: pointer;
}
/*
.s-block--hero-slider .overlay-bg {
    background-color: rgba(58, 47, 31, 0.15) !important;
}
*/
@media (max-width: 768px) {
    .top-navbar {
        display: none !important;
    }
}

/* =========================================
9. الفوتر - خلفية ونصوص ولون الروابط
============================================ */
.store-footer,
.store-footer__inner {
    background-color: #402c10 !important;
    color: #ffffff !important;
    padding-right: 50px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.store-footer a {
    color: #ffffff !important;
}

/* ===== تعديل المسافة العلوية للـ breadcrumbs في صفحات المنتج، المقالات والمدونة ===== */
body.page-single nav.breadcrumbs,
body.product-index nav.breadcrumbs,
body.product-single nav.breadcrumbs,
body.blog-index nav.breadcrumbs {
    margin-top: 50px !important;
}

/* =========================================
10. الهيدر في الصفحات الداخلية (حل شامل)
============================================ */
/* هنا الحل الشامل الذي يجمع كل الصفحات الداخلية وصفحات حساب المستخدم في مكان واحد */
body.product-index .store-header,
body.product-single .store-header,
body.blog-index .store-header,
body.cart .store-header,
body.salla-page .store-header,
body.page-single .store-header,
body[class*="customer-"] .store-header {
    position: relative !important;
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 999;
}

body.product-index .store-header .top-navbar,
body.product-single .store-header .top-navbar,
body.blog-index .store-header .top-navbar,
body.cart .store-header .top-navbar,
body.salla-page .store-header .top-navbar,
body.page-single .store-header .top-navbar,
body[class*="customer-"] .store-header .top-navbar {
    background-color: #f8f8f8 !important;
}

body.product-index .store-header,
body.product-single .store-header,
body.blog-index .store-header,
body.cart .store-header,
body.salla-page .store-header,
body.page-single .store-header,
body[class*="customer-"] .store-header {
    height: 170px;
}

body.product-index .store-header .inner.bg-inherit,
body.product-single .store-header .inner.bg-inherit,
body.blog-index .store-header .inner.bg-inherit,
body.cart .store-header .inner.bg-inherit,
body.salla-page .store-header .inner.bg-inherit,
body.page-single .store-header .inner.bg-inherit,
body[class*="customer-"] .store-header .inner.bg-inherit {
    display: flex !important;
    align-items: center !important;
    height: auto;
}

body.product-index .store-header .top-navbar,
body.product-single .store-header .top-navbar,
body.blog-index .store-header .top-navbar,
body.cart .store-header .top-navbar,
body.salla-page .store-header .top-navbar,
body.page-single .store-header .top-navbar,
body[class*="customer-"] .store-header .top-navbar,
body.product-index .store-header .inner.bg-inherit,
body.product-single .store-header .inner.bg-inherit,
body.blog-index .store-header .inner.bg-inherit,
body.cart .store-header .inner.bg-inherit,
body.salla-page .store-header .inner.bg-inherit,
body.page-single .store-header .inner.bg-inherit,
body[class*="customer-"] .store-header .inner.bg-inherit {
    color: #5a3e1b !important;
}

body.product-index .store-header .top-navbar a,
body.product-single .store-header .top-navbar a,
body.blog-index .store-header .top-navbar a,
body.cart .store-header .top-navbar a,
body.salla-page .store-header .top-navbar a,
body.page-single .store-header .top-navbar a,
body[class*="customer-"] .store-header .top-navbar a,
body.product-index .store-header .inner.bg-inherit a,
body.product-single .store-header .inner.bg-inherit a,
body.blog-index .store-header .inner.bg-inherit a,
body.cart .store-header .inner.bg-inherit a,
body.salla-page .store-header .inner.bg-inherit a,
body.page-single .store-header .inner.bg-inherit a,
body[class*="customer-"] .store-header .inner.bg-inherit a {
    color: #5a3e1b !important;
    text-decoration: none;
}

body.product-index .store-header .header-btn,
body.product-single .store-header .header-btn,
body.blog-index .store-header .header-btn,
body.cart .store-header .header-btn,
body.salla-page .store-header .header-btn,
body.page-single .store-header .header-btn,
body[class*="customer-"] .store-header .header-btn {
    color: #5a3e1b !important;
    border-color: #5a3e1b !important;
    background-color: transparent !important;
}

body.product-index #s-cart-icon,
body.product-index .s-cart-summary-content,
body.product-index .s-cart-summary-total,
body.product-index .header-btn__icon.icon.sicon-shopping-bag,
body.product-single #s-cart-icon,
body.product-single .s-cart-summary-content,
body.product-single .s-cart-summary-total,
body.product-single .header-btn__icon.icon.sicon-shopping-bag,
body.blog-index #s-cart-icon,
body.blog-index .s-cart-summary-content,
body.blog-index .s-cart-summary-total,
body.blog-index .header-btn__icon.icon.sicon-shopping-bag,
body.cart #s-cart-icon,
body.cart .s-cart-summary-content,
body.cart .s-cart-summary-total,
body.cart .header-btn__icon.icon.sicon-shopping-bag,
body.salla-page #s-cart-icon,
body.salla-page .s-cart-summary-content,
body.salla-page .s-cart-summary-total,
body.salla-page .header-btn__icon.icon.sicon-shopping-bag,
body.page-single #s-cart-icon,
body.page-single .s-cart-summary-content,
body.page-single .s-cart-summary-total,
body.page-single .header-btn__icon.icon.sicon-shopping-bag,
body[class*="customer-"] #s-cart-icon,
body[class*="customer-"] .s-cart-summary-content,
body[class*="customer-"] .s-cart-summary-total,
body[class*="customer-"] .header-btn__icon.icon.sicon-shopping-bag {
    color: #5a3e1b !important;
}

body.product-index .store-header .main-nav-container.shadow-default.bg-white .navbar-brand img,
body.product-single .store-header .main-nav-container.shadow-default.bg-white .navbar-brand img,
body.blog-index .store-header .main-nav-container.shadow-default.bg-white .navbar-brand img,
body.cart .store-header .main-nav-container.shadow-default.bg-white .navbar-brand img,
body.salla-page .store-header .main-nav-container.shadow-default.bg-white .navbar-brand img,
body.page-single .store-header .main-nav-container.shadow-default.bg-white .navbar-brand img,
body[class*="customer-"] .store-header .main-nav-container.shadow-default.bg-white .navbar-brand img {
    filter: none !important;
    opacity: 1 !important;
    max-height: 90px !important;
}

body.product-index .store-header .main-nav-container.shadow-default.bg-white svg path,
body.product-single .store-header .main-nav-container.shadow-default.bg-white svg path,
body.blog-index .store-header .main-nav-container.shadow-default.bg-white svg path,
body.cart .store-header .main-nav-container.shadow-default.bg-white svg path,
body.salla-page .store-header .main-nav-container.shadow-default.bg-white svg path,
body.page-single .store-header .main-nav-container.shadow-default.bg-white svg path,
body[class*="customer-"] .store-header .main-nav-container.shadow-default.bg-white svg path {
    fill: #5a3e1b !important;
}

body.product-index .store-header .header-btn__icon.sicon-user-circle,
body.product-single .store-header .header-btn__icon.sicon-user-circle,
body.blog-index .store-header .header-btn__icon.sicon-user-circle,
body.cart .store-header .header-btn__icon.sicon-user-circle,
body.salla-page .store-header .header-btn__icon.sicon-user-circle,
body.page-single .store-header .header-btn__icon.sicon-user-circle,
body[class*="customer-"] .store-header .header-btn__icon.sicon-user-circle {
    color: #5a3e1b !important;
}

body.product-index .store-header.scrolled,
body.product-single .store-header.scrolled,
body.blog-index .store-header.scrolled,
body.cart .store-header.scrolled,
body.salla-page .store-header.scrolled,
body.page-single .store-header.scrolled,
body[class*="customer-"] .store-header.scrolled {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000;
    transition: all 0.3s ease;
}

body.product-index .store-header.scrolled .navbar-brand img,
body.product-single .store-header.scrolled .navbar-brand img,
body.blog-index .store-header.scrolled .navbar-brand img,
body.cart .store-header.scrolled .navbar-brand img,
body.salla-page .store-header.scrolled .navbar-brand img,
body.page-single .store-header.scrolled .navbar-brand img,
body[class*="customer-"] .store-header.scrolled .navbar-brand img {
    max-height: 60px !important;
    transition: max-height 0.3s ease;
}

body.product-index .page-content,
body.product-single .page-content,
body.blog-index .page-content,
body.cart .page-content,
body.salla-page .page-content,
body.page-single .page-content,
body[class*="customer-"] .page-content {
    padding-top: 120px;
}

body.product-index .page-content,
body.product-single .page-content,
body.blog-index .page-content,
body.cart .page-content,
body.salla-page .page-content,
body.page-single .page-content,
body[class*="customer-"] .page-content {
    padding-top: 50px;
}

@media (max-width: 768px) {
    body.product-index .store-header,
    body.product-single .store-header,
    body.blog-index .store-header,
    body.cart .store-header,
    body.salla-page .store-header,
    body.page-single .store-header,
    body[class*="customer-"] .store-header {
        padding-top: 5px !important;
        padding-bottom: 15px !important;
        min-height: 100px !important;
    }
}

/* =========================================
11. تحسينات أخرى
============================================ */
.s-block--testimonials .s-reviews-container {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    padding: 10px 15px;
}

.s-block--testimonials .s-reviews-swiper-slide {
    max-height: none !important;
    overflow: visible !important;
}

/* =========================================
12. الوضع الداكن - ألوان خلفيات ونصوص وروابط وأزرار
============================================ */
.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

.dark-mode a {
    color: #ffffff !important;
}

.dark-mode .main-nav-container {
    background-color: #1e1e1e !important;
}

.dark-mode .product-card,
.dark-mode .card,
.dark-mode .s-block {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

.dark-mode .store-footer__inner {
    background-color: #1e1e1e !important;
    color: #ccc !important;
}

.dark-mode .store-footer a {
    color: #ffffff !important;
}

.dark-mode .s-products-slider-wrapper {
    background-color: #1a1a1a !important;
}

.dark-mode .s-product-card-content-title,
.dark-mode .s-product-card-price {
    color: #3a2f1f !important;
}

.dark-mode .s-reviews-testimonial__text {
    color: #5a3e1b !important;
}

.dark-mode .s-product-card-content-title a {
    color: #3a2f1f !important;
    text-decoration: none;
}

.dark-mode .s-block--hero-slider .overlay-bg {
    background-color: rgba(58, 47, 31, 0.05) !important;
}

.dark-mode .store-footer {
    background-color: #1a1a1a !important;
    color: #ccc !important;
}

/* =========================================
13. زر الصعود للأعلى (fixed position وستايل الأزرار)
============================================ */
#customControls {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

#customControls button {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#customControls button:hover {
    background-color: #555;
}

/* =========================================
14. تخصيص الوضع الداكن في صفحات التعريف، التصنيف، المنتج، والمدونة (حل شامل)
============================================ */
body.page-single.dark-mode,
body.product-index.dark-mode,
body.product-single.dark-mode,
body.blog-index.dark-mode,
body.salla-page.dark-mode,
body[class*="customer-"].dark-mode {
    color: #ffffff !important;
}

body.page-single.dark-mode a,
body.product-index.dark-mode a,
body.product-single.dark-mode a,
body.blog-index.dark-mode a,
body.salla-page.dark-mode a,
body[class*="customer-"].dark-mode a {
    color: #cccccc !important;
    text-decoration: none;
}

body.page-single.dark-mode h1,
body.page-single.dark-mode h2,
body.page-single.dark-mode h3,
body.page-single.dark-mode h4,
body.page-single.dark-mode h5,
body.page-single.dark-mode p,
body.product-index.dark-mode h1,
body.product-index.dark-mode h2,
body.product-index.dark-mode h3,
body.product-index.dark-mode h4,
body.product-index.dark-mode h5,
body.product-index.dark-mode p,
body.product-single.dark-mode h1,
body.product-single.dark-mode h2,
body.product-single.dark-mode h3,
body.product-single.dark-mode h4,
body.product-single.dark-mode h5,
body.product-single.dark-mode p,
body.blog-index.dark-mode h1,
body.blog-index.dark-mode h2,
body.blog-index.dark-mode h3,
body.blog-index.dark-mode h4,
body.blog-index.dark-mode h5,
body.blog-index.dark-mode p,
body.salla-page.dark-mode h1,
body.salla-page.dark-mode h2,
body.salla-page.dark-mode h3,
body.salla-page.dark-mode h4,
body.salla-page.dark-mode h5,
body.salla-page.dark-mode p,
body[class*="customer-"].dark-mode h1,
body[class*="customer-"].dark-mode h2,
body[class*="customer-"].dark-mode h3,
body[class*="customer-"].dark-mode h4,
body[class*="customer-"].dark-mode h5,
body[class*="customer-"].dark-mode p {
    color: #ffffff !important;
}

body.page-single.dark-mode button,
body.product-index.dark-mode button,
body.product-single.dark-mode button,
body.blog-index.dark-mode button,
body.salla-page.dark-mode button,
body[class*="customer-"].dark-mode button {
    color: #ffffff !important;
    background-color: #5a3e1b !important;
    border-color: #5a3e1b !important;
}

/* =========================================
15. تخصيص الوضع الداكن داخل الصفحات الداخلية (منتج - مراجعات - تعليقات) (حل شامل)
============================================ */
body.page-single.dark-mode .s-product-card-content-title,
body.page-single.dark-mode .s-product-card-price,
body.product-single.dark-mode .s-product-card-content-title,
body.product-single.dark-mode .s-product-card-price,
body.product-index.dark-mode .s-product-card-content-title,
body.product-index.dark-mode .s-product-card-price,
body.salla-page.dark-mode .s-product-card-content-title,
body.salla-page.dark-mode .s-product-card-price,
body[class*="customer-"].dark-mode .s-product-card-content-title,
body[class*="customer-"].dark-mode .s-product-card-price {
    color: #3a2f1f !important;
}

body.page-single.dark-mode .s-product-card-content-title a,
body.product-single.dark-mode .s-product-card-content-title a,
body.product-index.dark-mode .s-product-card-content-title a,
body.salla-page.dark-mode .s-product-card-content-title a,
body[class*="customer-"].dark-mode .s-product-card-content-title a {
    color: #3a2f1f !important;
    text-decoration: none;
}

body.page-single.dark-mode .s-reviews-testimonial__text,
body.product-single.dark-mode .s-reviews-testimonial__text,
body.salla-page.dark-mode .s-reviews-testimonial__text,
body[class*="customer-"].dark-mode .s-reviews-testimonial__text {
    color: #5a3e1b !important;
}

body.product-single.dark-mode .s-comments-container {
    background-color: #222;
    color: #fff;
}

body.product-single.dark-mode .s-product-card-content-subtitle.opacity-80 {
    color: #ccc;
}

/*=============================
16. إخفاء الرابط الخاص بـ getbutton
=========================*/
.sc-sbsi7l-0.cLcbjv {
    display: none !important;
}
@media (max-width: 768px) {
    .sc-sbsi7l-0.cLcbjv {
        display: none !important;
    }
}

/*=================================
17. إخفاء القائمة المنسدلة
=================================
.s-user-menu-dropdown {
    display: none !important;
}
*/
/*=================================
18. جعل خلفية أيقونة الأفاتار شفافة
=================================*/
.s-header-user-menu.dropdown.s-user-menu {
    background-color: transparent !important;
}

/* 19. إخفاء قائمة البروفايل الجانبية في صفحات البروفايل */
body.user-profile .s-profile-menu,
body.customer-orders-index .s-profile-menu,
body.user-profile .s-profile-menu__wrapper,
body.customer-orders-index .s-profile-menu__wrapper {
    display: none !important;
}

/* 20. توسيع المحتوى ليأخذ مساحة القائمة التي تم إخفاؤها */
body.user-profile .content-area,
body.customer-orders-index .content-area {
    width: 100% !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/* 21. إصلاح الهيدر في صفحات البروفايل لتظهر بخلفية بيضاء */
body.user-profile .store-header,
body.customer-orders-index .store-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body.user-profile .store-header .top-navbar,
body.customer-orders-index .store-header .top-navbar {
    background-color: #ffffff !important;
}

/* 22. إصلاح أيقونة المستخدم لتظهر بشكل صحيح بخلفية شفافة في الهيدر الداخلي */
body.user-profile .store-header .s-header-user-menu.dropdown.s-user-menu,
body.customer-orders-index .store-header .s-header-user-menu.dropdown.s-user-menu {
    background-color: transparent !important;
    border: none !important;
}

/* 23. إصلاح الهيدر في الصفحة الرئيسية بعد تسجيل الدخول */
body.customer-logged-in .store-header,
body.customer-logged-in .store-header .top-navbar {
    background-color: transparent !important;
    box-shadow: none !important;
}

body.customer-logged-in .store-header .s-header-user-menu.dropdown.s-user-menu {
    background-color: transparent !important;
}

/* 24. إضافة بادج التخفيضات */
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 20;
}
/* هذا الجزء يستهدف أيقونة المستخدم في الهيدر العلوي */
.s-user-menu-trigger-avatar {
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
}
============================
/* إلغاء أي طبقة شفافية فوق السلايدر */
/* إلغاء أي خلفية أو تعتيم من الطبقة overlay-bg */
.s-block--hero-slider .overlay-bg {
    background: none !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* لو التعتيم جاي من before/after */
.s-block--hero-slider .overlay-bg::before,
.s-block--hero-slider .overlay-bg::after,
.s-block--hero-slider .swiper-slide::before,
.s-block--hero-slider .swiper-slide::after {
    background: none !important;
    background-color: transparent !important;
    opacity: 1 !important;
    content: none !important;
}

/* إزالة أي تعتيم متوارث من السلايد نفسه */
.s-block--hero-slider .swiper-slide {
    background: none !important;
    background-color: transparent !important;
    opacity: 1 !important;
}