/*
 * The block checkout: the form on the left, the order summary on the right.
 *
 * Like cart-page.css, every selector here is WooCommerce's own — the page is a
 * React block and there is no markup of ours in it. The summary card's rows and
 * the facts on its line are styled in cart-page.css, scoped to both pages; this
 * file adds what only the checkout has.
 *
 * The form stays on the linen page, as it was: a form is the one place the
 * customer writes rather than reads, and a white card around it would make it
 * a second document beside the summary. The fields themselves go white so they
 * read as places to type — on linen, a linen-coloured box reads as disabled.
 */

/* ------------------------------------------------------------ the title */

/*
 * The page title lines up with the block's left edge. Blocksy puts the title in
 * the normal container, but the cart and checkout blocks are `alignwide` (the
 * checkout's two-column form needs the room, and the cart shares its width so
 * both summary cards are one size), so on any wide screen the title started
 * well to the right of the content. The title's container takes the block's
 * width instead — capped like the block (cart-page.css) — and only where the
 * article really holds a wide block, so the order-received page, which
 * renders no such block, keeps its own; the steps bar follows the same rule
 * (steps.css).
 */
article:has( > .entry-content > :is( .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout ).alignwide ) > .hero-section {
	width: var( --theme-block-width, var( --theme-container-width ) );
	max-width: min( var( --theme-block-wide-max-width ), var( --haft-zamowienie-max ) );
}

/*
 * Cart and checkout are two steps of one errand and carry the same, larger
 * title — the page's one heading, above sections that are headings too.
 */
article:has( > .entry-content > :is( .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout ) ) > .hero-section .page-title {
	font-size: clamp( 2.2rem, 1.6rem + 1.6vw, 2.9rem );
}

/* ------------------------------------------------------------ the form */

/*
 * Blocksy paints the block checkout's fields, radios and checkboxes from its
 * own stylesheet, with !important on every declaration — but it reads the
 * colours from variables its Customizer sets. Setting those variables on the
 * form is the one place to change them all, and it beats nothing by force:
 * Blocksy's rules keep winning, they just say what we want.
 */
.wc-block-checkout__form {
	--theme-form-field-background-initial-color: var( --haft-biel );
	--theme-form-field-background-focus-color: var( --haft-biel );
	--theme-form-field-border-initial-color: var( --haft-biel );
	--theme-form-field-border-focus-color: var( --haft-mulina );
	--theme-form-field-border-radius: var( --haft-radius-karta );
	--theme-form-selection-field-initial-color: var( --haft-szew );
	--theme-form-selection-field-active-color: var( --haft-mulina );
}

/*
 * One country on the list means no choice to make. WooCommerce still renders
 * the select — placeholder plus the single country, already chosen — so it
 * is removed here, and only in that case: the :has() looks for a list of
 * exactly two options, and the moment the owner allows a second country the
 * field comes back on its own.
 */
.wc-block-checkout__form .wc-block-components-address-form__country:has( option:nth-of-type( 2 ):last-of-type ) {
	display: none;
}

/*
 * The rhythm of the form: 40px between sections, the heading close over the
 * fields it names. pages.css gives every content h2 36px above it, which on top
 * of WooCommerce's 24px between steps opened a 60px hole before each heading,
 * and the checkout block's own 24px top padding pushed the first one 100px
 * under the page title. With that padding gone, the first heading and the
 * summary card start on the same line, 40px under the title.
 */
.wc-block-checkout.wp-block-woocommerce-checkout {
	padding-top: 0;
}

.wc-block-checkout__form .wc-block-components-checkout-step {
	margin-bottom: 40px;
}

/* `h2` in the selector: pages.css sets the margin with `.page .entry-content h2`. */
.wc-block-checkout__form h2.wc-block-components-checkout-step__title {
	margin: 0;
	font-family: var( --haft-font-display );
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --haft-atrament );
}

.wc-block-checkout__form .wc-block-components-checkout-step__description {
	font-size: 0.9rem;
	color: #5c6474;
}

/*
 * Fields: white, no outline, the card corner — all from the variables above.
 * The same surface the shipping and payment cards have, one field at a time:
 * white on linen is the edge, as it is for every card on the page, and a
 * grey hairline on top of it was a second edge. The border is kept and
 * painted white rather than removed, so the field does not grow by a pixel
 * on focus, when it turns red — a hairline, not a browser ring, the
 * treatment the visualizer's text field has. The floating label WooCommerce
 * draws stays.
 */
.wc-block-checkout__form .wc-block-components-text-input input,
.wc-block-checkout__form .wc-block-components-textarea textarea {
	color: var( --haft-atrament );
	font-family: var( --haft-font-body );
	transition: border-color 0.15s;
}

.wc-block-checkout__form .wc-block-components-text-input input:focus,
.wc-block-checkout__form .wc-block-components-textarea textarea:focus {
	box-shadow: none;
	outline: none;
}

.wc-block-checkout__form .wc-block-components-text-input label,
.wc-block-checkout__form .wc-block-components-combobox label {
	color: #5c6474;
}

.wc-block-checkout__form .wc-block-components-text-input.has-error input,
.wc-block-checkout__form .wc-block-components-textarea.has-error textarea {
	border-color: #b3222a;
}

/*
 * A refused value gets one short red line under the field, no icon — the
 * same answer the coupon field and the visualizer give.
 */
.wc-block-checkout__form .wc-block-components-validation-error > p {
	font-size: 0.85rem;
	line-height: 1.4;
	color: #b3222a;
}

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

.wc-block-checkout__form .wc-block-components-validation-error > p {
	padding-left: 0;
}

.wc-block-checkout__form .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: var( --haft-radius );
}

.wc-block-checkout__form .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --haft-mulina );
	outline-offset: 2px;
}

/*
 * The saved address, once the customer has filled it in: the same white,
 * borderless, round-cornered surface the fields it was typed into have. The
 * grey outlined box WooCommerce draws made the finished address look like a
 * disabled panel on the linen, and made "Edytuj" look like it opened
 * something else. It opens these very lines, so they are the same surface
 * before and after.
 */
.wc-block-checkout__form .wc-block-components-address-card {
	padding: 16px 20px;
	border: 0;
	border-radius: var( --haft-radius-karta );
	background: var( --haft-biel );
}

.wc-block-checkout__form .wc-block-components-address-card__edit {
	color: var( --haft-mulina );
	font-weight: 600;
}

/* "Dodaj nr mieszkania" — a quiet link, not a button. */
.wc-block-checkout__form .wc-block-components-address-form__address_2-toggle {
	color: #5c6474;
	text-decoration: underline;
	text-decoration-color: transparent;
	font-size: 0.9rem;
}

.wc-block-checkout__form .wc-block-components-address-form__address_2-toggle:hover {
	color: var( --haft-mulina );
	text-decoration-color: currentColor;
}

/* ------------------------------------------- delivery or collection */

/*
 * "Wysyłka / Odbiór osobisty": two cards side by side, the same white card
 * the shipping options are, with the chosen one framed in thread red and
 * its icon painted the same. WooCommerce draws the pair as one grey bar
 * with the chosen half cut out in white and an ink frame — a segmented
 * control from another design. Two cards with a gap between them are two
 * things to choose from, and the red frame is the same mark the site puts
 * on the one active thing on a page.
 *
 * The frame is a box-shadow, not a border: the card keeps its size when it
 * is chosen, so nothing beside it shifts.
 */
.wc-block-checkout__form .wc-block-checkout__shipping-method-container {
	display: flex;
	gap: 12px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option {
	flex: 1 1 0;
	min-height: 0;
	margin: 0;
	padding: 18px 16px;
	border: 0;
	border-radius: var( --haft-radius-karta );
	background: var( --haft-biel );
	box-shadow: none;
	color: #5c6474;
	font-family: var( --haft-font-display );
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s, box-shadow 0.15s;
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option:hover,
.wc-block-checkout__form .wc-block-checkout__shipping-method-option:focus-within {
	color: var( --haft-atrament );
	background: var( --haft-biel );
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option-title {
	font-size: 1rem;
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option:focus-visible {
	outline: 2px solid var( --haft-mulina );
	outline-offset: 2px;
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option--selected,
.wc-block-checkout__form .wc-block-checkout__shipping-method-option--selected:hover {
	background: var( --haft-biel );
	color: var( --haft-atrament );
	box-shadow: inset 0 0 0 2px var( --haft-mulina );
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option-icon {
	fill: currentColor;
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-icon {
	fill: var( --haft-mulina );
}

.wc-block-checkout__form .wc-block-checkout__shipping-method-option-title-wrapper {
	gap: 10px;
}

/* ----------------------------------------------------------- options */

/*
 * The shipping and payment options are one white card each, its options
 * separated by the dashed seam the cart lines use. WooCommerce marks the
 * chosen option with a red border and a tinted background of its own; here
 * the radio is the mark and the row it sits on stays as white as its
 * neighbours, so the card is one surface and not a stack of buttons.
 *
 * The card has no outline, like the summary card: white on linen is the edge.
 */
.wc-block-checkout__form .wc-block-components-radio-control {
	background: var( --haft-biel );
	border-radius: var( --haft-radius-karta );
	overflow: hidden;
}

.wc-block-checkout__form .wc-block-components-radio-control__option,
.wc-block-checkout__form .wc-block-components-radio-control-accordion-option {
	border: 0;
	background: none;
}

.wc-block-checkout__form .wc-block-components-radio-control__option {
	padding: 16px 20px 16px 52px;
	border-bottom: 1px dashed var( --haft-szew );
	font-size: 1rem;
	color: var( --haft-atrament );
}

.wc-block-checkout__form .wc-block-components-radio-control__option:last-child,
.wc-block-checkout__form .wc-block-components-radio-control-accordion-option:last-child .wc-block-components-radio-control__option {
	border-bottom: 0;
}

.wc-block-checkout__form .wc-block-components-radio-control-accordion-option:not( :last-child ) {
	border-bottom: 1px dashed var( --haft-szew );
}

.wc-block-checkout__form .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border-bottom: 0;
}

/*
 * WooCommerce draws its own frame and separators as ::after lines, not
 * borders: a 4px-cornered outline over the whole list (minus its top edge when
 * the first option is chosen), and a solid hairline over every option but the
 * one after the chosen. Over the dashed seams above that was a solid line next
 * to a dashed one between most options, and a second, squarer outline just
 * inside the card's round corners. The seams are the only separators here.
 */
.wc-block-checkout__form .wc-block-components-radio-control::after,
.wc-block-checkout__form .wc-block-components-radio-control .wc-block-components-radio-control__option::after,
.wc-block-checkout__form .wc-block-components-radio-control div.wc-block-components-radio-control-accordion-option::after {
	content: none;
	display: none;
}

/*
 * !important, because Blocksy draws the highlight ring with one of its own and
 * exposes no variable for it — its rule reads the palette's accent, which is
 * the shop's red, and a red frame around "Kurier" is the wrong emphasis.
 */
.wc-block-checkout__form .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout__form .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout__form .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked {
	border-color: var( --haft-szew );
	background: none;
	box-shadow: none !important;
}

.wc-block-checkout__form .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__label {
	font-weight: 600;
}

.wc-block-checkout__form .wc-block-components-radio-control__input {
	left: 20px;
	width: 20px;
	height: 20px;
}

.wc-block-checkout__form .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var( --haft-mulina );
	outline-offset: 2px;
}

.wc-block-checkout__form .wc-block-components-radio-control__secondary-label {
	font-family: var( --haft-font-display );
	font-weight: 700;
	color: var( --haft-atrament );
}

/*
 * The description under the chosen payment method: one quiet line, indented
 * to the label above it, no box.
 */
.wc-block-checkout__form .wc-block-components-radio-control-accordion-content {
	padding: 0 20px 16px 52px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #5c6474;
}

.wc-block-checkout__form .wc-block-components-radio-control-accordion-content > div > p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------- the terms */

.wc-block-checkout__form .wc-block-checkout__terms {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px dashed var( --haft-szew );
	font-size: 0.92rem;
	line-height: 1.5;
	color: var( --haft-atrament );
}

.wc-block-checkout__form .wc-block-checkout__terms--with-separator::after {
	display: none;
}

.wc-block-checkout__form .wc-block-checkout__terms a {
	color: var( --haft-atrament );
	text-decoration: underline;
	text-decoration-color: var( --haft-szew );
	text-underline-offset: 2px;
}

.wc-block-checkout__form .wc-block-checkout__terms a:hover {
	color: var( --haft-mulina );
	text-decoration-color: currentColor;
}

/* ----------------------------------------------------- place order */

.wc-block-checkout__form .wc-block-checkout__actions {
	padding-top: 0;
}

/*
 * Two buttons on one row: the way back to the cart at the left, the way on
 * at the right. WooCommerce renders the link when the actions block asks for
 * it (bin/fixtures/shop.php) and justifies the row between the two.
 */
.wc-block-checkout__form .wc-block-checkout__actions_row {
	display: flex;
	align-items: stretch;
	gap: 16px;
	margin-top: 22px;
}

.wc-block-checkout__form .wc-block-components-checkout-place-order-button {
	flex: 1 1 auto;
	width: auto;
	min-height: 0;
	padding: 16px 18px;
	border: 0;
	border-radius: var( --haft-radius );
	background: var( --haft-mulina );
	color: var( --haft-kreda );
	font-family: var( --haft-font-display );
	font-size: 1.05rem;
	font-weight: 700;
	transition: background 0.15s;
}

/*
 * "Wróć do koszyka": the home page's outline button ("Wycena dla firmy") —
 * an ink frame on the linen, filling with ink under the cursor. WooCommerce
 * renders it as a text link with an arrow icon; the icon goes, the words say
 * which way it leads.
 */
.wc-block-checkout__form .wc-block-components-checkout-return-to-cart-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 14px 22px;
	border: 2px solid var( --haft-atrament );
	border-radius: var( --haft-radius );
	background: none;
	color: var( --haft-atrament );
	font-family: var( --haft-font-display );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.wc-block-checkout__form .wc-block-components-checkout-return-to-cart-button svg {
	display: none;
}

.wc-block-checkout__form .wc-block-components-checkout-return-to-cart-button:hover,
.wc-block-checkout__form .wc-block-components-checkout-return-to-cart-button:focus-visible {
	background: var( --haft-atrament );
	color: var( --haft-len );
}

@media ( max-width: 599px ) {
	.wc-block-checkout__form .wc-block-checkout__actions_row {
		flex-direction: column-reverse;
	}
}

.wc-block-checkout__form .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__form .wc-block-components-checkout-place-order-button:focus-visible {
	background: var( --haft-atrament );
	color: var( --haft-kreda );
}

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

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
	padding: 0;
	margin: 0 0 14px;
	border: 0;
}

/*
 * The card's heading, set like the cart's "Podsumowanie koszyka". WooCommerce
 * sizes it with a three-class selector through the title wrapper, so this one
 * names the wrapper too.
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	margin: 0;
	line-height: 1.2;
	font-family: var( --haft-font-display );
	font-size: 1.6rem;
	font-weight: 700;
	color: var( --haft-atrament );
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
	padding: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary {
	padding: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary__content {
	padding: 0;
}

/*
 * One line: the photo, the facts, the total pinned top-right — the drawer's
 * shape without its control bar. There is nothing to control here: the
 * quantity is a fact now, so it goes back among the facts as a small mark on
 * the photo's corner, in the shop's thread red — the same red the header's
 * cart count wears, so the two counts read as one thing.
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item {
	display: grid;
	grid-template-columns: 72px minmax( 0, 1fr ) auto;
	column-gap: 24px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px dashed var( --haft-szew );
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item:first-child {
	padding-top: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item:last-child {
	padding-bottom: 18px;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image {
	position: relative;
	width: 72px;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var( --haft-radius );
	border: 1px solid var( --haft-szew );
}

/*
 * Blocksy paints the badge with a four-class selector loaded after this file,
 * hence the fifth class. WooCommerce centres the badge on the photo's corner
 * with a transform, which the offsets below replace.
 */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity {
	top: -8px;
	right: -8px;
	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;
	box-shadow: none;
	transform: none;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description {
	padding: 0;
	min-width: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	display: block;
	margin: 0;
	font-family: var( --haft-font-display );
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --haft-atrament );
}

/* The line total on the right is the figure; the unit price under the name goes. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
	display: none;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price {
	margin: 0;
	font-family: var( --haft-font-display );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --haft-atrament );
	white-space: nowrap;
}

/* The facts run a touch smaller here than on the cart page: the column is narrower. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details.wc-block-components-product-details {
	font-size: 0.88rem;
	gap: 8px 16px;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details__name {
	font-size: 0.68rem;
}

/*
 * "Dostawa / Kurier": the carrier goes under the label as a caption, the
 * same small grey uppercase the discount row gives its coupon code.
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-shipping__via {
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a919e;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__description {
	margin-top: -2px;
}

/*
 * The coupon at the bottom, as on the cart page; WooCommerce places it above
 * the rows here. Three containers, because the summary is rendered three ways:
 * the card on a laptop, the fold-out at the top of a phone (whose open state
 * carries `is-open` and its own `display: block`), and the plain copy above
 * the place-order button on a phone (`checkout-order-summary-block-fill`).
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content.is-open,
.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	order: 10;
}

/* WooCommerce indents panels in a sidebar; "Dodaj kupony" lines up with the rows above it. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel {
	padding-left: 0;
	padding-right: 0;
}

/* The lines and the rows share the card; the first row sits close under the seam. */
.wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	margin-bottom: 6px;
}

/*
 * WooCommerce pads the bottom of the rows' block, which left a blank band under
 * "Dostawa" twice the gap between any other two rows. The sum's own margin is
 * the spacing that belongs there.
 */
.wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-totals-block {
	padding-bottom: 0;
}

/*
 * The summary stays in view while the form scrolls, with as much linen
 * over it as there is under it at the end of the page — 76px below the 84px
 * header — and at the same offset as the cart's. WooCommerce already makes the
 * sidebar sticky, at 24px — under the 84px header, so the card's top went
 * behind it. A sticky card inside it could not help: the sidebar is exactly
 * as tall as the card, so the card had nowhere to move. A summary taller than
 * the window keeps its top and loses its bottom, until the form ends.
 */
@media ( min-width: 1000px ) {
	.wc-block-checkout .wc-block-checkout__sidebar.is-sticky {
		top: 160px;
	}
}

/*
 * On a phone WooCommerce folds the summary into a bar at the top of the page
 * that opens on tap; the same card, collapsed. It keeps its white and its
 * corner so it reads as the same thing it is on a laptop.
 */
/*
 * On a phone WooCommerce renders the summary twice: folded into a bar at the
 * top of the page, and again in full above the place-order button. The
 * customer arriving from the cart has just read that list; once, at the end,
 * where the total sits next to the button that spends it, is enough. The
 * sidebar copy goes — only while the second copy is on the page, so a
 * layout that renders one summary never loses it.
 */
.wc-block-checkout:has( .checkout-order-summary-block-fill ) .wc-block-checkout__sidebar {
	display: none;
}

/*
 * On a phone the terms go under the summary, right above the button.
 *
 * WooCommerce renders the checkbox before the actions block and the second
 * copy of the summary inside it, so the order on screen was: accept the
 * terms, then read what you are ordering, then pay. The sentence the customer
 * agrees to belongs next to the button that acts on it, after the list of what
 * is being bought.
 *
 * The actions block gives up its box (display: contents) so its two children —
 * the summary copy and the row of buttons — become children of the form
 * alongside the terms, and the three can be ordered. Only while that copy is
 * on the page: on a laptop the summary is in the sidebar and the order stands
 * as WooCommerce writes it.
 */
.wc-block-checkout__form:has( .checkout-order-summary-block-fill ) {
	display: flex;
	flex-direction: column;
}

.wc-block-checkout__form:has( .checkout-order-summary-block-fill ) .wc-block-checkout__actions {
	display: contents;
}

.wc-block-checkout__form:has( .checkout-order-summary-block-fill ) .checkout-order-summary-block-fill-wrapper {
	order: 1;
}

.wc-block-checkout__form:has( .checkout-order-summary-block-fill ) .wc-block-checkout__terms {
	order: 2;
}

.wc-block-checkout__form:has( .checkout-order-summary-block-fill ) .wc-block-checkout__actions_row {
	order: 3;
}

/* The delivery switch, at phone width: shorter cards, room for "Odbiór osobisty" on one line. */
@media ( max-width: 599px ) {
	.wc-block-checkout__form .wc-block-checkout__shipping-method-container {
		gap: 8px;
	}

	.wc-block-checkout__form .wc-block-checkout__shipping-method-option {
		padding: 12px 8px;
		font-size: 0.92rem;
	}

	.wc-block-checkout__form .wc-block-checkout__shipping-method-option-title {
		font-size: 0.92rem;
	}

	.wc-block-checkout__form .wc-block-checkout__shipping-method-option-icon {
		width: 22px;
		height: 22px;
	}
}

@media ( max-width: 999px ) {
	.wp-block-woocommerce-checkout-order-summary-block {
		padding: 18px 20px;
	}

	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
		margin: 0;
		cursor: pointer;
	}

	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
		font-size: 1.1rem;
	}

	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-price {
		font-family: var( --haft-font-display );
		font-weight: 700;
	}

	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
		padding-top: 16px;
	}

	/*
	 * The copy above the place-order button draws a frame around its content;
	 * the white card is frame enough, and a box inside a box is two.
	 */
	.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
		border: 0;
		padding: 0;
	}

	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__heading {
		margin-bottom: 14px;
	}
}