/**
 * ==========================================================
 * CHACHA HOME — WISHLIST CONTROLS V1.0
 * DEV-05 / PATCH-02
 * ==========================================================
 *
 * Presentation only.
 * Wishlist state/persistence remains owned by ChaCha Core.
 */


/**
 * ==========================================================
 * 01. SHARED HEART ICON
 * ==========================================================
 */
.chacha-wishlist-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.chacha-wishlist-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition:
		fill 180ms ease,
		stroke 180ms ease,
		color 180ms ease;
	pointer-events: none;
}


/**
 * ==========================================================
 * 02. PRODUCT CARD ACTION RAIL
 * ==========================================================
 *
 * Cart remains the primary commerce action at the top-right.
 * Wishlist sits directly below it with an 8px visual gap.
 */
.chacha-product-wishlist-trigger {
	position: absolute;
	top: 64px;
	right: 18px;
	z-index: 20;

	display: inline-flex;
	align-items: center;
	justify-content: center;

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

	margin: 0;
	padding: 0;

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

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

	box-shadow:
		0
		4px
		14px
		rgba(
			32,
			26,
			23,
			0.08
		);

	appearance: none;
	-webkit-appearance: none;

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

	cursor: pointer;

	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease,
		opacity 180ms ease;
}


/**
 * When a card has no compact cart trigger (for example an
 * unavailable product), wishlist moves into the first action slot
 * instead of leaving an unexplained blank circle position.
 */
ul.products
li.product:not(:has(.chacha-product-cart-trigger))
.chacha-product-wishlist-trigger,

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product:not(:has(.chacha-home-product-cart-trigger))
.chacha-product-wishlist-trigger {
	top: 18px;
}


/**
 * Kadence product-info wrappers can become positioning contexts.
 * Keep the wishlist overlay anchored to the whole product card,
 * just like the existing cart trigger.
 */
ul.products
li.product
.product-details.content-bg.entry-content-wrap:has(
	.chacha-product-wishlist-trigger
) {
	position: static !important;
	transform: none !important;
}


/**
 * Favorite hover deliberately differs from cart hover.
 * Cart uses champagne/brass; wishlist stays in the quieter
 * taupe/espresso family.
 */
@media (hover: hover) and (pointer: fine) {

	.chacha-product-wishlist-trigger:hover {
		border-color:
			var(
				--chacha-text-muted,
				#6A5F58
			);

		background:
			var(
				--chacha-surface,
				#EDE6DD
			);

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

		box-shadow:
			0
			6px
			18px
			rgba(
				32,
				26,
				23,
				0.10
			);

		transform: translateY(-1px);
	}

}


.chacha-product-wishlist-trigger:focus-visible {
	outline:
		2px
		solid
		var(
			--chacha-text-muted,
			#6A5F58
		);
	outline-offset: 2px;
}


/**
 * Active favorite state:
 * - Ivory button remains quiet.
 * - Heart itself becomes solid espresso/onyx.
 * - No champagne fill, so it cannot be confused with cart hover.
 */
.chacha-product-wishlist-trigger.is-favorite {
	border-color:
		rgba(
			32,
			26,
			23,
			0.32
		);

	background:
		var(
			--chacha-background-light,
			#FFFDFC
		);

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

.chacha-product-wishlist-trigger.is-favorite
.chacha-wishlist-icon svg {
	fill:
		var(
			--chacha-text-strongest,
			#201A17
		);
	stroke:
		var(
			--chacha-text-strongest,
			#201A17
		);
}


/**
 * Request state. Do not change the heart into a second visual
 * language; simply dim it while Core persists the mutation.
 */
.chacha-product-wishlist-trigger.is-loading {
	pointer-events: none;
	cursor: wait;
	opacity: 0.55;
}


/**
 * ==========================================================
 * 03. SINGLE PRODUCT CONTROL
 * ==========================================================
 */
.chacha-single-wishlist {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 0 18px;
}

.chacha-single-wishlist-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 38px;
	margin: 0;
	padding: 9px 14px;

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

	background: transparent;
	box-shadow: none;

	appearance: none;
	-webkit-appearance: none;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;

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

	cursor: pointer;

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

@media (hover: hover) and (pointer: fine) {

	.chacha-single-wishlist-trigger:hover {
		border-color:
			var(
				--chacha-text-muted,
				#6A5F58
			);
		background:
			var(
				--chacha-surface,
				#EDE6DD
			);
		color:
			var(
				--chacha-text-strongest,
				#201A17
			);
	}

}

.chacha-single-wishlist-trigger:focus-visible {
	outline:
		2px
		solid
		var(
			--chacha-text-muted,
			#6A5F58
		);
	outline-offset: 2px;
}

.chacha-single-wishlist-trigger.is-favorite
.chacha-wishlist-icon svg {
	fill:
		var(
			--chacha-text-strongest,
			#201A17
		);
	stroke:
		var(
			--chacha-text-strongest,
			#201A17
		);
}

.chacha-single-wishlist-trigger.is-loading {
	pointer-events: none;
	cursor: wait;
	opacity: 0.55;
}


/**
 * ==========================================================
 * 04. MOBILE
 * ==========================================================
 */
@media (max-width: 767px) {

	.chacha-product-wishlist-trigger {
		top: 60px;
		right: 14px;
	}

	ul.products
	li.product:not(:has(.chacha-product-cart-trigger))
	.chacha-product-wishlist-trigger,

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-product:not(:has(.chacha-home-product-cart-trigger))
	.chacha-product-wishlist-trigger {
		top: 14px;
	}

	.chacha-single-wishlist {
		margin-bottom: 12px;
	}

}


/**
 * ==========================================================
 * 05. REDUCED MOTION
 * ==========================================================
 */
@media (prefers-reduced-motion: reduce) {

	.chacha-product-wishlist-trigger,
	.chacha-single-wishlist-trigger,
	.chacha-wishlist-icon svg {
		transition: none;
	}

}


/**
 * ==========================================================
 * 06. HEADER FAVORITES ENTRY — PATCH-03
 * ==========================================================
 */
.chacha-header-wishlist {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	min-width: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color:
		var(
			--chacha-text-strongest,
			#201A17
		);
	text-decoration: none !important;
	transition:
		background-color 180ms ease,
		color 180ms ease;
}

.chacha-header-wishlist .chacha-wishlist-icon {
	width: 20px;
	height: 20px;
}

/*
 * DEV-05 / Patch-03B — Header-only icon hardening.
 * Kadence header icon rules can override generic SVG presentation.
 * Keep the wishlist heart explicitly visible without changing the
 * product-card heart controls.
 */
.chacha-header-wishlist .chacha-wishlist-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	color:
		var(
			--chacha-text-strongest,
			#201A17
		) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.chacha-header-wishlist .chacha-wishlist-icon svg {
	display: block !important;
	width: 21px !important;
	height: 21px !important;
	overflow: visible;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.7 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.chacha-header-wishlist .chacha-wishlist-icon svg path {
	fill: none !important;
	stroke: currentColor !important;
}

@media (hover: hover) and (pointer: fine) {

	.chacha-header-wishlist:hover {
		background:
			var(
				--chacha-surface,
				#EDE6DD
			);
		color:
			var(
				--chacha-text-muted,
				#6A5F58
			);
	}

}

.chacha-header-wishlist:focus-visible {
	outline:
		2px
		solid
		var(
			--chacha-text-muted,
			#6A5F58
		);
	outline-offset: 2px;
}

.chacha-header-wishlist__count {
	position: absolute;
	top: 1px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border:
		2px
		solid
		var(
			--chacha-white,
			#FFFDFC
		);
	border-radius: 999px;
	background:
		var(
			--chacha-surface,
			#EDE6DD
		);
	color:
		var(
			--chacha-text-strongest,
			#201A17
		);
	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	pointer-events: none;
}

.chacha-header-wishlist__count.is-empty {
	display: none !important;
}

@media (max-width: 1024px) {

	.chacha-header-wishlist--desktop {
		display: none !important;
	}

	.chacha-header-wishlist--mobile {
		width: 38px;
		height: 38px;
		min-width: 38px;
	}

	.chacha-header-wishlist--mobile .chacha-wishlist-icon {
		width: 19px;
		height: 19px;
	}

	.chacha-header-wishlist__count {
		top: 0;
		right: -1px;
	}

}

@media (min-width: 1025px) {

	.chacha-header-wishlist--mobile {
		display: none !important;
	}

}


/* ==========================================================
 * 07. DEV-05 / PATCH-03C — HEADER LABEL CONTRACT
 * ========================================================== */
.chacha-header-wishlist__label {
	display: none;
	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

@media (min-width: 1025px) {
	.chacha-header-wishlist--desktop
	.chacha-header-wishlist__label {
		display: inline-block;
	}
}