/*
 * Cart, checkout and order confirmation.
 *
 * Sections:
 *   1. Page frame
 *   2. Cart lines
 *   3. Quantity and remove
 *   4. Summary panel, totals and coupon
 *   5. Empty cart
 *   6. Checkout form
 *   7. Shipping and payment options
 *   8. Terms, notes and the order button
 *   9. Order confirmation, and the same order seen from the customer's account
 *
 * Written in English per the language contract in CLAUDE.md §2. Values come from
 * theme.json through the aliases in base.css; nothing here defines a colour, a size
 * or a spacing step of its own.
 *
 * WHAT THIS FILE IS UP AGAINST.
 *
 * The cart and checkout are WooCommerce's Cart and Checkout Blocks: React, rendered
 * in the browser, with a class vocabulary of their own (`wc-block-…`). Styling them
 * means writing against those class names, which is the surface WooCommerce documents
 * for themes and the only one there is — there is no template to override that would
 * be any safer, and overriding one is ruled out by ARCHITECTURE.md §2 anyway. The
 * risk that a WooCommerce release renames a class is real and is recorded in
 * ARCHITECTURE.md; the mitigation is that the commerce suite drives the real cart and
 * checkout, so a rename fails a test instead of quietly unstyling a page.
 *
 * The rule from ARCHITECTURE.md §15 applies here as it did on the product page: where
 * the plugin declares the same property on the same element, match its selector shape
 * rather than reaching for !important. Each such rule below names the declaration it
 * is answering.
 */

/* ==========================================================================
   1. Page frame
   ========================================================================== */

/*
 * The cart and checkout are ordinary pages, so page.php wraps them in .zu-prose —
 * which puts a vertical rhythm between every top-level child. The block's own layout
 * already spaces its parts, and the two together left the sidebar floating away from
 * the lines beside it.
 */
.woocommerce-cart .zu-entry__content > .wp-block-woocommerce-cart,
.woocommerce-checkout .zu-entry__content > .wp-block-woocommerce-checkout {
	margin-block-start: 0;
}

/*
 * Both blocks carry `alignwide`, which in a classic theme means nothing until the
 * theme says what it means. Here it means: do not go wider than the page container.
 */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
	max-width: 100%;
	margin-inline: 0;
}

/*
 * The two-column split is WooCommerce's and is left alone deliberately. It is a flex
 * row of 65% and 35%, with the gutter made out of percentage padding on the two
 * children. Replacing that padding with a `gap` — which is what the storefront's
 * spacing scale would have wanted — pushes the pair past 100% and wraps the summary
 * under the cart lines. Measured, not reasoned about: the sidebar dropped below the
 * table and left a column of empty page beside it.
 *
 * What is changed is where it stops being two columns. WooCommerce keeps the split
 * down to a 699 px container, which on a 768 px tablet leaves the summary 247 px
 * wide — measured by a review: the heading broke over three lines and every total put
 * its label and its amount on separate rows. The panel read worse at 768 than at 390,
 * where it is full width. One column until there is room for two.
 */
@media (max-width: 61.99rem) {
	.wc-block-components-sidebar-layout {
		flex-direction: column;
	}

	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 100%;
		padding: 0;
	}

	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		margin-block-start: var(--zu-space-4);
	}
}

/* ==========================================================================
   2. Cart lines
   ========================================================================== */

/*
 * Answers `table.wc-block-cart-items .wc-block-cart-items__header { text-transform:
 * uppercase }` — kept, but in the storefront's label style rather than the plugin's
 * small grey.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header th {
	padding-block-end: var(--zu-space-2);
	border-block-end: 1px solid var(--zu-line);
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-label);
	font-weight: 500;
	letter-spacing: 0.08em;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	border-block-end: 1px solid var(--zu-line);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
	padding-block: var(--zu-space-3);
}

/* The product photograph gets the same frame as the catalogue card. */
.wc-block-cart-item__image img {
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface-2);
}

/*
 * Answers `.wc-block-cart-items__row .wc-block-components-product-name { font-size:
 * small; font-weight: 500 }`. The product name is the line a customer reads first.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
	font-weight: 500;
	text-decoration: none;
}

.wc-block-cart-items__row .wc-block-components-product-name:hover {
	color: var(--zu-accent-deep);
	text-decoration: underline;
}

.wc-block-components-product-metadata,
.wc-block-components-product-details {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

/*
 * The short description repeats what the product page already said and pushes the
 * quantity control below the fold on a phone. The variation — which line of the cart
 * this actually is — stays.
 */
.wc-block-cart-item__wrap .wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
	font-weight: 500;
}

.wc-block-cart-item__prices del,
.wc-block-components-product-price__regular {
	color: var(--zu-ink-muted);
}

/* The saving badge, in the same shape the catalogue card uses for a sale. */
.wc-block-components-product-badge.wc-block-components-sale-badge {
	display: inline-block;
	margin-block-start: var(--zu-space-1);
	padding: 0.15rem 0.5rem;
	border: 0;
	border-radius: var(--zu-radius-pill);
	background-color: var(--zu-blush);
	color: var(--zu-accent-deep);
	font-size: var(--zu-text-label);
	font-weight: 500;

	/*
	 * WooCommerce leaves this at `nowrap`, and it is the direct cause of the cart
	 * overflowing a 390 px viewport: the badge's own width sets the width of the
	 * grid column it lands in, and "Oszczędzasz 16,00 zł" measures 127 px.
	 */
	white-space: normal;
}

/*
 * On a wide cart the total column has room, and a badge broken over two lines beside
 * a one-line price reads as a mistake. The wrap is only needed where the width is.
 */
.wc-block-cart.is-large .wc-block-components-product-badge.wc-block-components-sale-badge {
	white-space: nowrap;
}

/* Answers `.wc-block-cart-items__header-total { width: 100px }` — enough for the badge. */
.wc-block-cart.is-large table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-total {
	width: 150px;
}

/*
 * THE SMALL-SCREEN CART.
 *
 * WooCommerce switches the line to `grid-template-columns: 80px 132px` and places
 * only some of the cells, so the total and the sale badge fall into implicit columns
 * sized by their content. Measured at 390 px: four columns of 80 + 132 + 87 + 51,
 * three 16 px gaps, a table 402 px wide inside a 358 px container and 28 px of
 * horizontal document overflow. A wide desktop table with a scrollbar is exactly what
 * a mobile cart must not be.
 *
 * The answer is an explicit grid with every cell placed. The image holds the first
 * column, and the second can shrink — `minmax(0, 1fr)`, because a plain `1fr` is
 * `minmax(auto, 1fr)` and refuses to go below its content's width, which is how this
 * class of overflow usually survives a fix.
 *
 * Below 26rem it becomes two columns; see the block further down and the reason
 * written there.
 */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 72px minmax(0, 1fr) minmax(0, auto);
	column-gap: var(--zu-space-2);
	row-gap: var(--zu-space-1);
	padding-block: var(--zu-space-3);
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1;
	padding-right: 0;
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

/*
 * The line total keeps the place it has on a wide screen — top right of its own line
 * — instead of falling into an implicit fourth column. A third explicit column sized
 * `auto` is what it needs, and it cannot push the row wide, because the column beside
 * it is the one that gives way.
 */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	max-width: 8rem;
	text-align: right;
}

.wc-block-cart.is-mobile .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart.is-small .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart.is-medium .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	align-items: flex-end;
}

/*
 * THE NARROWEST SCREENS GET TWO COLUMNS, NOT THREE.
 *
 * §18.8 recorded the 390 px and 320 px lines as fixed because the document stopped
 * overflowing. It did — and an independent review then measured what the numeric
 * assertion could not see: at 320 the three columns resolve to 72 / 52 / 128, because
 * the saving badge's longest word sets the third column and the name column takes
 * what is left. "Baza hybrydowa Soak Off Gel 14 ml" wrapped to seven lines, breaking
 * mid-word, in a row 361 px tall. No overflow, and unreadable.
 *
 * Below 26rem the total moves under the name instead of competing with it for width,
 * which gives the name the whole column. A check that only asks about `scrollWidth`
 * cannot see this, so `tests/commerce.js` now measures the name column too.
 */
@media (max-width: 25.99rem) {
	/*
	 * The state classes are repeated here on purpose. A media query contributes no
	 * specificity, so `.wc-block-cart …` at (0,3,1) loses to the `.is-mobile` rule
	 * above at (0,4,1) — which is exactly what happened: the first version of this
	 * block changed nothing at all, and the suite reported a 52 px column and a
	 * sixteen-line product name at 320.
	 */
	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-row: 1 / span 2;
	}

	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2;
		grid-row: 2;
		max-width: none;
		justify-self: end;
	}

	.wc-block-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--zu-space-1);
		align-items: center;
		justify-content: flex-end;
	}
}

/*
 * The sticky order bar on phones. WooCommerce fixes it to the bottom of the viewport
 * with `background: #fff` and a grey shadow — a white slab under a cream page. The
 * behaviour is right and is kept; only the paint is the theme's.
 *
 * Nothing is reserved underneath it, and that is correct rather than an oversight:
 * WooCommerce drops the sticky class as soon as the real button scrolls into view, so
 * the foot of the page is never covered. Checked by scrolling to the bottom.
 */
.wc-block-cart .wc-block-cart__submit-container--sticky {
	border-block-start: 1px solid var(--zu-line);
	background: var(--zu-surface);
	padding: var(--zu-space-2) var(--zu-gutter);
}

.wc-block-cart .wc-block-cart__submit-container--sticky::before {
	content: none;
}

/* ==========================================================================
   3. Quantity and remove
   ========================================================================== */

/*
 * The same control as the product page, so the number a customer changed there and
 * the number they change here look like one control rather than two.
 */
.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	gap: var(--zu-space-1);
	width: auto;
	border: 0;
	border-radius: 0;
}

/* Answers `.wc-block-components-quantity-selector__button { …border… }`. */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	flex: none;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface);
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
	line-height: 1;
	opacity: 1;
}

.wc-block-components-quantity-selector__button:hover:not([disabled]) {
	border-color: var(--zu-accent-deep);
	color: var(--zu-accent-deep);
}

.wc-block-components-quantity-selector__button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/*
 * The stepper and the remove control share a row, and at 320 px there is not room
 * for both: measured, the pair came to 232 px inside a 200 px column and pushed the
 * document 18 px wide. Wrapping is the fix rather than shrinking, because flex only
 * wraps when it must.
 *
 * "Costs nothing above 320", which an earlier version of this comment claimed, was
 * wrong and a review measured it: the two are on separate rows at 320, 360, 390, 414
 * and 768, and share one only at 1440. That is a consequence of the column being
 * narrow on a phone, not of this rule, and it is the right trade — but the comment
 * should not have said otherwise.
 */
.wc-block-cart-items__row .wc-block-cart-item__quantity {
	flex-wrap: wrap;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	width: 3.5rem;
	min-height: 44px;
	padding-inline: 0.25rem;
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface);
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
	text-align: center;
}

/*
 * The remove control is a 24 px icon in WooCommerce, which is well under the 44 px
 * this project holds every pointer target to — and it is the one destructive action
 * on the page, so it is the worst place to be imprecise. Answers
 * `…__quantity .wc-block-cart-item__remove-link { height: 24px; width: 24px }`.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--zu-radius-sm);
	color: var(--zu-ink-soft);
}

.wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	background-color: var(--zu-blush);
	color: var(--zu-accent-deep);
}

.wc-block-cart-item__remove-link svg {
	width: 20px;
	height: 20px;
}

/*
 * ONE FOCUS INDICATOR ON THIS PAGE, NOT THREE.
 *
 * A review counted three treatments on the checkout: the theme's 2 px burgundy
 * outline on most things, a 1 px inset ink shadow on the quantity stepper, and — on
 * the two most important buttons in the shop, "Przejdź do płatności" and "Kupuję i
 * płacę" — WooCommerce's `outline: 3px solid transparent` plus a WordPress-admin blue
 * `box-shadow` ring. It passes contrast at 4.40:1, and it is the wrong blue on a
 * burgundy and cream storefront.
 *
 * The transparent outline is why the theme's own `:focus-visible` rule did not simply
 * win: an outline is declared, so there is one to override rather than one to add.
 * `--zu-focus-*` is the single contract for the whole interface (base.css §9) and
 * these controls now honour it.
 */
.wc-block-components-button:focus-visible,
.wc-block-components-quantity-selector__button:focus-visible,
.wc-block-components-quantity-selector__input:focus-visible,
.wc-block-cart-item__remove-link:focus-visible,
.wc-block-components-chip__remove:focus-visible,
.wc-block-components-panel__button:focus-visible {
	outline: var(--zu-focus-width) solid var(--zu-focus-color);
	outline-offset: var(--zu-focus-offset);
	box-shadow: none;
}

/* ==========================================================================
   4. Summary panel, totals and coupon
   ========================================================================== */

.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	background-color: var(--zu-surface);
}

/*
 * The cart selector carries `.wc-block-cart` and the checkout one does not, and that
 * asymmetry is a specificity answer rather than an oversight.
 *
 * WooCommerce ships `.wc-block-cart .wc-block-cart__totals-title { font-family: inherit;
 * font-size: var(--wp--preset--font-size--small, 14px); font-weight: 500; text-transform:
 * uppercase }` at (0,2,0). The rule below was (0,1,0) and lost — but only above
 * WooCommerce's own "large" breakpoint, because the heading is hidden below it. So the
 * cart's summary title rendered in the display serif on a phone and in small uppercase
 * sans on a laptop, while the checkout's equivalent heading on the very next screen
 * stayed serif at both. Two panels meant to be the same component, disagreeing on a money
 * screen. Measured by an independent review with `CSS.getMatchedStylesForNode`.
 *
 * Matching the plugin's selector shape rather than reaching for `!important` is
 * `ARCHITECTURE.md` §15's rule, and this is the eleventh collision answered that way.
 */
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title {
	margin-block-end: var(--zu-space-2);
	color: var(--zu-ink);
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-lead);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * WooCommerce hides the cart summary heading below its "large" breakpoint. The panel
 * then opens with a coupon row and no explanation of what the numbers under it are.
 */
.wc-block-cart:not(.is-large) .wc-block-cart__totals-title {
	display: block;
}

.wc-block-components-totals-wrapper {
	padding-block: var(--zu-space-2);
	border-block-start: 1px solid var(--zu-line);
}

.wc-block-components-totals-wrapper:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.wc-block-components-totals-item {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

.wc-block-components-totals-item__label {
	font-weight: 400;
}

.wc-block-components-totals-item__value {
	color: var(--zu-ink);
	font-weight: 500;
}

.wc-block-components-totals-footer-item {
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 500;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
	font-size: var(--zu-text-lead);
	font-weight: 500;
}

/* A discount is a saving; it reads as one. */
.wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: var(--zu-success);
}

/*
 * The coupon disclosure. WooCommerce builds it as a div with role="button", so it is
 * keyboard-operable but has no button affordance of its own and no height.
 */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: flex;
	align-items: center;
	gap: var(--zu-space-1);
	width: 100%;
	min-height: 44px;
	padding: 0;
	color: var(--zu-ink);
	font-size: var(--zu-text-sm);
	font-weight: 500;
	text-align: start;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
	color: var(--zu-accent-deep);
}

.wc-block-components-panel__button-icon {
	flex: none;
	fill: currentColor;
}

.wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zu-space-2);
	align-items: flex-start;
	margin-block-start: var(--zu-space-2);
}

.wc-block-components-totals-coupon__input {
	flex: 1 1 10rem;
	min-width: 0;
}

.wc-block-components-totals-coupon__button {
	flex: none;
	min-height: 44px;
}

/* The applied coupon chip. */
.wc-block-components-chip {
	position: relative;
	border-color: var(--zu-line);
	background-color: var(--zu-blush);
	color: var(--zu-accent-deep);
}

/*
 * Removing a coupon is the destructive action of the summary panel, and WooCommerce
 * draws it at 24 x 24. §18.8 already made this argument for the line-remove control;
 * a review pointed out that the same argument had not been carried here.
 *
 * The target grows without the chip growing: the visible mark stays 24 px and an
 * invisible pseudo-element carries the extra reach out to 44. Enlarging the button
 * itself would inflate a chip that has to sit inline with the coupon's name.
 */
.wc-block-components-chip__remove {
	position: relative;
	min-width: 24px;
	min-height: 24px;
}

.wc-block-components-chip__remove::after {
	content: '';
	position: absolute;
	inset: -10px;
}

/* The main action of the cart page. */
.wc-block-cart__submit-container .wc-block-cart__submit-button {
	width: 100%;
	min-height: 48px;
}

.wc-block-cart__submit {
	margin-block-start: var(--zu-space-3);
}

/*
 * Rendered after the block by zakatek_cart_continue_shopping().
 *
 * The link is a pointer target like any other, so it gets the project's 44 px. It
 * measured 122 x 18 under a coarse pointer until a review pointed out that
 * `commerce.css` had no coarse-pointer rules at all — every 44 px on this page came
 * from an explicit `min-height`, and this control had none.
 */
.zu-cart-continue {
	margin-block-start: var(--zu-space-4);
	font-size: var(--zu-text-sm);
}

.zu-cart-continue a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--zu-ink-soft);
}

.zu-cart-continue a:hover {
	color: var(--zu-accent-deep);
}

/*
 * An empty cart already offers its own way back to the shop, so the link above would
 * be the second one on the page. `:has()` is how the sheet asks which of the two
 * states the block settled into, because the cart can empty after the page loaded.
 */
.wp-block-woocommerce-cart:not(:has(.wp-block-woocommerce-filled-cart-block)) ~ .zu-cart-continue {
	display: none;
}

/* ==========================================================================
   5. Empty cart
   ========================================================================== */

/*
 * WooCommerce's empty cart opens with a large crying face. It belongs to a different
 * shop's voice, and an empty cart is not a misfortune — it is the normal state of a
 * customer who has not chosen anything yet. Answers
 * `.wc-block-cart__empty-cart__title.with-empty-cart-icon::before`, which is where
 * the icon comes from.
 */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: none;
}

.wc-block-cart__empty-cart__title {
	margin-block-end: var(--zu-space-2);
	color: var(--zu-ink);
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-h2);
	font-weight: 400;
}

.zu-cart-empty__actions {
	margin-block-end: var(--zu-space-5);
	text-align: center;
}

/*
 * The dotted separator and the "new in store" grid are page content, not theme
 * markup: they are the empty-cart block's inner blocks and the shop owner can remove
 * them in the editor. What the theme does is make them look like the storefront.
 */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	color: var(--zu-ink-muted);
}

.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-h2);
	font-weight: 400;
}

/*
 * The "new in store" grid is the Products block, not the storefront's own card, and
 * it will not become one: rebuilding it would mean either replacing page content the
 * shop owner can edit or copying `shop.css` into a second card. What it gets instead
 * is the storefront's typography, so it reads as the same shop rather than the same
 * layout.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	color: var(--zu-ink);
	font-size: var(--zu-text-sm);
	font-weight: 500;
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover {
	color: var(--zu-accent-deep);
	text-decoration: underline;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	border-radius: var(--zu-radius-sm);
}

/* ==========================================================================
   6. Checkout form
   ========================================================================== */

.wc-block-checkout__form .wc-block-components-checkout-step {
	padding-block: var(--zu-space-3);
	border-block-start: 1px solid var(--zu-line);
}

.wc-block-checkout__form .wc-block-components-checkout-step:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.wc-block-components-checkout-step__title {
	color: var(--zu-ink);
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-lead);
	font-weight: 400;
}

.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

/*
 * The block's own text inputs. `base.css` already styles `input[type=…]`, and these
 * inherit it — what is left is the floating label the blocks put on top, which needs
 * the same padding to sit where the text does.
 */
.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='tel'],
.wc-block-components-text-input input[type='number'] {
	min-height: 52px;
	padding-block: 1.35rem 0.4rem;
}

.wc-block-components-text-input label {
	color: var(--zu-ink-muted);
	font-size: var(--zu-text-sm);
}

.wc-block-components-text-input.is-active label {
	font-size: var(--zu-text-label);
}

.wc-block-components-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-text-input {
	margin-block-start: var(--zu-space-2);
}

/* Answers the plugin's `.wc-block-components-combobox` wrapper around a select. */
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	min-height: 52px;
	padding-block: 1.35rem 0.4rem;
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface);
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
}

/*
 * Validation.
 *
 * The contract in ARCHITECTURE.md §13 has two halves and the blocks get one of them
 * right. Colour is never the only carrier — the message text is mandatory and the
 * field carries `aria-invalid`, which the blocks do set. The binding between the two
 * they do not: `assets/js/commerce.js` supplies it, for the reason written there.
 *
 * The other half of §13 is that this project has exactly one error colour. The brand
 * burgundy is it, and "nie tworzymy drugiej czerwieni" is a rule, not a preference.
 * The first version of this rule was (0,2,1) against the plugin's
 * `.wc-block-components-form .wc-block-components-text-input.has-error input` at
 * (0,3,1), so it never applied and the checkout rendered WooCommerce's `#cc1818` on
 * the border and on the floated label — a second red, on the page where being calm
 * matters most. Measured by an independent review, not noticed by eye: the message
 * underneath was the theme's burgundy while the field around it was not.
 *
 * Answered the way §15 prescribes — the plugin's selector shape, matched.
 */
.wc-block-components-form .wc-block-components-text-input.has-error input,
.wc-block-components-form .wc-block-components-text-input input[aria-invalid='true'],
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input input[aria-invalid='true'] {
	border-color: var(--zu-accent-deep);
	border-width: 2px;
}

/* The floated label turns red with the field, and had the same colour problem. */
.wc-block-components-form .wc-block-components-text-input.has-error label,
.wc-block-components-text-input.has-error label {
	color: var(--zu-accent-deep);
}

.wc-block-components-validation-error {
	margin-block-start: var(--zu-space-1);
	color: var(--zu-accent-deep);
	font-size: var(--zu-text-sm);
	font-weight: 500;
}

.wc-block-components-validation-error p {
	margin: 0;
}

/* ==========================================================================
   7. Shipping and payment options
   ========================================================================== */

/*
 * Each option is a target a finger has to hit exactly once. WooCommerce draws them as
 * bordered rows; this keeps the border but gives them the storefront's shape, a
 * 44 px minimum and a selected state that is not only a dot.
 */
/*
 * The inline-start padding is deliberately NOT set. WooCommerce reserves the room for
 * its absolutely positioned radio with `padding: 16px 16px 16px 48px`, and restating
 * that 48px here would win at equal specificity from a later stylesheet — so a
 * WooCommerce release that moved or resized the dot would be overridden and the label
 * would run into it. Found by an independent review. Only the paddings this theme
 * actually needs to change are set.
 */
.wc-block-components-radio-control__option {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding-block: var(--zu-space-2);
	padding-inline-end: var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface);
	font-size: var(--zu-text-base);
}

.wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
	margin-block-start: var(--zu-space-1);
}

.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--zu-accent-deep);
	background-color: var(--zu-blush);
}

/*
 * The label and the price, on one line, at the two ends of it. WooCommerce leaves the
 * inner group at its content width and the option's own row space unused, which put
 * "Dostawa standardowa" in the middle of the box with the price loose beside it
 * instead of at the edge where a price is read.
 */
.wc-block-components-radio-control__option-layout {
	flex: 1 1 auto;
	align-items: center;
	width: 100%;
	min-width: 0;
}

.wc-block-components-radio-control__label-group {
	flex: 1 1 auto;
	gap: var(--zu-space-2);
	align-items: baseline;
	width: 100%;
	min-width: 0;
}

.wc-block-components-radio-control__secondary-label {
	flex: 0 0 auto;
	text-align: end;
}

.wc-block-components-radio-control__label {
	color: var(--zu-ink);
	font-weight: 500;
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

/* The payment method's own panel, e.g. bank transfer instructions. */
.wc-block-components-radio-control-accordion-content {
	padding: 0 var(--zu-space-3) var(--zu-space-2);
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

/* ==========================================================================
   8. Terms, notes and the order button
   ========================================================================== */

.wc-block-components-checkbox .wc-block-components-checkbox__input {
	width: 22px;
	height: 22px;
	border-color: var(--zu-line);
	/* The theme has three radii and no fourth one; §4 allows an alias, not a new value. */
	border-radius: var(--zu-radius-sm);
}

.wc-block-components-checkbox .wc-block-components-checkbox__label {
	color: var(--zu-ink);
	font-size: var(--zu-text-sm);
}

.wc-block-checkout__terms {
	padding-block: var(--zu-space-3);
	border-block-start: 1px solid var(--zu-line);
}

.wc-block-checkout__actions_row {
	display: flex;
	flex-direction: column;
	gap: var(--zu-space-2);
	align-items: stretch;
}

.wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 52px;
	font-size: var(--zu-text-base);
}

.wc-block-components-checkout-return-to-cart-button {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
	text-align: center;
}

@media (min-width: 48rem) {
	.wc-block-checkout__actions_row {
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
	}

	.wc-block-components-checkout-place-order-button {
		width: auto;
		min-width: 16rem;
	}
}

/* ==========================================================================
   9. Order confirmation, and the same order seen from the customer's account
   ========================================================================== */

/*
 * Still a classic WooCommerce template, not a block, which is why this section can
 * work with ordinary element selectors.
 */
.woocommerce-order .woocommerce-thankyou-order-received {
	margin-block-end: var(--zu-space-3);
	font-size: var(--zu-text-lead);
}

.woocommerce-order .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zu-space-3);
	margin: 0 0 var(--zu-space-4);
	padding: var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	background-color: var(--zu-surface);
	list-style: none;
}

.woocommerce-order .woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-block-start: 0.25rem;
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

/* Rendered by zakatek_order_status_panel(). */
.zu-order-status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--zu-space-1) var(--zu-space-2);
	margin-block: 0 var(--zu-space-4);
	padding: var(--zu-space-2) var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-inline-start: 3px solid var(--zu-accent-deep);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-blush);
}

.zu-order-status__label {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zu-order-status__value {
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
	font-weight: 500;
}

/*
 * FROM HERE TO THE END OF THE SECTION: the order as the customer sees it, which is
 * two pages rather than one.
 *
 * `order/order-details.php` and the customer details under it render both the order
 * confirmation and the order a customer opens from their account, and stage 5 loads
 * this stylesheet on the account for that reason. What differs is only the wrapper:
 * the confirmation is inside `.woocommerce-order`, the account page is not — it is
 * inside `.woocommerce-MyAccount-content`, on a body carrying `.woocommerce-account`.
 * So each of these rules names both, and the same order looks the same in both
 * places instead of being styled twice in two files that drift apart.
 *
 * The specificity is unchanged by the addition: `.woocommerce-account` and
 * `.woocommerce-order` are both single classes, so each selector still beats
 * `woocommerce.css`'s `.woocommerce table.shop_table` (0,1,2) on class count.
 */
.woocommerce-order h2,
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-column__title {
	margin-block-end: var(--zu-space-2);
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-h2);
	font-weight: 400;
}

.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-account table.woocommerce-table--order-details {
	width: 100%;
	margin-block-end: var(--zu-space-5);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background-color: var(--zu-surface);
	font-size: var(--zu-text-sm);
}

.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td,
.woocommerce-account table.woocommerce-table--order-details th,
.woocommerce-account table.woocommerce-table--order-details td {
	padding: var(--zu-space-2) var(--zu-space-3);
	border: 0;
	border-block-end: 1px solid var(--zu-line);
	text-align: start;
	vertical-align: top;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td {
	border-block-end: 0;
	font-size: var(--zu-text-base);
}

.woocommerce-order table.woocommerce-table--order-details thead th,
.woocommerce-account table.woocommerce-table--order-details thead th {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-order table.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-order table.woocommerce-table--order-details tfoot td,
.woocommerce-account table.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-account table.woocommerce-table--order-details tfoot td {
	text-align: end;
}

/*
 * Keeping an amount on one line is worth doing where there is room and is a defect
 * where there is not. Measured at 390 px with `white-space: nowrap` on these cells:
 * the shipping row reads "15,90 zł przez Dostawa standardowa", cannot break, and
 * pushes the table to 392 px inside a 358 px container — 20 px of document overflow
 * on the last page of the purchase.
 */
@media (min-width: 48rem) {
	.woocommerce-order table.woocommerce-table--order-details td.woocommerce-table__product-total,
	.woocommerce-order table.woocommerce-table--order-details tfoot td,
	.woocommerce-account table.woocommerce-table--order-details td.woocommerce-table__product-total,
	.woocommerce-account table.woocommerce-table--order-details tfoot td {
		white-space: nowrap;
	}
}

@media (max-width: 47.99rem) {
	.woocommerce-order table.woocommerce-table--order-details th,
	.woocommerce-order table.woocommerce-table--order-details td,
	.woocommerce-account table.woocommerce-table--order-details th,
	.woocommerce-account table.woocommerce-table--order-details td {
		padding: var(--zu-space-2);
	}
}

/* Rendered by zakatek_order_actions(). */
.zu-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zu-space-2) var(--zu-space-4);
	align-items: center;
	margin-block-start: var(--zu-space-5);
}

.zu-order-actions__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
}

.zu-order-actions__link:hover {
	color: var(--zu-accent-deep);
}

.woocommerce-order .woocommerce-customer-details address,
.woocommerce-account .woocommerce-customer-details address {
	padding: var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	background-color: var(--zu-surface);
	font-style: normal;
	line-height: 1.7;
}

/*
 * The two address columns. WooCommerce lays them out by floating `.col-1` left and
 * `.col-2` right at 47.8% each, from `woocommerce-layout.css`. Turning the wrapper
 * into a grid is not enough on its own: a grid ignores the floats but keeps the
 * widths, and the two boxes came out 278 px wide, in the wrong order, with the
 * billing address adrift to the right of the page. Both children therefore need
 * placing and sizing explicitly.
 */
.woocommerce-order .woocommerce-customer-details .col2-set > .col-1,
.woocommerce-order .woocommerce-customer-details .col2-set > .col-2,
.woocommerce-account .woocommerce-customer-details .col2-set > .col-1,
.woocommerce-account .woocommerce-customer-details .col2-set > .col-2 {
	float: none;
	width: auto;
}

@media (min-width: 48rem) {
	.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses,
	.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--zu-space-4);
	}

	.woocommerce-order .woocommerce-customer-details .col2-set > .col-1,
	.woocommerce-account .woocommerce-customer-details .col2-set > .col-1 {
		grid-column: 1;
	}

	.woocommerce-order .woocommerce-customer-details .col2-set > .col-2,
	.woocommerce-account .woocommerce-customer-details .col2-set > .col-2 {
		grid-column: 2;
	}
}

/*
 * The bank transfer instructions WooCommerce prints under the confirmation. They are
 * the one thing on the page a customer has to act on.
 */
.woocommerce-order .woocommerce-bacs-bank-details {
	margin-block-end: var(--zu-space-5);
	padding: var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	background-color: var(--zu-surface);
}

.woocommerce-order ul.wc-bacs-bank-details {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The pickup point's required note.
 *
 * Stage 9 owner gate. The Furgonetka block rendered a bare "Wybierz punkt odbioru" button
 * and nothing anywhere said the choice was compulsory, so the first time a customer heard
 * about it was the order being refused. `checkout-vendor.js` inserts this sentence and
 * points the trigger at it with `aria-describedby`, which is what carries the requirement
 * to a screen reader — `aria-required` is not valid on a button role and is not relied on
 * alone. This rule is the sighted half of the same message, and it is the only carrier for
 * nobody: the text is real text, in the document, either way.
 *
 * Sized and coloured like the block's own secondary copy rather than like a warning. It
 * describes a rule, and it is on screen before anything has gone wrong.
 */
.zu-pickup-note {
	margin-block: 0 0.5rem;
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
	line-height: 1.5;
}

/*
 * The refusal, next to the control it is about.
 *
 * The first attempt here was a 2 px `box-shadow` ring on the trigger, and a frontend
 * review measured what it painted: the ring used `--zu-accent-deep`, which is the
 * button's own fill, at zero offset — **1.00:1 against the thing it had to separate
 * from**. It was drawn and it was invisible, and both this comment and the commit
 * message claimed a visible carrier that did not exist. The same colour works for
 * `input[aria-invalid]` in `base.css` only because an input's background is not that
 * colour, and the focus ring works only because `outline-offset` leaves a gap.
 *
 * So: text, which `ARCHITECTURE.md` §13 prefers and which cannot be invisible. The
 * element is `aria-hidden` — the state is already announced through `aria-invalid` and
 * the association with the banner, so this is decoration over something announced
 * independently, never the only carrier.
 */
.zu-pickup-error {
	margin-block: 0.5rem 0;
	color: var(--zu-accent-deep);
	font-size: var(--zu-text-sm);
	font-weight: 500;
}

/*
 * The chosen point, once there is one.
 *
 * The vendor renders `Paczkomat GDA01A (GDA01A)` with no margins and no label. It is the
 * answer to the question the control asks, so it is given the same quiet treatment as the
 * required note it replaces.
 */
.furgonetka-wc-blocks-pickup-point-block-label {
	margin-block: 0.5rem 0;
	color: var(--zu-ink);
	font-size: var(--zu-text-sm);
}