.bu-cart-milestones {
	--bu-cm-bar-size: 6px;
	--bu-cm-marker-size: 28px;
	--bu-cm-track-color: #e7e7e7;
	--bu-cm-track-achieved-color: #222;

	--bu-cm-marker-achieved-color: #fff;
	--bu-cm-marker-achieved-bgcolor: #222;
	--bu-cm-marker-border: #e7e7e7;
	--bu-cm-marker-achieved-border-color: #fff;

	--bu-cm-text-color: #1f1f1f;
	--bu-cm-marker-color: #8d8d8d;
	--bu-cm-muted-color: #8d8d8d;
	--bu-content-gap: 1px;
	--bu-cm-marker-outer-size: calc(var(--bu-cm-marker-size) + 6px);
	--bu-cm-marker-center: calc(var(--bu-cm-amount-row) + (var(--bu-cm-marker-outer-size) / 2));
	--bu-cm-amount-row: calc(1lh + var(--bu-content-gap));
	--bu-cm-label-row: calc(1lh + var(--bu-content-gap));
	color: var(--bu-cm-text-color);
	width: 100%;
}

.bu-cart-milestones.has-hidden-amount {
	--bu-cm-amount-row: 0px;
}

.bu-cart-milestones.has-hidden-label {
	--bu-cm-label-row: 0px;
}

.bu-cart-milestones.is-hidden {
	display: none;
}

.bu-cart-milestones__message {
	font-size: 15px;
	margin: 0 0 8px;
	text-align: center;
	font-weight: 700;
}

.bu-cart-milestones__track-wrap {
	display: grid;
	grid-template-rows: var(--bu-cm-amount-row) var(--bu-cm-marker-outer-size) var(--bu-cm-label-row);
	position: relative;
}

.bu-cart-milestones__track {
	align-items: center;
	background: var(--bu-cm-track-color);
	block-size: var(--bu-cm-bar-size);
	display: flex;
	inset-inline: 0;
	overflow: hidden;
	position: absolute;
	top: var(--bu-cm-marker-center);
	transform: translateY(-50%);
	width: 100%;
}

.bu-cart-milestones__progress {
	background: var(--bu-cm-track-achieved-color);
	block-size: 100%;
	inline-size: 0;
	transition: width .25s ease;
}

.bu-cart-milestones__items {
	inset-block-start: var(--bu-cm-marker-center);
	inset-inline: 0;
	position: absolute;
}

.bu-cart-milestones__item {
	position: absolute;
	text-align: center;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

.bu-cart-milestones__amount {
	color: var(--bu-cm-text-color);
	font-size: 14px;
	font-weight: 700;
	left: 0;
	position: absolute;
	bottom: calc((var(--bu-cm-marker-outer-size) / 2) + var(--bu-content-gap));
	transform: translateX(-100%);
}

.bu-cart-milestones__marker {
	align-items: center;
	aspect-ratio: 1;
	background: #fff;
	border: 3px solid var(--bu-cm-marker-border);
	border-radius: 50%;
	color: var(--bu-cm-marker-color);
	display: flex;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-100%, -50%);
	z-index: 1;
	inline-size: var(--bu-cm-marker-outer-size);
	block-size: var(--bu-cm-marker-outer-size);
	padding: 3px;
}

.bu-cart-milestones__item.has-no-icon .bu-cart-milestones__marker {
	aspect-ratio: auto;
	background: var(--bu-cm-marker-color);
	border: 0;
	border-radius: 0;
	color: transparent;
	inline-size: max(2px, calc(var(--bu-cm-bar-size) / 2));
	block-size: var(--bu-cm-marker-outer-size);
	padding: 0;
}

.bu-cart-milestones__item.has-no-icon.is-achieved .bu-cart-milestones__marker {
	background: var(--bu-cm-marker-achieved-color);
}

.bu-cart-milestones__icon {
	display: inline-flex;
	font-size: 14px;
	line-height: 1;
}

.bu-cart-milestones__icon svg {
	inline-size: 1em;
	block-size: 1em;
	fill: currentColor;
}

.bu-cart-milestones__label {
	color: var(--bu-cm-muted-color);
	font-size: 14px;
	left: 0;
	position: absolute;
	top: calc((var(--bu-cm-marker-outer-size) / 2) + var(--bu-content-gap));
	transform: translateX(-100%);
}

.bu-cart-milestones__item.is-achieved .bu-cart-milestones__marker {
	border-color: var(--bu-cm-marker-achieved-border-color);
	background: var(--bu-cm-marker-achieved-bgcolor);
	color: var(--bu-cm-marker-achieved-color);
}

.bu-cart-milestones__item.is-achieved .bu-cart-milestones__label {
	color: var(--bu-cm-text-color);
}