/* =========================
   تعديل بطاقة المنتج لجعلها بحجمها الطبيعي
========================= */
.s-products-slider-card {
    border: 0.3px solid #581a73 !important; /* تغيير اللون إلى #581a73 */
    border-radius: 0.5rem;
    position: relative;
    padding: 10px;
    margin: 25px 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100% !important; /* إضافة !important لضمان التطبيق */
    max-width: 280px !important;
    box-sizing: border-box;
    background-color: #fff;
}

/* =========================
   تأثير النبض عند مرور الماوس
========================= */
.s-products-slider-card:hover {
    animation: pulse 1s ease-in-out infinite; /* تأثير نبض أكثر سلاسة */
}

/* =========================
   تأثير النبض
========================= */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* التكبير أثناء النبض */
    }
    80% {
        transform: scale(1);
    }
}

/* =========================
   تأثير hover على بطاقة المنتج
========================= */
.s-products-slider-card:hover .product-block__thumb img {
    transform: scale(1.1); /* تكبير الصورة أكثر قليلاً عند التمرير */
    transition: transform 0.3s ease; /* تأثير الانتقال للصورة */
}

/* =========================
   تأثير hover على البطاقة نفسها
========================= */
.s-products-slider-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* إضافة تأثير ظل عند المرور */
    transform: translateY(-8px); /* رفع البطاقة قليلاً عند المرور */
}

/* =========================
   إخفاء الحدود حول المنتجات
========================= */
.s-products-slider-card .product-block__thumb,
.s-products-slider-card .product-block-outer {
    border: none; /* إزالة أي حدود حول الصور أو البطاقة */
    box-shadow: none !important; /* إزالة أي حدود أو ظلال حول البطاقة */
}

/* =========================
   جعل البطاقة أكثر وضوحًا عند hover
========================= */
.s-products-slider-card:hover {
    border: 0.5px solid #9e6c6c; /* تغيير اللون عند التمرير على البطاقة */
    transition: border 0.3s ease; /* تأثير الانتقال للحدود عند hover */
}

/* =========================
   تحسين النص والأزرار داخل البطاقة
========================= */
.s-products-slider-card .product-title {
    font-size: 16px;
    font-weight: bold;
    color: #6d3b3b; /* لون النص */
    margin-bottom: 10px;
    text-align: center;
}

.s-products-slider-card .add-to-cart-btn {
    background-color: #6d3b3b;
    color: #fff;
    padding: 12px 20px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.s-products-slider-card .add-to-cart-btn:hover {
    background-color: #9e5c5c; /* تغيير اللون عند التمرير */
}

/* =========================
   توسيط بطاقات المنتجات داخل الحاوية
========================= */
.products-slider {
    display: flex;
    justify-content: center; /* توسيط البطائق أفقيًا */
    align-items: center; /* توسيط البطائق عموديًا */
    flex-wrap: wrap; /* السماح بتوزيع البطائق على عدة أسطر إذا لزم الأمر */
    gap: 15px; /* مسافة بين البطائق */
}

/* =========================
   تعديل التبويبات (Tabs)
========================= */
.tabs {
    border: 0.2px solid #ded4c3; /* سمك الإطار */
    border-radius: 6px; /* زوايا ناعمة */
}

.tab-trigger .s-button-element {
    border-radius: 6px !important; /* تأكيد الزوايا الناعمة */
    border: 0.2px solid #ded4c3; /* سمك الإطار */
}

.tab-trigger {
    border-radius: 6px !important; /* تطبيق الزوايا الناعمة على التبويبات نفسها */
}

/* تأثير التبويبة النشطة */
.tab-trigger.is-active .s-button-element {
    background-color: #ececec; /* تغيير اللون الخلفي للتبويبة النشطة */
    color: #d3b7a1; /* تغيير لون النص إلى البيج */
    transform: scale(0.9); /* تكبير التبويبة النشطة */
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* انتقال ناعم عند التفعيل */
}

------
/* =========================
   دمج البانر مع الفوتر وإخفاء المسافة بينهما
========================= */
.footer-banner {
    background-color: #581a73; /* تحديد لون الخلفية للبانر */
    color: #fff; /* لون النص */
    padding: 20px 0; /* إضافة حشوة حول النص */
    text-align: center; /* توسيط النص داخل البانر */
    font-size: 18px; /* حجم الخط */
    font-weight: bold;
    margin: 0; /* إزالة المسافة بين البانر والفوتر */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثيرات عند المرور */
}

/* التأكد من أن الفوتر لا يحتوي على مسافات إضافية */
.store-footer {
    margin-top: 0; /* إزالة المسافة العلوية للفوتر */
    padding-top: 0; /* إزالة المسافة العلوية الإضافية للفوتر */
}

/* التأكد من أن البانر داخل الفوتر لا يترك مسافة */
.store-footer__inner {
    margin-top: 0 !important; /* إزالة المسافة بين الفوتر والبانر */
}

/* التأثيرات على البانر عند مرور الماوس */
.footer-banner:hover {