/**
 * PhotoCab checkout page.
 *
 * Numbers are transcribed from the prototype
 * ("PhotoCab Checkout.dc.html", the styles() and radio() blocks):
 *
 *   grid          minmax(420px, 1fr) minmax(0, 560px), gap 56px, items start
 *   field         48px tall, 1px border, 8px radius, 16px inset, white
 *   label         13px / 1.4 on --pc-ink-600, 8px above the control
 *   order card    white, 1px border, 12px radius, 24px padding, sticky
 *   order row     76px thumb + content, 20px 0, 1px dashed separator
 *   radio         18px ring, 8px accent dot, 44px hit area
 *   pay list      one 12px-radius box, 1px dividers, active row on surface-2
 *
 * The markup is WooCommerce's, wrapped by Blocksy: the form carries
 * `.ct-woocommerce-checkout`, the left column `.ct-customer-details` and
 * the right one `.ct-order-review` (see blocksy/inc/components/woocommerce/
 * common/checkout.php). Nothing is overridden - this is a re-skin.
 *
 * Breadcrumbs are deliberately not touched.
 */

/* --------------------------------------------------------- Page title -- */

.woocommerce-checkout .page-title {
	font-size: var(--pc-fs-h1-pdp);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-heading);
	letter-spacing: var(--pc-ls-heading);
}

/* ------------------------------------------------------------- Layout -- */

/*
 * Blocksy grids the form as two equal columns with a 35px gutter. The
 * prototype gives the order card a ceiling instead, so the form keeps the
 * wider half on large screens.
 */
@media (min-width: 1000px) {
	.woocommerce-checkout form.ct-woocommerce-checkout {
		grid-template-columns: minmax(420px, 1fr) minmax(0, 560px);
		gap: var(--pc-space-14);
		align-items: start;
	}
}

@media (max-width: 999.98px) {
	.woocommerce-checkout form.ct-woocommerce-checkout {
		gap: var(--pc-space-8);
	}
}

/* Section headings: "Payment and delivery", "Additional information". */
.woocommerce-checkout .ct-woocommerce-checkout h3 {
	margin: 0 0 var(--pc-space-6);
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-heading);
	letter-spacing: var(--pc-ls-heading);
}

/* ---------------------------------------------------------- Login link -- */

/*
 * The "returning customer?" link opens Blocksy's account modal instead of
 * sliding this form open - see assets/js/checkout-login.js. The form stays
 * in the DOM because WooCommerce's own checkout script still addresses it.
 *
 * The order-received page carries the same body class and prints a login form
 * of its own - the gate a guest meets when opening a registered customer's
 * order link. That one is the only way on, so it is left visible; it is
 * dressed in assets/css/account.css alongside the account login form.
 */
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-form-login {
	display: none;
}

.woocommerce-checkout .woocommerce-form-login-toggle .showlogin {
	color: var(--pc-ink-900);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-form-login-toggle .showlogin:hover {
	color: var(--pc-accent-500);
}

/* --------------------------------------------------------- Form fields -- */

.woocommerce-checkout .ct-woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: var(--pc-space-2);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-regular);
	line-height: 1.4;
}

/* Blocksy prints the asterisk in bold red. */
.woocommerce-checkout .ct-woocommerce-checkout .form-row .required {
	color: var(--pc-accent-500);
	font-weight: var(--pc-fw-regular);
	text-decoration: none;
}

/*
 * Blocksy's fields are variable-driven, so the design is expressed as
 * variables - that carries the focus ring and the disabled state with it.
 *
 * Padding, radius and background are ALSO restated as plain properties:
 * Blocksy guards those three behind `--has-classic-forms`, which is empty
 * when the Customizer runs the "modern" form style and would make the
 * variable lookups collapse.
 */
.woocommerce-checkout .ct-woocommerce-checkout :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], select, textarea) {
	--theme-form-field-height: 48px;
	--theme-form-field-border-width: 1px;
	--theme-form-field-border-initial-color: var(--pc-border);
	--theme-form-field-border-focus-color: var(--pc-accent-500);
	--theme-form-field-border-radius: var(--pc-radius-ctl);
	--theme-form-field-background-initial-color: var(--pc-surface);
	--theme-form-field-background-focus-color: var(--pc-surface);
	--theme-form-text-initial-color: var(--pc-ink-900);
	--theme-form-text-focus-color: var(--pc-ink-900);
	/*
	 * 15px, not var(--pc-fs-price): the token reads 16px in tokens.css
	 * while every prototype declares 15px at desktop. Pinned locally so
	 * the field matches the design without moving prices elsewhere on
	 * the site - see the note on --pc-fs-price in assets/css/tokens.css.
	 */
	--theme-form-font-size: 15px;
	padding: 0 var(--pc-space-4);
	border-radius: var(--pc-radius-ctl);
	background-color: var(--pc-surface);
}

/*
 * Blocksy paints the focus state as an inset outline of `max(2px, border
 * width)` laid over the 1px border, which reads as a 3px edge. The design
 * keeps the field at 1px and changes only its colour, so the outline is
 * thinned to sit exactly on the border rather than removed - it is still
 * the visible focus indicator, and it still tracks
 * --theme-form-field-border-focus-color.
 */
.woocommerce-checkout .ct-woocommerce-checkout :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], select, textarea):focus {
	outline-width: 1px;
	outline-offset: -1px;
}

/*
 * `.form-row` is in this selector for weight, not for scope. The shared
 * field rule above matches textareas through its `:is()` list, and that
 * list's specificity is taken from its heaviest argument
 * (`input[type="text"]`) - so a plain `... textarea` selector loses to it
 * and the box ends up with `padding: 0 16px`, no vertical inset at all.
 */
.woocommerce-checkout .ct-woocommerce-checkout .form-row textarea {
	height: auto;
	min-height: 132px;
	padding: 14px var(--pc-space-4);
	line-height: var(--pc-lh-body);
	resize: vertical;
}

/*
 * Blocksy's select arrow is a filled triangle 10px from the edge; the
 * prototype draws a stroked chevron 16px in. The colour is baked into the
 * data URI (--pc-ink-600) because custom properties do not resolve inside
 * one - keep the two in step if the token changes.
 */
.woocommerce-checkout .ct-woocommerce-checkout select {
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F5C57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 14px auto;
	background-position: right var(--pc-space-4) top 50%;
	cursor: pointer;
}

/* An unchosen city / branch reads as a placeholder in the prototype. */
.woocommerce-checkout .ct-woocommerce-checkout select:invalid,
.woocommerce-checkout .ct-woocommerce-checkout select:has(option[value=""]:checked) {
	color: var(--pc-ink-400);
}

/*
 * The store sells to one country, so WooCommerce renders this row as a
 * select holding a single pre-selected option (wc-template-functions.php:
 * 3427) - a control with nothing to choose. It is hidden rather than
 * removed: `billing_country` still feeds shipping, tax and address
 * validation, and the shipping plugin reads it directly, so the field has
 * to stay in the form.
 *
 * Should a second selling country ever be enabled, WooCommerce drops the
 * `--single` class and the row reappears on its own.
 */
.woocommerce-checkout #billing_country_field:has(.country_to_state--single) {
	display: none !important;
}

/* --------------------------------------------- Additional information -- */
 
/*
 * The prototype draws one uninterrupted 24px rhythm down the whole left
 * column. WooCommerce splits it in two (`.col-1` billing, `.col-2`
 * shipping + notes) and Blocksy pushes the second half down by 40px, so
 * the column is re-joined at the field spacing instead.
 */
.woocommerce-checkout #customer_details .col-2 {
	margin-top: var(--pc-space-6);
	clear: both;
}

/*
 * With "ship to a different address" switched off this wrapper renders
 * empty, and its margin would otherwise open a second gap.
 */
.woocommerce-checkout .woocommerce-shipping-fields:empty {
	display: none;
}

/*
 * The shipping plugin injects its city and branch selects on
 * `woocommerce_before_order_notes`, which lands them as direct children
 * of this block - outside `__field-wrapper` and therefore outside the
 * field grid. Since `.ct-customer-details .form-row` clears WooCommerce's
 * own margins, they would stack with no gap at all.
 *
 * Spacing the block itself covers whatever a plugin drops in here, the
 * heading, and the notes wrapper alike.
 */
.woocommerce-checkout .woocommerce-additional-fields {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-6);
}

/*
 * The heading carries the prototype's extra 8px; the 24px below it comes
 * from the block's gap, so the generic h3 margins are cleared here.
 */
.woocommerce-checkout .ct-woocommerce-checkout .woocommerce-additional-fields h3 {
	margin: 0;
}

/*
 * WooCommerce wraps every control in an inline <span>, which leaves the
 * textarea sitting on a text baseline and short of the row's width.
 */
.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
}

/* "(optional)" is part of the label in the prototype, not an aside. */
.woocommerce-checkout .ct-woocommerce-checkout .form-row label .optional {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: normal;
}

/*
 * The notes box is the one field the prototype draws at a fixed height:
 * five rows' worth. WooCommerce ships `rows="2"`, so the height comes
 * from CSS - see the shared textarea rule above for padding and rhythm.
 */
.woocommerce-checkout #order_comments {
	min-height: 132px;
}

/* ------------------------------------------------------------ select2 -- */

/*
 * The Nova Poshta city and warehouse fields are declared as plain selects
 * (morkva-ua-shipping/constants-mrkv-ua-shipping-methods.php:32 and :62)
 * but the plugin ships its own select2 build and swaps them for one, so
 * the native control is hidden and none of the field rules above reach it.
 *
 * select2's own skin is 28px tall with a #aaa border and 4px corners; the
 * rules below restate the prototype's field on the replacement markup and
 * on its dropdown. WooCommerce's country select gets the same treatment,
 * which is the point - the two should not look like different controls.
 *
 * `.woocommerce-checkout` is a body class as well as a form class, so
 * these still match the dropdown, which select2 appends to <body>.
 */
/*
 * With the Customizer set to classic forms, Blocksy skins select2 itself
 * from the same `--theme-form-field-*` variables as the native fields:
 * height and vertical centring on `.select2-selection--single`, padding on
 * `.select2-selection__rendered`, border and radius on both the field and
 * the dropdown (see woocommerce.min.css, the `span.select2-container`
 * block).
 *
 * Feeding it the design's values here is what carries the parts the rules
 * below never name - the arrow slot's height, multi-select chips, the
 * open-state background - so they stay in step without being restated.
 * The dropdown is listed separately because select2 appends it to <body>,
 * outside the form.
 */
.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2-dropdown {
	--theme-form-field-height: 48px;
	--theme-form-field-border-width: 1px;
	--theme-form-field-border-style: solid;
	--theme-form-field-border-initial-color: var(--pc-border);
	--theme-form-field-border-radius: var(--pc-radius-ctl);
	--theme-form-field-background-initial-color: var(--pc-surface);
	--theme-form-field-padding: 0 var(--pc-space-4);
	--theme-form-text-initial-color: var(--pc-ink-900);
	--theme-form-select-background-initial-color: var(--pc-surface);
	--form-field-select-initial-color: var(--pc-ink-600);
}

/* An open field keeps the accent edge the focus state gives the others. */
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--multiple {
	background-color: var(--pc-surface);
}

/* Disabled reads as muted rather than merely uninteractive. */
.woocommerce-checkout .select2-container--disabled .select2-selection--single {
	background: var(--pc-surface-2);
	color: var(--pc-ink-400);
	cursor: not-allowed;
}

/*
 * Nothing on the checkout is a multi-select today, but the plugin fields
 * are configured per shipping method - a tag-style one would otherwise
 * fall back to select2's own 4px-radius grey chips.
 */
.woocommerce-checkout .select2-container .select2-selection--multiple {
	box-sizing: border-box;
	min-height: 48px;
	border-radius: var(--pc-radius-ctl);
}

.woocommerce-checkout .select2-container .select2-selection__choice {
	padding: 2px var(--pc-space-2);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-frame);
	background: var(--pc-surface-2);
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-old);
}

/* select2 marks unreachable options; they should not read as choices. */
.woocommerce-checkout .select2-container--default .select2-results__option[aria-disabled="true"],
.woocommerce-checkout .select2-container--default .select2-results__option--disabled {
	color: var(--pc-ink-400);
	cursor: default;
}

.woocommerce-checkout .select2-container .select2-selection--single {
	box-sizing: border-box;
	height: 48px;
	padding: 0 44px 0 var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface);
	transition: border-color var(--pc-dur-fast) ease;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--pc-ink-900);
	font-size: 15px;
	line-height: 46px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--pc-ink-400);
}

/*
 * select2 draws its arrow as a CSS triangle on a <b>. The prototype uses a
 * stroked chevron, so the <b> goes and the arrow slot carries the same
 * data URI as the native selects above - colour baked in as --pc-ink-600.
 */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	inset-inline-end: var(--pc-space-4);
	width: 14px;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F5C57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px auto;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
	border-color: var(--pc-accent-500);
}

/* ---- Dropdown ---- */

/*
 * Matched to the header menus in the prototype: a 12px-radius panel with
 * a soft shadow, options on 8px corners that tint with the accent.
 */
.woocommerce-checkout .select2-dropdown {
	/*
	 * The palette slot, not --pc-border: the open panel is an active state
	 * and takes the Customizer's accent, the same colour a focused field
	 * gets. Only the panel - the resting field keeps the hairline.
	 */
	border: 1px solid var(--theme-palette-color-1);
	border-radius: var(--pc-radius-card);
	background: var(--pc-surface);
	box-shadow: 0 12px 28px rgba(31, 30, 28, 0.12);
	overflow: hidden;
}

.woocommerce-checkout .select2-container--default .select2-search--dropdown {
	padding: var(--pc-space-2);
}

.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: 40px;
	padding: 0 var(--pc-space-3);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	color: var(--pc-ink-900);
	font-family: inherit;
	font-size: var(--pc-fs-btn);
}

.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--pc-accent-500);
	outline: none;
}

.woocommerce-checkout .select2-results__options {
	padding: var(--pc-space-2);
}

.woocommerce-checkout .select2-container--default .select2-results__option {
	padding: 10px var(--pc-space-3);
	border-radius: var(--pc-radius-ctl);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-btn);
	line-height: 1.4;
}

/*
 * Two select2 generations run on this site and they mark options up
 * differently: WooCommerce's selectWoo (4.0-era) carries the state on an
 * `aria-selected` attribute, while the select2 4.1 build the Nova Poshta
 * plugin ships of its own uses `--selected` / `--selectable` classes and no
 * attribute at all. Both schemes are named here so the two widgets open the
 * same dropdown; keying off the attribute alone left the plugin's city and
 * branch pickers on someone else's skin.
 *
 * The highlighted rule comes last, and repeats `.select2-results__option`
 * to match the weight of the `[aria-selected]` selector above it: the
 * selected option is also the highlighted one when the panel opens, and
 * pointing at it should read as pointing rather than as selection.
 */
.woocommerce-checkout .select2-container--default .select2-results__option--selected,
.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--pc-surface-2);
	color: var(--pc-ink-900);
	font-weight: var(--pc-fw-medium);
}

.woocommerce-checkout .select2-container--default .select2-results__option.select2-results__option--highlighted {
	background: var(--pc-accent-100);
	color: var(--pc-accent-500);
	font-weight: var(--pc-fw-regular);
}

/*
 * The admin bar puts `margin-top: 32px !important` on <html>. select2
 * measures the field with document coordinates, which include that margin,
 * but the panel it appends to <body> is absolutely positioned against a
 * containing block that does not - so the dropdown lands exactly one admin
 * bar too high, overlapping the field.
 *
 * Only the appended panel is shifted back; the field's own container also
 * carries `.select2-container--open`, hence the `:has(> .select2-dropdown)`
 * guard. The two offsets are WordPress's own admin bar heights and switch
 * at its breakpoint.
 *
 * Shoppers never see this - the bar only renders for logged-in users with
 * `.admin-bar` on the body.
 */
.admin-bar .select2-container--open:has(> .select2-dropdown) {
	margin-top: -32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .select2-container--open:has(> .select2-dropdown) {
		margin-top: -46px;
	}
}

.woocommerce-checkout .select2-container--default .select2-results__message {
	color: var(--pc-ink-400);
	font-size: var(--pc-fs-btn);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .select2-container .select2-selection--single {
		transition: none;
	}
}

/* --------------------------------------------------------- Order card -- */

/*
 * Blocksy drives this card from the Customizer through
 * `--order-review-padding / -border / -border-radius`, printed inline with
 * a one-class selector. The two-class selector below wins over it, so the
 * card no longer depends on those values matching the design.
 */
.woocommerce-checkout .ct-order-review {
	--theme-form-selection-field-initial-color: var(--pc-border);
	--theme-form-selection-field-active-color: var(--pc-accent-500);
	position: sticky;
	top: calc(var(--pc-space-6) + var(--admin-bar, 0px) + var(--header-sticky-height, 0px) * var(--sticky-shrink, 100) / 100);
	padding: var(--pc-space-6);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
	background: var(--pc-surface);
}

@media (max-width: 999.98px) {
	.woocommerce-checkout .ct-order-review {
		position: static;
	}
}

@media (max-width: 689.98px) {
	.woocommerce-checkout .ct-order-review {
		padding: var(--pc-space-4);
	}
}

.woocommerce-checkout .ct-order-review #order_review_heading {
	margin-bottom: var(--pc-space-5);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	margin-bottom: 0;
	--theme-table-padding: var(--pc-space-5) 0;
}

/* ---- Review head ---- */

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	--theme-table-border-width: 0;
	padding-top: 0;
	padding-bottom: var(--pc-space-4);
	border-bottom: 1px solid var(--pc-border);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-label);
	font-weight: var(--pc-fw-regular);
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: start;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total {
	text-align: end;
}

/* ---- Review rows ---- */

.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td {
	vertical-align: middle;
}

/*
 * The companion plugin grids this row as `100px 1fr` from
 * `table.shop_table .ct-checkout-cart-item` - three simple selectors, so a
 * two-class selector never reaches it. The table is named here for weight;
 * it also clears the plugin's under-480px flip to `1fr 2fr`, which lets the
 * thumbnail take a third of the row.
 */
.woocommerce-checkout table.shop_table .ct-checkout-cart-item {
	grid-template-columns: 76px minmax(0, 1fr);
	gap: var(--pc-space-4);
}

@media (max-width: 689.98px) {
	.woocommerce-checkout table.shop_table .ct-checkout-cart-item {
		grid-template-columns: 64px minmax(0, 1fr);
	}
}

/*
 * Same frame as the cart's thumbnails, one size down: 6px inset with a
 * contained image, so packshots are never cropped.
 */
.woocommerce-checkout .ct-checkout-cart-item .ct-media-container {
	--theme-object-fit: contain;
	box-sizing: border-box;
	padding: 6px;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface);
	overflow: hidden;
}

.woocommerce-checkout .ct-checkout-cart-item .ct-media-container img {
	border-radius: 0;
}

.woocommerce-checkout .ct-checkout-cart-item-title {
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-regular);
	line-height: var(--pc-lh-card);
	text-wrap: pretty;
}

.woocommerce-checkout .ct-checkout-cart-item-title a {
	color: inherit;
	font-weight: inherit;
	transition: color var(--pc-dur-fast) ease;
}

.woocommerce-checkout .ct-checkout-cart-item-title a:hover {
	color: var(--pc-accent-500);
}

/*
 * With Blocksy's editable-quantity option off, the count is a plain
 * <strong>; with it on, the same cell holds a real stepper. Both are
 * covered so the row does not shift when the option is toggled.
 */
.woocommerce-checkout .ct-checkout-cart-item .product-quantity {
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
}

/*
 * The prototype's stepper is 34px tall with a 14px count. Blocksy derives
 * everything else from `--quantity-height`, including the arrow glyph at
 * height / 5.5 - which is 10px at its own 55px default but collapses to
 * 6px here, far below the design. The glyph is pinned to that same 10px
 * instead, and the count is set outright because Blocksy renders the input
 * at 0.9em of the wrapper.
 *
 * The table is in the selector for weight: the plugin's under-480px rule
 * (`table.shop_table .ct-checkout-cart-item .quantity[data-type=type-2]`)
 * is heavier than a three-class selector and would resize this on phones.
 */
.woocommerce-checkout table.shop_table .ct-checkout-cart-item .quantity[data-type] {
	--quantity-height: 34px;
	--quantity-width: 96px;
	font-size: var(--pc-fs-btn);
}

.woocommerce-checkout table.shop_table .ct-checkout-cart-item .quantity[data-type] input[type="number"] {
	--theme-form-font-size: var(--pc-fs-btn);
}

.woocommerce-checkout table.shop_table .ct-checkout-cart-item .quantity[data-type] :is(.ct-increase, .ct-decrease)::before {
	font-size: 10px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
	text-align: end;
}

/* ---- Review totals ---- */

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-regular);
	text-align: start;
	vertical-align: baseline;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	text-align: end;
	vertical-align: baseline;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr :is(th, td) {
	padding-block: var(--pc-space-5);
}

/*
 * The shipping block is a label over a list, not a two-column row. The
 * table name is in these selectors for weight: the generic `tfoot th`,
 * `tfoot td` and `tfoot tr :is(th, td)` rules above are heavier than a
 * bare `.woocommerce-shipping-totals` and would keep the end alignment
 * and the 18px block padding.
 */
/*
 * Blocksy rules every table row off with a dashed bottom border. On this
 * row the cells are `display: block`, so that border tracks the block box
 * instead of the table's full width and stops short of the right edge.
 *
 * The separator the design wants sits between shipping and the grand total
 * anyway, so it is dropped here and drawn on `.order-total` below - two
 * cells side by side there, which together span the table.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals :is(th, td) {
	--theme-table-border-width: 0;
	display: block;
	width: auto;
	padding-inline: 0;
	border-bottom: 0;
	text-align: start;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total :is(th, td) {
	border-top: 1px dashed var(--pc-border);
}

/*
 * There is no <th> left to style on this row: Blocksy strips it and
 * re-prints its text as `.ct-shipping-heading` inside a td[colspan="2"]
 * (blocksy/inc/components/woocommerce/common/cart.php:120). It arrives at
 * font-weight 600 with a 15px gap under it; the prototype draws the block
 * label as an 11px uppercase caption 12px above the list.
 *
 * `.shop_table` is in the selector for weight - Blocksy's own rule is
 * `.shop_table .shipping td .ct-shipping-heading`.
 */
.woocommerce-checkout .shop_table .shipping td .ct-shipping-heading {
	margin-bottom: var(--pc-space-3);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-label);
	font-weight: var(--pc-fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td {
	/*padding-top: var(--pc-space-5);*/
	/*padding-bottom: var(--pc-space-2);*/
}

/* Grand total reads as a heading, not another line item. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th {
	font-size: var(--pc-fs-label);
	font-weight: var(--pc-fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td strong {
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-heading);
}

/*
 * The amount is a single figure and should never wrap - on a narrow card
 * the label was taking more than half the row and pushing "80 590,00 грн"
 * onto two lines.
 *
 * `width: 1%` is the shrink-to-fit idiom for an auto-layout table: the
 * cell asks for almost nothing, the browser grows it to its content, and
 * every remaining pixel goes to the label, which wraps instead. Applied at
 * every width - the amount has no business breaking on desktop either.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot :is(.cart-subtotal, .order-total) td {
	width: 1%;
	white-space: nowrap;
}

/*
 * WooCommerce paints `#payment` as a panel of its own - grey background,
 * 5px corners, an em of padding on the list - and that box does not line
 * up with the table above it. Reset to the card's own content box so the
 * payment list starts and ends exactly where the totals do.
 */
.woocommerce-checkout .ct-order-review #payment {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-inline: 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

/* ------------------------------------------------------ Radio controls -- */

/*
 * Shipping methods and payment methods share one control in the prototype:
 * an 18px ring on white, an accent border and an 8px accent dot when
 * chosen, with the label going from --pc-ink-600 / 400 to
 * --pc-ink-900 / 500.
 *
 * Blocksy draws its radios the other way round - the whole circle floods
 * with the active colour and carries a 6px WHITE dot - so the checked
 * state is repainted below rather than only recoloured through
 * `--theme-form-selection-field-*` (those are set on the card above and
 * still carry the resting border and the payment list).
 */
.woocommerce-checkout .woocommerce-shipping-methods input[type="radio"] {
	top: 0;
	width: 18px;
	min-width: 18px;
	height: 18px;
	margin-inline-end: 0;
	background: var(--pc-surface);
}

.woocommerce-checkout .woocommerce-shipping-methods input[type="radio"]:checked {
	border-width: 1.5px;
	border-color: var(--pc-accent-500);
	background: var(--pc-surface);
}

.woocommerce-checkout .woocommerce-shipping-methods input[type="radio"]:checked::before {
	width: 8px;
	height: 8px;
	background: var(--pc-accent-500);
}

/* ---- Shipping methods ---- */

/*
 * The prototype stacks the options 12px apart; Blocksy spaces them with a
 * 10px bottom margin on every item but the last, which also leaves the
 * list bottom-heavy inside the card.
 */
.woocommerce-checkout ul#shipping_method {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-3);
	margin: 0;
}

.woocommerce-checkout ul#shipping_method li {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	gap: var(--pc-space-3);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-btn);
	line-height: 1.4;
}

.woocommerce-checkout ul#shipping_method li label {
	display: flex;
	align-items: center;
	gap: var(--pc-space-3);
	width: 100%;
	margin: 0;
	color: inherit;
	font-weight: var(--pc-fw-regular);
	cursor: pointer;
}

.woocommerce-checkout ul#shipping_method li:has(input:checked) {
	color: var(--pc-ink-900);
}

.woocommerce-checkout ul#shipping_method li:has(input:checked) label {
	font-weight: var(--pc-fw-medium);
}

/*
 * WooCommerce prints the cost inside the label, right after the method
 * name ("Nova Poshta: 60 UAH"), so it is pushed to the far edge from
 * there rather than living in a column of its own.
 */
.woocommerce-checkout ul#shipping_method li label .woocommerce-Price-amount {
	margin-inline-start: auto;
	padding-inline-start: var(--pc-space-3);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
	white-space: nowrap;
}

/*
 * A single available method renders as a plain <li> with no radio at all.
 * Aligning it with the ring keeps the block from jumping when the address
 * changes and a second method appears.
 */
.woocommerce-checkout ul#shipping_method li:not(:has(input[type="radio"])) {
	padding-inline-start: 30px;
}

/*
 * Not in the prototype, but WooCommerce prints both under the list: the
 * "shipping to ..." line and the estimate toggle. Kept quiet so they read
 * as a footnote to the block.
 */
.woocommerce-checkout .woocommerce-shipping-destination {
	margin: var(--pc-space-3) 0 0;
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-old);
	line-height: var(--pc-lh-body);
}

.woocommerce-checkout .shipping-calculator-button {
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-old);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-checkout .shipping-calculator-button:hover {
	color: var(--pc-accent-500);
}

.woocommerce-checkout .woocommerce-shipping-totals .includes_tax,
.woocommerce-checkout .woocommerce-shipping-totals small {
	color: var(--pc-ink-400);
	font-size: var(--pc-fs-old);
}

/* ----------------------------------------------------- Payment methods -- */

/*
 * Blocksy borders every <li> separately. The prototype draws one rounded
 * box with hairline dividers, so the border moves to the list and the
 * items keep only the divider.
 */
.woocommerce-checkout #payment ul.payment_methods {
	margin: var(--pc-space-5) 0 0;
	padding: 0;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
	overflow: hidden;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
	margin: 0;
	border: 0;
	background: var(--pc-surface);
	transition: background var(--pc-dur-base) ease;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method + li.wc_payment_method {
	border-top: 1px solid var(--pc-border);
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input:checked) {
	background: var(--pc-surface-2);
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
	gap: var(--pc-space-3);
	min-height: 52px;
	padding: var(--pc-space-2) var(--pc-space-4);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-regular);
	line-height: 1.4;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input:checked) > label {
	color: var(--pc-ink-900);
	font-weight: var(--pc-fw-medium);
}

/*
 * The radio itself is a sibling of the label, not a child, so showing it
 * would push it onto its own line above the row. WooCommerce and Blocksy
 * both solve that the same way - the real input is clipped out of view but
 * left focusable, and the ring is drawn on `label::before`.
 *
 * Blocksy's own hide rule is qualified with `:first-child`, which stops
 * matching as soon as a gateway prints anything ahead of the input; the
 * unqualified rule below keeps the control hidden either way, so a native
 * radio never shows up next to the drawn one.
 */
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"] {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

/*
 * The prototype's ring: 18px, white inside, hairline border - and when
 * chosen, a 1.5px accent border with an 8px accent dot. Blocksy builds the
 * chosen state the other way round, flooding the circle with a 5px accent
 * border around a white centre, so the dot is drawn as a radial gradient
 * rather than by widening the border.
 */
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label::before {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin-top: 0;
	border-color: var(--pc-border);
	background: var(--pc-surface);
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked + label::before {
	border-width: 1.5px;
	border-color: var(--pc-accent-500);
	background-color: var(--pc-surface);
	background-image: radial-gradient(circle at center, var(--pc-accent-500) 4px, transparent 4px);
}

/* Blocksy's focus ring is behind the same `:first-child` qualifier. */
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:focus-visible + label::before {
	outline: 2px solid var(--pc-accent-500);
	outline-offset: 2px;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
	max-height: 22px;
}

/*
 * The gateway description sits under its own label, indented past the
 * ring, and shares the row's tint instead of being boxed off.
 */
.woocommerce-checkout #payment ul.payment_methods .payment_box {
	margin: 0;
	padding: 0 var(--pc-space-4) var(--pc-space-4) 46px;
	border-top: 0;
	background: transparent;
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-body);
}
.woocommerce-checkout #payment ul.payment_methods .payment_box:not(:has(*)) {
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_box .payment_box{
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
	display: none;
}

.woocommerce-checkout #payment ul.payment_methods .payment_box p {
	font-size: inherit;
	line-height: inherit;
}

/* ---------------------------------------------------------- Place order -- */

.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-body);
	margin-bottom: var(--pc-space-5);
}

.woocommerce-checkout .woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout :is(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper) a {
	color: var(--pc-ink-900);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-checkout :is(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper) a:hover {
	color: var(--pc-accent-500);
}

.woocommerce-checkout #payment .place-order {
	margin-top: var(--pc-space-5);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0 0 var(--pc-space-5);
}

/*
 * A 44px row keeps the consent tick inside a comfortable hit area. The
 * class is qualified against the `.form-row label` rule above, which is
 * heavier and would force this label back to `display: block`.
 */
.woocommerce-checkout .ct-woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox {
	/*display: flex;*/
	/*align-items: flex-start;*/
	/*gap: var(--pc-space-3);*/
	/*min-height: 44px;*/
	margin-bottom: 0;
	cursor: pointer;
}

.woocommerce-checkout #place_order {
	--theme-button-min-height: 48px;
	--theme-button-border-radius: var(--pc-radius-ctl);
	--theme-button-background-initial-color: var(--pc-ink-900);
	--theme-button-background-hover-color: var(--pc-ink-700);
	--theme-button-text-initial-color: var(--pc-surface);
	--theme-button-text-hover-color: var(--pc-surface);
	--theme-button-transform: none;
	--theme-button-shadow: none;
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
}

/* ------------------------------------------------------------ Notices -- */

.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-checkout .woocommerce-info {
	border-radius: var(--pc-radius-ctl);
	padding-inline-end: var(--pc-space-6);
}

/* ----------------------------------------------------- Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .ct-checkout-cart-item-title a,
	.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
		transition: none;
	}
}