/**
 * Hover reveal CSS
 *
 * Gedrag: de productfoto blijft ongewijzigd. Bij hover verschijnt er
 * een swap-icoon rechtsboven, en klapt er ONDER de bestaande
 * titel/prijs een extra blok open (lijn + korte omschrijving +
 * actie-iconen). Dat blok duwt de kaart hoger; de kaart mag daarbij
 * over de rij eronder heen vallen (geen reflow van de hele grid).
 *
 * Vereist: .product-card staat op de buitenste Container van de Loop
 * Item template (Advanced tab > CSS Classes in Elementor).
 */

 .product-card {
	position: relative;
	background: #fff;
	transition: z-index 0s;
}

/* Boven de kaarten in de rij eronder uit tillen zodra het uitklap-blok
   open staat, zodat het niet onder die kaarten wegvalt. */
.product-card:hover,
.product-card:focus-within {
	z-index: 10;
}

/* ---------- Swap-icoon rechtsboven ---------- */

.hover-reveal__swap-icon {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e0e0e0;
	color: #333;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.product-card:hover .hover-reveal__swap-icon,
.product-card:focus-within .hover-reveal__swap-icon {
	opacity: 1;
	visibility: visible;
}

/* ---------- Uitklap-blok onderaan ---------- */

.hover-reveal {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%; /* direct onder de bestaande kaart-inhoud */
	background: #fff;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
	transition: max-height 0.35s ease, opacity 0.3s ease;
	z-index: 2;
}

.product-card:hover .hover-reveal,
.product-card:focus-within .hover-reveal {
	max-height: 320px; /* ruim genoeg voor tekst + iconen */
	opacity: 1;
}

.hover-reveal__divider {
	display: block;
	height: 1px;
	margin: 16px 24px 0;
	background: #e5e5e5;
}

.hover-reveal__text {
	padding: 16px 24px 0;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	text-align: center;

	/* Voorkomt dat een erg lange omschrijving het blok eindeloos hoog
	   maakt — knip af na 4 regels. Verwijder dit als je de volledige
	   tekst altijd wilt tonen. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hover-reveal__text p {
	margin: 0;
}

.hover-reveal__icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 16px 24px 20px;
}

.hover-reveal__icon,
.hover-reveal__quickview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e0e0e0;
	cursor: pointer;
	color: #333;
	transition: background 0.2s ease, color 0.2s ease;
	text-decoration: none;
}

.hover-reveal__icon:hover,
.hover-reveal__quickview:hover {
	background: #333;
	color: #fff;
}

/* YITH wishlist knop rendert eigen markup — dwingt 'm in dezelfde stijl */
.hover-reveal__wishlist a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e0e0e0;
}

.hover-reveal__wishlist a i,
.hover-reveal__wishlist a svg {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.hover-reveal__cart a.ajax_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 767px) {
	/* Geen hover op mobiel — uitklap-blok gewoon altijd tonen in de
	   normale flow i.p.v. absoluut gepositioneerd. */
	.hover-reveal__swap-icon {
		display: none;
	}

	.hover-reveal {
		position: static;
		max-height: none;
		opacity: 1;
		box-shadow: none;
	}

	.product-card:hover,
	.product-card:focus-within {
		z-index: auto;
	}
}