/* ---------------------------------------------------------------------------
   Schwebender WhatsApp-Knopf
   ---------------------------------------------------------------------------
   Das Zeichen bringt seine eigene Form und Farbe mit – die grüne Sprechblase
   mit weißer Kontur ist das Erkennungszeichen. Deshalb kein Kreis darunter:
   ein zweiter Hintergrund würde die Kontur verschlucken. Der Schatten liegt
   als drop-shadow an der Silhouette und nicht als box-shadow am Rechteck,
   sonst schwebte ein Kasten statt einer Blase.

   z-index 55 hält ihn unter Kopfleiste (60), Filterspalte (90/91) und
   Warenkorb (100). Öffnet sich eines davon, tritt er zurück – ein Knopf, der
   über einer offenen Schublade klebt, ist ein Fehler, kein Angebot. */

.wa-float {
	position: fixed;
	z-index: 55;
	bottom: 22px;
	inset-inline-end: 22px;
	display: block;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	filter: drop-shadow(0 10px 22px rgba(21, 18, 26, .26));
	transition: transform .22s cubic-bezier(.2, .7, .2, 1), filter .22s ease, opacity .2s ease, visibility 0s;
	animation: wa-float-in .45s cubic-bezier(.2, .7, .2, 1) .5s both;
}

.wa-float svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wa-float:hover,
.wa-float:focus-visible {
	transform: translateY(-3px);
	filter: drop-shadow(0 16px 30px rgba(21, 18, 26, .3));
}

.wa-float:focus-visible {
	outline: 2px solid var(--ink, #15121A);
	outline-offset: 4px;
}

@keyframes wa-float-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.9);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Solange eine Schublade offen ist, tritt der Knopf zurück. */
body.cart-open .wa-float,
body.shop-filter-open .wa-float,
body.mnav .wa-float,
body.search-open .wa-float {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: transform .2s ease, opacity .2s ease, visibility 0s .2s;
}

@media (max-width: 720px) {
	.wa-float {
		bottom: 16px;
		inset-inline-end: 16px;
		width: 54px;
		height: 54px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-float {
		animation: none;
	}

	.wa-float:hover,
	.wa-float:focus-visible {
		transform: none;
	}
}