/* SEARCHBAR */
.header_search-dropdown {
    display: none;
}

.header_search-dropdown.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    max-width: calc(0px + 1200 * var(--scale));
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 5px;
    padding: 0 calc(0px + 54 * var(--scale));
    top: 8vh;
    max-height: 84vh;
    height: min-content;
}

.header_search-dropdown .header_searchbar {
    width: 100%;
    height: calc(0px + 100 * var(--scale));
    position: relative;
    padding: calc(0px + 30 * var(--scale)) 0 calc(0px + 30 * var(--scale)) calc(0px + 80 * var(--scale));
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.2176 24.5065L37.4392 34.728C37.7984 35.0875 38.0002 35.575 38 36.0833C37.9998 36.5916 37.7977 37.0789 37.4382 37.4382C37.0787 37.7975 36.5912 37.9992 36.0829 37.9991C35.5746 37.9989 35.0873 37.7968 34.728 37.4373L24.5065 27.2157C21.4509 29.5824 17.6084 30.6962 13.7608 30.3304C9.91321 29.9646 6.34946 28.1468 3.79455 25.2467C1.23965 22.3466 -0.114498 18.5822 0.00759267 14.7192C0.129684 10.8561 1.71884 7.18471 4.45178 4.45178C7.18471 1.71884 10.8561 0.129684 14.7192 0.00759267C18.5822 -0.114498 22.3466 1.23965 25.2467 3.79455C28.1468 6.34946 29.9646 9.91321 30.3304 13.7608C30.6962 17.6084 29.5824 21.4509 27.2157 24.5065H27.2176ZM15.2007 26.5983C18.224 26.5983 21.1235 25.3973 23.2613 23.2594C25.3992 21.1216 26.6002 18.2221 26.6002 15.1988C26.6002 12.1755 25.3992 9.27598 23.2613 7.13817C21.1235 5.00035 18.224 3.79934 15.2007 3.79934C12.1774 3.79934 9.27788 5.00035 7.14006 7.13817C5.00225 9.27598 3.80124 12.1755 3.80124 15.1988C3.80124 18.2221 5.00225 21.1216 7.14006 23.2594C9.27788 25.3973 12.1774 26.5983 15.2007 26.5983Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: calc(0px + 38 * var(--scale));
    font-size: calc(0px + 32 * var(--scale));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    border-radius: 5px;
}

.header_search-result {
    border-top: var(--border-blue);
    padding: calc(0px + 42 * var(--scale)) 0;
    display: none;
    flex-direction: column;
    gap: 24px;
    padding-right: 5px !important;
    position: relative;
}

.header_search-result:empty {
    border: none;
    padding: 0;
}

.result_item {
    border: 1px dashed var(--main-color);
    border-radius: 12px;
    padding: 4px calc(0px + 54 * var(--scale)) 4px calc(0px + 26 * var(--scale));

    display: flex;
    gap: calc(0px + 20 * var(--scale));
    align-items: center;
}

.result_item-pic {
    width: calc(0px + 166 * var(--scale));
    height: calc(0px + 166 * var(--scale));
}

.result_item-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.result_item-name {
    font-size: calc(0px + 26 * var(--scale));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: calc(0px + 1 * var(--scale));
}

.result_item-name a {
    color: var(--secondary-color);
}

.result_item-brand {
    font-size: calc(0px + 18 * var(--scale));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--main-color);
    margin-bottom: calc(0px + 22 * var(--scale));
}

.result_item-params {
    display: flex;
    gap: calc(0px + 22 * var(--scale));
    margin-bottom: calc(0px + 5 * var(--scale));
}

.result_item-param {
    display: flex;
    align-items: center;
    color: var(--secondary-color);
    font-size: calc(0px + 14 * var(--scale));
    font-weight: 900;
    gap: 3px;
}

.result_item-param .product_icon {
    display: block;
    width: calc(0px + 29 * var(--scale));
    height: calc(0px + 29 * var(--scale));
    background-repeat: no-repeat;
    background-position: center;
}

.result_item-rating {
    display: flex;
}

.result_item-rating .star {
    display: block;
    width: calc(0px + 18 * var(--scale));
    height: calc(0px + 18 * var(--scale));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.result_item-price {
    position: relative;
    margin-left: auto;

    display: grid;
    grid-auto-rows: min-content;
    grid-template-areas:
        'price-discount .'
        'price-old price-actual'
        'buy-btn buy-btn';
    gap: 0 calc(0px + 16 * var(--scale));


}

.result_item-price-discount {
    grid-area: price-discount;
    display: flex;
    align-items: center;
    width: fit-content;
    height: calc(0px + 21 * var(--scale));
    background-color: var(--discount-color);
    border-radius: 4px;
    padding: 0 calc(0px + 12 * var(--scale));;
    font-size: calc(0px + 11 * var(--scale));
    font-weight: 600;
    color: white;
    text-align: center;
    margin: 0 0 8px;
    bottom: 100%;
}

.result_item-price-old {
    grid-area: price-old;
    color: var(--oldprice-color);
    font-size: calc(0px + 25 * var(--scale));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: line-through;
    white-space: nowrap;
}

.result_item-price-actual {
    grid-area: price-actual;
    color: var(--main-color);
    font-size: calc(0px + 25 * var(--scale));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: auto;
    white-space: nowrap;
}

.btn.result-buy {
    grid-area: buy-btn;
    height: calc(0px + 45 * var(--scale));
    border-radius: calc(0px + 10 * var(--scale));
    width: fit-content;
    margin: 8px 0 0 auto;
    font-size: calc(0px + 18 * var(--scale));
}

.noavail-search {
    color: var(--invalid-color);
    font-weight: bold;
}

@media (min-width: 768px) {
    .header_search-total {
        display: none;
    }
}

@media (max-width: 767px) {
    .header_nav {
        display: none;
    }

    .header_search-dropdown.open {
        position: fixed;
        max-width: calc(100% - 30px);
        bottom: 100px;
        padding: 0 6px;
        top: unset;
    }

    .header_search-dropdown .header_searchbar {
        padding: 15px 0 15px 28px;
        background-size: 16px;
        border-bottom: var(--border-blue);
        border-radius: 0;
        width: calc(100% - 12px);
        height: auto;
        font-size: 16px;
        margin: 0 6px;
    }

    .header_search-dropdown .header_searchbar.empty {
        border-bottom: none;
    }

    .header_search-result {
        border: none;
        gap: 6px;
        max-height: 320px;
    }

    .result_item {
        border-radius: 4px;
        padding: 8px;
    }

    .result_item-pic {
        width: 75px;
        height: 75px;
        min-width: 75px;
    }

    .result_item-name {
        font-size: 15px;
        padding-bottom: 5px;
    }

    .result_item-brand {
        font-size: 12px;
    }

    .result_item-params {
        gap: 10px;
    }

    .result_item-param {
        font-size: 8px;
        white-space: nowrap;
    }

    .result_item-param .product_icon {
        width: 16px;
        height: 22px;
    }

    .result_item-price-discount {
        height: 9px;
        font-size: 7px;
        line-height: 5px;
        padding: 0 4px;
        border-radius: 2px;
        margin-bottom: 4px;
    }

    .result_item-price-old, .result_item-price-actual {
        font-size: 14px;
    }

    .btn.result-buy {
        height: 20px;
        font-size: 12px;
        margin-top: 4px;
    }

    .result_item-rating .star {
        width: 10px;
        height: 10px;
    }

    .header_search-total,.header_search-all {
        display: block;
        padding: 8px 0;
        text-align: center;
        color: var(--main-color);
        font-size: 12px;
        font-weight: 500;
    }

    .header_search-total span {
        color: var(--secondary-color);
        font-weight: 700;
    }
}