:root {
    --bg-color: #f9f6f0;      /* لون عاجي/رملي نائم للخلفية بديل للأبيض الصريح */
    --card-bg: #ffffff;       /* لون أبيض ناصع لخلفية بطاقة المنتج لتبزر لبعيد */
    --text-primary: #3A2B22;  /* بني داكن جداً بديل للأسود التقليدي يعطي شعوراً بالدفء والتراث */
    --text-muted: #6A5545;    /* بني رمادي باهت للسعر والتفاصيل الثانوية */
    --accent-gold: #C08A4A;   /* ذهبي عتيق ومطفي للفخامة */
}

body{
  background-color: var(--bg-color);
}

.gallery-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 40px;
    padding: 40px;


}

/* تنسيق الشعار/العنوان الرئيسي في أعلى الصفحة */
header {
    text-align: center;
    padding: 10px;
}

header h1 {
    font-family: "Amiri", serif; 
    font-weight: 700;
    color: var(--text-primary); /* لون ذهبي برونزي معتق يعبر عن الأصالة */
    letter-spacing: 2px;
    font-size: 2.5rem;
}

/* تنسيق بطاقة المنتج محاذاة النصوص */
.product-card {
    background-color: var(--card-bg);
    padding: 24px;
    text-align:right; 
}

/* التحكم في حجم وصورة المنتج داخل البطاقة */
.product-card img {
    width: 100%;        /* تجعل الصورة تأخذ كامل عرض البطاقة البيضاء */
    height: 300px;       /* تحديد ارتفاع موحد وثابت لكل الصور  */
    object-fit: cover;   /* السحر الذي يمنع تشوه الصورة ويقصها بذكاء */
    margin-bottom: 15px; /* مسافة بسيطة بين الصورة واسم المنتج أسفلها */
}

/* تنسيق اسم المنتج */
.product-card h3 {
    font-family: 'Rubik', sans-serif; /* خط ناعم وبسيط وبدون زوائد للأرقام */
    color: var(--text-muted);
    font-size: 1rem;
    margin: 15px 0 8px 0; /* مسافات مدروسة: تبعد عن الصورة فوقها وعن السعر تحتها */
}

/* تنسيق السعر */
.product-card span {
    font-family: 'Rubik', sans-serif; /* خط ناعم وبسيط وبدون زوائد للأرقام */
    color: var(--accent-gold); /* لون بني رمادي باهت ليعطي السعر حجماً ثانوياً راقياً */
    font-size: 1rem;
}