Cabecera transparente  

Hola Rafael.

Elimina ese código y prueba con esto:

header.wp-block-template-part {
position: fixed;
width: 100%;
background: transparent;
z-index: 100;
transition: background 0.3s ease-in-out;
}

header.wp-block-template-part.scrolled {
background: rgba(24, 28, 83, 0.8);
}
.wp-block-navigation .wp-block-navigation-item__label {
color: #fefefe;
font-weight: bold;
}
header .wc-block-customer-account__account-icon {
color:#fefefe;
}
header .search-icon {
color: #fefefe;
}

Una vez lo tengas:

.- Accede al plugin css y js personalizado -> añadir JS Personalizado y añade lo siguiente:

document.addEventListener("DOMContentLoaded", function () {
const header = document.querySelector(".wp-block-template-part");

window.addEventListener("scroll", function () {
if (window.scrollY > 50) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});
});

Revisa si es eso lo que buscas y nos comentas.

Un Saludo