<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>

$(function() {

    // Укажи ID Zero блока и включи overflow: auto
    const blockId = '#rec731818026';
    
    $(blockId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
    $(blockId + ' .t396').css('overflow','hidden');
    
    new ScrollBooster({
        viewport: $(blockId + ' .scrollbooster-viewport')[0],
        content:  $(blockId + ' .scrollbooster-content')[0],
        scrollMode: 'native',
        pointerMode: 'mouse',
        bounce: false,
        onPointerDown: function() { $(blockId + ' *:focus').blur() }
    });

});
</script>

<style>
.scrollbooster-viewport {
    cursor: -webkit-grab;
    cursor: grab;
    padding-bottom: 30px;
    margin-bottom: -30px;
}
.scrollbooster-viewport:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.scrollbooster-content {
    position: absolute;
    width: 100%;
    height: 100%;
}


.padding_right {
    width: calc(50vw - 608px) !important;
}

@media screen and (max-width:1200px){
.padding_right {
    width: calc(50vw - 488px) !important;
}   
}

@media screen and (max-width:960px){
.padding_right {
    width: calc(50vw - 328px) !important;
}   
}

@media screen and (max-width:640px){
.padding_right {
    width: calc(50vw - 250px) !important;
}   
}

@media screen and (max-width:480px){
.padding_right {
    width: calc(50vw - 160px) !important;
}   
}


</style>

<script>
$(document).ready(function(){
    setTimeout(function(){
        $('.scrollbooster-viewport').scrollLeft(10000);
        
        setTimeout(function(){
            window.dispatchEvent(new Event('resize'));
        }, 500);    
        
    }, 500);    

$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ 
    //window.dispatchEvent(new Event('resize'));
    //$('.scrollbooster-viewport').scrollLeft(10000);
}, 1000);});


})
</script>

<script>

$('.js-store-grid-cont').on('tStoreRendered', function(){
    let store = $(this);
    let block = store.closest('.r');
    let className = block.attr('class').split(' ');

    for (let i = 0; i < className.length; i++) {
            let contain = className[i].includes('uc-part_');
            if (contain) {
                let part = className[i].split('_')[1];
                block.attr('data-parts', part);
                
                let quantInputCustom = `<div class="t-store__prod__quantity t-store__prod__quantity_xs custom-quant">
                                            <div class="t-store__prod__quantity__minus-wrapper">
                                                <span class="t-store__prod__quantity__minus"></span>
                                            </div>
                                            <input class="t-store__prod__quantity-input t-descr t-descr_xxs" type="number" min="${part}" step="${part}" value="${part}">
                                            <div class="t-store__prod__quantity__plus-wrapper">
                                            <span class="t-store__prod__quantity__plus"></span>
                                            </div>
                                        </div>`
                
               

                let quantInput = block.find('.t-store__prod__quantity');
                quantInput.after(quantInputCustom);
                quantInput.find('.t-store__prod__quantity-input').val(part);
                

            };
    };

     
});


$(document).on('click', '.custom-quant .t-store__prod__quantity__plus', function(){
    let quantWrapper = $(this).closest('.custom-quant');
    let customInp = quantWrapper.find('input');
    let inpValue = +customInp.val();
    let step = +customInp.attr('step');
    let quant = inpValue+step;
    customInp.val(quant);
    quantWrapper.prev('.t-store__prod__quantity').find('input').val(quant);
});

$(document).on('click', '.custom-quant .t-store__prod__quantity__minus', function(){
    let quantWrapper = $(this).closest('.custom-quant');
    let customInp = quantWrapper.find('input');
    let inpValue = +customInp.val();
    let step = +customInp.attr('step');
    let quant = inpValue-step;
    if(quant<=0) quant=step;
    customInp.val(quant);
    quantWrapper.prev('.t-store__prod__quantity').find('input').val(quant);
});



$(document).on('click', 'a[href="#order"]', function(){
    let card = $(this).closest('.js-product');
    
    setTimeout(function(){
    
        let quantWrapper = card.find('.custom-quant');
        if(quantWrapper.length){
            let customInp = quantWrapper.find('input');
            let step = +customInp.attr('step');
            let quant = step;
            customInp.val(quant);
            quantWrapper.prev('.t-store__prod__quantity').find('input').val(quant);
     
        };
    
    }, 500);

    
});
  
   
    
    
</script>


<style>
input.t-store__prod__quantity-input {
    width: 65px;
    pointer-events: none;
}    

.t-store__prod__quantity:not(.custom-quant) {
    display: none;
}

.t-store__prod__quantity {
    border-radius: 5px;
}

span.t706__product-quantity:after {
    content: " шт";
}

span.t706__product-minus {
    display: none;
}

span.t706__product-plus {
    display: none;
}

.t706__product-plusminus {
    pointer-events: none;
}


</style>