.milano-free-shipping-bar {
	padding-block: 15px;
	width: 100%;
}

.milano-free-shipping-bar__track {
	margin-block: 15px;
	height: var(--shipping-bar-height, 5px);
	border-radius: var(--shipping-bar-radius, 10px);
	background-color: var(--shipping-bar-background, #ddd);
}

.milano-free-shipping-bar__fill {
	color: var(--shipping-bar-fill-color, #d0473e);
	height: 100%;
	border-radius: inherit;
	background-color: var(--shipping-bar-fill-color, #d0473e);
	background-image: linear-gradient(135deg,#ffffff26 0 25%,#fff0 25% 50%,#ffffff26 50% 75%,#fff0 75% 100%);
	background-size: 40px 40px;
	animation: progress 0.8s forwards, progress-stripe 4s linear infinite;
	animation-delay: 1s;
	width: 30px;
}

.milano-free-shipping-bar__message {
	margin-top: 17px;
}

.milano-free-shipping-bar--reached {
	--shipping-bar-fill-color: #14854e;
	animation: progress-flash .8s linear .8s 2 both;
}

.milano-free-shipping-bar__reached .milano-free-shipping-bar__fill {
	animation: progress 0.8s forwards;
}

@keyframes progress-stripe {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -60px -60px;
	}
}

@keyframes progress-flash {
	0%, 50%, 100% {
		opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
}

@keyframes progress {
	0% {
		width: 0;
	}
	100% {
		width: var(--progress, 100%);
	}
}

.milano-free-shipping-bar__fill.no-animate {
	animation: none;
	width: var(--progress, 100%);
}