.ui-jolisearch {
    max-width: 560px !important;
}

.ui-jolisearch.ui-menu {
    /*width: calc(180px * 4 + 2px) !important;*/
    border-radius: 0 0 30px 30px;
    box-shadow: none;
    background-color: #FAFAFA;
    border: 1px solid #BEBBBA;
}

#search_widget .form input.dropdown-open {
  border-radius: 30px 30px 0 0;
  border-bottom: none;
}

.ui-jolisearch.ui-menu .ui-menu-item {
    width: 33%;
    background: none;
}

/* Cancel padding-top on 4th element (we have 3 columns, not 4) */
@media (min-width: 577px) {
    .ui-jolisearch.ui-menu .jolisearch-container + .ui-menu-item:not(.jolisearch-container) + .ui-menu-item:not(.jolisearch-container) + .ui-menu-item:not(.jolisearch-container) {
        padding-top: 0 !important;
    }
}

/* All images on the same size with overflow hidden for zoom effect */
.ui-jolisearch .jolisearch-image {
    height: 90px;
    object-fit: cover;
}

/* Remove border on image hover (all states) */
.ui-jolisearch.ui-menu .ui-menu-item a:hover .jolisearch-image,
.ui-jolisearch.ui-menu .ui-menu-item .ui-state-focus .jolisearch-image,
.ui-jolisearch.ui-menu .ui-menu-item .ui-state-hover .jolisearch-image {
    border: 1px solid transparent !important;
}

.ui-jolisearch.ui-menu .ui-menu-item a {
    transition: background-color 0.3s ease;
}

.ui-jolisearch.ui-menu .ui-menu-item a:hover {
    background-color: #e8ece8 !important;
    border-radius: 6px;
}

/* Custom styling for category titles */
.ui-jolisearch .jolisearch-title {
    background: #bdc7bd;
    color: #023b1c;
    text-shadow: none;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: none;
}

.ui-jolisearch .jolisearch-title::after {
  content: ' ';
  display: inline-block;
  float: left;
  width: 1px;
  height: 1px;
  border-bottom: 7px solid transparent;
  border-right: 12px solid #bdc7bd;
  position: absolute;
  bottom: -8px;
  left: 0px;
}