/*
 * LC Branded Pricing 1.5.3: the mini cart and the checkout read like a receipt (receipt.php).
 * Loaded on every front-end page, because the header's mini cart is on all of them. Every
 * selector names an lcbp- class, so WP Rocket's Remove Unused CSS keeps it (the safelist is
 * /lcbp-.*\/) even on a page cached with an empty cart.
 */

/* ---- The options line: one grey line of values, no label column. ----
   Elementor Pro's mini cart lays its rows out as a two-column grid (label, value) -- the "hanging
   indent". WooCommerce's own floats the label. Both are switched off where our line is drawn. */
dl.variation:has( > dd .lcbp-receipt-line ) {
	display: block !important;
	grid-template-columns: none !important;
	margin: 0.2em 0 0.15em !important;
	padding: 0 !important;
	border: 0 !important;
}

dl.variation:has( > dd .lcbp-receipt-line ) > dt {
	display: none !important;
}

dl.variation:has( > dd .lcbp-receipt-line ) > dd {
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

dl.variation:has( > dd .lcbp-receipt-line ) > dd p {
	margin: 0 !important;
	display: inline;
}

.lcbp-receipt-line {
	display: block;
	font-family: inherit;
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.4;
	color: #6b6b6b;
	text-transform: none !important;
	letter-spacing: normal;
}

.lcbp-mini-quantity,
.lcbp-mini-quantity * {
	text-transform: none !important;
}

/* ---- Each mini-cart line: photo and name on top, the rest beneath across the whole line. ----
   Elementor Pro's product row is a grid of photo (28%) and text, the photo spanning both rows, so
   the values and the quantity sat in the text column beside it: indented, and a photo-tall gap
   under a line with nothing to say (architect, 27 Oct). Here the photo and the name share the top
   row only; the name's wrapper steps aside (display: contents) so the values line and the quantity
   take rows of their own across the full width; each row is as tall as what is in it. The remove
   "×" is Elementor's own, absolutely placed, and is left where it is. */
.elementor-menu-cart__product:has( .lcbp-mini-quantity ) {
	grid-template-rows: auto !important;
	grid-auto-rows: auto;
	align-items: start;
	/* The 20px Elementor gives the name's wrapper, as a gap between the columns: the wrapper steps
	   aside below, and a product with no public page (a draft, a hidden one) has a plain-text name
	   with no element of its own to pad. */
	column-gap: 20px;
}

.elementor-menu-cart__product:has( .lcbp-mini-quantity ) > .elementor-menu-cart__product-image {
	grid-column: 1 / 2 !important;
	grid-row: 1 / 2 !important;
}

.elementor-menu-cart__product:has( .lcbp-mini-quantity ) > .elementor-menu-cart__product-name {
	display: contents !important;
}

.elementor-menu-cart__product:has( .lcbp-mini-quantity ) > .elementor-menu-cart__product-name > a {
	grid-column: 2 / 3;
	grid-row: 1;
	align-self: center;
}

.elementor-menu-cart__product:has( .lcbp-mini-quantity ) > .elementor-menu-cart__product-name > dl.variation {
	grid-column: 1 / -1 !important;
	grid-row: 2;
	margin: 8px 0 0 !important;
}

.elementor-menu-cart__product:has( .lcbp-mini-quantity ) > .elementor-menu-cart__product-price {
	grid-column: 1 / -1 !important;
	grid-row: 3;
	align-self: start !important;
	padding-inline-start: 0 !important;
	margin-top: 4px;
}

/* WooCommerce's own widget: its photo floats beside the name; the values and the quantity start
   below it, across the line, without the widget's indented, bordered option list. */
.woocommerce-mini-cart-item:has( .lcbp-mini-quantity ) > dl.variation,
.woocommerce-mini-cart-item > .lcbp-mini-quantity {
	clear: both;
	display: block;
	margin-left: 0 !important;
	padding-left: 0 !important;
	border-left: 0 !important;
}

/* ---- A wider mini cart on desktop; the phone keeps its own width. ----
   The live header's menu cart is Elementor Pro's side cart, a fixed 350px panel (its public
   stylesheet: .elementor-menu-cart__main { width: 350px; max-width: 100% }), which leaves the
   options line about 190px beside the photo. Only while it holds lines (every line has our
   quantity), and only above Elementor's tablet breakpoint (1024px). max-width: 100% stays. */
@media ( min-width: 1025px ) {
	.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__main:has( .lcbp-mini-quantity ) {
		width: 460px;
	}

	/* WooCommerce's own mini-cart widget, wherever a theme pops it open: as wide, never wider
	   than what holds it. */
	.widget_shopping_cart:has( .lcbp-mini-quantity ) {
		min-width: min( 460px, 100% );
	}
}

/* ---- The checkout's order table. ----
   Each row is laid out as product 70% | price 30%; the delivery choices run across the whole
   table. A grid per row, because a table cell cannot span both columns from CSS. */
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) {
	display: block;
	width: 100%;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) > thead,
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) > tbody,
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) > tfoot {
	display: block;
	width: 100%;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 3fr );
	/* Each cell as tall as its row, so a theme's cell borders and stripes (Hello Elementor's)
	   still meet: the price cell beside a two-line name is as tall as the name's. */
	align-items: stretch;
	width: 100%;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr > th,
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr > td {
	display: block;
	width: auto !important;
	min-width: 0;
	box-sizing: border-box;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) .product-total,
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tfoot td {
	text-align: right !important;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tfoot th {
	text-align: left !important;
}

/* The totals: the figure's column is the price column's 30%, so the cell borders line up with
   the lines above, and widens only for a figure that needs more, so "$1,874.00 (includes $170.37
   GST)" is never squeezed and stays on one line on desktop. On a phone the figure may still wrap,
   when the line is wider than the screen. */
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tfoot tr {
	grid-template-columns: minmax( 0, 1fr ) minmax( 30%, max-content );
}


/* The delivery choices: one column, across the whole table, the label above them. */
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr.woocommerce-shipping-totals {
	grid-template-columns: minmax( 0, 1fr );
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr.woocommerce-shipping-totals > td {
	text-align: left !important;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr.woocommerce-shipping-totals > th {
	padding-bottom: 0;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr.woocommerce-shipping-totals ul#shipping_method {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr.woocommerce-shipping-totals ul#shipping_method li {
	text-align: left;
}

/* A row of one cell (a colspan="2" line: the per-box sentence, LC Freight's "contact us") and the
   Notes row run across the whole table too, as they did before the table had two fixed columns;
   in a 30% column the Notes text wrapped a word at a time on a phone. */
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr:has( > :only-child ),
table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr.lcbp-notes-row {
	grid-template-columns: minmax( 0, 1fr );
}

table.woocommerce-checkout-review-order-table:has( tr.lcbp-receipt-row ) tr.lcbp-notes-row > td {
	text-align: left !important;
	padding-top: 0;
}

.lcbp-receipt-qty {
	display: block;
	font-size: 0.85em;
	font-weight: 400;
	color: #6b6b6b;
	text-transform: none !important;
	white-space: nowrap;
}

tr.lcbp-receipt-row td.product-name {
	text-transform: none;
}

/* 1.5.4: a branded product's quantity box fits four digits (WooCommerce's is 3.631em, about
   58px, which showed "2500" as "250"). 4.25em (68px) holds four digits and the number spinner
   (measured on the live page: "1000" is 49px, the spinner 15px) and still leaves the total beside
   the button on a desktop, on the live page and on the bench (4.75em and up pushed it to its own
   line on the live page; 4.5em on the bench). No side padding, as on the live page: a theme's 1em each side (Hello Elementor's)
   would leave room for only two digits. The class comes from includes/qty.php; this file is
   on every front-end page, so the product page and the cart both get it. */
.quantity input.qty.lcbp-qty-wide {
	width: 4.25em !important;
	min-width: 4.25em !important;
	max-width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center;
}