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

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

/* --- توحيد المسافات بين الأقسام (Global Spacing) --- */

/* استهداف جميع بلوكات وأقسام المتجر */
.s-block, section {
    margin-bottom: 10px !important; /* تحديد المسافة السفلية بـ 10 بيكسل فقط */
    margin-top: 0 !important;       /* إلغاء أي مسافة علوية لمنع التضاعف */
    padding-top: 10px !important;    /* تقليل الحشو الداخلي العلوي */
    padding-bottom: 10px !important; /* تقليل الحشو الداخلي السفلي */
}

/* في حال كان هناك حاوية رئيسية تستخدم Flexbox (شائع في سلة) */
.content-wrapper, #main-content {
    gap: 10px !important; /* فرض مسافة 10 بيكسل بين العناصر */
}

/* إزالة المسافات الزائدة الخاصة ببعض البنرات العريضة */
.s-block--fixed-banner {
    margin-bottom: 10px !important;
}

/* ================================================== */
/* === كود شامل: تنسيق 2 في الصف + إزالة الخلفية الرمادية === */
/* ================================================== */

/* --- 1. إعدادات الشبكة (2 في الصف للكل) --- */
.s-block--banners .grid,
.grid.md\:grid-cols-2.two-row,
.grid.two-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* عمودين إجباري */
    grid-auto-flow: row !important; /* النزول لسطر جديد */
    gap: 15px !important; /* المسافة بين الصور */
    overflow: visible !important;
    
    /* تنظيف الحاوية الأم */
    padding: 0 !important; 
    margin: 0 !important;
    background: transparent !important;
}

/* --- 2. تنظيف إطار الصورة وجعله "ماكس" --- */
.s-block--banners .banner-entry,
.grid.md\:grid-cols-2.two-row .banner-entry,
.grid.two-row .banner-entry,
.grid.two-row a.banner-entry {
    /* الحفاظ على نسبة العرض للطول (1280x548) */
    aspect-ratio: 1280 / 548 !important;
    
    width: 100% !important;
    height: auto !important;
    
    /* --- الأوامر الحاسمة لإزالة الخلفية والفراغات --- */
    background: transparent !important; /* خلفية شفافة */
    background-color: transparent !important;
    box-shadow: none !important; /* بدون ظل */
    border: none !important; /* بدون إطار */
    padding: 0 !important; /* بدون حشوة داخلية (سبب الفراغ) */
    margin: 0 !important; /* بدون هوامش خارجية */
    border-radius: 8px !important; /* (اختياري) تدوير الحواف */
    overflow: hidden !important; /* لضمان عدم خروج الصورة */
}

/* --- 3. تمديد الصورة الداخلية لتغطية الإطار بالكامل --- */
.s-block--banners .banner-entry .lazy-bg,
.grid.two-row .banner-entry .lazy-bg {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important; /* تعبئة كاملة بدون فراغ */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- 4. إعدادات الجوال (2 في الصف + تقليل المسافة) --- */
@media (max-width: 767px) {
    .s-block--banners .grid,
    .grid.md\:grid-cols-2.two-row,
    .grid.two-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 5px !important; /* مسافة جانبية بسيطة للشاشة */
    }
}
/* ================================================== */
/* === تغيير أيقونة تصنيف محدد (كرر الكود لكل تصنيف) === */
/* ================================================== */

/* 1. استبدل كلمة (face-care) بجزء مميز من رابط التصنيف الخاص بك */
/* هذا الجزء يخفي الأيقونة الأصلية القديمة */
a[href*="face-care"] .slide--cat-icon i,
a[href*="face-care"] .slide--cat-icon svg {
    visibility: hidden !important; /* إخفاء وليس حذف للحفاظ على المساحة */
    opacity: 0 !important;
}

/* 2. وضع الأيقونة الجديدة كخلفية */
a[href*="face-care"] .slide--cat-icon {
    /* ضع رابط صورتك أو الـ SVG هنا */
    background-image: url('https://example.com/your-new-icon.svg') !important;
    
    /* تنسيق الصورة لتظهر في المنتصف */
    background-size: 50% !important; /* كبر أو صغر الرقم للتحكم بحجم الأيقونة */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* (اختياري) تغيير لون الخلفية الدائرية إذا رغبت */
    /* background-color: #f0f0f0 !important; */ 
}




/* ===============================
   زر إضافة للسلة – مثل الصورة
   =============================== */

/* ===============================
   زر إضافة للسلة - نسخة نهائية
   =============================== */

/* كرت المنتج يكون مرجع */
.s-product-card,
.s-product-card-vertical {
  position: relative !important;
}

/* الزر */
.s-product-card button.s-button-element.s-button-btn,
.s-product-card-vertical button.s-button-element.s-button-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;

  background-color: #f06292 !important; /* اللون الأساسي */
  border: none !important;

  /* تموضع ثابت ومتساوي */
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;       /* غيّرها right إذا تبي */
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;

  box-shadow: 0 6px 16px rgba(0,0,0,.2) !important;
  transition: all .2s ease !important;
  z-index: 10 !important;

  /* إخفاء النص */
  font-size: 0 !important;
}

/* الأيقونة داخل الزر (بيضاء دائمًا) */
.s-product-card button.s-button-element svg,
.s-product-card button.s-button-element svg *,
.s-product-card button.s-button-element i,
.s-product-card-vertical button.s-button-element svg,
.s-product-card-vertical button.s-button-element svg *,
.s-product-card-vertical button.s-button-element i {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  font-size: 18px !important;
}

/* Hover (كمبيوتر فقط) */
@media (hover: hover) {
  .s-product-card button.s-button-element:hover,
  .s-product-card-vertical button.s-button-element:hover {
    background-color: #ec407a !important;
    box-shadow: 0 10px 22px rgba(236,64,122,.45) !important;
    transform: translateY(-50%) scale(1.05) !important;
  }
}

/* Active / Touch (جوال + كمبيوتر) */
.s-product-card button.s-button-element:active,
.s-product-card-vertical button.s-button-element:active {
  background-color: #c2185b !important;
  transform: translateY(-50%) scale(0.9) !important;
}

/* حالة التفعيل (مضاف للسلة) */
.s-product-card button.s-button-element.is-active,
.s-product-card button.s-button-element[aria-pressed="true"],
.s-product-card-vertical button.s-button-element.is-active,
.s-product-card-vertical button.s-button-element[aria-pressed="true"] {
  background-color: #ad1457 !important;
}

/* الأيقونة عند التفعيل */
.s-product-card button.s-button-element.is-active svg,
.s-product-card button.s-button-element.is-active svg *,
.s-product-card-vertical button.s-button-element.is-active svg,
.s-product-card-vertical button.s-button-element.is-active svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}



/* ===============================
   الحالة العادية (ممتلئ)
   =============================== */
.s-product-card button.s-button-element,
.s-product-card-vertical button.s-button-element {
  background-color: #f06292 !important; /* لون الزر */
  border: 2px solid #f06292 !important;
}

/* الأيقونة عادية */
.s-product-card button.s-button-element svg,
.s-product-card button.s-button-element svg *,
.s-product-card-vertical button.s-button-element svg,
.s-product-card-vertical button.s-button-element svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ===============================
   عند اللمس فقط (بدون خلفية)
   =============================== */
.s-product-card button.s-button-element:active,
.s-product-card-vertical button.s-button-element:active {
  background-color: transparent !important; /* إزالة الخلفية */
  border: 2px solid #f06292 !important;      /* إبقاء الإطار */
}

/* الأيقونة عند اللمس */
.s-product-card button.s-button-element:active svg,
.s-product-card button.s-button-element:active svg *,
.s-product-card-vertical button.s-button-element:active svg,
.s-product-card-vertical button.s-button-element:active svg * {
  fill: #f06292 !important;
  stroke: #f06292 !important;
  color: #f06292 !important;
}






/* تكبير شعار الهيدر */
.navbar-brand img {
    width: 200px !important;     /* عرض الشعار */
    max-width: 200px !important;
    height: auto !important;     /* يحافظ على النسبة */
    max-height: 80px !important; /* ارتفاع مناسب */
    object-fit: contain;
}




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

/* خلفية الفوتر كاملة */
.store-footer,
.store-footer__inner,
.footer-is-light .store-footer .store-footer__inner {
    background-color: #42333f !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;
}




/* =========================
   استبدال أيقونات "مميزات المتجر"
   إخفاء القديمة 100% + إظهار الجديدة فقط
   ========================= */
/* =========================
   مميزات المتجر – دائرة + أيقونة (توسيط مثالي)
   ========================= */

/* إخفاء أيقونات القالب القديمة */
.s-block--features__item img,
.s-block--features__item svg,
.s-block--features__item i,
.s-block--features__item .icon,
.s-block--features__item [class*="icon"]{
  display: none !important;
}

/* إعداد الكرت */
.s-block--features__item{
  position: relative !important;
  padding-top: 100px; /* مساحة فوق للنقطة الدائرية */
}

/* الدائرة */
.s-block--features__item::before{
  content:"";
  width:72px;
  height:72px;
  border-radius:50%;
  background:#8f2486;        /* لون الدائرة */
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
}

/* الأيقونة (بيضاء ومتمركزة داخل الدائرة) */
.s-block--features__item::after{
  content:"";
  width:32px;
  height:32px;
  position:absolute;
  top:56px;                  /* منتصف الدائرة تقريبًا */
  left:50%;
  transform:translate(-50%, -50%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: brightness(0) invert(1); /* أبيض */
  pointer-events:none;
}

/* أيقونة لكل كرت */
.s-block--features__item:nth-child(1)::after{
  
  background-image:url("https://cdn-icons-png.flaticon.com/512/3064/3064197.png"); /* تسوق آمن */
}
.s-block--features__item:nth-child(2)::after{
  background-image:url("https://cdn-icons-png.flaticon.com/512/456/456212.png");  /* خدمة العملاء */
}
.s-block--features__item:nth-child(3)::after{
  background-image:url("https://cdn-icons-png.flaticon.com/512/1040/1040230.png"); /* شحن */
}






/* ===============================
   FIX: إرجاع القائمة في الديسكتوب
   + منع التكرار والنزول
   =============================== */
@media (min-width: 1024px){

  /* 1) رجّع إظهار حاوية القائمة */
  nav.mobile-menu,
  #mobile-menu,
  .main-menu,
  .main-menu.menu,
  ul.main-menu {
    display: flex !important;
    align-items: center !important;
  }

  /* 2) ألغِ أي إخفاء للـ mmenu لأنه قد يكون هو نفس القائمة عندك */
  .mm-spn,
  .mm-menu {
    display: block !important;
  }

  /* 3) اخفاء عناصر الموبايل داخل القائمة فقط (اللي تسبب تكرار) */
  .main-menu .lg\:hidden,
  .main-menu li.lg\:hidden {
    display: none !important;
  }

  /* 4) خلي القائمة سطر واحد */
  ul.main-menu {
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }

  /* 5) إصلاح نزول النص (إلغاء padding-bottom الكبير) */
  .main-menu li.root-level > a,
  .main-menu.menu li.root-level > a {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* 6) منع التفاف النص */
  .main-menu li > a {
    white-space: nowrap !important;
    line-height: 1.2 !important;
    padding: 0.75rem 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}