.site-header {
    container: site-header / inline-size;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-width: 1680px !important;
    margin-inline: auto;
    width: 100%;
    border-radius: 0 0 var(--wp--custom--border-radius--block) var(--wp--custom--border-radius--block);
    transition-property: background-color, box-shadow, color;
    transition-duration: var(--transition--duration);
    transition-timing-function: var(--transition--timing-function);

    .wp-block-navigation-item__content {
        line-height: 2.8125rem;
    }

    .wp-element-button {
        padding: 10px 40px !important;
    }

    > .wp-block-group {
        padding-block: var(--wp--preset--spacing--20);
    }

    .wp-block-navigation-item__content {
        transition-property: background-color, box-shadow, color;
        transition-duration: var(--transition--duration);
        transition-timing-function: var(--transition--timing-function);

        .current-menu-item &,
        &:hover {
            color: var(--wp--preset--color--accent-1) !important;
        }
    }

    > .wp-block-group {
        max-width: var(--wp--style--global--wide-size);
        margin-inline: auto;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(0,0,0,0);
        transition-property: border-bottom-color, padding;
        transition-duration: var(--transition--duration), 200ms;
        transition-timing-function: var(--transition--timing-function), linear;
    }

    .cart-icon-wrapper {
        svg :where(path, rect) {
            transition: fill var(--transition--duration) var(--transition--timing-function);
        }
    }
}


:not(:has(.page-hero)) .site-header {
    /*transition-delay: var(--transition--duration);*/
    background-color: var(--wp--preset--color--background);
}

body:not(.scrolling) {
    :has(.page-hero) .site-header {
        .wp-element-button {
            color: var(--wp--preset--color--accent-2);
            background-color: var(--wp--preset--color--accent-6);

            &:hover {
                color: var(--wp--preset--color--accent-6);
                background-color: var(--wp--preset--color--accent-2);
            }
        }

        .logo .title {
            color: var(--wp--preset--color--accent-6);
        }

        .cart-icon-wrapper svg :where(path, rect) {
            fill: var(--wp--preset--color--accent-6);
        }

        .wp-block-navigation__responsive-container-open {
            svg rect {
                fill: var(--wp--preset--color--accent-6);
            }

            &:hover {
                svg rect {
                    fill: var(--wp--preset--color--accent-1);
                }
            }
        }
    }

    :not(:has(.page-hero)) .site-header > .wp-block-group {
        border-bottom-color: var(--wp--preset--color--accent-4);
    }
}

.scrolling .site-header {
    box-shadow: var(--box-shadow-bottom);
    background-color: var(--wp--preset--color--accent-6);

    > .wp-block-group { padding-block: 10px }
}

.site-header {
    .cart-icon-wrapper:hover {
        svg :where(path, rect) {
            fill: var(--wp--preset--color--accent-1) !important;
        }
    }
}

.wp-block-navigation__responsive-container-open {
    svg {
        width: 33px;
        height: 18px;

        rect {
            transition-property: fill;
            transition-duration: var(--transition--duration);
            transition-timing-function: var(--transition--timing-function);
        }
    }

    &:hover {
        svg rect {
            fill: var(--wp--preset--color--accent-1);
        }
    }
}

.wp-block-navigation__responsive-container-close {
    svg {
        width: 24px;
        height: 24px;

        rect {
            transition-property: fill;
            transition-duration: var(--transition--duration);
            transition-timing-function: var(--transition--timing-function);
        }
    }

    &:hover {
        svg {
            rect {
                fill: var(--wp--preset--color--accent-1);
            }
        }
    }
}

@media (max-width: 580px) {
    .site-header {
        .wp-block-navigation + .wp-block-group .wp-block-buttons {
            display: none;
        }
    }
}

@media (max-width: 640px) {
    .site-header {
        & > .wp-block-group {
            gap: 20px;
        }

        .wp-block-navigation + .wp-block-group {
            gap: 20px;
        }
    }
}

@media (max-width: 768px) {
    .site-header {
        padding-inline: var(--wp--preset--spacing--20);

        .wp-block-navigation {
            gap: 5px !important;
        }
    }

    .has-modal-open .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content {
        --navigation-layout-justification-setting: left;
        --navigation-layout-justify: left;
        text-align: left;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        .wp-block-navigation-item,
        .wp-block-navigation__container,
        .wp-block-page-list {
            --navigation-layout-justification-setting: left;
            --navigation-layout-justify: left;
            text-align: left;
        }
    }
}

@media (min-width: 769px){
    .site-header { padding-inline: var(--wp--preset--spacing--60) }

    body:not(.scrolling) .site-header > .wp-block-group { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .site-header {
        .has-modal-open .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content {
            --navigation-layout-justification-setting: center;
            --navigation-layout-justify: center;
            text-align: center;
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
            .wp-block-navigation-item,
            .wp-block-navigation__container,
            .wp-block-page-list {
                --navigation-layout-justification-setting: center;
                --navigation-layout-justify: center;
                text-align: center;
            }
        }
    }
}

@media (max-width: 1024px) {
    .site-header {
        .wp-block-navigation {
            order: 3;

            &:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
                background-color: var(--wp--preset--color--accent-1);
            }
        }

        .wp-block-navigation__responsive-container-open:not(.always-shown) {
            display: flex;
        }

        .wp-block-navigation__responsive-container {
            display: block;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;

            &:not(.is-menu-open) {
                bottom: 0;
                left: 0;
                position: fixed;
                right: 0;
                top: 0;
            }

            &:not(.hidden-by-default):not(.is-menu-open) {
                display: flex;
            }

            .wp-block-navigation__responsive-container-close,
            .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
                opacity: 0;
                translate: 0 100px;
                transition-property: opacity, translate;
                transition-timing-function: var(--timing-function--ease-out-quint);
            }

            &.is-menu-open {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
                animation: none;
                transition-property: opacity;
                transition-duration: var(--transition--duration);
                transition-timing-function: var(--transition--timing-function);

                .wp-block-navigation__responsive-container-close,
                .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
                    opacity: 1;
                    translate: 0 0;
                    transition-duration: 1200ms;
                }

                .wp-block-navigation-item {
                    &:nth-child(0) { transition-delay: 300ms }
                    &:nth-child(1) { transition-delay: 400ms }
                    &:nth-child(2) { transition-delay: 500ms }
                    &:nth-child(3) { transition-delay: 600ms }
                    &:nth-child(4) { transition-delay: 700ms }
                    &:nth-child(5) { transition-delay: 800ms }
                    &:nth-child(6) { transition-delay: 900ms }
                    &:nth-child(7) { transition-delay: 1000ms }
                    &:nth-child(8) { transition-delay: 1100ms }
                }
            }
        }

        .wp-block-navigation__container {
            align-items: start;
        }

        .has-modal-open .wp-block-navigation__responsive-close {
            background-color: #ffffff;
            border-radius: var(--wp--custom--border-radius--block);
            padding: 40px;
            min-height: 100%;

            .wp-block-navigation-item__content {
                font-size: 30px;
                line-height: 45px;
                font-weight: 700;
                text-align: left;
            }
        }
    }
}

@media (min-width: 1025px) {
    .site-header {
        container: navigation;
        container-type: inline-size;

        > .wp-block-group {
            gap: clamp(10px, 1.58cqi, var(--wp--preset--spacing--60)) !important;
        }

        .wp-block-navigation {
            gap: inherit !important;
        }

        .wp-block-navigation + .wp-block-group {
            gap: inherit;
        }
    }

    body:not(.scrolling) {
        :has(.page-hero) .site-header {
            .wp-block-navigation-item__content {
                color: var(--wp--preset--color--accent-6);
            }
        }
    }
}

@media (min-width: 1121px) {
    .site-header {
        > .wp-block-group {
            gap: clamp(10px, 11px + 1.5cqi, var(--wp--preset--spacing--60)) !important;
        }
    }
}

@media (min-width: 1281px) {
    .site-header {
        > .wp-block-group {
            gap: clamp(10px, 6px + 3.5cqi, var(--wp--preset--spacing--60)) !important;
        }

        .wp-block-navigation + .wp-block-group {
            gap: 30px;
        }
    }
}

@media (min-width: 1440px) {
    .site-header {
        > .wp-block-group {
            gap: var(--wp--preset--spacing--60) !important;
        }
    }
}