document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.js-store-grid-cont');

    containers.forEach((container) => {
      const parent = container.closest('[class*="uc-slider-shop"]');
      if (parent) {
        container.addEventListener('tStoreRendered', () => initializeSwiper(container, parent));
      }
    });

    function initializeSwiper(container, parent) {
      const slides = container.querySelectorAll('.js-product');

      container.classList.add('swiper');
      const wrapper = document.createElement('div');
      wrapper.classList.add('swiper-wrapper');

      slides.forEach((slide) => {
        slide.classList.add('swiper-slide');
        wrapper.appendChild(slide);
      });

      container.innerHTML = '';
      container.appendChild(wrapper);

      const dbmNextButton = document.createElement('div');
      dbmNextButton.classList.add('swiper-button-next-dbm');
      const dbmPrevButton = document.createElement('div');
      dbmPrevButton.classList.add('swiper-button-prev-dbm');
      const pagination = document.createElement('div');
      pagination.classList.add('swiper-pagination-dbm');
      
      container.appendChild(dbmNextButton);
      container.appendChild(dbmPrevButton);
      container.appendChild(pagination);

      // Основные параметры по умолчанию (если нет дополнительных слайдеров)
      let swiperConfig = {
        loop: false, //Бесконечная галлерея, если true – то бесконечная прокрутка слайдов
        navigation: {
          nextEl: dbmNextButton,
          prevEl: dbmPrevButton,
        },
        pagination: {
          el: pagination,
          clickable: true,
          type: 'bullets',
        },
        autoplay: {
          delay: 2000,  //Время до пролистывания слайдов
          disableOnInteraction: false, //если нужно остановить автопролистывание после ручного переключения слайдов, то напишите true
        },
        effect: 'slide',
        speed: 400, //Скорость пролистывания слайдов
        slidesPerView: 6,   //Количество карточек на экране
        spaceBetween: 20,   //Отступ между карточками
        slidesPerGroup: 1, //Пролистывание слайдов за раз
        breakpoints: {
        320: {
            slidesPerView: 1,   
            slidesPerGroup: 1, 
          },       
         480: {
            slidesPerView: 2,
            slidesPerGroup: 1, 
          },
        640: {
            slidesPerView: 2,
            slidesPerGroup: 1, 
          },
        768: {
            slidesPerView: 3,
            slidesPerGroup: 1, 
          },
        1000: {
            slidesPerView: 4,
            slidesPerGroup: 1, 
        },
        1360: {
            slidesPerView: 5,
            slidesPerGroup: 1, 
         },
         1920: {
            slidesPerView: 6,   
            slidesPerGroup: 1, 
         }
        }
      };

      // Настройки для слайдера с классом uc-slider-shop-1
      if (parent.classList.contains('uc-slider-shop-1')) {
        swiperConfig.breakpoints = {
            320: {
                slidesPerView: 1,   //Количество карточек на экране
                slidesPerGroup: 1, //пролистывание слайдов за раз
              },       
             480: {
                slidesPerView: 2,
                slidesPerGroup: 1, 
              },
            640: {
                slidesPerView: 2,
                slidesPerGroup: 1, 
              },
            768: {
                slidesPerView: 3,
                slidesPerGroup: 1, 
              },
            1000: {
                slidesPerView: 4,
                slidesPerGroup: 1, 
            },
            1360: {
                slidesPerView: 5,
                slidesPerGroup: 1, 
             },
             1920: {
                slidesPerView: 4,   
                slidesPerGroup: 2, 
             }
        };
      }

      // Вы можете добавить аналогичные условия для uc-slider-2, uc-slider-3, и так далее.
      // Например:
      // if (parent.classList.contains('uc-slider-shop-3')) {
      //   // какие-то  настройки для uc-slider-shop-3
      // }

      const swiper = new Swiper(container, swiperConfig);

      function updateBullets() {
        const bullets = pagination.querySelectorAll('.swiper-pagination-bullet');
        bullets.forEach((bullet) => {
          bullet.style.setProperty('--animation-duration', `${swiperConfig.autoplay.delay}ms`);
        });
      }

      swiper.on('slideChange', () => {
        updateBullets();
      });

      swiper.on('paginationUpdate', () => {
        updateBullets();
      });

      swiper.on('init', () => {
        updateBullets();
      });

      pagination.addEventListener('click', (event) => {
        if (event.target.classList.contains('swiper-pagination-bullet')) {
          const bullets = Array.from(pagination.querySelectorAll('.swiper-pagination-bullet'));
          const index = bullets.indexOf(event.target);
          swiper.slideToLoop(index);
        }
      });

      window.addEventListener('resize', () => swiper.update());

      swiper.init();
    }

    containers.forEach((container) => {
      const event = new Event('tStoreRendered');
      container.dispatchEvent(event);
    });
  });
 
:root{
    /*Общие стили*/
    --dbmPaddingSliderDesktop: 40px;    /*Отступы от края экрана на декстопе*/
    --dbmPaddingSliderTablet: 20px;     /*Отступы от края экрана на планшетах*/
    --dbmPaddingSliderMobile: 10px;     /*Отступы от края экрана на мобилках*/
    --dbmIconArrowPrev: url(https://static.tildacdn.com/tild6162-3263-4135-b334-346562393036/arrow-prev.svg);   /*Иконка "предыдущий слайд"*/
    --dbmIconArrowNext: url(https://static.tildacdn.com/tild3637-3632-4531-a432-633034666565/arrow-next.svg);   /*Иконка "следующий слайд"*/
    --dbmBorderRadiusArrow: 12px; /*Скругление углов у стрелок*/
    --dbmWidthHeightArrow: 40px;  /*Ширина и высота иконки*/
    --dbmGapSlider: 20px; /*Отступ между карточками товаров*/
    
    
    /*Стили для буллетов*/
    --dbmBackgroundBullet: #cecece; /*Фоновый цвет*/
    --dbmGapBullet: 5px; /*Отступы вокруг*/
    --dbmBorderRadiusBullet: 100px; /*Скругление углов*/
    --dbmHeightBullet: 6px; /*Высота*/
    --dbmBulletMarginTop: 30px; /*Отступ сверху до карточек*/
    --dbmBackgroundActiveBullet: #cecece; /*Цвет активного буллета*/
    --dbmWidthActiveBullet: 130%; /*Ширина активного буллета*/
    --dbmColorIndicationBullet: rgba(0, 0, 0, 0.4); /*Цвет индикатора заполнения*/
    
}

[class*="uc-slider-shop"] .t-store__grid-separator{
        display: none;
}
[class*="uc-slider-shop"] .swiper-button-next-dbm,
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
      position: absolute;
      top: 0px;
      right: 0px;
      width: var(--dbmWidthHeightArrow);
      height: var(--dbmWidthHeightArrow);
      border-radius: var(--dbmBorderRadiusArrow);
      cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-button-disabled{
        opacity: 0.5;   
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
      right: 50px; /* отодвигаем левую стрелку налево */
}
[class*="uc-slider-shop"] .swiper-button-next-dbm{
        background-image: var(--dbmIconArrowNext);
        background-size: cover;
        background-repeat: no-repeat;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm{
        background-image: var(--dbmIconArrowPrev);
        background-size: cover;
        background-repeat: no-repeat;
}
    
    /*Стили для буллетов в слайдере*/
[class*="uc-slider-shop"] .swiper-pagination-dbm {
        width: 100%;
        margin-top: var(--dbmBulletMarginTop);
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        gap: var(--dbmGapBullet);
        justify-content: center;
}
    
[class*="uc-slider-shop"] .swiper-pagination-bullet {
      background: var(--dbmBackgroundBullet);
      width: 100%;
      height: var(--dbmHeightBullet);
      opacity: 0.5;
      transition: all 0.4s ease-in-out;
      border-radius: var(--dbmBorderRadiusBullet);
      overflow: hidden;
      position: relative;
      cursor: pointer;
}
    
[class*="uc-slider-shop"] .swiper-pagination-bullet-active {
      background: var(--dbmBackgroundActiveBullet);
      width: var(--dbmWidthActiveBullet);
      opacity: 1;
}
    
[class*="uc-slider-shop"] .swiper-pagination-bullet::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: var(--dbmColorIndicationBullet);
      transform: scaleX(0);
      transform-origin: left;
}
    
[class*="uc-slider-shop"] .swiper-pagination-bullet-active::before {
      animation: fill var(--animation-duration) linear forwards;
}
    
    /* Ваши стили для контейнера и карточек */
[class*="uc-slider-shop"] .swiper {
        margin: 0 auto; /* Центрирование контейнера */
        overflow: hidden; 
        max-width: calc(100vw - (var(--dbmPaddingSliderDesktop) * 2));
        /*max-width: 100vw;*/
        position: relative;
        padding: 0 !important;
        padding-top: 50px !important;
}
    
    /* Стили для внутреннего обертки */
[class*="uc-slider-shop"] .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap; /* Чтобы карточки стояли в ряд */
        gap: var(--dbmGapSlider);
}
    
[class*="uc-slider-shop"] .swiper-slide {
        height: 100%;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto; /* Карточки не растягиваются и не схлопываются */
}
    
[class*="uc-slider-shop"] .swiper-slide > div {
        width: 100% !important;
}
    
@media screen and (max-width: 1000px){
    [class*="uc-slider-shop"] .swiper {
        max-width: calc(100vw - (var(--dbmPaddingSliderTablet) * 2));

    }    
}
    
@media screen and (max-width: 640px){
    [class*="uc-slider-shop"] .swiper {
        max-width: calc(100vw - (var(--dbmPaddingSliderMobile) * 2));
    }    
}

@keyframes fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
 
//Подгоняем высоту всех карточек 
    function setEqualHeight() {
    const elements = document.querySelectorAll('[class*="uc-slider-shop"] .t-store__card__textwrapper');
    if (elements.length === 0) return;
    elements.forEach(el => el.style.height = 'auto');
    let maxHeight = 0;
    elements.forEach(el => {
        const height = el.offsetHeight;
        if (height > maxHeight) {
            maxHeight = height;
        }
    });
    elements.forEach(el => el.style.height = `${maxHeight}px`);
}
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
document.addEventListener('DOMContentLoaded', setEqualHeight);
window.addEventListener('resize', debounce(setEqualHeight, 250));
const observerHeighCard = new MutationObserver(debounce(setEqualHeight, 250));

const configHeightCard = { childList: true, subtree: true };
observerHeighCard.observe(document.body, configHeightCard);