/*
 * The block cart, and the order summary it shares with the checkout.
 *
 * WooCommerce renders both as React blocks, so there is no template to override
 * and no markup of ours to hang classes on — every selector here is one of
 * WooCommerce's own. That is a deliberate limit: styling only, never layout that
 * depends on a DOM shape we do not control.
 *
 * The cart page is styled to read like the cart drawer (cart.css): the same
 * type, the same caption-over-answer facts in pairs, the same bare stepper and
 * bin. A customer who has just closed the drawer should not land on a page
 * that presents the same four things in a different dialect.
 *
 * The checkout's order summary is the same card with the same rows and the
 * same facts, so those rules are written once and scoped to both pages with
 * :is(). What the checkout has and the cart does not — the form, the shipping
 * and payment options, the summary line without a stepper — lives in
 * checkout.css.
 */

/* --------------------------------------------------------- the page */

/*
 * A narrower page than Blocksy's wide block, with the summary card kept at
 * one fixed width: the room that goes is taken from the left column — the
 * lines on the cart page, the form at the checkout — which reads better
 * short. Every width here follows one token, so the title, the steps and the
 * block keep one left edge. WooCommerce splits the row 65/35 with a padding
 * inside each; here the sidebar is a fixed width and the main column takes
 * the rest, so the card measures the same on a laptop as on a wide monitor.
 *
 * Only while the layout has two columns: under 700px of container WooCommerce
 * stacks them at full width, and these rules step aside with it.
 */
/*
 * The cap is Blocksy's normal container, the width the home page's grid and
 * every content page already use — so the cart and the checkout have the
 * same side margins as the rest of the shop, not the wide block's.
 */
:root {
	--haft-zamowienie-max: var( --theme-normal-container-max-width, 1290px );
	--haft-zamowienie-karta: 440px;
	--haft-zamowienie-odstep: 48px;
}

/* The title follows in checkout.css, the steps in steps.css: both load later and would tie. */
article > .entry-content > :is( .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout ).alignwide {
	max-width: min( var( --theme-block-wide-max-width ), var( --haft-zamowienie-max ) );
}

@container ( min-width: 700px ) {
	/* Doubled class: .wc-block-cart is the row itself, and WooCommerce's rule is two classes deep. */
	:is( .wc-block-cart, .wc-block-checkout ) .wc-block-components-main.wc-block-components-main {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-right: 0;
	}

	.wc-block-cart .wc-block-cart__sidebar {
		flex: 0 0 var( --haft-zamowienie-karta );
		width: var( --haft-zamowienie-karta );
		margin-left: var( --haft-zamowienie-odstep );
	}

	.wc-block-checkout .wc-block-checkout__sidebar {
		flex: 0 0 calc( var( --haft-zamowienie-karta ) + var( --haft-zamowienie-odstep ) );
		width: calc( var( --haft-zamowienie-karta ) + var( --haft-zamowienie-odstep ) );
		padding-left: var( --haft-zamowienie-odstep );
	}
}

/* ------------------------------------------------------------------ lines */

/*
 * The lines sit on a white card of their own, the twin of the summary card:
 * two white panels on the linen page, the list and its sum. The gap between
 * them is the sidebar's margin (above), not a `gap` on the row: WooCommerce
 * sizes the row to fill exactly, and a gap on top of that overflowed it and
 * dropped the summary onto a second line.
 *
 * The block is the <table> itself. A table honours padding only in the
 * separated-borders model, which WooCommerce's stylesheet already selects
 * (border-spacing: 0); it is restated here so the card does not depend on
 * that staying true. The background needs !important, the only one in this
 * file: WooCommerce resets the table with `background: none !important` to
 * shield it from theme table styles, and nothing short of the same wins.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items {
	border-collapse: separate;
	border-spacing: 0;
	background: var( --haft-biel ) !important;
	border-radius: var( --haft-radius-karta );
	padding: 26px 0;
}

/*
 * The header row ("Produkt / Szczegóły / Łącznie") repeats what each line
 * already says; the table keeps its <thead> for screen readers and loses it
 * on screen. WooCommerce already does this below its own breakpoint.
 */
.wc-block-cart__main .wc-block-cart-items thead {
	display: none;
}

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

.wc-block-cart__main .wc-block-cart-items td,
.wc-block-cart__main .wc-block-cart-items td:last-child {
	border: 0;
	padding: 0;
}

/*
 * One line is a grid of two columns: the photo, and everything else. The
 * line total is placed in the second column too, in the same row as the
 * product cell, and pinned to its top-right corner — the two cells overlap,
 * which is fine, because the total is sized to its own text and the product
 * name below keeps clear of that corner with a max-width. This is what puts
 * the price top-right and the bin bottom-right of the same edge, as in the
 * drawer, out of a table whose cells we cannot reorder.
 *
 * WooCommerce's own small-screen rule makes the row a grid as well, with a
 * fixed 80px + 132px template; the selector below outranks it on purpose.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 120px minmax( 0, 1fr );
	column-gap: 36px;
	align-items: stretch;
	padding: 24px 26px;
	border-bottom: 1px dashed var( --haft-szew );
}

/*
 * The card's padding is vertical only; the rows carry the side padding, so
 * the seam between two lines runs from edge to edge of the card. The first
 * and last rows drop the padding the card already gives them, or the last
 * line would sit over a blank band twice the height of any other gap.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row:first-child {
	padding-top: 0;
}

.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * The photo is a square at the top of the line, whatever runs beside it. An
 * earlier version stretched it to the line's full height, which turned a
 * product photo into a tall crop the moment a line had five facts and a
 * note — the photo should look like the product, not like a column.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	padding: 0;
	position: relative;
}

/*
 * The count on the photo's corner, in thread red — the same mark the drawer
 * and the checkout summary carry. Written by cart-summary.js from the row's
 * own stepper, since WooCommerce prints no such mark on the cart page.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .haft-ile {
	position: absolute;
	top: -8px;
	right: -8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid var( --haft-biel );
	border-radius: 11px;
	background: var( --haft-mulina );
	color: var( --haft-kreda );
	font-family: var( --haft-font-display );
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 18px;
}

.wc-block-cart__main .wc-block-cart-item__image > a {
	display: block;
}

.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: var( --haft-radius );
	border: 1px solid var( --haft-szew );
}

.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2;
	grid-row: 1;
	padding: 0;
	min-width: 0;
}

.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	padding: 0;
	font-family: var( --haft-font-display );
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --haft-atrament );
	line-height: 1.2;
}

.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	gap: 0;
	height: 100%;
}

/* Keeps the name out of the corner the total sits in. */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	max-width: calc( 100% - 120px );
	font-family: var( --haft-font-display );
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --haft-atrament );
	text-decoration: none;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-name:hover {
	color: var( --haft-mulina );
}

/*
 * The unit price under the name goes: the line total on the right is the
 * figure that matters here, and the drawer shows only that too.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	display: none;
}

/*
 * The facts, laid out as in the drawer: caption over answer, two to a row,
 * a pair dropping to one under the other when a value is too long to share
 * the row (see cart.css for the fit-content mechanism).
 *
 * WooCommerce prints them as inline spans joined by " / " separators; the
 * separators are aria-hidden and are the only aria-hidden children, so that
 * attribute is how they are removed. Each fact's class is the label's slug
 * (…__rozmiar, …__tekst-haftu), which is what the full-width rows hang on.
 * The slug is WooCommerce's kebab-case of the Polish label with non-ASCII
 * letters struck out, so "Krój haftu" becomes …__kr-j-haftu — a class here
 * has to be copied from the rendered page, not derived from the label.
 *
 * The variation attributes (Rozmiar, Kolor) and the embroidery arrive as two
 * separate details containers, embroidery first. The drawer reads garment
 * first, so the metadata wrapper becomes a column and its last container
 * goes to the top.
 */
:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-metadata {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-metadata .wc-block-components-product-details:last-child {
	order: -1;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details.wc-block-components-product-details {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	width: 100%;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details > span {
	display: flex;
	flex-direction: column;
	flex: 1 1 40%;
	min-width: fit-content;
	max-width: 100%;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details > span > [aria-hidden] {
	display: none;
}

/*
 * Size before colour whatever order the product stores its attributes in —
 * the same fix Haft_Woo::order_rows() applies to the drawer, done in CSS
 * because the block builds this list from the variation, not from item data.
 */
:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details__rozmiar {
	order: -1;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details__tekst-haftu,
:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details__uwagi-do-haftu {
	flex-basis: 100%;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details__name {
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a919e;
}

:is( .wc-block-cart__main, .wc-block-components-order-summary ) .wc-block-components-product-details__value {
	font-weight: 600;
	color: var( --haft-atrament );
}

/*
 * Stepper at the left, bin at the right, both at the bottom of the line:
 * margin-top: auto in a column flex wrap that is as tall as the row.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	align-self: stretch;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
}

.wc-block-cart__main .wc-block-components-quantity-selector {
	width: auto;
	border: 0;
	border-radius: 0;
	gap: 6px;
}

.wc-block-cart__main .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-width: 36px;
	font-size: 1rem;
	font-weight: 500;
	color: var( --haft-atrament );
}

.wc-block-cart__main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 28px;
	font-size: 1.25rem;
	line-height: 1;
	opacity: 1;
	color: var( --haft-atrament );
}

.wc-block-cart__main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.35;
}

.wc-block-cart__main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus:not( :disabled ):hover {
	color: var( --haft-mulina );
}

.wc-block-cart__main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus:not( :disabled ):hover {
	color: #2e7d4f;
}

/*
 * The bin, as in the drawer: grey until pointed at, then red on a red wash.
 * WooCommerce gives the button a fixed 24px box; with padding added on a
 * border-box that left 8px for the icon, which vanished. The box follows
 * its content instead.
 */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__remove-link {
	display: inline-flex;
	width: auto;
	height: auto;
	padding: 8px;
	margin: 0 -8px 0 0;
	border: 0;
	border-radius: var( --haft-radius-karta );
	background: none;
	color: #8a919e;
	line-height: 0;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__remove-link svg {
	fill: currentColor;
}

.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__remove-link:hover,
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__remove-link:focus-visible {
	color: var( --haft-mulina );
	background: rgba( 196, 30, 58, 0.09 );
}

/* -------------------------------------------------------------- summary */

/*
 * The summary is one white card, and nothing inside it is a card.
 *
 * On the cart page the card is the whole sidebar, so the checkout button
 * lives inside it with the totals it acts on — WooCommerce renders the
 * button as a sibling of the summary block, and a card that stopped above
 * it read as two unrelated things. White alone separates the card from the
 * linen page, so the border WooCommerce draws is removed rather than
 * restyled — an outline on top of a colour change is one signal too many.
 *
 * The checkout keeps the narrower selector: there the summary block is the
 * card, and the earlier attempt at `.wc-block-components-totals-wrapper`
 * grew three nested cards, because that class also sits on the cart-items
 * and subtotal blocks. Only the block that IS the summary is named.
 *
 * Two classes on the cart selector, not one: below its breakpoint WooCommerce
 * zeroes the sidebar's padding with a two-class rule of its own, and a
 * one-class rule here lost to it — the card's text touched its edges on a
 * phone.
 */
.wc-block-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var( --haft-biel );
	border: 0;
	border-radius: var( --haft-radius-karta );
	padding: 26px;
}

.wc-block-cart .wc-block-cart__sidebar {
	align-self: start;
}

.wc-block-cart :is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-cart__totals-title {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-family: var( --haft-font-display );
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var( --haft-atrament );
}

/*
 * One rule, one line. WooCommerce draws a border on every totals wrapper,
 * and the coupon below adds its own dashed one, so the shipping row ended
 * up with two lines under it. The wrappers lose theirs; the dashed line
 * over the coupon is the only separator, and it marks the only thing in
 * the card that is not a sum.
 */
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-wrapper {
	border: 0;
	padding: 0;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-item {
	padding: 9px 0;
	font-size: 1rem;
	color: var( --haft-atrament );
}

/*
 * The products row is written by assets/js/cart-summary.js, always, and
 * WooCommerce's own subtotal block — which comes and goes with the shipping
 * cost — is hidden so the card never shows the figure twice or not at all.
 */
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wp-block-woocommerce-cart-order-summary-subtotal-block {
	display: none;
}

/*
 * No shipping row on the cart page. Delivery is chosen on the next page,
 * together with the address and the payment, and a row that named a carrier
 * here — "via Kurier", with a price — announced a choice the customer had not
 * made yet. The row cannot be dropped from the page's content: WooCommerce's
 * Cart block type rewrites the summary's inner blocks server-side into its
 * own fixed list (Cart.php, $order_summary_with_inner_blocks), which includes
 * shipping whatever the document says. Hidden, then.
 */
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wp-block-woocommerce-cart-order-summary-shipping-block {
	display: none;
}

/*
 * The products row first and the total last. cart-summary.js inserts them at
 * the two ends of the block, and this keeps them there if React ever
 * re-mounts its own rows around them.
 */
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wp-block-woocommerce-cart-order-summary-totals-block {
	display: flex;
	flex-direction: column;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .haft-suma {
	order: -1;
}

.wc-block-cart__sidebar .haft-razem {
	order: 10;
}

/*
 * The cart's total is the products alone (see cart-summary.js). WooCommerce's
 * footer row, with the default rate in it, goes — but only once the script's
 * row is there to replace it, so a page without the script still says what
 * it costs. WooCommerce renders its row after the totals block, not in it,
 * as a totals item carrying the footer class; the script's row carries that
 * class on its wrapper, so the pair of classes names WooCommerce's alone.
 */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block:has( .haft-razem ) .wc-block-components-totals-item.wc-block-components-totals-footer-item {
	display: none;
}

/*
 * "Razem" over a one-line note that delivery is the next page's business —
 * the note in the same small grey as the captions on the lines, under the
 * label, with the amount kept up on the label's row.
 */
.wc-block-cart__sidebar .haft-razem .wc-block-components-totals-item {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	column-gap: 10px;
	align-items: start;
}

.wc-block-cart__sidebar .haft-razem .wc-block-components-totals-item__label {
	grid-column: 1;
	grid-row: 1;
}

.wc-block-cart__sidebar .haft-razem .wc-block-components-totals-item__value {
	grid-column: 2;
	grid-row: 1;
}

.wc-block-cart__sidebar .haft-razem .wc-block-components-totals-item__description {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	font-family: var( --haft-font-body );
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.4;
	color: #8a919e;
}

/*
 * The discount row reads like the rows around it: "Rabat" on the left, the
 * amount on the right. The code that earned it goes under the label as a
 * caption — the same small grey uppercase the line facts use — with its
 * remove button beside it. WooCommerce renders the code as a bordered chip
 * between label and amount, which made this one row twice the height of its
 * neighbours and put a button in the middle of a column of figures.
 *
 * With a coupon on, the "Dodaj kupony" panel goes — one code is what the
 * owner hands out, and a second box under a discount that is already showing
 * reads as an invitation to stack.
 */
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-discount {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	column-gap: 10px;
	align-items: start;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-discount .wc-block-components-totals-item__label {
	grid-column: 1;
	grid-row: 1;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	grid-column: 2;
	grid-row: 1;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-discount .wc-block-components-totals-item__description {
	grid-column: 1;
	grid-row: 2;
	margin: -2px 0 0;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-discount__coupon-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-discount__coupon-list .wc-block-components-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	line-height: 1;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a919e;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #8a919e;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-chip__remove:hover,
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-chip__remove:focus-visible {
	color: var( --haft-mulina );
	background: rgba( 196, 30, 58, 0.09 );
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-chip__remove svg {
	display: block;
	width: 12px;
	height: 12px;
	fill: currentColor;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ):has( .wc-block-components-totals-discount ) .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	display: none;
}

/* The sum is set apart from the rows it sums by the card's one solid line. */
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-footer-item {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var( --haft-szew );
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var( --haft-font-display );
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The coupon sits last among the rows, and reads as a quiet aside rather than a second form. */
.wc-block-components-totals-coupon {
	border-top: 1px dashed var( --haft-szew );
	padding-top: 14px;
	margin-top: 8px;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: 0.82rem;
	font-weight: 400;
	color: #5c6474;
}

/*
 * A refused code is answered the way the visualizer answers a bad embroidery
 * text: one short red line under the field, no icon. The wording is the
 * theme's too (inc/coupon.php). WooCommerce pulls the line up into the form
 * with a negative margin and pads it to 28px for an icon it no longer has.
 */
.wc-block-components-totals-coupon .wc-block-components-validation-error {
	margin: 0;
}

.wc-block-components-totals-coupon .wc-block-components-validation-error > p {
	display: block;
	min-height: 0;
	margin: 0;
	padding: 6px 0 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: #b3222a;
}

.wc-block-components-totals-coupon .wc-block-components-validation-error svg {
	display: none;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-cart__submit {
	margin: 18px 0 0;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-cart__submit-button {
	padding: 15px 18px;
	border: 0;
	border-radius: var( --haft-radius );
	background: var( --haft-mulina );
	color: var( --haft-kreda );
	font-family: var( --haft-font-display );
	font-size: 1rem;
	font-weight: 700;
	transition: background 0.15s;
}

:is( .wc-block-cart__sidebar, .wp-block-woocommerce-checkout-order-summary-block ) .wc-block-cart__submit-button:hover {
	background: var( --haft-atrament );
	color: var( --haft-kreda );
}

@media ( min-width: 1000px ) {
	.wc-block-cart__sidebar {
		position: sticky;
		top: 160px;
	}
}

/*
 * Below its own container query WooCommerce stacks the two columns, and the
 * padding that separated them becomes a dead margin down the right-hand side.
 */
@media ( max-width: 999px ) {
	.wc-block-cart .wc-block-components-main {
		margin-bottom: 34px;
	}
}

/*
 * A phone has no room for a 120px photo beside two columns of facts, nor for
 * 26px of card on each side of them.
 */
@media ( max-width: 600px ) {
	.wc-block-cart .wc-block-cart__main table.wc-block-cart-items {
		padding: 16px 0;
	}

	.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 88px minmax( 0, 1fr );
		column-gap: 14px;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/*
 * The price a rate used to cost, next to the zero it costs now.
 *
 * Nothing here styles WooCommerce's own "BEZPŁATNIE": the class its stylesheet
 * defines for a zero-cost rate (…__package__description--free) is not on the
 * page in this version — checked, not assumed — and the only class that is
 * carries the price of paid rates too, so colouring it would turn 15,00 zl
 * green as well.
 */
.haft-stara-cena {
	margin-left: 8px;
	color: #8a919e;
	font-weight: 400;
}