/**
 * Modern Shop Connector – Merkliste.
 *
 * Theme-neutral nach PLUGIN-STYLING-PRINCIPLES.md: zentrale Variablen-Ebene,
 * Farben über die Fallback-Kette Theme → WordPress-Standardnamen → neutraler
 * Endwert. Symbolik: Lesezeichen, KEIN Herz (Händlerentscheid 2026-08-13).
 */

.msc-wl-btn {
	/* Zentrale Stellschrauben. */
	--msc-wl-color: var(--mn-text, var(--wp--preset--color--contrast, #3a3a3a));
	--msc-wl-active: var(--mn-link, var(--wp--preset--color--primary, #4a7c46));
	--msc-wl-bg: var(--mn-white, var(--wp--preset--color--base, #ffffff));
	--msc-wl-border: var(--mn-border, #e0ddd2);

	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--msc-wl-border);
	background: var(--msc-wl-bg);
	color: var(--msc-wl-color);
	border-radius: 50px;
	padding: 6px 10px;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	line-height: 1;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.msc-wl-btn:hover {
	color: var(--msc-wl-active);
	border-color: var(--msc-wl-active);
}

/* Gemerkt: Lesezeichen gefüllt, Häkchen in Kontrastfarbe. Zustand setzt
 * ausschliesslich das Skript (aria-pressed) – nie der Server. */
.msc-wl-btn[aria-pressed="true"] {
	color: var(--msc-wl-active);
	border-color: var(--msc-wl-active);
}

.msc-wl-btn .msc-wl-check {
	opacity: 0;
	transition: opacity 0.15s ease;
}

.msc-wl-btn[aria-pressed="true"] .msc-wl-flag {
	fill: currentColor;
}

.msc-wl-btn[aria-pressed="true"] .msc-wl-check {
	opacity: 1;
	stroke: var(--msc-wl-bg);
}

.msc-wl-btn--pulse {
	transform: scale(1.12);
}

/* Auf der Kachel (Loop, fremde Themes): kompakt ohne Beschriftung. */
.msc-wl-btn:not(.msc-wl-btn--labeled) {
	padding: 7px;
	border-radius: 50%;
}

/* Runder Knopf braucht runden Fokusring – die globale Theme-Fokusregel
 * (base.css, :focus-visible mit border-radius: 2px auf ALLEM) legte sonst
 * eckige Rahmen um runde Knöpfe. Bekannter Reibungspunkt (Wurzel-CLAUDE.md):
 * das Plugin wehrt sich selbst, eng begrenzt auf die eigenen Elemente. */
.msc-wl-btn:focus-visible,
.msc-wl-remove:focus-visible {
	border-radius: 50px !important;
}

/* --- Listen-Seite ----------------------------------------------------- */

/* min(240px, 100%) statt 240px: auto-fill + starres Minimum überlief auf
 * schmalen Telefonen den Rahmen (real gemessen am Vital-Check, 2026-08-12). */
.msc-wl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 18px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.msc-wl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--mn-white, var(--wp--preset--color--base, #ffffff));
	border: 1px solid var(--mn-border, #e6e3d8);
	border-radius: var(--mn-radius-box, 12px);
	padding: 14px;
}

.msc-wl-card-media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.msc-wl-card-title {
	font-weight: 600;
	color: var(--mn-text-dark, var(--wp--preset--color--contrast, #2c2c2c));
	text-decoration: none;
}

.msc-wl-card-title:hover {
	color: var(--mn-link, var(--wp--preset--color--primary, #4a7c46));
}

.msc-wl-card-price {
	font-size: 15px;
}

.msc-wl-card-stock {
	margin: 0;
	font-size: 13px;
	color: var(--mn-muted, #8a8778);
}

.msc-wl-card-actions {
	margin-top: auto;
	/* Ueber der Ganz-Kachel-Klickflaeche (siehe unten). */
	position: relative;
	z-index: 2;
}

/* «In den Warenkorb» und «Optionen waehlen» EXAKT gleich gross
 * (Haendlerbefund 2026-08-13): Der Kaufknopf erbt die WooCommerce-
 * Kaufknopf-Optik mit eigener Polsterung, der Optionen-Link die schlichte
 * Button-Optik mit 1px-Rahmen - zwei verschiedene Hoehen und Breiten.
 * Feste Mindesthoehe + Flex-Zentrierung + border-box machen beide
 * deckungsgleich, egal was das Theme an Polsterung und Rahmen mitgibt. */
.msc-wl-card-actions .msc-wl-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 16px;
	line-height: 1.2;
}

/* --- Ganze Kachel klickbar + Klick-/Touch-Feedback --------------------
 *
 * Dieselben zwei Bausteine wie bei den Theme-Produktkacheln (dort ab
 * Theme 1.29.1), hier theme-neutral im Plugin, weil die Merkliste-Kacheln
 * dem Connector gehoeren: (1) Der Titel-Link spannt eine unsichtbare
 * Klickflaeche ueber die ganze Karte; Entfernen-Kreuz und Kauf-/Optionen-
 * Knopf liegen darueber und bleiben eigenstaendig. (2) Die ganze Karte
 * drueckt sich beim Klick/Tipp kurz ein - Abdunkeln statt Ausbleichen
 * (kein opacity, Haendlerentscheid vom Touch-Feedback-Umbau). */
.msc-wl-card-title::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.msc-wl-card {
	transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.15s ease-out;
}

.msc-wl-card:active:not(:has(.msc-wl-add:active, .msc-wl-remove:active)) {
	transform: scale(0.98);
	filter: brightness(0.97);
	transition-duration: 0s;
}

/* Die Knoepfe druecken sich selbst ein und lassen die Karte in Ruhe. */
.msc-wl-add,
.msc-wl-remove {
	transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.msc-wl-add:active,
.msc-wl-remove:active {
	transform: scale(0.97);
	transition-duration: 0s;
}

.msc-wl-remove {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--mn-box, var(--wp--preset--color--base-2, #f4f2ea));
	color: var(--mn-text, #3a3a3a);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
}

.msc-wl-remove:hover {
	background: var(--mn-border, #e0ddd2);
}

.msc-wl-empty {
	text-align: center;
	padding: 34px 16px;
}

.msc-wl-empty-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}

.msc-wl-guest-hint {
	font-size: 14px;
	color: var(--mn-muted, #8a8778);
	background: var(--mn-box, var(--wp--preset--color--base-2, #f4f2ea));
	border-radius: 8px;
	padding: 10px 14px;
}

.msc-wl-error,
.msc-wl-loading {
	color: var(--mn-muted, #8a8778);
}