/**
 * Cart page (WooCommerce Cart block).
 *
 * The block ships almost unstyled and inherits very little from Blocksy, which leaves the
 * page as bare rows on white. This dresses it in the theme palette: a card for the order
 * summary, proper product rows, and a quantity control that looks deliberate.
 *
 * Written mobile first. The block sizes itself with CONTAINER queries, not viewport media
 * queries -- `.wp-block-woocommerce-cart` carries `container-type: inline-size`, and
 * WooCommerce flips the line items between a stacked grid and a table at a 700px
 * container width. Everything below follows that same 700px boundary so the two
 * stylesheets agree; a viewport media query would disagree with the block whenever the
 * cart isn't full-viewport-width.
 *
 * Colours come from Blocksy's palette variables so a palette change in the Customizer
 * carries through here; the literals are fallbacks for the editor preview, where those
 * variables aren't always defined.
 */

.woocommerce-cart .wp-block-woocommerce-cart {
	--wpshop-accent: var( --theme-palette-color-1, #d27c61 );
	--wpshop-accent-strong: var( --theme-palette-color-2, #bc5d40 );
	--wpshop-ink: var( --theme-palette-color-4, #17383e );
	--wpshop-ink-soft: var( --theme-palette-color-3, #395155 );
	--wpshop-muted: rgba( 23, 56, 62, 0.55 );
	--wpshop-line: rgba( 23, 56, 62, 0.1 );
	--wpshop-surface: #fbfbfb;
	--wpshop-tint: #f4f4f5;
	--wpshop-radius: 16px;
	--wpshop-thumb: 80px;

	margin-inline: auto;

	/*
	 * Match the theme's content width so the cart block lines up with the page-title above
	 * it (Blocksy's title uses this same variable) and with the other store pages. The block
	 * is `alignwide`, which WooCommerce otherwise widens to the theme's *wide* size, breaking
	 * that alignment; capping it at the content width pulls it back onto the theme grid.
	 */
	max-width: var( --theme-block-max-width, 1290px );
}

/* =========================================================================
 * Line items -- stacked layout (narrow containers)
 *
 * WooCommerce's own narrow grid spans the product cell across columns 2-4 while placing
 * the total cell in column 3, so the two overlap. That is survivable with short English
 * product names and not with "Переноска «Вояж» для кошек и собак". Replace the track
 * definition with three explicit columns: thumbnail, content, price.
 * ====================================================================== */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items {
	border: 0;
}

/*
 * These four carry the full ancestor chain on purpose. WooCommerce's own grid rules are
 * (0,3,1)/(0,4,1) and its stylesheet is printed after this one -- the cart block enqueues
 * its styles while rendering the content, which is past `wp_enqueue_scripts` -- so on an
 * equal score theirs would win. Naming `.wc-block-cart` and `table` puts these ahead
 * without resorting to !important.
 */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	border-bottom: 1px solid var( --wpshop-line );
	column-gap: 14px;
	grid-template-columns: var( --wpshop-thumb ) minmax( 0, 1fr ) auto;
	padding: 20px 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1;
	padding: 0;
	width: var( --wpshop-thumb );
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__product {
	grid-column: 2 / 3;
	grid-row: 1;
	padding: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
	align-self: start;
	grid-column: 3 / 4;
	grid-row: 1;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Line item contents -- shared by both layouts
 * ---------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__image a,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__image img {
	display: block;
	width: 100%;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__image img {
	aspect-ratio: 1;
	background: var( --wpshop-tint );
	border-radius: 12px;
	height: auto;
	object-fit: cover;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name {
	color: var( --wpshop-ink );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.18s ease-out;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name:hover,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name:focus-visible {
	color: var( --wpshop-accent-strong );
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price {
	color: var( --wpshop-ink-soft );
	font-size: 14px;
}

/*
 * Label the per-unit price under the product name so it can't be mistaken for a second copy
 * of the line total in the __total column (the one under the "ИТОГО" header). At a quantity
 * of one the two figures are identical and read as a duplicated price; the "/ шт." suffix
 * makes clear this one is the unit price. Appended in CSS (display-only) after the price
 * amount, so it works for sale rows too, where the price element holds both the struck
 * regular price and the sale price.
 */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price::after {
	color: var( --wpshop-muted );
	content: " / шт.";
	font-size: 13px;
	white-space: nowrap;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-product-metadata {
	color: var( --wpshop-muted );
	font-size: 13px;
	line-height: 1.5;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-product-metadata p {
	margin: 0;
}

/*
 * The sale "savings" badge ships as white-space:nowrap, so "Экономия 15,00 ₽" sizes the
 * total column to ~108px. In the stacked layout that is width stolen from the content
 * column, which is the only place the quantity row has to lay out its stepper and remove
 * button -- enough to wrap the remove button onto its own orphaned line. Cap the column and
 * let the badge wrap to two lines; the price stays nowrap and short, and the ≥700 table
 * layout resets the cap where there is room to spare.
 */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total {
	max-width: 80px;
	text-align: right;
	white-space: nowrap;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-sale-badge {
	white-space: normal;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
	color: var( --wpshop-ink );
	font-size: 15px;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Quantity stepper + remove
 *
 * WooCommerce hides the remove button in the stacked layout, which leaves no way to drop
 * an item on a phone -- the minus button is disabled at a quantity of one. Keep it.
 * ---------------------------------------------------------------------- */

/*
 * Wraps rather than overflows: the content column is whatever is left after the thumbnail
 * and the line total, so a long total ("1 280,00 ₽") can squeeze it below the width of the
 * stepper plus the remove button. Dropping the button to a second line is untidy; pushing
 * it over the price is not recoverable.
 *
 * The `table.wc-block-cart-items` prefix is load-bearing, not decoration. WooCommerce sets
 * `.wc-block-cart-item__quantity { gap: 12px }` at (0,3,1) from a stylesheet printed after
 * this one, so a plain three-class selector loses and the gap stays 12px -- enough extra
 * width to spill the remove button onto a second line on a narrow phone. Naming `table`
 * lifts these to (0,4,1) so the intended gap actually applies. (Same reason the row and
 * remove-link rules carry the chain; the gap rules originally didn't, and wrapped.)
 *
 * WooCommerce also gives this container a 16px inline padding. In the stacked layout that
 * is 16px stolen from the one line the stepper and remove button share -- on a narrow phone
 * it is the difference between fitting and wrapping. Zero it; the row's own column gap
 * already spaces the quantity block from the line total.
 */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__quantity {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px;
	padding-inline: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	background: #fff;
	border-radius: 999px;
	flex: 0 0 auto;
	margin: 0;
	min-width: 0;
	width: 112px;
}

/* The visible border is drawn by an ::after overlay, not by the container itself. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector::after {
	border: 1px solid var( --theme-palette-color-5, #dfdfe2 );
	border-radius: 999px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
	color: var( --wpshop-ink );
	font-size: 14px;
	font-weight: 600;
	min-width: 0;
	padding: 10px 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
	border-radius: 999px;
	color: var( --wpshop-ink-soft );
	font-size: 16px;
	opacity: 1;
	transition: background-color 0.18s ease-out, color 0.18s ease-out;
	width: 36px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover:not( :disabled ),
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:focus-visible {
	background: var( --wpshop-tint );
	color: var( --wpshop-accent-strong );
	opacity: 1;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:disabled {
	color: var( --wpshop-muted );
	opacity: 0.4;
}

/*
 * WooCommerce resets this button with a (0,4,1) selector that pins it to a 24px inline box
 * -- a 24px tap target, well under the ~44px a thumb needs. Beating it takes naming
 * `table` and the quantity wrapper, so the chain here is deliberately long.
 */
.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	align-items: center;
	border-radius: 50%;
	color: var( --wpshop-muted );
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0;
	height: 40px;
	justify-content: center;
	opacity: 1;
	padding: 0;
	text-decoration: none;
	transition: background-color 0.18s ease-out, color 0.18s ease-out;
	width: 40px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
	fill: currentColor;
	height: 20px;
	width: 20px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover,
.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus-visible {
	background: rgba( 210, 124, 97, 0.12 );
	color: var( --wpshop-accent-strong );
	opacity: 1;
}

/* =========================================================================
 * Order summary
 * ====================================================================== */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-sidebar {
	background: var( --wpshop-surface );
	border: 1px solid var( --wpshop-line );
	border-radius: var( --wpshop-radius );
	box-shadow: 0 18px 40px -28px rgba( 23, 56, 62, 0.45 );
	margin-top: 32px;
	padding: 24px 20px;
}

/*
 * WooCommerce hides this heading in the stacked layout, which leaves the summary card
 * looking decapitated -- a bordered box opening on a shipping row. Keep it at every width.
 */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__totals-title {
	display: block;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__totals-title {
	color: var( --wpshop-ink );
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 8px;
	padding: 0;
	text-transform: none;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	border-top: 1px solid var( --wpshop-line );
	padding: 16px 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-child {
	border-top: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item {
	align-items: baseline;
	font-size: 15px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__label {
	color: var( --wpshop-ink-soft );
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	color: var( --wpshop-ink );
	font-weight: 600;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__description {
	color: var( --wpshop-muted );
	font-size: 13px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
	font-size: 17px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var( --wpshop-ink );
	font-weight: 700;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 21px;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Checkout button
 * ---------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-container {
	padding: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit {
	margin-top: 20px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background: var( --wpshop-accent );
	border: 0;
	border-radius: 12px;
	box-shadow: 0 14px 26px -14px rgba( 188, 93, 64, 0.85 );
	font-size: 16px;
	font-weight: 600;
	min-height: 56px;
	transition: background-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
	width: 100%;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible {
	background: var( --wpshop-accent-strong );
	box-shadow: 0 18px 30px -14px rgba( 188, 93, 64, 0.95 );
	transform: translateY( -1px );
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button:active {
	box-shadow: 0 8px 18px -12px rgba( 188, 93, 64, 0.9 );
	transform: none;
}

/* -------------------------------------------------------------------------
 * Coupon form
 * ---------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-panel__button {
	color: var( --wpshop-accent-strong );
	font-size: 15px;
	font-weight: 600;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input input,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button {
	border-radius: 10px;
}

/* -------------------------------------------------------------------------
 * Cross-sells / empty cart
 * ---------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__main .wp-block-woocommerce-product-collection {
	border-top: 1px solid var( --wpshop-line );
	margin-top: 40px;
	padding-top: 32px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__main .wp-block-woocommerce-product-collection > h2 {
	color: var( --wpshop-ink );
	font-size: 20px;
	margin-bottom: 20px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	margin-inline: auto;
	max-width: 640px;
	padding: 12px 0 48px;
	text-align: center;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
	color: var( --wpshop-ink );
}

/* -------------------------------------------------------------------------
 * Modern Cart's floating button
 *
 * It is a shortcut to the cart, so on the cart page it has nothing to offer -- and at
 * phone widths it sits on top of the order summary. This stylesheet only loads on the
 * cart page, so the plain selector is already scoped. display:none rather than
 * visibility so it leaves the tab order too.
 * ---------------------------------------------------------------------- */

.woocommerce-cart #moderncart-floating-cart {
	display: none;
}

/* =========================================================================
 * Small container: iPhone SE and narrower
 *
 * Below roughly 420px the content column cannot hold a 112px stepper plus the remove
 * button, and they spill over the line total. Shrink the whole row to fit rather than
 * dropping a control.
 * ====================================================================== */

@container ( max-width: 419px ) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart {
		--wpshop-thumb: 64px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		column-gap: 8px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name,
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: 14px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price {
		font-size: 13px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-product-metadata {
		font-size: 12px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__quantity {
		gap: 2px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
		width: 96px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
		width: 30px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
		font-size: 13px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		height: 36px;
		width: 36px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
		height: 18px;
		width: 18px;
	}
}

/* =========================================================================
 * Very small container: iPhone SE 1st gen / Galaxy Fold cover (~320px viewport)
 *
 * Even with the total column capped, a 320px viewport leaves the content column around
 * 121px -- short of the 96px stepper plus the remove button. Rather than let the remove
 * button wrap, shrink the stepper and the total cap a little further so the pair still
 * fits on one line. Ordered after the 419px tier so these win where both match.
 * ====================================================================== */

@container ( max-width: 305px ) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total {
		max-width: 72px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
		width: 84px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
		width: 28px;
	}
}

/* =========================================================================
 * Mid container: still stacked, but there is room to breathe
 * ====================================================================== */

@container ( min-width: 520px ) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart {
		--wpshop-thumb: 96px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		column-gap: 20px;
		padding: 24px 0;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name,
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: 16px;
	}
}

/* =========================================================================
 * Wide container: side-by-side columns, line items back to a table
 *
 * 700px matches the breakpoint WooCommerce uses to restore `display: table-row` on the
 * line items, so these table-shaped rules land exactly when that layout does.
 * ====================================================================== */

@container ( min-width: 700px ) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart {
		--wpshop-thumb: 112px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
		align-items: flex-start;
		column-gap: 56px;
		row-gap: 40px;
	}

	/*
	 * Still one column here. 700px is wide enough for the line items to be a table but not
	 * for a 380px summary beside them -- pinning the summary at 380px this early only makes
	 * it wrap and sit as a narrow orphan under a full-width list.
	 */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main,
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-sidebar {
		flex: 1 1 100%;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-sidebar {
		padding: 28px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__header th {
		border-bottom: 1px solid var( --wpshop-line );
		color: var( --wpshop-muted );
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.09em;
		padding: 0 0 14px;
		text-transform: uppercase;
	}

	/*
	 * Back to table cells: the row is no longer a grid, so the placement above stops
	 * applying and the separator moves from the row onto the cells.
	 */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		border-bottom: 0;
		padding: 0;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__row td {
		border-top: 1px solid var( --wpshop-line );
		padding: 26px 0;
		vertical-align: top;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__row:first-child td {
		border-top: 0;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__row:last-child td {
		border-bottom: 1px solid var( --wpshop-line );
	}

	/*
	 * Same full chain as the stacked rules above, which is what these are undoing -- those
	 * sit outside this container query and would otherwise keep their `padding: 0`.
	 *
	 * The gutter sits on the product cell rather than as padding on the image cell:
	 * box-sizing is border-box, so padding on a fixed-width cell would eat into the
	 * thumbnail instead of sitting beside it.
	 */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
		padding: 26px 0;
		width: var( --wpshop-thumb );
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__product {
		padding: 26px 0 26px 24px;
	}

	/*
	 * WooCommerce makes the total cell a flex container to park the sale badge beside the
	 * price. That takes it out of the table's row sizing, so its bottom border floats
	 * halfway up the row. Put it back to a table cell -- the badge sits fine on its own line.
	 */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
		display: table-cell;
		max-width: none;
		padding: 26px 0;
	}

	/* Room to spare here, so keep the savings badge on one line as WooCommerce ships it. */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-sale-badge {
		white-space: nowrap;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__image img {
		border-radius: 14px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name,
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: 17px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-product-metadata {
		font-size: 14px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__quantity {
		gap: 8px;
		margin-top: 16px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
		width: 136px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
		font-size: 15px;
		padding: 12px 0;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
		font-size: 17px;
		width: 44px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		height: 44px;
		width: 44px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
		height: 21px;
		width: 21px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 22px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button {
		min-height: 58px;
	}
}

/* =========================================================================
 * Full width: the summary moves alongside the line items
 * ====================================================================== */

@container ( min-width: 900px ) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main {
		flex: 1 1 420px;
		width: auto;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-sidebar {
		flex: 0 0 380px;
		margin-top: 0;
		max-width: 100%;
		padding: 30px;
		position: sticky;
		top: 30px;
		width: 380px;
	}
}