/* Deliberately scoped to mobile; desktop layout remains in the existing CSS. */
@media (max-width: 767px) {
    #header .search.--mobile-suggestions .search-over {
        display: block;
        position: fixed;
        top: var(--mobile-search-top, 129px);
        left: var(--mobile-search-left, 15px);
        right: auto;
        bottom: auto;
        width: var(--mobile-search-width, calc(100% - 30px));
        max-width: none;
        max-height: var(--mobile-search-height, 60vh);
        margin: 0;
        z-index: 1000;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    }
    #header .search.--mobile-suggestions .search-over:empty { display: none; }
    #header .search.--mobile-suggestions .search-whisp {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        flex-direction: column;
        box-shadow: none;
    }
    #header .search.--mobile-suggestions .search-left-side,
    #header .search.--mobile-suggestions .search-right-side {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 12px;
    }
    #header .search.--mobile-suggestions .search-products a > div:nth-of-type(2) {
        min-width: 0;
    }
    #header .search.--mobile-suggestions .search-products a .name {
        overflow-wrap: anywhere;
    }
    #header .search.--mobile-suggestions .search-products a .name + div {
        flex-wrap: wrap;
        gap: 4px 8px;
    }
}