/* Add custom CSS styles below */ 
:root {
  /* تعريف الألوان للهوية النيلية */
  --primary-color: #3f51b5; /* لون نيلي أساسي */
  --secondary-color: #e8eaf6; /* لون نيلي فاتح جداً للخلفيات */
  --accent-color: #ff9800; /* لون برتقالي للعروض/الخصومات */
  --text-color: #333;
  --border-radius: 8px;
}

/* حاوية المنتجات (Grid) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* بطاقة المنتج */
.product-card {
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  padding: 15px;
  text-align: center;
  transition: box-shadow 0.3s;
}

.product-card:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* زر "إضافة للسلة" باللون النيلي */
.add-to-cart-btn {
  background-color: var(--primary-color);
  color: white;
  padding: 10px;
  border: none;
  border-radius: var(--border-radius);
  width: 100%;
  cursor: pointer;
  font-weight: bold;
}

.add-to-cart-btn:hover {
  background-color: #303f9f;
}

/* شريط التخفيض (الخصم) */
.discount-badge {
  background-color: var(--accent-color);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8em;
}

/* القائمة العلوية */
.navbar {
  background-color: var(--primary-color);
  color: white;
  padding: 15px;
}