/* ===== إعداد عام ===== */
html, body {
  height: 100%;
  margin: 0;
}

/* خلفية الصفحة بالكامل بتدرج مائل أنيق */
body {
  background: linear-gradient(135deg, #0b3632 0%, #84caa0 100%);
  background-attachment: fixed;
  color: #0b1f16;
}


/* =========================
Footer
========================= */
:root {
  --footer-bg: linear-gradient(135deg, #0b3632 0%, #84caa0 100%);
  --footer-text: #ffffff;
}

/* الفوتر بخلفية متدرجة أنيقة */
.store-footer__inner {
  background: var(--footer-bg) !important;
  color: var(--footer-text);
  background-image: none !important;
  width: 100%;
  border: none;
  border-radius: 0;
  margin: 0;
}

.store-footer__inner a {
  color: #ffffff !important;
  font-weight: 500;
}
.store-footer__inner a:hover {
  opacity: 0.85;
}


/* =========================
أي عناصر تستخدم .inner::before
========================= */

.inner {
  position: relative;          /* عشان ::before يتموضع داخله */
  /* overflow: hidden;   شلناها عشان ما تقص القوائم المنسدلة */
  z-index: 0;                  /* نضبط ترتيب الطبقات */
}

.inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0b3632 0%, #84caa0 100%) !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: -1;                 /* نخلي الخلفية تحت عناصر الهيدر والقائمة */
}

/* =========================
قسم المميزات s-block--features
========================= */

/* إزالة الخلفية عن جميع العناصر */
.s-block--features__item {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* التأكد أن النصوص كلها بيضاء */
.s-block--features__item *,
.s-block--features__item h1,
.s-block--features__item h2,
.s-block--features__item h3,
.s-block--features__item h4,
.s-block--features__item h5,
.s-block--features__item h6,
.s-block--features__item p,
.s-block--features__item span,
.s-block--features__item a {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* إزالة الدائرة من الأيقونات */
.s-block--features__item svg,
.s-block--features__item img,
.s-block--features__item .icon,
.s-block--features__item i,
.s-block--features_item .s-block--features_icon,
.s-block--features__item .feature-icon {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* أول عنصر فقط (لو حاب تميّزه أكثر) */
.s-block--features__item:first-child {
  background: none !important;
  background-color: transparent !important;
  color: #fff !important;
}

.s-block--features__item:first-child *,
.s-block--features__item:first-child h1,
.s-block--features__item:first-child h2,
.s-block--features__item:first-child h3,
.s-block--features__item:first-child p,
.s-block--features__item:first-child span,
.s-block--features__item:first-child i,
.s-block--features__item:first-child a {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

.s-block--features__item:first-child svg,
.s-block--features__item:first-child img,
.s-block--features__item:first-child .icon,
.s-block--features__item:first-child i,
.s-block--features__item:first-child .feature-icon,
.s-block--features_item:first-child .s-block--features_icon {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* =========================
القائمة الرئيسية في الهيدر (التصنيفات)
========================= */