/* Add custom CSS styles below */ 

/* 1) خلفية الهيدر (كمبيوتر + جوال) */
header,
.header,
.site-header,
.navbar,
.bg-inherit {
  background-color: #EAE4D5 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);

}

/* 2) لون نص/روابط الهيدر + الأيقونات (كمبيوتر + جوال) */
header a,
.navbar a,
.s-header a,
.s-header__nav a,
.s-header-nav a,
.top-navbar a,
.main-menu a,
.nav a,
.nav-link,
.s-menu a {
  color: #1C4D8D !important;
}

header svg,
header svg *,
.navbar svg,
.navbar svg *,
.s-header svg,
.s-header svg *,
header i,
.navbar i,
.s-header i {
  fill: #1C4D8D !important;
  stroke: #1C4D8D !important;
  color: #1C4D8D !important;
}

/* Hover (للجميع) */
header a:hover,
.navbar a:hover,
.s-header a:hover {
  color: #1C4D8D !important;
}

/* =========================================
   3) القائمة الفرعية (Dropdown) للكمبيوتر
   نفس لون القائمة الرئيسية
   ========================================= */
@media (min-width: 1024px) {

  /* خلفية القائمة الفرعية */
  html body .dropdown-menu,
  html body .sub-menu,
  html body .menu-dropdown,
  html body .nav .dropdown-menu,
  html body .main-menu .dropdown-menu,
  html body .s-header .dropdown-menu,
  html body .s-header__nav .dropdown-menu,
  html body .s-header__nav-menu .dropdown-menu,
  html body .s-header__nav-menu .sub-menu,
  html body .s-header__nav-menu .children,
  html body .s-header__dropdown,
  html body .s-header__submenu {
    background: #EAE4D5 !important; /* نفس لون الرئيسية */
    border: 0 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
  }

  /* إزالة أي خلفيات بيضاء داخلية */
  html body .dropdown-menu *,
  html body .sub-menu *,
  html body .menu-dropdown * {
    background: transparent !important;
  }

  /* لون نص وروابط القائمة الفرعية */
  html body .dropdown-menu a,
  html body .dropdown-menu span,
  html body .dropdown-menu li,
  html body .sub-menu a,
  html body .sub-menu span,
  html body .sub-menu li {
    color: #1C4D8D !important;
  }

  /* Hover داخل القائمة الفرعية */
  html body .dropdown-menu a:hover,
  html body .sub-menu a:hover {
    background: rgba(28,77,141,.10) !important; /* لمسة من الأزرق */
    color: #1C4D8D !important;
  }
}

/* 4) تكبير الشعار (للجميع) */
.navbar-brand img {
  width: 100px !important;
  max-width: 100px !important;
  height: auto !important;
  max-height: 50px !important;
  object-fit: contain;
  display: block;
}

/* تكبير الشعار أكثر في الكمبيوتر */
@media (min-width: 1024px) {
  .navbar-brand img {
    width: 100px !important;
    max-width: 100px !important;
    max-height: 50px !important;
  }
}

/* =========================================
   5) القائمة الجانبية (الهامبرغر) للجوال
   + القوائم الفرعية داخلها بنفس لون الرئيسية
   ========================================= */
@media (max-width: 1023px) {

  /* الخلفية العامة للقائمة الجانبية */
  html body .mm-menu,
  html body .mm-spn,
  html body .mm-wrapper,
  html body .mm-panel,
  html body .mm-panel_opened {
    background-color: #EAE4D5 !important; /* نفس لون الرئيسية */
  }

  /* عناصر القائمة + الفرعية داخلها */
  html body .mm-spn li,
  html body .mm-spn li a,
  html body .mm-spn li a span,
  html body .mm-spn ul,
  html body .mm-spn ul li,
  html body .mm-spn ul li a,
  html body .mm-spn ul li a span {
    background-color: transparent !important;
    color: #1C4D8D !important;
  }

  /* الأيقونات (أسهم، رجوع، إلخ) */
  html body .mm-spn svg,
  html body .mm-spn svg *,
  html body .mm-spn i {
    fill: #1C4D8D !important;
    stroke: #1C4D8D !important;
    color: #1C4D8D !important;
  }

  /* Hover / Active (لمسة زرقاء خفيفة) */
  html body .mm-spn li a:hover,
  html body .mm-spn li a:hover span,
  html body .mm-spn li.mm-active > a,
  html body .mm-spn li.mm-active > a span {
    background-color: rgba(28,77,141,.10) !important;
  }
}



/* =========================
   زر افتراضي (كمبيوتر + جوال)
   ========================= */

/* الحالة العادية */
.s-button-btn,
.s-button-element {
    background-color: #1C4D8D !important; /* الخلفية */
    color: #ffffff !important;           /* النص */
    border-color: #1C4D8D !important;
}

/* الأيقونات داخل الزر */
.s-button-btn svg,
.s-button-btn svg *,
.s-button-btn i,
.s-button-element svg,
.s-button-element svg *,
.s-button-element i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* =========================
   Hover (كمبيوتر) + Active (جوال)
   ========================= */
.s-button-btn:hover,
.s-button-btn:active,
.s-button-element:hover,
.s-button-element:active {
    background-color: #ffffff !important; /* خلفية عند التفاعل */
    color: #1C4D8D !important;            /* لون النص */
    border-color: #1C4D8D !important;
}

/* تغيير لون الأيقونة عند التفاعل */
.s-button-btn:hover svg,
.s-button-btn:hover svg *,
.s-button-btn:active svg,
.s-button-btn:active svg *,
.s-button-btn:hover i,
.s-button-btn:active i,
.s-button-element:hover svg,
.s-button-element:hover svg *,
.s-button-element:active svg,
.s-button-element:active svg *,
.s-button-element:hover i,
.s-button-element:active i {
    color: #1C4D8D !important;
    fill: #1C4D8D !important;
    stroke: #1C4D8D !important;
}


.s-product-card-promotion-title {
    background-color: #B6B09F !important;
    color: #ffffff !important; /* أزرقك */
}







/* فريم خفيف لكل بطاقة منتج */
/* =========================
   صندوق واحد للمنتج كامل
   ========================= */

/* ===== إطار واحد أزرق يلف الصورة + المحتوى + الزر ===== */
html body .s-product-card,
html body .s-product-card-wrapper,
html body .s-product-card-entry,
html body .s-product-card-inner {
  border: 1px solid #EAE4D5 !important;   /* الفريم الأزرق */
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* إزالة أي حدود داخلية حتى لا يطلع الفريم مقطّع */
html body .s-product-card-image,
html body .s-product-card-content,
html body .s-product-card-footer,
html body .s-product-card-actions {
  border: 0 !important;
}

/* ضمان أن الصورة تلتزم بحدود الصندوق */
html body .s-product-card-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

/* (اختياري) تأثير عند المرور */
html body .s-product-card:hover,
html body .s-product-card-wrapper:hover,
html body .s-product-card-entry:hover,
html body .s-product-card-inner:hover {
  transform: translateY(-2px);
  transition: all .25s ease;
}




/* ===== Footer: خلفية زرقاء + نص وأيقونات بيضاء ===== */

/* خلفية الفوتر كاملة */
.store-footer,
.store-footer__inner,
.footer-is-light .store-footer .store-footer__inner {
    background-color: #123249 !important;
    border: none !important;
}

/* جميع النصوص داخل الفوتر */
.store-footer,
.store-footer p,
.store-footer span,
.store-footer a,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer h5,
.store-footer h6 {
    color: #ffffff !important;
}

/* الأيقونات (SVG / i) */
.store-footer svg,
.store-footer svg *,
.store-footer i {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* روابط الفوتر عند المرور */
.store-footer a:hover {
    opacity: 0.85;
    color: #ffffff !important;
}








/* 1) اجعل زر المفضلة ظاهر دائمًا */
/* =========================
   زر المفضلة (Wishlist)
   شفاف + أيقونة زرقاء
   ممتلئ عند التفعيل
   ========================= */

/* إظهار الزر دائمًا */
.s-product-card-vertical .s-product-card-wishlist-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* الحالة العادية (بدون خلفية) */
.s-product-card-vertical .s-product-card-wishlist-btn button,
.s-product-card-vertical .s-product-card-wishlist-btn .s-button-btn,
.s-product-card-vertical .s-product-card-wishlist-btn .s-button-element {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;     /* دائري */
  background-color: transparent !important; /* بدون خلفية */
  border: 1px solid rgba(17,70,127,0.35) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* أيقونة القلب (الحالة العادية) */
.s-product-card-vertical .s-product-card-wishlist-btn svg,
.s-product-card-vertical .s-product-card-wishlist-btn svg *,
.s-product-card-vertical .s-product-card-wishlist-btn i {
  fill: #11467f !important;   /* أزرق */
  stroke: #11467f !important;
  color: #11467f !important;
}

/* Hover (لمسة خفيفة) */
.s-product-card-vertical .s-product-card-wishlist-btn button:hover {
  background-color: rgba(17,70,127,0.08) !important;
}

/* =========================
   حالة التفعيل (مضاف للمفضلة)
   ========================= */
.s-product-card-vertical .s-product-card-wishlist-btn button.is-active,
.s-product-card-vertical .s-product-card-wishlist-btn button.active,
.s-product-card-vertical .s-product-card-wishlist-btn button[aria-pressed="true"] {
  background-color: #11467f !important; /* ممتلئ أزرق */
  border-color: #11467f !important;
}

/* أيقونة القلب عند التفعيل */
.s-product-card-vertical .s-product-card-wishlist-btn button.is-active svg,
.s-product-card-vertical .s-product-card-wishlist-btn button.is-active svg *,
.s-product-card-vertical .s-product-card-wishlist-btn button[aria-pressed="true"] svg,
.s-product-card-vertical .s-product-card-wishlist-btn button[aria-pressed="true"] svg * {
  fill: #ffffff !important;   /* أبيض */
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* =========================
   تفاعل اللمس فقط (Active)
   ========================= */
.s-product-card-vertical .s-product-card-wishlist-btn button:active {
  background-color: #11467f !important; /* ممتلئ أزرق */
  border-color: #11467f !important;
}

.s-product-card-vertical .s-product-card-wishlist-btn button:active svg,
.s-product-card-vertical .s-product-card-wishlist-btn button:active svg *,
.s-product-card-vertical .s-product-card-wishlist-btn button:active i {
  fill: #ffffff !important; /* أيقونة بيضاء */
  stroke: #ffffff !important;
  color: #ffffff !important;
}
/* ===== Touch/Active: عند اللمس يتحول ممتلئ أزرق + القلب أبيض ===== */
html body .s-product-card-vertical .s-product-card-wishlist-btn button:active,
html body .s-product-card-vertical .s-product-card-wishlist-btn button:focus:active {
  background: #11467f !important;
  background-color: #11467f !important;
  border-color: #11467f !important;
}

/* أيقونة القلب عند اللمس */
html body .s-product-card-vertical .s-product-card-wishlist-btn button:active svg,
html body .s-product-card-vertical .s-product-card-wishlist-btn button:active svg *,
html body .s-product-card-vertical .s-product-card-wishlist-btn button:active i,
html body .s-product-card-vertical .s-product-card-wishlist-btn button:active path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* حركة بسيطة عند اللمس */
html body .s-product-card-vertical .s-product-card-wishlist-btn button{
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
html body .s-product-card-vertical .s-product-card-wishlist-btn button:active{
  transform: scale(0.95);
}

@media (max-width: 768px){

  /* تنسيق الشبكة: عمودين */
  .s-block--banners .grid,
  .s-block--banners .grid-cols-2,
  .s-block--banners .grid-cols-1{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* تنسيق الحاوية */
  .s-block--banners .banner-entry{
    /* ✅ هنا السر: ضعي أرقام أبعاد صورتك الحقيقية */
    /* الرقم الأول هو العرض، والثاني هو الطول. مثال: 2/1 يعني العرض ضعف الطول */
    aspect-ratio: 2 / 1 !important; 
    
    height: auto !important; /* يسمح للارتفاع بالتغير تلقائياً حسب النسبة */
    background-color: transparent !important; /* إخفاء لون الخلفية */
    box-shadow: none !important; /* إزالة أي ظل أو إطار خارجي */
    border: none !important; /* إزالة الحدود */
    border-radius: 12px;
    overflow: hidden;
  }

  /* تنسيق الصورة */
  .s-block--banners .lazy__bg{
    background-size: contain !important; /* عرض الصورة كاملة */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ✅ هذا الكود مخصص للويب والتابلت والشاشات الكبيرة */
@media (min-width: 769px) {

  .s-block--banners .grid,
  .s-block--banners .grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* صورتين بجانب بعض */
    gap: 20px !important; /* مسافة بين الصورتين */
  }

  .s-block--banners .banner-entry {
    /* 👇 (مهم جداً) غيري الأرقام هنا لمقاس صورتك الحقيقي */
    /* مثلاً لو صورتك عرضها 1000 وطولها 300 اكتبي: 1000 / 300 */
    aspect-ratio: 3 / 1 !important; 
    
    width: 100% !important;
    height: auto !important;
    background-color: transparent !important; /* يزيل الخلفية الرمادية/البيضاء */
    border: none !important;
    box-shadow: none !important;
  }

  .s-block--banners .lazy__bg {
    /* cover: يجبر الصورة تغطي كامل المكان بدون فراغات */
    background-size: cover !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
  }
}


/* تقليل المسافة بين كل الأقسام */
section {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}



/* --- 1. إعدادات الشبكة (توزيع الأعمدة) --- */

/* الإعداد العام وشاشات الموبايل */
.grid.md\:grid-cols-3.two-row {
    display: grid !important;
    /* في الموبايل يفضل عمودين أو ثلاثة لتكون الصور واضحة */
    grid-template-columns: repeat(6, 1fr) !important; 
    gap: 2px !important;
}

/* إعدادات شاشات الكمبيوتر (6 أعمدة كما في الصورة) */
@media (min-width: 768px) {
    .grid.md\:grid-cols-3.two-row {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 30px !important;
    }
}

/* --- 2. إزالة الخلفية وتصحيح حجم الإطار (الجزء الجديد) --- */

/* هذا الكود يستهدف العنصر داخل الشبكة لإزالة اللون الرمادي وضبط الطول */
.grid.md\:grid-cols-3.two-row a,
.grid.md\:grid-cols-3.two-row .banner-entry {
    background-color: transparent !important; /* إزالة الخلفية الرمادية */
    background: none !important;
    box-shadow: none !important; /* إزالة أي إطار أو ظل */
    
    /* جعل الإطار مربعاً ليناسب الصور الدائرية ويلغي المساحة الفارغة الطويلة */
    aspect-ratio: 1 / 1 !important; 
    height: auto !important;
    min-height: 0 !important;
}