.site-header {
    background: var(--wp--preset--color--base);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    transition: all 0.3s ease;
    transform: translate(0, 0);
}

body.scroll-direction-down .site-header {
    box-shadow: var(--wp--custom--box-shadow--regular);
    transform: translate(0, -100%);
}

body:is(.scroll-direction-up, .scroll-direction-up-down) .site-header {
    box-shadow: var(--wp--custom--box-shadow--regular);
    transform: translate(0, -2.3em);
}

body.scroll-progress-start .site-header {
    box-shadow: none;
    transform: translate(0, 0);
}

@media (max-width:650px) {
    body:not(.scroll-progress-start) .site-header {
        transform: translate(0, 0);
    }
}