/* =========================================
   ثيم "أصالة الحير" - تركيز على الألوان والخطوط
   ========================================= */

/* 1. لوحة الألوان والخطوط (الهوية البصرية) */
:root {
    --primary-brown: #4A3B32;  /* بني غامق فاخر (العناصر الأساسية) */
    --accent-gold: #C69C6D;    /* ذهبي صحراوي (للأسعار والتمييز) */
    --bg-cream: #F9F7F2;       /* كريمي فاتح جداً (خلفية الموقع) */
    --pure-white: #FFFFFF;     /* خلفية الكروت */
    --text-dark: #2D2D2D;      /* لون النصوص للقراءة */
    --font-main: 'DINNextLTArabic', sans-serif;
}

/* 2. إعدادات الصفحة والخطوط */
body, #app, .content-wrapper, .s-layout-container {
    background-color: var(--bg-cream) !important;
    font-family: var(--font-main) !important;
    color: var(--text-dark) !important;
    line-height: 1.6 !important; /* تحسين القراءة */
}

/* 3. الهيدر (القائمة العلوية) - نظيف ومرتب */
.store-header, .site-header {
    background: var(--pure-white) !important;
    border-bottom: 3px solid var(--primary-brown) !important; /* خط بني أسفل الهيدر */
    box-shadow: 0 4px 15px rgba(74, 59, 50, 0.05) !important;
}

/* تلوين أيقونات الهيدر */
.site-header a, .site-header i, .cart-icon {
    color: var(--primary-brown) !important;
}

/* 4. كرت المنتج (التركيز على الفخامة) */
.product-entry, .s-product-card-entry {
    background-color: var(--pure-white) !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease-in-out !important;
    overflow: hidden;
}

/* تأثير التحويم (Hover) */
.product-entry:hover, .s-product-card-entry:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold) !important;
    box-shadow: 0 15px 30px rgba(198, 156, 109, 0.15) !important;
}

/* 5. تحسين الخطوط داخل المنتج */
.product-title, .s-product-card-title {
    color: var(--primary-brown) !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin-top: 12px !important;
    text-align: center !important;
}

.product-price, .s-product-card-price {
    color: var(--accent-gold) !important;
    font-size: 18px !important;
    font-weight: 800 !important; /* خط سميك للسعر */
    font-family: var(--font-main) !important;
    text-align: center !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* 6. زر "إضافة للسلة" (تصميم متجاوب) */
.btn-add-to-cart, .s-add-to-cart-btn {
    background-color: var(--primary-brown) !important;
    color: var(--pure-white) !important;
    border-radius: 8px !important;
    border: 1px solid var(--primary-brown) !important;
    width: 95% !important; /* عرض ممتاز للجوال */
    margin: 0 auto 15px auto !important;
    padding: 10px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    transition: 0.3s !important;
    display: block !important;
}

.btn-add-to-cart:hover, .s-add-to-cart-btn:hover {
    background-color: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    color: var(--pure-white) !important;
}

/* 7. الفوتر (أسفل الصفحة) */
footer, .store-footer {
    background-color: var(--primary-brown) !important;
    color: #E0E0E0 !important;
    border-top: 5px solid var(--accent-gold) !important;
}

.store-footer h3 {
    color: var(--accent-gold) !important;
    font-size: 18px !important;
}

/* 8. تحسينات خاصة للجوال */
@media screen and (max-width: 768px) {
    .product-title, .s-product-card-title {
        font-size: 13px !important; /* تصغير الخط قليلاً للجوال */
    }
    .product-entry {
        margin-bottom: 10px !important;
    }
    .site-header {
        padding-bottom: 5px !important;
    }
}