#search-preview-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    left: 50%;
    max-width: 100vw;
    position: absolute;
    top: 105%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1000
}

@media screen and (min-width: 500px) {
    #search-preview-box {
        max-height:60vh;
        overflow-y: auto
    }
}

#search-preview-box[hidden] {
    display: none
}

#search-preview-box.is-open {
    display: block
}

.search-preview-columns {
    display: block;
    gap: 16px;
    width: 100%
}

.search-preview-column {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.search-preview-primary-column {
    flex: 1;
    min-width: 120px
}

.search-preview-secondary-column {
    flex: 2;
    min-width: 180px
}

.search-preview-icon.red {
    fill: red !important
}

#search-preview-box [role="option"].active {
    background: #e8e8e8;
    color: #222;
    outline: 2px solid #06c;
    outline-offset: -2px
}

#search-preview-box [role="option"][aria-selected="true"] {
    background: #e8e8e8;
    color: #222;
    outline: 2px solid #06c;
    outline-offset: -2px
}

#search-preview-box .search-preview-columns {
    margin-top: 16px;
    width: 100%
}

.search-preview-group {
    border-bottom: 1px solid #d8d8d8
}

#search-preview-box .search-preview-group-heading {
    align-items: center;
    color: #666;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    margin-left: 16px;
    padding-top: 5px;
    text-align: left;
    text-transform: uppercase
}

.search-preview-icon {
    color: #666;
    height: 21px;
    width: 21px
}

.flame-icon {
    color: #ff6b35;
    fill: currentColor
}

#search-preview-box :focus-visible {
    outline: 2px solid #2a508f;
    outline-offset: 2px
}

#search-preview-box .search-preview-product-item {
    align-items: center;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color 0.15s
}

#search-preview-box .search-preview-product-item img {
    background: #f0f0f0;
    height: 80px;
    margin-left: 10px;
    object-fit: cover;
    width: 80px
}

#search-preview-box .search-preview-product-item .product-title {
    align-items: center;
    color: #333;
    display: flex;
    font-size: 13px !important;
    justify-content: center;
    margin-left: 20px
}

#search-preview-box .search-preview-full-search-btn {
    background: #000;
    border: none;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 16px auto 10px auto;
    padding: 10px 0;
    text-align: center;
    transition: background 0.2s;
    width: 30%
}

#search-preview-box .search-preview-full-search-btn[hidden] {
    display: none
}

#search-preview-box .search-preview-full-search-btn:hover,#search-preview-box .search-preview-full-search-btn:focus {
    outline: 2px solid #0073e6;
    outline-offset: 2px
}

#search-preview-box .search-preview-product-grid {
    display: block;
    margin: 10px
}

#search-preview-box .search-preview-recent-searches,#search-preview-box .search-preview-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    margin-left: 0;
    text-align: left
}

#search-preview-box .search-preview-recent-item,#search-preview-box .search-preview-category-item {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    background: #f2f2f2;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    color: #222;
    cursor: pointer;
    display: -webkit-box;
    font-size: 13px;
    margin: 0;
    overflow: hidden;
    padding: 4px 14px;
    white-space: normal;
    word-break: break-word
}

#search-preview-box .search-preview-recent-item:focus,#search-preview-box .search-preview-category-item:focus {
    background-color: #e8e8e8;
    outline: 2px solid #06c;
    outline-offset: -2px
}

#search-preview-box .search-preview-clear-recent-btn {
    background: none;
    border: none;
    color: #2a508f;
    cursor: pointer;
    display: inline;
    font-size: 13px;
    font-weight: 400;
    margin-left: 10px;
    padding: 0;
    text-decoration: none;
    text-transform: none
}

#search-preview-box .search-preview-clear-recent-btn[hidden] {
    display: none
}

#search-preview-box .search-preview-clear-recent-btn:hover,#search-preview-box .search-preview-clear-recent-btn:focus {
    color: #2a508f;
    text-decoration: underline
}

#search-preview-box .search-preview-recent-searches,#search-preview-box .search-preview-categories,#search-preview-box .search-preview-suggestions {
    cursor: pointer;
    margin: 10px;
    text-align: left
}

#search-preview-box .search-preview-suggestions .search-preview-suggestion-item:hover,#search-preview-box .search-preview-products .search-preview-product-item:hover,#search-preview-box .search-preview-recent-searches .search-preview-recent-item:hover,#search-preview-box .search-preview-categories .search-preview-category-item:hover {
    background-color: #e8e8e8
}

#search-preview-box .search-preview-recent-item,#search-preview-box .search-preview-category-item,#search-preview-box .search-preview-suggestion-item {
    align-items: center;
    border-radius: 20px;
    color: #333;
    display: flex;
    font-size: 13px !important;
    gap: 12px;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color 0.15s
}

#search-preview-box .search-preview-suggestion-item {
    justify-content: space-between
}

#search-preview-box .search-preview-suggestion-text {
    flex: 1 1 auto
}

#search-preview-box .suggestion-arrow {
    color: #888;
    flex: 0 0 18px;
    height: 18px;
    width: 18px
}

@media (max-width: 499px) {
    html.search-preview-open, body.search-preview-open {
        height:100%;
        overflow: hidden
    }

    body.search-preview-open #containerMain > div.responsiveWrap > header > nav > .global-header__container > *:not(.flex-center) {
        display: none
    }

    body.search-preview-open #containerMain > div.responsiveWrap > header > nav > div {
        display: block
    }

    body.search-preview-open #containerMain > div.responsiveWrap > header > nav .flex-center {
        padding: 10px 16px 5% 16px
    }

    body.search-preview-open {
        height: 100%;
        overflow: hidden;
        touch-action: none
    }

    #search-preview-box {
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border-radius: 3px;
        height: calc(100dvh - 51px);
        left: 0;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: 50%;
        position: fixed;
        right: 0;
        top: 57px;
        transform: none;
        width: 100vw;
        z-index: 100000
    }

    #search-preview-box .search-preview-columns {
        display: block
    }

    #search-preview-box .search-preview-columns {
        flex-direction: column;
        gap: 0
    }

    #search-preview-box .search-preview-column {
        min-width: 0;
        width: 100%
    }

    #search-preview-box .search-preview-group-heading {
        margin-left: 8px
    }

    #search-preview-box .search-preview-recent-searches, #search-preview-box .search-preview-categories, #search-preview-box .search-preview-suggestions {
        font-size: 13px;
        margin-left: 8px;
        margin-top: 10px
    }

    #search-preview-box .search-preview-product-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    #search-preview-box .search-preview-column:last-child {
        order: 2
    }

    #search-preview-box .search-preview-column:first-child {
        order: 1
    }

    .combobox:has(#search-preview-box.is-open) form {
        width: 90%
    }

    .preview-search-close-btn {
        align-self: center;
        background-color: unset;
        border: unset;
        color: #2a508f;
        display: none;
        font-size: 13px;
        font-weight: 500;
        justify-self: center;
        margin-left: 60px;
        padding: unset;
        text-transform: unset
    }
}

#search-preview-box .search-preview-suggestion-bold {
    font-weight: 600
}

#search-preview-box.is-loading {
    cursor: progress
}

.sr-only {
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}