/* Better Homes: Woodmart "Add to wishlist" as an outline CTA under Add to cart / WhatsApp.
 * Scoped to our own wrapper .bh-wishlist-cta (see inc/wishlist-cta.php).
 *
 * Everything that defines the look is set here in CSS, using the same Woodmart button variables
 * Add to cart uses, so the very first paint is already correct (no flash of default bold styling).
 * assets/js/cta-sync.js only fine-tunes the size afterwards. Woodmart's wishlist markup and script
 * are untouched, so add / remove / loading / added states keep working. */

.bh-wishlist-cta {
	width: 100%;
	margin: 0;
}

.bh-wishlist-cta .wd-wishlist-btn {
	/* Woodmart action-button variables: black text and icon, 18px heart like the WhatsApp icon. */
	--wd-action-color: #111;
	--wd-action-color-hover: #111;
	--wd-action-icon-size: 18px;
	--wd-action-text-color-hover: #111;
	--wd-action-icon-color-hover: #111;
	display: flex;
	width: 100%;
	margin: 0;
}

.bh-wishlist-cta .wd-wishlist-btn > a {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--btn-height, 42px);
	padding: var(--btn-padding, 5px 20px);
	border: 1px solid #111;
	border-radius: var(--btn-brd-radius, 4px);
	background: transparent;
	color: #111;
	font-family: var(--btn-font-family, inherit);
	font-size: var(--btn-font-size, 13px);
	font-weight: 400 !important;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.bh-wishlist-cta .wd-wishlist-btn > a:hover {
	background: #f4f4f4; /* a faint tint on hover only; the button itself has no fill */
	border-color: #111;
}

.bh-wishlist-cta .wd-wishlist-btn > a:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

.bh-wishlist-cta .wd-wishlist-btn > a.added {
	gap: 10px; /* Woodmart widens the gap in the added state for its check badge */
}

.bh-wishlist-cta .wd-wishlist-btn .wd-action-text {
	color: #111;
	font-size: inherit;
	font-weight: 400 !important;
	line-height: inherit;
	text-transform: inherit;
}

.bh-wishlist-cta .wd-wishlist-btn .wd-action-icon:before {
	color: #111;
}