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;
    clip-path: inset(0 0 0 round 0 0 var(--block-border-radius) var(--block-border-radius))
}

.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));
        clip-path: unset
    }

    @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 {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 540px;
  height: 100vh;
  max-height: 100vh;
  background-color: #ffffff;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevents outer double scrollbars */
}

.search-dropdown.is-active, 
.search-dropdown[aria-hidden="false"] {
  transform: translateX(0);
}

.search-dropdown predictive-search {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* This forces the empty state / content area to fill remaining height and scroll smoothly */
.predictive-search__empty-state {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 100%;
}

@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
    }
}