/* 1. المتغيرات والتهيئة */
:root {
  --narven-primary: #941914;
  --narven-secondary: #5a0f23;
  --narven-main-gradient: linear-gradient(180deg, var(--narven-primary), var(--narven-secondary));
  --narven-border: #e9edf3;
  /* تحسين قيمة الظل لتكون ناعمة جداً، مما يقلل جهد الرسم (Repaint) على شاشات الجوال */
  --narven-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.03); 
}

/* 2. تسريع الرندرة وعزل العناصر السفلية (Below the Fold) */
.s-block--features, 
html body .store-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px; /* استخدام auto يساعد المتصفح في تقدير الارتفاع الفعلي بدقة */
}

/* 3. تجميع البطاقات وتحسين أداء التمرير (Scrolling Performance) */
.s-block--features__item,
.special-testimonial,
.index .testimonial,
#s-block-21 .special-testimonial__inner,
.faqs-section.all .faq-item {
  border: 1px solid var(--narven-border);
  box-shadow: var(--narven-shadow-sm);
}

.s-block--features__item,
.special-testimonial,
.index .testimonial,
#s-block-21 .special-testimonial__inner {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* تفعيل تسريع العتاد (Hardware Acceleration) لمنع تقطع الصفحة أثناء السكرول */
  backface-visibility: hidden; 
  transform: translateZ(0); 
}

.header-signInBtn {
  border: 1px solid var(--narven-primary);
}

/* 4. تحسين الصور ومنع قفزات تخطيط الصفحة (CLS) */
.post-entry img,
.blog-slider .swiper-slide img,
.post-entry__image img {
  display: block;
  max-width: auto;
  height: auto;
  object-fit: cover;
  /* تم تعديلها إلى 16/9 لأنها النسبة المعيارية لصور المدونات والبنرات لمنع القص الجائر للصور */
  aspect-ratio: 100%; 
  image-rendering: -webkit-optimize-contrast;
}

/* 5. الفوتر (تمت زيادة قوة التحديد "html body" للتخلص من !important وتسريع القراءة) */
html body footer.store-footer,
html body .store-footer__inner,
html body .footer-small-shape .store-footer {
  background: var(--narven-main-gradient);
}

/* 6. الموبايل (أداء Grid السريع وبدون استخدام !important) */
@media (max-width: 767px) {
  html body .store-footer .store-footer__inner,
  html body .store-footer .grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr; 
    justify-items: center;
    text-align: center;
    gap: 12px;
  }
}