/* Слой миграции слайдеров на Splide (этап 1).
   База для стрелок и скроллбара перенесена из swiper-bundle.min.css,
   т.к. бандл удаляется, а styles.css продолжает оформлять эти классы. */

/* стрелки: разметка сайта использует свои div.swiper-button-* со своим svg.
   user-select обязателен: стрелки — это div, а не button, и ни Swiper, ни Slick,
   ни Splide не гасят на них выделение (Slick делает preventDefault только для <a>).
   Без него второй клик подряд при перелистывании выделяет текст под слайдером. */
.swiper-button-next,
.swiper-button-prev,
.slick-arrow,
.splide__arrow {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-button-prev { left: 10px; right: auto; }
.swiper-button-next { right: 10px; left: auto; }

/* скроллбар-индикатор (drag-элемент создаёт attachProgress из sliders.js) */
.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    background: rgba(0, 0, 0, .1);
}
.swiper-scrollbar-drag {
    height: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0;
    transition: margin-left .3s, width .3s;
}

/* Затенение контента по краям центрированных слайдеров главной.
   Было: градиенты на соседних слайдах (styles.css:1297-1345 + офсеты
   custom.css:81-88) через классы swiper-slide-prev/next. У Splide классы
   is-prev/is-next переназначаются в момент СТАРТА анимации, из-за чего
   затенение моргало при перелистывании. Поэтому градиенты закреплены
   статично на краях окна (::before/::after у .splide__track) — они не
   зависят от классов слайдов и мигать не могут. Цвета прежние, по фону
   секции (bg_wrapper1/bg_wrapper2). */
.slider_with_center_full .splide__track::before,
.slider_with_center_full .splide__track::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 340px;
    z-index: 2;
    pointer-events: none;
}
.slider_with_center_full .splide__track::before { left: 0; }
.slider_with_center_full .splide__track::after { right: 0; }

.bg_wrapper2 .slider_with_center_full .splide__track::before {
    background: linear-gradient(90deg, #E6F0F5 29.32%, rgba(255, 255, 255, 0) 102.36%);
}
.bg_wrapper2 .slider_with_center_full .splide__track::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #E6F0F5 70.11%);
}
.bg_wrapper1 .slider_with_center_full .splide__track::before {
    background: linear-gradient(90deg, #f6fbfc 29.32%, rgba(255, 255, 255, 0) 102.36%);
}
.bg_wrapper1 .slider_with_center_full .splide__track::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #f6fbfc 70.11%);
}

/* Порт styles.css:5586-5592 (@media max-width:991px): затенение блока
   на bg_wrapper2 на планшетах/мобильных гасится, как в исходном дизайне. */
@media (max-width: 991px) {
    .bg_wrapper2 .slider_with_center_full .splide__track::before,
    .bg_wrapper2 .slider_with_center_full .splide__track::after {
        display: none;
    }
}

/* Галерея карточки товара (new2): product-slider_big/__nav → product-gallery_big/__nav.
   Slick-инит на старых именах остаётся в scripts.min.js для остальных шаблонов
   catalog.element, поэтому здесь классы переименованы, а не задублированы. */

/* До инициализации показываем только первый слайд — замена инлайн-скрипта
   анти-мерцания (фон-заглушка + MutationObserver по slick-initialized),
   который держался на пересборке DOM у Slick. Splide слайды из DOM не вынимает,
   разметка на месте с самого начала, поэтому достаточно спрятать лишнее CSS. */
.product-gallery_big:not(.is-initialized) .splide__slide:nth-child(n+2) {
    display: none;
}

/* Порт styles.css:8551-8562 (.product-slider_big:not(.slick-initialized) …).
   В новой разметке .splide__track/.splide__list — статические обёртки, поэтому
   "> *" перестаёт указывать на слайды; переведено на потомка .splide__slide.
   Резервирование высоты 380px дублирует правило ниже (из styles.min.css) и уже
   покрыто им безусловно, поэтому здесь остаётся только ограничение картинки. */
.product-gallery_big:not(.is-initialized) img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

/* Порт styles.css:8567-8585 (.product-slider__nav:not(.slick-initialized) …).
   .splide__list уже flex по умолчанию (splide-core.min.css), поэтому правило
   display:flex на корневой .product-slider__nav не переносим — оно указывало
   на корень-контейнер миниатюр, а не на слайды. Раскладку 4 в ряд и скрытие
   5-й+ миниатюры переносим на .splide__slide (border/box-sizing дублируют
   правило ниже из styles.min.css и туда не повторяются). */
.product-gallery__nav:not(.is-initialized) .splide__slide {
    flex: 0 0 25%;
    max-width: 25%;
}
.product-gallery__nav:not(.is-initialized) .splide__slide:nth-child(n+5) {
    display: none;
}
.product-gallery__nav:not(.is-initialized) img {
    max-width: 100%;
    height: auto;
}

/* Порт styles.min.css:16430-16442 (.product-slider_big .slick-slide → реальный
   размер слайда после инициализации; .slick-slide → .splide__slide, т.к. этот
   класс есть в разметке всегда, а не только после JS-инициализации Splide). */
.product-gallery_big .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 380px;
    width: 380px;
}

/* Порт styles.min.css:16444-16447 (.product-slider__nav .slick-slide). */
.product-gallery__nav .splide__slide {
    border: 1px solid #E6F0F5;
    box-sizing: border-box;
}

/* Порт styles.min.css:16469-16472 (.slick-current у миниатюр → .splide__slide.is-active,
   даёт isNavigation Splide). Неактивные миниатюры притушены и кликабельны. */
.product-gallery__nav .splide__slide:not(.is-active) {
    opacity: .8;
    cursor: pointer;
}

/* Порт styles.min.css:20420-20428 (.product-slider__nav:before). */
.product-gallery__nav:before {
    content: "";
    position: absolute;
    height: 25px;
    left: 0;
    right: 0;
    z-index: 9;
    top: -20px;
}

/* Мобильные @media-правила галереи вынесены сюда, НИЖЕ безусловных правил выше.
   Причина: при равной специфичности источник-порядок решает, чей height победит;
   раньше .splide__slide{height:190px} (@767) стоял ПЕРЕД безусловным
   .splide__slide{height:380px}, поэтому на мобильных побеждал 380px. */

/* Порт styles.css:8587-8600 (мобильный @media для тех же pre-init блоков).
   Высота 190px для первого слайда на мобильных уже покрыта безусловным
   правилом .product-gallery_big .splide__slide { height: 190px } ниже —
   здесь дублировать нечего. flex-basis:25% у миниатюр на мобильных совпадает
   со значением из базового правила выше — оригинал тоже был здесь избыточен. */
@media (max-width: 767px) {
    .product-gallery_big:not(.is-initialized) {
        min-height: 220px;
    }
}

/* Порт styles.css:6793 (@media max-width:767px, .product-slider_big .slick-slide). */
@media (max-width: 767px) {
    .product-gallery_big .splide__slide {
        height: 190px;
    }
}

/* Порт styles.min.css:16419-16421 (@media max-width:767px, .product-slider_big). */
@media (max-width: 767px) {
    .product-gallery_big {
        margin-bottom: 10px;
    }
}

/* Порт styles.min.css:16450-16456 (@media max-width:767px). */
@media (max-width: 767px) {
    .product-gallery__nav {
        margin-bottom: 10px;
    }
    .product-gallery__nav .splide__slide {
        margin-right: 10px;
    }
}

/* Пагинация Splide (вкладка «Акции» карточки). Заменяет буллеты из
   удалённого assets/includes/swiper.min.css (.swiper-pagination-bullet). */
.catalog-stocks-slider .splide__pagination {
    position: static;
    padding: 10px 0 0;
}
.catalog-stocks-slider .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: #000;
    opacity: .2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.catalog-stocks-slider .splide__pagination__page.is-active {
    opacity: 1;
    background: #0093A6;
}

/* Полоска прогресса интерактивна (клик и перетаскивание — attachProgress в
   sliders.js, как у старого draggable-скроллбара свипера). Сама полоска
   6px высотой — расширяем зону клика псевдоэлементом. */
.for_slider_pag .swiper-scrollbar {
    cursor: pointer;
}
.for_slider_pag .swiper-scrollbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    bottom: -8px;
}

/* Мобильные слайдеры главной (@media как у styles.css:6084).
   1) Порт styles.css:6179-6182: вертикальные поля вокруг слайдов давал
      .slick-list.draggable{padding:15px 0} — DOM .slick-list умер вместе
      со slick, из-за чего блок пагинации (.for_slider_pag_block с .dots_hm)
      прилипал к слайдеру. Возвращаем поля на .splide__track.
   2) Горизонтальные маргины слайдов .swiper-slide2{margin:0 15px}
      (styles.css:6184-6186) обнуляем: margin-left Splide в математике
      позиций не учитывает (читает только margin-right), межслайдовый
      зазор и боковая рамка теперь заданы опциями gap/padding в sliders.js. */
@media (max-width: 767px) {
    .for_clients_slider_mobile .splide__track,
    .work_with_us_block_mob .splide__track,
    .reviews_block_mob .splide__track,
    .completed_projects_block_mob .splide__track {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .splide .splide__slide.swiper-slide2 {
        margin: 0;
    }
}