/* Add custom Js styles below */
window.addEventListener('load', ()=> {

  const body = document.querySelector('body');


  /*=====================================
  FUNCTION: CELEBRITY SLIDER
  =====================================*/
  function initCelebritySlider(mountSelector) {

    const videos = [
      { id: 'kQ9zOXXm5PE', name: 'Celebrity 1' },
      { id: '4A5vKTX8dZE', name: 'Celebrity 2' },
      { id: 'icIygzCfazY', name: 'Celebrity 3' },
      { id: 'cFrtEvAYxOY', name: 'Celebrity 4' },
      { id: '_beNqQiM25M', name: 'Celebrity 5' },
      { id: 'ulesl99kkq8', name: 'Celebrity 6' }
    ];


    function loadSwiper(callback) {

      if (window.Swiper) {
        callback();
        return;
      }

      const css = document.createElement('link');
      css.rel = 'stylesheet';
      css.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';

      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';

      script.onload = callback;

      document.head.appendChild(css);
      document.head.appendChild(script);
    }


    function createSlider() {

      const mountPoint = document.querySelector(mountSelector);
      if (!mountPoint) return;

      if(document.querySelector('#celebrity-video-slider')) return;

      const container = document.createElement('div');
      container.id = 'celebrity-video-slider';

      container.innerHTML = `

<style>

#celebrity-video-slider{
position:relative;
margin:40px 0;
}

#celebrity-video-slider .video-box{

position:relative;
width:100%;
aspect-ratio:16/9;
border-radius:14px;
overflow:hidden;
background:#000;
cursor:pointer;

}

#celebrity-video-slider .video-box img,
#celebrity-video-slider iframe{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;

}

#celebrity-video-slider .play-btn{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:70px;
height:70px;
background:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
z-index:2;

}

.buttons-pagenation{

display:flex;
justify-content:center;
gap:20px;
margin-top:2.5rem;

}

.swiper-button-prev,
.swiper-button-next{

position:static!important;
width:45px;
height:45px;
background:#000;
color:#fff;
border-radius:8px;

}

.swiper-button-prev:after,
.swiper-button-next:after{

font-size:18px;

}

</style>


<div class="swiper celebrity-swiper">
<h5 style='font-weight: 800 !important;color:#71201E;text-align:center;font-size:1.5rem;margin-bottom:7.5rem;'>شوف مشاهير العالم الي جربوها 👇</h5>
<div class="swiper-wrapper">

${videos.map(video=>`

<div class="swiper-slide">

<div class="video-box" data-id="${video.id}">

<img src="https://img.youtube.com/vi/${video.id}/hqdefault.jpg" loading="lazy">

<div class="play-btn">▶</div>

</div>

</div>

`).join('')}

</div>

</div>

<div class="buttons-pagenation">

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</div>

`;

      mountPoint.after(container);


      container.querySelectorAll('.video-box').forEach(box=>{

        box.addEventListener('click',function(){

          const id=this.dataset.id;

          this.innerHTML=`
          
<iframe
src="https://www.youtube.com/embed/${id}?autoplay=1"
allow="autoplay"
allowfullscreen>
</iframe>

`;

        });

      });


      new Swiper(container.querySelector('.celebrity-swiper'),{

        slidesPerView:3,
        spaceBetween:20,
        allowTouchMove:false,

        navigation:{
          nextEl:container.querySelector('.swiper-button-next'),
          prevEl:container.querySelector('.swiper-button-prev'),
        },

        breakpoints:{
          0:{slidesPerView:1},
          640:{slidesPerView:2},
          1024:{slidesPerView:3}
        }

      });

    }

    loadSwiper(createSlider);

  }



  /*=====================================
  HOME PAGE
  =====================================*/
  if(body.classList.contains('index')){

    const sections=document.querySelectorAll('body.index section.s-block.s-block--fixed-banner');

    sections.forEach((section,index)=>{

      section.classList.add(`banner-${index+1}`);
      section.style.zIndex=`${99-index}`;

      if(index===5){

        initCelebritySlider('.banner-6');

      }
    });


  const banner2 = document.querySelector('.banner-2 img');
  banner2.src = 'https://i.ibb.co/CKV5qzQJ/Frame-1820548899-2.png';
  
  const banner3 = document.querySelector('.banner-3 img');
  banner3.src = 'https://i.ibb.co/yFJ0bfV8/Frame-1820548902-1.png';
  
  const banner4= document.querySelector('.banner-4 img');
  banner4.src = 'https://i.ibb.co/TqWbyXRr/Background-12-1-1.png';

  const banner5 = document.querySelector('.banner-5 img');
  banner5.src = 'https://i.ibb.co/PZfhgBzZ/Background-11.png';
  
  const banner6 = document.querySelector('.banner-6 img');
  banner6.src = 'https://i.ibb.co/GQyqxx54/Frame-1820548865-2-1.png';
  
  const banner7 = document.querySelector('.banner-7 img');
  banner7.src = 'https://i.ibb.co/3Yv8QMJ8/Frame-1820548861-1-1-2.png';
  
  
  // const banner8 = document.querySelector('.banner-8 img');
  // banner8.src = 'https://i.ibb.co/nsKg10Cw/Frame-1820548867-2-1.png';

  const banner13 = document.querySelector('.banner-13 img');
  banner13.src = 'https://i.ibb.co/zVtC1b42/Frame-1820548870-3-1-1.png';

  }




  /*=====================================
  PRODUCT PAGE
  =====================================*/
  if(body.classList.contains('product-single')){
    
    const location=window.location.href.split('/');
    const last=location[location.length-1];

    const clientsOpinons = `<section class="s-block s-block--photos-slider ">
    <salla-slider type="carousel" class="home-slider photos-slider s-slider-wrapper carousel-slider s-slider-has-notitle s-slider-v-centered s-slider-horizontal hydrated" centered="" auto-play="" pagination="" id="photos-11-slider" block-title="" block-subtitle="" display-all-url="" show-controls="" direction="rtl"><!----><div class="s-slider-block__title"><div class="s-slider-block__title-left"><div class="s-slider-block__title-nav" dir="rtl"><button aria-label="Previous slide" class="s-slider-prev s-slider-nav-arrow" tabindex="0" aria-controls="swiper-wrapper-225867933bc35fcc" aria-disabled="false"><span class="s-slider-button-icon"><!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>keyboard_arrow_right</title>
<path d="M11.438 22.479l6.125-6.125-6.125-6.125 1.875-1.875 8 8-8 8z"></path>
</svg>
</span></button><button aria-label="Next slide" class="s-slider-next s-slider-nav-arrow" tabindex="0" aria-controls="swiper-wrapper-225867933bc35fcc" aria-disabled="false"><span class="s-slider-button-icon"><!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>keyboard_arrow_left</title>
<path d="M20.563 22.104l-1.875 1.875-8-8 8-8 1.875 1.875-6.125 6.125z"></path>
</svg>
</span></button></div></div></div><div class="swiper s-slider-container swiper-initialized swiper-horizontal swiper-rtl swiper-ios swiper-backface-hidden" dir="rtl"> 
      
    <div class="swiper-wrapper s-slider-swiper-wrapper" id="swiper-wrapper-225867933bc35fcc" aria-live="off" style="transition-duration: 0ms; transform: translate3d(959.385px, 0px, 0px); transition-delay: 0ms;"><div class="swiper-slide swiper-slide-prev" role="group" aria-label="1 / 6">
            <a href="#">
              <img loading="eager" src="https://cdn.files.salla.network/homepage/932280209/d4c02021-2325-4bc0-8aab-67bd803e6051.webp" class="w-full object-contain rounded-md" height="300" width="1200" alt="دكتور عود - Dr.oude image-slider-0">
            </a>
          </div><div class="swiper-slide swiper-slide-active" role="group" aria-label="2 / 6">
            <a href="#">
              <img loading="eager" src="https://cdn.files.salla.network/homepage/932280209/0e19fc26-90aa-4495-9b38-707347fb3e4e.webp" class="w-full object-contain rounded-md" height="300" width="1200" alt="دكتور عود - Dr.oude image-slider-1">
            </a>
          </div><div class="swiper-slide swiper-slide-next" role="group" aria-label="3 / 6">
            <a href="#">
              <img loading="eager" src="https://cdn.files.salla.network/homepage/932280209/0d3c9540-f39a-4619-8dd0-b93b545ab05a.webp" class="w-full object-contain rounded-md" height="300" width="1200" alt="دكتور عود - Dr.oude image-slider-2">
            </a>
          </div><div class="swiper-slide" role="group" aria-label="4 / 6">
            <a href="#">
              <img loading="eager" src="https://cdn.files.salla.network/homepage/932280209/352ee602-b805-4906-8ce5-e2ae0c732f3a.webp" class="w-full object-contain rounded-md" height="300" width="1200" alt="دكتور عود - Dr.oude image-slider-3">
            </a>
          </div><div class="swiper-slide" role="group" aria-label="5 / 6">
            <a href="#">
              <img loading="eager" src="https://cdn.files.salla.network/homepage/932280209/95168b36-6900-4a77-b582-f90d8244781f.webp" class="w-full object-contain rounded-md" height="300" width="1200" alt="دكتور عود - Dr.oude image-slider-4">
            </a>
          </div><div class="swiper-slide" role="group" aria-label="6 / 6">
            <a href="#">
              <img loading="eager" src="https://cdn.files.salla.network/homepage/932280209/4b11caa0-bc3f-4905-9142-3c17feeebf81.webp" class="w-full object-contain rounded-md" height="300" width="1200" alt="دكتور عود - Dr.oude image-slider-5">
            </a>
          </div></div><div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span></div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div></salla-slider>
</section>`;

    if(last==='p1341042682'){
      /*=====================================
  IMAGE SLIDER (SAFE VERSION)
=====================================*/
function initCelebrityImageSlider(mountSelector){

  const images = [
    'https://cdn.files.salla.network/homepage/932280209/d4c02021-2325-4bc0-8aab-67bd803e6051.webp',
    'https://cdn.files.salla.network/homepage/932280209/0e19fc26-90aa-4495-9b38-707347fb3e4e.webp',
    'https://cdn.files.salla.network/homepage/932280209/0e19fc26-90aa-4495-9b38-707347fb3e4e.webp',
    'https://cdn.files.salla.network/homepage/932280209/0d3c9540-f39a-4619-8dd0-b93b545ab05a.webp',
    'https://cdn.files.salla.network/homepage/932280209/352ee602-b805-4906-8ce5-e2ae0c732f3a.webp',
    'https://cdn.files.salla.network/homepage/932280209/95168b36-6900-4a77-b582-f90d8244781f.webp',
    'https://cdn.files.salla.network/homepage/932280209/4b11caa0-bc3f-4905-9142-3c17feeebf81.webp'
  ];


  function loadSwiper(callback){

    if(window.Swiper){
      callback();
      return;
    }

    const css=document.createElement('link');
    css.rel='stylesheet';
    css.href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';

    const script=document.createElement('script');
    script.src='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
    script.onload=callback;

    document.head.appendChild(css);
    document.head.appendChild(script);

  }


  function createSlider(){

    const mountPoint=document.querySelector(mountSelector);
    if(!mountPoint) return;

    // يمنع التكرار
    if(mountPoint.nextElementSibling?.classList.contains('celebrity-image-slider')) return;

    const container=document.createElement('div');
    container.className='celebrity-image-slider';

    container.innerHTML=`

<style>

.celebrity-image-slider{
position:relative;
margin:50px 0;
}

.celebrity-image-slider .image-box{
position:relative;
width:100%;
border-radius:14px;
overflow:hidden;
background:#f5f5f5;
}

.celebrity-image-slider .image-box img{
width:100%;
height:auto;
object-fit:contain;
display:block;
}

.celebrity-image-slider .image-nav{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
}

.celebrity-image-slider .swiper-button-prev,
.celebrity-image-slider .swiper-button-next{
position:static !important;
width:45px;
height:45px;
background:#000;
color:#fff;
border-radius:8px;
}

.celebrity-image-slider .swiper-button-prev:after,
.celebrity-image-slider .swiper-button-next:after{
font-size:18px;
}

</style>

<div class="swiper celebrity-image-swiper">

<div class="swiper-wrapper">

${images.map(img=>`

<div class="swiper-slide">
<div class="image-box">
<img src="${img}" loading="lazy">
</div>
</div>

`).join('')}

</div>

</div>



`;

    mountPoint.after(container);


    new Swiper(container.querySelector('.celebrity-image-swiper'),{

      slidesPerView:3,
      spaceBetween:20,
      loop:false,
      allowTouchMove:true,

      navigation:{
        nextEl:container.querySelector('.swiper-button-next'),
        prevEl:container.querySelector('.swiper-button-prev'),
      },

      breakpoints:{
        0:{slidesPerView:1},
        640:{slidesPerView:2},
        1024:{slidesPerView:3}
      }

    });

  }

  loadSwiper(createSlider);
}

      
      const barQuantity = document.querySelector('.product-single .sticky-product-bar .sticky-product-bar__quantity');
      barQuantity.style.display = 'none';
      
      const productInfo=document.querySelector('#product-1341042682');

      // https://cdn.files.salla.network/homepage/932280209/69067733-724e-4c63-af6b-ec031ded8104.webp
//                 <section class="s-block s-block--fixed-banner wide-placeholder banner-15" style="z-index: 86;">
//     <div class="container">
//                 <a href="https://sa.droude.com/offers" class="banner banner--fixed overflow-hidden" aria-label="Banner fixed banner">
//             <picture>
//                                     <source media="(max-width: 767px)" srcset="https://cdn.files.salla.network/homepage/932280209/69067733-724e-4c63-af6b-ec031ded8104.webp">
                      
//                                 <img width="1200" height="300" src="https://i.ibb.co/gbcFPc1h/121212-1-1.png" loading="lazy" alt="fixed banner" style="height:auto;max-width:100%;object-fit: contain;" fetchpriority="high">
//             </picture>
//         </a>
//     </div>
// </section>
      // https://cdn.files.salla.network/homepage/932280209/f83e9820-592e-4327-b73c-be06f61e77bb.webp
      // https://cdn.files.salla.network/homepage/932280209/63333024-92a4-4b5b-a6da-1dbe60f92206.webp
      // https://i.ibb.co/Z6nFHs7y/Frame-1820548897-1-1-1.png
      const bannersSectionHTML=`
<section class="s-block s-block--fixed-banner wide-placeholder banner-16" style="z-index: 85;margin-top: 0rem;">
    <div class="container">
                <a href="https://sa.droude.com/offers" class="banner banner--fixed overflow-hidden" aria-label="Banner fixed banner">
            <picture>
                                    <source media="(max-width: 767px)" srcset="https://i.postimg.cc/fbxgDzZn/Frame-1820548897-(2)-(1).png">
                                <img width="1200" height="300" src="https://i.postimg.cc/fbxgDzZn/Frame-1820548897-(2)-(1).png" loading="lazy" alt="fixed banner" style="height:auto;max-width:100%;object-fit: contain;" fetchpriority="high">
            </picture>
        </a>
    </div>
</section>
<section class="s-block s-block--fixed-banner wide-placeholder banner-17" style="z-index: 84;margin-top: -4rem;">
    <div class="container">
                <a href="https://sa.droude.com/offers" class="banner banner--fixed overflow-hidden" aria-label="Banner fixed banner">
            <picture>
                                    <source media="(max-width: 767px)" srcset="https://i.ibb.co/xSg7LVMx/Frame-1820548904-1.png">
                                <img width="1200" height="300" src="https://i.ibb.co/xSg7LVMx/Frame-1820548904-1.png" loading="lazy" alt="fixed banner" style="height:auto;max-width:100%;object-fit: contain;" fetchpriority="high">
            </picture>
        </a>
    </div>
</section>
<section class="s-block s-block--fixed-banner wide-placeholder banner-19" style="z-index: 82;">
    <div class="container">
                <a href="https://sa.droude.com/offers" class="banner banner--fixed overflow-hidden" aria-label="Banner fixed banner">
            <picture>
                                    <source media="(max-width: 767px)" srcset="https://i.ibb.co/847s3XYM/Frame-1820548895-2-1-1.png">
                                <img width="1200" height="300" src="https://i.ibb.co/847s3XYM/Frame-1820548895-2-1-1.png" loading="lazy" alt="fixed banner" style="height:auto;max-width:100%;object-fit: contain;" fetchpriority="high">
            </picture>
        </a>
    </div>
</section>

<section class="s-block s-block--fixed-banner wide-placeholder banner-21" style="z-index: 80;">
    <div class="container">
                <a href="https://sa.droude.com/offers" class="banner banner--fixed overflow-hidden" aria-label="Banner fixed banner">
            <picture>
                                    <source media="(max-width: 767px)" srcset="https://i.ibb.co/nTFFRGG/Frame-1820548893-1-1.png">
                                <img width="1200" height="300" src="https://i.ibb.co/nTFFRGG/Frame-1820548893-1-1.png" loading="lazy" alt="fixed banner" style="height:auto;max-width:100%;object-fit: contain;" fetchpriority="high">
            </picture>
        </a>
    </div>
</section>
`;

      productInfo.insertAdjacentHTML('afterend',bannersSectionHTML);


      initCelebritySlider('.banner-17');
      initCelebrityImageSlider('.banner-21')

      // const sallaComments = document.querySelector('#main-content .container');
      // sallaComments.insertAdjacentHTML('afterend',clientsOpinons);

    }

  }


});


// window.addEventListener('load', () => {

//   const images = [
//     'https://b.top4top.io/p_3698ecgnz1.png',
//     'https://l.top4top.io/p_3698d2fki1.png',
//     'https://k.top4top.io/p_3698kwp391.png',
//     'https://d.top4top.io/p_3698kx3fm1.png',
//     'https://j.top4top.io/p_3698gfyu61.png',
//     'https://f.top4top.io/p_3698fkj0m1.png',
//     'https://g.top4top.io/p_3698ruqev1.png',
//     'https://i.top4top.io/p_3698hghad1.png',
//     'https://g.top4top.io/p_3698s9kwp1.png',
//     'https://f.top4top.io/p_3698snot71.png',
//     'https://l.top4top.io/p_3698j9izp1.png',
//     'https://e.top4top.io/p_3698wqeap1.png',
//     'https://h.top4top.io/p_3699qaboo1.png',
//     'https://b.top4top.io/p_36983aos51.png'
//   ];

//   const sections = document.querySelectorAll('body.index section.s-block.s-block--fixed-banner');

//   // observer
//   const observer = new IntersectionObserver((entries, obs) => {

//     entries.forEach(entry => {

//       if (entry.isIntersecting) {

//         const section = entry.target;
//         const index = section.dataset.index;
//         const img = section.querySelector('.banner--fixed img');

//         if (img && !img.dataset.loaded) {

//           img.src = images[index] || 'https://l.top4top.io/p_3698xygm21.png';
//           img.dataset.loaded = "true";

//         }

//         obs.unobserve(section);

//       }

//     });

//   }, {
//     rootMargin: "200px" // يبدأ التحميل قبل ما يظهر بشوية
//   });


//   sections.forEach((section, index) => {

//     section.classList.add(`banner-${index + 1}`);
//     section.style.zIndex = `${99 - index + 1}`;

//     section.dataset.index = index;

//     const img = section.querySelector('.banner--fixed img');

//     if (img) {
//       img.dataset.src = images[index];
//       observer.observe(section);
//     }

//   });

// });





// window.addEventListener('load', () => {

//   const images = [
//     'https://i.ibb.co/tPNVDHkc/Background-3.png',
//     'https://l.top4top.io/p_3698d2fki1.png',
//     'https://k.top4top.io/p_3698kwp391.png',
//     'https://d.top4top.io/p_3698kx3fm1.png',
//     'https://j.top4top.io/p_3698gfyu61.png',
//     'https://f.top4top.io/p_3698fkj0m1.png',
//     'https://g.top4top.io/p_3698ruqev1.png',
//     'https://i.top4top.io/p_3698hghad1.png',
//     'https://g.top4top.io/p_3698s9kwp1.png',
//     'https://f.top4top.io/p_3698snot71.png',
//     'https://l.top4top.io/p_3698j9izp1.png',
//     'https://e.top4top.io/p_3698wqeap1.png',
//     'https://h.top4top.io/p_3699qaboo1.png',
//     'https://b.top4top.io/p_36983aos51.png'
//   ];
//   const videosID = ['kQ9zOXXm5PE', 'icIygzCfazY', '4A5vKTX8dZE', 'cFrtEvAYxOY', '_beNqQiM25M', 'ulesl99kkq8'];

//   const sections = document.querySelectorAll('body.index section.s-block.s-block--fixed-banner');

  
//   // أول صورة تتحمل فوراً
//   const firstImg = sections[0]?.querySelector('img');
//   if (firstImg) firstImg.src = images[0];

//   const observer = new IntersectionObserver((entries, obs) => {

//     entries.forEach((entry, i) => {

//       // if(i === 6) {
//       //   sections[i].classList.add('before-influencers-slider');
//       //   const influencersElement = document.querySelectorAll('#best-offers-7-slider .s-products-slider-card custom-salla-product-card');
//       //   influencersElement.forEach((element, index)=>{
//       //     const video = `<iframe src="https://www.youtube.com/embed/${videosID[index]}" loading="lazy" allowfullscreen> </iframe>`;
//       //     element.replaceWith(video);
//       //   });
//       // }

// const influencersElement = document.querySelectorAll(
//   '#best-offers-7-slider .s-products-slider-card custom-salla-product-card .s-product-card-image'
// );

// influencersElement.forEach((element, index) => {

//   const iframe = document.createElement('iframe');

//   iframe.src = `https://www.youtube.com/embed/${videosID[index]}`;
//   iframe.loading = "lazy";
//   iframe.allowFullscreen = true;
//   iframe.style.width = "100%";
//   iframe.style.height = "100%";
//   iframe.style.border = "none";

//   element.replaceWith(iframe);

// });
//       if (entry.isIntersecting) {

//         const section = entry.target;
//         const index = section.dataset.index;
//         const img = section.querySelector('img');

//         if (img && !img.dataset.loaded) {

//           const newImg = new Image();
//           newImg.src = images[index];

//           newImg.onload = () => {
//             img.src = newImg.src;
//             img.dataset.loaded = "true";
//           };

//         }

//         obs.unobserve(section);

//       }

//     });

//   }, {
//     rootMargin: "300px"
//   });

//   sections.forEach((section, index) => {

//     section.classList.add(`banner-${index + 1}`);
//     section.style.zIndex = `${99 - index + 1}`;
//     section.dataset.index = index;

//     if (index !== 0) {
//       observer.observe(section);
//     }

//   });

// });