.csl-shipping-meter {
	--csl-ship-accent: #2f8a68;
	--csl-ship-bg: #f3fbf8;
	--csl-ship-line: #dcefe7;
	--csl-ship-muted: #77758a;
	--csl-ship-text: #202033;
	background: var(--csl-ship-bg);
	border: 1px solid var(--csl-ship-line);
	border-radius: 14px;
	display: grid;
	gap: 10px;
	padding: 14px;
	width: 100%;
}

.csl-shipping-meter__header {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.csl-shipping-meter__icon {
	align-items: center;
	color: var(--csl-ship-accent);
	display: inline-flex;
	justify-content: center;
}

.csl-shipping-meter__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.csl-shipping-meter__text strong {
	color: var(--csl-ship-text);
	font-weight: 800;
	line-height: 1.35;
}

.csl-shipping-meter__text span {
	color: var(--csl-ship-muted);
	font-size: 13px;
}

.csl-shipping-meter__remaining {
	color: var(--csl-ship-accent);
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}

.csl-shipping-meter__track {
	background: #e7f3ee;
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.csl-shipping-meter__bar {
	background: var(--csl-ship-accent);
	border-radius: inherit;
	display: block;
	height: 100%;
	min-width: 0;
	transition: width 180ms ease;
}

.csl-shipping-meter.is-complete {
	--csl-ship-accent: #247a53;
	background: #f1fff7;
	border-color: #bee8d1;
}

@media (max-width: 640px) {
	.csl-shipping-meter__header {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.csl-shipping-meter__remaining {
		grid-column: 2;
	}
}