.search-focus-close,
.search-focus-overlay {
    display: none;
}

@media (max-width: 767px) {
    body:not(.search-focus-open):has(.block-search:focus-within) {
        overflow: visible;
    }

    .block-search:focus-within:not(.search-focus-active) + .search-focus-overlay {
        display: none;
        position: static;
        z-index: auto;
        background: transparent;
    }

    .block-search:focus-within:not(.search-focus-active) {
        display: inline-block !important;
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        z-index: auto;
        width: 50% !important;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent;
        box-shadow: none;
    }

    .block-search:focus-within:not(.search-focus-active) .search-focus-close {
        display: none;
    }

    body.search-focus-open {
        overflow: hidden;
    }

    .search-focus-overlay.is-visible {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2147483646;
        background: rgba(0, 0, 0, 0.5);
    }

    .block-search.search-focus-active {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2147483647;
        width: 100% !important;
        max-width: none;
        height: 110px;
        margin: 0 !important;
        padding: 54px 18px 10px !important;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        text-align: left;
    }

    .block-search.search-focus-active #search_widget,
    .block-search.search-focus-active form {
        width: 100%;
    }

    .block-search.search-focus-active .search-focus-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 18px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #354047;
        font-size: 32px;
        font-weight: 300;
        line-height: 28px;
        cursor: pointer;
    }

    .block-search.search-focus-active .search_top form .text_input {
        height: 46px;
        padding: 8px 68px 8px 20px;
        border: 1px solid #dedede;
        border-radius: 24px;
        background: #fff;
        color: #354047;
        font-size: 16px;
        line-height: 28px;
    }

    .block-search.search-focus-active .search_top form .text_input::placeholder {
        color: #b8b8b8;
        opacity: 1;
    }

    .block-search.search-focus-active .search_top form button[type="submit"] {
        top: 0;
        right: 0;
        width: 62px;
        height: 46px;
        border-radius: 0 24px 24px 0;
        background: #303238;
        color: #fff;
        font-size: 24px;
        line-height: 46px;
    }

    .block-search.search-focus-active .search_top form button[type="submit"] span {
        line-height: 46px;
    }

    body.search-focus-open .searchbar-autocomplete {
        position: fixed !important;
        top: 110px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 2147483647 !important;
        width: 100% !important;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
}