/* Add custom CSS styles below */ 
/* ═══════════════════════════════════════════════════
   بنتي — تحسينات الأداء (PageSpeed Optimization)
   التاريخ: أغسطس 2026
   ═══════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────
   1. إصلاح CLS — حجز مساحة السلايدر الرئيسي
   المشكلة: السلايدر يسبب إزاحة 0.285 عند التحميل
   الحل: تثبيت أبعاد السلايدر قبل تحميل الصور
   ────────────────────────────────────────────────── */

/* حاوية السلايدر الرئيسية */
.s-block--enhanced-slider {
  contain: layout style;
}

.s-block--enhanced-slider .swiper {
  aspect-ratio: 900 / 600;
  overflow: hidden;
}

.s-block--enhanced-slider .swiper-slide {
  aspect-ratio: 900 / 600;
  overflow: hidden;
}

.s-block--enhanced-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* شارات الثقة أسفل السلايدر — تثبيت ارتفاع */
.s-block--enhanced-slider .trust-bar,
.s-block--enhanced-slider [class*="trust"] {
  min-height: 48px;
}

/* ──────────────────────────────────────────────────
   2. إصلاح CLS — بانرات الثقة (bentte-trust-banners)
   ────────────────────────────────────────────────── */
.s-block--bentte-trust-banners {
  contain: layout style;
  min-height: 200px;
}

.s-block--bentte-trust-banners img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ──────────────────────────────────────────────────
   3. إصلاح CLS — المنتج المميز
   ────────────────────────────────────────────────── */
.s-block--bentte-featured {
  contain: layout style;
  min-height: 400px;
}

/* ──────────────────────────────────────────────────
   4. إصلاح CLS — كل أقسام بنتي المخصصة
   ────────────────────────────────────────────────── */
.s-block--bentte-categories {
  contain: layout style;
  min-height: 280px;
}

.s-block--bentte-best-sellers,
.s-block--bentte-collections {
  contain: layout style;
  min-height: 350px;
}

/* ──────────────────────────────────────────────────
   5. تحسين تحميل الخطوط — font-display: swap
   المشكلة: 8 ملفات خطوط تحجب العرض الأول (FCP)
   الحل: عرض خط بديل فوراً ثم استبداله
   ────────────────────────────────────────────────── */
@font-face {
  font-family: 'Salla Icons';
  font-display: swap;
}

/* فرض swap على كل خطوط الثيم */
@font-face {
  font-family: 'sallaicons';
  font-display: swap;
}

/* ──────────────────────────────────────────────────
   6. تحسين أحجام صور المنتجات
   المشكلة: الصور 900×900 تُعرض بحجم 263×263
   الحل: تحديد أبعاد ثابتة + تحسين العرض
   ────────────────────────────────────────────────── */
.s-product-card-entry__image img,
.s-product-card-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  content-visibility: auto;
}

/* حاوية صورة المنتج */
.s-product-card-entry__image,
.s-product-card-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}

/* ──────────────────────────────────────────────────
   7. تأخير عرض الأقسام خارج الشاشة (below-the-fold)
   يقلل من وقت العرض الأول ويحسّن LCP
   ────────────────────────────────────────────────── */
.s-block--bentte-features,
.s-block--bentte-size-filter,
.s-block--bentte-product-matcher,
.s-block--bentte-easy-packaging,
.s-block--bentte-faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* ──────────────────────────────────────────────────
   8. تحسين الوصولية — تباين الألوان
   المشكلة: بعض النصوص لا تحقق نسبة تباين 4.5:1
   ────────────────────────────────────────────────── */

/* النصوص الفرعية — تغميق اللون */
.s-product-card-entry__price .before,
.s-product-card-entry .product-subtitle,
.s-block .section-subtitle {
  color: #595550;
}

/* أزرار ونصوص على خلفية داكنة */
.s-block--enhanced-slider .slide-content .desc,
.s-block--enhanced-slider .slide-content .sub {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ──────────────────────────────────────────────────
   9. تحسين الوصولية — ARIA tablist
   المشكلة: عنصر bentte-tabs يحتاج role="tablist"
   (يُحل عبر JS أو Twig، لكن هذا CSS مساعد)
   ────────────────────────────────────────────────── */
.bentte-tabs [role="tab"] {
  cursor: pointer;
}

.bentte-tabs [role="tab"][aria-selected="true"] {
  border-bottom: 2px solid currentColor;
}

/* ──────────────────────────────────────────────────
   12. تقليل حجم DOM المعروض — إخفاء العناصر البعيدة
   ────────────────────────────────────────────────── */
footer,
.s-block:nth-child(n+7) {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}