/* ====================================================
1. إعداد الألوان الأساسية
==================================================== */
:root {
  --main-color: #2a2a2a;       /* رأس الصفحة */
  --accent-color: #d4b068;     /* ذهبي أنيق */
  --secondary-color: #f7f7f7;  /* خلفية فاتحة للنصوص */
  --hover-color: #b69454;      /* لون تفاعلي عند المرور */
  --soft-color: #ececec;       /* خلفيات خفيفة للصناديق */
  --nav-color: #4a5d7c;        /* كحلي فاتح للقوائم */
  --btn-color: #2c3e5c;        /* كحلي داكن لزر أضف للسلة */
  --btn-hover: #1f2a3e;        /* أغمق عند hover */
  --footer-color: #4a5d7c;     /* كحلي فاتح للتذييل */
  --img-border: #2c3e5c;       /* إطار الصور كحلي */
}

/* ====================================================
2. الخلفية العامة والمتجر
==================================================== */
body {
  background-color: var(--secondary-color);
  font-family: 'Tajawal', sans-serif;
  color: var(--main-color);
  transition: all 0.3s ease;
}

/* ====================================================
3. الهيدر
==================================================== */
.header-wrapper {
  background-color: var(--main-color) !important;
  color: #ffffff;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 999;
}
.header-wrapper a,
.header-wrapper .nav-link {
  color: #ffffff !important;
  font-weight: 500;
  transition: 0.3s;
}
.header-wrapper a:hover,
.header-wrapper .nav-link:hover {
  color: var(--accent-color) !important;
}

/* ====================================================
4. قوائم التنقل (Navbar) كحلي فاتح
==================================================== */
.navbar,
.navbar ul,
.navbar li {
  background-color: var(--nav-color) !important;
  color: #ffffff !important;
}
.navbar a,
.navbar .nav-link {
  color: #ffffff !important;
  font-weight: 500;
}
.navbar a:hover,
.navbar .nav-link:hover {
  color: var(--accent-color) !important;
}

/* ====================================================
5. أزرار "أضف إلى السلة"
==================================================== */
.btn-primary,
.button-add-cart {
  background-color: var(--btn-color) !important;
  color: #ffffff !important;
  font-weight: 700; /* عريض وواضح */
  padding: 12px 22px;
  border-radius: 6px;
  transition: all 0.3s ease;
  border: none;
}
.btn-primary:hover,
.button-add-cart:hover {
  background-color: var(--btn-hover) !important;
  transform: scale(1.05);
}

/* ====================================================
6. كروت المنتجات وإضافة إطار كحلي للصور + مقاس موحد
==================================================== */
.product-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  margin-bottom: 30px;
  padding: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.product-card img {
  border-radius: 10px;
  border: 3px solid var(--img-border); /* إطار كحلي */
  width: 300px;   /* عرض موحد */
  height: 300px;  /* ارتفاع موحد */
  object-fit: cover; /* لضبط الصورة داخل الإطار */
  display: block;
  margin: 0 auto; /* لتوسيط الصورة */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover img {
  transform: scale(1.07);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.product-card .product-title {
  font-weight: 600;
  font-size: 18px;
  margin: 10px 0 5px;
}
.product-card .product-price {
  color: var(--accent-color);
  font-weight: bold;
  font-size: 16px;
}

/* ====================================================
7. أقسام مختلفة – تباين ألوان حسب الفئة
==================