/**
 * Cart block
 *
 * Recreates the Techmarket cart design -- authored for the [woocommerce_cart]
 * shortcode in assets/sass/woocommerce/_cart.scss -- on the markup rendered by
 * the woocommerce/cart block.
 *
 * Registered with wp_enqueue_block_style() in
 * inc/woocommerce/class-techmarket-woocommerce.php, so it is only served on
 * pages that actually contain the block.
 *
 * There is no `!important` here and none should be added. WooCommerce ships its
 * own stylesheet for this block and load order between two block stylesheets is
 * not guaranteed, so every override wins on specificity alone. Two roots do
 * that:
 *
 *   - the sidebar, at `.wp-block-woocommerce-cart .wc-block-cart
 *     .wc-block-cart__sidebar`;
 *   - the items table, at `.wp-block-woocommerce-cart .wc-block-cart
 *     .wc-block-components-main table.wc-block-cart-items`.
 *
 * The table needs the longer root because core ships every one of its
 * cart-items rules twice: once as `table.wc-block-cart-items
 * .wc-block-cart-items__row .X` for the front end, and once with
 * `.editor-styles-wrapper` in front of it for the editor. That editor copy is a
 * class heavier, so a root that clears the front-end rule still loses inside the
 * editor. Keep the full root when adding rules here.
 *
 * Sections:
 *   1. Page frame
 *   2. Cart items (main column)
 *   3. Totals (sidebar)
 *   4. Cross-sells and empty cart
 *   5. Responsive -- the row grid and every container query live down there
 */

/* --------------------------------------------------------------------------
 * 1. Page frame
 * ----------------------------------------------------------------------- */

.woocommerce-page.woocommerce-cart .hentry.type-page .entry-header {
	display: none;
}

/*
 * The block is held to 1440px and centred in whatever the theme's container
 * gives it, which above `ni` is wider than that -- 1530px at `xxl`, 1640px at
 * `uw`, 1860px at `hd`. The checkout block is held to the same width, so the
 * two pages line up.
 *
 * The class is doubled because core writes `width: 100%` on the same single
 * class, and a tie between two block stylesheets is settled by load order,
 * which is not guaranteed.
 */
.wp-block-woocommerce-cart.wp-block-woocommerce-cart {
	margin-bottom: 4em;
	margin-inline: auto;
	max-width: 1440px;
}

/* --------------------------------------------------------------------------
 * 2. Cart items (main column)
 *
 * The design lays each line item out in six columns -- image, name, price,
 * quantity, subtotal, remove. Core's markup carries only three cells per row
 * (image, product, total) with the price, the quantity and the remove control
 * stacked inside the middle one, so the six columns are built by turning each
 * `tr` into a grid and flattening the product cell and its wrappers with
 * `display: contents`. Core does the same thing to the same `tr` for its own
 * narrow layout, so the grid is its pattern rather than a new one.
 *
 * Everything that reshapes the row therefore lives in section 5, behind the
 * same `@container (min-width: 700px)` core uses to switch its desktop table
 * on. Below that width core hides the header row and stacks the row its own
 * way, which is the design's own small-screen behaviour.
 *
 * Flattening a `<td>` takes it out of the accessibility tree, and core renders
 * no `role` to hold its place. The table keeps its caption, its header row and
 * its own element semantics; the product cell's is what this trades for the
 * columns.
 * ----------------------------------------------------------------------- */

/*
 * Re-base the cart-items container queries -- core's as well as this file's --
 * onto the column the table actually occupies. Core puts the only container on
 * .wp-block-woocommerce-cart, which spans the sidebar too, so a 1140px cart
 * reads as 1140px to a table that is only given 70.8% of it. The layout rules
 * that size this column are unaffected: an element is never its own container,
 * so those still resolve against the cart.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main {
	container-type: inline-size;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items {
	/*
	 * The one track list, shared by the header row and every item row so each
	 * label sits over the values it heads. The name column takes the slack.
	 *
	 * Every value column is sized against the table rather than at a fixed
	 * width, because the table never gets wide enough for one set of widths to
	 * serve the whole range. The block is capped at 1440px in section 1, which
	 * leaves this column around 990px at its widest and 620px at the narrowest
	 * the grid runs at -- so a set that gives the design's own separation up
	 * there leaves the name nothing down here, and the set that fits down here
	 * is what made the price, the quantity and the subtotal read as one block
	 * of figures up there.
	 *
	 * `cqi` is 1% of the table's column, which is what the container query on
	 * .wc-block-components-main above makes measurable. Each column is held at
	 * the tightest width its own figure fits in until around 700px, where the
	 * name has room to spare, and grows with the table from there to the width
	 * the design gives it. The name keeps whatever is left, so nothing below
	 * that point is taken off it.
	 */
	--techmarket-cart-col-image: 8.735rem;
	--techmarket-cart-col-price: clamp(4.75rem, 20cqi - 4rem, 8.125rem);
	--techmarket-cart-col-quantity: clamp(8rem, 12cqi + 2.5rem, 9.375rem);
	--techmarket-cart-col-subtotal: clamp(4.75rem, 22cqi - 5rem, 8.75rem);

	/*
	 * What the thumbnail's track carries on top of the frame itself, spent as
	 * padding on the cell. It is added to the column gap rather than replacing
	 * it, so the name ends up the 2.571em clear of the picture the design sets
	 * it -- further than the figures beside it are from each other, which is
	 * the one gap in the row the design opens wider than the rest.
	 */
	--techmarket-cart-image-gap: clamp(0rem, 7cqi - 3rem, 1.0625rem);

	--techmarket-cart-columns:
		calc(var(--techmarket-cart-col-image) + var(--techmarket-cart-image-gap))
		minmax(0, 1fr)
		var(--techmarket-cart-col-price)
		var(--techmarket-cart-col-quantity)
		var(--techmarket-cart-col-subtotal)
		1.875rem;
	--techmarket-cart-gap: clamp(0.875rem, 3cqi - 0.5rem, 1.25rem);

	border-bottom: 0;
	border-spacing: 0;
	margin-bottom: 1rem;
	width: 100%;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items tbody tr td {
	border: 0;
	padding: 0;
	vertical-align: middle;
}

/* Header labels: 0.938em, regular, muted and sentence case, not core's caps. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header {
	text-transform: none;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th {
	border: 0;
	color: #626060;
	font-size: 0.938rem;
	font-weight: 400;
	padding: 0;
	text-align: left;
	white-space: nowrap;
	width: auto;
}

/*
 * Core's header row carries three cells: a visible "Product", a hidden
 * "Details" and a visible "Total". The design asks for four labels over the six
 * columns, so the hidden cell is shown and made to carry "Price" and
 * "Quantity" on its pseudo-elements -- added where core draws nothing. Its own
 * "Details" stays for screen readers, and "Total" keeps core's wording even
 * though the design reads "Subtotal".
 *
 * They are `content` values, which cannot be translated from a stylesheet.
 * cart_label_styles() in inc/woocommerce/class-techmarket-woocommerce.php hands
 * them in as custom properties built from the theme's own translated strings.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-product {
	visibility: visible;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-product > span {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Product name. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-name {
	color: #626060;
	display: block;
	font-size: 0.875em;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.5em;
	max-width: none;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-name:hover {
	color: #626060;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-metadata {
	color: #626060;
	font-size: 0.875em;
	line-height: 1.5em;
	margin-top: 0;
	text-transform: capitalize;
}

/*
 * Metadata. Only variation data belongs in the row; core also renders the
 * product's short description there, which the design has no place for.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-metadata__description {
	display: none;
}

/*
 * Thumbnail frame. Core hands the image straight into the cell; the design
 * frames it, so the link becomes a square box that centres whatever shape the
 * photo is. `contain`, not `cover`: a product shot cropped to a square loses
 * the part of the product that identifies it.
 *
 * Both the linked and the unlinked case are covered -- core drops the anchor
 * on a product hidden from the catalogue.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__image a {
	align-items: center;
	aspect-ratio: 1;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 0.625rem;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__image > img {
	border: 1px solid #ebebeb;
	border-radius: 3px;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__image img {
	height: auto;
	margin: 0;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/*
 * Price and subtotal. Sized in rem, not em: core scales these off its own
 * font-size preset, and the design's figure is a flat 16px either way.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__total,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-price__value {
	color: #444;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.5em;
}

/*
 * On a sale item core writes the regular price first and the sale price after
 * it. Leading with the sale price puts the figure that matters at the same
 * starting edge on every row, sale or not, so the column reads down cleanly.
 *
 * Ordered rather than reversed so the DOM stays as core wrote it -- each price
 * keeps the screen-reader label that precedes it ("Previous price:" /
 * "Discounted price:"), and those labels are read in source order, so only the
 * visual order changes.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price__value {
	order: 0;
}

/*
 * Core separates the two with a margin on the sale price, which sat between
 * them while the struck price came first. Reordered, that margin lands at the
 * head of the column and pushes the sale price off the edge the plain prices
 * above it start on, so it moves to the struck price below.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted {
	margin-left: 0;
}

/* Struck-through regular price, matching .price del in the theme's own sheet. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-price__regular {
	color: #b8b8b8;
	font-size: 0.875em;
	font-weight: 400;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price__regular {
	margin-left: 0.5rem;
	order: 1;
}

/*
 * Sale badge. Core draws it as an outlined, uppercase, semibold chip; the
 * design wants it quieter and further clear of the subtotal above it.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-sale-badge {
	background-color: #f5f5f5;
	border-color: transparent;
	border-radius: 3px;
	color: #626060;
	font-size: 0.875em;
	font-weight: 400;
	margin-top: 0.5rem;
	padding: 0.35em 0.75em;
	text-transform: none;
}

/* Both sit under their own label rather than against the table's edge. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__total {
	justify-content: flex-start;
	text-align: left;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	align-items: flex-start;
}

/*
 * Quantity stepper: a bordered field with the count on the left and the two
 * arrows stacked in a grey column on the right.
 *
 * Core's markup is input, minus, plus, laid out in a row and re-ordered with
 * `order`; the grid below places all three instead, so the source order is left
 * alone. Its `−` and `+` glyphs are dropped to a zero font-size and the arrows
 * drawn as borders -- each button's accessible name is its aria-label, not the
 * glyph, so nothing is lost with the text.
 */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	align-items: stretch;
	background-color: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 6px;
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr) 2.125rem;
	grid-template-rows: 1fr 1fr;
	max-width: 135px;
	min-height: 2.75rem;
	padding: 0.375rem;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	color: #444;
	font-size: 1rem;
	grid-column: 1;
	grid-row: 1 / -1;
	min-width: 0;
	order: 0;
	padding: 0 0.5rem;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	align-items: center;
	background-color: #efefef;
	border-radius: 0;
	color: #444;
	display: flex;
	font-size: 0;
	grid-column: 2;
	justify-content: center;
	min-width: 0;
	opacity: 1;
	padding: 0;
	width: auto;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
	background-color: #e2e2e2;
	color: #000;
	opacity: 1;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.45;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button::before {
	border-left: 0.25rem solid transparent;
	border-right: 0.25rem solid transparent;
	content: "";
	display: block;
	height: 0;
	width: 0;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus {
	border-radius: 4px 4px 0 0;
	grid-row: 1;
	order: 0;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus::before {
	border-bottom: 0.3125rem solid currentColor;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus {
	border-radius: 0 0 4px 4px;
	grid-row: 2;
	order: 0;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus::before {
	border-top: 0.3125rem solid currentColor;
}

/*
 * Remove control. The design ends the row with a small multiplication sign;
 * core renders an underlined trash icon, so the icon is hidden and the
 * character drawn in its place. The button keeps its own accessible label.
 *
 * At the table root because core's own reset for this button is four selectors
 * deep -- a shorter root leaves the underline and the 24px box in place.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus {
	background: none;
	border-radius: 0;
	color: #b8b8b8;
	height: auto;
	padding: 0;
	text-decoration: none;
	width: auto;
}

/* Still darkens on hover, so the mark reads as something to press. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus {
	color: #444;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link::before {
	content: "\00d7";
	display: block;
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1;
}

/*
 * The palette stylesheets (assets/css/color/*.css) paint every bare <button>
 * with the primary colour. That is right for the coupon's Apply button and
 * wrong for the block's icon buttons, so those are reset back to plain text.
 */
.wp-block-woocommerce-cart .wc-block-components-panel__button,
.wp-block-woocommerce-cart .wc-block-components-totals-shipping__change-address-button {
	background: none;
	border-radius: 0;
	color: inherit;
	padding: 0;
}

/* --------------------------------------------------------------------------
 * 3. Totals (sidebar)
 *
 * Stands in for .cart-collaterals .cart_totals, built the way groceria builds
 * its order summary: the rhythm is owned by core's own `…totals-wrapper`, one
 * of which core puts around every summary row including the coupon panel, and
 * the rows are reached through `:has()` rather than by counting children.
 * ----------------------------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-cart__sidebar {
	background-color: #f9f9f9;
	border-radius: 6px;
	/* Without this the card stretches to the height of the items column. */
	height: fit-content;
	padding: 1.25em;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-cart__totals-title {
	color: #090909;
	display: block;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.5em;
	margin: -0.333em 0 0.667em;
	padding: 0;
	text-align: left;
	text-transform: none;
}

/* The card already carries the padding the sidebar layout adds to its rows. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-panel,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .slot-wrapper .wc-block-components-panel,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon {
	padding-left: 0;
	padding-right: 0;
}

/*
 * The summary rows run as one tight list on 2em leading, with the gap the
 * design put on tr:nth-last-child(2) sitting below the group instead.
 */
.wp-block-woocommerce-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: none;
	font-size: 0.938em;
	line-height: 2em;
	margin-bottom: 0;
	padding-bottom: 0;
}

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

/* One gap above and below every row, so the three read evenly spaced. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-item) {
	padding-block: 0.4em;
}

/* The coupon panel is a control, not a row, so it clears the rows below it. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-coupon) {
	padding-bottom: 0.8em;
}

/*
 * Core adds 12px under every row on top of the wrapper's own padding, which is
 * what sets the three so far apart. The wrapper owns the rhythm here.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item {
	letter-spacing: -0.01em;
	margin-bottom: 0;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__label {
	font-weight: 400;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__value {
	font-weight: 500;
	text-align: right;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__description {
	color: #626060;
	line-height: 1.4;
	margin-top: -0.4em;
}

/*
 * Order total. Reached through the wrapper that holds it rather than by
 * position, so it keeps its rule and its spacing whichever rows core decides
 * to render above it.
 */
/*
 * The two rules in the card. Core groups the summary rows in a
 * `…order-summary-totals-block` that draws the upper one on its own top edge
 * and then adds 16px under the last row -- which is what set the lower rule
 * nearly three times further from VAT than the upper one sits from Subtotal.
 *
 * Both are restated here so one value governs the clearance on each side of
 * each rule: the block's own padding above the first row and below the last,
 * plus the 0.4em every row wrapper already carries, is 0.8em either way.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block {
	border-top: 1px solid #bebebe;
	padding-bottom: 0.4em;
	padding-top: 0.4em;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	border-top: 1px solid #bebebe;
	margin-top: 0;
	padding: 0.8em 0;
}

/* Core opens 16px above the express buttons on top of this; that is the lot. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-cart__payment-options {
	padding-top: 0.5em;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item {
	border-top: none;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 1.133em;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.2em;
}

/*
 * Coupon: the joined field and button of table.cart td.actions div.coupon. The
 * Apply button keeps the primary background the palette stylesheet gives every
 * button.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon {
	padding-top: 0.8em;
}

/*
 * The field and the button stay on one line however narrow the card gets. Core
 * lets the row wrap, and a text input's intrinsic width is wide enough to make
 * it: `min-width: 0` is what lets the field shrink past that instead.
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon__input input[type="text"] {
	border: 2px solid #e7e7e7;
	border-radius: 5px 0 0 5px;
	border-right: 0;
	color: #939393;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar button.wc-block-components-totals-coupon__button {
	border-radius: 0 5px 5px 0;
	flex: 0 0 auto;
	padding: 0 1.25rem;
}

/* Shipping options: stands in for ul#shipping_method. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-shipping .wc-block-components-radio-control__option {
	color: #444;
	font-weight: 400;
	line-height: 1.5em;
	margin-top: 8px;
	text-align: left;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-radio-control__label {
	font-size: 0.938em;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-radio-control__description {
	color: #626060;
	font-size: 0.875em;
	margin: 0;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-shipping__via,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-shipping-address-summary {
	color: #444;
	font-size: 0.938em;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-shipping__change-address-button {
	color: #444;
	font-size: 0.938em;
	line-height: 1;
	text-decoration: underline;
}

/*
 * Proceed to checkout: stands in for .checkout-button. The background colour
 * comes from the palette stylesheet (assets/sass/color/_color.scss). The
 * button ends the card, so it carries no rule and no margin under it.
 */
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.wp-block-woocommerce-cart a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart button.wc-block-cart__submit-button {
	border-radius: 10.438em;
	color: #fff;
	display: block;
	font-size: 0.938em;
	font-weight: 500;
	letter-spacing: -0.5px;
	margin-bottom: 0;
	padding: 0.867em;
	text-align: center;
	width: 100%;
}

.wp-block-woocommerce-cart a.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button:focus,
.wp-block-woocommerce-cart button.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart button.wc-block-cart__submit-button:focus {
	box-shadow: none;
	color: #fff;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-express-payment-block,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
	padding-left: 0;
	padding-right: 0;
}

/* --------------------------------------------------------------------------
 * 4. Cross-sells and empty cart
 * ----------------------------------------------------------------------- */

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block h2 {
	color: #090909;
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.5em;
}

.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
	color: #090909;
	font-size: 3.063em;
	font-weight: 300;
	line-height: 1.49em;
	margin-bottom: 1em;
	text-align: center;
}

/* --------------------------------------------------------------------------
 * 5. Responsive
 *
 * Two kinds of query, and which is which matters:
 *
 *   - `@container` on anything inside the main column measures that column,
 *     because of the container declared in section 2. That is what the row
 *     grid asks about, and it is the same 700px core switches its own desktop
 *     table on.
 *   - `@container` on the columns themselves measures the whole cart block,
 *     since an element is never its own container.
 * ----------------------------------------------------------------------- */

/*
 * Layout, in one tier. The design put the cart in a 12 column row: 8.5/3.5 from
 * lg up, and 9.20689655/2.79310345 from xxl up. WooCommerce ships 65/35 with a
 * 48px gutter; this brings back the theme's 8.5/3.5 and its 30px gutter.
 *
 * The xxl step is gone with the widths it was for: the block is capped at
 * 1440px in section 1, and 8.5/3.5 is what the design asks for at every width
 * up to that.
 */
@container (min-width: 700px) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main {
		padding-right: 30px;
		width: 70.8333333%;
	}

	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 29.1666667%;
	}

	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-cart__sidebar {
		padding: 2.5em;
	}
}

/*
 * The row grid. Below this core hides the header and stacks the row itself,
 * which is the design's own narrow layout, so none of this applies there.
 */
@container (min-width: 620px) {
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header,
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row {
		align-items: center;
		column-gap: var(--techmarket-cart-gap);
		display: grid;
		grid-template-columns: var(--techmarket-cart-columns);
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header {
		border-bottom: 1px solid #eceeef;
		display: grid;
		padding-bottom: 0.571em;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__remove-link {
		display: block;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row {
		border-bottom: 1px solid #eceeef;
		padding: 0.857em 0;
	}

	/* Label placement over the six tracks. */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-image {
		grid-column: 1 / 3;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-product {
		column-gap: var(--techmarket-cart-gap);
		display: grid;
		grid-column: 3 / 5;
		grid-template-columns: var(--techmarket-cart-col-price) var(--techmarket-cart-col-quantity);
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-product::before {
		content: var(--techmarket-cart-label-price, "");
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-product::after {
		content: var(--techmarket-cart-label-quantity, "");
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-total {
		grid-column: 5;
	}

	/*
	 * Flatten the product cell so the name, price, quantity and remove control
	 * it wraps become columns of the row instead of a stack inside one cell.
	 */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__product,
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__wrap,
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__quantity {
		display: contents;
	}

	/*
	 * Column 2 is the fallback, so anything core adds to the wrap that is not
	 * placed below stacks under the name rather than landing in a column it
	 * does not belong to.
	 */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__wrap > * {
		grid-column: 2;
	}

	/*
	 * The name sits on the first grid row so variation data can follow it;
	 * every other column spans whatever rows that produces, so each stays
	 * centred against the image.
	 */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__image,
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices,
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-quantity-selector,
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__total,
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__remove-link {
		grid-row: 1 / -1;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__image {
		grid-column: 1;
		padding: 0;
		padding-inline-end: var(--techmarket-cart-image-gap);
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-name {
		grid-column: 2;
		grid-row: 1;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__prices {
		grid-column: 3;
	}

	/*
	 * The control is held to the width the design gives it and the column is
	 * allowed to run wider, so what the column gains above that width is spent
	 * on the space between the control and the subtotal beside it.
	 */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-quantity-selector {
		grid-column: 4;
		max-width: 8.4375rem;
		width: 100%;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__total {
		grid-column: 5;
		padding: 0;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__remove-link {
		grid-column: 6;
		justify-self: end;
	}

	/*
	 * The loading skeleton. Core draws two bars inside the product cell -- one
	 * for the name and a shorter one for the line under it -- and no cells at
	 * all for the price or the quantity. Flattened into the row's grid they
	 * both land in the name column, one at the top of the row and the other at
	 * its foot, which reads as a product name over a description the cart does
	 * not show.
	 *
	 * They are placed as the name and the price instead, on the row's one line,
	 * so what loads is the shape the row settles into.
	 */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__wrap > .wc-block-components-skeleton__element {
		align-self: center;
		grid-row: 1 / -1;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-item__wrap > .wc-block-components-skeleton__element:nth-child(2) {
		grid-column: 3;
	}

	/*
	 * The quantity column has nothing of core's to place, so the row draws its
	 * own bar there, at the size and the corner the control settles at.
	 *
	 * The ground and the sweep across it are core's, copied rather than
	 * inherited: core sweeps each of its bars with a pseudo-element, and a
	 * pseudo-element cannot carry one of its own, so the gradient moves on this
	 * box itself. Keep the two in step if core's skeleton ever changes -- its
	 * own is `.wc-block-components-skeleton__element` in the block stylesheet.
	 */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row:has(.wc-block-components-skeleton__element)::after {
		align-self: center;
		animation: techmarket-cart-skeleton-shimmer 1.25s infinite;
		background-color: color-mix(in srgb, currentColor 5%, transparent);
		background-image: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 5%, transparent) 50%, transparent);
		background-position: 100% 0;
		background-size: 200% 100%;
		border-radius: 6px;
		content: "";
		grid-column: 4;
		grid-row: 1 / -1;
		height: 2.75rem;
		width: 8.4375rem;
	}

	/* Core stops its own sweep here; this one stops with it, ground and all. */
	@media (prefers-reduced-motion: reduce) {
		.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row:has(.wc-block-components-skeleton__element)::after {
			animation: none;
			background-image: none;
		}
	}

	/*
	 * A row is one grid row unless the product carries variation data, which
	 * opens a second underneath the name. Every other column spans both, so the
	 * two meet in the middle: pinning the name to the end of the first and the
	 * data to the start of the second sets them against each other there
	 * instead of leaving one adrift at the top and the other at the bottom.
	 *
	 * The :has() guard keeps a simple product out of it -- core renders the
	 * metadata wrapper either way, and with the description hidden it collapses
	 * to nothing.
	 */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row:has(.wc-block-components-product-metadata > *:not(.wc-block-components-product-metadata__description)) {
		grid-template-rows: 1fr 1fr;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row:has(.wc-block-components-product-metadata > *:not(.wc-block-components-product-metadata__description)) .wc-block-components-product-name {
		align-self: end;
	}

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-cart-items__row:has(.wc-block-components-product-metadata > *:not(.wc-block-components-product-metadata__description)) .wc-block-components-product-metadata {
		align-self: start;
	}
}

/*
 * The sweep the loading quantity bar above carries. Core's own keyframes move a
 * pseudo-element rather than a background, so they cannot be reused here.
 */
@keyframes techmarket-cart-skeleton-shimmer {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0 0;
	}
}

/* Below core's desktop switch the name carries the row, as the design does. */
@container (max-width: 619px) {
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items .wc-block-components-product-name {
		color: #444;
		font-size: 1em;
		font-weight: 500;
	}

}

@media (max-width: 542px) {
	.wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
		display: block;
	}

	.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input[type="text"] {
		border-radius: 5px;
		border-right: 2px solid #e7e7e7;
		width: 100%;
	}

	.wp-block-woocommerce-cart button.wc-block-components-totals-coupon__button {
		border-radius: 5px;
	}
}

@media (max-width: 575px) {
	.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
		font-size: 1.875em;
		line-height: 1.4em;
	}
}