/* ─── Free-Shipping Progress Bar (.hzo-free-ship) — W-134 ──────────────────
   A live-cart meter: a message line above a track whose fill grows toward the
   free-shipping threshold, flipping to an unlocked state at 100%. Flow-level
   component (no z-index / no positioning of its own) so it composes inside a
   page section, a banner slot, or the mini-cart body. Tokens only — no bare hex,
   px-where-a-token-exists, or bare motion literals (interaction-standards §9).

   The fill width is driven by --hzo-free-ship-pct (0–100), which free-ship.js
   sets from the live subtotal; the server bakes the same value into first paint,
   so the bar is correct with JS off (progressive enhancement). */

.hzo-free-ship {
	display: block;
	width: 100%;
}

/* The server-truth data node — machine-readable only, never shown. Not a live
   region, so display:none is safe (announcements route through hzo.announce). */
.hzo-free-ship__data {
	display: none !important;
}

.hzo-free-ship__message {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-100);
	font-weight: var(--fw-600);
	line-height: var(--lh-snug);
	color: var(--text-body);
}

/* The emphasised money figure reads as brand-forward once unlocked. */
.hzo-free-ship.is-unlocked .hzo-free-ship__message {
	color: var(--success-ink);
}

.hzo-free-ship__track {
	position: relative;
	width: 100%;
	height: 8px;
	background: var(--bg-alt);
	border: var(--border-1) solid var(--border);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.hzo-free-ship__fill {
	/* --hzo-free-ship-pct set by JS / first paint; 0 fallback keeps it sane. */
	width: clamp(0%, calc(var(--hzo-free-ship-pct, 0) * 1%), 100%);
	height: 100%;
	border-radius: inherit;
	background: var(--brand);
	transition: width var(--dur-4) var(--ease-out), background-color var(--dur-3) var(--ease-standard);
}

.hzo-free-ship.is-unlocked .hzo-free-ship__fill {
	background: var(--success);
}

/* ── Variant: slim — a thinner track, tighter message ──────────────────────*/
.hzo-free-ship--slim .hzo-free-ship__message {
	font-size: var(--fs-75);
	margin-bottom: var(--space-xs);
}
.hzo-free-ship--slim .hzo-free-ship__track {
	height: 4px;
}

/* ── Variant: pill — a filled card wrapper around the meter ────────────────*/
.hzo-free-ship--pill {
	padding: var(--space-smd) var(--space-md);
	background: var(--surface);
	border: var(--border-1) solid var(--border);
	border-radius: var(--radius-panel);
	box-shadow: var(--elevation-rest);
}
.hzo-free-ship--pill.is-unlocked {
	border-color: var(--success);
	background: var(--success-bg);
}

/* ── Pulse-on-unlock (JS adds .is-pulsing for ~900ms) ──────────────────────
   A one-shot celebratory pulse on the track when the threshold is crossed.
   Ambient/decorative motion → fully removed under reduced-motion (PRESERVE-5);
   the state change itself remains conveyed by color + message. */
@keyframes hzo-free-ship-pulse {
	0%   { transform: scaleX(1);    }
	40%  { transform: scaleX(1.02); }
	100% { transform: scaleX(1);    }
}

.hzo-free-ship.is-pulsing .hzo-free-ship__track {
	transform-origin: left center;
	animation: hzo-free-ship-pulse var(--dur-4) var(--ease-spring);
}

/* A soft glow ring on the whole bar as it unlocks — decorative, motion-gated. */
@keyframes hzo-free-ship-glow {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 40%, transparent); }
	100% { box-shadow: 0 0 0 var(--space-sm) color-mix(in srgb, var(--success) 0%, transparent); }
}
.hzo-free-ship.is-pulsing {
	border-radius: var(--radius-pill);
	animation: hzo-free-ship-glow var(--dur-4) var(--ease-out);
}

/* ── Reduced motion — stop the ambient pulse/glow AND the fill slide; the fill
   still snaps to the correct width, state still conveyed by color + text. ──*/
@media (prefers-reduced-motion: reduce) {
	.hzo-free-ship__fill {
		transition: none;
	}
	.hzo-free-ship.is-pulsing,
	.hzo-free-ship.is-pulsing .hzo-free-ship__track {
		animation: none;
	}
}

/* ── Forced colors (Windows High Contrast) — an opacity/paint-only fill
   vanishes, so express the track/fill with system colors + a visible boundary
   so progress stays perceivable (interaction-standards §12.2). ──*/
@media (forced-colors: active) {
	.hzo-free-ship__track {
		border-color: CanvasText;
	}
	.hzo-free-ship__fill {
		background: Highlight;
		forced-color-adjust: none;
	}
	.hzo-free-ship.is-unlocked .hzo-free-ship__fill {
		background: LinkText;
	}
}