/*
 * JL Mobile Header — Cart FAB (Floating Action Button)
 * Botón flotante fijo en esquina inferior derecha, siempre visible en móvil.
 */

/* ─── Cart FAB ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

	.jl-cart-fab {
		position: fixed;
		right: 18px;
		bottom: 24px;
		/* Respeta el home indicator de iPhone */
		bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
		z-index: 990;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		background: #1e1e23;
		color: #fff;
		text-decoration: none;
		box-shadow:
			0 4px 14px rgba(30, 30, 35, 0.28),
			0 1px 4px rgba(30, 30, 35, 0.18);
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
		/* Entrada inicial */
		opacity: 0;
		transform: scale(0.6) translateY(16px);
		transition:
			opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
			transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
			background 0.2s ease,
			box-shadow 0.2s ease;
		pointer-events: none;
	}

	/* Visible cuando hay productos en el carrito */
	.jl-cart-fab.is-visible {
		opacity: 1;
		transform: scale(1) translateY(0);
		pointer-events: auto;
	}

	.jl-cart-fab:hover,
	.jl-cart-fab:focus {
		background: #111;
		color: #fff;
		text-decoration: none;
		box-shadow:
			0 8px 24px rgba(30, 30, 35, 0.38),
			0 2px 6px rgba(30, 30, 35, 0.22);
	}

	.jl-cart-fab:focus-visible {
		outline: 2px solid #b29247;
		outline-offset: 4px;
	}

	/* Icono SVG de bolsa */
	.jl-cart-fab svg {
		display: block;
		width: 24px;
		height: 24px;
		stroke: currentColor;
		fill: none;
		flex-shrink: 0;
	}

	/* ── Badge dorado con el número ──────────────────────────────────── */
	.jl-cart-fab__badge {
		position: absolute;
		top: -4px;
		right: -4px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: 999px;
		border: 2px solid #fff;
		background: #b29247;
		color: #fff;
		font-size: 11px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0;
		pointer-events: none;
	}

	/* ── Animación de pulso al añadir producto ────────────────────────── */
	@keyframes jl-fab-bounce {
		0%   { transform: scale(1); }
		30%  { transform: scale(1.28); }
		55%  { transform: scale(0.88); }
		75%  { transform: scale(1.10); }
		100% { transform: scale(1); }
	}

	.jl-cart-fab.jl-fab-bounce {
		animation: jl-fab-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}

	@keyframes jl-badge-pop {
		0%   { transform: scale(1); }
		40%  { transform: scale(1.5); }
		70%  { transform: scale(0.85); }
		100% { transform: scale(1); }
	}

	.jl-cart-fab.jl-fab-bounce .jl-cart-fab__badge {
		animation: jl-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}

	/* ── En PDP: subir un poco para no tapar el sticky ATC ───────────── */
	.single-product .jl-cart-fab {
		bottom: max(90px, calc(env(safe-area-inset-bottom) + 78px));
	}
}