/* Add custom CSS styles below */ 
/* ===============================
   DEVICE VISIBILITY CONTROL
================================ */
@media (min-width: 768px) {
  .desktop-only { display: block !important; }
}
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
}

.mobile-only { display: none !important; }
@media (max-width: 767px) {
  .mobile-only { display: block !important; }
}


/* ===============================
   PRODUCT CARD LOOK (LIKE الصورة المرتبة)
================================ */
.s-products-list-wrapper .product-card{
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
}

/* مساحة داخلية للكرت */
.s-products-list-wrapper .product-card__content{
  padding: 10px 12px 12px !important;
}

/* صورة المنتج: نفس القياس + ما تكبر وتخرب */
.s-products-list-wrapper .product-card__image a,
.s-products-list-wrapper .product-card__image{
  background: #fff !important;
}

.s-products-list-wrapper .product-card__image img{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;   /* يخلي كل الصور مربعة */
  object-fit: contain !important;    /* يمنع القص والتكبير الغريب */
  padding: 14px !important;
  background: #fff !important;
}


/* ===============================
   ADD TO CART BUTTON (SCOPE ONLY)
   يطبق فقط على زر "إضافة للسلة"
================================ */

/* 1) نخفي أيقونات السلة/+ داخل زر الإضافة فقط */
.product-card__addToCart .sicon-shopping,
.product-card__enhanced-mini-cart .sicon-add,
.product-card__enhanced-mini-cart .enhanced-icon,
.product-card__enhanced-mini-cart .sicon-shopping{
  display: none !important;
}

/* 2) توسيط النص داخل زر الـ enhanced mini cart */
.product-card__enhanced-mini-cart__btn--inner{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
}
.product-card__enhanced-mini-cart__btn--inner span{
  margin: 0 !important;
}

/* 3) ستايل زر الإضافة (أسود + عريض + نفس الشكل) */
.product-card__addToCart .s-button-element,
.product-card__enhanced-mini-cart .s-button-element{
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  width: 100% !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 0 !important;
}

/* 4) لون النص داخل زر الإضافة */
.product-card__addToCart .s-button-element .s-button-text,
.product-card__enhanced-mini-cart .s-button-element .s-button-text,
.product-card__enhanced-mini-cart .enhanced-label{
  color: #fff !important;
  font-weight: 700 !important;
}

/* 5) Hover للزر */
@media (hover:hover){
  .product-card__addToCart .s-button-element:hover,
  .product-card__enhanced-mini-cart .s-button-element:hover{
    background: #111 !important;
    border-color: #111 !important;
  }
}

/* 6) على الجوال: شوي تحسين */
@media (max-width: 767px){
  .product-card__addToCart .s-button-element,
  .product-card__enhanced-mini-cart .s-button-element{
    min-height: 50px !important;
    font-size: 14px !important;
  }
}


/* ===============================
   WISHLIST (HEART) BLACK
   يخلي زر المفضلة أسود + hover جميل
================================ */
.product-card .btn--wishlist.s-button-element{
  border-color: #000 !important;
}

.product-card .btn--wishlist .sicon-heart{
  color: #000 !important;
}

/* hover: الخلفية سوداء والقلب أبيض */
@media (hover:hover){
  .product-card .btn--wishlist.s-button-element:hover{
    background: #000 !important;
  }
  .product-card .btn--wishlist.s-button-element:hover .sicon-heart{
    color: #fff !important;
  }
}

/* لو صار Favorited (أحياناً تتغير الكلاسات) */
.product-card .favorited .sicon-heart,
.product-card .is-favorited .sicon-heart,
.product-card .added .sicon-heart{
  color: #000 !important;
}
/* ===============================
   ADD TO CART BUTTON SIZE CONTROL
   =============================== */

/* الزر نفسه */
button.s-button-element[product-id]{
  width: 100% !important;      /* العرض (خلّه كامل الكرت) */
  height: 40px !important;     /* الطول – عدل الرقم لو تبي */
  padding:  !important;       /* نلغي padding الافتراضي */
  
  background:#000 !important;
  color:#fff !important;
  border-radius:8px !important;
  
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:15px !important;
  font-weight:600 !important;
  line-height:1 !important;
}

/* النص داخل الزر */
button.s-button-element[product-id] .s-button-text{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100%;
  height:100%;
}

/* حذف أيقونة السلة */
button.s-button-element[product-id] svg,
button.s-button-element[product-id] i{
  display:none !important;
}

/* Hover */
button.s-button-element[product-id]:hover{
  background:#222 !important;
}
/* =========================
  كود اعلى تمام بدون تعديل -يونس 
========================= */
/* =========================================
   Lebonheur Tabs Final (MOBILE ONLY)
   Scope: featured-products-style2-8
========================================= */

/* ✅ اخفاء التابات على الكمبيوتر (أقوى استهداف) */
@media (min-width: 768px){
  section#featured-products-style2-8 .tabs.hide-scroll{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
}

/* ✅ الجوال فقط */
@media (max-width: 767px){

  /* اخفاء أي خط تحت التبويبات */
  section#featured-products-style2-8 .tabs.hide-scroll::after,
  section#featured-products-style2-8 .tabs.hide-scroll .tab-trigger::after,
  section#featured-products-style2-8 .tabs.hide-scroll .tab-trigger.is-active::after,
  section#featured-products-style2-8 .tabs.hide-scroll .s-tabs-header-item::after{
    display:none !important;
    content:none !important;
  }

  /* ترتيب التابات + العنوان */
  section#featured-products-style2-8 .tabs.hide-scroll{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
    flex-wrap:wrap !important;
    padding:10px 0 14px !important;
  }

  section#featured-products-style2-8 .tabs.hide-scroll::before{
    content:"اختيارات لابونير";
    display:block;
    width:100%;
    text-align:center;
    font-size:22px;
    font-weight:800;
    color:#111;
    margin:0 0 12px !important;
  }

  /* شكل الزر */
  section#featured-products-style2-8 .tabs.hide-scroll .s-button-element{
    border-radius:14px !important;
    padding:10px 18px !important;
    border:1px solid rgba(0,0,0,.10) !important;
    background:#fff !important;
    box-shadow:0 6px 14px rgba(0,0,0,.08) !important;
    transition:all .25s ease !important;
  }

  section#featured-products-style2-8 .tabs.hide-scroll .s-button-text{
    font-size:14px !important;
    font-weight:800 !important;
    color:#111 !important;
  }

  /* Active */
  section#featured-products-style2-8 .tabs.hide-scroll .tab-trigger.is-active .s-button-element{
    background:#111 !important;
    border-color:#111 !important;
    box-shadow:0 10px 22px rgba(0,0,0,.22) !important;
  }
  section#featured-products-style2-8 .tabs.hide-scroll .tab-trigger.is-active .s-button-text{
    color:#fff !important;
  }

  /* Hover */
  section#featured-products-style2-8 .tabs.hide-scroll .tab-trigger:not(.is-active) .s-button-element:hover{
    box-shadow:0 10px 20px rgba(0,0,0,.12) !important;
    transform:translateY(-1px);
  }

  /* زر 1 = الأكثر مبيعًا */
  section#featured-products-style2-8 .tabs.hide-scroll > salla-button:nth-child(1) .s-button-text{
    font-size:0 !important;
  }
  section#featured-products-style2-8 .tabs.hide-scroll > salla-button:nth-child(1) .s-button-text::after{
    content:"الأكثر مبيعًا";
    font-size:14px;
    font-weight:800;
    color:inherit;
  }

  /* زر 2 = جديد */
  section#featured-products-style2-8 .tabs.hide-scroll > salla-button:nth-child(2) .s-button-text{
    font-size:0 !important;
  }
  section#featured-products-style2-8 .tabs.hide-scroll > salla-button:nth-child(2) .s-button-text::after{
    content:"جديد";
    font-size:14px;
    font-weight:800;
    color:inherit;
  }
}
/* ===============================
   HIDE SECTION ON PC – SHOW ON MOBILE ONLY
   Section ID: featured-products-style2-8
================================ */

/* PC & Tablet */
@media (min-width: 768px){
  section#featured-products-style2-8{
    display: none !important;
  }
}

/* Mobile only */
@media (max-width: 767px){
  section#featured-products-style2-8{
    display: block !important;
  }
}