/*
  TroveFinch wishlist: the heart on product cards and the product page,
  and the status message. Saved hearts use the brand accent (terracotta),
  with a darker outline so they stay visible on light photos (3:1+).
*/

.tf-card {
	position: relative;
}

.tf-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	border: 0;
	color: var(--wp--preset--color--text, #1f2a28);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.tf-wish__icon {
	flex: none;
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
	transition: fill var(--tf-duration-fast, 150ms) ease, transform var(--tf-duration-fast, 150ms) ease;
}

.tf-wish[aria-pressed="true"] .tf-wish__icon {
	fill: var(--wp--preset--color--accent, #d9785a);
	stroke: #b4573b;
}

.tf-wish:active .tf-wish__icon {
	transform: scale(0.88);
}

.tf-wish:focus-visible {
	outline: 2px solid var(--tf-scheme-link, #2e5e57);
	outline-offset: 2px;
}

/* On a card: a round button on the photo's top right corner (44px target). */
.tf-wish--icon {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background: rgba(250, 248, 244, 0.92);
	box-shadow: 0 1px 3px rgba(31, 42, 40, 0.16);
}

.tf-wish--icon:hover {
	background: #fff;
}

/* On the product page: an outlined button with the label. */
.tf-wish--label {
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--border, #ddd8cc);
	border-radius: 999px;
	background: transparent;
	font-weight: 600;
}

.tf-wish--label:hover {
	border-color: currentColor;
}

/* Status message ("Saved on this device. Log in to keep your wishlist"). */
.tf-wish-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 1000;
	max-width: 420px;
	margin-inline: auto;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--wp--preset--color--text, #1f2a28);
	color: var(--wp--preset--color--background, #faf8f4);
	box-shadow: 0 4px 12px rgba(31, 42, 40, 0.2);
	font-size: 0.9375rem;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}

.tf-wish-toast.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.tf-wish-toast a {
	color: var(--wp--preset--color--brand-on-dark, #a9cfc8);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.tf-wish__icon,
	.tf-wish-toast {
		transition: none;
	}

	.tf-wish:active .tf-wish__icon {
		transform: none;
	}
}