/**
 * Ambient music control (Phase 8).
 *
 * One small floating icon button, built from existing JAFRA tokens — no new
 * palette, no gradient, no waveform, no equalizer. Fixed bottom-right, ≥44px,
 * below the drawer/overlay layer so it never sits over an open cart drawer, and
 * lifted above the mobile sticky add-to-cart on product pages.
 *
 * @package JAFRA
 */

.jafra-music {
	position: fixed;
	inset-block-end: calc(20px + env(safe-area-inset-bottom));
	inset-inline-end: calc(20px + env(safe-area-inset-right));
	z-index: var(--jafra-z-sticky); /* 100 — above content, below drawer/overlay (900+) */

	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;

	/* Bare icon — no background, border or shadow (per client preference). The
	 * 44×44 box is the touch target; only the icon is visible. */
	background: transparent;
	color: var(--jafra-color-ink);
	border: 0;
	cursor: pointer;

	transition: color 0.2s ease;
}

.jafra-music[hidden] {
	display: none;
}

.jafra-music:hover {
	color: var(--jafra-color-burgundy);
}

/* Over the dark footer, switch the bare icon to light so it stays visible. */
.jafra-music.is-on-dark {
	color: var(--jafra-color-bg);
}
.jafra-music.is-on-dark:hover {
	color: var(--jafra-color-text-on-dark-2, #d8cfc0);
}

.jafra-music:focus-visible {
	outline: 2px solid var(--jafra-color-burgundy);
	outline-offset: 2px;
}

.jafra-music__icon {
	display: inline-flex;
	line-height: 0;
}

/* Show the "sound on" icon by default; the muted state swaps to "sound off". */
.jafra-music__icon--off {
	display: none;
}
.jafra-music.is-muted .jafra-music__icon--on {
	display: none;
}
.jafra-music.is-muted .jafra-music__icon--off {
	display: inline-flex;
}
.jafra-music.is-muted {
	color: var(--jafra-color-text-muted, var(--jafra-color-ink));
}

/* On mobile single-product pages, lift the button above the sticky add-to-cart
 * bar (~80px tall) so it never overlaps the buy controls. */
@media (max-width: 1023px) {
	.single-product .jafra-music {
		inset-block-end: calc(96px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.jafra-music {
		transition: none;
	}
}