/*
  ==========================================
  تنسيقات CSS إضافية لمتجر سلة
  ==========================================
  قم بإضافة هذا الكود في خانة "تخصيص القالب" في إعدادات متجرك.
*/

/* 1. تأثير حركي احترافي لأزرار الشراء الرئيسية */
.btn-primary,
.s-button--primary {
    transition: all 0.3s ease-in-out !important; /* لضمان سلاسة الحركة */
    border-radius: 8px !important; /* حواف مستديرة */
    letter-spacing: 0.5px;
}

.btn-primary:hover,
.s-button--primary:hover {
    transform: translateY(-2px); /* رفع الزر قليلاً عند المرور بالفأرة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* إضافة ظل عميق */
    opacity: 0.95;
}

/* 2. تحسين شكل بطاقات المنتج في الصفحة الرئيسية */
.product-card {
    border-radius: 12px !important; /* حواف مستديرة أكثر وضوحاً */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ظل خفيف وأنيق */
    transition: box-shadow 0.3s ease-in-out;
}

.product-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* تظليل أكبر عند المرور */
}

/* 3. تمييز سعر المنتج بوضوح */
.product-price {
    font-size: 1.1rem !important; /* تكبير حجم الخط */
    font-weight: 700 !important; /* خط سميك */
    color: #c0392b !important; /* استخدام لون مميز (يمكنك تغييره) */
}

/* 4. نمط خاص لرسالة الاعتذار/نفاذ الكمية (اذا ظهرت في صندوق) */
.out-of-stock-message {
    background-color: #fcebeb !important; /* خلفية فاتحة حمراء/وردية */
    color: #c0392b !important;
    border: 1px solid #c0392b !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
}

/* 5. تحسين عرض الصور لتجنب الاهتزاز */
.product-image {
    object-fit: cover;
    aspect-ratio: 1 / 1; /* للمحافظة على نسبة عرض إلى ارتفاع متساوية */
}

/* 6. تنسيق عناوين الأقسام الرئيسية لتمييزها (مثل: قسم النعيمي البلدي) */
/* يستهدف أي عنوان رئيسي (H2) ويظهر الرمز بجوار النص فقط */
h2.text-center {
    /* تم حذف تنسيق الخط الفاصل والضبط المركزي بناءً على طلبك */
    margin-bottom: 30px !important; /* الاحتفاظ بالمسافة السفلية للفصل عن المحتوى */
}

/* إضافة رمز الخروف (🐑) قبل النص لتمييز العنوان (الرمز يظهر على اليمين في اللغة العربية) */
h2.text-center::before {
    content: "\1F411\00A0"; /* رمز الخروف (🐑) متبوعاً بمسافة لا تنكسر */
    font-size: 1.2em; /* تكبير الرمز قليلاً */
    display: inline-block;
}
---
وميض نفذت الكمية*
/*
  ==========================================
  تنسيقات CSS إضافية لمتجر سلة
  ==========================================
  قم بإضافة هذا الكود في خانة "تخصيص القالب" في إعدادات متجرك.
*/

/* 1. تأثير حركي احترافي لأزرار الشراء الرئيسية */
.btn-primary,
.s-button--primary {
    transition: all 0.3s ease-in-out !important; /* لضمان سلاسة الحركة */
    border-radius: 8px !important; /* حواف مستديرة */
    letter-spacing: 0.5px;
}

.btn-primary:hover,
.s-button--primary:hover {
    transform: translateY(-2px); /* رفع الزر قليلاً عند المرور بالفأرة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* إضافة ظل عميق */
    opacity: 0.95;
}

/* 2. تحسين شكل بطاقات المنتج في الصفحة الرئيسية */
.product-card {
    border-radius: 12px !important; /* حواف مستديرة أكثر وضوحاً */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ظل خفيف وأنيق */
    transition: box-shadow 0.3s ease-in-out;
}

.product-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* تظليل أكبر عند المرور */
}

/* 3. تمييز سعر المنتج بوضوح */
.product-price {
    font-size: 1.1rem !important; /* تكبير حجم الخط */
    font-weight: 700 !important; /* خط سميك */
    color: #c0392b !important; /* استخدام لون مميز (يمكنك تغييره) */
}

/* 4. نمط خاص لرسالة الاعتذار/نفاذ الكمية (اذا ظهرت في صندوق) */
.out-of-stock-message {
    background-color: #fcebeb !important; /* خلفية فاتحة حمراء/وردية */
    color: #c0392b !important;
    border: 1px solid #c0392b !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
}

/* 5. تحسين عرض الصور لتجنب الاهتزاز */
.product-image {
    object-fit: cover;
    aspect-ratio: 1 / 1; /* للمحافظة على نسبة عرض إلى ارتفاع متساوية */
}

/* 6. تنسيق عناوين الأقسام الرئيسية لتمييزها (مثل: قسم النعيمي البلدي) */
/* يستهدف أي عنوان رئيسي (H2) ويظهر الرمز بجوار النص فقط */
h2.text-center {
    /* تم حذف تنسيق الخط الفاصل والضبط المركزي بناءً على طلبك */
    margin-bottom: 30px !important; /* الاحتفاظ بالمسافة السفلية للفصل عن المحتوى */
}

/* إضافة رمز الخروف (🐑) قبل النص لتمييز العنوان (الرمز يظهر على اليمين في اللغة العربية) */
h2.text-center::before {
    content: "\1F411\00A0"; /* رمز الخروف (🐑) متبوعاً بمسافة لا تنكسر */
    font-size: 1.2em; /* تكبير الرمز قليلاً */
    display: inline-block;
}

/* 7. تنسيق وتأثير الوميض لرسالة "نفذت الكمية" في بطاقة المنتج */

/* تعريف حركة الوميض */
@keyframes flash-out-of-stock {
    0%, 100% {
        opacity: 1; /* مرئي بالكامل */
    }
    50% {
        opacity: 0.3; /* خافت */
    }
}

/* تطبيق التنسيق والوميض على لاصق "نفذت الكمية" */
.product-card__out-label {
    background-color: #922b21 !important; /* لون أحمر داكن جذاب للخلفية */
    color: #ffffff !important; /* لون نص أبيض لتباين واضح */
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    /* تطبيق حركة الوميض: اسم الحركة، المدة، النمط، التكرار اللانهائي */
    animation: flash-out-of-stock 1.5s ease-in-out infinite;
}
------------------------------*
خلفية الاسئلة 
-------------------------------*
/* ======================================= */
/* 1. التنسيقات الأساسية وإلغاء الزيادات */
/* ======================================= */

.s-block--faq {
  /* إعادة التباعد إلى الأصل تقريباً */
  padding-top: 2rem;  
  padding-bottom: 2rem !important;  
}

/* تنسيق الـ FAQ Box (single-faq) */
.single-faq {
  /* إزالة الظل الذي تمت إضافته سابقاً */
  box-shadow: none;  
  /* إلغاء تأثير الانتقال على الحد والظل */
  transition: none;
  /* إعادة لون الحد إلى لون الكلاس الأساسي */
  border-color: var(--store-text-secondary, #ccc);  
  border-radius: 8px; /* تقليل الاستدارة قليلاً */
}

/* إلغاء تأثير التمرير (Hover) */
.single-faq:hover {
  box-shadow: none;
  border-color: var(--store-text-secondary, #ccc);
}


/* ======================================= */
/* 2. تنسيق زر السؤال (المنطقة القابلة للنقر) */
/* ======================================= */

.faq-btn {
  /* إعادة الحجم إلى الإعدادات الافتراضية للكلاسات الموجودة (py-3 px-5) */
  min-height: auto;
  /* التأكد من بقاء التنسيقات النصية الأساسية */
  background: none;
  border: none;
  cursor: pointer;
}

/* تنسيق نص السؤال */
.faq-btn p {
  font-size: 1rem; /* حجم النص الأساسي (text-base) */
  font-weight: 500; /* تخفيف سماكة الخط */
  line-height: normal;
  /* لون السؤال: يجب أن يبقى لونه كما هو محدد بـ text-store-text-primary */
}


/* ======================================= */
/* 3. تنسيق محتوى الإجابة (faq-content) */
/* ======================================= */

.faq-content {
  /* إزالة أي خط فاصل تم إضافته */
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  
  /* إعادة التحكم في العرض والإخفاء إلى الطريقة الأصلية */
  max-height: auto;  
  opacity: 1;  
  transition: none;  
}

/* تنسيق نص الإجابة (لإعادة الحجم إلى text-sm الموجود في HTML) */
.faq-content p {
  line-height: 1.5; /* تباعد الأسطر الافتراضي */
  font-size: 0.875rem; /* يطابق text-sm */
  padding-bottom: 0;
  
  /* ============================== */
  /* التعديل المطلوب: جعل الجواب بلون مختلف */
  /* ============================== */
  color: #FF0000 !important; /* لون رمادي مزرق داكن (يمكنك تغيير هذا اللون) */
  /* أو يمكنك استخدام متغير CSS موجود في مشروعك غير لون السؤال: */
  /* color: var(--store-text-secondary, #7f8c8d) !important; */
}
------------------------لافتة عرض----------------*
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>شارة عرض خاص للمنتج</title>
    <!-- تضمين Tailwind CSS (للتنسيقات الأساسية) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* ======================================================= */
        /* تأثير النبض البسيط (لجذب الانتباه) */
        /* ======================================================= */
        /* يطبق النبض على الظل ليكون مناسباً لـ Badge */
        @keyframes pulseShadow {
            0%, 100% { box-shadow: 0 0 5px rgba(255, 100, 100, 0.7); }
            50% { box-shadow: 0 0 10px rgba(255, 50, 50, 1); }
        }

        /* ======================================================= */
        /* التنسيق البديل رقم 1: الشارة في وسط الصورة بالضبط (مع تصغير الحجم) */
        /* ======================================================= */
        .product-card__promotion {
            /* 1. إلغاء التنسيقات التي تسبب التضخم والتموضع الخاطئ */
            top: 80% !important; /* إلغاء top القديم وتعيين توسيط */
            left: 50% !important; /* إلغاء left القديم وتعيين توسيط */
            
            /* تم تصغير الحشو لتقليص حجم الشارة */
            padding: 2px 8px !important; 
            
            /* 2. التوسيط العمودي والأفقي */
            position: absolute !important;
            
            /* لضمان الظهور فوق الصورة */
            z-index: 10 !important;
            
            /* 3. التنسيقات الجمالية (تم تصغير حجم الخط) */
            font-size: 12px !important; /* تصغير حجم الخط */
            font-weight: bold !important;
            line-height: 1 !important;
            white-space: nowrap !important;
            border-radius: 9999px !important;
            color: white !important;
            
            /* تطبيق حركة النبض */
            animation: pulseShadow 2s infinite alternate ease-in-out !important;
            
            /* النقل والتوسيط مع الإمالة */
            transform: translate(-50%, -50%) skewY(-2deg) !important;
        }

    </style>
    <script>
        // إعداد Tailwind CSS
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body>

    <!--
    ========================================================
    الكود التجريبي الآن يستخدم الكلاس الأصلي product-card__promotion
    ========================================================
    -->

    <div style="position: relative; width: 300px; height: 300px; background-color: #f0f0f0; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">

        <!-- هنا يفترض أن تكون صورة المنتج -->
        <div class="w-full h-full flex items-center justify-center text-gray-500">
            صورة المنتج
        </div>

        <!-- الشارة الآن تستخدم الكلاس الأصلي الذي قدمته -->
        <div class="product-card__promotion" style="background-color: #ef4444">
             التوصيل والسلخ مجاني
        </div>

    </div>

</body>
</html>