/* ===========================
   🌿 خلفية سُكّر + زخرفة بني غامق (عروق خشب بارزة)
   =========================== */

/* 🎨 متغيرات قابلة للتعديل */
:root{
  --sugar: #F8F2EA;                /* سُكّر أخف قليلاً من السابق */
  --pattern-size: 200px;           /* حجم النقش */
  --footer-section-bg: #FFFFFF;    /* لون آخر قسم */
  --roman-pattern: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2352362A' stroke-width='0.7' stroke-opacity='0.35'%3E%3Cpath d='M40 10 Q60 20 50 40 Q70 35 80 55 Q65 70 85 90 Q65 85 50 110 Q35 100 25 120'/%3E%3Cpath d='M120 20 Q110 40 130 60 Q110 65 125 85 Q140 75 150 95 Q135 100 140 130'/%3E%3Cpath d='M15 80 Q30 85 25 100 Q45 95 50 120 Q40 130 55 145'/%3E%3C/g%3E%3C/svg%3E");
  /* ⬆️ بني غامق (#52362A) + زيادة السماكة (0.7) + رفع الشفافية إلى 0.35 لتكون بارزة */
}

/* 🖼 الخلفية العامة */
html, body {
  background-color: var(--sugar) !important;
  background-image: var(--roman-pattern) !important;
  background-repeat: repeat !important;
  background-size: var(--pattern-size) var(--pattern-size) !important;
  background-attachment: fixed !important;
  min-height: 100%;
}

/* 🎯 إزالة أي لون أو خلفية من قائمة الرأس */
nav,
.navigation,
.site-nav,
.header-navigation {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* الروابط داخل القائمة تبقى واضحة */
nav a,
.navigation a,
.site-nav a,
.header-navigation a {
  color: #3a3a3a !important;
  font-weight: 600;
}

/* استثناء القسم الأخير (أسفل الصفحة) */
body > section:last-of-type,
body > div:last-of-type {
  background: none !important;
  background-color: var(--footer-section-bg) !important;
}

/* 🔄 إزالة أي خلفيات افتراضية */
#app, .site-wrapper, .layout, .page, .page-content {
  background: transparent !important;
  background-image: none !important;
}

/* 🧩 تطبيق الخلفية على الأقسام الرئيسية (ما عدا الأخير) */
.section:not(:last-of-type),
.s-section:not(:last-of-type),
.wrapper:not(:last-of-type),
.container:not(:last-of-type),
.page-section:not(:last-of-type),
.main-content:not(:last-of-type) {
  background-color: var(--sugar) !important;
  background-image: var(--roman-pattern) !important;
  background-repeat: repeat !important;
  background-size: var(--pattern-size) var(--pattern-size) !important;
  background-attachment: fixed !important;
}

/* الحفاظ على خلفيات البنرات الأصلية */
.hero, .banner, .main-banner {
  background-image: inherit !important;
}

/* إزالة الخلفيات من البطاقات */
.card, .card-body, .product-card, .collection-card, .widget {
  background-image: none !important;
}
====================================================
/* ===========================
   ✅ إيقاف أي حركة على الشريط/الهيدر
   =========================== */
header img,
header picture img,
nav img,
.navbar img,
.topbar img,
.announcement-bar img,
.site-header img,
.header img {
  animation: none !important;
  transform: none !important;
}

/* ===========================
   🎬 تفعيل حركة البنر (صورة ثابتة) فقط تحت الهيدر
   نعتمد :has() المدعومة بكروم الحديث
   =========================== */

/* 1) حاوية البنر داخل main (أول سكشن يحتوي صورة مباشرة) */
main > section:has(> picture > img:first-child),
main > section:has(> img:first-child) {
  position: relative;
  overflow: hidden; /* لو الصورة أعرض من الحاوية */
}

/* 2) الصورة نفسها داخل ذلك السكشن */
@keyframes pfKb {
  0%   { transform: scale(1.03) translate3d(0,0,0); }
  100% { transform: scale(1.14) translate3d(-2%,-1%,0); }
}

main > section:has(> picture > img:first-child) > picture > img:first-child,
main > section:has(> img:first-child) > img:first-child,
.page-banner img,
.page-header img,
.hero img,
.banner img,
[class*="hero"] img,
[class*="banner"] img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  transform-origin: center !important;
  will-change: transform !important;
  animation: pfKb 14s ease-in-out infinite alternate !important;
}

/* 3) احتياطي: لو البنر داخل figure */
main > section:has(> figure > img:first-child) > figure > img:first-child {
  transform-origin: center !important;
  animation: pfKb 14s ease-in-out infinite alternate !important;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  main > section:has(> picture > img:first-child) > picture > img:first-child,
  main > section:has(> img:first-child) > img:first-child,
  main > section:has(> figure > img:first-child) > figure > img:first-child,
  .page-banner img,
  .page-header img,
  .hero img,
  .banner img,
  [class*="hero"] img,
  [class*="banner"] img {
    animation: none !important;
  }
}

/* (اختياري) لو الشريط الأعلى ما زال يتأثر بصورة شعار لها alt=logo */
img[alt*="logo" i] { animation: none !important; transform: none !important; }


======================================================