/* ============================================================
   1. تحسينات الأداء والسرعة (SEO Core Web Vitals)
   هذه الأكواد تساعد المتصفح على عرض الصفحة بشكل أسرع
   ============================================================ */
.s-product-card-entry, .product-item {
    content-visibility: auto; /* خاصية حديثة تسرع تحميل الصفحة بتأجيل رندر العناصر غير المرئية */
    contain-intrinsic-size: 350px; /* يحجز مكاناً تقريبياً لمنع اهتزاز الشاشة (CLS Fixing) */
    will-change: transform; /* يخبر المتصفح بتجهيز المعالج للحركة */
}

/* ============================================================
   2. تصميم بطاقة المنتج (Premium Product Card)
   تصميم نظيف، عصري، واحترافي
   ============================================================ */
.s-product-card-entry {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important; /* حدود ناعمة جداً */
    border-radius: 12px !important;
    padding: 10px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* حركة انسيابية جداً */
    height: 100%; /* لضمان تساوي أطوال البطاقات */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* تأثير التحويم (Hover) - للكمبيوتر فقط */
@media (min-width: 992px) {
    .s-product-card-entry:hover {
        transform: translateY(-5px); /* رفع البطاقة لأعلى */
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; /* ظل فخم وناعم */
        border-color: #3498db !important; /* تغيير لون الحدود للأزرق عند الوقوف عليها */
    }
}

/* ============================================================
   3. الأسعار والعناوين (Typography & Pricing)
   ============================================================ */
/* اسم المنتج */
.s-product-card-entry h3, .s-product-card-entry a {
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    text-decoration: none;
    font-size: 0.95rem; /* حجم خط مريح للعين */
}

/* السعر الحالي */
.s-product-card-sale-price, .product-price {
    color: #d32f2f !important; /* أحمر داكن جذاب */
    font-weight: 800 !important;
    font-size: 1.2rem;
    display: inline-block;
    margin-top: 5px;
}

/* شارة الخصم (إن وجدت) */
.promotion-title {
    background: linear-gradient(45deg, #e53935, #ff5252) !important; /* تدرج لوني ملفت */
    color: #fff !important;
    border-radius: 4px;
    font-size: 12px !important;
    font-weight: bold;
    padding: 3px 8px !important;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(229, 57, 53, 0.4);
}

/* ============================================================
   4. أزرار الشراء (Call To Action - High Conversion)
   مصممة لزيادة نسبة النقر
   ============================================================ */
.product-cart-submit, .btn-cart {
    background-color: #2c3e50 !important; /* لون البراند الأساسي */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    font-weight: 700 !important;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    
    /* أيقونة سلة التسوق (تجهيز) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-cart-submit:hover, .btn-cart:hover {
    background-color: #1a252f !important; /* لون أغمق عند الضغط */
    box-shadow: 0 4px 10px rgba(44, 62, 80, 0.3);
}

/* ============================================================
   5. القواعد الخاصة بالموبايل فقط (Mobile Optimization)
   هنا يتم حل مشكلة المساحات وجعل الموقع يملأ الشاشة
   ============================================================ */
@media (max-width: 768px) {
    
    /* 1. منع الحركة الجانبية (الحل الجذري) */
    html, body {
        overflow-x: hidden !important;
        position: relative;
        width: 100%;
    }

    /* 2. توسيع الحاويات لتملأ الشاشة */
    .container, .container-fluid, .main-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important; /* هوامش صغيرة جداً لعدم التصاق النص بالحافة */
        padding-right: 12px !important;
        margin: 0 !important;
    }

    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
        width: calc(100% + 10px) !important;
    }

    /* 3. تنسيق الأعمدة لعرض المنتجات بشكل مثالي */
    /* إذا كانت المنتجات داخل أعمدة col-6، هذا يضمن عدم تداخلها */
    [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* 4. بطاقة المنتج في الموبايل */
    .s-product-card-entry {
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; /* ظل ثابت خفيف */
        margin-bottom: 12px; /* مسافة رأسية بين المنتجات */
    }

    /* 5. جعل الصور واضحة */
    .s-product-card-entry img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* 6. تحسين زر الشراء للمس */
    .product-cart-submit {
        min-height: 48px; /* حجم مثالي للإصبع (UX Standard) */
        font-size: 14px;
    }
}