/* ---------------------------------------------------- */
/* 1. استهداف بطاقة المنتج الرئيسية (الإطار والترتيب) */
/* ---------------------------------------------------- */
.s-product-card, .s-product-card-entry {
    /* الإطار: لون بني فاتح / عنابي مطابق للصورة */
    border: 1px solid #c88a6d !important; 
    border-radius: 12px !important; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important; 
    
    /* الترتيب العمودي لضمان تثبيت الأزرار في الأسفل */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    padding-bottom: 0 !important; 
    background-color: white !important;
    position: relative !important; /* مهم لأشرطة الخصم المطلقة */
}

/* ---------------------------------------------------- */
/* 2. تنسيق منطقة الأزرار في الأسفل (لترتيب زر السلة وزر العين) */
/* ---------------------------------------------------- */
.s-product-card__actions {
    display: flex !important; 
    width: 100% !important;
    padding: 0 !important; 
    margin-top: auto !important; /* لدفع منطقة الأزرار كلها للأسفل */
}

/* 3. استهداف زر "أضف للسلة" (الزر الأكبر) */
.s-product-card .s-button[data-add-to-cart],
.s-button-element.s-button-outline.s-button-wide {
    /* اللون والتعبئة */
    background-color: #8a4a2a !important; /* لون بني / عنابي داكن */
    color: white !important;
    border: none !important; 
    background-image: none !important;
    
    /* الحجم والتثبيت */
    flex-grow: 1 !important; /* لجعل زر الإضافة للسلة يأخذ المساحة الأكبر */
    font-weight: bold !important;
    padding: 12px 0 !important; 
    
    /* الحواف */
    border-radius: 0 0 0 12px !important; /* الزاوية اليسرى مستديرة */
}

/* 4. استهداف زر "عرض المنتج" (زر العين) */
/* هذا القسم يضيف زر العين بتنسيقه الصحيح ويجعله جزءًا من الـ flexbox */
.s-product-card button[data-product-action="view"],
.s-product-card__actions .s-button:last-child {
    background-color: #8a4a2a !important; 
    color: white !important;
    border: none !important;
    background-image: none !important;
    font-weight: bold !important;
    
    /* الحجم والتثبيت */
    width: 55px !important; /* عرض صغير مناسب لزر العين */
    padding: 12px 0 !important; 
    border-radius: 0 0 12px 0 !important; /* الزاوية اليمنى مستديرة */
    
    /* لإظهار الأيقونة الداخلية إن وجدت */
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
}

/* ---------------------------------------------------- */
/* 5. تنسيق شريط "وفر 50%" (شريط الخصم العلوي) */
/* ---------------------------------------------------- */
.s-product-card__discount-badge { 
    /* اللون والحجم (مطابق للصورة: أحمر مائل للوردي) */
    background-color: #ff6666 !important; /* أحمر ساطع */
    color: white !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: bold !important;

    /* الموقع: في الزاوية العلوية اليمنى (بالنسبة للغة العربية) */
    position: absolute !important;
    top: 15px !important; 
    left: auto !important; /* إلغاء التعيين الافتراضي */
    right: 15px !important; 
    z-index: 10 !important;
}

/* 6. تنسيق شريط "العرض بالموقع فقط!" (شريط العرض السفلي) */
/* نستخدم فئة s-product-card__label--offer الشائعة */
.s-product-card__label--offer {
    /* اللون: مطابق للون الأزرار (البني الداكن) */
    background-color: #8a4a2a !important; 
    color: white !important;
    padding: 6px 15px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    
    /* الموقع: في المنتصف فوق اسم المنتج */
    position: absolute !important;
    top: 50% !important; /* قد يحتاج هذا التعيين إلى تعديل بسيط حسب قالبك */
    right: 50% !important;
    transform: translate(50%, -50%) !important; /* لوضعه في المنتصف تماماً */
    z-index: 9 !important;
}

/* 7. تنسيق السعر الجديد (مطابق للون الزر) */
.s-product-card__price-new {
    color: #8a4a2a !important; 
    font-weight: bold !important;
}