/* ============================================================
   MONSTERS OF TYPE — Checkout Progress Steps
   Cart → Checkout → Complete (shared by cart + checkout)
   ============================================================ */

/* ─── Checkout progress (Cart → Checkout → Complete) ──────── */
.mot-checkout-steps {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.mot-checkout-steps__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mot-checkout-steps__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.mot-checkout-steps__item:not(:last-child)::after {
	content: '';
	display: block;
	width: clamp(1.5rem, 4vw, 3rem);
	height: 1px;
	margin-inline: 0.65rem;
	background: var(--mot-border);
}

.mot-checkout-steps__item.is-done:not(:last-child)::after {
	background: color-mix(in srgb, var(--mot-vibrant-orange) 55%, var(--mot-border));
}

.mot-checkout-steps__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--mot-eyebrow);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	color: var(--mot-muted);
}

a.mot-checkout-steps__link:hover,
a.mot-checkout-steps__link:focus-visible {
	color: var(--mot-vibrant-orange);
}

.mot-checkout-steps__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border: 1px solid var(--mot-border);
	font-family: var(--mot-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0;
	color: inherit;
}

.mot-checkout-steps__item.is-done .mot-checkout-steps__link {
	color: var(--mot-light-gray);
}

.mot-checkout-steps__item.is-done .mot-checkout-steps__index {
	border-color: color-mix(in srgb, var(--mot-vibrant-orange) 50%, var(--mot-border));
	color: var(--mot-vibrant-orange);
}

.mot-checkout-steps__item.is-current .mot-checkout-steps__link {
	color: var(--mot-vibrant-orange);
}

.mot-checkout-steps__item.is-current .mot-checkout-steps__index {
	border-color: var(--mot-vibrant-orange);
	background: var(--mot-vibrant-orange);
	color: var(--mot-black);
}