.search-box .autocomplete-items {
    display: none;
}

#search:checked~.search-box .autocomplete-items {
    display: block;
}

.autocomplete-items {
    width: 100%;
    position: absolute;
    top: auto;
    right: auto;
    max-width: 768px;
}

.autocomplete-items ul {
    background-color: white;
    padding: 15px 20px;
    border-radius: 0px;
    border: #eee solid 1px;
    box-shadow: 0px 12px 26px 0px rgba(0, 0, 0, 0.10), 0px 48px 48px 0px rgba(0, 0, 0, 0.09), 0px 108px 65px 0px rgba(0, 0, 0, 0.05), 0px 193px 77px 0px rgba(0, 0, 0, 0.01), 0px 301px 84px 0px rgba(0, 0, 0, 0.00);
    list-style: none;
    max-height: 420px;
    overflow-y: auto;
}

.autocomplete-items li {
    padding: 5px 8px;
    white-space: break-spaces;
    cursor: pointer;
}

.autocomplete-items span {
    font-weight: 550;
    width: fit-content;
    margin-right: 10px;
}

.autocomplete-items span.product {
    color: #22cea6;
}

.autocomplete-items span.service {
    color: #ff8a56;
}

.autocomplete-items li:hover {
    color: #FF8A56
}

.autocomplete-items li:first-child {
    border-radius: 6px 6px 0 0;
}

.autocomplete-items li:last-child {
    border-radius: 0 0 6px 6px;
}

.autocomplete-active {
    background-color: #ededed;
}

@media (max-width: 768px) {
    .autocomplete-items {
        right: unset;
        left: 0;
        width: 100%;
        z-index: 9;
    }
}