/**
 * YouBeauty — cart and checkout.
 *
 * Both pages are WooCommerce Blocks (`wp-block-woocommerce-cart` / `-checkout`), not the classic
 * shortcode templates. The server ships an empty skeleton and React fills it in, so there is no
 * template to override and no PHP hook to reach — the whole surface is styled by class name, and
 * every class below was read off the rendered DOM rather than taken from documentation.
 *
 * One file for the two pages because they are one component set: the sidebar, the totals rows, the
 * coupon panel, the product line and every button are literally the same `wc-block-components-*`
 * classes. Splitting them would mean two rules for each of those, which is the shape that drifts.
 *
 * Selectors are anchored on `#left-area`. Blocks ships a strong stylesheet of its own and doubles
 * its own class names in places to win specificity battles; an ID clears all of it. There is no
 * `!important` in this file — where a cell rule here has to beat the row rule above it, it says so
 * by naming the cell's class alongside the `td`, which is what actually differs between them.
 *
 * Deliberately untouched: the `font-size`, `line-height` and `padding` of the block text inputs.
 * Blocks floats the label with a `translateY` measured against those three, so changing any of
 * them moves the label off its input. Border, ground, radius and focus are ours; the metrics are
 * left to Blocks.
 */

/* ------------------------------------------------------------------- layout */

/*
 * The two-column split is Blocks' own and is left alone.
 *
 * It sizes `__main` and `__sidebar` as percentages of the row and takes the gutter out of
 * `__main`'s own `padding-right`. Zeroing that padding and adding a `gap` here instead — which is
 * what this rule used to do — put the gutter back on top of a row that was already full width, so
 * the sidebar wrapped below the items at every viewport. The columns are Blocks' business; the
 * panel's appearance is ours.
 */

/*
 * The order summary panel. Square, navy-ruled and on the surface tone — the same object language
 * as the promo rails and the feature tiles, so it reads as part of the same site.
 */
#left-area .wc-block-components-sidebar {
	padding: var( --csl-space-4 );
	border: 2px solid var( --csl-brand-navy );
	border-radius: 0;
	background: var( --csl-surface );
}

/* ------------------------------------------------------------------ headings */

/*
 * "Your cart", "Cart totals", "Order summary" and each checkout step title all take the comp's
 * in-column label: small, uppercase, wide-tracked. Padding is zeroed explicitly because Divi
 * styles bare `h1`-`h6` globally and a class rule that mentions only margin leaves it in place.
 */
#left-area .wc-block-cart__totals-title,
#left-area .wc-block-components-checkout-order-summary__title,
#left-area .wc-block-components-checkout-step__title,
#left-area .wc-block-components-title {
	margin: 0 0 var( --csl-space-3 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

#left-area .wc-block-components-checkout-step {
	padding-bottom: var( --csl-space-6 );
	border-bottom: 1px solid var( --csl-rule );
	margin-bottom: var( --csl-space-6 );
}

#left-area .wc-block-components-checkout-step:last-of-type {
	border-bottom: 0;
}

#left-area .wc-block-components-checkout-step__heading {
	margin: 0 0 var( --csl-space-3 );
}

#left-area .wc-block-components-checkout-step__description,
#left-area .wc-block-checkout__guest-checkout-notice {
	margin: 0 0 var( --csl-space-3 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	line-height: var( --csl-leading-normal );
}

/* -------------------------------------------------------------- cart table */

#left-area .wc-block-cart-items {
	margin: 0;
	border: 0;
}

#left-area .wc-block-cart-items__header {
	border-bottom: 1px solid var( --csl-ink );
}

#left-area .wc-block-cart-items__header th {
	padding: 0 0 var( --csl-space-3 );
	border: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	text-transform: uppercase;
}

#left-area .wc-block-cart-items__row {
	border-bottom: 1px solid var( --csl-rule );
}

#left-area .wc-block-cart-items__row td {
	padding: var( --csl-space-5 ) 0;
	border: 0;
	vertical-align: top;
}

#left-area .wc-block-cart-items__row td.wc-block-cart-item__image {
	width: 96px;
	padding-right: var( --csl-space-4 );
}

#left-area .wc-block-cart-item__image img {
	display: block;
	width: 80px;
	height: 80px;
	border: 1px solid var( --csl-rule );
	object-fit: contain;
}

#left-area .wc-block-components-product-name {
	display: block;
	margin-bottom: var( --csl-space-1 );
	color: var( --csl-ink );
	font-size: var( --csl-text-base );
	font-weight: var( --csl-weight-semibold );
	line-height: var( --csl-leading-snug );
	text-decoration: none;
}

#left-area .wc-block-components-product-name:hover,
#left-area .wc-block-components-product-name:focus-visible {
	color: var( --csl-accent );
	text-decoration: underline;
}

/*
 * The line description is a truncated copy of the product description. It competes with the name
 * for the same row and the comp's cart has no room for it, so it is held to one line.
 */
#left-area .wc-block-components-product-metadata__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	line-height: var( --csl-leading-snug );
}

#left-area .wc-block-components-product-metadata__description p {
	margin: 0;
}

/* --------------------------------------------------------------- price atoms */

/* Same reading as the shop and product pages: sale price in pink, original struck and quiet. */
#left-area .wc-block-components-product-price__value,
#left-area .wc-block-components-order-summary-item__total-price {
	color: var( --csl-ink );
	font-weight: var( --csl-weight-bold );
}

#left-area .wc-block-components-product-price__value.is-discounted {
	color: var( --csl-brand-pink-deep );
}

#left-area .wc-block-components-product-price__regular,
#left-area .wc-block-components-order-summary-item__regular-individual-price {
	margin-right: var( --csl-space-2 );
	color: var( --csl-ink-soft );
	font-weight: var( --csl-weight-regular );
	text-decoration: line-through;
}

/*
 * The saving chip. `white-space: normal` matters more than it looks: Blocks ships it `nowrap`, and
 * in the checkout's order summary the chip shares a flex column with the line total. At the width
 * that column actually has here, a nowrap "Save $26.00" set the column to 78px and left 74px for
 * the product name, which then wrapped one character per line. Letting it fold onto two lines is
 * what gives the name its column back.
 */
#left-area .wc-block-components-sale-badge,
#left-area .wc-block-components-product-badge {
	border: 1px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-btn );
	background: var( --csl-brand-yellow );
	color: var( --csl-brand-navy );
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-normal );
	line-height: var( --csl-leading-snug );
	text-align: center;
	text-transform: none;
	white-space: normal;
}

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

#left-area .wc-block-components-quantity-selector {
	/*
	 * `fit-content`, not `auto`: this sits in a table cell whose intrinsic minimum sets the
	 * table's floor, so a stepper that grows to fill its cell makes the whole cart unshrinkable.
	 * Two 2rem buttons around a 2.5rem field is 6.5rem, near what Blocks itself draws.
	 */
	width: fit-content;
	max-width: 100%;
	margin: var( --csl-space-3 ) 0 0;
	border: 2px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-sm );
	background: var( --csl-ground );
}

#left-area .wc-block-components-quantity-selector::after {
	display: none;
}

#left-area .wc-block-components-quantity-selector__input {
	min-width: 2.5rem;
	padding: 0.4em 0;
	border: 0;
	background: transparent;
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	text-align: center;
}

#left-area .wc-block-components-quantity-selector__button {
	width: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --csl-ink );
	font-size: var( --csl-text-base );
	font-weight: var( --csl-weight-bold );
	opacity: 1;
	transition: background-color var( --csl-transition ), color var( --csl-transition );
}

#left-area .wc-block-components-quantity-selector__button:hover,
#left-area .wc-block-components-quantity-selector__button:focus-visible {
	background: var( --csl-brand-navy );
	color: #ffffff;
}

#left-area .wc-block-components-quantity-selector__button:disabled {
	color: var( --csl-ink-soft );
	cursor: not-allowed;
}

#left-area .wc-block-components-quantity-selector__button:disabled:hover {
	background: transparent;
	color: var( --csl-ink-soft );
}

#left-area .wc-block-cart-item__remove-link {
	margin-top: var( --csl-space-2 );
	padding: 0;
	border: 0;
	background: none;
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	text-decoration: underline;
	cursor: pointer;
	transition: color var( --csl-transition );
}

#left-area .wc-block-cart-item__remove-link:hover,
#left-area .wc-block-cart-item__remove-link:focus-visible {
	color: var( --csl-brand-pink-deep );
}

/* -------------------------------------------------------------- totals rows */

#left-area .wc-block-components-totals-wrapper {
	padding: var( --csl-space-4 ) 0;
	border-top: 1px solid var( --csl-rule );
}

#left-area .wc-block-components-totals-wrapper:first-child {
	padding-top: 0;
	border-top: 0;
}

/*
 * Blocks renders a wrapper for every totals row it *might* show — discount, fee, shipping, taxes —
 * and leaves the ones with nothing to say completely empty. Without this the panel carries two
 * ruled blank bands between the subtotal and the total.
 *
 * `:empty`, and not `:not( :has( .wc-block-components-totals-item ) )`: the order summary's own
 * line items also sit in a totals wrapper that holds no totals *item*, so the `:has()` test matched
 * that one too and hid the entire summary. `:empty` asks the question actually being asked — these
 * wrappers have no child nodes at all, which the rendered DOM confirms.
 */
#left-area .wc-block-components-totals-wrapper:empty {
	display: none;
}

#left-area .wc-block-components-totals-item {
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-snug );
}

#left-area .wc-block-components-totals-item__label {
	color: var( --csl-ink-soft );
	font-weight: var( --csl-weight-regular );
}

#left-area .wc-block-components-totals-item__value {
	color: var( --csl-ink );
	font-weight: var( --csl-weight-semibold );
}

#left-area .wc-block-components-totals-item__description {
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
}

/* The order total — the one number on the panel that should carry weight. */
#left-area .wc-block-components-totals-footer-item {
	padding-top: var( --csl-space-4 );
	border-top: 2px solid var( --csl-brand-navy );
	font-size: var( --csl-text-lg );
}

#left-area .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
#left-area .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var( --csl-ink );
	font-weight: var( --csl-weight-bold );
}

/*
 * `wc-block-components-totals-footer-item-tax-value` is a misleading class name: Blocks puts the
 * *order total itself* inside a span carrying it, not a tax note. Styling it as a quiet footnote —
 * which the name invites — renders the most important number on the page at 12px grey beside a
 * 20px bold "Total". It inherits the footer item instead.
 *
 * The genuine "including $X in taxes" note lives in `__description`, which is styled above.
 */
#left-area .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* -------------------------------------------------------------- coupon panel */

#left-area .wc-block-components-panel__button {
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
}

#left-area .wc-block-components-panel__button-icon {
	fill: var( --csl-ink );
}

#left-area .wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: wrap;
	gap: var( --csl-space-2 );
	margin-top: var( --csl-space-3 );
}

#left-area .wc-block-components-totals-coupon__input {
	flex: 1 1 8rem;
	margin: 0;
}

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

/*
 * Brand orange with the navy outline and the asymmetric corners the token layer draws every button
 * with, in white type like every filled button on the Design Tokens sheet (client, 2026-10-05;
 * white on brand orange is 2.6:1, which the client accepted over the contrast figure).
 */
#left-area .wc-block-components-button:not( .is-link ) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.7em 1.4em;
	border: 2px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-btn );
	background-color: var( --csl-brand-orange );
	color: #ffffff;
	font-size: var( --csl-text-base );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-wide );
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var( --csl-transition ), color var( --csl-transition ), border-color var( --csl-transition );
}

#left-area .wc-block-components-button:not( .is-link ):hover,
#left-area .wc-block-components-button:not( .is-link ):focus-visible {
	background-color: #ec7a15;
	color: #ffffff;
}

#left-area .wc-block-components-button:not( .is-link ):disabled {
	border-color: var( --csl-rule );
	background-color: var( --csl-surface );
	color: var( --csl-ink-soft );
	cursor: not-allowed;
}

/* The secondary action beside a field — Apply on the coupon form — is the quieter amber fill. */
#left-area .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-height: 0;
	padding: 0.55em 1.1em;
	background-color: var( --csl-brand-yellow );
	font-size: var( --csl-text-sm );
}

#left-area .wc-block-components-totals-coupon__button:hover,
#left-area .wc-block-components-totals-coupon__button:focus-visible {
	background-color: var( --csl-brand-orange );
}

#left-area .wc-block-cart__submit-button,
#left-area .wc-block-components-checkout-place-order-button {
	width: 100%;
}

#left-area .wc-block-components-button.is-link {
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	text-decoration: underline;
}

#left-area .wc-block-components-button.is-link:hover,
#left-area .wc-block-components-button.is-link:focus-visible {
	color: var( --csl-accent );
}

#left-area .wc-block-components-button:focus-visible {
	outline: 2px solid var( --csl-ink );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- fields */

/*
 * Border, ground, radius and focus only. Blocks positions each field's label over its input with a
 * `translateY` derived from the input's own font-size, line-height and padding, so those three are
 * left exactly as Blocks sets them — restyling them moves the label off the field.
 */
#left-area .wc-block-components-text-input input[type="text"],
#left-area .wc-block-components-text-input input[type="email"],
#left-area .wc-block-components-text-input input[type="tel"],
#left-area .wc-block-components-text-input input[type="number"],
#left-area .wc-blocks-components-select__select {
	border: 1px solid var( --csl-rule );
	border-radius: var( --csl-radius-sm );
	background-color: var( --csl-ground );
	color: var( --csl-ink );
	transition: border-color var( --csl-transition );
}

#left-area .wc-block-components-text-input input:hover,
#left-area .wc-blocks-components-select__select:hover {
	border-color: var( --csl-brand-navy );
}

#left-area .wc-block-components-text-input input:focus,
#left-area .wc-blocks-components-select__select:focus {
	border-color: var( --csl-brand-navy );
	outline: 2px solid var( --csl-ink );
	outline-offset: 1px;
}

#left-area .wc-block-components-text-input label,
#left-area .wc-blocks-components-select__label {
	color: var( --csl-ink-soft );
}

#left-area .wc-block-components-text-input.is-active label,
#left-area .wc-blocks-components-select__label {
	font-size: var( --csl-text-2xs );
}

#left-area .wc-blocks-components-select__expand {
	fill: var( --csl-ink );
}

#left-area .wc-block-components-checkbox__input {
	accent-color: var( --csl-brand-pink-deep );
}

#left-area .wc-block-components-checkbox__label {
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-normal );
}

#left-area .wc-block-components-address-card {
	border: 1px solid var( --csl-rule );
	border-radius: 0;
	background: var( --csl-ground );
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
}

/* ------------------------------------------------------------------ notices */

#left-area .wc-block-components-notice-banner {
	border: 2px solid var( --csl-ink );
	border-left-width: 6px;
	border-radius: 0;
	background: var( --csl-surface );
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
}

#left-area .wc-block-components-notice-banner.is-error {
	border-left-color: var( --csl-brand-pink-deep );
}

#left-area .wc-block-components-notice-banner.is-success {
	border-left-color: var( --csl-brand-orange );
}

#left-area .wc-block-components-notice-banner.is-info,
#left-area .wc-block-components-notice-banner.is-warning {
	border-left-color: var( --csl-brand-yellow );
}

/* -------------------------------------------------------- order summary rows */

#left-area .wc-block-components-order-summary-item {
	padding: var( --csl-space-4 ) 0;
	border-bottom: 1px solid var( --csl-rule );
}

#left-area .wc-block-components-order-summary-item:last-child {
	border-bottom: 0;
}

#left-area .wc-block-components-order-summary-item__image img {
	border: 1px solid var( --csl-rule );
}

/*
 * The quantity chip rides on the corner of the thumbnail, so it takes the navy fill rather than the
 * white one it had — a white chip on a white packshot is an empty square, which is exactly how it
 * rendered.
 */
#left-area .wc-block-components-order-summary-item__quantity {
	border: 1px solid #ffffff;
	border-radius: var( --csl-radius-sm );
	background: var( --csl-brand-navy );
	color: #ffffff;
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
}

/*
 * The name column has to be allowed to shrink and to break long words. A flex item defaults to
 * `min-width: auto`, which in a 200px panel means the longest unbreakable run sets the floor.
 */
#left-area .wc-block-components-order-summary-item__description {
	min-width: 0;
	overflow-wrap: anywhere;
}

#left-area .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var( --csl-text-sm );
}

/* ------------------------------------------------------------- empty cart */

#left-area .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin: 0 0 var( --csl-space-4 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-2xl );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-tight );
}

#left-area .wp-block-woocommerce-empty-cart-block .wp-block-heading {
	margin: 0 0 var( --csl-space-5 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-xl );
	font-weight: var( --csl-weight-semibold );
}

/*
 * The empty-cart block ends in a "New in store" product grid using the older `wc-block-grid`
 * markup. It is a third product tile on the site, so it takes the same white square card the shop
 * archive and the related row use rather than the plugin default.
 */
#left-area .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: var( --csl-space-4 );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `max-width: none` is the load-bearing line. Blocks sizes these tiles for a flex row with
 * `flex: 1 0 25%; max-width: 25%`. As grid items the flex shorthand is inert, but the percentage
 * max-width is not — it resolves against the grid *track* rather than the row, so each tile came
 * out at a quarter of its own 254px cell: 64px wide.
 */
#left-area .wc-block-grid__products .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: var( --csl-space-4 );
	border: 1px solid var( --csl-rule );
	background: var( --csl-ground );
	text-align: left;
}

#left-area .wc-block-grid__product-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	text-decoration: none;
}

#left-area .wc-block-grid__product-image img {
	width: 100%;
	height: 140px;
	margin: 0 0 var( --csl-space-3 );
	object-fit: contain;
}

#left-area .wc-block-grid__product-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0 0 var( --csl-space-2 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	line-height: var( --csl-leading-snug );
}

#left-area .wc-block-grid__product-price {
	margin: auto 0 0;
	font-size: var( --csl-text-base );
}

/* Blocks positions this flag absolutely over the packshot, so only its appearance is set here. */
#left-area .wc-block-grid__product-onsale {
	border: 1px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-btn );
	background: var( --csl-brand-pink );
	color: #ffffff;
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
}

/*
 * The add-to-cart link on these tiles is a core block button (`wp-block-button__link`), not a
 * WooCommerce `.button`, so the shared button rule in `woocommerce.css` does not reach it and it
 * renders in the WordPress default near-black. It takes the amber fill the rest of the site gives a
 * secondary action — navy on brand yellow is 7.73:1.
 */
#left-area .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6em 1.1em;
	border: 2px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-btn );
	background-color: var( --csl-brand-yellow );
	color: #ffffff;
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	text-decoration: none;
	transition: background-color var( --csl-transition );
}

#left-area .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
#left-area .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
	background-color: var( --csl-brand-orange );
	color: #ffffff;
}

/* ------------------------------------------------------------------- mobile */

/*
 * Narrow widths: the line item stops being a table row.
 *
 * `#left-area` is 256px inside a 320px viewport once Divi's container padding is taken out, and a
 * three-cell row cannot shrink below the sum of its cells' intrinsic minimums — the cart overflows
 * the viewport by ~93px at that width with WooCommerce's own stylesheet alone, before any of this
 * file is involved. Stacking the cells is the fix; narrowing them only moves the number.
 *
 * Safe to change `display` here because Blocks puts explicit `role="row"` and `role="rowheader"`
 * on these elements rather than relying on the table's implicit roles, so the accessibility tree
 * survives the switch. The header row is hidden because "Product"/"Total" label columns that no
 * longer exist.
 */
@media ( max-width: 600px ) {
	#left-area .wc-block-cart-items,
	#left-area .wc-block-cart-items tbody {
		display: block;
		width: 100%;
	}

	#left-area .wc-block-cart-items__header {
		display: none;
	}

	#left-area .wc-block-cart-items__row {
		display: grid;
		grid-template-columns: 64px minmax( 0, 1fr );
		gap: var( --csl-space-1 ) var( --csl-space-4 );
		padding: var( --csl-space-4 ) 0;
	}

	#left-area .wc-block-cart-items__row td {
		display: block;
		width: auto;
		min-width: 0;
		padding: 0;
	}

	/*
	 * Every cell is placed explicitly. Left to auto-placement, the row-spanning image plus a
	 * `grid-column: 2` on the total was enough for the algorithm to open a phantom third track
	 * and drop the total back into row 1, on top of the product name.
	 */
	#left-area .wc-block-cart-item__image {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	#left-area .wc-block-cart-item__product {
		grid-column: 2;
		grid-row: 1;
	}

	#left-area .wc-block-cart-item__image img {
		width: 64px;
		height: 64px;
	}

	#left-area .wc-block-cart-item__total {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
	}
}

@media ( max-width: 780px ) {
	/*
	 * Blocks already stacks the sidebar under the main column at its own breakpoint. The panel
	 * keeps its border but loses the side padding that a full-width block does not need.
	 */
	#left-area .wc-block-components-sidebar {
		padding: var( --csl-space-4 );
	}

	#left-area .wc-block-cart-items__row td.wc-block-cart-item__image {
		width: 72px;
		padding-right: var( --csl-space-3 );
	}

	#left-area .wc-block-cart-item__image img {
		width: 60px;
		height: 60px;
	}

	#left-area .wc-block-cart-items__row td {
		padding: var( --csl-space-4 ) 0;
	}

	#left-area .wc-block-components-button:not( .is-link ) {
		width: 100%;
	}

	/* Except the one that has to sit beside its field. */
	#left-area .wc-block-components-totals-coupon__button {
		width: auto;
	}
}

@media ( max-width: 479px ) {
	#left-area .wc-block-grid__products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --csl-space-3 );
	}

	#left-area .wc-block-grid__product {
		padding: var( --csl-space-3 );
	}

	#left-area .wc-block-grid__product-image img {
		height: 110px;
	}
}