/* --- الكود الموحد والنهائي للمتجر --- */

/* 1. استهداف المتغيرات العامة بلون الخلفية الجديد (#dfaa6c) */
:root {
    --header-bg: #dfaa6c !important;
    --footer-bg: #dfaa6c !important;
    --s-color-primary: #dfaa6c !important; 
}

/* 2. تطبيق اللون على الهيدر والفوتـر (جميع العناصر والنماذج) */
header, .header, #header, .site-header, .main-header,
.header-wrapper, .site-header-wrapper, .topbar, .top-bar,
.header-top, .header-bottom,
footer, .footer, #footer, .site-footer, .main-footer,
.footer-wrapper, .site-footer-wrapper, .footer-area,
.footer-bottom, .copyrights, .s-nav-bottom { /* s-nav-bottom لشريط الجوال */
    background-image: none !important;
    background: #dfaa6c !important; 
    background-color: #dfaa6c !important;
    box-shadow: none !important;
}

/* 3. تطبيق لون النصوص والخطوط الجديد (#982e28) لضمان الوضوح على الخلفية الفاتحة */
header *, .header *, .site-header *, .main-header *,
footer *, .footer *, .site-footer *, .main-footer *,
.s-nav-bottom * {
    color: #982e28 !important; /* لون الخطوط الجديد */
    fill: #982e28 !important; /* للأيقونات */
}

/* 4. تفريغ الخلفيات الداخلية لضمان ظهور اللون الجديد */
header * , .header * , .site-header * , .main-header * ,
footer * , .footer * , .site-footer * , .main-footer * {
  background: transparent !important;
  background-color: transparent !important;
}
/* ضع هذا الكود في Custom CSS لمتجرك */
html, body {
  height: 100%;
  margin: 0;
}

body {
  /* رابط الصورة التي زودتنا بها */
  background-image: url('https://i.postimg.cc/hvsbv1VZ/zkhrft-2.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;         /* يملأ المساحة بدون تشويه */
  background-attachment: fixed !important;   /* خلفية ثابتة عند التمرير - يُعطى مظهر أفضل على سطح المكتب */
  min-height: 100vh;
  /* لون احتياطي لو لم تُحمَّل الصورة */
  background-color: #f7f3ee !important;
}

/* إذا كان لدى المتجر حاوية تغطي المساحة يجدر التأكد أنها شفافة */
#site, .site-wrapper, .page-wrapper, .main {
  background: transparent !important;
}

/* تعطيل background-attachment على الأجهزة الصغيرة لأن بعضها لا يدعمها أو يسبب مشاكل */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }
}


  /* ضع هذا الكود في Custom CSS لمتجرك */
html, body {
  height: 100%;
  margin: 0;
}

body {
  /* رابط الصورة التي زودتنا بها */
  background-image: url('https://i.postimg.cc/hvsbv1VZ/zkhrft-2.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;         /* يملأ المساحة بدون تشويه */
  background-attachment: fixed !important;   /* خلفية ثابتة عند التمرير - يُعطى مظهر أفضل على سطح المكتب */
  min-height: 100vh;
  /* لون احتياطي لو لم تُحمَّل الصورة */
  background-color: #f7f3ee !important;
}

/* إذا كان لدى المتجر حاوية تغطي المساحة يجدر التأكد أنها شفافة */
#site, .site-wrapper, .page-wrapper, .main {
  background: transparent !important;
}

/* تعطيل background-attachment على الأجهزة الصغيرة لأن بعضها لا يدعمها أو يسبب مشاكل */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }
  /* --- تهيئة المنتجات لحركة الظهور عند التمرير --- */
.product {
    opacity: 0; /* إخفاء المنتج مبدئياً */
    transform: translateY(50px); /* تحريك المنتج للأسفل قليلاً */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* تحديد مدة ونوع الحركة */
}

/* كلاس يتم إضافته عبر الجافاسكربت لجعل المنتج مرئياً */
.product.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ===== أكواد تحسينات المتجر (نسخة محدثة) ===== */

/* --- 1. تكبير شعار المتجر --- */
.s-header__logo-image {
    max-width: 200px !important;
    height: auto !important;
}

/* --- 2. تهيئة المنتجات للحركة (استهداف كلاسات متعددة) --- */
.product, .s-product-item, .product-item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease-in-out !important;
}

.product.is-visible, .s-product-item.is-visible, .product-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 3. حركة تكبير المنتج عند تمرير الماوس --- */
.product:hover, .s-product-item:hover, .product-item:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    z-index: 10;
}