/**
 * Likes — public heart + count control.
 *
 * The theme styles every <button> globally (padding / shadow / radius + a mobile
 * width:100%); the toggle resets those on its own class so it stays a compact
 * pill. Tokens only — no new palette. The "liked" state fills the heart in the
 * brand terracotta, distinct from the amber used by the saved-for-later bookmark.
 */

/* -------------------------------------------------------------------------- */
/* Like toggle                                                                */
/* -------------------------------------------------------------------------- */

.mp-like-toggle {
	/* Reset the global button treatment. */
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	width: auto;
	min-width: 0;
	margin: 0;
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	border: 1px solid var(--border-light, rgba(0, 0, 0, 0.1));
	border-radius: 999px;
	box-shadow: none;
	background: var(--bg-primary, #fff);
	color: var(--text-secondary, #555);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mp-like-toggle:hover,
.mp-like-toggle:focus-visible {
	color: var(--brand-terracotta, #a84432);
	border-color: var(--brand-terracotta, #a84432);
}

.mp-like-toggle__icon {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
	flex: none;
	fill: none;
	stroke: currentColor;
}

.mp-like-count {
	font-variant-numeric: tabular-nums;
}

/* Liked: filled heart in the brand terracotta. */
.mp-like-toggle[aria-pressed="true"] {
	color: var(--brand-terracotta, #a84432);
	border-color: var(--brand-terracotta, #a84432);
}

.mp-like-toggle[aria-pressed="true"] .mp-like-toggle__icon {
	fill: currentColor;
}

.mp-like-toggle--error {
	color: var(--error, #c0392b);
	border-color: var(--error, #c0392b);
}

/* Card placement: float top-left over a card hero (the bookmark toggle takes
   top-right). The canonical .mp-cm-card is already position:relative (set by
   bookmarks.css). */
.mp-like-toggle--card {
	position: absolute;
	top: var(--space-3, 0.75rem);
	left: var(--space-3, 0.75rem);
	z-index: 3;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(2px);
}

/* -------------------------------------------------------------------------- */
/* Social-actions row (detail pages — like + share live here together)        */
/* -------------------------------------------------------------------------- */

.mp-social-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	/* Breathing room from the byline / header text above it on the detail-page
	   heroes (story, brand, store, product) so the row isn't glued to the text. */
	margin-top: var(--space-5, 1.25rem);
}

/* Keep the grouped controls (like pill, share, bookmark) one uniform size + shape
   in the detail-page row: the bookmark's default icon is a touch larger and its
   corners squarer than the like/share. Normalise it here only — cards keep the
   bookmark's own card-overlay styling. */
.mp-social-actions .mp-bookmark-toggle {
	border-radius: 999px;
}

.mp-social-actions .mp-bookmark-toggle__icon {
	width: 1.15rem;
	height: 1.15rem;
}