Отметки разных цветов у карточек товаров

<!--Разные цвета отметок у карточек товаров, работает со всеми блока магазина
Студия веб-дизайна SHEINA – https://sheina-studio.ru/-->


<!-- ===== ИНСТРУКЦИЯ =====
1️⃣  ДОБАВЛЯЕМ БЛОК МАГАЗИНА 
(ST310N, ST305N, ST315N, ST320N, ST330)
Добавляем всему блоку класс -   .uc-katalog  

2️⃣ ПРОПИСЫВАЕМ ОТМЕТКИ У КАРТОЧЕК В КАТАЛОГЕ И НИЖЕ В КОДЕ
Отметки в карточках товаров и в коде должны совпадать буква в букву 

3️⃣ ПОД БЛОКОМ С ТОВАРАМИ ВСТАВЛЯЕМ КОД

❗️   ВАЖНО. В редакторе изменения, внесенные с помощью кода не видны, вы их увидите только на опубликованной странице. -->



<script>
    t_onReady(function () {
    
        const COLORS = {
            // ниже прописываем все лейблы, которые будем использовать
            // каждый отдельно, как с процентами скидки
            // bg - задаем фон лейблу, color - задаем цвет текста лейбла
            '-30%': { bg: '#cd0000', color: '#fff' },
            '-25%': { bg: '#cd0000', color: '#fff' },
            'NEW':  { bg: '#0f969d', color: '#fff' },
            'ХИТ':  { bg: '#752dae', color: '#fff' },
            'SALE': { bg: '#cd0000', color: '#fff' }
        };
    
        function norm(s){
            return (s || '')
            .replace(/[−–—]/g, '-')    
            .replace(/\s*%\s*/g, '%')  
            .replace(/-\s+/g, '-')   
            .trim()
            .toUpperCase();
        }
    
        function pickTarget(el) {
            const isRounded = (node) => {
                if (!node) return false;
                const br = getComputedStyle(node).borderRadius;
                return br && br !== '0px';
            };
            if (isRounded(el)) return el;
            if (isRounded(el.parentElement)) return el.parentElement;
            return el;
        }
    
        function ucColorMarks(root) {
            const marks = root.querySelectorAll(
                '[class*="__mark"]:not([class*="wrapper"]):not([class*="markwrapper"]), .t-store__card__mark'
            );
    
            marks.forEach(mark => {
                const parts = norm(mark.textContent).split(',').map(x => x.trim()).filter(Boolean);
                const key = parts.find(p => COLORS[p]);     // 
                if (!key) return;
    
                const rule = COLORS[key];
                const target = pickTarget(mark);
    
                target.style.setProperty('background-color', rule.bg, 'important');
                target.style.setProperty('color', rule.color, 'important');
            });
        }
    
        function runAll(){
            document.querySelectorAll('.uc-katalog').forEach(root => {
                ucColorMarks(root);
            });
        }
    
        runAll();
    
        const obs = new MutationObserver(runAll);
        obs.observe(document.body, { childList: true, subtree: true });
    
    });
</script>