/* Add custom CSS styles below */ 

/* --- الألوان الأساسية لهوية بيورما بأسلوب ديناميكي --- */
:root {
  --peurma-bg-dark: #0A1128; /* لون الخلفية الرئيسي للمتجر (أزرق ليلي داكن فخم) */
  --peurma-card-bg: #141E3C; /* لون خلفية بطاقات المنتجات (أفتح بدرجة لتعطي تباين) */
  --peurma-text-main: #F4F6F9; /* لون النص الرئيسي (أبيض ثلجي مريح للعين) */
  --peurma-accent-gold: #D4AF37; /* لون الأزرار والتنبيهات (ذهبي فخم للـ VIP) */
  --peurma-mist-glow: rgba(255, 255, 255, 0.05); /* إضاءة خفيفة حول العناصر */
}

/* --- تطبيق خلفية المتجر --- */
body {
  background-color: var(--peurma-bg-dark);
  color: var(--peurma-text-main);
  background-image: radial-gradient(circle at 50% 0%, #141E3C 0%, #0A1128 70%); /* تدرج لوني يعطي إيحاء بالإضاءة العلوية */
}

/* --- تنسيق بطاقات المنتجات (Product Cards) على طريقة Fitclass --- */
.product-item {
  background-color: var(--peurma-card-bg);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* إطار خفيف جداً يحدد المنتج */
  transition: all 0.3s ease-in-out;
}

/* --- تأثير عند تمرير الماوس (Hover) لزيادة التفاعل --- */
.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px var(--peurma-mist-glow), 0 0 15px rgba(212, 175, 55, 0.2); /* توهج ذهبي/ثلجي خفيف */
}

/* --- أزرار الإضافة للسلة (Call To Action) --- */
.btn-add-to-cart {
  background-color: var(--peurma-accent-gold);
  color: #000; /* نص أسود لزيادة وضوح الزر الذهبي */
  font-weight: bold;
  border-radius: 8px;
}