header,
main { filter: blur(0); transition: all .45s ease-in-out; }

:root {
	--slideTranslateLeft: 0;
	--slideTranslateRight: 0;
}
footer { display: none; }


/* overwrite layout.css; see also details_view.css */
.view-header-catalog-index {
	padding: .3rem .9rem;
	background: #f0f0f0;
}
.view-header-catalog-index h1 {
	width: auto;
	padding: 0;
}

/*view-header-catalog-details*/


.catalog-search-wrapper {
	display: flex;
	width: 100%;
	margin: .3rem .9rem 3rem 0;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
}

/* form.catalog-search */
.catalog-search {
	flex: 1 0 auto;
	flex-wrap: nowrap;
/*	margin-bottom: .9rem;*/
}

.catalog-search .label-input { flex-wrap: nowrap; }

.catalog-search input {
	flex: 1 1 auto;
/*	padding: .45rem .9rem .45rem 0;*/
	padding: .45rem .9rem;
	border: 1px solid transparent;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
}

.catalog-search label { text-indent: -999rem; }

.catalog-search #catalog-search {
	order: 0;
	flex: 1 1 auto;
}
#catalog-search:focus { border: 1px solid green; }

.btn-clear-search {
	margin-left: -4.5rem;
	padding: 0 .6rem;
	font-size: .84rem;
	color: transparent;
	text-transform: capitalize;
}
.btn-clear-search.on { color: #999; }

/*
.btn-catalog-search {
	margin: 2px;
	padding: 0 .6rem;
	font-size: 1.35rem;
	text-indent: -999rem;
	color: #999;
}

.btn-catalog-search i { text-indent: 0; }
*/

#catalog-search:focus ~ .btn-catalog-search {
	color: green;
	background: #f0f0f0;
}


.filter-controls {
	display: flex;
	flex-flow: row wrap;
	flex: 1 1;
	gap: .9rem;
	justify-content: space-between;
}

.filter-controls > .btn { flex: 1 0; text-transform: capitalize; }


/* 75ch ~= 600px */
@media screen and (min-width: 75ch) {
/*	.filter-controls { justify-content: flex-start; }*/
	.filter-controls > .btn { max-width: 27ch; }
}

/* 105ch ~= 840px */
@media screen and (min-width: 105ch) {
	.catalog-search-wrapper {}
	.catalog-search {
		flex: 1 1 30ch;
		max-width: 33ch;
	}
	.filter-controls {
		flex-flow: nowrap;
		justify-content: flex-start;
	}
/*	.filter-controls > .btn { max-width: 30ch; }*/
}


/* heads-up; catalog_view.css supercedes [customer].css, so bare minimum .brand-hdr rules here; see [customer].css*/
/*
.brand-hdr {
	.brand-deco-wrapper {
		img.brand-deco {}
	}
	.brand-logo-wrapper {
		img.brand-logo {}
	}
	.brand-copy-wrapper {
		.brand-copy.brand-copy-1 {}
		.brand-copy.brand-copy-2 {}
	}
}
*/

.brand-hdr {
	display: flex;
	/* DNU align-items here; see [customer].css */
	width: 100%;
	max-width: calc(100vw - 3rem); /* !!! ... default/mob; media query @ [customer].css !!! */
	height: auto;
	justify-content: space-around;
	margin-bottom: 1.5rem;
	font-size: .81rem;
	animation: fadeInBrandMarketing 1.5s ease-in-out;
	gap: 3vw;
}

@keyframes fadeInBrandMarketing {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/*
	!!! NOPE !!! tenants' brand header deco/logo config is in [tenant].css, which would be overwritten by this, so um, nope
	.brand-deco-wrapper,
	.brand-logo-wrapper { display: flex; }
*/


.brand-hdr img {
	display: block;
	width: 100%; /* move to safilo.css if this is trouble in WG */
	object-fit: contain;
}



.btn-see-details { cursor: zoom-in; }


/* shrink-hides .style-item els in the background when an item is zoomed (.style-item.details-view) */
.details-overlay .style-item:not(.details-view, .catalog-sampler-style-item) { transform: scale(0); }


.catalog-sort-selector-wrapper {
	flex-flow: row nowrap;
	align-items: center;
	width: fit-content;
	/* margin: 0 auto 3ch; */
	margin: 0 0 3ch auto;
	background: unset;
	transition: all .45s ease-in-out;
	opacity: 0;
	&.on { opacity: 1; }
	border: 0px solid #dedede;
	label {
		width: fit-content;
		/* max-width: 0; */
		/* max-height: 0; */
		/* padding: .3ch 0 .3ch .9ch; */
		margin-right: .9ch;
		padding: 0;
		background: white;
		color: black;
		white-space: nowrap;
		text-transform: capitalize;
		transition: all .45s ease-in-out;
		transform: scaleX(0);
		transform-origin: 100%;
		opacity: 0;
		&.on {
			/* width: fit-content; */
			transform: scaleX(1);
			/* max-height: 9ch; */
			max-width: 15ch;
			opacity: 1;
		}
	}
	.catalog-sort-selector {
		padding: .6ch 3.9ch .6ch 1.8ch;
		text-transform: capitalize;
		background-image: linear-gradient(to bottom, #fff 0%, #ededed 100%);
		background-repeat: no-repeat, repeat;
		background-size: 100% 100%;
		border: 1px solid #dedede;
		border-radius: .6ch;
	}
}
.catalog-sort-selector-wrapper::after {
	/* top: calc(51% + .75ch); */
}

/* ======================== THE GRID ======================== */
/* ======================== THE GRID ======================== */
/* ======================== THE GRID ======================== */
.item-grid {
	display: grid;
	grid-template-columns: var(--catalog-grid-template-columns, repeat(auto-fit, minmax(300px, 1fr)));
	/* grid-gap: 15px; */
	grid-gap: 6ch 3ch;
	justify-items: center;
	width: 100%;
	height: 100%;
	color: #000;
	z-index: 1;
	position: relative;
	/*	opacity: 0;*/
	transition: all .6s ease-in-out;
	/* border: 3px dashed lime; */
}

.item-grid.loading:before {
	width: 60px;
	height: 60px;
}

.item-grid.loaded { opacity: 1; }

/* TODO: update catalog view .js re: .btn-show-more => .btn-show-more*/
.btn-show-more,
.btn-show-more {
	display: none;
	width: auto;
	margin: 1.8rem auto 1.8rem;
}
.btn-show-more.on,
.btn-show-more.on { display: flex; }

.loading + .btn-show-more,
.loading + .btn-show-more { display: none; }