التصنيفات

/* --- 1. إضافة إطار حول كل منتج --- */ .product-item { border: 1px solid #e0e0e0; /* لون الإطار (رمادي فاتح)، يمكنك تغييره */ border-radius: 12px; /* يجعل زوايا الإطار دائرية بشكل جميل */ padding: 15px; /* يضيف مساحة داخلية بين المنتج والإطار */ background-color: #ffffff; /* لون خلفية الإطار (أبيض) */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* يضيف ظل خفيف جداً لإعطاء عمق */ transition: box-shadow 0.3s ease; /* يجعل الظل يظهر بسلاسة عند مرور الماوس */ margin-bottom: 20px; /* يضيف مسافة بين المنتجات عمودياً */ } /* --- 2. تأثير عند مرور الماوس فوق المنتج --- */ .product-item:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* يجعل الظل أكبر قليلاً */ border-color: #cccccc; /* يمكن تغيير لون الإطار عند مرور الماوس */ } /* --- 3. تنسيق السعر ليكون مميزاً --- */ .product-item .price-box .new-price { font-size: 1.2em; /* يكبر حجم السعر الجديد */ color: #28a745; /* يغير لون السعر إلى الأخضر (لون يدل على التوفير) */ font-weight: bold; /* يجعل السعر عريضاً */ } .product-item .price-box .old-price { font-size: 0.9em; /* يصغر حجم السعر القديم قليلاً */ color: #dc3545; /* يغير لون السعر المشطوب عليه للأحمر */ margin-left: 8px; /* يضيف مسافة بين السعرين */ }