:root {
	--active-tab-pane-height: max-content;
}
#image-gallery img {
	max-width: 100%;
}
#product-list-print {
	display: none;
}
.product.product-detail,
.detail-container {
	--image-size: 300px;
}
.product.product-detail {
	display: grid;
	position: relative;
	flex: 1;
	grid-template-rows: auto;
	grid-template-columns: repeat(auto-fill, 33px);
	grid-template-areas:
		'favorite id-type id-type storage e1 promo set new bidbody bidbody'
		'name name name name name name name name name name'
		'image image image image image image image image image image'
		'detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1'
		'detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2'
		'brand brand brand brand cart cart cart cart cart cart';
	font-size: 0.9rem;
}
.product.product-detail .id-type {
	font-size: var(--fs);
}
.product.product-detail .package-container {
	row-gap: 1rem;
	padding-block: 1rem;
}
.product.product-detail .price-per-unit b {
	font-size: 1.1rem;
}
.product.product-detail .availability-container {
	place-self: unset;
}
.detail-container .vitamins {
	display: block;
}
body:not(.logged-in) .product.product-detail {
	grid-template-areas:
		'id-type id-type ef storage e1 promo set new bidbody bidbody'
		'name name name name name name name name name name'
		'image image image image image image image image image image'
		'detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1'
		'detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2'
		'brand brand brand brand cart cart cart cart cart cart';
}
body:not(.logged-in) .product.product-detail .id-type {
	place-self: center start;
}
.product-detail .cart {
	grid-column: 4 / -1;
}
.product-detail .banner {
	top: 30%;
	left: 40%;
	width: 20%;
}
.product-detail .banner[data-displayed='0'] {
	display: none;
}
.product-detail .name {
	grid-column: name-start / -2;
	align-items: unset;
	height: auto;
}
.product-detail h1 {
	margin-block: 0.75rem;
	font-size: 1.4rem;
}
.product-detail .detail {
	padding-left: 0;
}
.product-detail .brand {
	padding-top: 1rem;
}
.product-detail .brand img {
	height: calc(var(--image-size) / 4.6);
	max-width: calc(var(--image-size) / 2.3);
}
/* detail >> */
.detail-container {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
	margin-top: 3rem;
	margin-inline: -0.5rem;
}
.detail-container .brand img {
	height: calc(var(--image-size) / 2.4);
	max-width: calc(var(--image-size) / 1.2);
	margin-bottom: 1rem;
}
.detail-container .tab {
	flex: 1 1 100%;
	transition: transform 0.25s ease-in-out;
	padding-inline: 0.5rem;
	border: 1px solid var(--light-gray);
	overflow: hidden;
	border-radius: var(--radius);
}
.tab-pane {
	z-index: 1;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0.5rem 0;
	cursor: pointer;
}
.tab-pane h3 {
	position: relative;
	margin-block: 0 0.5rem;
}
.tab.active .tab-pane > i {
	transform: rotate(180deg);
}
.tab-content {
	display: flex;
	flex-flow: row wrap;
	height: 0;
	opacity: 0;
	transition: all 0.25s ease-in-out;
}
.tab-content > * {
	flex: 1 1 100%;
	left: 100%;
}
.tab-content h4 {
	margin-top: 1rem;
}
.tab-content .download-section h4 {
	margin-bottom: 0.45rem;
}
.tab.active .tab-content {
	height: max-content;
	opacity: 1;
	gap: 0 3rem;
	padding: 1rem 0;
	transition-duration: 0.25s;
}
.tab.active .tab-content > * {
	position: relative;
	left: 0;
	transition: all 0.25s ease-in-out;
}
.tab.active .tab-content iframe {
	max-width: 100%;
	min-width: auto;
}
.detail-table {
	width: 95%;
	max-width: 24rem;
}
div:not(#product-list-print) .detail-table .print {
	display: none;
}
.detail-table > * {
	display: flex;
	justify-content: space-between;
}
.detail-table > h4.h4-border {
	margin-bottom: 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--category-bg);
}
.detail-table > div {
	border-bottom: 1px solid var(--category-bg);
}
.detail-table > div:first-of-type {
	border-top: 2px solid var(--category-bg);
}
.detail-table > div:last-of-type {
	border-bottom: 2px solid var(--category-bg);
}
.detail-table > * > * {
	margin-block: 0.5rem;
}
.detail-container .download-section {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: start;
	flex: 1 1 50%;
	max-width: 24rem;
	row-gap: 0.5rem;
	margin-top: 1.5rem;
}
.detail-container .download-section > * {
	flex: 1 1 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
.detail-container .download-section > div > span {
	margin-block: 0.3rem;
}
.allergen {
	margin-right: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	border: 1px solid var(--scndr);
}
.product-detail.product > .image > img {
	opacity: 1;
	transition: opacity ease-in 0.5s;
}
.image .more-images img {
	margin-inline: 0.5rem;
}
.product-detail.product > .image {
	padding-bottom: 1rem;
}
.product-detail.product > .image.swap-image > img {
	opacity: 0;
}
.product-detail.product > .image .flex-carousel {
	padding-top: 0.5rem;
}
.detail-container .tab-content .product-recipe-list {
	display: grid;
	--image-size: 60px;
	padding: 0rem;
}
.detail-container .tab-content .product-recipe-list li.recipe {
	list-style: none;
	margin-block: 0.5rem;
	cursor: pointer;
	--image-size: 60px;
	display: flex;
	align-items: center;
	min-height: var(--image-size);
	font-weight: 500;
	color: var(--prmr);
}
.detail-container .tab-content .product-recipe-list li div {
	flex: 0 0 60px;
	margin-right: 0.5rem;
	text-align: center;
}
.detail-container .tab-content .product-recipe-list li img {
	max-width: var(--image-size);
	max-height: var(--image-size);
}
.detail-container .tab-content .product-recipe-list li span {
	flex: 1 1 auto;
}
.detail-container .tab-content .product-recipe-list button {
	place-self: end start;
	margin-bottom: 0.5rem;
}
/* << detail */

/* sm */
@media (min-width: 576px) {
	.product-detail h1 {
		font-size: 1.8rem;
	}
}
/* md */
@media (min-width: 768px) {
	div.main-content {
		padding: 2rem 1rem;
	}
	.tab.active .tab-content iframe {
		max-width: unset;
		min-width: unset;
	}
	.footer {
		left: var(--sidebar);
		right: 0;
	}
}
/* lg */
@media (min-width: 992px) {
	.product-detail h1 {
		font-size: 2rem;
	}
	.detail-container {
		flex-wrap: nowrap;
		border-bottom: 1px solid var(--light-gray);
		margin-inline: unset;
	}
	.detail-container .tab {
		flex: 0;
		overflow: visible;
		padding-inline: 0.75rem;
		border-top: none;
		border-inline: none;
		border-bottom-right-radius: unset;
		border-bottom-left-radius: unset;
		margin-bottom: -1px;
	}
	.detail-container .tab:hover,
	.detail-container .tab.active {
		border-top: 1px solid var(--light-gray);
		border-inline: 1px solid var(--light-gray);
		margin: -1px;
	}
	.detail-container .tab.active {
		border-bottom-color: var(--bg-color);
	}
	.tab-content {
		position: absolute;
		left: 100%;
		right: 0;
		opacity: 0;
		overflow: hidden;
		transition: all 0.35s ease-in-out;
	}
	.tab-pane {
		width: max-content;
	}
	.tab-pane > img.chevron-icon {
		display: none;
	}
	.tab.active .tab-content {
		left: 0;
		opacity: 1;
		height: max-content;
		transition-delay: 0.1s;
	}
	.detail-container .download-section {
		margin-top: 0;
	}
	.product.product-detail {
		grid-template-rows: 20px auto auto 1fr;
		grid-template-columns: calc(var(--image-size) + 1rem) repeat(12, 33px) auto 16px;
		grid-template-areas:
			'image favorite id-type id-type storage e1 promo set new e2 e2 bidbody bidbody e3 scrollbar'
			'image name name name name name name name name name name name name name scrollbar'
			'image detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 e5 e5 e4 scrollbar'
			'image detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 e5 e5 e4 scrollbar'
			'image brand brand brand brand cart cart cart cart cart cart cart cart e4 scrollbar';
	}
	body:not(.logged-in) .product.product-detail {
		grid-template-areas:
			'image id-type id-type ef storage e1 promo set new e2 e2 bidbody bidbody e3 scrollbar'
			'image name name name name name name name name name name name name name scrollbar'
			'image detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 detail-1 e5 e5 e4 scrollbar'
			'image detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 detail-2 e5 e5 e4 scrollbar'
			'image brand brand brand brand cart cart cart cart cart cart cart cart e4 scrollbar';
	}
	.product-detail .image {
		padding-right: 1rem;
	}
	.product-detail .cart {
		grid-column: 7 / -3;
	}
}

/* max!!! */
@media (max-width: 375px) {
	.product-detail .cart {
		grid-row: 7;
		grid-column: -4 / -1;
		width: auto;
	}
	.product-detail .cart .cart-block {
		flex: 0;
	}
	.product.product-detail {
		--image-size: 260px;
		grid-template-columns: repeat(10, 25px);
	}
}

/* PRINT */
@page {
	margin: 0.8cm 0.5cm 1.5cm 0.5cm;
}
@media print {
	#product-list-print {
		position: absolute;
		inset: 0;
		display: flex !important;
		z-index: -1;
		flex-flow: column;
	}
	#product-list-print > header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid black;
		margin-bottom: 1rem;
	}
	#product-list-print > header h3 {
		margin-block: 1rem;
	}
	#product-list-print h4 {
		margin-block: 1rem 0.75rem;
	}
	#product-list-print input {
		border: none;
		font-size: 1rem;
	}
	#product-list-print .allergens p {
		margin-bottom: 0.25rem;
	}
	#product-list-print .detail-table p {
		margin-block: 0.125rem;
	}
	#product-list-print > main {
		display: flex;
		flex-flow: column;
	}
	#product-list-print > main section {
		padding-bottom: 0.5rem;
	}
	#product-list-print > main section.top {
		display: grid;
		grid-template-columns: calc(50% - 0.5rem) calc(50% - 6rem) 6rem;
	}
	#product-list-print > main section.top .info {
	}
	#product-list-print > main section.top img.product {
		max-width: 100%;
		max-height: 12rem;
		margin-left: 2rem;
		place-self: center;
	}
	#product-list-print > main section.top img.brand {
		height: 3rem;
		max-width: 6rem;
		place-self: start end;
	}
	#product-list-print > main section.middle {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	#product-list-print .gmofree {
		margin-top: 1rem;
	}
	#product-list-print > main section.bottom {
		padding-top: 0.5rem;
		border-top: 1px solid var(--color);
		font-size: smaller;
	}
	#product-list-print > main section.bottom p {
		margin-bottom: 0.5rem;
	}
	#product-list-print > main section.bottom footer {
		padding-top: 0.5rem;
		border-top: 1px solid var(--color);
	}
}