/* =========================================================
   MINDEMEZ FILTER
   ========================================================= */

#MindemezMain
.mindemez-filter-panel {
	position: relative !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #fff !important;

	border: 0 !important;
	border-bottom:
		1px solid #efefef !important;
}


#MindemezMain
.mindemez-filter-panel[hidden] {
	display: none !important;
}


/* =========================================================
   FILTER ROW + CLEAR
   ========================================================= */

#MindemezMain
.mindemez-main__filter-row {
	position: sticky !important;

	display: flex !important;
	align-items: center !important;

	top: 90px !important;

	width: 100% !important;

	padding: 0 !important;

	background: #fff !important;

	z-index: 41 !important;
}


#MindemezMain
.mindemez-main__filter-button {
	position: relative !important;

	display: flex !important;

	align-items: center !important;
	justify-content: space-between !important;

	flex: 1 1 auto !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 8px !important;
}


/* =========================================================
   CLEAR BESIDE FILTER
   ========================================================= */

#MindemezMain
.mindemez-filter-toolbar-clear {
	-webkit-appearance: none !important;
	appearance: none !important;

	position: absolute !important;

	left: 55px !important;
	top: 0 !important;

	display: flex !important;

	align-items: center !important;

	height: 30px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;

	color: #000 !important;

	font-family:
		Arial,
		Helvetica,
		sans-serif !important;

	font-size: 14px !important;
	font-weight: 400 !important;

	line-height: 1 !important;

	text-decoration: underline !important;
	text-underline-offset: 3px !important;

	cursor: pointer !important;

	z-index: 3 !important;
}


#MindemezMain
.mindemez-filter-toolbar-clear[hidden] {
	display: none !important;
}


/* =========================================================
   INNER
   ========================================================= */

#MindemezMain
.mindemez-filter__inner {
	display: grid !important;

	grid-template-columns:
		minmax(0, 1fr)
		280px !important;

	width: 100% !important;

	margin: 0 !important;

	padding:
		20px
		10px !important;

	background: #fff !important;
}


/* =========================================================
   FILTER GROUPS
   ========================================================= */

#MindemezMain
.mindemez-filter__filters {
	display: grid !important;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		) !important;

	gap: 40px !important;

	padding-right:
		40px !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

#MindemezMain
.mindemez-filter__heading {
	margin:
		0 0 12px !important;

	padding: 0 !important;

	font-family:
		Arial,
		Helvetica,
		sans-serif !important;

	font-size:
		14px !important;

	font-weight:
		400 !important;

	line-height:
		1.2 !important;

	letter-spacing:
		.1rem !important;

	color:
		#000 !important;
}


/* =========================================================
   OPTIONS
   ========================================================= */

#MindemezMain
.mindemez-filter__options {
	display: flex !important;

	flex-direction:
		column !important;

	gap:
		8px !important;
}


#MindemezMain
.mindemez-filter__option {
	position:
		relative !important;

	display:
		inline-flex !important;

	align-items:
		center !important;

	gap:
		8px !important;

	width:
		max-content !important;

	margin:
		0 !important;

	padding:
		0 !important;

	font-size:
		14px !important;

	color:
		#000 !important;

	cursor:
		pointer !important;
}


#MindemezMain
.mindemez-filter__option input {
	position:
		absolute !important;

	width:
		1px !important;

	height:
		1px !important;

	opacity:
		0 !important;

	pointer-events:
		none !important;
}


/* =========================================================
   NORMAL CHECKBOX
   Mood / Orientation
   ========================================================= */

#MindemezMain
.mindemez-filter__box {
	position:
		relative !important;

	display:
		block !important;

	width:
		12px !important;

	height:
		12px !important;

	flex:
		0 0 12px !important;

	border:
		1px solid #000 !important;

	background:
		#fff !important;

	box-sizing:
		border-box !important;
}


#MindemezMain
.mindemez-filter__option
input:checked
+
.mindemez-filter__box:not(.mindemez-filter__color)::after {
	content:
		"" !important;

	position:
		absolute !important;

	top:
		2px !important;

	left:
		2px !important;

	width:
		6px !important;

	height:
		6px !important;

	background:
		#000 !important;
}


/* =========================================================
   COLORS — CIRCLES
   ========================================================= */

#MindemezMain
.mindemez-filter__color {
	width:
		14px !important;

	height:
		14px !important;

	flex:
		0 0 14px !important;

	border-radius:
		50% !important;

	border:
		1px solid transparent !important;

	background:
		#aaa !important;
}


/* GRAY / GREY */

#MindemezMain
.mindemez-filter__color[data-color="gray"],
#MindemezMain
.mindemez-filter__color[data-color="grey"] {
	background:
		#999 !important;
}


/* YELLOW */

#MindemezMain
.mindemez-filter__color[data-color="yellow"] {
	background:
		#e8cf45 !important;
}


/* BLACK */

#MindemezMain
.mindemez-filter__color[data-color="black"] {
	background:
		#000 !important;
}


/* WHITE */

#MindemezMain
.mindemez-filter__color[data-color="white"] {
	background:
		#fff !important;

	border-color:
		#bbb !important;
}


/* BLUE */

#MindemezMain
.mindemez-filter__color[data-color="blue"] {
	background:
		#54728c !important;
}


/* GREEN */

#MindemezMain
.mindemez-filter__color[data-color="green"] {
	background:
		#6b7d62 !important;
}


/* BROWN */

#MindemezMain
.mindemez-filter__color[data-color="brown"] {
	background:
		#80624d !important;
}


/* RED */

#MindemezMain
.mindemez-filter__color[data-color="red"] {
	background:
		#b8554e !important;
}


/* ORANGE */

#MindemezMain
.mindemez-filter__color[data-color="orange"] {
	background:
		#cf8241 !important;
}


/* SELECTED COLOR */

#MindemezMain
.mindemez-filter__option
input:checked
+
.mindemez-filter__color {
	outline:
		1px solid #000 !important;

	outline-offset:
		2px !important;
}


/* =========================================================
   SORT
   ========================================================= */

#MindemezMain
.mindemez-filter__sort {
	padding-left:
		20px !important;

	border-left:
		1px solid #efefef !important;
}


#MindemezMain
.mindemez-filter__sort-options {
	display:
		flex !important;

	flex-direction:
		column !important;

	align-items:
		flex-start !important;

	gap:
		8px !important;
}


#MindemezMain
.mindemez-filter__sort-option {
	-webkit-appearance:
		none !important;

	appearance:
		none !important;

	margin:
		0 !important;

	padding:
		0 !important;

	border:
		0 !important;

	background:
		transparent !important;

	color:
		#000 !important;

	font-size:
		14px !important;

	text-align:
		left !important;

	cursor:
		pointer !important;
}


#MindemezMain
.mindemez-filter__sort-option.is-active {
	text-decoration:
		underline !important;

	text-underline-offset:
		3px !important;
}


/* =========================================================
   ACTIONS
   ONLY APPLY
   ========================================================= */

#MindemezMain
.mindemez-filter__actions {
	grid-column:
		1 / -1 !important;

	display:
		flex !important;

	align-items:
		center !important;

	width:
		100% !important;

	margin-top:
		20px !important;

	padding-top:
		18px !important;

	border-top:
		1px solid #efefef !important;
}


/* =========================================================
   APPLY
   ========================================================= */

#MindemezMain
.mindemez-filter__apply {
	-webkit-appearance:
		none !important;

	appearance:
		none !important;

	display:
		inline-flex !important;

	align-items:
		center !important;

	justify-content:
		center !important;

	min-width:
		96px !important;

	height:
		36px !important;

	margin:
		0 !important;

	padding:
		0 16px !important;

	border:
		1px solid #000 !important;

	border-radius:
		0 !important;

	background:
		#fff !important;

	color:
		#000 !important;

	font-size:
		14px !important;

	cursor:
		pointer !important;
}


/* =========================================================
   LOADING
   ========================================================= */

#MindemezMain
[data-main-products].is-filtering {
	opacity:
		.35 !important;

	pointer-events:
		none !important;

	transition:
		opacity .12s linear !important;
}


/* =========================================================
   EMPTY
   ========================================================= */

#MindemezMain
.mindemez-filter-empty {
	grid-column:
		1 / -1 !important;

	width:
		100% !important;

	padding:
		40px 10px !important;

	text-align:
		center !important;

	font-size:
		14px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 989px) {

	#MindemezMain
	.mindemez-main__filter-row {
		top:
			78px !important;
	}


	#MindemezMain
	.mindemez-filter-toolbar-clear {
		left:
			52px !important;

		height:
			26px !important;
	}


	#MindemezMain
	.mindemez-filter__inner {
		display:
			block !important;

		padding:
			18px 10px !important;
	}


	#MindemezMain
	.mindemez-filter__filters {
		display:
			block !important;

		padding:
			0 !important;
	}


	#MindemezMain
	.mindemez-filter__group {
		margin-bottom:
			24px !important;
	}


	#MindemezMain
	.mindemez-filter__sort {
		margin-top:
			6px !important;

		padding:
			18px 0 0 !important;

		border-left:
			0 !important;

		border-top:
			1px solid #efefef !important;
	}


	#MindemezMain
	.mindemez-filter__actions {
		margin-top:
			24px !important;
	}

}