/*
 * Quantity price table ("Order More, Save More") on product pages.
 * See templates/woocommerce/single-product/price-quantity.php.
 *
 * Sizes are in em, not rem: the theme's root font size is about 10px.
 */

.price-quantity-holder {
	max-width: 32em;
}

/*
 * Title with a line either side (https://silvawebdesigns.com/line-on-sides-headers/): each
 * pseudo-element is a wide box with only a top border, cropped by the title's overflow.
 */
.price-quantity-holder .price-quantity-title {
	overflow: hidden;
}

.price-quantity-holder .price-quantity-title span {
	display: inline-block;
	position: relative;
}

.price-quantity-holder .price-quantity-title span::before,
.price-quantity-holder .price-quantity-title span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 100vw;
	height: 0;
	border-top: 1px solid var(--bs-primary, #0d6efd);
}

.price-quantity-holder .price-quantity-title span::before {
	right: 100%;
	margin-right: 0.75em;
}

.price-quantity-holder .price-quantity-title span::after {
	left: 100%;
	margin-left: 0.75em;
}

.price-quantity-holder .price-quantity-card {
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.75em;
	background: #fff;
	box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.08);
}

.price-quantity-holder .price-quantity-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.price-quantity-holder .price-quantity-table th,
.price-quantity-holder .price-quantity-table td {
	padding: 0.85em 0.75em;
	text-align: center;
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: none;
}

.price-quantity-holder .price-quantity-table thead th {
	--bs-table-bg: var(--bs-primary, #0d6efd);
	--bs-table-color: #fff;
	background-color: var(--bs-primary, #0d6efd);
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 0;
}

.price-quantity-holder .price-quantity-table tbody tr:last-child td {
	border-bottom: 0;
}

.price-quantity-holder .price-quantity-table .price-quantity-select {
	width: 3.5em;
	padding-left: 1.25em;
}

.price-quantity-holder .price-quantity-row {
	cursor: pointer;
}

.price-quantity-holder .price-quantity-row label {
	margin: 0;
	font-weight: inherit;
	cursor: pointer;
}

.price-quantity-holder .price-quantity-radio {
	float: none;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
}

.price-quantity-holder .price-quantity-row:hover td {
	--bs-table-bg: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.04);
	background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.04);
}

.price-quantity-holder .price-quantity-row.is-selected td {
	--bs-table-bg: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
	--bs-table-color: var(--bs-primary, #0d6efd);
	background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
	color: var(--bs-primary, #0d6efd);
	font-weight: 700;
}

.price-quantity-holder .price-quantity-row.is-selected td:first-child {
	box-shadow: inset 0.3em 0 0 var(--bs-primary, #0d6efd);
}

/* In the theme's add-to-cart modal, the table sits straight under the size dropdown. */
.aah-variation-price-breaks {
	margin-top: 1em;
}

/*
 * "Order More, Save More" tile button. It's printed after the add-to-cart button, inside the
 * tile's row of actions, so let that row wrap and give the button a line of its own.
 */
.all-actions:has(> .aah-price-breaks-button-container) {
	flex-wrap: wrap;
}

.aah-price-breaks-button-container {
	flex: 0 0 100%;
	margin-top: 0.75em;
}

.aah-price-breaks-button-container .aah-price-breaks-button {
	width: 100%;
}

/* Phones: the add-to-cart modal is narrower than the product page, so tighten the table. */
@media (max-width: 575.98px) {

	.price-quantity-holder .price-quantity-table th,
	.price-quantity-holder .price-quantity-table td {
		padding: 0.75em 0.35em;
	}

	.price-quantity-holder .price-quantity-table thead th {
		font-size: 0.85em;
		letter-spacing: 0;
	}

	.price-quantity-holder .price-quantity-table .price-quantity-select {
		width: 2.5em;
		padding-left: 0.85em;
	}

}