.filters-on header,
.filters-on .header-nav {
	visibility: hidden;
	z-index: 0;
}



/* ================ FILTERS: THE TOGGLING BUTTON ================ */
.btn-show-filters {
	position: relative;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	padding: .3rem .9rem;
	background: #fff;
	color: var(--COLOR-1);
	letter-spacing: .045rem;
	text-transform: uppercase;
	border: 1px solid var(--COLOR-1);
}
.btn-show-filters:before {
	margin: 0 .9rem 0 0;
	font-family: 'FontAwesome';
	/*	content: "\f3f1";*/
	content: "\f1de";
	font-size: 1.65rem;
}
.btn-show-filters:hover {
	color: white;
	/* box-shadow: inset 0 3rem 0 0 #666; */
	box-shadow: inset 0 3rem 0 0 var(--theme-color-1);
}

.all-filter-selections-count {
	display: none;
	font-size: .9rem;
}
.all-filter-selections-count { margin: 0 .3rem; }
.all-filter-selections-count.on { display: inline-block; }
.all-filter-selections-count:before,
.all-filter-selections-count:after { display: inline-block; }

.all-filter-selections-count:before { content: "("; }
.all-filter-selections-count:after { content: ")"; }


.filter-selections-wrapper {
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: auto;
	max-height: 0;
	margin-bottom: 3rem;
	border-top: 1px dashed transparent;
	border-bottom: 1px dashed transparent;
	overflow: hidden;
	transition: max-height .3s ease-in-out;
}
.filter-selections-wrapper.on {
	flex-flow: column nowrap;
	max-height: 100vh;
	padding: .45rem 0 0 0;
	overflow: visible;
}

.filter-selections {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	padding: .45rem .45rem 0;
	background: #ccc;
	border-radius: .3rem;
}


.btn-clear-filters { display: inline-flex; }


.filter-selections-wrapper .filter-results-message { font-size: .9rem; font-style: italic; }

.filter-selections-wrapper .btn-clear-filters {
	background: #fff;
	color: orangered;
	margin: 0 auto .6rem 0;
	padding: 0;
	color: orangered;
	text-transform: lowercase;
	border-bottom: 1px solid transparent;
	border-radius: 0;
}

.filter-selections-wrapper .btn-clear-filters:hover {
	box-shadow: none;
	border-bottom: 1px solid orangered;
}

.btn-cancel-filters { display: none; }


/* ================ FILTERS: THE WHOLE SHEBANG ================ */
.filters-wrapper {
	display: none;
	position: fixed;
	left: 0;
	top: -3rem; /* header height */
	top: calc(var(--header-height) * -1);
	right: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	height: 0;
	/*	max-height: 100vh;*/
	max-height: 0;
	padding: 0;
	padding-top: 3rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
	background: #fff;
	opacity: 0;
	z-index: 1;
	overflow: hidden;
	transform: translateX(100vw) scaleY(1);
	/*	transform-origin: left;*/
	transition: all .6s ease-in-out;
	/* border: 6px solid lime; */
}


/* Safari 16 ... !Chrome */
@supports (-webkit-hyphens:none) {
	.filters-wrapper {
		top: 0;
		/* border: 6px dotted blue; */
	}
}







.filters-wrapper.on {
	width: 100%;
	min-height: 100vh;
	/*	max-height: none;*/
	padding: 3rem 1.5rem 0 1.5rem;
	opacity: 1;
	transform: translateX(0) scaleY(1);
	overflow-y: scroll;
}

.filters-container {
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	max-width: 51rem;
	margin: 0 auto;
	transition: all .6s ease-in-out;
	/*border: 1px solid red;*/
}

.on .filters-container { }


@media screen and (min-width: 54rem) {
	.filters-wrapper.on {}
}

/* ========== FILTERS HEADER ========== */
.filters-header {
	position: sticky;
	display: flex;
	width: 100%;
/*	height: 6rem;*/
	height: 4.5rem;
	align-items: center;
	justify-content: space-around;
	margin-bottom: 1.5rem;
}

.fa-window-close {
	margin-left: auto;
	font-size: 1.8rem;
	color: #999;
	cursor: pointer;
}

/* ========== FILTERS FORM: .fieldsets + .filters-footer ========== */
.filters-form {
/*	width: 100%;*/
/* height: calc(100vh - 3rem);*/ /* 100% - (.filters-header) */
}

.filters-form .fieldsets {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
	padding-bottom: 7.5rem;
}

/* ================ FILTERS: <fieldset.filter-fieldset> [ js toggles .open ] ================ */
.filter-fieldset {
	order: 1;
	position: relative;
	width: 100%;
	max-height: 1.8rem;
margin-bottom: .6rem;
	padding: 0;
	/* !!! DNU overflow: hidden; => will clip .filter-inputs if !.open */
	border: 0;
	border-radius: 3px; /* ? re: .open [btn] */
	z-index: 0;
	transition: var(--transition-03);
}
	/* .filter-fieldset.boolean-filters */
.boolean-filters {
	order: 0;
	min-width: 100%;
	flex: 1 1;
	max-height: none;
	margin-bottom: .9rem;
	display: flex;
	flex-flow: row wrap;
	/*	border: 2px solid blue;*/
}


@media screen and (min-width: 39rem) {
	.filter-fieldset { width: 48%; }
/*	.boolean-filters { min-width: 100%; }*/
}

.filter-fieldset.open {
	max-height: 99rem;
	overflow: visible;
	z-index: 1;
}

/* <button> */
.btn-toggle-filter {
	width: 100%;
	/*	height: 2.4rem;*/
	height: 1.8rem;
	min-height: fit-content; /* re: Safari */
	position: relative;
	z-index: 6; /* higher than div.filter-inputs */
	margin: 0;
	padding: 0 .3rem 0 .9rem;
	font-size: .81rem;
	border-radius: 3px;
	/*	background: #fff url("../img/icon-chevron-down.svg") calc(100% - .6rem) center no-repeat;
	box-shadow: none;*/
	transition: var(--transition-03);
	border-color: #000;
}

.open .btn-toggle-filter,
.open .btn-toggle-filter:focus {
	height: 2.1rem;
	color: #fff;
	background: var(--COLOR-1);
	border: 3px solid var(--COLOR-1);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
}


.btn-toggle-filter:after {
	width: auto;
	height: 100%;
	display: flex;
	content: "+";
	margin-left: auto;
	justify-content: center;
	align-items: center;
	font-size: 1.35rem;
	font-weight: 200;
	transform-origin: center;
	transform: rotate(0);
	transition: transform .75s ease-in-out, font-size .6s ease-in-out, font-weight .6s ease-in-out;
}

.open .btn-toggle-filter:after {
	font-size: 1.5rem;
	transform: rotate(225deg);
	font-weight: 600;
}


.filter-selections-count {
	display: none;
	margin: 0 auto 0 .6rem;
	color: var(--COLOR-2);
	font-size: .81rem;
}
.filter-selections-count.on { display: inline-block; }

.filter-selections-count:before {
	display: inline-block;
	content: "(";
}
.filter-selections-count:after {
	display: inline-block;
	content: ")";
}

.open .filter-selections-count { color: #fff; }

.boolean-filters .filter-selections-count{ display: none; }

.filter-inputs {
	position: relative;
	width: 100%;
	/*z-index: 3;*/ /* lower than the button .btn-toggle-filter */
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	z-index: 0; /* under the button thank you very much */
	max-height: 0; /* key to border-bottom when .on is to not apply max-height when .on, but needed here (min-height > max-height) */
	min-height: 0;
	/* transitioning ? !top/bottom padding */
	padding: 0 .6rem 0 .15rem;
	background: #fff;
	transform-origin: top;
	transform: translateY(-2.4rem) scaleY(1);
	opacity: 0;
	transition: var(--transition-03);
	overflow: hidden;
	border: 3px solid var(--COLOR-1);
	border-radius: 0 0 3px 3px;
}

.open .filter-inputs {
	/*	DNU max-height ... why not? */
	/*	max-height: none;*/
	width: 100%;
	/*	max-height: 30vh;*/
	max-height: 18rem;
	padding: .3rem .6rem 1.5rem .3rem;
	transform: translateY(0) scaleY(1);
	opacity: 1;
	overflow-y: scroll;
	/*	transition: var(--transition-03);*/
}

.range-filter .filter-inputs { justify-content: space-between; }

.range-filter.open .filter-inputs {
/*	min-height: 0;*/
	max-height: 9rem;
	padding: .9rem;
/*	overflow: hidden;*/
}



/*
	16px / rem ... ergo:
	if, e.g., the grid-col min is 19.5rem:
	3rem (total horiz padding on .filters-wrapper)
	+ 39rem (grid-col min to split)
	+ .6rem grid-gap
	= 42.6rem: 682px
	ergo the MQ min 682px 42.6rem ... so 45rem
*/
@media screen and (min-width: 42.6rem) {
	.fieldsets {}
	.filter-fieldset {}

	.filter-inputs {
/*		width: calc(180% + .9rem);*/
		width: 100%;
		border-radius: 0 0 3px 3px;
	}

	.open .filter-inputs {
/*		width: calc(180% + .9rem);*/
		transform-origin: right;
	}

	.filter-fieldset:not(.boolean-filters):not(.range-filter):nth-child(odd) .filter-inputs {
/*		transform: translate(0);*/
/*		border-radius: 0 3px 3px;*/
/*		border: 1px solid blue;*/
	}

	.filter-fieldset:not(.boolean-filters):not(.range-filter):nth-child(even) .filter-inputs {
/*		transform: translateX(calc(-45% - 4px));*/
/*		border-radius: 3px 0 3px 3px;*/
/*		border: 1px solid red;*/
	}


	.range-filter.open .filter-inputs {
		width: 100%;
		transform: translate(0);
		border-radius: 0 0 3px 3px;
	}

} /* END MQ */




.filter-inputs .label-input {
	width: 100%;
	/*	max-width: 50%;*/
	max-height: none;
	height: 1.8rem;
	height: auto;
	display: flex;
	flex-flow: row nowrap;
	flex: 1 1 27ch; /* TODO: this might have need a mod based on various input labels */
	align-items: center;
	/* DNU vertical padding */
/*	margin-top: .3rem;*/
/*	padding: 0 .3rem 0 0;*/
}
/*
.filter-inputs .cbr input {
	order: 0;
	margin-right: .6rem;
}

.filter-inputs .cbr label {
	order: 1;
	width: 100%;
	font-size: .81rem;
}

.cbr label { width: 100%; }
*/




.range-filter .buttons { width: 100%; }

.range-filter .label-input {
	flex: 0 0;
	margin-bottom: .9rem;
/*	border: 2px dotted pink;*/
}
.range-filter .range-filter-min { margin-right: .9rem; }
.range-filter .range-filter-max { margin-right: calc(100% - 14.1rem); margin-right: auto; }


.range-filter label {
	margin-right: .3rem;
	font-size: .9rem;
}
.range-filter input {
	width: 3.9rem;
	height: 1.8rem;
	padding: 0 0 0 .3rem;
}

.range-filter .error {
	display: none;
	width: 100%;
	margin: 0 auto .9rem;
	padding: .15rem .6rem;
	color: red;
	font-size: .9rem;
	font-weight: bold;
	text-align: center;
	border: 1px solid red;
	border-radius: 3px;
}
.range-filter .error.on { display: block; }

.range-filter .buttons .btn {
	height: 1.8rem;
	padding: 0 .45rem;
	font-size: .78rem;
}
.range-filter .buttons .btn:first-of-type { margin: 0 .9rem 0 auto; }

.filter-fieldset label .quantity {
	margin-left: .45rem;
	font-size: .69rem;
	color: #666;
}

.btn.filter-selection {
	background: #ccc;
	border-radius: 45%;
}



/* PILLS .filter-selections[ data-filter-ix="3" ] { order: 9; }*/
.filter-selection[ data-filter-price-range="true" ] { order: 9; }

.filter-selections h3 {
	display: none;
	font-size: .81rem;
	font-weight: bold;
	text-transform: capitalize;
	width: 100%;
}
.filter-selections h3:after {
	display: inline-block;
	content: ": ";
}


/* 'pill' */
.filter-selection {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 .6rem .45rem 0;
	padding: .3rem .9rem;
	font-size: .69rem;
	font-size: var(--filter-selection-pill-font-size, .69rem);
	text-transform: capitalize; /* nope, not if they're orig Upper */
	background: #fff;
	border-radius: 3rem;
	border-radius: .3rem;
}

.filter-selection a {
	margin-left: .9rem;
	cursor: pointer;
}