.ccmerch-quantity-discounts {
	margin: 0 0 1.5em;
}

.ccmerch-quantity-discounts__title {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.ccmerch-quantity-discounts__table {
	width: 100%;
	max-width: 24em;
	border-collapse: collapse;
}

.ccmerch-quantity-discounts__table th,
.ccmerch-quantity-discounts__table td {
	padding: 0.4em 0.75em;
	border-bottom: 1px solid rgba(128, 128, 128, 0.35);
	font-variant-numeric: tabular-nums;
	text-align: start;
}

.ccmerch-quantity-discounts__table .ccmerch-quantity-discounts__discount {
	text-align: end;
}

/* The price of each tier's minimum order (1.0.1): the quantity and the price, with a summary of one tier under the table. */
.ccmerch-quantity-discounts__table--minimum-order {
	max-width: 32em;
}

.ccmerch-quantity-discounts__table .ccmerch-quantity-discounts__total,
.ccmerch-quantity-discounts__table .ccmerch-quantity-discounts__summary-value {
	text-align: end;
}

/* The summary under the table: the price per item and the price of the minimum order of one tier, named by its quantity. */
.ccmerch-quantity-discounts__table tfoot .ccmerch-quantity-discounts__summary th,
.ccmerch-quantity-discounts__table tfoot .ccmerch-quantity-discounts__summary td {
	background: rgba(128, 128, 128, 0.08);
	font-weight: 600;
}

/* With automatic quantity every tier's summary is in the page and only the chosen one is shown; a theme's own rule for table rows must not win. */
.ccmerch-quantity-discounts__summary[hidden] {
	display: none;
}

.ccmerch-quantity-discounts__row--selected {
	background: rgba(128, 128, 128, 0.15);
}

/* Automatic quantity (1.0.1): the quantity of a tier is a button that looks like the text it replaces, and the row can be clicked. */
.ccmerch-quantity-discounts__row {
	cursor: pointer;
}

.ccmerch-quantity-discounts__row:hover {
	background: rgba(128, 128, 128, 0.1);
}

/* The quantity is text that can be pressed, not a filled button. The selectors are specific on purpose: a theme's own button rule (Twenty Twenty-One styles
   `button:not(:hover):not(:active)` with a background and a colour) must not win, in any state. */
.ccmerch-quantity-discounts .ccmerch-quantity-discounts__table button.ccmerch-quantity-discounts__select,
.ccmerch-quantity-discounts .ccmerch-quantity-discounts__table button.ccmerch-quantity-discounts__select:hover,
.ccmerch-quantity-discounts .ccmerch-quantity-discounts__table button.ccmerch-quantity-discounts__select:active,
.ccmerch-quantity-discounts .ccmerch-quantity-discounts__table button.ccmerch-quantity-discounts__select:focus {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	background-color: transparent;
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-decoration: underline;
	cursor: pointer;
}

/* A variable product page keeps one empty container that the script shows and hides; a theme's own display rule for sections must not win over the hidden attribute. */
.ccmerch-quantity-discounts[hidden] {
	display: none;
}

/* The minimum quantity line; a variable product page keeps one empty paragraph that the script shows and hides. */
.ccmerch-minimum-quantity {
	margin: 0 0 1em;
}

.ccmerch-minimum-quantity[hidden] {
	display: none;
}