:root {
	--ekm-search-normal-bg: #fff;
	--ekm-search-normal-fg: #191919;
	--ekm-search-highlight-bg: #f6f6f6;
	--ekm-search-highlight-fg: #333;
	--ekm-search-deemphasize-fg: #a9a9a9;
	--ekm-search-link-fg: #049AFF;
	--ekm-search-border: #e8e8e8;
	--ekm-search-slider: #049AFF;
	--ekm-search-price-fg: #00ABE7;
	--ekm-search-primary-bg: #049AFF;
	--ekm-search-primary-fg: #fff;
	--ekm-search-secondary-bg: #e9e9e9;
	--ekm-search-secondary-fg: #222;
	--ekm-search-atc-bg: var(--ekm-search-secondary-bg);
	--ekm-search-atc-fg: var(--ekm-search-secondary-fg);
	/*
	--ekm-search-category-bg //category search background color (default transparent).
	--ekm-search-category-fg //category search color (default inherit).
	--ekm-search-category-o-bg //option background color (default #fff).
	--ekm-search-category-o-fg //option color (default #000).
	*/
}

/* Suggested queries */

div.ekm-search-suggested-queries {
	position: absolute;
	z-index: 9999;
	box-sizing: border-box;
	background: var(--ekm-search-border);
}

div.ekm-search-suggested-query {
	margin: 1px;
	padding: 3px 6px;
	background: var(--ekm-search-normal-bg);
	color: var(--ekm-search-normal-fg);
	font-size: 1.4rem;
	line-height: 16px;
}

div.ekm-search-suggested-query.ekm-search-suggested-query-active {
	background-color: var(--ekm-search-highlight-bg);
}

div.ekm-search-suggested-query em {
	font-weight: bold;
	font-style: normal;
}

/* Predicted results */

div.ekm-search-predicted-results {
	position: absolute;
	z-index: 9999;
	box-sizing: border-box;
	background: var(--ekm-search-border);
	margin-top: -1px;
}

div.ekm-search-predicted-result {
	margin: 1px;
	padding: 9px;
	background: var(--ekm-search-normal-bg);
	color: var(--ekm-search-normal-fg);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

div.ekm-search-predicted-result:hover {
	background: var(--ekm-search-highlight-bg);
}

div.ekm-search-predicted-result-img {
	position: relative;
	flex: 0 0 80px;
	background: var(--ekm-search-secondary-bg, #fff);
	margin-right: 9px;
	overflow: hidden;
}

div.ekm-search-predicted-result-img::after {
	content: '';
	display: block;
	padding-bottom: 100%;
}

div.ekm-search-predicted-result-img img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

a.ekm-search-predicted-result-name-a {
	display: block;
	flex 1;
}

div.ekm-search-predicted-result-name {
	font-size: 1.3rem;
	font-weight: bold;
}

div.ekm-search-predicted-result-price {
	color: var(--ekm-search-price-fg);
	font-size: 1.3rem;
	margin-top: 0.8rem;
	font-weight: bold;
}

div.ekm-search-predicted-result-decription {
	font-size: 12px;
}

div.ekm-search-predicted-results-all {
	padding: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	background: var(--ekm-search-secondary-bg);
	color: var(--ekm-search-secondary-fg);
	display: grid;
	grid-template-areas: "a b c";
	grid-template-columns: 1rem 1fr 1rem;
	cursor:  pointer;
}

div.ekm-search-predicted-results-all-text {
	grid-area: b;
	color: var(--ekm-search-secondary-fg);
	font-size: 1.4rem;
	text-align: center;
}

div.ekm-search-predicted-results-all > i {
	grid-area: c;
}

/* Recent searches */

div.ekm-search-recent-searches {
	position: absolute;
	z-index: 9999;
	box-sizing: border-box;
	background: var(--ekm-search-border);
}

div.ekm-search-recent-searches-heading {
	margin: 1px 1px 0 1px;
	padding:  16px 16px 0 16px;
	display: flex;
	background: var(--ekm-search-normal-bg);
	color: var(--ekm-search-normal-fg);
}


div.ekm-search-recent-searches-heading-text {
	flex: 1 1 auto;
	font-weight: bold;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ekm-search-border);
	font-size: 1.4rem;
}

div.ekm-search-recent-searches-heading-clear {
	color: var(--ekm-search-link-fg);
	text-decoration: underline;
	font-size: 1.1rem;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ekm-search-border);
	cursor: pointer;
}

div.ekm-search-recent-searches-items {
	margin: 0 1px 1px 1px;
	padding: 8px 0 0;
	background: var(--ekm-search-normal-bg);
}

div.ekm-search-recent-searches-item {
	display: flex;
	padding: 8px 16px;
	cursor: pointer;
}

div.ekm-search-recent-searches-item-text {
	flex: 1 1 auto;
	text-transform: capitalize;
	font-size: 1.4rem;
}

div.ekm-search-recent-searches-item-text i {
	color:  var(--ekm-search-deemphasize-fg);
	margin-right: 8px;
}

div.ekm-search-recent-searches-item-clear {

}

div.ekm-search-recent-searches-item:hover {
	background: var(--ekm-search-highlight-bg);
	color: var(--ekm-search-highlight-fg);
}

/* Normal Search Styles */

#search-products div.ekm-search-page {
	padding-bottom: 25px;
}

@media only screen and (min-width: 768px) {
	#search-products div.ekm-search-page {
		padding-bottom: 95px;
	}
}

div.ekm-search-page.skeleton {
	opacity: 0.1;
}

div.ekm-search-page-header {
	padding: 21px;
	background: var(--ekm-search-normal-bg);
}

div.ekm-search-page-header h1 {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.7rem;
}

div.ekm-search-page-header-showing {
	font-size: 1.8rem;
	font-weight: 500;
}

@media only screen and (min-width: 768px) {
	div.ekm-search-page-header {
		padding: 0;
		background: none;
	}

	div.ekm-search-page-header h1 {
		font-size: 2.4rem;
	}
	div.ekm-search-page-header-showing {
		font-size: 1.2rem;
	}
}

div.ekm-search-page.skeleton div.ekm-search-page-header h1::after,
div.ekm-search-page.skeleton div.ekm-search-page-header-showing,
div.ekm-search-page.skeleton div.ekm-search-page-item-name::after {
	content: '';
	display: inline-block;
	height: 1em;
	width: 90%;
	max-width: 30ex;
	background: currentcolor;
	border-radius: 0.5em;
}

div.ekm-search-page.skeleton div.ekm-search-page-item-img::after {
	content: '';
	display: inline-block;
	height: 100%;
	width: 100%;
	background: currentColor;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

div.ekm-search-page.skeleton div.ekm-search-page-item-desc::before,
div.ekm-search-page.skeleton div.ekm-search-page-item-desc::after {
	content: '';
	white-space: pre;
	display: inline-block;
	height: 1em;
	width: 80%;
	background: currentColor;
	border-radius: 0.5em;
}

div.ekm-search-page.skeleton div.ekm-search-page-item-price::after {
	content: '';
	display: inline-block;
	height: 1em;
	width: 5ex;
	background: currentColor;
	border-radius: 0.5em;
}

div.ekm-search-page-showing-bar.skeleton{
	background: currentColor;
	border-radius: 0.5em;
	height: 3em;
}

div.ekm-search-page-pagination {
	grid-area: c;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}

@media only screen and (min-width: 768px) {
	div.ekm-search-page-pagination {
		grid-area: c / f / c / c;
	}

	div.ekm-search-page-attributes ~ div.ekm-search-page-pagination {
		grid-area: c;
	}
}

span.ekm-search-page-pagination-button,
span.ekm-search-page-pagination-loadmore-button {
	display: inline-block;
	padding: 10px;
	border-radius: 2px;
	margin: 2px;
	flex: 0 0 auto;
	min-width: 3ch;
	text-align: center;
	box-sizing: content-box;
	background: var(--ekm-search-primary-bg);
	color: var(--ekm-search-primary-fg);
}

span.ekm-search-page-pagination-button:hover,
span.ekm-search-page-pagination-loadmore-button:hover {
	cursor: pointer;
}

span.ekm-search-page-pagination-button.current {
	cursor: default;
	background: #f0f0f0;
}

div.ekm-search-page-price-title,
div.ekm-search-page-attribute-name {
	font-size:  1.4rem;
	padding-bottom: 1.5rem;
	text-transform: capitalize;
	font-weight: 500;
}

div.ekm-search-page-attribute-name {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: space-around;
}

div.ekm-search-page-attribute-toggle {
	cursor: pointer;
	flex: 0 0 9px;
}


div.ekm-search-page-price-values,
div.ekm-search-page-attribute-values {
	font-size: 1.3rem;
	margin-top: 0.5em;
}

div.ekm-search-page-price-values {
	display:  flex;
	padding:  0 14px 16px;
}

div.ekm-search-page-price-range mwc-slider-range {
	--mdc-theme-primary: var(--ekm-search-slider);
}

div.ekm-search-page-price-value:first-child {
	flex: 1;
}

div.ekm-search-page-attribute-values {
	transition: grid-template-rows 0.7s ease, margin 0.7s ease;
	display: grid;
	grid-template-rows: 1fr;
}

div.ekm-search-page-attribute-values > div {
	overflow: hidden;
}

rect.vert-spar {
	transition: y 0.7s ease, height 0.7s ease;
}

div.ekm-search-page-attribute-name {
	transition: margin 0.7s ease, padding 0.7s ease;
}

div.ekm-search-page-attributes-collapsed div.ekm-search-page-attribute-name {
	padding: 0;
	margin: 0;
}

div.ekm-search-page-attributes-collapsed  div.ekm-search-page-attribute-values {
	grid-template-rows: 0fr;
	margin: 0;
}

div.ekm-search-page-attributes-collapsed  rect.vert-spar {
	y: 0;
	height: 10px;
}


div.ekm-search-page-body {
	display: grid;
	grid-template-areas: 
		"s" 
		"f"
		"p"
		"c";
	grid-template-columns: 100%;
	gap: 4px;
}

@media only screen and (min-width: 768px) {
	div.ekm-search-page-body {
		grid-template-areas: 
			"f s" 
			"f p"
			"f c";
		grid-template-columns: 253px auto;
		grid-template-rows: auto auto 1fr;
		gap: 28px;
		margin-top: 60px;
	}
}


div.ekm-search-page-attributes {
	grid-area: f;
	display: none;
}

.filters-visible div.ekm-search-page-attributes {
	display: block;
}

div.ekm-search-page-attributes.skeleton {
	background: currentcolor;
	border-radius: 0.5em;
}

@media only screen and (min-width: 768px) {
	div.ekm-search-page-attributes {
		display: block;
	}
}

div.ekm-search-page-attributes-title {
	padding: 25px;
	background: var(--ekm-search-normal-bg);
	color: var(--ekm-search-normal-fg);
	border-bottom: 1px solid var(--ekm-search-border);
	display: flex;
	align-items: center;
}

div.ekm-search-page-attributes-title-text {
	font-size: 1.6rem;
	font-weight: 700;
	flex: 1;
}

div.ekm-search-page-attributes-clear-all {
	text-decoration: underline;
	cursor: pointer;
}

div.ekm-search-page-price-range {
	background: var(--ekm-search-normal-bg);
	color: var(--ekm-search-normal-fg);
	padding: 0 14px;
}

div.ekm-search-page-attribute {
	background: var(--ekm-search-normal-bg);
	color: var(--ekm-search-normal-fg);
	padding: 20px 27px;
}

:is(div.ekm-search-page-attribute, div.ekm-search-page-price-range) 
+ :is(div.ekm-search-page-attribute, div.ekm-search-page-price-range) {
	padding-top: 1.6rem;
	border-top: 1px solid var(--ekm-search-border);
}

div.ekm-search-page-price-title {
	padding: 20px 14px 0;
}

div.ekm-search-page-attribute-value,
div.ekm-search-page-attribute-value label {
	font-size: 1.3rem;
	vertical-align: text-bottom;
}

div.ekm-search-page-showing-bar {
	grid-area: s;
	display: grid;
	grid-template-areas:
		"f v"
		"t t";
	grid-template-columns: 1fr 1fr;
	color: var(--ekm-search-normal-fg);
}

@media only screen and (min-width: 768px) {
	div.ekm-search-page-showing-bar {
		grid-area: s / f / s / s;
		grid-template-areas: "f t v";
		grid-template-columns: 1fr auto 1fr;
	}

	div.ekm-search-page-attributes ~ div.ekm-search-page-showing-bar {
		grid-area: s;
	}
}

div.ekm-search-page-toggle-filter {
	grid-area: f;
	padding: 16px;
}

div.ekm-search-page-toggle-filter-btn {
	font-size: 1.3rem;
	cursor: pointer;
}


div.ekm-search-page-showing-bar-views {
	grid-area: v;
	padding: 16px;
	text-align: right;
}

div.ekm-search-page-showing-bar-views span {
	font-size: 13px;
	font-weight: 500;
	vertical-align: middle;
}

div.ekm-search-page-showing-bar-views .ekm-search-view-toggle {
	display: inline;
	vertical-align: middle;
	margin-left: 10px;
	cursor: pointer;
}

div.ekm-search-page-showing-bar-text {
	padding: 16px;
	grid-area: t;
	background: var(--ekm-search-normal-bg);
	text-align: center;
	font-size: 1.4rem;
}

@media only screen and (min-width: 768px) {
	div.ekm-search-page-toggle-filter {
		background: var(--ekm-search-normal-bg);
	}

	div.ekm-search-page-toggle-filter > * {
		display: none;
	}

	div.ekm-search-page-showing-bar-views {
		background: var(--ekm-search-normal-bg);
	}
}

div.ekm-search-page-items {
	grid-area: p / f / p / p;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: max-content;
	gap: 4px;
}

.list-view-style div.ekm-search-page-items {
	grid-template-columns: repeat(1, 1fr);
}

@media only screen and (min-width: 768px) {
	div.ekm-search-page-items {
		grid-area: p / f / p / p;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	div.ekm-search-page-attributes ~ div.ekm-search-page-items {
		grid-area: p;
	}
}

div.ekm-search-page-item {
	background: var(--ekm-search-normal-bg);
	padding: 12px;
}

.list-view-style div.ekm-search-page-item {
	display: grid;
	grid-template-areas: "a b";
	grid-template-columns: minmax(41%, 150px) 1fr;
	gap: 20px;
}

@media only screen and (min-width: 768px) {
	.list-view-style div.ekm-search-page-item {
		grid-template-columns: 150px 1fr;
		gap: 15px;
	}
}

div.ekm-search-page-item-img {
	position: relative;
	background: var(--ekm-search-secondary-bg);
	overflow: hidden;
}

div.ekm-search-page-item-img::before {
	content: '';
	display: block;
	padding-bottom: 100%;
}

div.ekm-search-page-item-img img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	flex-shrink: 0;
}

div.ekm-search-page-item-img > .ekm-product-image-badge-wrapper {
	display:  block;
}

.list-view-style div.ekm-search-page-item-info {
	display: grid;
	grid-area: b;
	grid-template-areas:
		"a b"
		"c d";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: max-content 1fr;
}

div.ekm-search-page-item-name {
	margin: 0.7rem 0;
}

div.ekm-search-page-item-name a {
	font-weight: bold;
	font-size: 1.4rem;
}

.list-view-style div.ekm-search-page-item-name {
	grid-area: a / a / b / b;
	margin-bottom: 13px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ekm-search-border);
}

@media only screen and (min-width: 768px) {
	.list-view-style div.ekm-search-page-item-name {
		grid-area: a;
		align-self: end;
	}
}

div.ekm-search-page-item-price {
	font-size: 1.4rem;
	font-weight: 600;
	padding-top: 12px;
	margin-bottom: 13px;
	border-top: 1px solid var(--ekm-search-border);
}

.list-view-style div.ekm-search-page-item-price {
	grid-area: c;
	border-top: 0;
	padding-top: 0;
}

@media only screen and (min-width: 768px) {
	.list-view-style div.ekm-search-page-item-price {
		grid-area: b;
		text-align: right;
		align-self: end;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--ekm-search-border);
	}
}

div.ekm-search-page-item-desc {
	display: none;
}

@media only screen and (min-width: 768px) {
	.list-view-style div.ekm-search-page-item-desc {
		display: block;
		grid-area: c;
	}
}

a.ekm-search-page-item-atc {
	display: none;
}

@media only screen and (min-width: 768px) {
	.list-view-style a.ekm-search-page-item-atc {
		display: block;
		grid-area: d;
		align-self: start;
		justify-self: right;
		padding: 10px 20px;
		border-radius: 3px;
		color: var(--ekm-search-atc-fg, #fff);
		background: var(--ekm-search-atc-bg, #049AFF);
		font-size: 13px;
		font-weight: 600;
	}
}

div.ekm-search-page-no-items {
	grid-area: f / f / p / p;
}

ekm-search-categories select {
	height: 100%;
	width: 100%;
	background-color: var(--ekm-search-category-bg, transparent);
	border: none;
	color: var(--ekm-search-category-fg, inherit);
}

ekm-search-categories select option {
	background-color: var(--ekm-search-category-o-bg, var(--ekm-search-category-bg, #fff));
	color: var(--ekm-search-category-o-fg, var(--ekm-search-category-fg, #000));
}