ul#cart li.seeks predictive-search,
#global__mobile_predictive_search {
    /* This is to hide the original predictive-search widget. */
    /* display: none; */
}

ul#cart li.seeks predictive-search-recomm {
    /* AB test:
    The ID for this component has been removed in the markup
    because some styles below apply to elements outside the new component.
    The ID should be added via JS so the styles below apply. */
    display: none;
}

.nav-container {
    --content-to-show-p: 75px;
    --search-input-h: 40px;
    --margin-below-titles: 20px;
    --open-search-icon-w: 20px;
}

predictive-search-recomm#psr_header div,
predictive-search-recomm#psr_header label,
predictive-search-recomm#psr_header span {
    background-color: #fff;
    color: #3D3D3D;
    line-height: initial;
}

predictive-search-recomm#psr_header a,
predictive-search-recomm#psr_header a:visited,
predictive-search-recomm#psr_header a:hover {
    background-color: #fff;
    color: #3D3D3D;
}

predictive-search-recomm#psr_header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 13px;
    border-bottom: solid 1px #3D3D3D;
    height: 40px;
    overflow: hidden;

    & button {
        background-color: transparent;
        color: #000;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    button:hover {
        color: #000;
        background-color: transparent;
    }

    label[for='Search-recomm'] {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: stretch;
        flex: 1;

        & .content-to-show {
            display: flex;

            & .mobile_icon_search {
                display: none !important;
            }

            & form {
                display: flex;

                .input-wrapper {
                    display: flex;
                    align-items: stretch;
                    position: relative;
                    display: flex;
                    width: 100%;
                    /* Space for the reset button: */
                    /* padding-right: 36px; */

                    #open_search_recomm_form {
                        width: var(--open-search-icon-w);
                        margin-left: 15px;
                    }

                    #Search-recomm {
                        outline: none;
                        width: 190px;
                        border: none;
                        margin: 0 !important;
                        font-size: 14px;
                        transform: none;

                        line-height: 20px;
                        padding-left: 10px;
                        padding-bottom: 0;
                        border-bottom: none;
                        text-overflow: ellipsis;

                        &::placeholder {
                            color: #333;
                            font-family: brandon-grotesque, sans-serif;
                            font-size: 13px;
                            font-style: italic;
                            font-weight: 390;
                            text-align: left;
                        }

                        /* Native reset button (the X at the end) */
                        &::-webkit-search-cancel-button {
                            display: none;
                        }

                        &::-ms-clear {
                            display: none;
                            width: 0;
                            height: 0;
                        }
                    }

                    /* This button is not currently being used, but is here just in case. */
                    /* It resets the search field. */
                    & #reset_search_recomm {
                        display: none;
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        background-color: #ccc !important;
                        transform: translateY(-50%);
                        height: calc(var(--search-input-h) * 3/4);
                        width: auto;
                        aspect-ratio: 1/1 !important;
                        font-size: calc(var(--search-input-h) * 4/5);
                        font-weight: 100;
                        border-radius: 50%;

                        & svg {
                            background-color: transparent !important;
                        }
                    }
                }
            }

            & #predictive-search-recomm-container {
                display: none;
                grid-template-columns: 1fr 3fr;

                & #predictive-search-top-searches {
                    text-align: left;

                    & #top-searches {
                        padding: 16px;

                        & .top-searches-title {
                            font-weight: 500;
                            font-style: Bold;
                            font-size: 12px;
                            line-height: 200%;
                            margin-bottom: var(--margin-below-titles);
                        }

                        & .top-searches-terms {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;

                            & li {

                                & a {
                                    display: flex;
                                    align-items: center;
                                    padding: 0 16px;
                                    font-weight: 400;
                                    font-style: Regular;
                                    font-size: 18px;
                                    line-height: 200%;

                                    & svg {
                                        margin-right: 5px;
                                    }
                                }
                            }
                        }
                    }
                }

                & #predictive-search-results {
                    padding: 16px;
                    text-align: left;

                    & #predictive-search-results-header {
                        margin-bottom: var(--margin-below-titles);
                    }

                    & #predictive-search-results-list {
                        display: grid;
                        grid-template-columns: repeat(5, 1fr);
                        gap: 16px;

                        & li.predictive-search-recomm__card {

                            /* This is the last <li> that contains the "Search..." link. */
                            &.search-for-link {
                                display: flex !important;
                                align-items: center;

                                & a.predictive-search-recomm__link {
                                    background-color: #fff8f5 !important;
                                    color: red !important;

                                    & .predictive-search-recomm__title {
                                        background-color: transparent;
                                        text-align: center;
                                        padding: 8px 0;
                                    }
                                }
                            }

                            & a.predictive-search-recomm__link {
                                width: 100%;
                                padding: 0 !important;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: stretch;
                                text-transform: uppercase;
                                text-align: center;
                                font-size: 12px;
                                line-height: 140%;

                                & .predictive-search-recomm__image {
                                    width: 100%;
                                    height: auto;
                                    margin-bottom: 8px;
                                }

                                & .predictive-search-recomm__title {
                                    font-weight: 500;
                                    font-style: Bold;
                                }

                                & .predictive-search-recomm__price {
                                    font-weight: 400;
                                    font-style: Medium;
                                }
                            }
                        }

                    }
                }
            }
        }
    }

    & #close_search_recomm_form {
        display: none;
        position: absolute;
        top: calc(var(--search-input-h));
        right: var(--content-to-show-p);
        width: var(--search-input-h);
        aspect-ratio: 1;

        & svg {
            width: 100%;
            height: 100%;
        }
    }
}

header .row:has(predictive-search-recomm#psr_header > label[for='Search-recomm']:focus-within) {
    padding: 0 !important;

    & .nav-container {
        position: relative;
        align-items: flex-start !important;

        & ul#cart {
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            width: 100%;
            justify-content: flex-start !important;

            &>li:not(.seeks) {
                display: none !important;
            }

            & li.seeks {
                width: 100%;

                & predictive-search-recomm#psr_header {
                    display: inline;
                    padding: 0;
                    margin: 0;

                    & .content-to-show {
                        display: block;
                        padding: var(--content-to-show-p);

                        & form {

                            & .input-wrapper {
                                border: none;

                                & #open_search_recomm_form {
                                    pointer-events: none;
                                }

                                & #Search-recomm {
                                    width: calc(100% - var(--open-search-icon-w));
                                    height: var(--search-input-h);
                                }

                                & #reset_search_recomm {
                                    /* Reset button is there to clean search input, but not used at the moment. */
                                    /* display: flex; */
                                }
                            }
                        }

                        & #predictive-search-recomm-container {
                            display: grid;
                        }
                    }

                    & #close_search_recomm_form {
                        display: flex !important;
                    }
                }
            }
        }
    }
}

@media (max-width: 980px) {
    #navigation:has(predictive-search-recomm#psr_header) {
        display: block !important;

        & .row {

            & .nav-container {

                & #logo {
                    display: none !important;
                }

                & nav {
                    display: none !important;
                }

                & ul#cart {
                    width: 100%;
                    justify-content: stretch;

                    &>li:not(.seeks) {
                        display: none !important;
                    }

                    & li.seeks {
                        width: 100%;

                        & predictive-search-recomm#psr_header {
                            border: 1px solid #e0e0e0;
                            margin: 0;
                            margin-left: 5px;
                            background-color: #fff;

                            /* Wrapper to handle click around the content */
                            & label[for='Search-recomm'] {

                                & .content-to-show {
                                    display: flex;
                                    flex: 1;

                                    & form {
                                        flex: 1;

                                        & .input-wrapper {
                                            padding: 0;
                                            flex-direction: row-reverse;

                                            #open_search_recomm_form {
                                                background-color: #3d3d3d;
                                                color: #fff;
                                                margin: 0;
                                                width: 40px;

                                                & svg {
                                                    width: 50%;
                                                    height: 50%;
                                                }
                                            }

                                            #Search-recomm {
                                                flex: 1;
                                                transform: none;
                                            }
                                        }
                                    }
                                }
                            }


                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 980px) {
    #navigation .row .nav-container ul#cart li.seeks:has(predictive-search-recomm#psr_header label[for='Search-recomm']:focus-within) {
        height: initial !important;
        position: fixed !important;
        inset: 0;

        & predictive-search-recomm#psr_header {
            display: flex !important;
            height: 100%;
            padding: 16px;
            margin: 0;
            border: none;

            & label[for='Search-recomm'] {
                display: flex;
                flex: 1;

                & .content-to-show {
                    padding: 0 !important;
                    flex-direction: column;

                    & form {
                        flex: none;

                        & .input-wrapper {
                            flex-direction: row;
                            align-items: center;

                            & #open_search_recomm_form {
                                background-color: transparent !important;
                                color: #3d3d3d !important;
                                width: 25px;
                                height: 25px;

                                & svg {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            & #Search-recomm {
                                font-size: 18px;

                                &::placeholder {
                                    font-style: normal !important;
                                    color: #3d3d3d88;
                                }
                            }
                        }
                    }

                    & #predictive-search-recomm-container {
                        display: flex !important;
                        flex-direction: column-reverse !important;
                        gap: 25px;


                        & #predictive-search-top-searches {


                            & #top-searches {
                                padding: 0;

                                & .top-searches-title {
                                    margin-bottom: 0;
                                    font-weight: 600;
                                }

                                & ul.top-searches-terms {


                                    & li {
                                        height: unset;
                                        padding: 3px 0;

                                        & a {
                                            padding: 0;
                                        }
                                    }
                                }
                            }
                        }

                        & #predictive-search-results {
                            padding: 0;
                            padding-top: 23px;
                            display: flex;
                            flex-direction: column;
                            height: unset !important;
                            overflow: hidden;

                            & h3 {
                                font-size: 12px;
                            }

                            & ul {
                                display: flex !important;
                                overflow-x: auto !important;
                                scrollbar-width: none;
                                gap: 12px !important;
                                padding-bottom: 12px;
                                margin: 0;

                                & li {
                                    display: inline-block;
                                    height: unset !important;
                                    min-width: 29% !important;

                                    & a {
                                        display: block;
                                        font-size: 10px !important;

                                        & img {}

                                        & .predictive-search-recomm__title {}

                                        & .predictive-search-recomm__price {}
                                    }
                                }
                            }
                        }
                    }
                }
            }

            & #close_search_recomm_form {
                top: 15px;
                right: 15px;
            }
        }

        & #global__predictive_search {
            display: none !important;
        }
    }
}

@media only screen and (max-width: 600px) {
    #shopify-section-header:has(predictive-search-recomm#psr_header) ~ .page-wrap {
        margin-top: 142px !important;
    }
}