/*
	.catalog-sampler {
		.heading {}
		p.catalog-sampler-text {}
		ul.catalog-sampler-style-items {
			li.style-item.catalog-sampler-style-item {
				.style-item-header {}
				.collection-name {
					.catalog-sample-link {}
				}
				.style-code {
					.catalog-sample-link {}
				}
				.style-item-images {
					.catalog-sample-link {
						.frames-img {}
					}
				}
			}
		}
	}
*/

.catalog-sampler {
	/*
		catalog-sampler.js:
		- .catalog-sampler is only displayed if there are results, via .has-results
		- this default is overwritten in .details-view
	*/
	display: none;
	position: relative;
	width: 100%;
	flex-flow: column nowrap;
	margin: 0 auto 3rem;
	/* border: 2px solid red; */
}
.catalog-sampler.has-results { display: flex; /* !!! */ }

.details-view .catalog-sampler {
	/* flex: 0 1; */
	flex: 1 0;
	/* min-height: 13.5rem; */
	margin: 0 auto;
	/* border: 1px solid lime; */
}

/* standalone Details view: TBD */
/* .container-details .catalog-sampler { display: none; } */


.catalog-sampler.loading:before {
	left: calc(50% - 30px);
	top: calc(50%);
}

.catalog-sampler .heading {
	width: 100%;
	margin-bottom: 0;
	text-align: left;
	text-transform: uppercase;
	font-size: 1.11rem;
}
.details-view .catalog-sampler .heading {
	font-size: .9rem;
	text-transform: capitalize;
	font-weight: unset;
}

.catalog-sampler-text {
	/* display: flex; */
	display: none;
	justify-content: center;
	margin-bottom: 1.5rem;
}
.details-view .catalog-sampler-text { display: none; }

/* ======================================================================== */

/* ul.catalog-sampler-style-items */
.catalog-sampler-style-items {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	overflow-y: hidden;
	overflow-x: scroll;
	margin-bottom: 1.5rem;
	padding: 1.5rem 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: var(--transition-09);
	/* border: 1px dashed red; */
}
.details-view .catalog-sampler-style-items {
	margin-bottom: 0;
	padding: .9rem 0;
}
.catalog-sampler-style-items.ready { transform: scale(1); }

/*
	li.catalog-sampler-style-item {
		.style-item-header {
			.collection-name {
				a.catalog-sample-link {}
			}
			.style-code {
				.catalog-sample-link {}
			}
		}
		.style-item-images {
			.catalog-sample-link {
				img.frames-img {}
			}
		}
	}
*/
/* ============ STYLE ITEM ============ */
.catalog-sampler-style-item {
	min-width: 300px;
	max-width: fit-content;
	margin: 0 .9rem;
	transition: var(--transition-03);
	transform: scale(.9);
	outline: 0 solid transparent;
	border-radius: 0;
	/* border: 1px dashed blue; */
}

.details-view .catalog-sampler-style-item {
	max-width: 300px; /* ??? test */ 
	max-height: 100%;
	padding: 0;
	/* border: 1px solid gold; */
}
.details-view .catalog-sampler-style-item { }

.catalog-sampler-style-item:hover {
	transform: scale(1);
	outline: 6px solid #f0f0f0; /* match bg of .style-code */
	border-radius: 3px;
}


/* ============ STYLE ITEM HEADER ============ */
.catalog-sampler .style-item-header {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	/* border: 1px dotted blue; */
}

.details-view .catalog-sampler-style-item .collection-name {
	display: none;
}

.catalog-sampler-style-item .collection-name,
.catalog-sampler-style-item .style-code {
	width: 100%;
	font-size: .9rem;
	text-align: center;
	/* border: 1px dashed gold; */
}
.catalog-sampler-style-item .collection-name {
	color: #666;
	padding: .45rem .45rem .45rem .9rem;
	text-align: left;
	text-transform: uppercase;
	background: #fff;
}
.catalog-sampler-style-item .style-code {
	color: #333;
	padding: .45rem .9rem .45rem .45rem;
	text-align: right;
	font-weight: bold;
	background: #f0f0f0; /* match bg of .catalog-sampler-style-item:hover */
}
.catalog-sampler-style-item .catalog-sample-link { display: block; }
.catalog-sampler-style-item .collection-name .catalog-sample-link { color: #666; }
.catalog-sampler-style-item .style-code .catalog-sample-link { color: #000; }


/* ============ STYLE ITEM IMAGES ============ */
.catalog-sampler-style-item .style-item-images { padding: .9rem 0; }
.details-view .catalog-sampler-style-item .style-item-images { padding: 0; }

.catalog-sampler-style-item .frames-img {
	display: block;
	max-width: 90%;
	margin: auto;
	object-fit: unset;
	/* border: 1px dotted palevioletred; */
}
.style-item-images .catalog-sample-link:not(:nth-of-type(1)) { display: none; }

.catalog-sampler-style-item .frames-img[src*="noimage"] {
	max-height: 90px; /* guess */
	/* border: 3px dotted blue; */
}