macOS Monterey switching tab text color

Question

I recently updated to Monterey and found out bug in my website. So, I have three tabs, while switching between them other one losses their text, text becomes white, I dunno. Before, at safari 15.0 all was okay. But Monterey has safari 16.0

Tab is a hyperlink tag

I already searched through different whole css styles: :webkit-any-link, ::selection, a:hover, a:active

Moreover, when I turn off one of the styles, text appears devtools screen if helps

const prodctTabHeadlineBtn = document.querySelectorAll('.device-proudct-tabs__headline-item');
    const productTabContent = document.querySelectorAll('.device-proudct-tab');

    prodctTabHeadlineBtn.forEach(function (item) {
        item.addEventListener('click', function () {
            event.preventDefault();

            let currentHeadlineBtn = item;
            let tabId = currentHeadlineBtn.getAttribute('data-tab');
            let cuttentTab = document.querySelector(tabId);

            prodctTabHeadlineBtn.forEach(function (item) {
                item.classList.remove('active');
            });

            productTabContent.forEach(function (item) {
                item.classList.remove('active');
            });

            currentHeadlineBtn.classList.add('active');
            cuttentTab.classList.add('active');
        });

        document.querySelector('.device-proudct-tabs__headline-item').click();
    });

.device-proudct-tabs__headline-item {
    width: 33.3333%;
    padding: 25px 0;
    position: relative;
    font-size: 21px;
    font-weight: 700;
    color: #706C79;
    text-align: center;
    transition: all .2s linear;
}

.device-proudct-tabs__headline-item.active {
    color: #34303d;
}

.device-proudct-tabs__headline-item.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #00d1d2;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all .2s linear;
}

.device-proudct-tabs__headline-item:hover {
    color: #34303d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="device-proudct-tabs__headline">
    <a class="device-proudct-tabs__headline-item" data-tab="#tab_1" href="#">
    text
    </a>
    <a class="device-proudct-tabs__headline-item" data-tab="#tab_2" href="#">
    text
    </a>
    <a class="device-proudct-tabs__headline-item d-none" data-tab="#tab_3" href="#">
    text
    </a>
    <a class="device-proudct-tabs__headline-item active" data-tab="#tab_4" href="#">
    text
    </a>
</div>