/**
 * ==========================================================
 * CHACHA HOME — GLOBAL CART MODAL
 * ==========================================================
 *
 * Version: 1.3.0
 */


/**
 * ==========================================================
 * 01. BODY LOCK
 * ==========================================================
 */

body.chacha-cart-modal-open {
	overflow: hidden;
}


/**
 * ==========================================================
 * 02. MODAL FOUNDATION
 * ==========================================================
 */

.chacha-cart-modal {
	position: fixed;

	inset: 0;

	z-index: 999999;

	display: flex;

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

	padding: 28px;

	visibility: hidden;

	opacity: 0;

	pointer-events: none;

	transition:
		opacity 180ms ease,
		visibility 180ms ease;
}


.chacha-cart-modal.is-open {
	visibility: visible;

	opacity: 1;

	pointer-events: auto;
}


/**
 * ==========================================================
 * 03. OVERLAY
 * ==========================================================
 *
 * DIV intentionally used instead of BUTTON.
 * This prevents theme button:hover styles from turning
 * the entire overlay gold.
 */

.chacha-cart-modal__overlay,
.chacha-cart-modal__overlay:hover,
.chacha-cart-modal__overlay:focus,
.chacha-cart-modal__overlay:active {
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	margin: 0;

	padding: 0;

	border: 0;

	border-radius: 0;

	background:
		rgba(
			32,
			26,
			23,
			0.58
		) !important;

	box-shadow: none !important;

	outline: none;

	cursor: default;
}


/**
 * ==========================================================
 * 04. DIALOG
 * ==========================================================
 */

.chacha-cart-modal__dialog {
	position: relative;

	z-index: 2;

	width:
		min(
			920px,
			100%
		);

	max-height:
		calc(
			100vh
			-
			56px
		);

	overflow-y: auto;

	padding:
		34px;

	background:
		var(
			--chacha-background,
			#F6F1EA
		);

	box-shadow:
		0
		24px
		70px
		rgba(
			32,
			26,
			23,
			0.22
		);
}


/**
 * ==========================================================
 * 05. CLOSE BUTTON
 * ==========================================================
 */

.chacha-cart-modal__close {
	position: absolute;

	top: 16px;
	right: 16px;

	z-index: 5;

	display: inline-flex;

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

	width: 38px;
	height: 38px;

	margin: 0;

	padding: 0 !important;

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

	border-radius: 50% !important;

	background:
		transparent !important;

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

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

	line-height: 1 !important;

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

	box-shadow: none !important;

	cursor: pointer;

	transition:
		border-color 180ms ease,
		color 180ms ease;
}


.chacha-cart-modal__close:hover {
	border-color:
		var(
			--chacha-accent,
			#B08D57
		) !important;

	background:
		transparent !important;

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


/**
 * ==========================================================
 * 06. SUCCESS HEADER
 * ==========================================================
 */

.chacha-cart-modal__success {
	display: flex;

	align-items: center;

	gap: 14px;

	padding-right: 56px;
}


.chacha-cart-modal__check {
	display: inline-flex;

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

	width: 34px;
	height: 34px;

	flex:
		0
		0
		34px;

	border-radius: 50%;

	background:
		var(
			--chacha-success,
			#2F6B4F
		);

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

	font-size: 15px;

	color:
		#FFFDFC;
}


.chacha-cart-modal__eyebrow {
	margin:
		0
		0
		5px;

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

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

	line-height: 1.4;

	letter-spacing: 0.15em;

	text-transform: uppercase;

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


.chacha-cart-modal__title {
	margin: 0;

	font-family:
		var(
			--chacha-font-heading,
			"Cormorant Garamond",
			serif
		);

	font-size: 31px;
	font-weight: 500;

	line-height: 1;

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


/**
 * ----------------------------------------------------------
 * 06A. STATUS COLORS
 * ----------------------------------------------------------
 *
 * Success keeps the existing jade green. Partial uses ChaCha's
 * restrained bronze tone. Error uses the established alert red so
 * failure cannot be mistaken for a successful cart update.
 */

.chacha-cart-modal.is-notice-error
.chacha-cart-modal__check,

.chacha-cart-modal[data-chacha-modal-status="error"]
.chacha-cart-modal__check {
	background:
		var(
			--chacha-alert,
			#A63D40
		);
}


.chacha-cart-modal.is-notice-error
.chacha-cart-modal__eyebrow,

.chacha-cart-modal[data-chacha-modal-status="error"]
.chacha-cart-modal__eyebrow {
	color:
		var(
			--chacha-alert,
			#A63D40
		);
}


.chacha-cart-modal.is-notice-partial
.chacha-cart-modal__check,

.chacha-cart-modal[data-chacha-modal-status="partial"]
.chacha-cart-modal__check {
	background:
		var(
			--chacha-accent-dark,
			#8F6F3F
		);
}


.chacha-cart-modal.is-notice-partial
.chacha-cart-modal__eyebrow,

.chacha-cart-modal[data-chacha-modal-status="partial"]
.chacha-cart-modal__eyebrow {
	color:
		var(
			--chacha-accent-dark,
			#8F6F3F
		);
}


/**
 * ==========================================================
 * 07. ADDED PRODUCT
 * ==========================================================
 */

.chacha-cart-modal__added {
	display: grid;

	grid-template-columns:
		90px
		minmax(0, 1fr);

	align-items: center;

	gap: 18px;

	margin-top: 26px;

	padding:
		20px
		0;

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

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


.chacha-cart-modal__added-media {
	width: 90px;
}


.chacha-cart-modal__image {
	display: block;

	width: 90px;
	height: auto;

	aspect-ratio:
		4 / 5;

	object-fit: cover;

	background:
		#FFFDFC;
}


.chacha-cart-modal__product-name {
	margin:
		0
		0
		7px;

	font-family:
		var(
			--chacha-font-heading,
			"Cormorant Garamond",
			serif
		);

	font-size: 21px;
	font-weight: 500;

	line-height: 1.15;

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


.chacha-cart-modal__quantity {
	margin:
		0
		0
		7px;

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

	font-size: 10px;

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


.chacha-cart-modal__price {
	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

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

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


.chacha-cart-modal__price
del {
	margin-right: 6px;

	font-size: 10px;

	font-weight: 400;

	opacity: 0.55;
}


.chacha-cart-modal__price
ins {
	text-decoration: none;
}


/**
 * ==========================================================
 * 08. MAIN ACTIONS
 * ==========================================================
 */

.chacha-cart-modal__actions {
	display: grid;

	grid-template-columns:
		1fr
		1fr;

	gap: 10px;

	margin-top: 20px;
}


.chacha-cart-modal__cart-button,
.chacha-cart-modal__continue {
	display: flex;

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

	min-height: 48px;

	margin: 0;

	padding:
		0
		18px !important;

	border-radius: 0 !important;

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

	font-size: 9px !important;
	font-weight: 600 !important;

	line-height: 1 !important;

	letter-spacing: 0.09em;

	text-transform: uppercase;

	text-decoration: none;

	box-shadow: none !important;

	cursor: pointer;
}


.chacha-cart-modal__cart-button {
	border:
		1px
		solid
		var(
			--chacha-text-strongest,
			#201A17
		) !important;

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

	color:
		#FFFDFC !important;
}


.chacha-cart-modal__cart-button:hover {
	border-color:
		var(
			--chacha-accent,
			#B08D57
		) !important;

	background:
		var(
			--chacha-accent,
			#B08D57
		) !important;

	color:
		#FFFDFC !important;
}


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

	background:
		transparent !important;

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


.chacha-cart-modal__continue:hover {
	border-color:
		var(
			--chacha-accent,
			#B08D57
		) !important;

	background:
		transparent !important;

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


/**
 * ==========================================================
 * 09. RECOMMENDATIONS
 * ==========================================================
 */

.chacha-cart-modal__recommendations {
	margin-top: 34px;
}


.chacha-cart-modal__recommendation-heading
p {
	margin:
		0
		0
		6px;

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

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

	letter-spacing: 0.15em;

	text-transform: uppercase;

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


.chacha-cart-modal__recommendation-heading
h3 {
	margin:
		0
		0
		20px;

	font-family:
		var(
			--chacha-font-heading,
			"Cormorant Garamond",
			serif
		);

	font-size: 27px;
	font-weight: 500;

	line-height: 1;

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


.chacha-cart-modal__grid {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: 16px;
}


.chacha-modal-product {
	display: flex;
	flex-direction: column;
	min-width: 0;
}


.chacha-modal-product__media {
	display: block;

	text-decoration: none;
}


/**
 * Recommendation cart trigger
 *
 * The shared visual language (size, icon, hover, focus, loading
 * and success state) belongs to commerce-actions.css. This file
 * only owns placement inside the modal recommendation card.
 */
.chacha-modal-product__cart-trigger {
	position: absolute !important;
	top: 12px;
	right: 12px;
	z-index: 10;
}


.chacha-modal-product__image {
	display: block;

	width: 100%;

	aspect-ratio:
		4 / 5;

	object-fit: cover;

	background:
		#FFFDFC;
}


.chacha-modal-product__title {
	text-decoration: none;
}


.chacha-modal-product__title:hover {
	color:
		var(
			--chacha-accent,
			#B08D57
		);
}


.chacha-modal-product__price {
	min-height: 20px;

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


.chacha-modal-product__price
del {
	margin-right: 4px;

	font-size: 9px;

	font-weight: 400;

	opacity: 0.55;
}


.chacha-modal-product__price
ins {
	text-decoration: none;
}


/**
 * Recommendation CTA
 *
 * Primary CTA visuals are centralized in:
 * assets/css/commerce-actions.css
 *
 * Secondary/fallback actions intentionally remain quiet.
 */

.chacha-modal-product__button--secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 1px solid var(--chacha-subtle, #D7CEC4) !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-family: var(--chacha-font-body, Inter, sans-serif) !important;
	font-size: 8px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--chacha-text-strongest, #201A17) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color 180ms ease, color 180ms ease;
}

@media (hover: hover) {
	.chacha-modal-product__button--secondary:hover {
		border-color: var(--chacha-accent, #B08D57) !important;
		color: var(--chacha-accent-dark, #8F6F3F) !important;
	}
}

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

@media (max-width: 767px) {

	.chacha-cart-modal {
		align-items: flex-end;

		padding: 0;
	}


	.chacha-cart-modal__dialog {
		width: 100%;

		max-height: 92vh;

		padding:
			27px
			18px
			22px;

		box-shadow:
			0
			-18px
			50px
			rgba(
				32,
				26,
				23,
				0.18
			);
	}


	.chacha-cart-modal__title {
		font-size: 27px;
	}


	.chacha-cart-modal__added {
		grid-template-columns:
			74px
			minmax(0, 1fr);

		gap: 14px;
	}


	.chacha-cart-modal__added-media,
	.chacha-cart-modal__image {
		width: 74px;
	}


	.chacha-cart-modal__actions {
		grid-template-columns:
			1fr;
	}


	.chacha-cart-modal__recommendations {
		margin-top: 30px;
	}


	.chacha-cart-modal__grid {
		display: flex;

		gap: 12px;

		overflow-x: auto;

		padding-bottom: 7px;

		scroll-snap-type:
			x proximity;

		scrollbar-width: none;

		-webkit-overflow-scrolling:
			touch;
	}


	.chacha-cart-modal__grid::-webkit-scrollbar {
		display: none;
	}


	.chacha-modal-product {
		flex:
			0
			0
			66%;

		scroll-snap-align: start;
	}


	.chacha-modal-product__cart-trigger {
		top: 10px;
		right: 10px;
	}

}


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

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

	.chacha-cart-modal,
	.chacha-cart-modal__close,
	.chacha-cart-modal__cart-button,
	.chacha-cart-modal__continue {
		transition: none;
	}

}
/**
 * ==========================================================
 * QUICK VARIATION PICKER V1.0
 * ==========================================================
 */

.chacha-modal-product {
	position: relative;
	isolation: isolate;
}


/**
 * Panel
 */

.chacha-quick-variation {
	position: absolute;

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

	z-index: 20;

	max-height:
		78%;

	overflow-y: auto;

	padding:
		15px;

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

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

	box-shadow:
		0
		-12px
		32px
		rgba(
			32,
			26,
			23,
			0.12
		);

	backdrop-filter:
		blur(7px);
}


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


/**
 * Header
 */

.chacha-quick-variation__header {
	display: flex;

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

	gap: 12px;

	margin-bottom:
		10px;
}


.chacha-quick-variation__title {
	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

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

	letter-spacing: 0.05em;

	text-transform: uppercase;

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


.chacha-quick-variation__close {
	display: flex;

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

	width: 28px;
	height: 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;

	cursor: pointer;
}


/**
 * Attribute group
 */

.chacha-quick-variation__group {
	margin-bottom:
		14px;
}


.chacha-quick-variation__label {
	margin:
		0
		0
		7px !important;

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

	font-size: 8px;

	font-weight: 500;

	line-height: 1.4;

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


.chacha-quick-variation__options {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 6px;
}


/**
 * Text option
 */

.chacha-quick-variation__option {
	display: inline-flex;

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

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

	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;
}


.chacha-quick-variation__option:hover {
	border-color:
		var(
			--chacha-accent,
			#B08D57
		) !important;

	background:
		#FFFDFC !important;
}


.chacha-quick-variation__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-quick-variation__option:disabled {
	opacity: 0.28;

	cursor: not-allowed;
}


/**
 * Image / color swatch
 */

.chacha-quick-variation__option.is-image {
	width: 42px;
	height: 42px;

	min-width: 42px;
	min-height: 42px;

	padding:
		3px !important;

	overflow: hidden;
}


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

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/**
 * Error
 */

.chacha-quick-variation__error {
	margin:
		0
		0
		9px !important;

	font-size: 8px;

	line-height: 1.4;

	color:
		var(
			--chacha-alert,
			#A63D40
		);
}


/**
 * Add button
 *
 * Visual CTA styling is centralized in:
 * assets/css/commerce-actions.css
 */

/**
 * Main variable CTA
 */

.chacha-modal-product__button--variation {
	cursor: pointer;
}


/**
 * Mobile
 */

@media (max-width: 767px) {

	.chacha-quick-variation {
		padding:
			14px
			12px;

		max-height:
			82%;
	}


	.chacha-quick-variation__option {
		min-height:
			32px;

		font-size:
			8px !important;
	}


	.chacha-quick-variation__option.is-image {
		width:
			44px;

		height:
			44px;

		min-width:
			44px;

		min-height:
			44px;
	}

}