/* ==========================================================================
   Basket page
   --------------------------------------------------------------------------
   Page 68: Bricks' cart items and cart totals elements, side by side in one
   container. Bricks' own WooCommerce CSS stacks the two, crops the thumbnail
   and, below 768px, turns each line into a full-width image followed by
   labelled rows. These rules replace that with a compact line on phones and
   a two-column page on desktop.

   Selectors start from .woocommerce-cart-form.brxe-woocommerce-cart-items
   (the form carries both classes) so they outrank Bricks' rules without
   !important, whichever stylesheet loads last.
   ========================================================================== */

/* --- page layout: lines left, totals right ------------------------------ */

/* Matched on its children rather than a Bricks ID, so the layout survives the
   container being rebuilt in the builder. Bricks writes the container's own
   display: flex against its ID, which no class selector can outrank, hence
   the one !important. */
@media (min-width: 992px) {
	.brxe-container:has(> .brxe-woocommerce-cart-items):has(> .brxe-woocommerce-cart-collaterals) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem);
		column-gap: var(--at-space--xl);
		align-items: start;
	}
}

/* Bricks floats the totals right at half width; the grid column sizes it now. */
.brxe-woocommerce-cart-collaterals .cart-collaterals {
	float: none;
	width: 100%;
}

.brxe-woocommerce-cart-collaterals .cart_totals h2 {
	margin-top: 0;
}

.brxe-woocommerce-cart-collaterals .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
}

/* --- thumbnail: the whole bottle, on the card's white panel ------------- */

/* The image is uncropped (see includes/vd-cart.php), so contain keeps the
   neck and base in view. White, as on the product card. min-width rather
   than width alone: Bricks gives images max-width: 100%, and once the totals
   take the right-hand column the auto table layout squeezes the cell, and
   the image with it. The padding keeps the bottle off the panel's edges;
   object-fit works inside it and the white background fills it. */
.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-thumbnail img {
	box-sizing: border-box;
	width: 8rem;
	min-width: 8rem;
	height: auto;
	aspect-ratio: 3 / 4;
	padding: 0.6rem;
	object-fit: contain;
	background: #fff;
}

/* --- prices -------------------------------------------------------------- */

/* Half as large again as the table text, wherever a price appears on the
   page: the line price and subtotal, and the totals box. */
.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-price .amount,
.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-subtotal .amount,
.brxe-woocommerce-cart-collaterals .cart_totals td .amount {
	font-size: 1.5em;
}

/* The pence, wrapped in <sub> by vd_cart_price_pence(). Line height 0 so the
   lowered figures do not push the row taller. */
.vd-price__pence {
	font-size: 0.65em;
	line-height: 0;
}

/* "(inc VAT)" and "(inc £75.00 VAT)" on a line of their own under the money,
   a quarter smaller than it (0.75 x 1.5em). The amount inside the note keeps
   the note's size rather than taking the price size above. */
.brxe-woocommerce-cart-collaterals .cart_totals small.tax_label,
.brxe-woocommerce-cart-collaterals .cart_totals small.includes_tax {
	display: block;
	font-size: 1.125em;
}

.brxe-woocommerce-cart-collaterals .cart_totals small .amount {
	font-size: inherit;
}

/* --- product name -------------------------------------------------------- */

/* WooCommerce renders the name cell as <th scope="row">, so the site-wide
   table header style (tiny, uppercase, muted) was landing on it. The name is
   the most important thing on the line; set it like a title instead. */
.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > th.product-name {
	font-family: georgia, serif;
	font-size: var(--at-text--m);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--light);
	text-align: start;
}

.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > th.product-name a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > th.product-name a:hover,
.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > th.product-name a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

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

/* The input grows to fill whatever it is given: the whole column on a phone,
   and on desktop enough to squeeze the product names. Two or three digits is
   all it ever holds. */
.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-quantity .quantity {
	display: inline-flex;
	width: auto;
}

.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-quantity .quantity .qty {
	flex: 0 0 5rem;
	width: 5rem;
}

/* --- phones: one compact line per item ---------------------------------- */

/*
   thumb | name     | ×
   thumb | quantity | subtotal

   The unit price is dropped: with the quantity and the line total beside it,
   it only repeats the subtotal for a single bottle and adds a row for several.
*/
@media (max-width: 767px) {
	.woocommerce-cart-form.brxe-woocommerce-cart-items table,
	.woocommerce-cart-form.brxe-woocommerce-cart-items tbody {
		display: block;
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item {
		display: grid;
		grid-template-columns: 7rem minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name remove"
			"thumb qty  subtotal";
		grid-template-rows: 1fr auto;
		column-gap: var(--at-space--s);
		row-gap: var(--at-space--xs);
		padding-block: var(--at-space--s);
		border-bottom: 1px solid var(--at-border-color);
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > td,
	.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > th {
		display: block;
		padding: 0;
		border: 0;
	}

	/* The cells explain themselves in this layout. */
	.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > [data-title]::before {
		content: none;
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-thumbnail {
		grid-area: thumb;
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-thumbnail img {
		width: 100%;
		min-width: 0;
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > th.product-name {
		grid-area: name;
		font-size: var(--at-text--s);
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-remove {
		grid-area: remove;
		text-align: end;
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-remove a {
		font-size: 2.4rem;
		line-height: 1;
	}

	/* Child selector to outrank the display: block on every cell above. */
	.woocommerce-cart-form.brxe-woocommerce-cart-items tr.cart_item > td.product-price {
		display: none;
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-quantity {
		grid-area: qty;
		align-self: end;
	}

	.woocommerce-cart-form.brxe-woocommerce-cart-items td.product-subtotal {
		grid-area: subtotal;
		align-self: end;
		text-align: end;
	}
}