/**
 * ==========================================================
 * CHACHA HOME — CATALOG QUICK VARIATION PICKER
 * ==========================================================
 *
 * Version: 1.3.0
 */


/**
 * ==========================================================
 * 01. PRODUCT CARD
 * ==========================================================
 */

.woocommerce
ul.products
li.product,

.related.products
li.product {
	position: relative;
}


/**
 * ==========================================================
 * 02. TRIGGER
 * ==========================================================
 *
 * Visual CTA styling is centralized in:
 * assets/css/commerce-actions.css
 */

/**
 * ==========================================================
 * 03. PICKER PANEL
 * ==========================================================
 */

.chacha-product-quick-picker {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	z-index: 50;

	display: flex;

	flex-direction: column;

	width: 100%;

	max-height:
		82%;

	overflow: hidden;

	box-sizing: border-box;

	padding:
		18px;

	border:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		);

	background:
		rgba(
			255,
			253,
			252,
			0.985
		);

	box-shadow:
		0
		-16px
		40px
		rgba(
			32,
			26,
			23,
			0.14
		);

	backdrop-filter:
		blur(8px);
}


.chacha-product-quick-picker[hidden] {
	display: none !important;
}


.chacha-product-quick-picker:focus {
	outline: none;
}


/**
 * Media-overlay mode.
 *
 * JavaScript aligns left / bottom / width / max-height to the
 * real .chacha-product-media rectangle. The picker therefore
 * rises from the bottom of the 4:5 image without changing card
 * height or pushing neighbouring products.
 */
.chacha-product-quick-picker.is-media-overlay {
	top: auto;
	right: auto;

	border-radius: 0;
}


/**
 * ==========================================================
 * 04. HEADER
 * ==========================================================
 */

.chacha-product-quick-picker__header {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap: 14px;

	margin-bottom: 12px;
}


.chacha-product-quick-picker__eyebrow {
	margin:
		0
		0
		4px !important;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 7px;
	font-weight: 600;

	line-height: 1.4;

	letter-spacing: 0.15em;

	text-transform: uppercase;

	color:
		var(
			--chacha-accent,
			#B08D57
		);
}



.chacha-product-quick-picker__close {
	display: inline-flex;

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

	width: 28px;
	height: 28px;

	flex:
		0
		0
		28px;

	margin: 0;

	padding: 0 !important;

	border: 0 !important;

	background:
		transparent !important;

	font-size: 22px !important;
	font-weight: 300 !important;

	line-height: 1 !important;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		) !important;

	box-shadow: none !important;

	cursor: pointer;
}


/**
 * ==========================================================
 * 05. ATTRIBUTE GROUP
 * ==========================================================
 */

.chacha-product-quick-picker__group {
	margin-bottom: 15px;
}


.chacha-product-quick-picker__label {
	margin:
		0
		0
		8px !important;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 8px;
	font-weight: 600;

	line-height: 1.4;

	letter-spacing: 0.04em;

	text-transform: uppercase;

	color:
		var(
			--chacha-text-medium,
			#6A5F58
		);
}


.chacha-product-quick-picker__options {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 6px;
}


/**
 * ==========================================================
 * 06. TEXT OPTION
 * ==========================================================
 */

.chacha-product-quick-picker__option {
	display: inline-flex;

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

	min-width: 38px;
	min-height: 31px;

	margin: 0;

	padding:
		0
		9px !important;

	border:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		) !important;

	border-radius: 0 !important;

	background:
		#FFFDFC !important;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		) !important;

	font-size: 8px !important;
	font-weight: 500 !important;

	line-height: 1 !important;

	color:
		var(
			--chacha-text-strong,
			#3B322D
		) !important;

	box-shadow: none !important;

	cursor: pointer;

	transition:
		border-color 160ms ease,
		opacity 160ms ease;
}


.chacha-product-quick-picker__option:hover:not(:disabled) {
	border-color:
		var(
			--chacha-accent,
			#B08D57
		) !important;
}


.chacha-product-quick-picker__option.is-selected {
	border-color:
		var(
			--chacha-text-strongest,
			#201A17
		) !important;

	box-shadow:
		inset
		0
		0
		0
		1px
		var(
			--chacha-text-strongest,
			#201A17
		) !important;
}


.chacha-product-quick-picker__option:disabled {
	opacity: 0.25;

	cursor: not-allowed;
}


/**
 * ==========================================================
 * 07. IMAGE / COLOR SWATCH
 * ==========================================================
 */

.chacha-product-quick-picker__option.is-image {
	position: relative;

	width: 62px;
	height: 62px;

	min-width: 62px;
	min-height: 62px;

	padding:
		4px !important;

	overflow: hidden;

	background:
		#FFFDFC !important;
}


.chacha-product-quick-picker__option.is-image
img {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0 !important;

	object-fit: cover;

	transition:
		transform 180ms ease;
}


.chacha-product-quick-picker__option.is-image:hover:not(:disabled)
img {
	transform: scale(1.04);
}


.chacha-product-quick-picker__option.is-image.is-selected {
	border-color:
		#201A17 !important;

	box-shadow:
		inset 0 0 0 2px #201A17 !important;
}


.chacha-product-quick-picker__option.is-image.is-selected::after {
	content: "✓";

	position: absolute;

	top: 4px;
	right: 4px;

	display: flex;

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

	width: 17px;
	height: 17px;

	border-radius: 50%;

	background:
		#201A17;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	color:
		#FFFDFC;

	pointer-events: none;
}



.chacha-product-quick-picker__body {
	flex:
		0
		1
		auto;

	min-height: 0;

	max-height:
		min(
			240px,
			38vh
		);

	overflow-y:
		auto;

	overflow-x:
		hidden;

	overscroll-behavior:
		contain;

	-webkit-overflow-scrolling:
		touch;

	padding-right:
		4px;

	scrollbar-width:
		thin;
}


/**
 * ==========================================================
 * 08. STATUS
 * ==========================================================
 */

.chacha-product-quick-picker__status {
	margin:
		2px
		0
		10px !important;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 8px;

	line-height: 1.45;

	color:
		var(
			--chacha-text-medium,
			#6A5F58
		);
}


.chacha-product-quick-picker__status.is-ready {
	font-weight: 600;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		);
}


.chacha-product-quick-picker__status.is-error {
	color:
		var(
			--chacha-alert,
			#A63D40
		);
}


/**
 * ==========================================================
 * 09. ADD TO CART
 * ==========================================================
 *
 * Visual CTA styling is centralized in:
 * assets/css/commerce-actions.css
 */

/**
 * ==========================================================
 * 10. MOBILE
 * ==========================================================
 */

@media (max-width: 767px) {

	.chacha-product-quick-picker {
		max-height: 88%;

		padding:
			15px
			12px;
	}


	.chacha-product-quick-picker__header {
		margin-bottom: 10px;
	}


	.chacha-product-quick-picker__close {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
	}


	.chacha-product-quick-picker__option {
		min-height: 32px;

		padding:
			0
			8px !important;
	}


	.chacha-product-quick-picker__option.is-image {
		width: 44px;
		height: 44px;

		min-width: 44px;
		min-height: 44px;
	}

	.chacha-product-quick-picker__body {
		max-height:
			min(
				220px,
				34vh
			);
	}

}



/**
 * ==========================================================
 * 11. REDUCED MOTION
 * ==========================================================
 */

@media (prefers-reduced-motion: reduce) {

	.chacha-product-quick-picker__option {
		transition: none;
	}

}


/**
 * ==========================================================
 * VARIATION IMAGE PREVIEW
 * ==========================================================
 */

/**
 * While Quick Picker is open, always keep the selected
 * variation image visible.
 *
 * Disable the normal second-image hover effect.
 */

.chacha-quick-picker-open
.chacha-product-media__secondary,

.chacha-quick-picker-open
.chacha-product-card__image--secondary,

.chacha-quick-picker-open
.chacha-product-card__secondary-image,

.chacha-quick-picker-open
.secondary-image {
	opacity: 0 !important;

	visibility: hidden !important;

	pointer-events: none !important;
}


.chacha-variation-preview-image {
	opacity: 1 !important;

	visibility: visible !important;
}