.block-search {
    padding: 0;
    margin: 0;
    width: auto !important;
    position: relative;

    .block-title {
        display: none;
    }
    .label > span {
        display: none;
    }
    .control {
        padding: 0 !important;
    }
    .search-autocomplete {
        display: none !important;
    }
    .searchautocomplete__active .search-flyout-quick-links {
        display: none;
    }

    .label {
        cursor: pointer;
        position: relative !important;
        clip: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0;
        display: flex;
        align-items: center;

        &:before {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: '\e615' !important;
            color: #5e696e !important;
            font-size: 1.6875rem !important;
            line-height: 1 !important;
        }
    }

    /* Flyout panel - drops down from header, full viewport width */
    .search-flyout {
        display: none;
        position: fixed;
        top: 140px;
        left: 0;
        right: 0;
        background: #fff;
        width: 100vw;
        height: 100dvh;
        max-height: none;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        @media (min-width: 768px) {
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
            transform-origin: top center;
            transform: translateY(-8px);
            padding: 12px 0 16px;
            height: auto;
            max-height: calc(100dvh - 140px);
        }
    }

    .search-flyout-quick-links {
        margin: 1.2rem 0 0;
        h2 {
            font-size: .9875rem;
            font-weight: 400;
            color: #818181;
            margin: 0 0 .5rem;
        }

        .search-quick-links {
            display: flex;
            flex-direction: column;
            a {
                font-size: .875rem;
                color: #22262a;
                padding: .25rem;
                display: flex;
                align-items: center;
                gap: .5rem;

                &:hover {
                   background-color: #F2F2F2;
                    border-radius: 6px;
                }
            }
        }
    }

    .form.minisearch.active {
        .search-flyout {
            display: block;
            animation: searchFlyoutIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
        }
    }

    .form.minisearch.closing {
        .search-flyout {
            display: block;
            animation: searchFlyoutOut .3s cubic-bezier(.4, 0, .2, 1) forwards;
        }
    }

    .search-flyout-field {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transition: padding 0.3s ease, border-bottom 0.3s ease;
        margin: 1.5rem 0 2.5rem;

        @media (min-width: 768px) {
            margin: 0 0 2.5rem;
        }

        /* When autocomplete is active (has results or search term) */
        /*&:has(> .mst-searchautocomplete__autocomplete._active) {
            padding-bottom: 20px;
        }*/
    }

    #search.input-text {
        position: relative;
        display: block;
        left: 0;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 1.5rem 0;
        box-sizing: border-box;
        font-size: 1.2rem;
        font-weight: 500;
        font-family: inherit;
        color: #22262a;
        background-color: #fff;
        outline: none;
        border: none;
        border-radius: 0;

        @media (min-width: 768px) {
            border-bottom: 1px solid #ccc;

        }

        &::placeholder {
            color: #86868b;
        }

        &:focus {
            box-shadow: none;
        }
    }

    .search-flyout-icon {
        position: absolute;
        left: 0;
        top: 2px;
        z-index: 1;
        color: #86868b;

        svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
        }
    }

    /*.search-flyout-reset {
        position: absolute;
        right: 48px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: #86868b;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: color .15s ease;

        &:hover {
            color: #1d1d1f;
        }

        svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }
    }*/

    /*.search-flyout-submit {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: #86868b;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: color .15s ease;

        &:hover {
            color: #1d1d1f;
        }

        svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    }*/

    .search-flyout-autocomplete {
        display: block;
        width: 100%;
        order: 2;
    }

    .search-flyout-results {
        margin-top: 4px;
    }

    .mst-searchautocomplete__autocomplete {
        display: none;
        position: static;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100%;
        margin: 0;
        border: 0;
        box-shadow: none;

        &._active {
            display: block;
        }

        .mst-searchautocomplete__wrapper {
            max-height: none;
            overflow-y: visible;
            padding: 8px 0 4px;
            display: block;
            margin: 1rem 0;
        }

        .mst-searchautocomplete__index-title {
            margin: 0;
            font-size: .9875rem;
            font-weight: 400;
            text-transform: capitalize;
            color: #22262a;
        }

        .mst-searchautocomplete__empty-result {
            padding: 20px 25px;
            color: #22262a;
            font-size: .9875rem;
        }

        .mst-searchautocomplete__results {
            height: auto;
            overflow: visible;
        }

        .mst-searchautocomplete__show-all {
            text-align: center;
            position: relative;

            a {
                margin: .575rem;
                font-weight: 400;
                font-size: .875rem;
                color: #22262a;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .mst-searchautocomplete__index.popular {
            ul {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                padding: 4px 25px 16px;

                li {
                    float: none;
                    padding: 0;
                    margin: 0;

                    .title {
                        display: flex;
                        align-items: center;
                        font-size: .8125rem;
                        font-weight: 400;
                        color: #1d1d1f;
                        background: transparent;
                        padding: 6px 0;
                        border-radius: 0;
                        text-decoration: none;

                        &:hover {
                            color: #06c;
                        }

                        &:before {
                            content: '';
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            margin-right: 8px;
                            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
                            background-size: contain;
                            flex-shrink: 0;
                            opacity: .5;
                        }
                    }
                }
            }
        }

        .mst-searchautocomplete__close {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            transform: translateY(-6%);
            right: 10px;
            bottom:auto;
            margin: 0;
            padding: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 1.875rem;
            font-weight: 400;

            @media (min-width: 768px) {
                font-size: 1.375rem;
            }
        }

        .mst-searchautocomplete__item.magento_catalog_product {
            display: flex;
            align-items: center;
            padding: 5px 0;

            &:last-child {
                border-bottom: none;
            }

            .mst-product-image-wrapper {
                width: 44px;
                height: 44px;
                overflow: hidden;
                background: #f5f5f7;
                margin-right: .5rem;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    display: block;
                }
            }

            .meta {
                flex: 1;
                min-width: 0;
            }

            .title {
                margin-bottom: 0;

                a {
                    font-size: .875rem;
                    font-weight: 400;
                    color: #1d1d1f;
                    text-decoration: none;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }

            .mst-searchautocomplete__highlight {
                color: #1d1d1f;
                font-weight: 600;
            }

            .store {
                display: none;
            }
        }
    }

    .actions {
        display: none;
    }
}

/* Curtain - covers page content below nav */
.search-curtain {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(232, 232, 232, .4%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
}

.search-curtain.active {
    display: block;
    animation: curtainIn .3s ease forwards;
}

.search-flyout-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;

    &:hover {
        background: none;
        border: none;
    }

    svg {
        height: 1.25rem;
        stroke: #22262a;
        stroke-width: 2;
    }
}

body.search-open {
    overflow: hidden;
}




@keyframes searchFlyoutIn {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes searchFlyoutOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes curtainIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile: full-screen search modal (<=768px) */
@media (max-width: 768px) {
    .block-search {
        .form.minisearch.active .search-flyout {
            animation: searchFlyoutInMobile .35s cubic-bezier(.4, 0, .2, 1) forwards;
        }

        .form.minisearch.closing .search-flyout {
            animation: searchFlyoutOutMobile .25s cubic-bezier(.4, 0, .2, 1) forwards;
        }

        .mst-searchautocomplete__autocomplete {

            .mst-searchautocomplete__empty-result {
                padding: 1rem 0;
            }
        }

        .search-curtain {
            display: none !important;
        }
    }

    @keyframes searchFlyoutInMobile {
        0% {
            opacity: 0;
            transform: translateY(16px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes searchFlyoutOutMobile {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(16px);
        }
    }
}