/* WhatsApp floating button */
.df-whatsapp-float {
	position: fixed;
	bottom: var(--df-sp-6);
	left: var(--df-sp-6);
	z-index: 999;
}

.df-whatsapp-float__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--df-whatsapp);
	color: var(--df-white);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--df-dark) 18%, transparent);
	text-decoration: none;
	transition:
		transform var(--df-ease),
		box-shadow var(--df-ease),
		opacity var(--df-ease),
		visibility var(--df-ease);
}

.df-whatsapp-float__btn:hover {
	color: var(--df-white);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--df-dark) 22%, transparent);
}

.df-whatsapp-float__icon {
	display: block;
}

/* Hidden until scroll threshold; .is-visible is toggled by JS */
.df-whatsapp-float__btn:not(.is-visible) {
	opacity: 0;
	visibility: hidden;
}

.df-whatsapp-float__btn.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Hide when mobile menu is open */
body:has(.df-mobile-menu.is-open) .df-whatsapp-float__btn {
	display: none;
}

/* Hide when cart drawer is open */
body:has(.df-cart-drawer.is-open) .df-whatsapp-float__btn {
	display: none;
}

/* Hide when search overlay is open */
body:has(.df-search-overlay.is-open) .df-whatsapp-float__btn {
	display: none;
}

/* Hide when product lightbox or size guide is open */
body.df-product-lightbox-open .df-whatsapp-float__btn,
body.df-size-guide-open .df-whatsapp-float__btn,
body.df-lookbook-lightbox-open .df-whatsapp-float__btn {
	display: none;
}

@media (max-width: 768px) {
	.df-whatsapp-float {
		bottom: var(--df-sp-4);
		left: var(--df-sp-4);
	}

	.df-whatsapp-float__btn {
		width: 52px;
		height: 52px;
	}
}

@media (max-width: 1023px) {
	.df-whatsapp-float {
		bottom: calc(56px + var(--df-sp-4) + env(safe-area-inset-bottom, 0px));
	}

	body:has(.df-mobile-menu.is-open) .df-whatsapp-float,
	body:has(.df-cart-drawer.is-open) .df-whatsapp-float,
	body:has(.df-search-overlay.is-open) .df-whatsapp-float {
		display: none;
	}
}