/* 1. تعريف الألوان الجديدة كمتغيرات أساسية */
:root {
    --main-color: #50AD9D;
    --light-bg: #F8F7F7;
    --color-primary: #50AD9D !important;
}

/* 2. تحويل أي خلفية سوداء في البطاقات إلى اللون المائي #50AD9D */
.s-product-card-content, 
.s-product-card-entry, 
.bg-black, 
.store-footer {
    background-color: var(--main-color) !important;
    background: var(--main-color) !important;
}

/* 3. تعديل زر إضافة للسلة (الخلفية F8F7F7 والنص والحدود 50AD9D) */
.s-add-product-button, 
.s-button-element.s-button-btn.s-button-primary {
    background-color: var(--light-bg) !important;
    background: var(--light-bg) !important;
    border: 2px solid var(--main-color) !important;
    border-radius: 50px !important;
    color: var(--main-color) !important;
    transition: all 0.3s ease;
}

/* تغيير لون النص والأيقونة داخل الزر */
.s-add-product-button *, 
.s-button-element.s-button-btn.s-button-primary * {
    color: var(--main-color) !important;
    fill: var(--main-color) !important;
    -webkit-text-fill-color: var(--main-color) !important;
}

/* 4. تغيير ألوان النصوص والأسعار لتكون واضحة فوق الخلفية الملونة */
.s-product-card-content-title a, 
.s-product-card-starting-price, 
.s-product-card-entry h4, 
.s-product-card-entry p,
.s-slider-block__title h2 {
    color: var(--light-bg) !important;
    -webkit-text-fill-color: var(--light-bg) !important;
    background-image: none !important; /* إلغاء التدرج القديم المزعج */
}

/* 5. إضافة حركة النبض (Signal) التي كانت في كودك ولكن بلونك الجديد */
@keyframes signal {
    0% { box-shadow: 0 0 0 0 rgba(80, 173, 157, 0.4); }
    100% { box-shadow: 0 0 0 10px rgba(80, 173, 157, 0); }
}

.s-add-product-button {
    animation: signal 1.5s infinite;
}

/* 6. سلاسة إضافية لثيم رائد */
.s-product-card-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}/* كود الإصلاح النهائي لزر إضافة للسلة في ثيم رائد */

/* 1. إظهار الزر ومنع اختفائه */
.s-add-product-button, 
.s-button-element.s-button-btn.s-button-primary,
.s-product-card-vertical .s-add-product-button {
    background-color: #F8F7F7 !important; /* اللون الفاتح للخلفية */
    background: #F8F7F7 !important;
    border: 2px solid #50AD9D !important; /* اللون المائي للحدود */
    color: #50AD9D !important;           /* لون النص */
    border-radius: 50px !important;
    visibility: visible !important;      /* إجبار الزر على الظهور */
    opacity: 1 !important;               /* منع الشفافية */
    display: flex !important;            /* ضمان اتخاذ مساحة */
    height: 45px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease-in-out !important;
}

/* 2. إظهار النص والأيقونة داخل الزر بلون واضح */
.s-add-product-button *, 
.s-button-element.s-button-btn.s-button-primary *,
.s-add-product-button span,
.s-add-product-button i {
    color: #50AD9D !important;
    fill: #50AD9D !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: #50AD9D !important;
    font-weight: bold !important;
}

/* 3. تأثير بسيط عند تمرير الماوس لجعل الزر "تفاعلي" */
.s-add-product-button:hover {
    background-color: #50AD9D !important;
    color: #F8F7F7 !important;
    transform: scale(1.03); /* تكبير بسيط جداً عند اللمس */
}

.s-add-product-button:hover * {
    color: #F8F7F7 !important;
    fill: #F8F7F7 !important;
    -webkit-text-fill-color: #F8F7F7 !important;
}

/* 4. تعديل لون خلفية بطاقة المنتج لتناسب تصميمك */
.s-product-card-content {
    background-color: #50AD9D !important; /* الخلفية المائية */
    border-radius: 0 0 15px 15px !important;
}

/* 5. جعل أسماء المنتجات والأسعار تظهر بوضوح بالأبيض */
.s-product-card-content-title a, 
.s-product-card-starting-price {
    color: #F8F7F7 !important;
    -webkit-text-fill-color: #F8F7F7 !important;
}
/* تكبير وإبراز نص "إضافة للسلة" ليكون واضحاً دائماً */

.s-add-product-button, 
.s-button-element.s-button-btn,
.s-product-card-vertical .s-add-product-button {
    background-color: #F8F7F7 !important;
    border: 2px solid #50AD9D !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 50px !important; /* زيادة ارتفاع الزر قليلاً ليتناسب مع الخط الأكبر */
}

/* تعديل خصائص النص والخط داخل الزر */
.s-add-product-button *, 
.s-button-element.s-button-btn *,
.s-product-card-vertical .s-add-product-button span,
.s-product-card-vertical .s-add-product-button i {
    color: #50AD9D !important;
    -webkit-text-fill-color: #50AD9D !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* إعدادات الخط الجديد */
    font-size: 16px !important;      /* تكبير حجم الخط */
    font-weight: 800 !important;      /* جعل الخط عريض جداً */
    letter-spacing: 0.5px !important; /* تباعد بسيط بين الحروف للوضوح */
}

/* تكبير الأيقونة (السلة) بجانب النص */
.s-add-product-button i, 
.s-add-product-button svg {
    font-size: 18px !important; 
    margin-left: 8px !important;
}

/* تأثير التفاعل عند تمرير الماوس */
.s-add-product-button:hover {
    background-color: #50AD9D !important;
    transform: scale(1.02); /* تكبير الزر بشكل بسيط جداً عند اللمس */
}

.s-add-product-button:hover * {
    color: #F8F7F7 !important;
    -webkit-text-fill-color: #F8F7F7 !important;
}/* إصلاح ترتيب المربعات وهيكل البطاقات */
.s-products-slider-card, .s-product-card-vertical {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    margin: 10px !important; /* تباعد البطاقات عن بعضها */
}

.s-product-card-image {
    width: 100% !important;
    aspect-ratio: 1/1 !important; /* الحفاظ على تناسق أبعاد الصورة */
    object-fit: cover !important;
}

/* إصلاح عرض الشبكة (Grid) */
.s-block--products-slider .swiper-wrapper {
    display: flex !important;
    gap: 15px !important;
}/* 1. إصلاح ترتيب المربعات (الشبكة) */
.s-block--products-slider .swiper-wrapper, 
.grid.grid-cols-1 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* 2. إصلاح حجم وشكل بطاقة المنتج لتعود للمظهر السابق */
.s-product-card-vertical {
    width: 100% !important;
    max-width: 180px !important; /* حجم المربع الصغير كما في الصورة */
    background: #50AD9D !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* 3. إجبار نص "إضافة للسلة" على الظهور الدائم والواضح */
.s-add-product-button {
    background-color: #F8F7F7 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    height: 40px !important;
}

.s-add-product-button span {
    color: #50AD9D !important;
    -webkit-text-fill-color: #50AD9D !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
}/* 1. إصلاح ترتيب المربعات (الشبكة) */
.s-block--products-slider .swiper-wrapper, 
.grid.grid-cols-1 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* 2. إصلاح حجم وشكل بطاقة المنتج لتعود للمظهر السابق */
.s-product-card-vertical {
    width: 100% !important;
    max-width: 180px !important; /* حجم المربع الصغير كما في الصورة */
    background: #50AD9D !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* 3. إجبار نص "إضافة للسلة" على الظهور الدائم والواضح */
.s-add-product-button {
    background-color: #F8F7F7 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    height: 40px !important;
}

.s-add-product-button span {
    color: #50AD9D !important;
    -webkit-text-fill-color: #50AD9D !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
}