/**
 * UI4WP – Merkliste (frontend).
 *
 * Theming: custom properties, globally or per wrapper, e.g.
 *
 *     :root {
 *         --wui-wish-accent: #e11d48;     // filled heart
 *         --wui-wish-size: 22px;          // heart size
 *         --wui-wish-bg: transparent;     // button background in loops
 *     }
 *
 * The accent falls back to the block theme's primary colour.
 */

:root {
	--wui-wish-accent: var(--wp--preset--color--primary, #e11d48);
	--wui-wish-color: currentColor;
	--wui-wish-size: 22px;
	--wui-wish-hit: 44px;
	--wui-wish-bg: rgba(255, 255, 255, .92);
	--wui-wish-bg-hover: #fff;
	--wui-wish-shadow: 0 2px 10px rgba(15, 23, 42, .12);
	--wui-wish-radius: 999px;
	--wui-wish-badge-bg: var(--wui-wish-accent);
	--wui-wish-badge-text: #fff;
	--wui-wish-border: rgba(15, 23, 42, .12);
	--wui-wish-surface: rgba(15, 23, 42, .04);
	--wui-wish-muted: #6b7280;
	--wui-wish-ok: #067647;
	--wui-wish-error: #b42318;
	--wui-wish-card-radius: 14px;
	--wui-wish-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── Heart button ───────────────────────────────────────── */

.wui-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--wui-wish-hit);
	min-height: var(--wui-wish-hit);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--wui-wish-radius);
	background: transparent;
	color: var(--wui-wish-color);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s, color .2s;
}

.wui-wish:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wui-wish-accent) 45%, transparent);
	outline-offset: 2px;
}

.wui-wish__icon {
	width: var(--wui-wish-size);
	height: var(--wui-wish-size);
	flex: none;
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
	transition: fill .2s, stroke .2s, transform .25s var(--wui-wish-ease);
}

.wui-wish:hover .wui-wish__icon { transform: scale(1.08); }

.wui-wish[aria-pressed="true"] .wui-wish__icon {
	fill: var(--wui-wish-accent);
	stroke: var(--wui-wish-accent);
}

.wui-wish.is-pop .wui-wish__icon { animation: wui-wish-pop .45s var(--wui-wish-ease); }

.wui-wish[disabled] { cursor: progress; }

/* Loop: a round chip over the product image corner when the theme
   gives the item `position: relative` (most do). */
.wui-wish--loop {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	background: var(--wui-wish-bg);
	box-shadow: var(--wui-wish-shadow);
}

.wui-wish--loop:hover { background: var(--wui-wish-bg-hover); }

:where(li.product) { position: relative; }

/* Single: sits next to "In den Warenkorb". */
.wui-wish--single {
	padding: 0 14px;
	margin-left: 8px;
	border: 1px solid var(--wui-wish-border);
	vertical-align: middle;
}

.wui-wish__label { font-size: .9em; font-weight: 600; }

/* ── Counter ────────────────────────────────────────────── */

.wui-wish-count {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wui-wish-hit);
	min-height: var(--wui-wish-hit);
	color: inherit;
	text-decoration: none;
}

.wui-wish-count .wui-wish__icon { stroke: currentColor; }
.wui-wish-count.has-items .wui-wish__icon { fill: var(--wui-wish-accent); stroke: var(--wui-wish-accent); }

.wui-wish-count__n {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wui-wish-badge-bg);
	color: var(--wui-wish-badge-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	animation: wui-wish-in .3s var(--wui-wish-ease);
}

.wui-wish-count__n[hidden] { display: none; }

/* ── List page ──────────────────────────────────────────── */

.wui-wishlist { display: grid; gap: 28px; }

.wui-wishlist__skeleton { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.wui-wishlist__skeleton span {
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--wui-wish-card-radius);
	background: linear-gradient(90deg, var(--wui-wish-surface) 25%, rgba(15, 23, 42, .08) 50%, var(--wui-wish-surface) 75%);
	background-size: 200% 100%;
	animation: wui-wish-shimmer 1.4s linear infinite;
}

.wui-wishlist__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.wui-wishlist__title { margin: 0; font-size: 1.35em; }

.wui-wishlist__n {
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--wui-wish-surface);
	font-size: .85em;
	text-align: center;
}

.wui-wishlist__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}

.wui-wishlist__share,
.wui-wishlist__link {
	border: 0;
	background: none;
	padding: 6px 4px;
	color: inherit;
	font: inherit;
	font-size: .9em;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.wui-wishlist__link.is-danger { color: var(--wui-wish-error); }

.wui-wishlist__link-field { width: 100%; margin-bottom: 12px; }

.wui-wishlist__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) { .wui-wishlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wui-wishlist__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wui-wishlist__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: opacity .25s, transform .25s var(--wui-wish-ease);
}

.wui-wishlist__item.is-leaving { opacity: 0; transform: scale(.96); }
.wui-wishlist__item.is-out .wui-wishlist__img img { opacity: .55; }

.wui-wishlist__img { display: block; border-radius: var(--wui-wish-card-radius); overflow: hidden; background: var(--wui-wish-surface); }
.wui-wishlist__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.wui-wishlist__body { display: grid; gap: 4px; }
.wui-wishlist__name { color: inherit; font-weight: 600; text-decoration: none; line-height: 1.3; }
.wui-wishlist__name:hover { text-decoration: underline; }
.wui-wishlist__price { font-size: .95em; }

.wui-wishlist__badge,
.wui-wishlist__stock {
	justify-self: start;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .75em;
	font-weight: 600;
}

.wui-wishlist__badge { background: color-mix(in srgb, var(--wui-wish-ok) 14%, transparent); color: var(--wui-wish-ok); }
.wui-wishlist__stock { background: var(--wui-wish-surface); color: var(--wui-wish-muted); }

.wui-wishlist__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.wui-wishlist__actions .button { flex: 1 1 auto; text-align: center; }
.wui-wishlist__move { flex: 1 1 100%; max-width: 100%; }

.wui-wishlist__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: var(--wui-wish-bg);
	box-shadow: var(--wui-wish-shadow);
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.wui-wishlist__remove:hover { color: var(--wui-wish-error); }

.wui-wishlist__empty,
.wui-wishlist__hint { margin: 0; color: var(--wui-wish-muted); }

.wui-wishlist__msg { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--wui-wish-surface); }
.wui-wishlist__msg.is-ok { color: var(--wui-wish-ok); }
.wui-wishlist__msg.is-error { color: var(--wui-wish-error); }

.wui-wishlist__new { display: flex; flex-wrap: wrap; gap: 8px; }
.wui-wishlist__new label { flex: 1 1 200px; }
.wui-wishlist__new input { width: 100%; }

/* ── Motion ─────────────────────────────────────────────── */

@keyframes wui-wish-pop {
	0% { transform: scale(1); }
	30% { transform: scale(.75); }
	60% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

@keyframes wui-wish-in {
	from { transform: scale(.4); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes wui-wish-shimmer {
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wui-wish *,
	.wui-wish,
	.wui-wish-count__n,
	.wui-wishlist *,
	.wui-wishlist__skeleton span { animation: none !important; transition: none !important; }
}