.searchResult {
    position: absolute !important;
    top: 100%;
    left: 0;
    border-radius: 13px;
    padding: 20px;
    background: #FFF;
    box-shadow: 20px 0 52px 0 rgba(147, 151, 173, 0.30);
    width: 998px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.searchEmptyRequest {
    display: flex;
    align-items: flex-start;
    column-gap: 12px;
}
.searchMenu {
    width: 328px;
    flex: none;
    row-gap: 20px;
    display: grid;
}
.searchEmptyRequest .searchRecommend {
    flex: 1;
}
.searchEmptyRequest .searchBrands {
    width: 170px;
    flex: none;
}
.searchResult--title {
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    color: #383838;
    display: flex;
    justify-content: space-between;
    flex: none;
}
.searchResultHistory .searchResult--title {
    margin-bottom: 4px;
    padding: 4px 0 4px 16px;
}
.searchResultHistory--clear {
    color: #2C63AC;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
}
.searchResultHistory__items {
    display: grid;
}
.searchResultHistory__item {
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background 0.2s ease;
}
.searchResultHistory__item--icon {
    font-size: 16px;
    width: 16px;
    flex: none;
    margin-right: 8px;
}
.searchResultHistory__item--icon:before {
    color: #383838;
    opacity: 0.3;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.searchResultHistory__item--delete {
    width: 12px;
    font-size: 12px;
    margin-left: 8px;
}
.searchResultHistory__item--delete:before {
    opacity: 0;
    color: #2C63AC;
    transition: opacity 0.2s ease;
}
.searchResultHistory__item--value {
    color: #383838;
    font-size: 14px;
    line-height: 18px;
    flex: 1;
    transition: color 0.2s ease;
}
.searchResultHistory__item:hover {
    background: rgba(44, 99, 172, 0.08);
}
.searchResultHistory__item:hover .searchResultHistory__item--value {
    color: #2C63AC;
}
.searchResultHistory__item:hover .searchResultHistory__item--icon:before {
    color: #2C63AC;
}
.searchResultHistory__item:hover .searchResultHistory__item--delete:before {
    opacity: 0.3;
}

.searchResultCategories .searchResult--title {
    padding: 4px 16px;
    margin-bottom: 4px;
}
.searchResultCategories__items {
    display: grid;
}
.searchResultCategories__item {
    padding: 10px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background 0.2s ease;
}
.searchResultCategories__item--icon {
    font-size: 16px;
    width: 16px;
    flex: none;
    margin-right: 8px;
}
.searchResultCategories__item--icon:before {
    color: #383838;
    opacity: 0.3;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.searchResultCategories__item--value {
    color: #383838;
    font-size: 14px;
    line-height: 18px;
    flex: 1;
    transition: color 0.2s ease;
}
.searchResultCategories__item--count {
    color: #383838;
    font-size: 14px;
    line-height: 18px;
    margin-left: 8px;
    transition: color 0.2s ease;
}
.searchResultCategories__item:hover {
    background: rgba(44, 99, 172, 0.08);
}
.searchResultCategories__item:hover .searchResultCategories__item--value {
    color: #2C63AC;
}
.searchResultCategories__item:hover .searchResultCategories__item--icon:before {
    color: #2C63AC;
}
.searchResultCategories__item:hover .searchResultCategories__item--count {
    color: #2C63AC;
}

.searchBrands {
    padding: 11px 16px 16px 16px;
    border-radius: 7px;
    background: #F5F7FA;
}
.searchBrands .searchResult--title {
    padding: 4px 0;
    text-align: center;
    margin-bottom: 16px;
}
.searchBrands__items {
    display: grid;
    row-gap: 8px;
}
.searchBrands__item {
    height: 80px;
    width: 100%;
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.82);
}
.searchBrands__item img {
    max-width: 100%;
    max-height: 100%;
}
.searchBrands--button {
    margin-top: 22px;
}

.searchRecommend .searchResult--title {
    padding: 4px 24px;
    margin-bottom: 8px;
}
.searchRecommend__items {
    max-height: 660px;
    padding-right: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 8px;
    padding-bottom: 46px;
}
.searchRecommend__items--threeCol {
    grid-template-columns: repeat(3, 1fr);
}
.searchRecommend__items--fourCol {
    grid-template-columns: repeat(4, 1fr);
}
.searchRecommend__items .product:hover {
    box-shadow: none;
}
.searchRecommend__items .product__img {
    height: 114px;
}
.searchRecommend__items .product__info__item {
    overflow: hidden;
}
.searchRecommend__items .product__info__item>p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchResponse {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 48px;
    row-gap: 19px;
}
.searchResponse .searchRecommend__items {
    padding-right: 0;
}
.searchResponse__result {
    flex: 1;
}
.searchResponse__result .searchResult--title {
    padding: 4px 24px;
    margin-bottom: 8px;
}
.searchResponse__items {
    display: grid;
    row-gap: 6px;
    max-height: 408px;
    padding-right: 10px;
    position: relative;
}
.searchResponse__result--button {
    margin-top: 20px;
}
.searchEmpty {
    padding: 40px 20px;
    border-radius: 10px;
    background: rgba(44, 99, 172, 0.05);
    width: 100%;
}
.searchEmpty--img {
    width: 110px;
    display: block;
    margin: 0 auto 20px;
}
.searchEmpty--text {
    color: #71859E;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
}
.searchEmpty--text b {
    font-weight: 700;
}

@media screen and (max-width: 1300px) {
    .searchResult {
        width: 920px;
    }
    .searchMenu {
        width: 250px;
    }
}

@media screen and (max-width: 1200px) {
    .searchResult {
        width: calc(100vw - 88px);
        top: calc(100% + 2px);
    }
}

@media screen and (min-width: 1001px) {
    .searchResponse .searchBrands {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 16px;
    }
    .searchResponse .searchBrands .searchResult--title {
        width: 147px;
        padding: 4px 12px;
        margin-right: 12px;
        flex: none;
        text-align: left;
        margin-bottom: 0;
    }
    .searchResponse .searchBrands__items {
        display: flex;
        align-items: center;
        column-gap: 8px;
        flex: 1;
    }
    .searchResponse .searchBrands__item {
        height: 44px;
        padding: 9px;
        flex: 1;
    }
    .searchResponse .searchBrands--button {
        width: 138px;
        margin-left: 22px;
        margin-top: 0;
    }
}

@media screen and (max-width: 1000px) {
    .searchEmptyRequest {
        flex-wrap: wrap;
        column-gap: 22px;
    }
    .searchEmptyRequest .searchMenu {
        order: 1;
        margin-bottom: 22px;
    }
    .searchEmptyRequest .searchRecommend {
        order: 3;
    }
    .searchEmptyRequest .searchBrands {
        order: 2;
    }
    .searchMenu {
        width: 100%;
    }
    .searchEmptyRequest .searchBrands {
        width: 162px;
    }
    .searchRecommend__items--threeCol {
        grid-template-columns: repeat(2, 1fr);
    }
    .searchRecommend__items--fourCol {
        grid-template-columns: repeat(2, 1fr);
    }

    .searchResponse {
        column-gap: 22px;
    }
    .searchResponse .searchBrands {
        width: 162px;
    }
    .searchResponse .searchResponse__result {
        width: 100%;
        flex: auto;
    }
    .searchResponse .searchRecommend {
        flex: 1;
    }
}

@media screen and (max-width: 700px) {
    .searchResult {
        width: calc(100vw - 40px);
        max-height: calc(100vh - 46px);
        padding: 20px 12px;
    }
    .searchEmptyRequest .searchBrands {
        order: 3;
        width: 100%;
    }
    .searchEmptyRequest .searchRecommend {
        order: 2;
        width: 100%;
        margin-bottom: 22px;
    }
    .searchResultHistory .searchResult--title {
        padding: 4px 0 4px 10px;
    }
    .searchResultHistory__item {
        padding: 8px 10px;
    }
    .searchResultCategories .searchResult--title {
        padding: 4px 10px;
    }
    .searchResultCategories__item {
        padding: 10px;
    }
    .searchRecommend .searchResult--title {
        padding: 4px 10px;
    }
    .searchRecommend__items {
        max-height: none;
        padding-right: 0;
        grid-template-columns: repeat(1, 1fr);
    }
    .searchRecommend__items--threeCol {
        grid-template-columns: repeat(1, 1fr);
    }

    .searchResponse .searchMenu {
        order: 1;
    }
    .searchResponse .searchResponse__result {
        order: 2;
    }
    .searchResponse .searchRecommend {
        order: 3;
        width: 100%;
    }
    .searchResponse .searchBrands {
        order: 4;
        width: 100%;
    }
    .searchResponse__items {
        max-height: none;
    }
}