/* Keep each breakpoint's existing geometry; share progress colors on all screens. */
@media (max-width: 767px) {
	body .pizzaro-order-steps { margin: 0 0 24px; }
	body .pizzaro-order-steps ul {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	body .pizzaro-order-steps ul li {
		position: relative;
		display: block;
		min-width: 0;
		margin: 0;
		padding: 0;
		color: #71706c;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4;
		text-align: center;
		overflow-wrap: anywhere;
	}
	body .pizzaro-order-steps ul li + li { padding-left: 0; margin-top: 0; }
	/* Connect circle centers across the existing 8px grid gap, without adding height. */
	body .pizzaro-order-steps ul li + li::before {
		content: '';
		position: absolute;
		left: calc(-50% - 8px);
		top: 15px;
		width: calc(100% + 8px);
		height: 2px;
		background: #e9e8ec;
		pointer-events: none;
	}
	body.woocommerce-checkout:not(.woocommerce-order-received) .pizzaro-order-steps ul li.checkout::before,
	body.woocommerce-order-received .pizzaro-order-steps ul li + li::before { background: #c00a27; }
	/* Specificity also overrides the theme's completed-stage colors on receipt pages. */
	body .pizzaro-order-steps.pizzaro-order-steps ul li .step.step {
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		box-sizing: border-box;
		width: 32px;
		height: 32px;
		margin: 0 auto 6px;
		padding: 0;
		border: 1px solid #ccc;
		border-radius: 50%;
		background: #fff;
		color: #71706c;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
	}
	body .pizzaro-order-steps ul li .step::before { content: none; }
}

/* Reached stages, not only the current stage, are red at every viewport size. */
body .pizzaro-order-steps.pizzaro-order-steps ul li {
	color: #71706c;
	font-weight: 400;
}
body .pizzaro-order-steps.pizzaro-order-steps ul li .step.step {
	border-color: #ccc;
	background: #fff;
	color: #71706c;
	font-weight: 400;
}
body.woocommerce-cart .pizzaro-order-steps.pizzaro-order-steps ul li.cart,
body.woocommerce-checkout:not(.woocommerce-order-received) .pizzaro-order-steps.pizzaro-order-steps ul li.cart,
body.woocommerce-checkout:not(.woocommerce-order-received) .pizzaro-order-steps.pizzaro-order-steps ul li.checkout,
body.woocommerce-order-received .pizzaro-order-steps.pizzaro-order-steps ul li {
	color: #2d2b2d;
	font-weight: 700;
}
body.woocommerce-cart .pizzaro-order-steps.pizzaro-order-steps ul li.cart .step.step,
body.woocommerce-checkout:not(.woocommerce-order-received) .pizzaro-order-steps.pizzaro-order-steps ul li.cart .step.step,
body.woocommerce-checkout:not(.woocommerce-order-received) .pizzaro-order-steps.pizzaro-order-steps ul li.checkout .step.step,
body.woocommerce-order-received .pizzaro-order-steps.pizzaro-order-steps ul li .step.step {
	border-color: #c00a27;
	background: #c00a27;
	color: #fff;
	font-weight: 700;
}
@media (min-width: 768px) {
	body .pizzaro-order-steps ul li + li .step::before {
		height: 2px;
		background: #e9e8ec;
		pointer-events: none;
	}
	body.woocommerce-checkout:not(.woocommerce-order-received) .pizzaro-order-steps ul li.checkout .step::before,
	body.woocommerce-order-received .pizzaro-order-steps ul li + li .step::before { background: #c00a27; }
}