/* 1. تغيير الخلفية العامة للون السماوي الهادئ */
body, html, main, #app, .main-wrapper, .site-container {
    background-color: #AFDCEC !important;
    background: #AFDCEC !important;
}

/* 2. بطاقات المنتجات (تصميم الغربي: أبيض، زوايا مستديرة) */
[class*="product-card"], [class*="product-item"], .card, .product-box {
    background-color: #ffffff !important;
    border-radius: 20px !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    
    /* تقليل الهوامش الداخلية لأقصى درجة للسماح للصورة بالتمدد */
    padding: 8px !important; 
    
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

/* تأثير التمرير (Hover) على البطاقة */
[class*="product-card"]:hover, [class*="product-item"]:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
}

/* 3. تنسيق السعر (لون أخضر الغربي) */
[class*="price"], .product-price, .amount {
    color: #27ae60 !important;
    font-weight: bold !important;
    font-size: 1.3rem !important; /* تكبير الخط قليلاً */
    margin: 12px 0 !important;
}

/* 4. زر الإضافة للسلة (دائري وأخضر) */
button[class*="add-to-cart"], .btn-add-to-cart, [class*="buy-btn"] {
    background-color: #27ae60 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 12px !important;
    font-weight: 600 !important;
    width: 100% !important;
}

/* ========================================= */
/* 5. تكبير إضافي للصورة (Extra Large Image) */
/* ========================================= */
.product-card img, .product-item img, [class*="product-card"] img, .product-image {
    /* إجبار الصورة على أخذ 100% من عرض البطاقة */
    width: 100% !important;
    min-width: 100% !important;
    
    /* إلغاء أي حدود للارتفاع لجعلها ضخمة */
    height: auto !important;
    max-height: 350px !important; /* رفع السقف لـ 350px لضمان الوضوح */
    
    /* جعل الصورة تملأ المساحة بشكل احترافي */
    object-fit: cover !important; 
    
    /* إزالة أي فراغات حول الصورة */
    margin: 0 auto !important;
    display: block !important;
    
    /* تحسين الجودة والحدة */
    image-rendering: auto !important;
    
    transition: transform 0.5s ease !important;
}

/* تأثير زووم للصورة عند تمرير الماوس */
[class*="product-card"]:hover img {
    transform: scale(1.08) !important; /* تكبير إضافي للصورة داخل البطاقة */
}

/* التأكد من أن الحاوية لا تقيد الصورة */
[class*="image-wrapper"], .product-image-container {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important; /* لقص الزووم الزائد */
}