/* 1. صبغ كل السكاشن في أسفل الصفحة بالزيتي لدمجها تماماً */
section.bg-transparent, 
section.bg-light-subtle, 
section[data-section="js-copyright"] {
    background-color: #3B3E1E !important;
    border: none !important; /* حذف أي خط فاصل أبيض أو رمادي */
    margin: 0 !important;
    padding-bottom: 20px !important;
}
/* 2. تلوين كل النصوص والأيقونات للبيج #D1CDC1 */
section.bg-transparent *, 
section[data-section="js-copyright"] *, 
section.bg-light-subtle * {
    color: #D1CDC1 !important;
    text-align: center !important;
}
/* 3. ترتيب الأقسام (وسائل التواصل -> روابط مفيدة -> معلومات تهمك) وتوسيطها */
section.bg-transparent .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
}
ul.nav:has(.ti-brand-instagram) li a span {
    display: none !important; /* إخفاء كلمات انستقرام وتيك توك والهاتف */
}
/* 4. وسائل التواصل: أيقونات بجانب بعض في المنتصف بدون كلمات */
footer ul.nav:has(.ti-brand-instagram) {
    flex-direction: row !important;
    justify-content: center !important;
    display: flex !important;
    gap: 25px !important;
    padding: 0 !important;
}
/* إخفاء سهم الصعود للأعلى إذا كان مشوه المنظر */
section[data-section="js-copyright"] a[href="#main"] {
    display: none !important;
}
/* 1. ضبط منطقة الدفع والحقوق (تحويلها من يمين ويسار إلى منتصف عمودي) */
section[data-section="js-copyright"] .container > div,
section[data-section="js-copyright"] .d-lg-flex {
    display: flex !important;
    flex-direction: column !important; /* وضع الحقوق تحت الأيقونات */
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    text-align: center !important;
}
/* 2. جعل أيقونات الدفع في صف واحد عرضي بالمنتصف تماماً */
section[data-section="js-copyright"] .hstack, 
section[data-section="js-copyright"] .flex-wrap {
    display: flex !important;
    flex-direction: row !important; /* الأيقونات جنب بعض */
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
}
card-product, 
.card-product/* 2. تصفير ميلان الأعمدة الداخلية */
footer .col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
/* 2. تلوين كلمة "النباتات الداخلية" بالزيتي وتوسيطها */
section.bg-primary h1, 
.category-image h1 {
    color: #3b3e1e !important; /* لون براند بانه */
    text-align: center !important;
    font-weight: bold !important;
}
/* 3. تنسيق كرت المنتج (الاسم والسعر) */
.
 .card-body h2 .card-body a,
.card-product .card-body .list-group-item div {
    text-align: center !important;
    color: #3b3e1e !important;
    justify-content: center !important;
    display: flex !important;
}
/* 2. الرئيسية: توسيط العناوين وتكبير "منتجاتنا" */
.section-title, h1, h2, .category-card__title {
    color: #3B3E1E !important;
    text-align: center !important;
    display: block !important;
    margin: 20px auto !important;
}
/* 3. كرت المنتج: إخفاء الحدود وسنترة الاسم والسعر (زيتي) */
.card-product, .category-card { border: none !important; box-shadow: none !important; }
.card-product .card-body h2, .card-product .card-body a, 
.product-price, .price-value, .currency {
    color: #3B3E1E !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    font-weight: 600 !important;
}
/* 4. صفحة التصنيفات: إزالة المربع الزيتي مع إظهار اسم التصنيف */
.category-header, .bg-primary, header.bg-primary {
    background: #ffffff !important;
    min-height: auto !important;
    padding: 5px 0 !important;
}
/* 5. الفوتر: سنترة كل شيء تحت بعض (السجل، الدفع، الحقوق) */
footer, section.bg-transparent, section[data-section="js-copyright"] {
    background-color: #3B3E1E !important;
    text-align: center !important;
}
footer .row, .footer-bottom .container, .hstack, .vstack {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
    color: #D1CDC1 !important;
}
footer * { color: #D1CDC1 !important; }

/* ترتيب أيقونات الدفع في سطر واحد ملموم في الوسط */
.flex-wrap { flex-direction: row !important; justify-content: center !important; gap: 150px; }

/* 6. إخفاء شريط الأدوات (الفلترة) فقط */
.products-toolbar, .category-toolbar, .card-footer, .badge { display: none !important; }
/* كود إخفاء أدوات التصنيف والفلترة والبحث لمتجر بانه */

/* 1. إخفاء حاوية الترتيب والصفحة بالكامل */
#sortAttirbutesContainer {
    display: none !important;
}

/* 2. إخفاء حاوية البحث الفوري اللي فوق */
#filterAttirbutesContainer {
    display: none !important;
}

/* 3. إخفاء أزرار (فلترة النتائج) و (البحث الفوري) والمنزلق */
.btn-toolbar.gap-sm-3, 
[data-bs-target="#offcanvasProductsFilter"], 
.js-toggleButton, 
#grid-cols-range {
    display: none !important;
}

/* 4. إخفاء السطر الفاصل الرمادي اللي كان شايلهم عشان ما يبقى فراغ */
section.\!shadow-sm.border-secondary.border-top.border-bottom {
    display: none !important;
}
/* 1. إعادة إظهار النصوص وتنسيقها بشكل مرتب */
.hstack.gap-1.text-muted.small {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #D1CDC1 !important; /* اللون البيج المطلوب */
    font-size: 0.9rem !important; /* حجم ناعم وغير مزعج */
    margin-top: 15px !important;
}

/* 2. تصغير حجم الأسهم والأرقام للوضوح الهادئ */
.pagination .page-link, 
.pagination-wrapper a,
.pagination-wrapper span {
    color: #D1CDC1 !important;
    font-size: 1.1rem !important; /* حجم أصغر بكتير وأكثر أناقة */
    padding: 5px 10px !important;
    border: none !important;
    background: transparent !important;
}

/* 3. تمييز الصفحة الحالية بلون الزيتي بلمسة بسيطة */
.pagination .page-item.active .page-link {
    color: #3B3E1E !important; 
    font-weight: bold !important;
}

/* 4. تنسيق المسافات الكلية لمنطقة التنقل */
.pagination {
    gap: 15px !important; /* تقليل المسافات المبالغ فيها */
    justify-content: center !important;
    margin: 30px 0 !important;
}

/* إخفاء الخطوط الفاصلة (vr) لزيادة المينيماليزم */
.vr.mx-2 {
    display: none !important;
}
/* 1. إجبار السعر على التحول للون الزيتي وكسر كلاس text-body */
.product-card-price strong, 
.fw-bold.text-body,
[data-product-price] {
    color: #3B3E1E !important; /* لون زيتي بانه */
}

/* 2. تلوين شعار العملة (الريال) بالزيتي ليتناسب مع السعر */
.riyal-svg, 
.riyal-svg path {
    fill: #3B3E1E !important;
    color: #3B3E1E !important;
}

/* 3. تنسيق نصوص التنقل باللون البيج الهادئ #D1CDC1 */
.pagination .page-link, 
.pagination-wrapper a,
.pagination-wrapper span,
.hstack.gap-1.text-muted.small {
    color: #D1CDC1 !important; 
    font-size: 1rem !important; /* حجم متوازن ومينيمال */
}

/* 4. إخفاء الخطوط الفاصلة الزائدة */
.vr.mx-2 {
    display: none !important;
}
/* تنسيق الدائرة بضبط التوسيط والميزان البصري */
.badge-name-product-card, 
.badge-name,
[data-badge-name-product-id] {
    background-color: #3B3E1E !important; /* زيتي بانه */
    border-color: #3B3E1E !important;
    color: #D1CDC1 !important; /* بيج بانه */
    
    /* أبعاد الدائرة الصريحة */
    width: 40px !important; 
    height: 40px !important;
    border-radius: 90% !important;
    
    /* هندسة التوسيط */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* ضبط الخط */
    font-size: 0.85rem !important; 
    font-weight: 800 !important; /* الخط العريض الفخم */
    line-height: 0 !important; /* تصفير الارتفاع لضمان التوسيط الرأسي الدقيق */
    padding: 0 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* التأكد من ثبات لون السعر والعملة بالزيتي */
.fw-bold.text-body,
.riyal-svg path {
    color: #3B3E1E !important;
    fill: #3B3E1E !important;
}
/* 1. إخفاء "المؤشر/المقبض" الرمادي الصغير تماماً */
[data-badge-name-product-id]::before, 
.badge-name::before {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. رفع الدائرة وتوسيطها بشكل نظيف (بدون تغيير الحجم) */
[data-badge-name-product-id], 
.badge-name-product-card, 
.badge-name {
    position: absolute !important;
    top: 30px !important; /* الرقم هذا يرفعها، لو حسيتيها مرتفعة قلليه */
    left: 50% !important;
    transform: translateX(-50%) !important; /* التوسيط الأفقي */
    margin: 0 !important;
    z-index: 10 !important; /* لضمان ظهورها فوق صورة المنتج والشعار */
}
/* 2. إخفاء سطر (يتم إظهار / الصفحة) والاكتفاء بالأرقام */
.hstack.gap-1.text-muted.small {
    display: none !important;
}
/* 1. حذف الخطوط العلوية والسفلية والرمادية تماماً */
section[role="pagination"], 
.border-secondary.border-top.border-bottom.border-opacity-10 {
    border: none !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* 1. صبغ الهيدر بالزيتي الفخم - استهداف الحاوية الأم */
header, 
.main-header, 
.navbar, 
.header-content,
.bg-white { 
    background-color: #3B3E1E !important;
    background: #3B3E1E !important;
}
/* 1. استبدال أيقونة السلة الأصلية بأيقونة بانه الجديدة */
.ti-shopping-cart::before, 
.cart-icon i::before,
[class*="shopping-bag"]::before {
    content: "" !important;
    display: inline-block;
    width: 28px; /* تحكمي في الحجم من هنا */
    height: 28px;
    /* هذا الكود هو أيقونتك اللي في الصورة */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D9D5C1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12,4l-6,8v28c0,2.21,1.79,4,4,4h28c2.21,0,4-1.79,4-4V12l-6-8H12Z'/><line x1='6' y1='12' x2='42' y2='12'/><path d='M32,20c0,4.42-3.58,8-8,8s-8-3.58-8-8'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 2. إخفاء أي أيقونة قديمة عشان ما تطلع فوق الجديدة */
.ti-shopping-cart, .cart-link i {
    font-size: 0 !important;
}
/* أيقونة السلة - صغّرناها شوي عشان تتوازن */
.ti-shopping-cart::before, [class*="shopping-bag"]::before {
    width: 22px !important; 
    height: 22px !important;
}
/* أيقونة البحث (Search) المحدثة حسب الفحص */
.ti-search::before, 
[class*="search"]::before, 
.search-icon i::before {
    content: "" !important;
    display: inline-block;
    width: 23px; /* حجم متوازن */
    height: 23px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23D1CDC1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='27.5' cy='27.5' r='20'/><line x1='52.5' y1='52.5' x2='41.62' y2='41.62'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* أيقونة تسجيل الدخول (User) المحدثة */
.ti-user::before, 
[class*="user"]::before, 
.login-link i::before {
    content: "" !important;
    display: inline-block;
    width: 23px; /* وزن مثالي مع البحث والسلة */
    height: 23px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23D1CDC1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M50,52.5v-5c0-5.52-4.48-10-10-10H20c-5.52,0-10,4.48-10,10v5'/><circle cx='30' cy='17.5' r='10'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* إخفاء الأيقونة القديمة */
.ti-user, .user-icon i {
    font-size: 0 !important;
}
/* أيقونة اللغة والشحن (Globe) */
.ti-world::before, 
[class*="globe"]::before, 
.language-icon i::before {
    content: "" !important;
    display: inline-block;
    width: 23px; /* حجم متناسق مع السلة */
    height: 23px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D9D5C1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='24' cy='24' r='20'/><line x1='4' y1='24' x2='44' y2='24'/><path d='M24,4c5,4.48,7.85,12.58,8,20c-.15,7.42-3,14.52-8,20c-5-5.48-7.85-12.58-8-20c.15-7.42,3-14.52,8-20Z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* إخفاء الأيقونة القديمة */
.ti-world, .language-selector i {
    font-size: 0 !important;
}
/* 1. إخفاء مربع البحث الطويل تماماً في كل الأجهزة */
.search-form-container, 
.header-search-form,
#js-search-focus,
input[name="search"] {
    display: none !important;
}
/* حذف أيقونة البحث المكررة تماماً */
.header-search-form .ti-search, 
.search-icon-container .ti-search,
.mobile-search-icon {
    display: none !important;
}

/* التأكد أن أيقونة واحدة فقط في الهيدر هي اللي تظهر */
.header-action-list .ti-search:not(:first-child) {
    display: none !important;
}
/* 1. حذف الميكروفون والعدسة المكررة والزر تماماً */
.input-group-text, 
.js-search-submit, 
#js-microphone-icon, 
.ti-microphone,
.btn-primary.js-search-submit {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
}

/* 2. إخفاء المربع (input) اللي يجي معهم */
#js-search-focus, .input-group {
    display: none !important;
}
footer h2.text-body,
footer .text-body.h6,
footer h2.h6.text-body {
    color: #D1CDC1 !important;
}
/* توسيط السجل التجاري بالكامل */
div[class*="justify-content-start"] {
    justify-content: center !important;
    text-align: center !important;
}

.vstack.gap-1.mt-2 {
    align-items: center !important;
    width: 100% !important;
}
/* الكود المنقح لفوتر بانه - إظهار نسخة واحدة فقط */
@media (max-width: 767px) {
    
    /* 1. إظهار الحقوق الأولى وإخفاء أي تكرار بعدها */
    .rotate-center {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* 2. قنص النسخة المكررة تحديداً (لو كانت داخل الـ hstack) وحذفها */
    .hstack.gap-lg-2.mt-sm-3 {
        display: none !important;
    }

    /* 3. إظهار الروابط والمعلومات (السجل التجاري) */
    footer .collapse, 
    footer .collapsing {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
/* 1. إظهار أيقونات الدفع (مدى، فيزا، إلخ) في الجوال */
[data-toggle="js-data-toggle"].d-none {
    display: block !important;
}
/* 3. سنترة العنوان (خيارات الدفع والتوصيل) */
.footer h2.h6 {
    text-align: center !important;
    width: 100% !important;
}

/* 4. سنترة أيقونات الدفع نفسها */
.footer .hstack {
    justify-content: center !important;
}
/* 1. إرجاع أيقونات التواصل الاجتماعي وسنترتها */
.footer i {
    display: inline-block !important;
}

/* 2. إخفاء الدائرة (الزائد والناقص) فقط في العناوين */
.footer h2 i, 
.footer h6 i,
.footer .ti-circle-plus,
.footer .ti-circle-minus {
    display: none !important;
}
/* 1. إخفاء علامة الزائد والناقص بالاسم (عشان ما تلمس أيقونات التواصل) */
.footer i.ti-circle-plus, 
.footer i.ti-circle-minus {
    display: none !important;
}

/* 2. توحيد خلفية الفوتر وإلغاء الفراغ الأبيض */
footer, 
.footer section, 
.bg-light-subtle, 
.bg-secondary.bg-opacity-10 {
    background-color: #3b3e1e !important; /* لون بانه الزيتي */
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 3. التأكد من ظهور أيقونات التواصل والحقوق باللون الكريمي */
.footer i, 
.footer span, 
.footer a, 
.footer div {
    color: #D1CDC1 !important; /* لون الخط الكريمي */
}
/* إخفاء أيقونة الزائد في الفوتر نهائياً */
footer h2 i.ti.ti-circle-plus, 
[data-section="js-copyright"] i.ti-circle-plus {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* 1. إجبار حاوية البحث على الظهور مهما كان نوع الشاشة */
#navbarSupportedContent.collapse:not(.show), 
#navbarSupportedContent {
    display: flex !important;
    visibility: visible !important;
    flex-basis: auto !important;
}

/* 2. تفعيل زر البحث وإزالة حالة التعطيل */
.js-search-submit.disabled, 
button[type="button"].disabled {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* 3. تنسيق شريط البحث في اللاب توب عشان ما يخرب الهيدر */
@media (min-width: 992px) {
    #navbarSupportedContent form {
        width: 300px !important; /* نحدد عرض معقول للبحث بجانب السلة */
        margin-left: 20px !important;
    }
}
/* 1. ترتيب كل أيقونات الهيدر في صف واحد ومنع التداخل */
.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* ترتيبهم جهة اليسار أو اليمين حسب لغة الموقع */
    align-items: center !important;
    gap: 15px !important; /* مسافة ثابتة بين كل أيقونة والثانية */
}

/* 2. تصغير المساحة العمودية للهيدر اللي طالعة في الصورة */
header .container, .header-content {
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 3. تنسيق أيقونة البحث لتكون بجانبهم تماماً */
#navbarSupportedContent {
    display: flex !important;
    justify-content: flex-end !important;
}

/* 4. إلغاء أي طبقات إضافية تسبب "الحوسة" في الصورة */
.nav-item {
    display: inline-block !important;
    margin: 0 !important;
}
/* 1. حذف السلة المكررة (العنصر اللي ماله داعي) */
/* بنستهدف العنصر اللي مسبب الزحمة ونخفيه */
.nav-item .ti-shopping-bag:not(:first-child),
.navbar-nav .nav-item:last-child .js-cart-status {
    display: none !important;
}

/* 2. إذا لسه طالعة ثنتين، جربي هذا السطر يحذف النسخة الثانية برمجياً */
.navbar-nav li.nav-item:has(.ti-shopping-bag) + li.nav-item:has(.ti-shopping-bag) {
    display: none !important;
}

/* 3. ترتيب المسافات بعد الحذف */
.navbar-nav {
    gap: 20px !important;
    justify-content: center !important;
}
/* إخفاء أيقونة البحث من الجوال واللاب توب تماماً */
#js-search-mobile, 
.js-search-trigger, 
.search-icon-wrapper,
a[href*="search"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* 1. تجميع الأيقونات في جهة واحدة (اليسار) بانتظام */
.container.gap-3 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 2. إجبار السلة والحساب واللغة على الاصطفاف بجانب بعض */
.header-elements-wrapper, .navbar-nav {
    display: flex !important;
    flex-direction: row-reverse !important; /* لترتيب الأيقونات بجانب بعضها */
    gap: 15px !important; /* مسافة متناسقة بين الأيقونات */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. تنظيف أي فراغ مخفي كان يتركه زر البحث */
#js-search-mobile, .js-search-trigger {
    display: none !important;
    position: absolute !important;
}