<style>
:root {
    /* Ширина и длина кнопки, цвет заливки и сдвиг влево, чтобы кнопка стояла по центру*/
    --widthButton: 70px;
    --heightButton: 70px;
    --backgroundButton: #60cfd8;
    --leftPositionButton: -13px;
    
    /* Буква внутри кнопки: ее цвет и размер шрифта */
    --buttonSymbolColor: #FFFFFF;
    --buttonSymbolFontSize: 20px;
    
    /* Обводка вокруг кнопки: ширина, смешение относительно кнопки, обводка (ширина и цвет)*/
    --buttonBorderWidth: 100px;
    --buttonBorderHeight: 100px;
    --buttonBorderPositionLeft: -16px;
    --buttonBorderPositionTop: -16px;
    --buttonBorder: 2px dashed #FFFFFF;
    
    /*Смещение стрелок по бокам */
    --arrowPosition: -55px;
}

/*Заменить ID на свои ID слайдеров с изображениями*/
.image__slider--1 #rec414471035, 
.image__slider--2 #rec414481096, 
.image__slider--3 #rec414482537, 
.image__slider--4 #rec414482610 {display:flex; align-items:stretch; padding: 0!important;width: 100%!important;height: 100%;}

.image__slider--1, .image__slider--2, .image__slider--3, .image__slider--4 {width: 100%;display: flex;align-items: center;justify-content: center;}.image__slider--1 .tn-atom, .image__slider--2 .tn-atom, .image__slider--3 .tn-atom, .image__slider--4 .tn-atom  {display: none;}
.image__slider--1 .t410__col, .image__slider--2 .t410__col, .image__slider--3 .t410__col, .image__slider--4 .t410__col {padding: 0!important;margin: 0!important;max-width: 100%!important;}.image__slider--1 .t-container,.image__slider--2 .t-container, .image__slider--3 .t-container, .image__slider--4 .t-container  {max-width: 100%!important;}
.image__slider--1 .t410, .image__slider--2 .t410, .image__slider--3 .t410, .image__slider--4 .t410 {width: 100%;} 
.image__slider--1 .t-container, .image__slider--1 .t410__col, .image__slider--1 .t410__wrapper, .image__slider--1 .juxtapose,
.image__slider--2 .t-container, .image__slider--2 .t410__col, .image__slider--2 .t410__wrapper, .image__slider--2 .juxtapose,
.image__slider--3 .t-container, .image__slider--3 .t410__col, .image__slider--3 .t410__wrapper, .image__slider--3 .juxtapose,
.image__slider--4 .t-container, .image__slider--4 .t410__col, .image__slider--4 .t410__wrapper, .image__slider--4 .juxtapose {height: 100%!important;}
.jx-controller {display: flex; justify-content: center; align-items: center; width:var(--widthButton)!important; height: var(--heightButton)!important; background-color: var(--backgroundButton)!important; border-radius: 50%; left: var(--leftPositionButton);}
.jx-controller::before {content: ''; position: absolute; left: var(--buttonBorderPositionLeft); top: var(--buttonBorderPositionTop); width: var(--buttonBorderWidth); height: var(--buttonBorderHeight); border-radius: 50%; border: var(--buttonBorder);}
.jx-controller::after {content:'К'; color: var(--buttonSymbolColor); font-size: var(--buttonSymbolFontSize); font-family: inherit;}
.jx-arrow.jx-left {left: var(--arrowPosition)!important;}
.jx-arrow.jx-right {right: var(--arrowPosition)!important;}
.tab__content {display: none;}
.active {display: block;}
</style>
<script>
    document.addEventListener("DOMContentLoaded",function() {
        // Заменить ID на свои ID слайдеров с изображениями
        let imageSliderData = [
            {".image__slider--1" : "#rec414471035"},
            {".image__slider--2" : "#rec414481096"},
            {".image__slider--3" : "#rec414482537"},
            {".image__slider--4" : "#rec414482610"}
        ];
        
        // Заменить ID на ID блоков для табиков
        let tabData = "#rec414471292, #rec414481277, #rec414482553, #rec414482624";
        
        function createSliderInZero() {
            for (let i = 0; i < imageSliderData.length; i += 1) {
                let key = Object.keys(imageSliderData[i]);
                let value = Object.values(imageSliderData[i]);
                
                let sliderShape = document.querySelector(key);
                let imageSlider = document.querySelector(value);
            
                sliderShape.appendChild(imageSlider);
            }   
        }
        
        class Tabs {
            constructor () {
                this.tabs = document.querySelectorAll(".tab__link a");
                this.content = document.querySelectorAll(tabData);
                this.start();
            }
            
            start() {
                this.content.forEach((el, ind) => {
                    el.classList.add('tab__content');
                    if (ind === 0) {
                        el.classList.add('active');
                    }
                })
                
                this.tabs.forEach((el, ind) => {
                    el.addEventListener('click', () => this.tabClick(ind));
                })
                
                this.removeHash();
            }
            
            removeActive() {
                for (let i = 0; i < this.tabs.length; i++) {
                    this.tabs[i].classList.remove('active');
                    this.content[i].classList.remove('active');
                }
            }
            
            tabClick(index) {
                this.removeActive();
                this.tabs[index].classList.add('active');
                this.content[index].classList.add('active');
            }
            
            removeHash() {
                this.tabs.forEach((el) => {
                    el.addEventListener('click', (e) => {
                        e.preventDefault();
                        location.href.replace(/#.*/,'');
                    })
                })
            }
        }
        
        createSliderInZero();
        let tabs = new Tabs();
    })
</script>

 .color__block {display: flex; align-items: center; gap: 20px;}
.color__block .t-product__option-checkmark_color:before {display: none;}
.color__block .t-product__option-item_disabled {pointer-events: auto!important; opacity: 1!important;}
.color__link {font-family: 'Open Sans';font-size: 14px;color: black!important;}