/**
 * Bulk case / layer / pallet pricing.
 *
 * Colours are declared once as custom properties so the theme can retune them
 * without touching selectors.
 */

.wcbp-quantity,
.wcbp-quantity__messages,
.wcbp-cart-note,
.wcbp-total,
.wcbp-bands {
	--wcbp-ink: #10263c;
	--wcbp-ink-soft: #55657a;
	--wcbp-line: #e2e6ec;
	--wcbp-surface: #ffffff;
	--wcbp-cream: #fdf6e9;
	--wcbp-cream-line: #f0e0c4;
	--wcbp-brass: #a2874e;
	--wcbp-green: #1f9d5f;
	--wcbp-gold: #d9a213;
	--wcbp-info: #eef2f8;
	--wcbp-info-mark: #17408b;
	--wcbp-radius: 8px;
}

/* ------------------------------------------------------------- quantity */

.wcbp-quantity {
	display: block;
	max-width: 100%;
}

.wcbp-quantity__label {
	display: block;
	height: 22px;
	line-height: 22px;
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--wcbp-ink);
}

.wcbp-stepper {
	display: flex;
	width: fit-content;
	max-width: 100%;
	align-items: stretch;
	border: 1px solid var(--wcbp-line);
	border-radius: var(--wcbp-radius);
	background: var(--wcbp-surface);
	overflow: hidden;
}

.wcbp-stepper__btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wcbp-ink-soft);
	font-size: 20px;
	line-height: 1;
	padding: 0 16px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wcbp-stepper__btn:hover,
.wcbp-stepper__btn:focus-visible {
	background: var(--wcbp-info);
	color: var(--wcbp-ink);
}

.wcbp-stepper__btn:focus-visible {
	outline: 2px solid var(--wcbp-brass);
	outline-offset: -2px;
}

.wcbp-quantity .wcbp-stepper__input.qty {
	width: 4em;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-weight: 600;
	color: var(--wcbp-ink);
	padding: 12px 4px;
	background: transparent;
	-moz-appearance: textfield;
}

.wcbp-quantity .wcbp-stepper__input.qty::-webkit-outer-spin-button,
.wcbp-quantity .wcbp-stepper__input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wcbp-quantity__hint {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 8px 0 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--wcbp-info);
	color: var(--wcbp-ink-soft);
	font-size: 0.85em;
}

.wcbp-quantity__adjusted {
	margin: 8px 0 0;
	color: #8a5b00;
	font-size: 0.85em;
	font-weight: 600;
}

.wcbp-quantity--cart .wcbp-stepper__btn {
	padding: 0 10px;
	font-size: 16px;
}

.wcbp-quantity--cart .wcbp-stepper__input.qty {
	width: 3.4em;
	padding: 8px 4px;
}

/* ---------------------------------------------------- note beside button */

.wcbp-cart-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
	margin-left: 14px;
	vertical-align: middle;
	font-size: 0.85em;
	line-height: 1.35;
	color: var(--wcbp-ink-soft);
}

.wcbp-cart-note__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}

/* ---------------------------------------------------------- total panel */

.wcbp-total {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	margin: 20px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--wcbp-cream-line);
	border-radius: var(--wcbp-radius);
	background: var(--wcbp-cream);
}

.wcbp-total__main {
	flex: 1 1 auto;
	min-width: 0;
}

.wcbp-total__headline {
	margin: 0;
	font-size: 1.35em;
	color: var(--wcbp-ink);
}

.wcbp-total__label {
	font-weight: 600;
}

.wcbp-total__amount {
	font-weight: 700;
}

.wcbp-total__summary,
.wcbp-total__saving {
	margin: 4px 0 0;
	font-size: 0.9em;
	color: var(--wcbp-ink-soft);
}

.wcbp-total__note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--wcbp-cream-line);
	border-radius: var(--wcbp-radius);
	background: var(--wcbp-surface);
	flex: 0 1 auto;
	font-size: 0.82em;
	color: var(--wcbp-ink-soft);
	text-align: right;
}

.wcbp-total__note-icon {
	color: var(--wcbp-brass);
}

/* ----------------------------------------------------------- band table */

.wcbp-bands {
	margin: 28px 0 0;
}

.wcbp-bands__heading {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--wcbp-ink);
}

.wcbp-bands__intro {
	margin: 2px 0 12px;
	font-size: 0.9em;
	color: var(--wcbp-ink-soft);
}

.wcbp-bands__table {
	border: 1px solid var(--wcbp-line);
	border-radius: var(--wcbp-radius);
	overflow: hidden;
	background: var(--wcbp-surface);
}

.wcbp-band {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 12px;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid var(--wcbp-line);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.wcbp-band:last-child {
	border-bottom: 0;
}

.wcbp-band.is-active {
	background: var(--wcbp-cream);
	box-shadow: inset 3px 0 0 var(--wcbp-brass);
}

.wcbp-band__name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wcbp-band__title {
	font-weight: 700;
	color: var(--wcbp-ink);
}

.wcbp-band__range {
	font-size: 0.85em;
	color: var(--wcbp-ink-soft);
}

.wcbp-band__rule {
	font-size: 0.78em;
	color: var(--wcbp-ink-soft);
	opacity: 0.85;
}

.wcbp-band__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wcbp-band__unit {
	font-weight: 700;
	color: var(--wcbp-ink);
}

.wcbp-band__aggregate {
	font-size: 0.85em;
	color: var(--wcbp-ink-soft);
}

.wcbp-band__saving {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
	text-align: right;
}

.wcbp-band__saving-text {
	font-size: 0.85em;
	color: var(--wcbp-ink-soft);
}

.wcbp-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 5px;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	white-space: nowrap;
}

.wcbp-badge--green {
	background: var(--wcbp-green);
}

.wcbp-badge--gold {
	background: var(--wcbp-gold);
}

.wcbp-badge--muted {
	background: #eef1f5;
	color: var(--wcbp-ink-soft);
}

/* ------------------------------------------------------------ explainer */

.wcbp-explainer {
	display: flex;
	gap: 12px;
	margin: 14px 0 0;
	padding: 16px 18px;
	border-radius: var(--wcbp-radius);
	background: var(--wcbp-info);
}

.wcbp-explainer__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wcbp-info-mark);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	line-height: 22px;
	text-align: center;
}

.wcbp-explainer__title {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--wcbp-ink);
}

.wcbp-explainer__body ul {
	margin: 0;
	padding-left: 18px;
	color: var(--wcbp-ink-soft);
	font-size: 0.9em;
}

.wcbp-explainer__body li + li {
	margin-top: 2px;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 640px) {
	.wcbp-band {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.wcbp-band__saving {
		justify-content: flex-start;
		text-align: left;
	}

	.wcbp-total {
		flex-direction: column;
	}

	.wcbp-total__note {
		text-align: left;
	}

	.wcbp-cart-note {
		margin: 10px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcbp-band,
	.wcbp-stepper__btn {
		transition: none;
	}
}

/* =========================================================================
   Theme and page builder overrides
   =========================================================================

   Divi's builder CSS is ID-prefixed (.et-db #et-boc .et-l ...), so class-only
   selectors cannot outrank it however specific they look. That is the reason
   for !important below: it is confined to this section and to the exact
   properties the theme sets, so nothing here reaches beyond these blocks.
   ========================================================================= */

/* The theme sets .woocommerce-Price-amount.amount to 20px bold site-wide,
   which blows up every figure in the table and wraps "per case" onto its own
   line. Prices here should take the size of whatever they sit in. */
.wcbp-total .woocommerce-Price-amount.amount,
.wcbp-bands .woocommerce-Price-amount.amount,
.wcbp-quantity .woocommerce-Price-amount.amount {
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	white-space: nowrap;
}

/* Some themes style [hidden] elements back into view. */
.wcbp-quantity [hidden],
.wcbp-total [hidden],
.wcbp-bands [hidden] {
	display: none !important;
}

/* --------------------------------------------------------------- stepper */

/* Divi floats quantity boxes and fixes their width. */
.woocommerce div.product form.cart div.quantity.wcbp-quantity,
.woocommerce-page div.product form.cart div.quantity.wcbp-quantity,
.woocommerce-cart table.cart td.product-quantity div.quantity.wcbp-quantity,
.et_pb_wc_add_to_cart form.cart div.quantity.wcbp-quantity {
	display: block !important;
	float: none !important;
	width: auto !important;
	max-width: 100%;
	margin: 0 14px 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
	align-self: flex-start;
}

.wcbp-quantity .wcbp-stepper {
	display: flex !important;
	float: none !important;
	width: fit-content;
	border: 1px solid var(--wcbp-line) !important;
	border-radius: var(--wcbp-radius) !important;
	background: var(--wcbp-surface) !important;
	overflow: hidden;
}

/* The theme rounds inputs and gives them their own border, which breaks the
   stepper into three separate pills. */
.wcbp-quantity input.qty.wcbp-stepper__input,
.woocommerce div.product form.cart div.quantity.wcbp-quantity input.qty,
.woocommerce-cart table.cart td.product-quantity div.quantity.wcbp-quantity input.qty {
	width: 4em !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 11px 2px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font-size: 1em !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	color: var(--wcbp-ink) !important;
}

.wcbp-quantity .wcbp-stepper__btn {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 13px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--wcbp-ink-soft) !important;
}

.wcbp-quantity .wcbp-stepper__btn:hover,
.wcbp-quantity .wcbp-stepper__btn:focus-visible {
	background: var(--wcbp-info) !important;
	color: var(--wcbp-ink) !important;
}

/* Divi adds pseudo-element arrows to buttons inside its modules. */
.wcbp-quantity .wcbp-stepper__btn::before,
.wcbp-quantity .wcbp-stepper__btn::after {
	content: none !important;
	display: none !important;
}

.wcbp-quantity__label,
.wcbp-quantity__hint,
.wcbp-quantity__adjusted {
	float: none !important;
	clear: both !important;
	text-align: left !important;
}

.wcbp-quantity__hint {
	font-size: 13px !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
}

/* ------------------------------------------------------- panel and table */

/* Both blocks render inside Divi's Woo Add to Cart module, which lays its row
   out with floats. */
.et_pb_wc_add_to_cart .wcbp-total,
.et_pb_wc_add_to_cart .wcbp-bands,
.woocommerce div.product form.cart .wcbp-total {
	clear: both !important;
	float: none !important;
	width: 100% !important;
	text-align: left !important;
}

.wcbp-total *,
.wcbp-bands *:not(.wcbp-badge) {
	letter-spacing: normal !important;
}

.wcbp-total__headline {
	font-size: 22px !important;
	line-height: 1.3 !important;
}

.wcbp-total__summary,
.wcbp-total__saving {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

.wcbp-bands__heading {
	font-size: 20px !important;
	line-height: 1.3 !important;
	padding: 0 !important;
}

.wcbp-band__title,
.wcbp-band__unit {
	font-size: 15px !important;
	line-height: 1.4 !important;
}

.wcbp-band__range,
.wcbp-band__aggregate,
.wcbp-band__saving-text {
	font-size: 13px !important;
	line-height: 1.4 !important;
}

.wcbp-band__rule {
	font-size: 12px !important;
	line-height: 1.4 !important;
}

.wcbp-badge {
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #fff !important;
}

.wcbp-badge--muted {
	color: var(--wcbp-ink-soft) !important;
}

/* The theme hides prices in listings with li.product .price { display:none }.
   Guard against that selector ever reaching these blocks. */
.wcbp-total .price,
.wcbp-bands .price {
	display: inline !important;
}

.wcbp-explainer__body ul {
	list-style: disc !important;
	margin: 0 !important;
	padding-left: 18px !important;
}

.wcbp-explainer__body li {
	font-size: 14px !important;
	line-height: 1.5 !important;
	margin: 0 0 2px !important;
	padding: 0 !important;
}

/* ------------------------------------------------------ note beside button */

.et_pb_wc_add_to_cart form.cart .wcbp-cart-note,
.woocommerce div.product form.cart .wcbp-cart-note {
	display: inline-flex !important;
	clear: none !important;
	float: none !important;
	width: auto !important;
	align-self: center;
	font-size: 13px !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	color: var(--wcbp-ink-soft) !important;
}

.wcbp-cart-note::before,
.wcbp-cart-note::after {
	content: none !important;
}

/* Keep the panel note on the right of the panel, not wrapped beneath it. */
.wcbp-total__note {
	font-size: 13px !important;
	line-height: 1.4 !important;
	white-space: normal !important;
}

/* --------------------------------------------------- add to cart row layout */

/*
 * WooCommerce emits the quantity, the button, the note and the total panel as
 * siblings of form.cart with no wrapper, so there is nothing to lay out a row
 * with. Making the form itself a flex container puts the first three side by
 * side and drops the panel onto its own line.
 *
 * The class is added by JS to the form containing a bulk stepper, so forms on
 * ordinary products are left alone. This deliberately avoids :has(): CSS
 * minifiers that do not parse it drop the whole rule, including any selectors
 * sharing the list with it.
 */
form.cart.wcbp-form {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

form.cart.wcbp-form > .wcbp-quantity {
	margin: 0 14px 0 0 !important;
}

/* 28px is the label's 22px line box plus its 6px margin, so the button lines
   up with the stepper rather than with "Quantity (Cases)". */
form.cart.wcbp-form > .single_add_to_cart_button {
	margin: 28px 0 0 !important;
	float: none !important;
	align-self: flex-start;
}

form.cart.wcbp-form > .wcbp-cart-note {
	margin: 28px 0 0 14px !important;
}

/* The panel and table always take a full row of their own. */
form.cart.wcbp-form > .wcbp-total,
form.cart.wcbp-form > .wcbp-bands {
	flex: 0 0 100% !important;
	width: 100% !important;
	margin-top: 20px !important;
}

/* Narrow columns: let the button and note fall below the stepper cleanly. */
@media (max-width: 520px) {
	form.cart.wcbp-form > .single_add_to_cart_button {
		margin: 12px 0 0 !important;
	}

	form.cart.wcbp-form > .wcbp-cart-note {
		margin: 10px 0 0 !important;
		min-height: 0 !important;
		flex: 0 0 100%;
	}
}

/* =========================================================================
   Specificity escalation
   =========================================================================

   Divi prints its builder CSS with an ID prefix (.et-db #et-boc .et-l ...).
   An ID beats any number of classes, so the class-only rules above lose to it
   even when they carry !important and Divi's do not — !important only settles
   ties between declarations of equal weight, and these are not equal.

   The rules below therefore carry an ID of their own and repeat a class a few
   times to clear Divi's class count. It is deliberately ugly. Anything less
   specific silently loses, which is harder to debug than this is to read.

   If a property still will not take, inspect the element and look at which
   rule wins in the Styles panel: that will name the stylesheet to target.
   ========================================================================= */

/* ------------------------------------------------------- stepper input */

#page-container .wcbp-quantity .wcbp-stepper input.qty.qty.qty.wcbp-stepper__input,
#et-boc .wcbp-quantity .wcbp-stepper input.qty.qty.qty.wcbp-stepper__input,
.wcbp-quantity .wcbp-stepper input.qty.qty.qty.wcbp-stepper__input {
	width: 4em !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 11px 2px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	text-align: center !important;
	font-size: 1em !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	color: var(--wcbp-ink) !important;
}

/* ------------------------------------------------------ stepper buttons */

#page-container .wcbp-quantity .wcbp-stepper button.wcbp-stepper__btn.wcbp-stepper__btn.wcbp-stepper__btn.wcbp-stepper__btn,
#et-boc .wcbp-quantity .wcbp-stepper button.wcbp-stepper__btn.wcbp-stepper__btn.wcbp-stepper__btn.wcbp-stepper__btn,
.wcbp-quantity .wcbp-stepper button.wcbp-stepper__btn.wcbp-stepper__btn.wcbp-stepper__btn.wcbp-stepper__btn {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 13px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	color: var(--wcbp-ink-soft) !important;
}

/* ------------------------------------------------------ add to cart row */

/* 28px is the label's 22px line box plus its 6px margin. */
#page-container form.cart.wcbp-form > button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button,
#et-boc form.cart.wcbp-form > button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button,
form.cart.wcbp-form > button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button {
	margin: 28px 0 0 !important;
	float: none !important;
	align-self: flex-start !important;
}

/* ------------------------------------------------------------ paragraphs */

/* Divi gives every <p> a 1em bottom padding, which is what makes the pills
   and notes look bottom-heavy. */
#page-container .wcbp-quantity p,
#page-container .wcbp-quantity__messages p,
#et-boc .wcbp-quantity__messages p,
.wcbp-quantity__messages p,
#page-container .wcbp-cart-note p,
#page-container .wcbp-total p,
#page-container .wcbp-bands p,
#et-boc .wcbp-quantity p,
#et-boc .wcbp-cart-note p,
#et-boc .wcbp-total p,
#et-boc .wcbp-bands p,
.wcbp-quantity p,
.wcbp-cart-note p,
.wcbp-total p,
.wcbp-bands p {
	padding: 0 !important;
	margin-bottom: 0 !important;
}

/* Restore the two paragraphs that are meant to be pills. */
#page-container .wcbp-total p.wcbp-total__note,
#et-boc .wcbp-total p.wcbp-total__note,
.wcbp-total p.wcbp-total__note {
	padding: 7px 12px !important;
	margin: 0 !important;
}

#page-container .wcbp-quantity p.wcbp-quantity__hint:not([hidden]),
#et-boc .wcbp-quantity p.wcbp-quantity__hint:not([hidden]),
.wcbp-quantity p.wcbp-quantity__hint {
	padding: 5px 12px !important;
	margin: 8px 0 0 !important;
}

#page-container .wcbp-total p.wcbp-total__summary,
#page-container .wcbp-total p.wcbp-total__saving,
#et-boc .wcbp-total p.wcbp-total__summary,
#et-boc .wcbp-total p.wcbp-total__saving,
.wcbp-total p.wcbp-total__summary,
.wcbp-total p.wcbp-total__saving {
	margin: 4px 0 0 !important;
}

#page-container .wcbp-bands p.wcbp-bands__intro,
#et-boc .wcbp-bands p.wcbp-bands__intro,
.wcbp-bands p.wcbp-bands__intro {
	margin: 2px 0 12px !important;
}

#page-container .wcbp-bands p.wcbp-explainer__title,
#et-boc .wcbp-bands p.wcbp-explainer__title,
.wcbp-bands p.wcbp-explainer__title {
	margin: 0 0 6px !important;
}

/* ------------------------------------------------- note vertical alignment */

/*
 * The note has to hold its own height, otherwise it stretches to the row and
 * drifts downwards as soon as the equivalence chip appears at 7+ cases.
 *
 * The height is in rem, not em: this element's font-size is overridden to 13px
 * above, so em here would resolve against 13px and come up short of the
 * stepper it is meant to line up with. rem resolves against the root instead.
 *
 * 1.4rem is the stepper input's line box; 24px is its 11px padding top and
 * bottom plus the group's 1px border top and bottom.
 */
#page-container form.cart.wcbp-form > .wcbp-cart-note.wcbp-cart-note.wcbp-cart-note,
#et-boc form.cart.wcbp-form > .wcbp-cart-note.wcbp-cart-note.wcbp-cart-note,
form.cart.wcbp-form > .wcbp-cart-note.wcbp-cart-note.wcbp-cart-note {
	display: inline-flex !important;
	align-items: center !important;
	align-self: flex-start !important;
	min-height: calc(1.4rem + 24px) !important;
	margin: 28px 0 0 14px !important;
	padding: 0 !important;
}

@media (max-width: 520px) {
	#page-container form.cart.wcbp-form > .wcbp-cart-note.wcbp-cart-note.wcbp-cart-note,
	#et-boc form.cart.wcbp-form > .wcbp-cart-note.wcbp-cart-note.wcbp-cart-note,
	form.cart.wcbp-form > .wcbp-cart-note.wcbp-cart-note.wcbp-cart-note {
		min-height: 0 !important;
		margin: 10px 0 0 !important;
	}
}

/* ------------------------------------------------------------ basket lines */

/* The unit sits under the product name instead of as a labelled meta row. */
.wcbp-line-unit {
	display: block;
	margin-top: 2px;
	font-size: 0.9em;
	line-height: 1.4;
	color: #55657a;
}

/* Divi's basket quantity box is sized for two digits; pallet orders need four.
   Applied whether or not the stepper renders inside it. */
#page-container .woocommerce-cart table.cart td.product-quantity input.qty.qty,
#et-boc .woocommerce-cart table.cart td.product-quantity input.qty.qty,
.woocommerce-cart table.cart td.product-quantity input.qty.qty,
#page-container .woocommerce-cart table.cart td.product-quantity .quantity,
#et-boc .woocommerce-cart table.cart td.product-quantity .quantity,
.woocommerce-cart table.cart td.product-quantity .quantity {
	width: auto !important;
	min-width: 5em !important;
	max-width: 100% !important;
	text-align: center !important;
	text-overflow: clip !important;
}

/* ------------------------------------------------------- product listings */

.wcbp-from {
	font-weight: 400;
	opacity: 0.8;
}

.woocommerce ul.products li.product .wcbp-view-product,
.wcbp-view-product {
	display: inline-block;
	margin-top: 6px;
}

/* ------------------------------------------------- basket quantity column */

/* Line the heading up with the field beneath it. */
#page-container .woocommerce-cart table.cart th.product-quantity,
#page-container .woocommerce-cart table.cart td.product-quantity,
#et-boc .woocommerce-cart table.cart th.product-quantity,
#et-boc .woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity {
	text-align: center !important;
	vertical-align: middle !important;
}

.woocommerce-cart table.cart td.product-quantity .wcbp-quantity {
	display: inline-block !important;
	margin: 0 auto !important;
}

.woocommerce-cart table.cart td.product-quantity .wcbp-stepper {
	margin: 0 auto;
}

/* The native spinner steps by one and fights the bulk rules. */
.wcbp-quantity input.qty::-webkit-outer-spin-button,
.wcbp-quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.wcbp-quantity input.qty {
	-moz-appearance: textfield;
}

/* --------------------------------------------------- listing view button */

#page-container .wcbp-loop-price,
#et-boc .wcbp-loop-price,
.wcbp-loop-price {
	margin: 4px 0 8px !important;
}

#page-container a.button.wcbp-view-product,
#et-boc a.button.wcbp-view-product,
.woocommerce ul.products li.product a.button.wcbp-view-product,
a.button.wcbp-view-product {
	display: inline-block !important;
	padding: 7px 16px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wcbp-brand, #9a8356) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	text-decoration: none !important;
}

#page-container a.button.wcbp-view-product:hover,
#et-boc a.button.wcbp-view-product:hover,
a.button.wcbp-view-product:hover {
	background: var(--wcbp-brand-hover, #85714a) !important;
	color: #fff !important;
}

/* Divi appends an arrow glyph to buttons on hover. */
a.button.wcbp-view-product::before,
a.button.wcbp-view-product::after {
	content: none !important;
	display: none !important;
}

/* ------------------------------------------------- basket header collision */

/*
 * The site stylesheet styles .product-price for the listing badges:
 *
 *   .acf-price-per-unit, .acf-rrp, .acf-margin, .product-price {
 *       font-weight: bold; font-size: 12px; color: black;
 *       line-height: 1; display: inline-block;
 *   }
 *
 * That selector also matches the basket's own <th class="product-price"> and
 * <td class="product-price">, which is why Case Price renders smaller than the
 * headings either side of it. Restoring normal table-cell behaviour here.
 *
 * The tidier long-term fix is in the site stylesheet: scope that rule to
 * "li.product .product-price" so it only reaches the listing badges.
 */
#page-container .woocommerce-cart table.cart th.product-price,
#et-boc .woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-price {
	display: table-cell !important;
	margin: 0 !important;
	font-size: inherit !important;
	font-weight: bold !important;
	line-height: inherit !important;
	color: inherit !important;
}

#page-container .woocommerce-cart table.cart td.product-price,
#et-boc .woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-price {
	display: table-cell !important;
	margin: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

/* --------------------------------------------------- quantity messages row */

/*
 * The pill sits on a row of its own beneath the quantity, button and note, so
 * its width can never push the Add to cart button sideways.
 */
#page-container form.cart.wcbp-form > .wcbp-quantity__messages,
#et-boc form.cart.wcbp-form > .wcbp-quantity__messages,
form.cart.wcbp-form > .wcbp-quantity__messages {
	flex: 0 0 100% !important;
	width: 100% !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	order: 5;
}

form.cart.wcbp-form > .wcbp-quantity__messages .wcbp-quantity__hint,
form.cart.wcbp-form > .wcbp-quantity__messages .wcbp-quantity__adjusted {
	margin: 0 !important;
}

form.cart.wcbp-form > .wcbp-quantity__messages .wcbp-quantity__adjusted {
	margin-top: 6px !important;
}

/* The panel and table come after the messages row. */
form.cart.wcbp-form > .wcbp-total {
	order: 6;
}

/* ------------------------------------------------------- narrow containers */

/*
 * Driven by measured element width rather than viewport width, because these
 * blocks sit inside page builder columns that are far narrower than the screen.
 */
.wcbp-bands.is-narrow .wcbp-band {
	grid-template-columns: 1fr !important;
	gap: 4px !important;
	padding: 12px 14px !important;
}

.wcbp-bands.is-narrow .wcbp-band__price {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
}

.wcbp-bands.is-narrow .wcbp-band__saving {
	justify-content: flex-start !important;
	text-align: left !important;
}

.wcbp-bands.is-narrow .wcbp-bands__heading {
	font-size: 18px !important;
}

.wcbp-total.is-narrow {
	flex-direction: column !important;
	padding: 14px 16px !important;
}

.wcbp-total.is-narrow .wcbp-total__note {
	text-align: left !important;
	white-space: normal !important;
}

.wcbp-total.is-narrow .wcbp-total__headline {
	font-size: 19px !important;
}

/* Stack the ordering row once the column can no longer hold it side by side. */
form.cart.wcbp-form.is-narrow > .wcbp-quantity--single {
	margin: 0 0 12px 0 !important;
}

form.cart.wcbp-form.is-narrow > .single_add_to_cart_button {
	margin: 0 !important;
}

form.cart.wcbp-form.is-narrow > .wcbp-cart-note {
	flex: 0 0 100% !important;
	min-height: 0 !important;
	margin: 10px 0 0 !important;
}

form.cart.wcbp-form.is-tight > .wcbp-quantity--single,
form.cart.wcbp-form.is-tight > .single_add_to_cart_button {
	width: 100% !important;
}

form.cart.wcbp-form.is-tight > .single_add_to_cart_button {
	margin-top: 10px !important;
}

/* Pill styling, now that the hint sits outside .wcbp-quantity. */
#page-container form.cart.wcbp-form .wcbp-quantity__messages p.wcbp-quantity__hint:not([hidden]),
#et-boc form.cart.wcbp-form .wcbp-quantity__messages p.wcbp-quantity__hint:not([hidden]),
.wcbp-quantity__messages p.wcbp-quantity__hint:not([hidden]) {
	display: inline-block !important;
	width: auto !important;
	padding: 5px 14px !important;
	border-radius: 999px !important;
	background: var(--wcbp-info, #eef2f8) !important;
	color: var(--wcbp-ink-soft, #55657a) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

#page-container form.cart.wcbp-form .wcbp-quantity__messages p.wcbp-quantity__adjusted:not([hidden]),
#et-boc form.cart.wcbp-form .wcbp-quantity__messages p.wcbp-quantity__adjusted:not([hidden]),
.wcbp-quantity__messages p.wcbp-quantity__adjusted:not([hidden]) {
	color: #8a5b00 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* ----------------------------------------------------------- hidden state */

/*
 * Every element the script shows and hides, listed by the attribute the script
 * actually toggles. Author rules beat the browser's own [hidden] rule, so any
 * display declaration above would otherwise reveal a hidden element.
 */
[data-wcbp-equivalence][hidden],
[data-wcbp-adjusted][hidden],
[data-wcbp-total][hidden],
[data-wcbp-total-saving][hidden],
.wcbp-quantity [hidden],
.wcbp-quantity__messages [hidden],
.wcbp-cart-note [hidden],
.wcbp-total[hidden],
.wcbp-total [hidden],
.wcbp-bands [hidden] {
	display: none !important;
}