/* Add custom Js code below */ 

var Slider = document.querySelector("salla-slider#main-slider-0");


// تنفيذ الكود بعد تحميل الصفحة
window.addEventListener('load', () => {
   if(window.innerWidth < 600){
   
    // تعيين تأخير 3 ثواني
    setTimeout(() => {
        // استهداف العنصر الأساسي
        const sliderElement = document.querySelector('#app > div.app-inner.flex.flex-col.min-h-full > div > div');

        // التأكد إن العنصر موجود
       if(window.location.href == "https://smartshopksa.com/" || window.location.href == "https://smartshopksa.com/ar" || window.location.href == "https://smartshopksa.com/en"){
        if (sliderElement) {
            // إنشاء عنصر جديد
            const newElement = document.createElement('div');
            
            // إضافة محتوى أو ستايل للعنصر الجديد
            newElement.innerHTML= `
            <style>
    .All_Categories{
        display: none !important;
        margin-top:30px;
        margin-bottom: -120px;
    }
    .category_item h3 {
    margin-top: 8px;
    font-size: 13px;
}
    .Categories{
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
    .Categories .category_item{
        height: 158px;
    }
    .Categories .category_item img{
        width: 100%;
        border-radius: 10px;
    }
    .Categories .category_item a{
        text-align: center;
        color: #000;
        text-decoration: none;
    }
    @media(max-width:600px) {
        .All_Categories{
            display: block !important;
        }
    }
</style>

<div class="All_Categories">
    <div class="Categories">
        <div class="category_item">
          <a href="https://smartshopksa.com/ar/category/nxpqaE">
            <img src="https://i.imgur.com/vfbpIj6.jpeg" alt="">
            <h3> التخفيضات الشهريه </h3>
          </a>
        </div>
    
        <div class="category_item">
            <a href="https://smartshopksa.com/ar/category/nzKlv">
              <img src="https://i.imgur.com/C4MLA3c.jpeg" alt="">
              <h3> اجهزة السيور  </h3>
            </a>
          </div>
    
          <div class="category_item">
            <a href="https://smartshopksa.com/ar/category/WODaj">
              <img src="https://i.imgur.com/XIVaOvo.jpeg" alt="">
              <h3> دراجات رياضية </h3>
            </a>
          </div>
    
          <div class="category_item">
            <a href="https://smartshopksa.com/ar/category/WODaj">
              <img src="https://i.imgur.com/3Xgxa1J.jpeg" alt="">
              <h3>  أوبتيكال </h3>
            </a>
          </div>
    
          <div class="category_item">
            <a href="https://smartshopksa.com/ar/category/EZWOwG">
              <img src="https://i.imgur.com/DkdkacV.jpeg" alt="">
              <h3>  هوم جيم </h3>
            </a>
          </div>
    
          <div class="category_item">
            <a href="https://smartshopksa.com/ar/category/rAnwjl">
              <img src="https://i.imgur.com/gbVUzD9.jpeg" alt="">
              <h3>  النادي المتكامل </h3>
            </a>
          </div>
    
          <div class="category_item">
            <a href="https://smartshopksa.com/ar/category/NmlwK">
              <img src="https://i.imgur.com/sJOSCY4.jpeg" alt="">
              <h3>  اثقالات حديد </h3>
            </a>
          </div>
		  
		   <div class="category_item">
            <a href="https://smartshopksa.com/category/qAbrA">
              <img src=" https://i.imgur.com/BeeGRL0.jpeg" alt="">
              <h3>  اكسسورات  </h3>
            </a>
          </div>
		  
		 
    </div>
</div>
            `;
            newElement.style.backgroundColor = '#f0f0f0';
            newElement.style.padding = '10px';
            newElement.style.border = '1px solid #ccc';

            // إدراج العنصر بعد العنصر الأساسي
            sliderElement.parentNode.insertBefore(newElement, sliderElement.nextSibling);
        } else {
            console.log('العنصر غير موجود!');
        }
       }
    }, 3000); // تأخير لمدة 3000 مللي ثانية (3 ثواني)
   
   
   
   }
});