macOS Monterey switching tab text color - html

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>