/* ==========================================================================
   Floating WhatsApp button
   Bottom-right on every page. z-index deliberately BELOW the PDP sticky bar
   (--z-search: 90) and the side cart (--z-cart: 140) so it can never cover
   them; when the PDP sticky bar is visible the button lifts above it.
   ========================================================================== */

.hz-wa{
	position:fixed;
	right:clamp(14px,3.4vw,26px);
	bottom:clamp(14px,3.4vw,26px);
	z-index:50;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:54px;
	height:54px;
	border-radius:999px;
	background:#25d366;
	color:#fff;
	box-shadow:0 6px 20px rgba(0,0,0,.18);
	transition:transform .25s ease, box-shadow .25s ease;
}

.hz-wa svg{
	width:28px;
	height:28px;
	fill:currentColor;
	display:block;
}

.hz-wa:hover,
.hz-wa:focus-visible{
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 10px 26px rgba(0,0,0,.24);
}

.hz-wa:focus-visible{
	outline:2px solid var(--ink,#111);
	outline-offset:3px;
}

.hz-sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}

/* Lift clear of the product-page sticky bar when it is showing. */
body:has(.stickybar.is-on) .hz-wa{
	bottom:calc(clamp(14px,3.4vw,26px) + 92px);
	z-index:95;
}

@media (max-width:560px){
	.hz-wa{
		width:48px;
		height:48px;
	}
	.hz-wa svg{
		width:25px;
		height:25px;
	}
}

@media (prefers-reduced-motion:reduce){
	.hz-wa{ transition:none; }
	.hz-wa:hover,
	.hz-wa:focus-visible{ transform:none; }
}