/* =========================================================
   store-width.css
   توسيع عرض قوالب متجر واتساب لتملأ الشاشة.

   القالب الأصلي يضع عرضاً أقصى على .main-content فيظهر
   فراغ على الجانبين في الشاشات العريضة. هذا الملف مستقل
   تماماً فلا يُمحى عند إعادة بناء الأصول.
   ---------------------------------------------------------
   ★ عدّل المتغيّر أدناه فقط
   ========================================================= */

:root {
  /* أقصى عرض للمحتوى.
       none    = يملأ الشاشة كاملة
       1600px  = عريض مع هامش خفيف على الشاشات الكبيرة جداً
       1320px  = العرض المعتاد لمواقع سطح المكتب */
  --wp-max-width: none;

  /* الهامش الجانبي الداخلي على الشاشات الكبيرة */
  --wp-side-padding: 24px;
}

/* الحاوية الرئيسية */
body .main-content {
  max-width: var(--wp-max-width) !important;
  width: 100% !important;
  margin-inline: auto !important;
}

/* الحاويات الداخلية تتبع نفس العرض بدل عرض بوتستراب الثابت */
body .main-content > .container,
body .main-content .container {
  max-width: var(--wp-max-width) !important;
  width: 100% !important;
  padding-inline: var(--wp-side-padding) !important;
}

/* صور الغلاف والبانرات تمتد بالكامل */
body .main-content .banner img,
body .main-content .cover-image img,
body .main-content .slider-banner img {
  width: 100% !important;
  object-fit: cover;
}

/* على الشاشات الصغيرة نعيد الهامش الطبيعي */
@media (max-width: 575.98px) {
  :root {
    --wp-side-padding: 12px;
  }
}