/* Add custom CSS styles below */ 
/* 1. تحويل الخلفية الكاملة للمتجر إلى درجة الكريمي الدافئ الناعم */
body, .main-wrapper, #app, .site-content, .page-wrapper {
    background-color: #fcfbfa !important;
}

/* 2. توحيد لون الأزرار الأساسية (مثل زر أضف للسلة) بلون شعارك الفاخر */
.btn-primary, .s-button, .add-to-cart-btn, [class*="add-to-cart"] {
    background-color: #7c748c !important;
    border-color: #7c748c !important;
    color: #ffffff !important; /* لون النص داخل الزر أبيض ناصع لوضوح تام */
    border-radius: 8px !important; /* زوايا ناعمة للأزرار */
}

/* 3. تأثير أنيق عند تمرير الفأرة فوق الأزرار (يصبح أغمق قليلاً) */
.btn-primary:hover, .s-button:hover {
    background-color: #635b73 !important;
    border-color: #635b73 !important;
}

/* 4. ضبط بطاقات المنتجات بخلفية بيضاء ناصعة لتعطي عمقاً وتبايناً جميلاً */
.product-card, .custom-block {
    background-color: #ffffff !important;
    border: 1px solid #f2eff7 !important; /* حدود ناعمة جداً مائلة للبنفسجي الرمادي */
    border-radius: 12px !important;
}

/* 5. تلوين عناوين المنتجات والتصنيفات بنفس تدرج لون شعارك لتوحيد الهوية */
.product-title, .section-title, h1, h2, h3 {
    color: #5c546c !important;
}