/* Add custom CSS styles below */ 
.top-nav {
    background-color: #FFF7DF !important;
}

/* 1. الحاوية الرئيسية للقائمة المنسدلة */
.s-user-menu-dropdown-list {
    list-style: none !important; 
    padding: 10px 20px !important; /* ضبط الهوامش الجانبية لتبدو ملمومة ومتناسقة */
    margin: 0 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; 
    width: 280px !important; /* عرض مناسب ليتطابق مع الصورة الثانية */
    direction: rtl !important; 
    box-sizing: border-box !important;
}
/* 2. عناصر القائمة (الخطوط الفاصلة) */
.s-user-menu-dropdown-item {
    border-bottom: 1px solid #f5f5f5 !important; /* خط فاصل أنعم وأخف */
    margin: 0 !important;
    padding: 0 !important;
}

/* إزالة الخط الفاصل من العنصر الأخير */
.s-user-menu-dropdown-item:last-child {
    border-bottom: none !important;
}

/* 3. الروابط والنصوص داخل القائمة */
.s-user-menu-dropdown-item-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 💡 هذا السطر هو الذي يلغي الفراغ الكبير ويحاذي العناصر لليمين */
    padding: 14px 0 !important; /* فراغ عمودي مريح ومطابق للصورة الثانية */
    text-decoration: none !important;
    color: #333333 !important;
    font-family: 'Tajawal', 'Cairo', sans-serif !important; 
    font-size: 15px !important; 
    font-weight: 500 !important;
    width: 100% !important;
    transition: color 0.2s ease-in-out !important;
}

/* 4. ضبط المسافة بين الأيقونة والنص */
.s-user-menu-dropdown-item-prefix {
    margin-left: 12px !important; /* مسافة دقيقة ومتناسقة بين الأيقونة والنص */
    margin-right: 0 !important; /* إزالة أي هوامش افتراضية من اليمين */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 5. تلوين وتصغير الأيقونات (SVG) لتطابق التصميم الجديد */
.s-user-menu-dropdown-item-prefix svg {
    width: 20px; /* تصغير الأيقونات قليلًا لتناسب الهوامش الجديدة */
    height: 20px;
    fill: transparent;
    stroke: #dca34b; /* اللون الذهبي */
    stroke-width: 1px;
}

.s-user-menu-dropdown-item-prefix svg path {
    fill: #dca34b;
}

/* 6. تنسيق خاص لأيقونة "تسجيل الخروج" (اللون الأحمر) */
.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-prefix svg,
.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-prefix svg path {
    fill: #ff3b30; 
    stroke: transparent;
}

/* تأثير عند تمرير الماوس (Hover) */
.s-user-menu-dropdown-item-link:hover {
    color: #dca34b;
}

.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link:hover {
    color: #ff3b30;
}
/* تأثير تغيير اللون عند تمرير الماوس */
.quicklinks-item:hover,
.quicklinks-item:hover span {
    color: #e1b84c !important; /* استخدام !important لضمان تغطية أي لون افتراضي آخر */
    transition: color 0.3s ease-in-out; /* إضافة تأثير انتقال سلس */
}

/* إضافة نفس تأثير الانتقال السلس للحالة العادية حتى لا يتغير اللون فجأة عند إبعاد الماوس */
.quicklinks-item,
.quicklinks-item span {
    transition: color 0.3s ease-in-out;
}
/* 1. إعدادات الحاوية الرئيسية للقائمة */
.mobile-collapsible.sub-menu ul {
    list-style: none;
    padding: 15px 0;
    margin: 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); /* ظل ناعم مطابق للصورة */
    width: 260px; /* يمكنك تعديل العرض حسب الحاجة */
    direction: rtl; /* الاتجاه من اليمين لليسار */
}

/* 2. التنسيق العام للروابط داخل القائمة */
.mobile-collapsible.sub-menu ul li a {
    display: block;
    text-decoration: none;
    padding: 12px 30px;
    color: #333333;
    font-family: 'Tajawal', 'Cairo', sans-serif; /* خطوط عربية أنيقة */
    text-align: right;
    transition: color 0.3s ease-in-out;
}

/* 3. تنسيق العنصر الأول (العنوان الرئيسي "عرض الكل / أجهزة بلت ان") */
.submenu__display-all {
    position: relative;
    margin-bottom: 10px;
}

.submenu__display-all a {
    font-size: 18px;
    font-weight: 700; /* خط عريض للعنوان */
    color: #222222;
    padding-right: 35px; /* ترك مسافة للشريط الذهبي */
    padding-bottom: 15px;
}

/* 4. تصميم الشريط الذهبي الجانبي للعنوان */
.submenu__display-all::before {
    content: "";
    position: absolute;
    right: 20px;
    top: 15px; /* ضبط الارتفاع ليتوسط النص */
    width: 4px;
    height: 22px;
    background-color: #e1b84c; /* اللون الذهبي المطلوب */
    border-radius: 2px;
}

/* 5. تصميم الخط الفاصل الرمادي تحت العنوان */
.submenu__display-all::after {
    content: "";
    display: block;
    width: 85%;
    height: 1px;
    background-color: #f0f0f0; /* رمادي فاتح جداً */
    margin: 0 auto;
}

/* 6. تنسيق العناصر الفرعية (أفران، أسطح، الخ..) */
.main-menu-item a {
    font-size: 15px;
    font-weight: 500;
    color: #444444;
}

/* 7. تأثير تمرير الماوس (Hover) لجميع العناصر لتصبح باللون الذهبي */
.mobile-collapsible.sub-menu ul li a:hover,
.mobile-collapsible.sub-menu ul li a:hover span {
    color: #e1b84c !important;
}
/* 1. الحاوية العامة للمميزات */
.s-block--enhanced-features .flex-wrap {
    direction: rtl; /* ضمان الاتجاه من اليمين لليسار */
    align-items: center;
    background-color: #ffffff; /* خلفية بيضاء للحاوية بالكامل */
    border-radius: 12px; /* اختياري: زوايا دائرية للحاوية */
    padding: 20px 0;
}

/* 2. تحويل العناصر من عمودية إلى أفقية وإلغاء المربعات الفردية */
.s-block--features__item {
    flex-direction: row !important; /* الأيقونة والنص في خط أفقي */
    justify-content: flex-start !important; /* محاذاة المحتوى لليمين */
    background-color: transparent !important; /* إزالة الخلفية الفردية */
    box-shadow: none !important; /* إزالة الظل الفردي */
    box-shadow: none !important;
    border: none !important; 
    --tw-ring-shadow: 0 0 #000 !important; /* إزالة إطار Tailwind */
    padding: 10px 20px !important;
    gap: 15px !important; /* المسافة بين الأيقونة والنص */
    position: relative; /* ضروري لتثبيت الخط الفاصل */
}

/* 3. إضافة الخط الفاصل بين المميزات (للشاشات المتوسطة والكبيرة فقط) */
@media (min-width: 768px) {
    .s-block--features__item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 0; /* الخط على يسار العنصر */
        top: 25%;
        height: 50%; /* طول الخط الفاصل */
        width: 1px;
        background-color: #f0f0f0; /* لون رمادي فاتح جداً للخط */
    }
}

/* 4. تنسيق النصوص (العنوان والوصف) */
.feature-icon {
    text-align: right !important; /* محاذاة النص لليمين */
    margin-bottom: 0 !important; 
}

.feature-icon h2 {
    color: #333333; 
    font-weight: 700; /* خط عريض للعناوين */
    margin-bottom: 4px !important;
    font-size: 1.1rem !important;
}

.feature-icon p {
    color: #777777; /* لون رمادي للوصف مثل الصورة */
    font-size: 0.9rem !important;
    opacity: 1 !important; /* إزالة الشفافية الافتراضية */
}

/* 5. تعديل حجم وألوان الأيقونات المتحركة (Lord Icon) لتصبح ذهبية */
.s-block--features__item lord-icon {
    width: 45px !important; /* تصغير الأيقونة لتناسب العرض الأفقي */
    height: 45px !important;
    flex-shrink: 0; /* لمنع تقلص الأيقونة عند ضيق الشاشة */
    
    /* فرض اللون الذهبي على جميع طبقات الأيقونة */
    --lord-icon-primary-base: #e1b84c !important;
    --lord-icon-secondary-base: #e1b84c !important;
    --lord-icon-tertiary-base: #e1b84c !important;
    --lord-icon-quaternary-base: #e1b84c !important;
}

/* 6. إخفاء حاوية الأيقونة الزائدة التي كانت تسبب مسافات غير مرغوبة */
.s-block--features__item > div.w-14 {
    width: auto !important;
    height: auto !important;
}
/* =========================================
   تنسيق بطاقة المنتج (النسخة الاحترافية الشاملة - كمبيوتر + جوال)
   ========================================= */

/* 1. الإطار الخارجي للبطاقة */
custom-salla-product-card.product-entry {
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    position: relative !important; 
    display: flex !important;
    flex-direction: column !important;
    direction: rtl !important; 
    overflow: hidden !important;
    padding-bottom: 75px !important; 
}

/* 2. تجريد الحاويات الداخلية من التموضع */
custom-salla-product-card .product-entry__inner,
custom-salla-product-card .product-entry__image-wrap,
custom-salla-product-card .product-entry__content,
custom-salla-product-card .border-t {
    position: static !important; 
    transform: none !important;
    padding-bottom: 0 !important;
}

/* 3. منطقة الصورة */
custom-salla-product-card .product-entry__image-main {
    background-color: #fcfcfc !important; 
    border-radius: 16px 16px 0 0 !important;
    padding: 15px !important;
    min-height: 200px !important; 
}

custom-salla-product-card .product-entry__image-main img {
    object-fit: contain !important;
    mix-blend-mode: multiply !important; 
}

/* 4. الشارة العلوية (يسار وتشير لليمين باللون الأخضر) */
custom-salla-product-card .promotion-badge-wrap {
    position: absolute !important;
    top: 15px !important;
    left: 0 !important; 
    right: auto !important; 
    z-index: 20 !important;
}

custom-salla-product-card .promotion-badge {
    background-color: #008C56 !important; /* تم التغيير للون الأخضر */
    color: #ffffff !important;
    padding: 4px 12px 4px 15px !important;
    border-radius: 0 4px 4px 0 !important; 
    font-size: 13px !important;
    font-weight: 700 !important;
    position: relative !important;
    display: inline-block !important;
}

custom-salla-product-card .promotion-badge::after {
    content: '';
    position: absolute;
    right: -10px; 
    left: auto; 
    top: 0;
    border-top: 13.5px solid transparent;
    border-bottom: 13.5px solid transparent;
    border-left: 10px solid #008C56; /* تم التغيير للون الأخضر للسهم */
    border-right: none;
}
/* 5. تنسيق المحتوى (ترتيب العناصر من الأعلى للأسفل) */
custom-salla-product-card .content-wrap {
    display: flex !important;
    flex-direction: column !important; 
    padding: 15px 15px 5px !important;
    text-align: right !important;
}

/* 6. ترتيب تابي وتمارا (رفعها للأعلى مع خط فاصل) */
custom-salla-product-card .free-shipping-badge {
    display: none !important;
}

custom-salla-product-card .flex-col.gap-1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    order: -1 !important; 
    margin-bottom: 5px !important;
    margin-top: -10px !important;
}

custom-salla-product-card .installment-badge {
    display: inline-flex !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
}

custom-salla-product-card .installment-badge:first-of-type {
    border-left: 1px solid #eaeaea !important;
    padding-left: 15px !important;
    margin-left: 15px !important;
}

custom-salla-product-card .installment-badge span {
    display: none !important; 
}

custom-salla-product-card .installment-badge img {
    height: 22px !important; 
    width: auto !important;
}

/* 7. إظهار وتنسيق اسم الماركة (يظهر بالذهبي فوق العنوان) */
custom-salla-product-card .product-entry__subtitle,
custom-salla-product-card .product-brand,
custom-salla-product-card .s-product-card-brand {
    display: block !important;
    color: #d3af37 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: 15px !important; /* مسافة إجبارية لإبعادها عن شعارات الدفع */
    margin-bottom: 5px !important;
    text-align: right !important;
    order: 0 !important; 
}

/* 8. تنسيق العنوان والأسعار */
custom-salla-product-card .product-entry__title {
    font-size: 15px !important; 
    font-weight: 800 !important;
    color: #222222 !important;
    text-align: right !important;
    margin-top: 15px !important; /* مسافة إجبارية في حال عدم وجود ماركة */
    margin-bottom: 10px !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.6 !important;
    order: 1 !important; 
}

custom-salla-product-card .border-t {
    border-top: none !important; 
    display: block !important;
    order: 2 !important;
}

custom-salla-product-card .price-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    gap: 5px !important;
}

custom-salla-product-card .product-entry__price {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
}

custom-salla-product-card .sale-price {
    color: #ff4b55 !important; 
    font-size: 24px !important; 
    font-weight: 800 !important;
    margin: 0 !important;
}

custom-salla-product-card .regular-price {
    color: #000000 !important; 
    font-weight: 600 !important; 
    opacity: 1 !important; 
    font-size: 16px !important; 
    text-decoration: line-through !important; 
}

/* 9. زر المفضلة (القلب) */
custom-salla-product-card .btn--wishlist {
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important; 
    top: auto !important;
    right: auto !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    z-index: 50 !important;
}

custom-salla-product-card .btn--wishlist button {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
}

custom-salla-product-card .btn--wishlist button i {
    color: #999999 !important;
    font-size: 18px !important;
}

custom-salla-product-card salla-button.btn--wishlist:hover .s-button-element,
custom-salla-product-card salla-button.btn--wishlist.favorited .s-button-element,
custom-salla-product-card salla-button.btn--wishlist.is-gold .s-button-element {
    border-color: #d3af37 !important;
    background-color: #fffbf0 !important;
}

custom-salla-product-card salla-button.btn--wishlist:hover i,
custom-salla-product-card salla-button.btn--wishlist.favorited i,
custom-salla-product-card salla-button.btn--wishlist.is-gold i {
    color: #d3af37 !important;
}

/* 10. زر أضف للسلة */
custom-salla-product-card .add-to-cart-conatiner {
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    left: 70px !important; 
    width: auto !important;
    margin: 0 !important;
    z-index: 50 !important;
}

custom-salla-product-card .btn--add-to-cart button {
    background-color: #fffbf0 !important; 
    border: 1px solid #d3af37 !important; 
    color: #d3af37 !important; 
    border-radius: 8px !important;
    height: 45px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

custom-salla-product-card .btn--add-to-cart button:hover {
    background-color: #d3af37 !important;
    color: #ffffff !important;
}

custom-salla-product-card .btn--add-to-cart button i,
custom-salla-product-card .btn--add-to-cart button span {
    color: inherit !important; 
    margin-left: 5px !important;
}

/* =========================================
   تعديلات مخصصة لشاشات الجوال 
   ========================================= */
@media (max-width: 768px) {
    custom-salla-product-card.product-entry {
        padding-bottom: 60px !important; 
    }

    custom-salla-product-card .promotion-badge {
        font-size: 10px !important;
        padding: 3px 10px 3px 8px !important;
        white-space: nowrap !important;
    }

    custom-salla-product-card .installment-badge img {
        height: 16px !important; 
    }
    
    custom-salla-product-card .installment-badge:first-of-type {
        padding-left: 8px !important;
        margin-left: 8px !important;
    }

    /* تكبير وتنزيل العناوين في الجوال */
    custom-salla-product-card .product-entry__title {
        font-size: 13px !important; 
        margin-top: 15px !important; /* مسافة إجبارية في الجوال */
        margin-bottom: 10px !important;
    }
    
    custom-salla-product-card .sale-price {
        font-size: 18px !important; 
    }

    custom-salla-product-card .regular-price {
        font-size: 14px !important;
    }

    custom-salla-product-card .product-entry__subtitle,
    custom-salla-product-card .product-brand,
    custom-salla-product-card .s-product-card-brand {
        font-size: 12px !important;
        margin-top: 15px !important; /* مسافة إجبارية في الجوال للماركة */
    }

    custom-salla-product-card .btn--wishlist {
        width: 35px !important;
        height: 35px !important;
        bottom: 10px !important;
        left: 10px !important; 
    }
    
    custom-salla-product-card .btn--wishlist button i {
        font-size: 14px !important;
    }

    custom-salla-product-card .add-to-cart-conatiner {
        bottom: 10px !important;
        right: 10px !important;
        left: 55px !important; 
    }
    
    custom-salla-product-card .btn--add-to-cart button {
        height: 35px !important;
        font-size: 12px !important;
        padding: 0 4px !important;
    }
    
    custom-salla-product-card .btn--add-to-cart button i {
        font-size: 14px !important;
    }
    
    custom-salla-product-card .btn--add-to-cart .s-button-text {
        gap: 4px !important;
    }
}
/* جعل حواف الصورة منحنية */
img.anime-item {
    border-radius: 30px !important; /* يمكنك زيادة أو تقليل الرقم لزيادة الانحناء */
}
h2.section-title {
    color: #000000 !important; /* اللون الأسود */
}

/* =========================================
   تنسيق الفوتر (أسفل الصفحة) ليطابق الصورة تماماً
   ========================================= */

/* 1. الخلفية والمحاذاة العامة */
.store-footer__inner {
    background-color: #f9f9f9 !important; /* لون رمادي فاتح جداً */
    padding-top: 50px !important;
    padding-bottom: 20px !important;
    border-top: 1px solid #eaeaea !important;
    direction: rtl !important;
}

/* إلغاء التوسيط الإجباري وجعل المحاذاة لليمين */
.store-footer__inner .text-center {
    text-align: right !important;
}

/* 2. تنسيق العناوين (حسابي، تواصل معنا) */
.store-footer__inner h3.collapse-trigger,
.store-footer__inner h3.s-contacts-title {
    color: #222222 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    text-align: right !important;
    border: none !important;
}

/* 3. العمود الأول (الشعار ووصف المتجر) */
.store-footer__inner .lg\:col-span-2 {
    text-align: right !important;
}

.store-footer__inner .pref-about-store {
    color: #666666 !important;
    font-size: 13.5px !important;
    line-height: 2 !important;
    text-align: right !important;
    max-width: 100% !important;
    margin-top: 10px !important;
}

/* 4. تنسيق الروابط (حسابي / روابط مهمة) */
.widget ul.contacts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-align: right !important;
}

.widget ul li a {
    color: #666666 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transition: color 0.3s ease !important;
}

/* إضافة علامة « بجوار الروابط */
.widget ul li a::before {
    content: '«';
    margin-left: 8px; /* مسافة بين العلامة والنص */
    color: #999999 !important;
    font-size: 16px !important;
}

.widget ul li a:hover {
    color: #dca34b !important; /* اللون الذهبي عند تمرير الماوس */
}

/* 5. تنسيق قسم تواصل معنا */
.s-contacts-list-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: flex-start !important; /* محاذاة لليمين */
}

.s-contacts-item {
    display: flex !important;
    flex-direction: row !important; /* الأيقونة يمين والنص يسار */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    color: #666666 !important;
    font-size: 13.5px !important;
}

/* تنسيق الدوائر الرمادية حول أيقونات التواصل */
.s-contacts-icon {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #cccccc !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

.s-contacts-icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: #666666 !important;
}

/* 6. ترتيب الأعمدة وإخفاء الأعمدة الفارغة لضبط المسافات */
.store-footer__inner .grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 30px !important;
}

.store-footer__inner .grid > div {
    flex: 1 !important;
    min-width: 150px;
}

/* تكبير مساحة عمود الشعار قليلاً */
.store-footer__inner .grid > div.lg\:col-span-2 {
    flex: 1.5 !important;
    min-width: 250px;
}

/* إخفاء الأعمدة الفارغة لمنع الفراغات المشوهة */
.store-footer__inner .grid > div:empty {
    display: none !important;
}
/* =========================================
   تعديلات الفوتر المخصصة لشاشات الجوال 📱
   ========================================= */
@media (max-width: 768px) {
    /* 1. تحويل الفوتر إلى شكل عمودي (عنصر تحت عنصر) */
    .store-footer__inner .grid {
        display: flex !important;
        flex-direction: column !important; /* ترتيب عمودي */
        gap: 25px !important;
    }

    /* 2. إعطاء كل قسم العرض الكامل للشاشة */
    .store-footer__inner .grid > div {
        min-width: 100% !important;
        flex: auto !important;
    }

    /* 3. محاذاة الشعار ووصف المتجر لليمين ليتناسق مع باقي القوائم */
    .store-footer__inner .lg\:col-span-2 {
        text-align: right !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* 4. ترتيب قائمة تواصل معنا */
    .s-contacts-list-vertical {
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* 5. ترتيب الشريط السفلي (الشهادات والضرائب) ليكون مرتباً في الجوال */
    .footer-certificates {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding-top: 20px !important;
    }
    
    .footer-certificates .flex.gap-8 {
        gap: 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}
/* =========================================
   تنسيق شريط الشهادات والرقم الضريبي (أسفل الفوتر)
   ========================================= */

/* 1. الإطار والمحاذاة العامة للشريط */
.footer-certificates {
    border-top: 1px solid #eaeaea !important; /* خط فاصل رمادي أنيق يعوض الخط الأبيض */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    justify-content: flex-start !important; /* محاذاة المحتوى لليمين */
}

/* 2. حاوية الشهادات (ترتيب أفقي وتقليل المسافات) */
.footer-certificates > .flex.gap-8 {
    display: flex !important;
    flex-direction: row !important;
    gap: 25px !important; /* مسافة متناسقة بين الضريبة ومنصة الأعمال */
    align-items: center !important;
    justify-content: flex-start !important;
}

/* 3. تصغير حجم الأيقونات (شعار الضريبة ومنصة الأعمال) */
.footer-certificates > div > div img, 
.footer-certificates > div > a img {
    height: 22px !important; /* تصغير الأيقونة لتطابق الصورة */
    width: auto !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* 4. تحويل النصوص لتكون بجانب بعضها (أفقياً) بدلاً من فوق بعضها */
.footer-certificates > div > div > div, 
.footer-certificates > div > a > div {
    display: flex !important;
    flex-direction: row !important; /* وضع النص بجوار الرقم */
    align-items: center !important;
    gap: 4px !important;
}

/* 5. تنسيق النصوص وتوضيح اللون (إلغاء الشفافية) */
.footer-certificates p.text-xs,
.footer-certificates b.text-sm {
    font-size: 11px !important; /* تصغير الخط ليكون مضغوطاً وأنيقاً */
    color: #333333 !important; /* لون داكن وواضح */
    font-weight: 700 !important;
    opacity: 1 !important; /* إزالة الشفافية الافتراضية */
    margin: 0 !important;
}

/* 6. إضافة علامة (:) للرقم الضريبي فقط */
.footer-certificates button + div p::after {
    content: ' : ';
    margin-left: 2px;
}

/* =========================================
   تعديل مخصص لشاشات الجوال لترتيب الشريط
   ========================================= */
@media (max-width: 768px) {
    .footer-certificates > .flex.gap-8 {
        flex-direction: column !important; /* إعادة الترتيب عمودياً في الجوال لضيق المساحة */
        align-items: flex-start !important;
        gap: 15px !important;
    }
}
/* =========================================
   تغيير لون الشريط السفلي (الشهادات والحقوق) للرمادي الفاتح
   ========================================= */

/* إجبار الشريط السفلي والفوتر بالكامل على اللون الرمادي الفاتح */
.store-footer,
.store-footer__inner,
.store-footer__inner > .container:last-child,
.footer-certificates {
    background-color: #f9f9f9 !important;
}

/* تغيير لون نصوص الحقوق والروابط في الشريط السفلي لتكون داكنة وواضحة */
.store-footer__inner > .container:last-child p,
.store-footer__inner > .container:last-child span,
.store-footer__inner > .container:last-child a {
    color: #444444 !important;
}

/* تأثير تمرير الماوس على روابط الشريط السفلي */
.store-footer__inner > .container:last-child a:hover {
    color: #dca34b !important; /* اللون الذهبي */
}
/* =========================================
   تنسيق قسم المميزات لشاشات الجوال فقط (يمين لليسار مع إظهار الوصف)
   ========================================= */
@media (max-width: 768px) {
    /* 1. الكروت تترتب تحت بعضها البعض */
    .s-block--enhanced-features .flex-wrap {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* 2. الترتيب داخل الكارت: الأيقونة يمين والنصوص يسار */
    .s-block--features__item {
        width: 100% !important; 
        flex-direction: row !important; /* عرض أفقي داخل الكارت */
        justify-content: flex-start !important; /* البدء من اليمين */
        align-items: center !important; /* توسيط الأيقونة والنص على نفس الخط */
        padding: 15px !important;
        gap: 15px !important; /* مسافة بين الأيقونة والنص */
    }

    /* 3. محاذاة العناوين والنصوص لليمين */
    .s-block--features__item .feature-icon {
        text-align: right !important;
        margin-bottom: 0 !important;
    }
    
    /* 4. إجبار النص الفرعي (الوصف) على الظهور وتنسيقه للجوال */
    .s-block--features__item .feature-icon p {
        display: block !important; /* إلغاء كلاس الإخفاء الافتراضي من سلة */
        font-size: 13px !important; /* خط مناسب للقراءة على الجوال */
        line-height: 1.6 !important;
        margin-top: 4px !important;
    }

    /* 5. إخفاء الخط الفاصل الجانبي الذي يظهر في الكمبيوتر */
    .s-block--features__item::after {
        display: none !important;
    }
}
/* =========================================
   تحويل وتنسيق قسم الآراء (شريط أفقي متحرك التلقائياً)
   ========================================= */

/* 1. إزالة تأثير الإخفاء (الظل المتدرج) من الحاوية */
.container[class*="mask-image"] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    max-height: none !important;
    overflow: hidden !important; /* إخفاء الكروت الزائدة خارج الشاشة */
}

/* 2. تحويل الحاوية إلى شريط أفقي وتفعيل الحركة التلقائية */
.animate-vertical-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* منع نزول الكروت لسطر جديد */
    width: max-content !important; /* ضروري لكي تتمدد الكروت وتتحرك بسلاسة */
    gap: 20px !important;
    padding: 20px 5px !important;
    
    /* تفعيل الحركة الأفقية (30 ثانية، مستمرة، وبدون توقف) */
    animation: scrollHorizontalRTL 30s linear infinite !important;
}

/* إيقاف الحركة عند وضع الماوس للقراءة براحة */
.hover\:paused:hover,
.animate-vertical-scroll:hover {
    animation-play-state: paused !important;
}

/* 3. كود مسار الحركة (من اليمين إلى اليسار) */
@keyframes scrollHorizontalRTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); } 
    /* 💡 ملاحظة هامة: إذا لاحظت أن الكروت تتحرك بالعكس (من اليسار لليمين)، فقط قم بتغيير 50% إلى -50% في السطر السابق وسينعكس الاتجاه فوراً */
}

/* 4. إلغاء تأثير الأعمدة (جعل الكروت أبناء مباشرين للشريط) */
.animate-vertical-scroll > div.flex-col {
    display: contents !important;
}

/* 5. تصميم الكارت نفسه (الخلفية، الحدود، والأبعاد) */
.animate-vertical-scroll .bg-gray-50\/50 {
    background-color: #ffffff !important;
    border: 1px solid #f2f2f2 !important;
    border-radius: 4px !important; /* حواف شبه حادة مثل الصورة */
    min-width: 320px !important; /* عرض ثابت لكل كارت */
    width: 320px !important;
    padding: 30px 20px 20px !important;
    position: relative !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

/* 6. إضافة علامة الاقتباس (“) في أعلى اليسار */
.animate-vertical-scroll .bg-gray-50\/50::before {
    content: "“";
    position: absolute;
    top: 30px;
    left: 20px;
    font-size: 70px;
    color: #f7f7f7; 
    font-family: Georgia, serif !important;
    line-height: 0.5;
    z-index: 0;
}

/* 7. ترتيب التقييم (النجوم في أعلى اليمين) */
.animate-vertical-scroll span.bg-white {
    position: absolute !important;
    top: 25px !important;
    right: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* إخفاء النص "5.0" واستبدال النجمة الواحدة بـ 5 نجوم ذهبية */
.animate-vertical-scroll span.bg-white > span {
    display: none !important;
}
.animate-vertical-scroll span.bg-white i {
    font-family: Arial, sans-serif !important; 
}
.animate-vertical-scroll span.bg-white i::before {
    content: "★★★★★" !important;
    color: #dca34b !important; /* اللون الذهبي المطلوب */
    font-size: 16px !important;
    letter-spacing: 2px !important;
}

/* 8. تنسيق نص الرأي (في المنتصف) */
.animate-vertical-scroll blockquote {
    margin-top: 35px !important; 
    padding: 0 !important;
    border: none !important;
    z-index: 1;
}
.animate-vertical-scroll blockquote p {
    font-size: 13.5px !important;
    color: #777777 !important;
    text-align: center !important;
    line-height: 1.8 !important;
    /* قص النص الطويل جداً للحفاظ على تناسق الكروت بجانب بعضها */
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 9. تنسيق بيانات العميل (الصورة والاسم بالأسفل) */
.animate-vertical-scroll figcaption {
    border-top: none !important;
    padding: 15px 0 0 0 !important;
    justify-content: center !important; 
    align-items: center !important;
    gap: 12px !important;
    margin-top: auto !important;
    flex-direction: row-reverse !important; /* الصورة يمين والاسم يسار */
}

.animate-vertical-scroll figcaption img {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.animate-vertical-scroll figcaption .flex-col {
    align-items: flex-end !important;
    justify-content: center !important;
}

.animate-vertical-scroll figcaption .font-semibold {
    font-size: 14px !important;
    color: #333333 !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

/* إخفاء اسم المدينة ليتطابق مع صورتك */
.animate-vertical-scroll figcaption .text-xs.opacity-60 {
    display: none !important;
}
/* =========================================
   تصميم صفحة الماركات (شبكة موحدة ومنتظمة تماماً)
   ========================================= */

/* 1. إخفاء شريط الحروف الأبجدية وفواصل الحروف نهائياً */
.brands-nav-wrap,
section[id^="brand-section-"] > div.flex {
    display: none !important;
}

/* 2. الخدعة السحرية: تدمير الحواجز بين الأقسام لدمج كل الماركات معاً */
section[id^="brand-section-"],
section[id^="brand-section-"] > div.grid {
    display: contents !important;
}

/* إخفاء أي خطاطيف برمجية من القالب قد تسبب فراغات في الشبكة */
salla-hook {
    display: none !important;
}

/* 3. إنشاء الشبكة الموحدة المتراصة (4 في كل سطر للكمبيوتر) */
.brands-nav-wrap + div {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 ماركات متساوية في السطر */
    gap: 20px !important;
    width: 100% !important;
}

/* 4. تصميم كارت الماركة (بساطة، حواف ناعمة، ونظافة بصرية) */
.brand-item {
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 20px !important; 
    padding: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important; /* إجبار الكروت لتكون مربعات مثالية */
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important; /* إزالة أي هوامش عشوائية */
}

/* 5. ضبط حجم صورة الماركة لتكون متناسقة داخل المربع */
.brand-item img {
    max-width: 80% !important;
    max-height: 80% !important;
    object-fit: contain !important;
    transition: transform 0.4s ease !important;
}

/* 6. تفاعل الكارت عند تمرير الماوس (إضاءة ذهبية خفيفة وتكبير ناعم) */
.brand-item:hover {
    transform: translateY(-6px) !important; /* ارتفاع ناعم للأعلى */
    border-color: #dca34b !important; /* إطار ذهبي */
    background-color: #fffcf5 !important; /* خلفية ذهبية فاتحة جداً تبرز الشعار */
    box-shadow: 0 12px 25px rgba(220, 163, 75, 0.12) !important; /* ظل ذهبي ناعم */
}

.brand-item:hover img {
    transform: scale(1.08) !important; /* تكبير الشعار قليلاً لجذب الانتباه */
}

/* =========================================
   تنسيقات الشاشات الصغيرة (الجوال)
   ========================================= */
@media (max-width: 768px) {
    /* جعلها ماركتين في كل سطر في الجوال لتكون واضحة */
    .brands-nav-wrap + div {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .brand-item {
        padding: 15px !important;
        border-radius: 16px !important;
    }

    .brand-item:hover {
        transform: translateY(-3px) !important; 
    }
}
/* =========================================
   تنسيق شبكة المنتجات (ترتيب الهوامش والمسافات)
   ========================================= */

/* 1. تفعيل نظام الشبكة الاحترافي وتحديد المسافات */
.s-products-list-wrapper {
    display: grid !important;
    gap: 25px !important; /* مسافة مريحة وأنيقة بين المنتجات (طولاً وعرضاً) */
    padding: 15px 5px 30px !important; /* مساحة تنفس حول الشبكة بالكامل */
}

/* 2. توزيع المنتجات على الشاشات الكبيرة (الكمبيوتر - 4 كروت) */
@media (min-width: 1024px) {
    .s-products-list-wrapper {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 3. توزيع المنتجات على الايباد والتابلت (3 كروت) */
@media (min-width: 768px) and (max-width: 1023px) {
    .s-products-list-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* 4. توزيع المنتجات على الجوال (كارتين بجانب بعض) */
@media (max-width: 767px) {
    .s-products-list-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important; /* مسافة أصغر ومرتبة تناسب شاشة الجوال */
        padding: 10px 0 !important;
    }
}

/* 5. إزالة أي هوامش عشوائية من القالب للكارت نفسه */
custom-salla-product-card.product-entry {
    margin: 0 !important; 
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

/* 6. تأثير حركي جمالي يبرز المسافات عند تمرير الماوس */
custom-salla-product-card.product-entry:hover {
    transform: translateY(-8px) !important; /* ارتفاع ناعم للأعلى */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; /* ظل عميق يعطي بروزاً للكارت */
    border-color: #dca34b !important; /* تحديد الكارت بإطار ذهبي أنيق */
    z-index: 5 !important;
}
/* تكبير الانحناء لجميع صور السلايدر (البنرات) */
.s-slider-container .swiper-slide img {
    border-radius: 35px !important; /* تم تكبير الانحناء لجميع الصور */
}
/* 1. إزالة اللون الأخضر من الحاوية الخارجية إن وجد */
div[color="#4dc247"] {
    background-color: transparent !important;
}

/* 2. تصميم الزر الدائري باللون الذهبي */
a[aria-label="Go to whatsapp"] {
    background-color: #dca34b !important; /* اللون الذهبي المطابق لتصميمك */
    border-radius: 50% !important; /* شكل دائري تماماً */
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important; /* تصغير الأيقونة قليلاً لتتناسب مع الدائرة */
    box-shadow: 0 4px 12px rgba(220, 163, 75, 0.4) !important; /* ظل ذهبي ناعم وجميل */
    transition: transform 0.3s ease, background-color 0.3s ease !important;
}

/* 3. تأثير حركي عند تمرير الماوس (تكبير بسيط) */
a[aria-label="Go to whatsapp"]:hover {
    transform: scale(1.1) !important;
    background-color: #c9933f !important; /* لون ذهبي أغمق قليلاً عند التمرير */
}

/* 4. التأكد من أن الأيقونة بيضاء وتملأ المساحة بشكل متناسق */
a[aria-label="Go to whatsapp"] svg {
    fill: #ffffff !important; /* فرض اللون الأبيض للأيقونة */
    width: 100% !important;
    height: 100% !important;
}
/* =========================================
   تغيير خلفية القسم السفلي إلى الأسود وجعله ممتداً لنهاية الشاشة
   ========================================= */

/* 1. استهداف الحاوية، تلوينها، وإجبارها على التمدد (Full Width) */
div.container.justify-between.items-center:has(salla-payments),
div.container.justify-between.items-center:has(salla-social) {
    background-color: #000000 !important;
    border-radius: 0 !important; /* إزالة الحواف ليلتصق بالشاشة تماماً */
    
    /* الخدعة السحرية لكسر الحاوية والتمدد بعرض الشاشة بالكامل */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    
    /* مساحات تنفس جانبية للمحتوى الداخلي (النصوص والشعارات) */
    padding-right: 5% !important; 
    padding-left: 5% !important;
}

/* 2. تفتيح ألوان النصوص والروابط لتكون مقروءة على الخلفية السوداء */
div.container.justify-between.items-center:has(salla-payments) p,
div.container.justify-between.items-center:has(salla-payments) a,
div.container.justify-between.items-center:has(salla-payments) span {
    color: #f9f9f9 !important;
}

/* 3. تأثير تفاعلي عند تمرير الماوس على رابط الشركة */
div.container.justify-between.items-center:has(salla-payments) a:hover {
    color: #dca34b !important; /* يتغير للون الذهبي عند التأشير */
}
/* =========================================
   تحديث تصميم سلة المشتريات (مطابق للصورة)
   ========================================= */

/* 1. الصندوق الرئيسي الأبيض الذي يجمع السلة والملخص */
.flex.flex-col.lg\:flex-row.pb-6 {
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
}

/* 2. الخط الفاصل الطولي بين المنتجات (يمين) والملخص (يسار) للكمبيوتر */
@media (min-width: 1024px) {
    .flex.flex-col.lg\:flex-row.pb-6 {
        padding: 30px !important;
    }
    .main-content {
        border-left: 1px solid #eaeaea !important;
        padding-left: 30px !important;
        padding-right: 10px !important;
    }
    .sticky.top-24 {
        padding-right: 30px !important;
        padding-left: 10px !important;
    }
}

/* =========================================
   تنسيق قسم ملخص الطلب (اليسار)
   ========================================= */

/* إزالة الصناديق والظلال الافتراضية ليدمج مع الصندوق الرئيسي */
.sticky.top-24 > .shadow-default {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* عنوان ملخص الطلب باللون الذهبي والتوسيط */
.sticky.top-24 h2.font-bold.text-sm {
    color: #dca34b !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
}

/* تنسيق كود الخصم وزر التطبيق */
.s-cart-coupons-coupon-label {
    color: #777777 !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
    display: block !important;
}
.s-cart-coupons-coupon-input-container input {
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    background-color: #fbfbfb !important;
}
.s-cart-coupons-coupon-button button {
    background-color: #dca34b !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* إضافة عبارة (الاسعار شاملة للضريبة) تحت الإجمالي */
.flex.justify-between.text-lg.mb-5 > span:first-child::after {
    content: "\A الاسعار شاملة للضريبة *";
    white-space: pre;
    font-size: 11px;
    color: #a0a0a0;
    display: block;
    margin-top: 5px;
    font-weight: normal;
}

/* الإجمالي باللون الأسود العريض */
#sub-total, [data-cart-total] {
    color: #222222 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
}

/* زر إتمام الطلب (خلفية شفافة، حدود ذهبية) */
#cart-submit button {
    background-color: #fffdf5 !important; 
    border: 1px solid #dca34b !important;
    color: #dca34b !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
#cart-submit button:hover {
    background-color: #dca34b !important;
    color: #ffffff !important;
}

/* =========================================
   تنسيق كروت المنتجات داخل السلة (اليمين)
   ========================================= */

/* إخفاء العناصر المشتتة (شعارات التقسيط وصناديق الهدايا) لمطابقة الصورة */
.cart-item .installment-badge,
#cart-gifting,
#free-shipping {
    display: none !important;
}

/* إخفاء كلمة "المجموع:" والإبقاء على الرقم فقط */
.cart-item p.text-primary > span:first-child {
    display: none !important;
}

/* الخط العريض للسعر النهائي للمنتج */
.cart-item .item-total {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #222222 !important;
}

/* حواف صور المنتجات */
.cart-item img {
    border-radius: 8px !important;
    border: 1px solid #f0f0f0 !important;
    background-color: #ffffff !important;
}

/* زر الحذف (سلة المهملات الحمراء) */
.btn--delete button {
    background-color: transparent !important;
    color: #ff4b55 !important;
    border: none !important;
    box-shadow: none !important;
}
.btn--delete button i {
    font-size: 20px !important;
}
.btn--delete button:hover {
    background-color: #fff5f5 !important;
    border-radius: 50% !important;
}

/* الترتيب الأفقي الاستثنائي (للكمبيوتر فقط) ليطابق الصورة */
@media (min-width: 1024px) {
    .cart-item {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        border-radius: 12px !important;
        border: 1px solid #f0f0f0 !important;
        margin-bottom: 15px !important;
        background-color: #ffffff !important;
    }
    
    .cart-item .md\:flex {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* توسعة مساحة تفاصيل المنتج */
    .cart-item .flex.flex-1.rtl\:space-x-reverse {
        flex: 2 !important;
        align-items: center !important;
    }
    
    /* ترتيب (السعر - الكمية) على اليسار */
    .cart-item .flex-1.border-t {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: flex-end !important;
        align-items: center !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 40px !important;
        flex: 1.5 !important;
    }

    /* نقل أيقونة الحذف لأقصى اليسار بجوار السعر */
    .cart-item span.absolute.top-1\.5 {
        position: static !important;
        margin-right: 30px !important;
    }
}

/* شكل أزرار الكمية */
.s-quantity-input-container {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
}
/* --- تنسيق عنوان القسم (توسيطه وإخفاء الزوائد) --- */

/* استهداف الهيدر الرئيسي للقسم */
.s-block__title.relative {
    display: flex !important;
    justify-content: center !important; /* توسيط المحتوى أفقيًا */
    align-items: center !important;
    flex-direction: column !important; /* ترتيب عمودي */
    margin-bottom: 30px !important; /* مسافة أسفل العنوان */
    border: none !important; /* إزالة أي حدود افتراضية */
}

/* تنسيق الجانب الأيمن (الذي يحتوي العناوين) */
.s-block__title.relative .right-side {
    text-align: center !important;
    width: 100% !important;
}

/* تحويل العنوان الفرعي الصغير ليكون هو العنوان الرئيسي الممركز */
.s-block__title.relative .right-side .text-sm.font-bold {
    font-size: 24px !important; /* تكبير الخط ليصبح عنوانًا */
    color: #333 !important; /* لون غامق */
    opacity: 1 !important; /* إزالة الشفافية */
    justify-content: center !important; /* توسيط النص الداخلي */
    font-weight: bold !important;
}

/* إخفاء الأيقونة المزدوجة الصغيرة بجانب "منتجات مماثلة" */
.s-block__title.relative .right-side .text-sm.font-bold i.sicon-caret-left-double {
    display: none !important;
}

/* إخفاء العنوان الكبير الأصلي "منتجات قد تعجبك" */
.s-block__title.relative .right-side h2 {
    display: none !important;
}

/* إخفاء الجانب الأيسر (زر عرض الكل) تمامًا */
.s-block__title.relative .left-side {
    display: none !important;
}


/* --- تنسيق أسهم التنقل للسلايدر (نقلها للأسفل وتغيير شكلها) --- */

/* الحاوية الكلية للسلايدر */
salla-products-slider {
    display: flex !important;
    flex-direction: column !important; /* ترتيب عمودي للعناصر بالداخل */
    position: relative !important;
    padding-bottom: 60px !important; /* مساحة في الأسفل للأزرار */
}

/* إعادة ترتيب العناصر: السلايدر أولاً، ثم الأزرار */
salla-products-slider salla-slider {
    order: 1 !important;
}

/* حاوية أزرار التنقل الافتراضية داخل مكون سلة */
salla-products-slider .s-slider-block__title {
    order: 2 !important; /* تأتي بعد السلايدر */
    position: absolute !important;
    bottom: 0 !important; /* في قاع القسم */
    left: 0 !important; /* على اليسار */
    width: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 15px !important; /* هوامش جانبية بسيطة */
    z-index: 10 !important;
}

/* إخفاء أي خلفيات أو عناصر إضافية لحاوية الأزرار */
salla-products-slider .s-slider-block__title::before,
salla-products-slider .s-slider-block__title::after,
salla-products-slider .s-slider-block__title-left::before {
    display: none !important;
}

/* حاوية الأزرار المباشرة */
salla-products-slider .s-slider-block__title-nav {
    display: flex !important;
    gap: 10px !important; /* مسافة بين الزرين */
    position: static !important;
    transform: none !important;
}

/* التنسيق العام للأزرار (جعلها دائرية) */
salla-products-slider .s-slider-nav-arrow {
    position: static !important; /* إلغاء التموضع المطلق */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important; /* دائرية */
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important; /* تأكد من ظهورها */
    visibility: visible !important;
    margin: 0 !important;
    transform: none !important; /* إلغاء أي تحويلات افتراضية */
}

/* تنسيق أيقونة SVG داخل الأزرار */
salla-products-slider .s-slider-nav-arrow .s-slider-button-icon svg {
    width: 20px !important;
    height: 20px !important;
}

/* تنسيق الزر "السابق" (اليمين في RTL - ليكن الذهبي في الصورة) */
salla-products-slider .s-slider-prev {
    background-color: #c5a447 !important; /* اللون الذهبي/الأصفر */
    color: #fff !important; /* لون السهم أبيض */
    order: 2 !important; /* يظهر أولاً جهة اليمين في الترتيب البصري */
}

salla-products-slider .s-slider-prev:hover {
    background-color: #b0913b !important; /* درجة أغمق عند الحوم */
}

/* تنسيق الزر "التالي" (اليسار في RTL - ليكن الأبيض في الصورة) */
salla-products-slider .s-slider-next {
    background-color: #fff !important; /* خلفية بيضاء */
    color: #555 !important; /* لون السهم رمادي */
    border: 1px solid #e0e0e0 !important; /* إطار خفيف */
    order: 1 !important;
}

salla-products-slider .s-slider-next:hover {
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;
}

/* التعامل مع حالة الأزرار المعطلة (في بداية أو نهاية السلايدر) */
salla-products-slider .s-slider-nav-arrow.swiper-button-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* --- تعديلات استجابة للشاشات الصغيرة (الجوال) --- */
@media (max-width: 767px) {
    .s-block__title.relative .right-side .text-sm.font-bold {
        font-size: 20px !important; /* تصغير العنوان قليلاً على الجوال */
    }
    
    salla-products-slider .s-slider-block__title {
        margin: 0 10px !important;
    }
    
    salla-products-slider .s-slider-nav-arrow {
        width: 35px !important;
        height: 35px !important;
    }
}
/* =========================================
   1. إجبار السلايدر على عرض 4 منتجات فقط (كمبيوتر)
   ========================================= */
@media (min-width: 1024px) {
    salla-products-slider .s-slider-swiper-wrapper .swiper-slide {
        width: calc(25% - 15px) !important; /* 25% تعني 4 كروت بالضبط في الشاشة */
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    salla-products-slider .s-slider-swiper-wrapper .swiper-slide {
        width: calc(33.333% - 15px) !important; /* 3 كروت للتابلت */
    }
}

/* =========================================
   2. ضغط الكارت وتقصير طوله (ليطابق الصورة)
   ========================================= */

/* تقليل ارتفاع منطقة الصورة */
custom-salla-product-card .product-entry__image-main {
    min-height: 160px !important; /* كان 200، تم تقليله لتقصير الكارت */
    padding: 10px !important;
}

/* تقليل المسافات الداخلية العلوية والسفلية للمحتوى */
custom-salla-product-card .content-wrap {
    padding: 10px 15px 5px !important;
}

/* تصغير شعارات الدفع (تابي وتمارا) وتقريبها */
custom-salla-product-card .flex-col.gap-1 {
    margin-bottom: 8px !important;
}
custom-salla-product-card .installment-badge img {
    height: 18px !important; 
}

/* تقريب الماركة والعنوان من بعضهما وتصغير الخط قليلاً لتوفير المساحة */
custom-salla-product-card .product-entry__subtitle,
custom-salla-product-card .product-brand,
custom-salla-product-card .s-product-card-brand {
    margin-top: 5px !important;
    margin-bottom: 2px !important;
    font-size: 12px !important;
}
custom-salla-product-card .product-entry__title {
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* تصغير حجم خط السعر قليلاً لتوفير مساحة طولية */
custom-salla-product-card .sale-price {
    font-size: 18px !important; 
}
custom-salla-product-card .regular-price {
    font-size: 13px !important; 
}

/* تقليل المساحة السفلية وتصغير الأزرار (القلب وأضف للسلة) */
custom-salla-product-card.product-entry {
    padding-bottom: 55px !important; /* تقليل المساحة المحجوزة للأزرار بالأسفل */
}

custom-salla-product-card .btn--wishlist {
    height: 36px !important; 
    width: 36px !important;
    bottom: 10px !important;
    left: 10px !important;
}
custom-salla-product-card .btn--wishlist button i {
    font-size: 16px !important;
}

custom-salla-product-card .add-to-cart-conatiner {
    bottom: 10px !important;
    right: 10px !important;
    left: 56px !important; /* لتتناسب مع حجم القلب الجديد */
}
custom-salla-product-card .btn--add-to-cart button {
    height: 36px !important; 
    font-size: 13px !important;
}
/* =========================================
   تغيير لون عنوان "منتجات مماثلة" للأسود الغامق
   ========================================= */
.s-block__title.relative .right-side .text-sm.font-bold span.opacity-60 {
    color: #000000 !important; /* اللون الأسود الغامق */
    opacity: 1 !important; /* إزالة الشفافية التي تجعله يبدو باهتاً */
}