/* 06, wishlist: het hartje en de lijstpagina */

/* ---------------------------------------------------------------------------
   Het hartje
   Een dun lijnhartje dat zich vult zodra het aanstaat, zoals bij Oblist.
   --------------------------------------------------------------------------- */

.swipe-hart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--swipe-tekst, #111);
	cursor: pointer;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}

/* Hello Elementor geeft in reset.css elke knop zonder eigen achtergrond een
   roze vlak bij hover en focus, met witte tekst. Die regel is sterker dan
   een losse klasse, dus zetten we er een regel tegenover die het net wint.
   Alleen op ons eigen hartje, andere knoppen op de site blijven zoals ze
   zijn. Dezelfde vlek kwam bij Evi Verbindt ook langs. */
button.swipe-hart,
button.swipe-hart:hover,
button.swipe-hart:focus,
button.swipe-hart:active {
	background: none;
	border: 0;
	color: var(--swipe-tekst, #111);
}

/* Op de kaart is het hartje zwart, net als in de lijst. Wit viel te veel weg
   op een lichte productfoto. */
.swipe-kaart__hoek button.swipe-hart,
.swipe-kaart__hoek button.swipe-hart:hover,
.swipe-kaart__hoek button.swipe-hart:focus {
	color: var(--swipe-tekst, #111);
}

.swipe-hart__icoon {
	width: 22px;
	height: 22px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill 0.2s ease, transform 0.2s ease;
}

/* Geen schaduw onder het hartje. Op deze site komen nergens schaduwen. */

.swipe-hart:hover .swipe-hart__icoon {
	transform: scale(1.12);
}

.swipe-hart.is-aan .swipe-hart__icoon {
	fill: currentColor;
}

/* Even opveren als je hem aanzet */
.swipe-hart.is-net-aan .swipe-hart__icoon {
	animation: swipe-hart-pop 0.35s ease;
}

@keyframes swipe-hart-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* Terwijl de klik nog onderweg is */
.swipe-hart.is-bezig {
	opacity: 0.5;
	pointer-events: none;
}

.swipe-hart:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Variant voor op de productpagina */
.swipe-hart--groot .swipe-hart__icoon {
	width: 24px;
	height: 24px;
}

.swipe-hart--met-tekst .swipe-hart__label {
	font-size: 14px;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.swipe-hart__icoon,
	.swipe-hart:hover .swipe-hart__icoon {
		transition: none;
		transform: none;
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
   De lijst
   --------------------------------------------------------------------------- */

.swipe-wishlist__grid {
	display: grid;
	grid-template-columns: repeat(var(--swipe-wishlist-kolommen, 4), minmax(0, 1fr));
	gap: 32px 24px;
}

.swipe-wishlist__item {
	transition: opacity 0.25s ease;
}

/* Van de lijst gehaald: eerst vervagen, dan pas weg */
.swipe-wishlist__item.is-weg {
	opacity: 0;
}

@media (max-width: 1024px) {
	.swipe-wishlist__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.swipe-wishlist__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
}

/* De lege staat staat altijd in de pagina en wisselt met het grid */
.swipe-wishlist__leeg {
	display: none;
	padding: 48px 0 56px;
	text-align: center;
}

.swipe-wishlist.is-leeg .swipe-wishlist__grid {
	display: none;
}

.swipe-wishlist.is-leeg .swipe-wishlist__leeg {
	display: block;
}

.swipe-wishlist__leeg-titel {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}

.swipe-wishlist__leeg-tekst {
	margin: 0 auto 24px;
	max-width: 34em;
	color: var(--swipe-tekst, #111);
	opacity: 0.7;
}

.swipe-wishlist__leeg-knop {
	display: inline-block;
	padding: 12px 26px;
	background: var(--swipe-tekst, #111);
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.swipe-wishlist__leeg-knop:hover {
	opacity: 0.85;
	color: #fff;
}