<!--https://dsgnmax.ru/useful/cart-fav-in-zero-->

<style>
:root{
    
    /*Стилизация иконок корзины и избранного*/
    
    --borderRadius: 8px;    /*Радиус скругления углов у иконки корзины или избранного*/
    --marginIcon: 6px;  /*Отступы вокруг иконки*/
    --scaleHover: 1.1; /*Увеличение иконки корзины и избранного при наведении*/
    --transitionHover: all 0.3s ease-in;    /*Плавность анимации при наведении*/
    
    
    /*Лейбл с итоговой суммой в корзине*/
    --displaySumm: block; /*Скрыть информацию о сумме в корзине, block – отобразить, none – скрыть*/
    --borderLabelSumm: 8px; /*Радиус скругления лейбла*/
    --fontSizeLabelSumm: 14px; /*Размер текста внутри лейбла*/
    --rightLabelSumm: 110%; /*Отступ справа, настройка для позицонирования лейбла относительно иконки корзины*/
    --marginTopBottomLabelSumm: 4px; /*Отступы сверху и снизу внутри лейбла с итоговой суммой*/ 
    --marginLeftRightLabelSumm: 8px; /*Отступы слева и справа внутри лейбла с итоговой суммой*/ 
    
    
    /*Лейбл с количеством товаров*/
    --topLabelCounter: -6px;   /*Позиционирование лейбла относительно верха иконки*/
    --rightLabelCounter: -6px; /*Позиционирование лейбла относительно правой стороны иконки*/
    --paddingLabelCounter: 4px 6px;  /*Отступы внутри лейбла с количеством товаров*/ 
    --fontSizeCounter: 11px;    /*Размер текста внутри лейбла с количеством добавленных товаров*/

}




/*----------Стилизация корзины----------*/
.t706__carticon {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}
.t706__body_cartwinshowed .t706__carticon{
    display: block !important;
}
.t706__carticon-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.t706__carticon {
    width: inherit;
    height: inherit;
}

.t706__carticon-imgwrap {
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadius);
}

.t706__carticon-imgwrap:hover{
    transform: scale(1) !important;
}

.t706__carticon-counter {
    min-width: auto;
    height: auto;
    padding: var(--paddingLabelCounter);
    bottom: inherit;
    top: -5px;
    right: -5px;
    line-height: 1;
    font-size: var(--fontSizeCounter);
}

.t706__bgimg {
    margin: var(--marginIcon);
}

.t706__carticon-text {
    display: none !important;
}

.t706__carticon-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.t706__carticon {
    width: inherit;
    height: inherit;
    transition: var(--transitionHover) !important;
}

.t706__carticon-imgwrap {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--borderRadius);
    box-shadow: none;
}

.t706__carticon-counter {
    min-width: auto !important;
    height: auto !important;
    padding: var(--paddingLabelCounter) !important;
    bottom: inherit !important;
    top: var(--topLabelCounter) !important;
    right: var(--rightLabelCounter) !important;
}

.t706__carticon:hover{
    scale: var(--scaleHover) !important;
}

.t706__carticon.t706__carticon_showed.t706__carticon_neworder{
    transform: scale(1) !important;
}

.t706__carticon-text:after {
    display: none;
}

/*Сумма товаров в корзине*/
.t706__carticon-text {
    padding: 0 !important;
    opacity: 1 !important;
    display: block !important;
    width: fit-content;
    height: auto;
    line-height: 1;
    align-content: center;
    font-size: var(--fontSizeLabelSumm);
    border-radius: var(--borderLabelSumm);
    display: var(--displaySumm) !important;
    right: var(--rightLabelSumm) !important;
}
.t706__cartwin-prodamount-price {
    margin-left: var(--marginLeftRightLabelSumm);
    margin-top: var(--marginTopBottomLabelSumm);
    margin-bottom: var(--marginTopBottomLabelSumm);
}

.t706__cartwin-prodamount-currency {
    margin-right: var(--marginLeftRightLabelSumm);
}
/*------------------------------------------*/



/*----------Стилизация избранного----------*/
.t1002__wishlisticon {
    top: 0;
    left: 0;
    position: relative;
    display: block !important;
    transition: var(--transitionHover) !important;
}
.t1002__wishlisticon:hover{
    scale: var(--scaleHover);   
}

.t1002__body_wishlistwinshowed .t1002__wishlisticon{
    display: block;
}

.t1002__wishlisticon-imgwrap {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--borderRadius);
    box-shadow: none;
}

.t1002__wishlisticon-imgwrap:hover{
    transform: scale(1) !important;
}

.t1002__wishlisticon-wrapper {
    width: 100%;
    height: 100%;
    transition: var(--transitionHover);
}

.t1002__wishlisticon {
    width: inherit;
    height: inherit;
    right: 0;
}

.t1002__wishlisticon-counter {
    padding: var(--paddingLabelCounter) !important;
    height: auto !important;
    width: auto !important;
    bottom: inherit !important;
    top: var(--topLabelCounter) !important;
    right: var(--rightLabelCounter) !important;
    line-height: 1 !important;
    font-size: var(--fontSizeCounter) !important;
}

.t1002__bgimg {
    margin: var(--marginIcon);
}

/*------------------------------------------*/
</style>




<script>
document.addEventListener("DOMContentLoaded", function() {
    const cartIcon = document.querySelector('.t706__carticon');
    const wishlistIcon = document.querySelector('.t1002__wishlisticon');
    const cartTarget = document.querySelector('.cart');
    const favTarget = document.querySelector('.fav');

    const moveElement = (element, target) => {
        if(element && target) {
            target.appendChild(element);
        }
    };

    moveElement(cartIcon, cartTarget);
    moveElement(wishlistIcon, favTarget);

    const observeElement = (element, callback) => {
        if (!element) return;
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'childList') {
                    callback();
                }
            });
        });
        observer.observe(element, {childList: true, subtree: true});
    };

    observeElement(cartIcon, () => moveElement(cartIcon, cartTarget));
    observeElement(wishlistIcon, () => moveElement(wishlistIcon, favTarget));

    const updateCounters = () => {
        const counters = document.querySelectorAll('.t706__carticon-counter, .t1002__wishlisticon-counter');
        counters.forEach((counter) => {
            if (counter.textContent.trim() === '') {
                counter.textContent = '0';
            }
        });
    };

    updateCounters();

    const removeFirstTextNodeFromElement = (element) => {
        const textNode = [...element.childNodes].find(node => node.nodeType === Node.TEXT_NODE);
        if (textNode) {
            element.removeChild(textNode);
        }
    };

    const observer = new MutationObserver((mutations, obs) => {
        mutations.forEach(mutation => {
            if(mutation.type === 'childList' || mutation.type === 'characterData') {
                updateCounters(); 
            }
            mutation.addedNodes.forEach((node) => {
                if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('t706__carticon-text')) {
                    removeFirstTextNodeFromElement(node);
                }
                node.querySelectorAll && node.querySelectorAll('.t706__carticon-text').forEach(subNode => {
                    removeFirstTextNodeFromElement(subNode);
                });
            });
        });
    });

    const config = { childList: true, characterData: true, subtree: true };
    observer.observe(document.body, config);
});
</script>