: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);
	z-index: 1050;
}

.sherlock_overlay.active, body.in_search .sherlock_overlay {
	visibility: visible;
	opacity: 1;
}

body.in_search .languages_ul {
	z-index: 1000;
}

.sherlock_results {
	position: absolute;
	top: calc(100% + 1px);
	left: -130px;
	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;
}

.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.sherlock_mobile_view {
	grid-template-columns: 1fr !important;
	grid-template-rows: 1fr 1fr 40px !important;
	grid-template-areas: "sherlock_results_left" "sherlock_results_right" "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_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(47vh - 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;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.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;
}

.sherlock_results {
	border: none;
}

@media screen and (max-width: 600px) {
	.sherlock_results {
		left: 0;
		min-width: auto;
		max-height: 67vh;
	}
}

@media screen and (max-width: 510px) {
	/*.sherlock_results {*/
	/*    left: -58px;*/
	/*    min-width: calc(100vw - 36px);*/
	/*}*/
	.sherlock_results ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
}

@media screen and (max-width: 420px) {
	.sherlock_results ul {
		grid-template-columns: 1fr;
	}
}

/* svg */
.sherlock_history li::before {
	background-image: url(/app/share/svg/sherlock-history.svg);
}

/* svg */