/* Add custom CSS styles below */ 
/* الهيدر */
header, header * {
    background-color: #ffffff !important;
    color: #155080 !important;
}

/* الفوتر */
footer, .site-footer {
    background-color: #ffffff !important;
}

footer *, .site-footer * {
    color: #155080 !important;
}
/* جعل خلفية المتجر بالكامل بيضاء */
body {
    background-color: #ffffff !important;
}

/* في حال وجود أقسام لها خلفية مختلفة */
.section,
.container,
.page-content,
.product-card,
header,
footer {
    background-color: #ffffff !important;
}
/* تصغير ارتفاع رأس الصفحة */
header {
    padding: 8px 0 !important;   /* يقلل المسافة العلوية والسفلية */
    min-height: 50px !important; /* يحدد ارتفاع صغير للهيدر */
}

/* تصغير عناصر الهيدر الداخلية */
header * {
    font-size: 14px !important;  /* يصغّر حجم الخط داخل الهيدر */
}

/* تصغير الشعار إن وجد */
header img {
    max-height: 40px !important; /* يصغّر الشعار */

/* خلفية البطاقة */
.product-card,
.product-box,
.product-item {
    background-color: #ffffff !important; /* خلفية بيضاء */
    border-radius: 16px !important;
    padding: 15px !important;
    border: 1px solid #e6eaf2 !important; /* إطار ناعم */
}

/* لون النص داخل البطاقة */
.product-card *,
.product-box *,
.product-item * {
    color: #275b85 !important; /* الأزرق اللي اخترته */
}

/* عنوان المنتج */
.product-card .product-title,
.product-box .product-title,
.product-item .product-title {
    color: #155080 !important; /* أزرق غامق للعناوين */
    font-weight: bold;
}

/* السعر */
.product-card .price,
.product-box .price,
.product-item .price {
    color: #6fa8dc !important; /* أزرق فاتح للسعر */
    font-weight: bold;
}

/* تأثير عند المرور */
.product-card:hover,
.product-box:hover,
.product-item:hover {
    background-color: #f7faff !important; /* لمسة أزرق فات