/* =========================================================
   MINDEMEZ INLINE PRODUCT
   UNIFIED 10PX SYMBOL ALIGNMENT
   ========================================================= */

html {
	--mindemez-product-row: 30px;
}


/* =========================================================
   TOP HOST
   ========================================================= */

#MindemezInlineProductHost,
.mindemez-inline-product-host {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;

	padding:
		30px
		0
		0 !important;

	background: #fff !important;
	color: #000 !important;
}


#MindemezInlineProductHost[hidden],
.mindemez-inline-product-host[hidden] {
	display: none !important;
}


/* =========================================================
   ROOT
   ========================================================= */

.mindemez-inline-product {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #fff !important;
	color: #000 !important;
}


.mindemez-inline-product,
.mindemez-inline-product *,
.mindemez-inline-product *::before,
.mindemez-inline-product *::after {
	box-sizing: border-box !important;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.mindemez-inline-product__layout {
	display: flex !important;

	flex-direction: row !important;
	flex-wrap: nowrap !important;

	align-items: flex-start !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   MEDIA
   ========================================================= */

.mindemez-inline-product__media {
	position: relative !important;

	order: 1 !important;

	flex:
		0 0 50% !important;

	width: 50% !important;
	max-width: 50% !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #fff !important;

	aspect-ratio:
		var(
			--mindemez-inline-image-ratio,
			auto
		) !important;

	overflow: hidden !important;
}


.mindemez-inline-product__image {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: contain !important;

	opacity: 1 !important;
}


.mindemez-inline-product__media.is-image-loading
.mindemez-inline-product__image {
	opacity: 0 !important;
}


.mindemez-inline-product__image-loader {
	position: absolute !important;

	left: 50% !important;
	top: 50% !important;

	z-index: 3 !important;

	display: none !important;

	align-items: center !important;
	justify-content: center !important;

	gap: 5px !important;

	width: auto !important;
	height: 12px !important;

	margin: 0 !important;
	padding: 0 !important;

	transform:
		translate(
			-50%,
			-50%
		) !important;

	pointer-events: none !important;
}


.mindemez-inline-product__media.is-image-loading
.mindemez-inline-product__image-loader {
	display: flex !important;
}


.mindemez-inline-product__image-loader
span {
	display: block !important;

	width: 6px !important;
	height: 6px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 50% !important;

	background: #9a9a9a !important;

	animation:
		mindemezInlineImageDot
		900ms
		infinite
		ease-in-out !important;
}


.mindemez-inline-product__image-loader
span:nth-child(2) {
	animation-delay: 150ms !important;
}


.mindemez-inline-product__image-loader
span:nth-child(3) {
	animation-delay: 300ms !important;
}


@keyframes mindemezInlineImageDot {

	0%,
	100% {
		opacity: .25;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-2px);
	}

}


/* =========================================================
   DETAILS

   Both sides = 10px.

   Therefore title −,
   option +/-,
   info +/-
   all end exactly 10px from column edge.
   ========================================================= */

.mindemez-inline-product__details {
	order: 2 !important;

	flex:
		0 0 50% !important;

	width: 50% !important;
	max-width: 50% !important;
	min-width: 0 !important;

	margin: 0 !important;

	padding:
		0
		10px
		30px !important;

	background: #fff !important;
}


/* =========================================================
   TITLE ROW
   ========================================================= */

.mindemez-inline-product__title-row {
	display: flex !important;

	align-items: center !important;
	justify-content: space-between !important;

	width: 100% !important;

	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	background: #fff !important;
}


/* =========================================================
   TITLE CLICK AREA
   ========================================================= */

.mindemez-inline-product__title-jump {
	-webkit-appearance: none !important;
	appearance: none !important;

	display: flex !important;

	align-items: center !important;

	flex:
		1 1 auto !important;

	min-width: 0 !important;

	height: 30px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;
	color: #000 !important;

	font-size: 14px !important;
	font-weight: 400 !important;

	line-height: 30px !important;
	letter-spacing: .1rem !important;

	text-align: left !important;

	cursor: pointer !important;
}


.mindemez-inline-product__title {
	display: block !important;

	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;

	line-height: 30px !important;

	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px !important;
}


/* =========================================================
   TITLE MINUS

   Symbol itself ends at details content edge.
   Details padding-right = 10px.
   ========================================================= */

.mindemez-inline-product__close {
	-webkit-appearance: none !important;
	appearance: none !important;

	display: flex !important;

	align-items: center !important;
	justify-content: flex-end !important;

	flex:
		0 0 24px !important;

	width: 24px !important;
	height: 30px !important;

	min-width: 24px !important;
	max-width: 24px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;

	cursor: pointer !important;
}


.mindemez-inline-product__title-symbol {
	position: relative !important;

	display: block !important;

	width: 14px !important;
	height: 14px !important;

	min-width: 14px !important;
	max-width: 14px !important;

	margin: 0 !important;
	padding: 0 !important;
}


.mindemez-inline-product__title-symbol::before {
	content: "" !important;

	position: absolute !important;

	left: 50% !important;
	top: 50% !important;

	width: 14px !important;
	height: 1px !important;

	background: #000 !important;

	transform:
		translate(
			-50%,
			-50%
		) !important;
}


/* =========================================================
   PRODUCT INFO RHYTHM

   TITLE
   EMPTY ROW
   SHORT DESCRIPTION
   EMPTY ROW
   QUICK ADD PRICE
   ========================================================= */

.mindemez-inline-product__spacer {
	display: block !important;

	width: 100% !important;

	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;

	margin: 0 !important;
	padding: 0 !important;

	pointer-events: none !important;
}


.mindemez-inline-product__short-description {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #000 !important;

	font-family: Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;

	text-align: left !important;
	text-indent: 0 !important;
	text-transform: none !important;

	white-space: pre-line !important;
}


.mindemez-inline-product__short-description p {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: inherit !important;
	font: inherit !important;
	line-height: inherit !important;
	text-align: left !important;
	text-indent: 0 !important;
	white-space: pre-line !important;
}


.mindemez-inline-product__short-description br {
	display: block !important;
}


.mindemez-inline-product__quick-add {
	-webkit-appearance: none !important;
	appearance: none !important;

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: auto !important;
	min-width: 0 !important;
	max-width: max-content !important;

	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;

	margin: 0 !important;
	padding: 0 10px !important;

	border: 1px solid #20b1c2 !important;
	border-radius: 0 !important;

	outline: 0 !important;
	box-shadow: none !important;

	background: #fff !important;
	color: #20b1c2 !important;

	font-family: Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;

	text-align: left !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap !important;

	cursor: pointer !important;

	transition:
		background-color .15s linear,
		color .15s linear !important;
}


.mindemez-inline-product__quick-add *,
.mindemez-inline-product__quick-add .woocommerce-Price-amount,
.mindemez-inline-product__quick-add .woocommerce-Price-currencySymbol {
	color: inherit !important;
	font: inherit !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}


.mindemez-inline-product__quick-add:hover,
.mindemez-inline-product__quick-add:focus-visible,
.mindemez-inline-product__quick-add:active,
.mindemez-inline-product__quick-add.is-adding {
	background: #20b1c2 !important;
	color: #fff !important;
}


.mindemez-inline-product__quick-add:disabled {
	opacity: 1 !important;
	cursor: default !important;
}


/* Old elements are no longer rendered. */

.mindemez-inline-product__price,
.mindemez-inline-product__add {
	display: none !important;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.mindemez-inline-product__option {
	display: block !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


.mindemez-inline-product__option
> summary {
	list-style: none !important;
}


.mindemez-inline-product__option
> summary::-webkit-details-marker {
	display: none !important;
}


/* =========================================================
   OPTION + INFO ROW

   Their parent already has 10px right inset.
   No extra padding-right.
   ========================================================= */

.mindemez-inline-product__option-row {
	display: flex !important;

	align-items: center !important;
	justify-content: space-between !important;

	width: 100% !important;

	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	border-bottom:
		1px solid #efefef !important;

	background: #fff !important;
	color: #000 !important;
}


/* =========================================================
   OPTION + INFO SYMBOLS
   ========================================================= */

.mindemez-inline-product__option-symbol {
	position: relative !important;

	display: block !important;

	flex:
		0 0 14px !important;

	width: 14px !important;
	height: 14px !important;

	min-width: 14px !important;
	max-width: 14px !important;

	margin: 0 !important;
	padding: 0 !important;
}


.mindemez-inline-product__option-symbol::before,
.mindemez-inline-product__option-symbol::after {
	content: "" !important;

	position: absolute !important;

	left: 50% !important;
	top: 50% !important;

	background: #000 !important;

	transform:
		translate(
			-50%,
			-50%
		) !important;
}


.mindemez-inline-product__option-symbol::before {
	width: 14px !important;
	height: 1px !important;
}


.mindemez-inline-product__option-symbol::after {
	width: 1px !important;
	height: 14px !important;
}


.mindemez-inline-product__option[open]
.mindemez-inline-product__option-symbol::after {
	display: none !important;
}


/* =========================================================
   OPTION PANEL
   ========================================================= */

.mindemez-inline-product__option-panel {
	padding:
		6px
		0 !important;
}


.mindemez-inline-product__option-value {
	width: 100% !important;

	min-height: 30px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;

	text-align: left !important;
}


/* =========================================================
   ADD
   ========================================================= */

.mindemez-inline-product__add {
	width: 100% !important;

	height: 40px !important;

	margin:
		20px
		0
		0 !important;

	padding:
		0
		10px !important;

	border:
		1px solid #000 !important;

	border-radius: 0 !important;

	background: #000 !important;
	color: #fff !important;
}




/* =========================================================
   STICKY PRODUCT TITLE

   Full viewport row.
   10px on both sides.
   ========================================================= */

#MindemezStickyProductTitle {
	position: fixed !important;

	left: 0 !important;
	right: 0 !important;

	top:
		max(
			0px,
			calc(
				30px +
				var(
					--mindemez-header-push,
					0px
				)
			)
		) !important;

	display: none !important;

	align-items: center !important;

	width: 100% !important;

	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;

	margin: 0 !important;

	padding:
		0
		10px !important;

	border: 0 !important;

	border-bottom:
		1px solid #efefef !important;

	background: #fff !important;

	z-index: 99998 !important;
}


html.mindemez-product-title-sticky
#MindemezStickyProductTitle {
	display: flex !important;
}


#MindemezStickyProductTitle
.mindemez-sticky-product-title__jump {
	display: flex !important;

	align-items: center !important;

	flex:
		1 1 auto !important;

	min-width: 0 !important;

	height: 30px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;

	text-align: left !important;

	cursor: pointer !important;
}


#MindemezStickyProductTitle
.mindemez-sticky-product-title__close {
	display: flex !important;

	align-items: center !important;
	justify-content: flex-end !important;

	flex:
		0 0 24px !important;

	width: 24px !important;
	height: 30px !important;

	min-width: 24px !important;
	max-width: 24px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;
}


/* =========================================================
   MAIN STICKY STACK
   ========================================================= */

html.mindemez-product-title-sticky
#MindemezMain {
	--main-header:
		calc(
			max(
				0px,
				calc(
					30px +
						var(
							--mindemez-header-push,
							0px
						)
				)
			)
			+
			30px
		) !important;
}


/* =========================================================
   BOTTOM OVERRIDE

   Bottom host never gets top spacer.
   ========================================================= */

#MindemezBottom
.mindemez-bottom__product-host {
	padding-top: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 989px) {

	#MindemezInlineProductHost,
	.mindemez-inline-product-host {
		padding-top:
			26px !important;
	}


	.mindemez-inline-product__layout {
		flex-direction:
			column !important;
	}


	.mindemez-inline-product__media {
		flex:
			0 0 auto !important;

		width: 100% !important;
		max-width: 100% !important;
	}


	.mindemez-inline-product__details {
		flex:
			0 0 auto !important;

		width: 100% !important;
		max-width: 100% !important;

		padding:
			0
			10px
			20px !important;
	}


	.mindemez-inline-product__title-row {
		height: 26px !important;
		min-height: 26px !important;
		max-height: 26px !important;

		margin-bottom: 0 !important;
	}


	.mindemez-inline-product__title-jump,
	.mindemez-inline-product__title {
		height: 26px !important;

		line-height: 26px !important;
	}


	.mindemez-inline-product__spacer {
		height: 26px !important;
		min-height: 26px !important;
		max-height: 26px !important;
	}


	.mindemez-inline-product__short-description,
	.mindemez-inline-product__short-description p {
		font-size: 13px !important;
	}


	.mindemez-inline-product__quick-add {
		width: auto !important;
		min-width: 0 !important;
		max-width: max-content !important;

		height: 26px !important;
		min-height: 26px !important;
		max-height: 26px !important;

		padding: 0 10px !important;

		font-size: 13px !important;
	}


	.mindemez-inline-product__close {
		height: 26px !important;
	}


	.mindemez-inline-product__option-row {
		height: 26px !important;
		min-height: 26px !important;
		max-height: 26px !important;
	}


	#MindemezStickyProductTitle {
		top:
			max(
				0px,
				calc(
					26px +
						var(
							--mindemez-header-push,
							0px
						)
				)
			) !important;

		height: 26px !important;
		min-height: 26px !important;
		max-height: 26px !important;

		padding:
			0
			10px !important;
	}


	#MindemezStickyProductTitle
	.mindemez-sticky-product-title__jump,
	#MindemezStickyProductTitle
	.mindemez-sticky-product-title__close {
		height: 26px !important;
	}


	html.mindemez-product-title-sticky
	#MindemezMain {
		--main-header:
			calc(
				max(
					0px,
					calc(
						26px +
							var(
								--mindemez-header-push,
								0px
							)
					)
				)
				+
				26px
			) !important;
	}

}