Search on mobile is driving me insane. Mag glass on click search box

I have some code below that i feel like should work just well but it appears to be breaking when i deploy.

All the code here: https://jsfiddle.net/82pmjqgn/

The search blob box just appearing over the content and not hidden. It should be hidden until it’s clicked and then appear underneath. Here are some images for more reference. Any help would be greatly appreciated.
// 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;
}
}

}

what it looks like
[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2019-03-08/1552076157-432684-screen-shot-2019-03-08-at-104830-am.png]
[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2019-03-08/1552076173-572635-screen-shot-2019-03-08-at-104914-am.png]
how it should look.

I set up a fiddle if anyone can help. https://jsfiddle.net/82pmjqgn/

Also in #CSS _↴