search-dropdown {
    color: var(--nav-text-color);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    overflow: auto;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: all .25s ease-in;
    scroll-behavior: smooth
}

.sticked search-dropdown {
    --announcement-bar-height: 0px !important
}

@media screen and (max-width:767px) {

    search-dropdown:has(.predictive-search__empty-state),
    search-dropdown:has(.predictive-search__results) {
        height: calc(100vh - var(--header-height-mobile) - var(--announcement-bar-height))
    }

    @supports (height:100dvh) {

        search-dropdown:has(.predictive-search__empty-state),
        search-dropdown:has(.predictive-search__results) {
            height: calc(100dvh - var(--header-height-mobile) - var(--announcement-bar-height))
        }
    }
}

@media screen and (min-width:768px) {
    search-dropdown {
        height: auto;
        max-height: calc(100vh - var(--header-height-desktop) - var(--announcement-bar-height) - 30px)
    }

    @supports (height:100dvh) {
        search-dropdown {
            max-height: calc(100dvh - var(--header-height-desktop) - var(--announcement-bar-height) - 30px)
        }
    }
}

search-dropdown[aria-hidden=false] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: all .25s ease-out
}

@media screen and (prefers-reduced-motion:reduce) {
    search-dropdown[aria-hidden=false] {
        transition-duration: 1ms
    }
}

@media screen and (prefers-reduced-motion:reduce) {
    search-dropdown {
        transition-duration: 1ms;
        scroll-behavior: auto
    }
}

.search-dropdown__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    z-index: -2;
    background-color: var(--body-overlay-color);
    visibility: hidden;
    opacity: 0;
    transition: height 0s 1s, visibility .25s ease-in, opacity .25s ease-in
}

[data-search-dropdown-overlay-visible] .search-dropdown__overlay {
    height: 100%;
    opacity: 1;
    visibility: visible;
    transition: height 0s, visibility .25s ease-out, opacity .25s ease-out
}

.search-dropdown__close {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: 0 0
}

@media screen and (max-width:767px) {

    [data-search-dropdown-open]:has(.predictive-search__empty-state),
    [data-search-dropdown-open]:has(.predictive-search__results) {
        overflow: hidden
    }
}