/*
	- style-item.css common to catalog_view.cshtml & details_view.cshtml, ERGO:
	- .style-item.grid-view {}
	- .style-item.details-view {}
		- .container-catalog.details-view {}
		- .container-details.details-view {}
*/

/*
	re: .show-prices-wrapper:
	- default => NOPE;
	- catalog view => YUP (YEP?);
	- catalog view => details overlay (body.details-overlay) => NOPE;
	- standalone details view => NOPE;
*/
.show-prices-wrapper {
	display: none;
	margin-left: auto;
}
.container-catalog .show-prices-wrapper { display: flex; }
.details-overlay .show-prices-wrapper { display: none; }


.show-prices-wrapper.cbr label {
	padding-right: 0;
	text-transform: none;
	border: 0;
}
.show-prices-wrapper input:focus + label {
	background: transparent;
	border: 0;
}



/* ================================================ .style-item ================================================ */
.style-item {
	position: relative;
	width: 100%;
	display: flex;
	padding: 0 0 .9rem;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	background: #fff;
	opacity: 1;
	transition: var(--transition-03);
	border: 1px solid #f0f0f0;
}

/* debug stuff */
/* .style-item:nth-of-type(31) { border: 6px dashed blue; } */
/* .style-item:nth-of-type(61) { border: 12px dashed blue; } */

.grid-view:hover { box-shadow: 3px 3px 15px rgba(120, 120, 120, .24), -3px -3px 15px rgba(120, 120, 120, .24); }
.grid-view:active { border: 1px solid #000; }

.style-item.grid-view {
	max-width: var(--style-item-grid-view-max-width, 360px);
	padding: 0 0 .9rem;
}

.style-item.details-view {
	position: relative;
	width: 100%;
	align-content: flex-start;
	align-items: flex-start;
	z-index: 1;
}
@media screen and (min-width: 1200px) {
	.style-item.details-view { justify-content: space-around; }
}


/*  */
.container-catalog .details-view {
	position: fixed;
	width: 100%;
	height: calc(100vh - var(--header-height));
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	/* custom transition independent of .style-item */
	transition: .9s all ease-in-out;
}

/* i.e., 'zoomItem' */
.container-catalog .details-view.ready {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0;
	opacity: 1;
	transition: .9s all ease-in-out;
	transform: scale(1);
	z-index: 9;
	/* border: 6px solid red; */
}

/* 'standalone' details view */
.container-details .details-view {
	max-width: var(--site-max-width);
	height: 100%;
	margin: 0 auto;
	padding: 0;
	opacity: 1;
	transition: .9s all ease-in-out;
	transform: scale(1);
	z-index: 9;
}


.container-details.details-view {}
.container-details { height: calc(100vh - var(--header-height)); }

/* ==================================== .style-item-header ==================================== */

.closer {
	position: absolute;
	right: .9rem;
	top: .6rem;
	width: 1.8rem;
	height: 1.8rem;
	font-size: 1.2rem;
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 3px;
	transition: all .3s ease-in-out;
	cursor: pointer;
z-index: 9; /* > .style-item-header */
}
.closer:hover { border-radius: 50%; }

.style-code { font-weight: bold; }

.style-item-header {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
}
.grid-view .style-item-header {
	padding: .15rem .6rem;
	justify-content: space-between;
	font-size: var(--style-item-header-font-size, .81rem);
	color: #000;
	background: #f0f0f0;
}
.details-view > .style-item-header { /* descendant selector to exempt .catalog-sampler > .style-item-header */
	/* go figure; height was buggy */
	min-height: 3rem;
	max-height: 3rem;
	justify-content: flex-start;
	align-items: center;
	gap: .6ch;
	padding: 0 1.8rem;
	font-size: 1.2rem;
	color: #fff;
	background: #333;
	border-radius: 3px 3px 0 0;
	z-index: 6; /* so zoomed images remain under this */
}
.grid-view .collection-name { color: #666; }


.details-view > .collection-name { /* descendant selector to exempt .catalog-sampler > .style-item-images */
	margin-right: .9rem;
}




/* ==================================== LAYOUT ==================================== */
/*
	.style-item-header: 3rem
	.style-item-images: 1 0 calc(45vh - (var(--header-height) + 3rem))
		- .slides
		- .thumbs [ only post-breakpoint ]
	.style-item-props
		- .style-item-options (color selector, size selector)
		- .buttons-wrapper ('add to cart'/'request brand info', 'share/copy link')
		- .all-specs-wrapper

		.catalog-sampler-wrapper ... 
*/

.style-item-images {
	/* flex: 0 1 auto; ... ??? DNU in default catalog view? */
	flex: 1 0 auto; /* !!! */
	position: relative;
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	overflow: hidden;
	/* border: 2px solid red; */
}

/* '.details-view' == ZOOM ITEM */
/* !!! child combinator exempts .catalog-sampler .style-item-images !!! */
.details-view > .style-item-images {
	flex: 1 0 calc(30% - (3rem + 9rem));
	justify-content: space-between;
}

/* ==================================== .arrow-nav ==================================== */
.arrow-nav {
	display: inline-block;
	position: absolute;
	top: calc(50% - 1.8rem);
	z-index: 3;
	transition: opacity .3s ease-in-out;
	opacity: .6;
	font-size: 1.8rem;
	transform: scaleY(1.8);
	transform-origin: top;
	cursor: pointer;
	border: 0;
}
.arrow-nav:hover { opacity: .75; }

.arrow-nav.arrow-previous { left: .9rem; }
.arrow-nav.arrow-next { right: .9rem; }

.arrow-nav:before {
	display: flex;
	font-family: 'FontAwesome';
	color: var(--theme-color-1);
}
.arrow-previous:before { content: "\f053"; }
.arrow-next:before { content: "\f054"; }

.arrow-nav.hide { visibility: hidden; }
/*.details-view .arrow-nav { display: none; }*/


/* ====================================  ul.slides ==================================== */
.slides {
	position: relative;
	display: flex;
	width: 100%;
	padding: 1.5rem .6rem;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	overflow: hidden;
	transition: all .9s ease-in-out;
	/*	-webkit-overflow-scrolling: touch;*/
	/* scroll-snap-type: x mandatory; */
	/*	scroll-behavior: smooth*/
	/*	overflow-x: auto; */
}

.grid-view .slides { margin-bottom: .9rem; }

.details-view .slides {
	flex: 60 1 auto; /*!!!*/
	transform-style: preserve-3d;
	/*	overflow: visible;*/
/*	border: 6px solid gold;*/
}



/* ====================================  li.slide ==================================== */
.slide {
	display: flex;
	width: 100%;
	height: 100%;
	position: relative;
	flex: 1 0 auto; /* !!! flex-shrink: 0; !!! */
	transition: all .9s ease-in-out;
	left: initial;
	max-height: inherit;
	text-align: center;
	opacity: 0;
	transition: all .6s ease-in-out;
	transform: translateX(0);
	align-items: center;
	align-content: center;
overflow: hidden;
/*border: 2px solid red;*/
}

.slide.on { opacity: 1; }

.slide .frames-img {
	display: block;
/*	width: calc(100% - 4.2rem);*/
/*max-width: 100%;*/
max-width: calc(100% - 4.2rem);
max-height: 100%;
	margin: 0 auto;
/*	transform-origin: top;*/
	transform: scale(.33);
	transition: all .9s ease-in-out;
object-fit: contain; /* safari */
}

.slide.on .frames-img { transform: scale(1); }
.details-view .slide.on .frames-img:hover {
	/* transform: scale(1.35); */
	/* transform-origin: 21%; */
}


/* ==================================== .thumbs ==================================== */
/* hide by default; TODO: display in zoom */
.style-item .thumbs { display: none; }

/* update: even in .details-view, hide .thumbs 'til breakpoint/multi-column */
/*	display: none;*/
/*	height: 3rem;*/
/*	justify-content: center;*/
.details-view .thumbs {
/*	display: flex;*/
	display: none;
	flex: 1 1 auto; /* let the ul vertically shrink */
	width: 100%;
	padding: .75rem;
	gap: .75rem;
	flex-flow: row wrap;
	justify-content: flex-start;
	overflow: hidden; /* ! */
	transform-style: preserve-3d;
/*	border: 1px solid blue;*/
}

@media screen and (min-width: 900px) and (orientation: landscape) {
	.details-view .thumbs {
		display: flex;
		padding: 0 0 1.5rem 1.5rem;
	}
}

/*@media screen and (orientation: portrait) {
	.details-view .thumbs { display: none; }
}*/
/* MQ */

.thumbs li {
	display: flex;
	align-content: center;
	align-items: center;
	max-width: 90px;
	max-width: 120px;
	margin: 0 .3rem;
	/*	padding-bottom: .45rem;*/
	overflow: hidden; /* ! */
	cursor: pointer;
	/*	transition: all .6s ease-in-out;*/
	/*	border-bottom: 2px solid transparent;*/
	opacity: .45;
	/*	border: 1px dashed lime;*/
}

.thumbs .on { opacity: 1; }

.thumbs li img {
	width: 100%;
	transition: all .6s ease-in-out;
	transform: scale(.69);
	/*	border: 1px solid red;*/
}
.thumbs .on img { transform: scale(1); }


/* ==================================== .style-item-props (children) ==================================== */
.style-item-props {
	/* flex: 0 1 auto; ... ??? DNU in default catalog view? */
	flex: 1 1 51%;
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	margin-top: auto;
	padding: 0 .9rem .9rem;
	/* border: 2px solid blue; */
}

/* ZOOM ITEM: */
.details-view .style-item-props {
	flex: 1 0 calc(60% - (3rem + 9rem));
	max-width: 100%;
	margin: 0;
	padding: 0 0 1.5rem 0;
	/* padding: 0; */
	overflow: hidden;
}

.style-item-props h4 {
	margin-bottom: .45rem;
	font-size: .9rem;
	font-weight: bold;
	color: #000;
	display: flex;
	width: 100%;
	justify-content: space-between;
	border-bottom: 1px solid #000;
}

/* ==================================== children of .style-item-options ==================================== */

/* TODO: .price, .sizes, .swatches, etc. belong in lib ('cause cart.css, etc.) */

.color-selector {
	/*display: flex;
	flex-flow: row wrap;
	justify-content: center;*/
	/*	!!! margin-bottom */
}


.selected label {
	color: #000;
	font-weight: bold;
	border: 1px solid #ccc;
}

.select-wrapper.size-select-wrapper { min-width: calc(12ch + .9rem); }

.select-wrapper.one-color,
.select-wrapper.one-size {
	background: transparent;
	border: 0;
}

.select-wrapper.one-color .select,
.select-wrapper.one-size .select {
	/* we're overriding .disabled here */
	width: auto;
	padding-right: .45em;
	color: #000;
	background: none;
	border: 1px solid transparent;
	opacity: 1;
	cursor: auto;
}

.select-wrapper.one-color::after,
.select-wrapper.one-size::after { display: none; }



/* ============ PRICES ============  */
.prices-wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	/* gap: .9ch; */
}

.style-item .price {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	font-size: 1.11rem;
	font-weight: bold;
	overflow: hidden;
	transition: all .3s linear;
	transform-origin: center center;
}
.style-item .price {
	max-width: 0;
	max-height: 0;
}
/* !!! .price == .price-default, .price-wholesale !!! */
.show-prices .style-item .price {
	max-width: 9rem;
	max-height: none;
}
.style-item .price::before {
	display: inline-block;
	padding-right: .15rem;
	content: var(--currency-symbol);
}
/*
	e.g.: "33.99/package of 10 pieces"
	.style-item.parts-item .style-item-props .style-item-options .prices-wrapper .price
*/
.style-item.parts-item .price::after {
	display: inline-block;
	content: "/";
}

.style-item .price-default {
	order: 1;
	/* color: #090;*/
	color: hsl(120, 75%, 36%);
	font-weight: bold;
}
.style-item .price-wholesale {
	/* DEFAULT: !display .price-wholesale; */
	display: none;
	/* color: #900; */
	color: hsl(0, 99%, 45%);
	order: 0;
	text-decoration: line-through;
}
.show-prices .style-item .price-wholesale.on { display: block; }


/*
	CART ITEM:
	.item-summary .unit-price-wrapper .parts-item-price-qualifier {}
	.item-summary .quantity-wrapper .parts-item-quantity-qualifier {}
*/

/* inherited by .cart.css */
/* .parts-item-price-qualifier => "(package of 10 pieces)" */
.parts-item-price-qualifier {
	display: inline-flex;
	flex-flow: row wrap;
	align-items: center;
	color: hsl(120, 75%, 36%);
}
.style-item .parts-item-price-qualifier {
	order: 3;
	font-size: .99rem;
	/* font-weight: bold; */
}

/* .parts-item-quantity-qualifier => "package" / "packages" */
.parts-item-quantity-qualifier::after {
	display: inline-block;
	visibility: hidden;
	content: "s";
}

.parts-item-quantity-qualifier.plural::after { visibility: visible; }
.dialog-content .parts-item-quantity-qualifier::after { display: none; }


/* ==================================== .style-item-options (colors, sizes, buttons) ==================================== */

.style-item-options {
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	align-items: center;
	margin-bottom: .9rem;
	padding-bottom: .9rem;
}
.grid-view .style-item-options { justify-content: flex-end; }

.details-view .style-item-options {
	justify-content: flex-start;
	flex-shrink: 0; /* re: Safari */
	border-bottom: 3px double #ccc;
}

.style-item-props .quantity-wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: 0 1.2ch;
	/* border: 1px solid red; */
}

.quantity-wrapper [ type="number" ].quantity {
	border: 1px solid #ccc;
}


/* ============ customizations re: .sizes & .price ============ */

.details-view .size-select-wrapper { margin: 0 auto .9rem; }

.details-view .price { margin: 0; }



.style-item .buttons-wrapper {
	display: flex;
	position: relative; /* !!! re: .loading (spinning frames animation when 'request brand info' button) */
	flex-flow: column nowrap;
	width: fit-content;
	margin-top: auto;
	gap: 1.5ch 0;
	flex: 0 1; /* ??? */
	justify-content: space-around;
	flex-shrink: 0; /* re: Safari */
	/* border: 1px solid blue; */
}
.style-item .buttons-wrapper .btn {
	width: 100%;
	/* max-width: fit-content; */
	margin: auto;
	text-transform: capitalize;
	z-index: 9;
}

.style-item .buttons-wrapper.loading .btn-contact-rep { visibility: hidden; }
.style-item .buttons-wrapper.loading:before {
	width: 27px;
	height: 27px;
	top: 0;
	left: 4.5rem 
}
.style-item .buttons-wrapper.can-order-colorkit .btn {
	/* min-width: 21ch; */
}

/*.style-item.details-view .buttons-wrapper { margin-top: 0; }*/
.details-view .buttons-wrapper {
	margin-top: 0;
	margin-bottom: 1.5ch;
	gap: 1.5ch;
}

.container-details .btn-see-details { display: none; }



/* ======================== SEE  B2B/wwwroot/components/catalog-sampler/catalog-sampler.css ======================== */
/*
	.catalog-sampler-wrapper {
		.heading {}
		p.catalog-sampler-text {}
		ul.catalog-sampler-style-items {}
*/

@media screen and (min-width: 900px) {

	.style-item.details-view { flex-flow: row wrap; }

	.details-view .style-item-images,
	.details-view .style-item-props { height: calc(100vh - var(--header-height) - 15.3rem); /* 3rem == .style-item-header */ }

	.details-view .catalog-sampler {
		.catalog-sampler-style-items {
			/* border: 2px dashed blue; */
		}
		.catalog-sampler-style-items {
			/* border: 1px dashed lime; */
		}
	}
	
	.details-view .style-item-images {
		flex: 1 1 calc(100% - 24rem);
		margin-bottom: 0;
		z-index: 3;
		/*	!!! DNU overflow: visible; it disables access to .props content */
	}

	.details-view .style-item-props {
		flex: 1 1 24rem;
		/*	max-width: 600px;*/
		padding-top: 1.5rem;
		z-index: 0;
	}

	.details-view .buttons-wrapper {
		flex-flow: column nowrap;
	}
	
} /* MQ */



/* ==================================== SPECS ==================================== */
.all-specs-wrapper {
	width: 100%;
	height: auto;
	/* padding-bottom: 6rem; */
	/* padding-bottom: 1.5ch; */
	overflow-x: hidden;
	/*	overflow-y: scroll;*/
	overflow-y: visible;
	/* border: 2px dashed deeppink; */
}

.specs-summary {
	width: calc(100% - 1.8rem);
	margin: 0 auto;
	font-size: .9rem;
	color: #666;
}
.specs-summary .product-description {
	margin-bottom: 1.5rem;
	font-style: italic;
}
.specs-summary .product-description:empty { margin: 0; }


/* ul.technical-bullets */
.specs-summary .technical-bullets {
	list-style: circle;
	padding-left: 1.11rem;
	text-transform: lowercase;
}

.technical-bullets li { margin-bottom: .3rem; }


.all-specs-wrapper { display: none; }


.specs-wrapper {
	width: calc(100% - 6ch);
	max-width: 45ch;
	margin: 0 auto 1.5ch;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	align-content: center;
	flex-shrink: 0; /* re: Safari */
}
/*.specs-wrapper:nth-of-type(2) { margin-bottom: .9rem; }*/

.details-view .all-specs-wrapper,
.container-details .all-specs-wrapper {
	display: flex;
	flex-flow: column nowrap;
}

/*
.details-view .specs-wrapper,
.container-details .specs-wrapper { display: flex; }
*/

.basic-specs-wrapper { margin-bottom: .6rem; }

.other-specs-wrapper { padding: .3rem 0; }

.btn-toggle-specs {
	display: none;
	width: 100%;
	text-transform: uppercase;
}
.btn-toggle-specs:hover {
	color: #000;
	box-shadow: unset;
}

.btn-toggle-specs:after {
	width: 18px;
	height: 18px;
	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-specs:after {
	font-size: 1.5rem;
	transform: rotate(225deg);
	font-weight: 600;
}

dl.specs {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0;
	/* border: 1px solid gold; */
}

/*
flex: 0 1 50%;
*/
.specs dt,
.specs dd {
	font-size: .81rem;
	line-height: 1.2rem;
}

.specs dt {
	flex: 0 1 13.5ch;
	flex: 0 1 50%;
	color: #999;
	text-transform: uppercase;
}

.specs dt:after {
	content: ": ";
	display: inline-block;
}

.specs dd {
	flex: 1 0 13.5ch;
	text-align: right;
	font-weight: bold;
}

.specs dd .fa-check {
	color: #0c0;
	font-size: 1.11rem;
	font-weight: 500;
	transform: rotate( -3deg );
}


.other-specs {
	/*	max-height: 0;*/
/*	overflow: hidden;*/
	overflow: unset;
	transition: all .6s ease-in-out;
}
.open .other-specs {
	max-height: 100vh;
	margin-top: .3rem;
	padding-bottom: .6rem;
}

.spec-drilling-points-link + dd { white-space: nowrap; }

.spec-drilling-points-link + dd a {
	/*	padding-right: 24px;*/
	color: var(--link-color);
	border-bottom: 1px dashed var(--link-color);
	/*	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/icon-new-window-60x.png") 100% 0 / 18px 18px no-repeat;*/
}
.spec-drilling-points-link + dd a:hover { border-bottom: 1px solid var(--link-color); }

.spec-drilling-points-link + dd::after {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 0 -.21rem .45rem;
	content: "";
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/icon-new-window-60x.png") 100% 0 / 18px 18px no-repeat;
}






.details-footer {
	display: flex;
	/*	display: none;*/
	width: 100%;
	justify-content: space-between;
	margin-top: .6rem;
	padding-top: .6rem;
}


/* Safari 9+ ... GOOD! - !Chrome */
@supports (-webkit-hyphens:none) {
	.container-catalog .details-view { top: var(--header-height); }
}