/* Heart line under the post title: centered, 12px below the title and 16px above the photos (the button's 4px padding counts toward both). */
.skylerme-heart-row {
	display: flex;
	justify-content: center;
	margin: 8px 0 12px !important;
}

/* The heart: pink, 20px icon; count in Open Sans 13px Semibold. */
.skylerme-heart {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--custom-color-3);
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1;
	cursor: pointer;
}

.skylerme-heart svg {
	display: block;
	width: 20px;
	height: 20px;
}

.skylerme-heart .skylerme-heart-filled,
.skylerme-heart.is-filled .skylerme-heart-outline {
	display: none;
}

.skylerme-heart.is-filled .skylerme-heart-filled {
	display: block;
}

.skylerme-heart:focus:not(:focus-visible) {
	outline: none;
}

/* Heart on: a quick heartbeat (swell to 135%, dip to 80%, settle). Not on unheart or page load; off for "Reduce motion". */
@keyframes skylerme-heartbeat {
	0% { transform: scale(1); }
	35% { transform: scale(1.35); }
	65% { transform: scale(0.8); }
	100% { transform: scale(1); }
}

.skylerme-heart.is-popping svg {
	animation: skylerme-heartbeat 0.35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.skylerme-heart.is-popping svg {
		animation: none;
	}
}