/* 1. الخطوط: استخدام خط "Tajawal" لأنه رسمي ومريح للقراءة في المصطلحات التقنية */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

body, h1, h2, h3, h4, h5, h6, p, a, span, button, .s-product-card-content-title {
    font-family: 'Tajawal', sans-serif !important;
}

/* 2. تحسين بطاقات المنتجات (تصميم Flat حديث) */
.product-entry, .s-product-card-entry {
    border: 1px solid #e5e7eb; /* حدود رمادية دقيقة */
    border-radius: 8px !important; /* زوايا شبه حادة تعطي طابعاً رسمياً */
    background-color: #fff;
    box-shadow: none; /* إزالة الظل الافتراضي للنظافة */
    transition: all 0.3s ease;
}

/* عند مرور الماوس: ظهور ظل ناعم وبروز بسيط */
.product-entry:hover, .s-product-card-entry:hover {
    border-color: var(--color-primary); /* تغيير لون الإطار للون المتجر */
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

/* 3. تنسيق عناوين المنتجات */
.s-product-card-content-title a {
    font-weight: 700 !important;
    color: #1f2937; /* لون داكن جداً للقراءة */
    font-size: 15px !important;
    line-height: 1.5;
}

/* 4. تحسين الأزرار (شكل هندسي احترافي) */
.s-add-to-cart-button, .btn-primary, .btn--submit {
    border-radius: 6px !important; /* زوايا صغيرة جداً */
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding-top: 10px;
    padding-bottom: 10px;
}

.s-add-to-cart-button:hover, .btn-primary:hover {
    opacity: 0.95;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 5. السعر */
.product-price {
    font-weight: 800 !important;
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* 6. تحسين الهيدر (القائمة العلوية) لتكون صلبة */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eee; /* خط فاصل دقيق بدلاً من الظل */
    box-shadow: none !important;
}

/* 7. العناوين الجانبية (مثل: الأكثر مبيعاً) */
.section-title h2, .s-block-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    position: relative;
    padding-right: 15px; /* مسافة للزخرفة */
}

/* زخرفة عمودية بجانب العنوان (ستايل الشركات) */
.section-title h2::before, .s-block-header h2::before {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 4px;
    background-color: var(--color-primary);
    border-radius: 2px;
}

/* 8. تجميل الفوتر (أسفل الصفحة) */
.site-footer {
    background-color: #f9fafb !important; /* لون خلفية فاتح جداً */
    border-top: 1px solid #e5e7eb;
}

/* 9. تحسين شكل حقول الإدخال (البحث وغيره) */
input[type="text"], input[type="email"], select, textarea {
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background-color: #f9fafb;
}

input:focus, textarea:focus {
    background-color: #fff;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

/* تحسين حجم ومكان الشعار */
.site-header__logo img, .header-logo img {
    max-height: 70px !important; /* يمكنك زيادة الرقم لتكبير الشعار */
    width: auto;
    padding: 5px 0; /* مسافة بسيطة من الأعلى والأسفل */
    object-fit: contain; /* الحفاظ على أبعاد الشعار دون مط */
    transition: all 0.3s ease; /* نعومة الحركة */
}