:root {
    --sherlock-font-size: 14px;
    --sherlock-h3-font-size: 13px;
    --sherlock_grey: #f2f2f2;
    --sherlock_transition: all .5s cubic-bezier(0.54, 0.22, 0.22, 0.97);
    --sherlock_accent_color: red;
}
.sherlock_overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    visibility: hidden;
    opacity: 0;
    transition: var(--sherlock_transition);
}
.sherlock_overlay.active, body.in_search .sherlock_overlay {
    visibility: visible;
    opacity: 1;
}

.sherlock_results {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    min-width: 450px;
    background: #FFF;
    color: #000;
    font-size: var(--sherlock-font-size);
    line-height: 1.4em;
    transition: var(--sherlock_transition);
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
}
.sherlock_results.active, body.in_search .sherlock_results {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.sherlock_results .h3 {
    font-size: var(--sherlock-h3-font-size);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .1em;
    white-space: nowrap;
    line-height: 1.2em;
    padding: 0 0 .5em 0;
}
.sherlock_results a {
    color: #000;
    text-decoration: none;
}
.sherlock_results a:hover, .sherlock_results a.sherlock_selected {
    color: var(--sherlock_accent_color);
}
.sherlock_prod_price {
    font-weight: bold;
    color: #000;
    margin: 0 7px 0 0;
}
.sherlock_prod_price::after {
    content: 'грн';
    font-size: 8px;
    position: relative;
    margin: 0 0 0 2px;
    top: -5px;
    letter-spacing: .05em;
}
body[data-lang="en"] .sherlock_prod_price::after {
    content: 'UAH';
}
.sherlock_prod_oldprice {
    position: relative;
    opacity: .65;
    color: #000;
}
.sherlock_prod_oldprice::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: 45%;
    height: 1px;
    background: red;
    opacity: .85;
    transform: rotate(-12deg);
}
.sherlock_prod_price_red {
    color: red;
}

.sherlock_results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 40px;
    gap: 0;
    grid-template-areas: "sherlock_results_left sherlock_results_right" "sherlock_results_footer sherlock_results_footer";
}
.sherlock_results.swaped_columns {
    grid-template-areas: "sherlock_results_right sherlock_results_left" "sherlock_results_footer sherlock_results_footer";
}
.sherlock_results.sherlock_mobile_view {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr 40px !important;
    grid-template-areas: "sherlock_results_right" "sherlock_results_left" "sherlock_results_footer" !important;
}
.sherlock_results.without_footer {
    grid-template-rows: 1fr;
    grid-template-areas: "sherlock_results_left sherlock_results_right";
}
.sherlock_results.without_footer.sherlock_mobile_view {
    grid-template-rows: 1fr 1fr !important;
    grid-template-areas: "sherlock_results_left" "sherlock_results_right" !important;
}
.sherlock_results.sherlock_results.without_footer.swaped_columns {
    grid-template-areas: "sherlock_results_right sherlock_results_left";
}
.sherlock_results_left {
    grid-area: sherlock_results_left;
    background: var(--sherlock_grey);
}
.sherlock_results_right {
    grid-area: sherlock_results_right;
}
.sherlock_results_left, .sherlock_results_right {
    padding: 10px 12px 2px 12px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}
.sherlock_results.sherlock_mobile_view .sherlock_results_left,
.sherlock_results.sherlock_mobile_view .sherlock_results_right {
    max-height: calc(50vh - 43px);
}
.sherlock_results.without_footer.sherlock_mobile_view .sherlock_results_left,
.sherlock_results.without_footer.sherlock_mobile_view .sherlock_results_right {
    max-height: calc(50vh - 23px);
}
.sherlock_results.without_footer .sherlock_results_left, .sherlock_results.without_footer .sherlock_results_right {
    max-height: calc(100vh - 100px);
}
.sherlock_results_footer {
    grid-area: sherlock_results_footer;
    background: var(--sherlock_accent_color) !important;
    color: #FFF !important;
    line-height: 40px;
    text-align: center;
}
.sherlock_results ul {
    list-style: none;
    margin: 0 0 10px 0;
}
.sherlock_results ul.pop_prods li {
    margin: 0 0 8px 0;
}
.sherlock_results_prods_ul li {
    margin: 0 0 4px 0;
}
.sherlock_prod_link {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 8px;
}
.sherlock_prod_letters {}
.sherlock_prod_image {
    display: flex;
    align-items: flex-start;
    align-self: flex-start;
    margin: 3px 0 0 0;
    height: 56px;
}
.sherlock_prod_image img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}
.sherlock_prod_title {
    display: block;
    font-size: 11px;
    line-height: 14px;
    max-height: 42px;
    margin: 0 0 2px 0;
    overflow-y: hidden;
}

.sherlock_results_loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    transition: var(--sherlock_transition);
    background: green;
}
.sherlock_results.loading .sherlock_results_loader {
    background: var(--sherlock_accent_color);
    height: 2px;
}

.sherlock_popular_cats ul, .sherlock_results_cats ul {}
.sherlock_popular_cats ul li, .sherlock_results_cats ul li {
    padding: 0 0 4px 0;
}
.sherlock_popular_cats ul li a, .sherlock_results_cats ul li a {
    display: block;
    position: relative;
    padding: 0 0 0 1.5em;
}
.sherlock_popular_cats ul li a:hover::before,
.sherlock_results_cats ul li a:hover::before,
.sherlock_popular_cats ul li a.sherlock_selected::before,
.sherlock_results_cats ul li a.sherlock_selected::before
{
    background-color: var(--sherlock_accent_color);
}
.sherlock_popular_cats ul li a::before, .sherlock_results_cats ul li a::before {
    content: '';
    position: absolute;
    top: .6em;
    left: 0;
    width: 1em;
    height: 1px;
    background: rgba(0,0,0,.25);
}

.sherlock_history {}
.sherlock_history li {
    position: relative;
    padding: 0 0 4px 1.5em;
    cursor: pointer;
}
.sherlock_history li:hover {
    color: var(--sherlock_accent_color);
}
.sherlock_history li::before {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 10px;
    height: 10px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .5;
}
.sherlock_history li:hover::before {
    opacity: 1;
}

@media screen and (max-width:480px) {
    .sherlock_results {
        min-width: auto;
    }
}

/* svg */
.sherlock_history li::before {
    background-image: url("data:image/svg+xml,%3Csvg height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m276 138v109.716l72.809 72.809c7.811 7.811 7.811 20.474 0 28.284-7.811 7.811-20.474 7.81-28.284 0l-78.667-78.667c-3.751-3.75-5.858-8.838-5.858-14.142v-118c0-11.046 8.954-20 20-20s20 8.954 20 20zm58.667-138h-157.334c-41.89 0-83.217 14.722-116.284 43.478v-23.478c0-11.046-8.954-20-20-20s-20 8.954-20 20v78.667c0 11.046 9.031 20 20 20h78.667c11.046 0 20-8.954 20-20s-8.954-20-20-20h-37.833c25.314-24.405 59.485-38.667 95.45-38.667h157.333c75.727 0 137.334 61.607 137.334 137.333v157.333c0 75.727-61.607 137.334-137.333 137.334h-157.334c-75.726 0-137.333-61.607-137.333-137.333v-78.667c0-11.046-8.954-20-20-20s-20 8.954-20 20v78.667c0 97.782 79.551 177.333 177.333 177.333h157.333c97.783 0 177.334-79.551 177.334-177.333v-157.334c0-97.782-79.551-177.333-177.333-177.333z'/%3E%3C/svg%3E")
}
/* svg */