Поиск на мобильном телефоне сводит меня с ума. Mag стекло на поле поиска клика

Question

У меня есть код ниже, который, как мне кажется, должен работать просто хорошо, но, кажется, он ломается при развертывании.

Весь код здесь: https://jsfiddle.net/82pmjqgn/

Поле поискового блога просто появляется над содержимым и не скрывается.Он должен быть скрыт до щелчка, а затем появится под ним.Вот несколько изображений для справки.Любая помощь будет принята с благодарностью.

    // Search

.block-search .amsearch-close,
.block-search .amsearch-loupe {
    top: 43px;
 }

@media (min-width: 768px) {
    .block-search .form .search-autocomplete {
        top: 43px;
    }

    .block-search .amsearch-close,
    .block-search .amsearch-loupe {
        top: 30%;
     }

}

.form .search-autocomplete {
    top: 88px;
    margin-left: 0;
    margin-right: 0;
}

.block-search {


    .label {
        display: inline-block;
        float: none;
    }
    input {
        border-radius: 50px;
        height: 40px;
        padding-left: 20px;
        padding-right: 44px;
    }
    .control {
        border-top: 0;
        clear:none;
        margin: 0;
        padding: 0;
    }
    .action.search {
        background: #5a5a5a;
        border-radius: 50px;
        height: 34px;
        right: 4px;
        top: 3px;
        width: 34px;
    }
    .search-autocomplete ul:not(:empty) {
        border-color: #c2c2c2;
        border-top: 1px solid #c2c2c2;
    }
    .search-autocomplete ul {
        li {
            border-color: #c2c2c2;
            &:hover {
                background-color: #e5e5e5;
            }
            .amount {
                color: #444;
            }
        }
        .selected {
            background-color: #e5e5e5;
        }
    }
}

Вот как это выглядит в настоящее время.

Как это должно выглядеть.