/*
 * Pill CTA — the headline "Shop Inventory" button + trailing arrow icon.
 * Distinct from .liv-btn because it's heavier (used as the page's primary action).
 */

.liv-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	height: 38px;
	padding: 0 1.5rem 0 1.5rem;
	background: var(--liv-leaf-700);
	color: var(--liv-paper);
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--liv-transition), transform var(--liv-transition);
}
.liv-pill:hover,
.liv-pill:focus-visible {
	background: var(--liv-leaf-500);
	color: var(--liv-paper);
}
.liv-pill svg { width: 16px; height: 16px; }
.liv-pill__arrow {
	display: inline-flex;
	transition: transform var(--liv-transition);
}
.liv-pill:hover .liv-pill__arrow { transform: translateX(3px); }

/* Sticky floating CTA on mobile — fixed bottom-right. */
.liv-pill-sticky {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: var(--z-sticky-cta);
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	transition: transform var(--liv-transition), opacity var(--liv-transition);
}
.liv-pill-sticky[data-hidden="true"] {
	transform: translateY(120%);
	opacity: 0;
	pointer-events: none;
}

@media (min-width: 768px) {
	.liv-pill-sticky { display: none; }
}