.ddwc-estimated-delivery {
	margin: 0.75em 0;
}

.ddwc-estimated-delivery--product {
	clear: both;
}

.ddwc-estimated-delivery--blocks {
	margin: 1em 0;
	padding: 0.5em 0;
}

.ddwc-estimated-delivery--weight-medium {
	font-weight: 500;
}

.ddwc-estimated-delivery--weight-bold {
	font-weight: 700;
}

/* One tile among many, so it stays quieter than the single product page. */
/* Sits under a shipping option's price, so it reads as a detail of that choice. */
.ddwc-rate-estimate {
	display: block;
	margin-top: 2px;
	font-size: 0.8125rem;
	line-height: 1.4;
	opacity: 0.8;
}

.ddwc-estimated-delivery--archive {
	margin: 0 0 0.5em;
	font-size: 0.8125rem;
	line-height: 1.4;
}

/*
 * rem, not em. Cart and checkout render inside WooCommerce's totals table,
 * where themes set a smaller font size, so an em-based size came out smaller
 * there than the same setting did on the product page. The "default" size has
 * no rule at all and still inherits whatever surrounds it.
 */
.ddwc-estimated-delivery--size-small {
	font-size: 0.875rem;
}

.ddwc-estimated-delivery--size-normal {
	font-size: 1rem;
}

.ddwc-estimated-delivery--size-large {
	font-size: 1.25rem;
}

.ddwc-estimated-delivery__icon {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.4em;
	vertical-align: -0.15em;
}

.ddwc-estimated-delivery__icon--calendar,
.ddwc-estimated-delivery__icon--truck {
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ddwc-estimated-delivery__icon--calendar {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.ddwc-estimated-delivery__icon--truck {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 4h15v12H1z'/%3E%3Cpath d='M16 8h4l3 4v4h-7V8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 4h15v12H1z'/%3E%3Cpath d='M16 8h4l3 4v4h-7V8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}

/*
 * Shapes are drawn on the inner span rather than the wrapper, because on the
 * classic cart and checkout the wrapper is a table row, which cannot take a
 * background or a corner radius. Padding is em-based so a shape grows with
 * whichever font size is chosen.
 */
.ddwc-estimated-delivery--shape-pill .ddwc-estimated-delivery__text,
.ddwc-estimated-delivery--shape-rounded .ddwc-estimated-delivery__text,
.ddwc-estimated-delivery--shape-outline .ddwc-estimated-delivery__text {
	display: inline-block;
	padding: 0.25em 0.75em;
	line-height: 1.4;
}

/* A shape stays visible when no background colour has been picked. */
.ddwc-estimated-delivery--shape-pill .ddwc-estimated-delivery__text,
.ddwc-estimated-delivery--shape-rounded .ddwc-estimated-delivery__text {
	background: rgba(0, 0, 0, 0.06);
}

.ddwc-estimated-delivery--shape-pill .ddwc-estimated-delivery__text {
	border-radius: 999px;
}

.ddwc-estimated-delivery--shape-rounded .ddwc-estimated-delivery__text {
	border-radius: 4px;
}

.ddwc-estimated-delivery--shape-outline .ddwc-estimated-delivery__text {
	border: 1px solid currentColor;
	border-radius: 4px;
}

.ddwc-estimated-delivery--align-left {
	text-align: left;
}

.ddwc-estimated-delivery--align-center {
	text-align: center;
}

.ddwc-estimated-delivery--align-right {
	text-align: right;
}

/* The dispatch line is a supporting detail, so it sits under the arrival date. */
.ddwc-estimated-delivery__dispatch {
	display: block;
	margin-top: 2px;
	font-size: 0.875em;
	font-weight: 400;
	opacity: 0.75;
}