/*
 * The checkout, which is CartFlows' and not WooCommerce's, its thank-you page,
 * and WooCommerce's own order-received and order-pay pages.
 *
 * `/checkout/` redirects to a CartFlows funnel step, so this page is built from
 * CartFlows' "instant checkout" template with the theme's header stripped out.
 * That template is good — the mobile layout in particular, with its collapsible
 * order summary, is better than WooCommerce's — so this file is small and
 * deliberately corrective rather than a restyle.
 *
 * Everything below targets vendor markup, which is the same exception the account
 * stylesheet makes and for the same reason: overriding the templates to rename
 * their classes would multiply what has to be re-checked on every upgrade.
 */

/*
 * Every value is a token (`tokens.css`, docs/design-standards.md). The local
 * `--pod-gap`, `--pod-border` and `--pod-muted` this file used to define, from
 * `currentColor`, are gone: `--pod-near`, `--pod-line` and `--pod-ink-soft` are
 * what they stood for.
 */

/* --- The logo ------------------------------------------------------------ */

/*
 * The logo was being sliced in half.
 *
 * The file is a 200 × 200 image; the storefront constrains it to 120 × 40 and
 * it looks correct there. CartFlows' step template applies no constraint at
 * all, so the same image rendered at 130 × 130 inside a 40px-tall span in a
 * 64px header — overflowing it by ninety pixels and being painted over by the
 * form panel, exactly through the middle of the wordmark.
 *
 * Constrained to the header rather than the header grown to fit: a compact
 * header is the point of a checkout page.
 *
 * The same header carries the thank-you step, where this was sliced in exactly
 * the same way until the stylesheet was let onto that page — see
 * `StorefrontModule::enqueue_checkout()` for why it had not been.
 */
/*
 * The selector follows CartFlows' own chain, plus one class.
 *
 * Theirs is `body.cartflows-instant-checkout .main-header--content
 * .main-header--site-logo img { width: auto }` — three classes and two
 * elements. Anything shorter loses, and loses quietly: the rule stays in the
 * file looking correct while the logo carries on rendering at its natural
 * width.
 */
body.cartflows_step-template.cartflows-instant-checkout .main-header--content .main-header--site-logo img,
body.cartflows_step-template.cartflows-instant-checkout img.custom-logo {
	/* The same 120 x 40 box the storefront gives it, so the mark is the same
	   size on both pages instead of shrinking on the one that matters most.
	   A logo box, not a value of the system, so it stays in pixels. */
	height: 40px;
	width: 120px;

	/*
	 * No cap. Below 820px CartFlows limits the logo to `max-width: 45%` of its
	 * 130px slot, which is 58px, and with the height held at 40 the wordmark
	 * was cut down the middle on every phone.
	 */
	max-width: none;

	/*
	 * `contain`. This was `cover` while the logo file was a 200 x 200 square
	 * with the wordmark in a band across the middle, where cover cropped the
	 * empty margins. The file is now the wordmark itself at 120 x 40, so there is
	 * nothing to crop, and `contain` guarantees no edge of the mark is lost if
	 * the file changes shape again.
	 */
	object-fit: contain;
}

/* --- Getting back to the cart -------------------------------------------- */

/*
 * CartFlows removes the site header, which is the right call for a checkout —
 * and it leaves the customer with no way back. There is no navigation, no cart
 * link, and nothing on the page that returns to what they are buying, so
 * changing a quantity or removing a line means the browser's back button.
 *
 * The link renders on `woocommerce_checkout_before_customer_details`, which
 * puts it inside the column the form is in; see `StorefrontModule` for why the
 * obvious hook was the wrong one. Nothing here needs to position it.
 */
.pod-checkout-back {
	margin: 0 0 var( --pod-near );
}

.pod-checkout-back a {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 0.375rem;
	/* A comfortable target without looking like a second call to action. */
	min-height: 44px;
	text-decoration: none;
}

.pod-checkout-back a:hover,
.pod-checkout-back a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.pod-checkout-back a:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

.pod-checkout-back svg {
	flex: 0 0 auto;
}

/* --- The order summary ---------------------------------------------------- */

/*
 * Nothing in a summary line shared an edge with anything else.
 *
 * CartFlows lays the line out as a flex row: a block holding the thumbnail and
 * the product name, then the options list wrapping underneath it at full width.
 * So the options started at the thumbnail's left edge while the name they
 * describe started one thumbnail further in, and the line had two left margins.
 *
 * Indenting the list to the name is one number. The tidier-looking answer —
 * `display: contents` on CartFlows' wrapper so the thumbnail, the name and the
 * list become items of one two-column grid — was tried first and is wrong here:
 * inside a table cell whose width the table has already decided, the `auto`
 * track sized itself to 177px for a 44px thumbnail and squeezed the name to two
 * characters a line. A grid that has to be argued with about its own track
 * sizes is worse than a measurement that is written down and explained.
 */

/*
 * Why these selectors are as long as they are.
 *
 * CartFlows sets the line's layout from
 * `.wcf-embed-checkout-form table.shop_table tbody tr.cart_item td.product-name`
 * — four classes and four elements — and its cell padding from a chain of five
 * and five. A short selector here does not lose an argument, it loses silently:
 * the rule sits in the file reading perfectly while the page carries on doing
 * the old thing, which is exactly what happened on the first pass of this
 * section. So the prefix below carries six classes, and it is written once and
 * reused rather than re-derived per rule.
 *
 * The same shape as the logo rule above, for the same reason.
 */
/*
 * The options list is deliberately *not* indented to the product name.
 *
 * It should be, and there is no honest way to do it. The thumbnail it would
 * have to clear is fluid: its image is a 300px square with `max-width: 100%`
 * inside a flex item, so it measures 53px in the desktop column and 60.5px in
 * the mobile one, and neither is a value a stylesheet can name. A fixed indent
 * was tried and is 7.5px out on a phone, which reads as a wobble rather than a
 * margin — worse than no indent at all. `display: contents` plus a grid was
 * tried too and sized its own first track to 177px for a 44px thumbnail.
 *
 * So the alignment is left as CartFlows has it, and the hierarchy is carried by
 * type alone — which was the substance of the problem anyway: the labels were
 * bolder than the product they described.
 */

/*
 * The product is the thing being bought, so it should be the loudest thing on
 * its line. CartFlows renders the name at the body weight while WooCommerce's
 * option labels are bold, which made "Grommets (every 24"):" the strongest
 * text in the whole summary and the product name the quietest.
 */
.cartflows_step-template .wcf-product-name {
	font-weight: 600;
}

.cartflows_step-template td.product-name dl.variation dt,
.cartflows_step-template td.product-name dl.variation dd {
	font-size: 0.8125rem;
	/* WooCommerce pads these by half a line each, top and bottom, so a banner
	   with six options ran to 253px of mostly air. */
	padding-block: 0.125rem;
}

.cartflows_step-template td.product-name dl.variation dt {
	color: var( --pod-ink-soft );
	font-weight: 400;
}

.cartflows_step-template td.product-name dl.variation dd p {
	font-size: inherit;
}

/*
 * The line total belongs beside the name it prices.
 *
 * The cell is vertically centred, so on a banner with six options the price
 * drifted down level with the artwork and the product name sat a hundred
 * pixels above it with nothing beside it at all.
 *
 * 1rem is half the difference between CartFlows' 53px thumbnail and the name's
 * line box, which puts the price on the name's line. It is the one measurement
 * in this section, and the cost of it going stale is a pixel or two.
 */
.cartflows_step-template .wcf-embed-checkout-form-instant-checkout .woocommerce table.shop_table tr.cart_item td.product-total {
	/* CartFlows zeroes the top padding on these cells from a five-class chain,
	   and WooCommerce centres them from a shorter one; both have to be beaten
	   for the price to move at all. */
	padding-top: 1rem;
	vertical-align: top;
}

/*
 * The artwork, which Lumise writes a style attribute onto.
 *
 * That attribute is built into the markup inside the plugin, and the plugin is
 * not ours to edit — so `!important` here is not a shortcut past specificity,
 * it is the only kind of declaration that can reach the element at all. Only
 * for what the attribute sets (border and padding): it sets no radius, so the
 * radius needs none.
 * Matched to the product thumbnail beside it, so the line carries one border
 * treatment rather than two: the decorative line, and the small radius the
 * standard gives a thumbnail inside a control (it was 4px, off the scale).
 */
.cartflows_step-template img.lumise-cart-design-image {
	border: 1px solid var( --pod-line ) !important;
	border-radius: var( --pod-radius-sm );
	padding: 0 !important;
}

/* --- The other coupon control --------------------------------------------- */

/*
 * Power Coupons puts a full-width button between Shipping and Payment — the
 * same width as Place Order and directly above it, so two blocks compete to be
 * the thing you press next and only one of them buys anything. The coupon
 * *field* it relates to is meanwhile in the other column.
 *
 * Demoted rather than hidden: showing a customer which coupons they could use
 * is a different job from entering a code, and worth keeping. It is just not
 * worth the weight of a call to action.
 */
.cartflows_step-template div.power-coupons-drawer-trigger-wrapper {
	display: flex;
}

/* Their own selector carries an element as well as two classes, so ours has to
   as well; a class short and this rule would be in the file doing nothing. */
.cartflows_step-template div.power-coupons-drawer-trigger-wrapper .power-coupons-view-coupons-btn {
	background: none;
	border: 0;
	border-radius: var( --pod-radius-pill ); /* Power Coupons draws 4px */
	min-height: 44px;
	padding-inline: 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-transform: none;
	width: auto;
}

.cartflows_step-template div.power-coupons-drawer-trigger-wrapper .power-coupons-view-coupons-btn:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/* --- Legibility ---------------------------------------------------------- */

/*
 * Note what is deliberately *not* here: the blue.
 *
 * The restyle below takes CartFlows' primary from `--pod-accent`, so Place
 * order and the legal links are the shop front's blue, which `tokens.css` sets
 * to a shade that passes 4.5:1 with white. Astra's own palette
 * (`--ast-global-color-0`) is the same #007bc7 now (it was #0084d6, 3.98:1,
 * until the palette was brought to the token), so nothing here has to answer
 * it; anything still drawn from it is the palette's business, not this file's.
 */

/* --- Targets -------------------------------------------------------------- */

/*
 * The terms checkbox is 18px square and is the one control standing between a
 * customer and their order — miss it and the order will not place. The input
 * sits inside its label, so giving the label the height makes the whole row the
 * target rather than just the box.
 */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox,
.woocommerce-checkout #ship-to-different-address label {
	align-items: center;
	display: flex;
	gap: 0.625rem;
	min-height: 44px;
}

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

/*
 * Placement is already handled, and not by us.
 *
 * CartFlows moves the whole notice group into the left column's notices
 * wrapper on `checkout_error` (`checkout-template.js`), which is the right
 * place: inside the column the form is in. The rule that used to live here
 * capped the group at 68rem and centred it in the viewport, which was written
 * for a single-column checkout and would have fought that. It is gone, and what
 * is left is the look.
 *
 * What CartFlows' move *does* break is the focus WooCommerce puts on the error
 * so it gets announced; `StorefrontModule` puts that back.
 *
 * The look is the standard's one notice (§5 Notices), which CartFlows' 6px
 * radius and WooCommerce's icon glyph left: surface-2 (or the success or danger
 * wash), a 3px bar in its colour, square on the bar side. The same values as
 * `.pod-notice`, applied to WooCommerce's markup here as the account does.
 */
body.cartflows_step-template .woocommerce-error,
body.cartflows_step-template .woocommerce-message,
body.cartflows_step-template .woocommerce-info {
	background: var( --pod-surface-2 );
	border: 0;
	border-left: 3px solid var( --pod-accent );
	border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0;
	color: var( --pod-ink );
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
	margin: 0 0 var( --pod-apart );
	padding: var( --pod-near ) var( --pod-apart );
}

body.cartflows_step-template .woocommerce-message {
	background: var( --pod-success-wash );
	border-left-color: var( --pod-success );
}

body.cartflows_step-template .woocommerce-error {
	background: var( --pod-danger-wash );
	border-left-color: var( --pod-danger );
}

body.cartflows_step-template .woocommerce-error li {
	margin: 0;
	padding: 0;
}

body.cartflows_step-template .woocommerce-error li + li {
	margin-top: var( --pod-hair );
}

body.cartflows_step-template :is( .woocommerce-error, .woocommerce-message, .woocommerce-info )::before {
	content: none;
	display: none;
}

/* The group around them draws nothing of its own; each notice is the shape. */
body.cartflows_step-template .woocommerce-NoticeGroup {
	border: 0;
	border-radius: 0;
}

/* ========================================================================== */
/* The shop front's system, on CartFlows' checkout                            */
/* ========================================================================== */

/*
 * Everything above corrects faults. What follows brings the checkout into the
 * same system as the landing page, the shop and the cart, whose tokens it now
 * loads (`tokens.css`). CartFlows' layout, its steps, its floating labels and
 * its collapsible order summary on a phone are all kept: the template is still
 * the right one, it just looked like a different shop.
 *
 * Scoped to `body.cartflows-instant-checkout`, the checkout step. The thank-you
 * step shares this stylesheet and keeps its own look.
 *
 * Specificity rather than `!important`: CartFlows repeats its settings in an
 * inline block as `body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout`,
 * so the rules below carry the step's body class as well, one class ahead.
 */

/* --- 1. CartFlows' own variables, from the tokens -------------------------- */

body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout {
	--wcf-primary-color: var( --pod-accent );
	--wcf-btn-bg-color: var( --pod-accent );
	--wcf-btn-bg-hover-color: var( --pod-accent-deep );
	--wcf-btn-text-color: var( --pod-on-ink );
	--wcf-btn-hover-text-color: var( --pod-on-ink );
	--wcf-link-color: var( --pod-accent );
	--wcf-heading-color: var( --pod-ink );
	--wcf-heading-font-weight: 800;
	--wcf-text-color: var( --pod-ink );
	--wcf-field-label-color: var( --pod-ink );
	--wcf-field-text-color: var( --pod-ink );
	--wcf-field-bg-color: var( --pod-surface );

	/* A control's edge (3:1), the standard's field border, not a 16% tint of ink. */
	--wcf-field-border-color: var( --pod-field-border );
	--wcf-field-error-label-color: var( --pod-danger );
	--wcf-field-error-border-color: var( --pod-danger );
	--wcf-field-error-color: var( --pod-danger );

	/* 48px, the height of every field and button on the site; CartFlows' step setting had it at 33. */
	--wcf-field-min-height: var( --pod-btn-h );
	--wcf-payment-section-bg-color: var( --pod-surface );
	--wcf-payment-section-label-color: var( --pod-ink );
	--wcf-payment-section-desc-bg-color: var( --pod-surface-2 );
	--wcf-payment-section-desc-text-color: var( --pod-ink-soft );
	--wcf-ic-section-border-color: var( --pod-line );
	--wcf-ic-shipping-shadow-color: var( --pod-line );
	--wcf-ic-left-column-bg-color: var( --pod-surface );

	/* The summary on the same tint as the cart's summary card. */
	--wcf-ic-right-column-bg-color: var( --pod-surface-2 );

	/* CartFlows' global palette, which its buttons and focus rings also read. */
	--wcf-gcp-primary-color: var( --pod-accent );
	--wcf-gcp-secondary-color: var( --pod-accent-deep );
	--wcf-gcp-text-color: var( --pod-ink );
}

/* --- 2. Archivo, the site's typeface --------------------------------------- */

/*
 * Set once, on the page, and inherited everywhere else. CartFlows sets Lato on
 * two dozen elements one by one from its step settings (and downloads it from
 * Google for them, which `StorefrontModule` now stops), and its normalise
 * sheet puts the system font on the body. Each of its rules is answered below
 * with the same selector and one class more, set to `inherit`, so there is one
 * typeface on the page and it is the one every other page uses.
 */
/*
 * Named here, the one place a stylesheet of ours names the family, because
 * there is nothing to inherit it from: CartFlows' canvas template loads no
 * theme typography for `<html>` or `<body>`, and its own stored font (Archivo
 * now) is set on its form's elements only. Measured with this rule set to
 * `inherit`, the checkout and the thank-you page rendered every line in Times.
 */
body.cartflows-instant-checkout {
	font-family: "Archivo", sans-serif;
}

body.cartflows-instant-checkout button,
body.cartflows-instant-checkout input,
body.cartflows-instant-checkout select,
body.cartflows-instant-checkout textarea,
body.cartflows-instant-checkout .wcf-embed-checkout-form,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce-checkout #payment div.payment_box,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:checked + label,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:not(:checked) + label,
body.cartflows-instant-checkout .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"],
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row textarea,
body.cartflows-instant-checkout .wcf-embed-checkout-form .select2-container--default .select2-selection--single,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row select.select,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce .col2-set .col-1,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce .col2-set .col-2,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce-checkout .shop_table,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce-checkout #order_review_heading,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce-checkout #payment,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form.checkout_coupon,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form p.form-row label,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form #payment button,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #order_review .wcf-custom-coupon-field .wcf-submit-coupon.button,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button,
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .wcf-customer-info-main-wrapper h3,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce h3,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce h3 span {
	font-family: inherit;
}

/* --- 3. Section headings --------------------------------------------------- */

/* "Contact", "Billing details", "Shipping", "Payment": the card heading tier. */
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce h3,
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .wcf-customer-info-main-wrapper h3 {
	color: var( --pod-ink );
	font-size: var( --pod-h3-size );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-transform: none;
	text-wrap: balance;
}

/*
 * CartFlows capitalises every heading in the form's column ("Billing Details")
 * from a chain of five classes; sentence case is written in the text, so the
 * capitals are taken off here, one class heavier.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form .wcf-ic-layout-left-column .woocommerce-billing-fields-custom h3,
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form .wcf-ic-layout-left-column h3 {
	text-transform: none;
}

/* --- 4. Fields ------------------------------------------------------------- */

/*
 * The standard's field: radius 12, the field border (from the variables
 * above), and on focus an accent edge with a 1px accent ring, no outer glow.
 * Heights come from `--wcf-field-min-height` above, which CartFlows' floating
 * labels are laid out against, so they keep working.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row textarea,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row select,
body.cartflows-instant-checkout .wcf-embed-checkout-form .select2-container--default .select2-selection--single,
body.cartflows-instant-checkout .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"] {
	border-radius: var( --pod-radius );
}

body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row input.input-text:focus,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row textarea:focus,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row select:focus,
body.cartflows-instant-checkout .wcf-embed-checkout-form .select2-container--open .select2-selection--single,
body.cartflows-instant-checkout .wcf-embed-checkout-form .select2-container--focus .select2-selection--single,
body.cartflows-instant-checkout .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"]:focus {
	border-color: var( --pod-accent );
	box-shadow: 0 0 0 1px var( --pod-accent );
	outline: 2px solid transparent;
}

/*
 * CartFlows' floating labels, kept (the label sits in the field and moves up
 * as it is filled), at the standard's 48px: CartFlows pads the field 22px over
 * 8px around its 21px line, which made every field 53px. The label in ink
 * (the variables above) at 600, the standard label's weight; its size stays
 * CartFlows' 12px, which is what fits above the text inside the field.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form .form-row.wcf-anim-label input.input-text {
	padding-bottom: 5px;
	padding-top: 20px;
}

/*
 * What is typed, at least 16px (`--pod-field-size`): under that, iOS zooms the
 * page into the field. CartFlows sets its fields' text at 14px (select2's
 * chosen value explicitly); the floating label above it stays 12px.
 *
 * And no transition on the fields: CartFlows eases `all` over 0.2s, which
 * faded the focus edge and ring in; focus appears at once (standard §6). The
 * floating label keeps its own movement, which is the label's transition.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form .form-row :is( input.input-text, textarea, select ),
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	font-size: var( --pod-field-size );
	transition: none;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout.wcf-field-modern-label .woocommerce #customer_details .form-row:not( .wcf-anim-hidden-label ) label:not( .woocommerce-form__label-for-checkbox, .checkbox, .radio, .input-radio ) {
	font-weight: 600;
}

/*
 * The country and state pickers (WooCommerce's select2) to the same 48px and
 * radius: CartFlows pads them by `em` in both states, empty (the label as a
 * placeholder, centred) and chosen (the label floated above the value).
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout.wcf-field-modern-label .woocommerce .form-row .select2-container--default .select2-selection--single {
	align-items: center;
	border-radius: var( --pod-radius );
	box-sizing: border-box;
	display: flex;
	height: var( --pod-btn-h );
	min-height: var( --pod-btn-h );
	padding-block: 0;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout.wcf-field-modern-label .woocommerce .form-row.wcf-anim-label .select2-container--default .select2-selection--single:not( :has( .select2-selection__placeholder ) ) {
	padding-block: 20px 5px;
}

/*
 * The coupon code, a text field like the others (radius 12, not CartFlows'
 * 4px), 48px beside its button. The chain is CartFlows' own for this field
 * (`… #order_review table.shop_table tfoot tr.coupon-field …`, eight classes
 * and an id, and its stored settings repeat part of it inline), one class
 * heavier; the wrapper's id covers the copy in the phone's collapsed summary.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form #order_review table.shop_table tfoot tr.coupon-field .wcf-custom-coupon-field input.input-text.wcf-coupon-code-input,
body.cartflows-instant-checkout .wcf-embed-checkout-form #wcf_custom_coupon_field input[type="text"] {
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pod-ink );
	font-size: var( --pod-field-size );
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-near );

	/* Theme fields ease `all`; focus appears at once (standard §6). */
	transition: none;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form #order_review table.shop_table tfoot tr.coupon-field .wcf-custom-coupon-field input.input-text.wcf-coupon-code-input:focus,
body.cartflows-instant-checkout .wcf-embed-checkout-form #wcf_custom_coupon_field input[type="text"]:focus {
	border-color: var( --pod-accent );
	box-shadow: 0 0 0 1px var( --pod-accent );
	outline: 2px solid transparent;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce form .form-row.woocommerce-invalid :is( input.input-text, textarea, select ):focus {
	border-color: var( --pod-danger );
	box-shadow: 0 0 0 1px var( --pod-danger );
}

/* --- 5. Buttons ------------------------------------------------------------ */

/*
 * Place order: the standard's primary, and the one filled button on the form.
 * Flat, 48px (it was 52, with a shadow and a 1px lift on hover). The fill and
 * its hover come from CartFlows' variables above; `opacity` is CartFlows' own
 * hover dimming, put back to full.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #payment #place_order {
	border-radius: var( --pod-radius-pill );
	box-shadow: none;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: var( --pod-btn-h );
	padding-block: 0;
	text-transform: none;
	transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #payment #place_order:hover {
	opacity: 1;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #payment #place_order:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/*
 * The coupon's Apply: the standard's secondary button (§8.4), outlined beside
 * its field, so Place order stays the one filled button on the form. CartFlows
 * fills every button in the order review with its button colour, through
 * `#order_review button`, and sizes this one through a five-class chain; the
 * ids here (the review, or the coupon field's own wrapper) answer both.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form #order_review table.shop_table tfoot tr.coupon-field .wcf-custom-coupon-field button.wcf-submit-coupon.button,
body.cartflows-instant-checkout .wcf-embed-checkout-form :is( #order_review, #wcf_custom_coupon_field ) button.wcf-submit-coupon {
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );
	color: var( --pod-ink );
	font-size: var( --pod-btn-size );
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	height: auto;
	min-height: var( --pod-btn-h );
	opacity: 1;
	padding: 0 var( --pod-btn-x );
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form #order_review table.shop_table tfoot tr.coupon-field .wcf-custom-coupon-field button.wcf-submit-coupon.button:hover,
body.cartflows-instant-checkout .wcf-embed-checkout-form :is( #order_review, #wcf_custom_coupon_field ) button.wcf-submit-coupon:hover {
	background: var( --pod-surface-2 );
	border-color: var( --pod-ink );
	color: var( --pod-ink );
	opacity: 1;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form #order_review table.shop_table tfoot tr.coupon-field .wcf-custom-coupon-field button.wcf-submit-coupon.button:focus-visible,
body.cartflows-instant-checkout .wcf-embed-checkout-form :is( #order_review, #wcf_custom_coupon_field ) button.wcf-submit-coupon:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

body.cartflows-instant-checkout .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form #order_review table.shop_table tfoot tr.coupon-field .wcf-custom-coupon-field button.wcf-submit-coupon.button:disabled,
body.cartflows-instant-checkout .wcf-embed-checkout-form :is( #order_review, #wcf_custom_coupon_field ) button.wcf-submit-coupon:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* --- 6. Shipping and payment boxes ----------------------------------------- */

body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #payment ul.payment_methods,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce-shipping-methods li,
body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #shipping_method li {
	border-radius: var( --pod-radius );
}

/* --- 7. The order summary -------------------------------------------------- */

/* The product's picture, rounded like every other product picture on the site. */
body.cartflows-instant-checkout .wcf-embed-checkout-form .wcf-ic-layout-right-column .product-name img,
body.cartflows-instant-checkout .wcf-embed-checkout-form .wcf-ic-layout-right-column .wcf-product-image img {
	border-radius: var( --pod-radius );
}

/*
 * Totals: muted labels, figures in ink, and the total a size up, the way the
 * cart's summary card sets them, so the number does not change its look
 * between the two pages.
 */
body.cartflows-instant-checkout .wcf-embed-checkout-form .wcf-ic-layout-right-column tfoot th {
	color: var( --pod-ink-soft );
	font-weight: 400;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form .wcf-ic-layout-right-column tfoot td {
	color: var( --pod-ink );
	font-weight: 600;
}

body.cartflows-instant-checkout .wcf-embed-checkout-form .wcf-ic-layout-right-column tfoot tr.order-total th,
body.cartflows-instant-checkout .wcf-embed-checkout-form .wcf-ic-layout-right-column tfoot tr.order-total td {
	color: var( --pod-ink );
	font-size: 1.125rem;
	font-weight: 800;
}

/* --- 8. The page ----------------------------------------------------------- */

/*
 * The frame's white, where CartFlows paints its canvas #f5f5f5 (and again
 * under its empty block, with a `:has()` that needs the extra weight here).
 * The checkout and the thank-you step share the body class.
 */
html body.cartflows-instant-checkout,
html body.cartflows-instant-checkout:has( .wcf-empty-cart-notice-block ) {
	background-color: var( --pod-surface );
}

/* --- 9. The empty cart ----------------------------------------------------- */

/*
 * CartFlows' empty block, on the checkout with nothing in the cart and on a
 * thank-you page with no order to show: a static card (it was a 16px corner
 * and a grey border of CartFlows' own), its heading the page's H1
 * (`StorefrontModule::as_page_title()`, in the page title tier), a line of
 * body copy, and the way on as the one primary button.
 */
body.cartflows-instant-checkout .wcf-empty-cart-notice-block {
	margin: 0;
	padding: var( --pod-frame-top ) var( --pod-gutter ) var( --pod-frame-bottom );
}

body.cartflows-instant-checkout .wcf-empty-cart-notice-block .wcf-empty-cart-message-container {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	box-sizing: border-box;
	max-width: var( --pod-container );
	padding: var( --pod-break ) var( --pod-apart );
}

body.cartflows-instant-checkout .wcf-empty-cart-message-container .wcf-empty-cart-icon {
	background: var( --pod-surface-2 );
	border-radius: var( --pod-radius-pill );
}

body.cartflows-instant-checkout .wcf-empty-cart-message-container .wcf-empty-cart-icon svg {
	color: var( --pod-accent );
}

body.cartflows-instant-checkout .wcf-empty-cart-message-container .wcf-empty-cart-content h1.wcf-empty-cart-heading {
	color: var( --pod-ink );
	font-family: inherit;
	font-size: var( --pod-title-size );
	font-weight: 800;
	letter-spacing: var( --pod-title-tracking );
	line-height: 1.08;
	margin: 0 0 var( --pod-near );
	text-wrap: balance;
}

body.cartflows-instant-checkout .wcf-empty-cart-notice-block .wcf-empty-cart-message-container .wcf-empty-cart-content .wcf-empty-cart-message {
	color: var( --pod-ink-soft );
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* The standard's primary: a 48px pill at 700 (it was CartFlows' 40px, 6px corners, regular weight). */
body.cartflows-instant-checkout .wcf-empty-cart-message-container .wcf-empty-cart-content a.wcf-empty-cart-button {
	align-items: center;
	background: var( --pod-accent );
	border: 1px solid var( --pod-accent );
	border-radius: var( --pod-radius-pill );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pod-on-ink );
	display: inline-flex;
	font-family: inherit;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	margin: var( --pod-apart ) auto 0;
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-btn-x );
	text-decoration: none;
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

body.cartflows-instant-checkout .wcf-empty-cart-message-container .wcf-empty-cart-content a.wcf-empty-cart-button:hover {
	background: var( --pod-accent-deep );
	border-color: var( --pod-accent-deep );
	color: var( --pod-on-ink );
}

body.cartflows-instant-checkout .wcf-empty-cart-message-container .wcf-empty-cart-content a.wcf-empty-cart-button:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/* --- 10. The thank-you page ------------------------------------------------ */

/*
 * CartFlows' instant thank-you layout, kept: the greeting and the order's
 * facts on the left, what was bought on the right, collapsed under a toggle on
 * a phone. Brought into the system: CartFlows' variables from the tokens (its
 * stored settings still name the old blue and Lato), the greeting as the
 * page's H1, the boxes as static cards, the summary on the tint, the one
 * button as the primary.
 *
 * Every selector carries `body.cartflows-instant-checkout .wcf-instant-thankyou`,
 * one element more than CartFlows' own chains, because its stylesheet and its
 * inline settings load after this one.
 */
body.cartflows-instant-checkout .wcf-instant-thankyou {
	--wcf-primary-color: var( --pod-accent );
	--wcf-btn-bg-color: var( --pod-accent );
	--wcf-btn-bg-hover-color: var( --pod-accent-deep );
	--wcf-button-tx-color: var( --pod-on-ink );
	--wcf-heading-text-color: var( --pod-ink );
	--wcf-heading-font-weight: 800;
	--wcf-heading-font-family: inherit;
	--wcf-text-font-family: inherit;
	--wcf-button-font-family: inherit;
	--wcf-text-color: var( --pod-ink );
	--wcf-text-font-size: 1rem;
	--wcf-section-border-color: var( --pod-line );
	--wcf-instant-thankyou-left-side-bg-color: var( --pod-surface );
	--wcf-instant-thankyou-right-side-bg-color: var( --pod-surface-2 );

	color: var( --pod-ink );
}

/* The page title tier, on the greeting CartFlows printed as an `<h2>`. */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-status__left h1.pod-page-title {
	color: var( --pod-ink );
	font-family: inherit;
	font-size: var( --pod-title-size );
	font-weight: 800;
	letter-spacing: var( --pod-title-tracking );
	line-height: 1.08;
	margin: 0;
	text-wrap: balance;
}

/* "Order #8007", over the greeting. */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-status__left p {
	color: var( --pod-ink-soft );
	font-size: 0.9375rem;
	margin: 0 0 var( --pod-tight );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-status__left {
	gap: var( --pod-near );
}

/*
 * "Order updates" and "Your order": card headings. CartFlows set the first in
 * capitals by CSS ("Order Updates" on screen); it is sentence case in the
 * text, and stays so.
 */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container h2.woocommerce-order-status,
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container h2.wcf-ic-heading {
	color: var( --pod-ink );
	font-family: inherit;
	font-size: var( --pod-h3-size );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-transform: none;
	text-wrap: balance;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container h2.woocommerce-order-status {
	margin: 0 0 var( --pod-tight );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container h2.wcf-ic-heading {
	padding: 0 0 var( --pod-apart );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-heading .wcf-ic-cart-icon {
	color: var( --pod-ink-soft );
}

/* The boxes: static cards, the line for their edge and between their rows. */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-box {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	box-shadow: none;
	box-sizing: border-box;
	overflow: hidden;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-updates.wcf-ic-box {
	padding: var( --pod-apart );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-updates p {
	color: var( --pod-ink-soft );
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-review-customer__row {
	align-items: baseline;
	gap: var( --pod-near );
	padding: var( --pod-near ) var( --pod-apart );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-review-customer__row:not( :last-child ) {
	border-bottom: 1px solid var( --pod-line );
}

/* "Contact", "Address", "Payment": labels of the facts beside them. */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-review-customer__label label {
	color: var( --pod-ink-soft );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-review-customer__content :is( p, address ) {
	color: var( --pod-ink );
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* "Continue shopping": the page's one action, the standard's primary. */
body.cartflows-instant-checkout .wcf-instant-thankyou .woocommerce-order .wcf-ic-layout-container a.wcf-ic-button {
	align-items: center;
	background-color: var( --pod-accent );
	border: 1px solid var( --pod-accent );
	border-radius: var( --pod-radius-pill );
	box-shadow: none;
	box-sizing: border-box;

	/* CartFlows sets the label colour with `!important`; this answers it in kind. */
	color: var( --pod-on-ink ) !important;
	display: inline-flex;
	font-family: inherit;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: var( --pod-btn-h );
	opacity: 1;
	padding: 0 var( --pod-btn-x );
	text-decoration: none;
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .woocommerce-order .wcf-ic-layout-container a.wcf-ic-button:hover {
	background-color: var( --pod-accent-deep );
	border-color: var( --pod-accent-deep );
	opacity: 1;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .woocommerce-order .wcf-ic-layout-container a.wcf-ic-button:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/* The summary's lines, as the cart lists them. */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-right-column .wcf-ic-ty-product-details .wcf-ic-cart-order-item .wcf-product-image,
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-right-column .wcf-ic-ty-product-details .wcf-ic-cart-order-item .wcf-ic-cart-image {
	border-radius: var( --pod-radius );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-right-column .wcf-ic-ty-product-details .wcf-ic-cart-order-item .wcf-ic-cart-image img {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius );
	box-sizing: border-box;
}

/* The quantity on the picture's corner, in the accent (it was CartFlows' stored old blue). */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-cart-order-item__info-qty strong.product-quantity {
	background-color: var( --pod-accent );
	color: var( --pod-on-ink );
	font-size: 0.6875rem;
	font-weight: 700;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-cart-order-item__info-name {
	color: var( --pod-ink );
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

/*
 * What was chosen (Size and Colour for a garment, `OrderDetailsLines`), quieter
 * than the name, then the customer's design when this visitor may see it
 * (`OrderLineMedia`), under the details.
 */
/*
 * Under the name, not in a column beside it: CartFlows sets the line as one
 * row (picture and name, then the details), which put a design's square in the
 * middle of the line. The details wrap to their own row, in line with the name:
 * the indent is CartFlows' thumbnail width (70px at most) and its 0.8rem gap.
 */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-right-column .wcf-ic-ty-product-details .wcf-ic-cart-order-item .wcf-ic-cart-order-item__content-wrapper {
	flex-wrap: wrap;
	row-gap: var( --pod-tight );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-right-column .wcf-ic-ty-product-details .wcf-ic-cart-order-item .wcf-ic-cart-order-item__info-varient {
	align-items: flex-start;
	flex: 1 1 100%;
	flex-direction: column;
	gap: var( --pod-tight );
	padding-left: calc( 70px + 0.8rem );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-right-column .wcf-ic-ty-product-details .wcf-ic-cart-order-item .wcf-ic-cart-order-item__info-varient .wc-item-meta li {
	gap: 0.3em;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-cart-order-item__info-varient .wc-item-meta :is( strong.wc-item-meta-label, p ) {
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-cart-order-item__info-varient .wc-item-meta strong.wc-item-meta-label {
	color: var( --pod-ink-soft );
	font-weight: 400;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-cart-order-item__info-varient .wc-item-meta p {
	color: var( --pod-ink );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .pod-line-media--design {
	display: block;
}

/* A button, because pressing it opens the design larger: drawn as the cart's design square. */
body.cartflows-instant-checkout .wcf-instant-thankyou button.pod-line-media__design {
	aspect-ratio: 1;
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius );
	box-shadow: none;
	box-sizing: border-box;
	cursor: zoom-in;
	display: block;
	margin: 0;
	overflow: hidden;
	padding: 0;
	transition: border-color var( --pod-fast ) var( --pod-ease );
	width: 72px;
}

body.cartflows-instant-checkout .wcf-instant-thankyou button.pod-line-media__design:hover {
	background: var( --pod-surface );
	border-color: var( --pod-ink );
}

body.cartflows-instant-checkout .wcf-instant-thankyou button.pod-line-media__design:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

body.cartflows-instant-checkout .wcf-instant-thankyou button.pod-line-media__design img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-cart-order-item__price {
	color: var( --pod-ink );
	font-weight: 700;
}

/* Totals: muted labels, figures in ink, the total a size up above a rule (the cart's summary). */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-cart-totals__label span {
	color: var( --pod-ink-soft );
	font-size: 0.9375rem;
	font-weight: 400;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-cart-totals__value span {
	color: var( --pod-ink );
	font-size: 0.9375rem;
	font-weight: 600;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-cart-totals.total {
	border-top: 1px solid var( --pod-line );
	padding-top: var( --pod-near );
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container .wcf-ic-cart-totals.total :is( .wcf-ic-cart-totals__label, .wcf-ic-cart-totals__value ) span {
	color: var( --pod-ink );
	font-size: 1.125rem;
	font-weight: 800;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-cart-totals__currency-badge {
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-sm );
	color: var( --pod-ink-soft );
	font-size: 0.75rem;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-cart-totals .shipped_via {
	color: var( --pod-ink-soft );
	font-size: 0.8125rem;
}

/* The phone's "Show order summary" bar, on the tint with the line for its edges. */
body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-collapsed-order-review-section .wcf-order-review-toggle {
	background-color: var( --pod-surface-2 );
	border-color: var( --pod-line );
	color: var( --pod-ink );
	font-weight: 600;
}

body.cartflows-instant-checkout .wcf-instant-thankyou .wcf-order-review-toggle-text {
	color: var( --pod-ink );
	font-size: 0.9375rem;
}

/* --- 11. WooCommerce's own order pages ------------------------------------- */

/*
 * The order-received page (reached from an order email, or on the way to one
 * through a sign-in) and order-pay (an unpaid order's "Pay"). They are the
 * checkout page's endpoints, not CartFlows steps, so they are Astra pages:
 * `StorefrontModule` puts `pod-order-page` on the body and opts them into the
 * shop's frame (plain container, unboxed, no sidebar), and this is the frame's
 * values, the cart's recipe (`cart.css`).
 */
body.pod-order-page,
.pod-order-page .site-content {
	background-color: var( --pod-surface );
	color: var( --pod-ink );
}

.pod-order-page .site-content > .ast-container {
	box-sizing: border-box;
	max-width: var( --pod-container );
	padding-inline: var( --pod-gutter );
}

.pod-order-page #primary {
	margin-block: 0;
	padding-block: var( --pod-frame-top ) var( --pod-frame-bottom );
	width: 100%;
}

@media ( max-width: 767px ) {
	.pod-order-page #primary {
		padding-block: var( --pod-frame-top ) var( --pod-frame-bottom-sm );
	}
}

.pod-order-page .entry-header {
	margin: 0 0 var( --pod-break );
	padding: 0;
}

/* The page title tier; `header.entry-header` for Astra's inline rule (see `cart.css`). */
.pod-order-page header.entry-header .entry-title {
	color: var( --pod-ink );
	font-size: var( --pod-title-size );
	font-weight: 800;
	letter-spacing: var( --pod-title-tracking );
	line-height: 1.08;
	margin: 0;
	text-wrap: balance;
}

.pod-order-page .entry-content {
	margin: 0;
}

/*
 * Section headings ("Order details", "Billing address"): the card heading tier.
 * Astra boxes WooCommerce's order sections on the checkout's pages (a tinted
 * title bar, a bordered panel) through `.woocommerce-page.woocommerce-checkout
 * .woocommerce-order …`; the page is the frame here, so they come off, and
 * the chain is answered with the body's own classes.
 */
body.pod-order-page.woocommerce-page.woocommerce-checkout .woocommerce-order :is( .woocommerce-order-details, .woocommerce-customer-details, .woocommerce-bacs-bank-details, .woocommerce-order-downloads ) {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

body.pod-order-page.woocommerce-page.woocommerce-checkout .woocommerce-order :is( h2.woocommerce-order-details__title, h2.woocommerce-column__title, h2.wc-bacs-bank-details-heading, h2.woocommerce-order-downloads__title ) {
	background: none;
	border: 0;
	font-size: var( --pod-h3-size );
	padding: 0;
}

.pod-order-page .woocommerce :is( h2, h3 ) {
	color: var( --pod-ink );
	font-size: var( --pod-h3-size );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: var( --pod-break ) 0 var( --pod-near );
	text-transform: none;
	text-wrap: balance;
}

/* Notices: the standard's one notice, as on the checkout above. */
.pod-order-page .woocommerce :is( .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice ) {
	background: var( --pod-surface-2 );
	border: 0;
	border-left: 3px solid var( --pod-accent );
	border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0;
	color: var( --pod-ink );
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
	margin: 0 0 var( --pod-apart );
	padding: var( --pod-near ) var( --pod-apart );
}

.pod-order-page .woocommerce :is( .woocommerce-message, .woocommerce-notice--success ) {
	background: var( --pod-success-wash );
	border-left-color: var( --pod-success );
}

.pod-order-page .woocommerce :is( .woocommerce-error, .woocommerce-notice--error ) {
	background: var( --pod-danger-wash );
	border-left-color: var( --pod-danger );
}

.pod-order-page .woocommerce :is( .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice )::before {
	content: none;
	display: none;
}

/*
 * The order's overview (number, date, email, total, payment method): a static
 * card of label and figure pairs. WooCommerce floats them in a row with dashed
 * rules between, and Astra's `woocommerce-grid.css` sets every item in capitals
 * at 0.715em (`.woocommerce-js ul.order_details li`), which this answers: the
 * labels in sentence case at the small size, the figures in ink under them.
 */
.pod-order-page .woocommerce ul.order_details {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	box-sizing: border-box;
	display: grid;
	gap: var( --pod-near ) var( --pod-apart );
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 11.5rem ), 1fr ) );
	list-style: none;
	margin: 0 0 var( --pod-break );
	padding: var( --pod-apart );
}

/* WooCommerce's clearfix pseudo-elements, which in a grid are cells. */
.pod-order-page .woocommerce ul.order_details::before,
.pod-order-page .woocommerce ul.order_details::after {
	content: none;
	display: none;
}

.pod-order-page.woocommerce-js .woocommerce ul.order_details li,
.pod-order-page .woocommerce ul.order_details li {
	border: 0;
	color: var( --pod-ink-soft );
	float: none;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-transform: none;
}

.pod-order-page .woocommerce ul.order_details li strong {
	color: var( --pod-ink );
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	margin-top: var( --pod-hair );
	text-transform: none;
}

/*
 * The billing and shipping addresses: static cards. One address is the card
 * itself; two sit in WooCommerce's columns, each a card.
 */
.pod-order-page .woocommerce .woocommerce-customer-details address {
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	box-sizing: border-box;
	color: var( --pod-ink );
	font-style: normal;
	line-height: 1.6;
	padding: var( --pod-apart );
}

.pod-order-page .woocommerce .woocommerce-customer-details address p {
	color: var( --pod-ink-soft );
	margin: var( --pod-tight ) 0 0;
}

.pod-order-page .woocommerce .woocommerce-customer-details address p::before {
	color: var( --pod-ink-soft );
}

/* Fields (the sign-in form on the way to an order): the standard's field and label. */
.pod-order-page .woocommerce form .form-row label {
	color: var( --pod-ink );
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 var( --pod-hair );
}

.pod-order-page .woocommerce form .form-row :is( input.input-text, textarea, select ) {
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pod-ink );
	font-size: var( --pod-field-size );
	height: var( --pod-btn-h );
	padding: 0 var( --pod-near );
	width: 100%;

	/* Theme fields ease `all`; focus appears at once (standard §6). */
	transition: none;
}

.pod-order-page .woocommerce form .form-row :is( input.input-text, textarea, select ):focus {
	border-color: var( --pod-accent );
	box-shadow: 0 0 0 1px var( --pod-accent );
	outline: 2px solid transparent;
}

.pod-order-page .woocommerce form .woocommerce-form__label-for-checkbox {
	align-items: center;
	display: flex;
	font-weight: 500;
	gap: var( --pod-tight );
	min-height: 44px;
}

.pod-order-page .woocommerce form input[type="checkbox"] {
	accent-color: var( --pod-accent );
	height: 20px;
	margin: 0;
	width: 20px;
}

.pod-order-page .woocommerce form.login .lost_password a,
.pod-order-page .woocommerce .woocommerce-privacy-policy-text a,
.pod-order-page .woocommerce .woocommerce-terms-and-conditions-link {
	color: var( --pod-accent );
	font-weight: 600;
	text-decoration: none;
}

.pod-order-page .woocommerce form.login .lost_password a:hover,
.pod-order-page .woocommerce .woocommerce-privacy-policy-text a:hover,
.pod-order-page .woocommerce .woocommerce-terms-and-conditions-link:hover {
	color: var( --pod-accent-deep );
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * WooCommerce's show-password button inside the field: a 40px target, centred
 * in the 48px field, as in the account's forms (`account.css`). It was the
 * 14px icon alone.
 */
.pod-order-page .woocommerce form .password-input {
	display: block;
	position: relative;
}

.pod-order-page .woocommerce form .password-input input.input-text {
	padding-right: 3rem;
}

.pod-order-page .woocommerce form .show-password-input {
	align-items: center;
	background: none;
	border: 0;
	color: var( --pod-ink-soft );
	display: flex;
	height: var( --pod-btn-compact-h );
	justify-content: center;
	margin: 0;
	padding: 0;
	right: var( --pod-hair );
	top: var( --pod-hair );
	transform: none;
	translate: none;
	width: var( --pod-btn-compact-h );
}

.pod-order-page .woocommerce form .show-password-input:focus-visible {
	border-radius: var( --pod-radius-sm );
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: calc( -1 * var( --pod-focus-offset ) );
}

.pod-order-page .woocommerce form.login {
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	margin: 0;
	max-width: 40rem;
	padding: var( --pod-apart );
}

/*
 * The one action on each page (Sign in, Pay for order): the standard's
 * primary. `#place_order` for the id WooCommerce and Astra paint it through.
 */
.pod-order-page .woocommerce form.login button.button,
.pod-order-page .woocommerce #payment #place_order {
	align-items: center;
	background: var( --pod-accent );
	border: 1px solid var( --pod-accent );
	border-radius: var( --pod-radius-pill );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pod-on-ink );
	display: inline-flex;
	float: none;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-btn-x );
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

.pod-order-page .woocommerce form.login button.button:hover,
.pod-order-page .woocommerce #payment #place_order:hover {
	background: var( --pod-accent-deep );
	border-color: var( --pod-accent-deep );
	color: var( --pod-on-ink );
}

.pod-order-page .woocommerce form.login button.button:focus-visible,
.pod-order-page .woocommerce #payment #place_order:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/* Order-pay's lines and totals: the standard's table (no outer box, a line between rows). */
.pod-order-page .woocommerce form#order_review table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	margin: 0 0 var( --pod-break );
	width: 100%;
}

.pod-order-page .woocommerce form#order_review table.shop_table :is( th, td ) {
	background: none;
	border: 0;
	border-top: 1px solid var( --pod-line );
	font-size: 0.9375rem;
	padding: var( --pod-near ) 0.75rem;
	text-align: left;
	vertical-align: top;
}

.pod-order-page .woocommerce form#order_review table.shop_table thead th {
	border-top: 0;
	color: var( --pod-ink-soft );
	font-size: 0.8125rem;
	font-weight: 600;
	padding-top: 0;
}

.pod-order-page .woocommerce form#order_review table.shop_table tr > :first-child {
	padding-left: 0;
}

.pod-order-page .woocommerce form#order_review table.shop_table tr > :last-child {
	font-variant-numeric: tabular-nums;
	padding-right: 0;
	text-align: right;
}

.pod-order-page .woocommerce form#order_review table.shop_table tfoot th {
	color: var( --pod-ink-soft );
	font-weight: 400;
}

.pod-order-page .woocommerce form#order_review table.shop_table ul.wc-item-meta {
	color: var( --pod-ink-soft );
	font-size: 0.875rem;
	list-style: none;
	margin: var( --pod-tight ) 0 0;
	padding: 0;
}

.pod-order-page .woocommerce form#order_review table.shop_table ul.wc-item-meta :is( strong, p ) {
	display: inline;
	float: none;
	font-weight: 400;
	margin: 0;
}

/* A word's space after the label's colon (WooCommerce floats the label, which swallowed it). */
.pod-order-page .woocommerce form#order_review table.shop_table ul.wc-item-meta strong {
	margin-right: 0.3em;
}

.pod-order-page .woocommerce form#order_review table.shop_table ul.wc-item-meta p {
	color: var( --pod-ink );
}

/* Payment: a summary card on the tint, the chosen method's note on white inside it. */
body.pod-order-page #payment {
	background: var( --pod-surface-2 );
	border-radius: var( --pod-radius-lg );
	padding: var( --pod-apart );
}

body.pod-order-page #payment ul.payment_methods {
	border: 0;
	margin: 0 0 var( --pod-near );
	padding: 0;
}

body.pod-order-page #payment ul.payment_methods li {
	line-height: 1.5;
	list-style: none;
}

body.pod-order-page #payment ul.payment_methods li input[type="radio"] {
	accent-color: var( --pod-accent );
	height: 20px;
	margin: 0 var( --pod-tight ) 0 0;
	width: 20px;
}

body.pod-order-page.woocommerce-checkout #payment div.payment_box {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius );
	color: var( --pod-ink-soft );
	font-size: 0.9375rem;
	margin: var( --pod-tight ) 0 0;
	padding: var( --pod-near );
}

body.pod-order-page.woocommerce-checkout #payment div.payment_box::before {
	content: none;
	display: none;
}

body.pod-order-page #payment .form-row {
	margin: 0;
	padding: 0;
}

@media ( max-width: 599px ) {
	.pod-order-page .woocommerce #payment #place_order {
		width: 100%;
	}
}

/* --- 12. Motion ------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	body.cartflows-instant-checkout .wcf-embed-checkout-form .woocommerce #payment #place_order,
	body.cartflows-instant-checkout .wcf-embed-checkout-form :is( #order_review, #wcf_custom_coupon_field ) button.wcf-submit-coupon,
	body.cartflows-instant-checkout .wcf-empty-cart-message-container .wcf-empty-cart-content a.wcf-empty-cart-button,
	body.cartflows-instant-checkout .wcf-instant-thankyou .woocommerce-order .wcf-ic-layout-container a.wcf-ic-button,
	body.cartflows-instant-checkout .wcf-instant-thankyou button.pod-line-media__design,
	.pod-order-page .woocommerce form.login button.button,
	.pod-order-page .woocommerce #payment #place_order {
		transition: none;
	}
}