/**
 * The grid takes its font from the theme and keeps every colour it has to set in a custom property,
 * so retuning it to a theme change is a one line edit. The defaults are the product page's own ink
 * and the border colour of its quantity field.
 */
.ced-mbc-multibuy {
	--ced-mbc-multibuy-ink: #1c244b;
	--ced-mbc-multibuy-muted: #7a7f99;
	--ced-mbc-multibuy-border: #e1e3ec;
	--ced-mbc-multibuy-radius: 8px;

	display: block;
	width: 100%;
	margin: 0 0 22px;
	font: inherit;
	color: var( --ced-mbc-multibuy-ink );
}

.ced-mbc-multibuy--awaiting {
	display: none;
}

.ced-mbc-multibuy__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
}

.ced-mbc-multibuy__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ced-mbc-multibuy__tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 108px;
	margin: 0;
	padding: 11px 15px;
	border: 1px solid var( --ced-mbc-multibuy-border );
	border-radius: var( --ced-mbc-multibuy-radius );
	color: var( --ced-mbc-multibuy-muted );
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.ced-mbc-multibuy__tier.is-hidden {
	display: none;
}

.ced-mbc-multibuy__tier:hover {
	border-color: var( --ced-mbc-multibuy-ink );
}

/* The active box carries the extra border width inside its own padding, so choosing a tier cannot
   nudge the boxes beside it. */
.ced-mbc-multibuy__tier.is-active {
	border-width: 2px;
	padding: 10px 14px;
	border-color: var( --ced-mbc-multibuy-ink );
	color: var( --ced-mbc-multibuy-ink );
}

.ced-mbc-multibuy__tier:focus-within {
	outline: 2px solid var( --ced-mbc-multibuy-ink );
	outline-offset: 2px;
}

.ced-mbc-multibuy__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ced-mbc-multibuy__qty {
	font-size: 13px;
	line-height: 1.3;
}

.ced-mbc-multibuy__price {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}

.ced-mbc-multibuy__unit {
	font-size: 12px;
	line-height: 1.2;
}