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: 'fraction',
        },
        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);
      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; /*Отступ между карточками товаров*/
    
    
    /*Стили для нумераци*/
    --dbmNumMarginTop: 30px; /*Отступ сверху до карточек*/
    --dbmFontFamily: "Onest", sans-serif; /*ваш шрифт*/
    --dbmGapNum: 5px; /*Отступ между цифрами*/
    --dbmAlignHorizontalNum: center ; /*Вырванивание цифр по оси Х, flex-start – по левой стороне, center – по центру, flex-end – по правой стороне*/
    --dbmAlignVerticalNum: center ; /*Выраванивание цифр по оси Y*/
    --dbmColorNum: gray;    /*Цвет всех номеров слайда*/
    --dbmColorActiveNum: #232323; /*Цвет активного номера*/
    --dbmFontSizeActiveNum: 24px; /*Размер текста активного номера*/
    
}


[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(--dbmNumMarginTop);
    margin-bottom: 10px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--dbmGapNum);
    justify-content: var(--dbmAlignHorizontalNum);
    font-family: var(--dbmFontFamily);
    align-items: var(--dbmAlignVerticalNum);
    color: var(--dbmColorNum);
        
}
    
[class*="uc-slider-shop"] .swiper-pagination-current{
    font-size: var(--dbmFontSizeActiveNum);
    color: var(--dbmColorActiveNum);
}
    
    /* Ваши стили для контейнера и карточек */
[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));
    }    
}
 
//Подгоняем высоту всех карточек 
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);