.custom-search-modal {
    --color-background: 21,25,28;
    background: RGBA(var(--color-background),.8);
    height: 100dvh;
    border-radius: var(--popup-corner-radius);
    border-color: RGBA(var(--color-foreground),var(--popup-border-opacity));
    border-style: solid;
    border-width: var(--popup-border-width);
    -webkit-box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) RGBA(var(--color-shadow),var(--popup-shadow-opacity));
    box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) RGBA(var(--color-shadow),var(--popup-shadow-opacity));
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    padding: 3rem 0;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: fixed;
    z-index: 1000;
    opacity: 1
}

@media (min-width: 990px) {
    .custom-search-modal {
        padding:4rem 2rem;
        min-height: 12rem !important;!i;!;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content
    }
}

.custom-search-modal__content {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0
}

.custom-search-modal__close-button {
    margin-left: auto
}

.custom-search-modal__close-button .icon-close,.custom-search-modal__close-button--text {
    color: #fff
}

.custom-search-modal__close-button.theme_cta--text::after {
    background-color: #fff
}

.custom-search-modal__form {
    max-width: unset;
    width: 100dvw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.custom-search-modal__form--header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-inline:2rem}

@media (min-width: 990px) {
    .custom-search-modal__form--header {
        -webkit-box-align:start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding-inline:0}
}

.custom-search-modal__form--header .field {
    background: 0 0
}

@media (min-width: 990px) {
    .custom-search-modal__form--header .field {
        margin-top:3.2rem
    }
}

.custom-search-modal__form--header .field::after,.custom-search-modal__form--header .field::before {
    content: none
}

.custom-search-modal__form--header .field__input {
    background: 0 0;
    padding: 0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.custom-search-modal__form--header .field__input~.field__label {
    opacity: 1;
    left: 0;
    -webkit-transition: opacity var(--duration-default) ease-in-out;
    transition: opacity var(--duration-default) ease-in-out
}

.custom-search-modal__form--header .field__input:focus~.field__label {
    opacity: 0;
    font-size: 2.5rem;
    left: 0;
    top: calc(1rem + var(--inputs-border-width))
}

.custom-search-modal__form .field-vendors {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 4rem;
    padding-inline:2rem}

@media (min-width: 990px) {
    .custom-search-modal__form .field-vendors {
        gap:1rem;
        padding-inline:0}
}

.custom-search-modal__form .field-vendors__callout {
    width: 100%
}

.custom-search-modal__form .field-vendors::after,.custom-search-modal__form .field-vendors::before {
    content: none
}

.custom-search-modal__form .field-vendors .vendor__button {
    --color-secondary-button-text: 255,255,255;
    --color-secondary-button: 30,30,28;
    height: auto;
    top: 0;
    left: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    max-width: calc(50% - 5px);
    padding: .8rem .2rem .7rem;
    pointer-events: all;
    position: relative;
    min-height: unset;
    border-color: rgba(255,255,255,.3)
}

@media (min-width: 990px) {
    .custom-search-modal__form .field-vendors .vendor__button {
        -ms-flex-preferred-size:auto;
        flex-basis: auto
    }
}

.custom-search-modal__form .field-vendors .vendor__button:after {
    -webkit-box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) RGBA(255,255,255,.3),0 0 0 var(--buttons-border-width) RGBA(255,255,255,.3);
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) RGBA(255,255,255,.3),0 0 0 var(--buttons-border-width) RGBA(255,255,255,.3)
}

.custom-search-modal .custom-search-results {
    overflow-y: auto;
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content;
    height: var(--search-results-height);
    position: relative;
    display: block;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.custom-search-modal .custom-search-results::-webkit-scrollbar {
    display: none
}

.custom-search-modal .custom-search-results__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 3rem;
    padding-bottom: 5rem
}

@media (min-width: 990px) {
    .custom-search-modal .custom-search-results__links {
        gap:2.4rem;
        padding-bottom: 0
    }
}

.custom-search-modal .custom-search-results__link {
    background: 0 0;
    cursor: pointer;
    border: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin-left: 2rem;
    text-align: start
}

@media (min-width: 990px) {
    .custom-search-modal .custom-search-results__link {
        margin-left:0
    }
}

.custom-search-modal .custom-search-results__link .brand-name {
    border-bottom: 1px solid #fff
}

.custom-search-modal .custom-search-results__link .view-label {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: -.25em
}

@media (min-width: 990px) {
    .custom-search-modal .custom-search-results__link {
        padding-inline:0
    }

    .custom-search-modal .custom-search-results__link .view-label {
        top: -.5em;
        bottom: auto
    }
}

.custom-search-modal .custom-search-results__products {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    gap: .3rem
}

@media (min-width: 990px) {
    .custom-search-modal .custom-search-results__products {
        -webkit-box-orient:horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap
    }
}

.custom-search-modal .custom-search-results__product {
    height: auto;
    width: 100%
}

.custom-search-modal .custom-search-results__product .card__inner.ratio::before {
    --ratio-percent: 60%
}

.custom-search-modal .custom-search-results__product .card__inner.ratio .card__media img {
    -o-object-fit: contain;
    object-fit: contain;
    background-color: var(--card-image-background)
}

@media (min-width: 990px) {
    .custom-search-modal .custom-search-results__product {
        width:25%
    }

    .custom-search-modal .custom-search-results__product .card__content {
        padding-block:.5rem}
}

.custom-search-modal .custom-search-results__button {
    --color-secondary-button-text: 255,255,255;
    --color-secondary-button: 30,30,28;
    color: currentColor;
    border: 1px solid RGBA(var(--color-foreground),.75);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 4rem auto 12rem;
    width: calc(100% - 40px)
}

@media (min-width: 990px) {
    .custom-search-modal .custom-search-results__button {
        width:-webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 4rem auto
    }
}

.custom-search-modal .custom-search-results__button:after {
    -webkit-box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) RGBA(255,255,255,.3),0 0 0 var(--buttons-border-width) RGBA(255,255,255,.3);
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) RGBA(255,255,255,.3),0 0 0 var(--buttons-border-width) RGBA(255,255,255,.3)
}

details[open] .custom-search-modal .modal-overlay::after {
    background-color: transparent
}