/**
 * The free-delivery nudge.
 *
 * Built entirely from the "Alpine Apothecary" tokens declared in
 * design-system.css §1, with literal fallbacks so the notice still looks
 * deliberate if it is ever rendered before that file loads. Deliberately quiet:
 * a mist-tinted card the size of one line of body copy, a hairline border
 * instead of a fill, and a 3px progress rule — the shop's own visual language,
 * not a promotional banner.
 */

.hs-free-delivery {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.35rem;
	padding: 0.72rem 0.95rem;
	border: 1px solid var(--hs-line, rgba(31, 74, 34, 0.10));
	border-radius: var(--hs-radius-sm, 14px);
	background: var(--hs-soft, #F1F7ED);
	color: var(--hs-ink, #1B2A1E);
	font-size: 0.92rem;
	line-height: 1.45;
}

/* Reached: the mist deepens and the copy takes the dark green. No confetti. */
.hs-free-delivery--unlocked {
	background: var(--hs-mist, #E5F0DF);
	border-color: var(--hs-line-strong, rgba(31, 74, 34, 0.16));
	color: var(--hs-green-dark, #2E6B27);
}

.hs-free-delivery__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--hs-green-dark, #2E6B27);
}

.hs-free-delivery__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.42rem;
}

.hs-free-delivery__text .woocommerce-Price-amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--hs-green-dark, #2E6B27);
}

/* Progress rule. Present only below the threshold — once delivery is free
   there is no distance left to draw. */
.hs-free-delivery__track {
	display: block;
	height: 3px;
	border-radius: 999px;
	background: var(--hs-line, rgba(31, 74, 34, 0.10));
	overflow: hidden;
}

.hs-free-delivery__bar {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--hs-lime, #8BC34A), var(--hs-green, #4A9D3F));
	transition: width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Slide-out cart: narrower column, so the notice loses its outer margin and
   tightens up rather than pushing the buttons below the fold. */
.hs-free-delivery--mini {
	margin: 0.9rem 0 0.9rem;
	padding: 0.6rem 0.75rem;
	font-size: 0.85rem;
	gap: 0.55rem;
}

.hs-free-delivery--mini .hs-free-delivery__icon svg {
	width: 17px;
	height: 17px;
}

/* Block cart / block checkout: the notice is a sibling in front of
   `.wp-block-woocommerce-cart`, which the theme lays out `alignwide`. Match its
   measure so the notice lines up with the cart beneath it instead of floating. */
.hs-free-delivery-slot {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.hs-free-delivery-slot:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hs-free-delivery__bar {
		transition: none;
	}
}