/*
 * Checkout — Shopify's dedicated checkout layout over WooCommerce's checkout
 * block, the thank-you page and pay-for-order (inc/checkout.php,
 * sections/checkout-chrome.php).
 *
 * Shopify's checkout was never themed, so no harvest carries it: this sheet
 * is written, measured from the live Wulf checkout at 1440px (see the
 * chrome section's docblock for the geometry). Every colour is DERIVED from
 * the store's harvested settings.css tokens — nothing here names a store:
 *
 *   Shopify                       token                                   Wulf harvest
 *   text / black                  --color-primary                         #000000
 *   white                         --color-secondary                       #ffffff
 *   summary rail  #f5f5f5         color-mix(primary --shade-4, secondary) #f5f5f5
 *   borders       #dedede         color-mix(primary --shade-12, secondary) #e0e0e0
 *   muted text    #707070         color-mix(primary --shade-60, secondary) #666666
 *   primary button                --color-button-primary                  #ed1515
 *   button text                   --color-button-primary-text             #ffffff
 *   button hover                  --color-button-primary-dim              #d81111
 *   focus ring                    --color-focus                           #4a9afc
 *   error                         --color-error                           #ba4444
 *   headings                      --element-text-font-family--heading     Oswald
 *   body                          --element-text-font-family--body        Poppins
 *   heading letter-spacing        --element-text-letter-spacing--heading  0em
 *
 * Every rule is scoped to `body.template-checkout` (gv_expanse_template()
 * names the route `checkout`), so the sheet is inert on every other page
 * although it is enqueued on all of them (functions.php). Woo's own block
 * styles (wc-blocks-style) load in an order this theme does not control, so
 * every override carries at least two more classes than the rule it beats.
 *
 * Sizes are px where Shopify's are: 5px field radius, 1px hairlines, 64px
 * thumbnails, 18px checkboxes, a 16px/700 full-width button.
 */

/* ------------------------------------------------------------ tokens */

body.template-checkout {
	--gv-checkout-max: 1100px;
	--gv-checkout-form: 500px;
	--gv-checkout-summary: 400px;
	--gv-checkout-gutter: 38px;
	--gv-checkout-header: 95px;
	/* The centre line: 55% across an 1100px container, as a share of the full
	 * width — the block's main column, the header's logo cell and the rail's
	 * left edge all read this one value so they meet. */
	--gv-checkout-left: calc(50% + min(var(--gv-checkout-max), 100%) * 0.05);
	--gv-checkout-radius: 5px;
	--gv-checkout-text: var(--color-primary, #000);
	--gv-checkout-bg: var(--color-secondary, #fff);
	--gv-checkout-rail: color-mix(in srgb, var(--color-primary, #000) var(--shade-4, 4%), var(--color-secondary, #fff));
	--gv-checkout-border: color-mix(in srgb, var(--color-primary, #000) var(--shade-12, 12%), var(--color-secondary, #fff));
	--gv-checkout-muted: color-mix(in srgb, var(--color-primary, #000) var(--shade-60, 60%), var(--color-secondary, #fff));
	--gv-checkout-disabled-bg: color-mix(in srgb, var(--color-primary, #000) var(--shade-4, 4%), var(--color-secondary, #fff));
	--gv-checkout-disabled-text: color-mix(in srgb, var(--color-primary, #000) var(--shade-40, 40%), var(--color-secondary, #fff));
	/* DECISIONS 080: the checkout's button is the one button system's — brand fill, the brand's filled label, the inverse swap on hover. */
	--gv-checkout-button: var(--gv-btn-brand, var(--color-button-primary));
	--gv-checkout-button-text: var(--gv-btn-filled-ink, var(--color-button-primary-text));
	--gv-checkout-button-hover: var(--gv-btn-outlined-fill, #ffffff);
	--gv-checkout-button-hover-text: var(--gv-btn-outlined-ink, #111111);
	--gv-checkout-focus: var(--color-focus);
	--gv-checkout-error: var(--color-error);
	--gv-checkout-heading-family: var(--element-text-font-family--heading), var(--element-text-font-family-fallback--heading);
	--gv-checkout-heading-spacing: var(--element-text-letter-spacing--heading, 0);
	--gv-checkout-body-family: var(--element-text-font-family--body), var(--element-text-font-family-fallback--body);
	background: var(--gv-checkout-bg);
	color: var(--gv-checkout-text);
	font-family: var(--gv-checkout-body-family);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}

/* The skeleton's main has the storefront's page padding; the checkout
 * paints edge to edge and lays its own gutters. */
body.template-checkout .main-content {
	padding: 0;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------------------ header */

body.template-checkout .gv-checkout__header {
	border-bottom: 1px solid var(--gv-checkout-border);
	background: var(--gv-checkout-bg);
}

body.template-checkout .gv-checkout__header-inner {
	max-width: var(--gv-checkout-max);
	margin: 0 auto;
	min-height: var(--gv-checkout-header);
	display: grid;
	grid-template-columns: 55% 45%;
	align-items: center;
}

/* The logo cell ends at the centre line; its content is the form's width,
 * right-aligned to that line, so the logo's left edge is the form's. */
body.template-checkout .gv-checkout__logo {
	display: flex;
	justify-content: flex-end;
	padding-right: var(--gv-checkout-gutter);
	min-width: 0;
}

body.template-checkout .gv-checkout__logo .site-header__logo {
	width: 100%;
	max-width: var(--gv-checkout-form);
	margin: 0;
	z-index: auto;
	text-align: left;
	font-family: var(--gv-checkout-heading-family);
	font-size: 24px;
	line-height: 1;
	text-transform: none;
}

body.template-checkout .gv-checkout__logo .site-header__logo a {
	display: block;
	max-height: 56px;
	color: inherit;
	text-decoration: none;
}

body.template-checkout .gv-checkout__logo .site-header__logo img {
	display: block;
	max-height: 56px;
	width: auto;
	max-width: 100%;
}

/* The bag icon cell starts at the centre line; its content is the summary's
 * width, left-aligned, the icon at its right end. */
body.template-checkout .gv-checkout__actions {
	display: flex;
	justify-content: flex-start;
	padding-left: var(--gv-checkout-gutter);
	min-width: 0;
}

body.template-checkout .gv-checkout__cart {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	max-width: var(--gv-checkout-summary);
	color: var(--gv-checkout-text);
	text-decoration: none;
}

body.template-checkout .gv-checkout__cart-icon,
body.template-checkout .gv-checkout__cart-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

body.template-checkout .gv-checkout__cart:hover .gv-checkout__cart-icon,
body.template-checkout .gv-checkout__cart:focus-visible .gv-checkout__cart-icon {
	color: var(--gv-checkout-button);
}

/* -------------------------------------------------------------- body */

/* The body is the rest of the page: the block, then the footer, and behind
 * them the rail — a pseudo-element from the centre line to the right edge
 * and from the header to the bottom, so the grey runs under the footer as
 * it does on Shopify. */
body.template-checkout .gv-checkout__body {
	position: relative;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

body.template-checkout .gv-checkout__body::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--gv-checkout-left);
	right: 0;
	background: var(--gv-checkout-rail);
	border-left: 1px solid var(--gv-checkout-border);
	pointer-events: none;
}

body.template-checkout .gv-checkout__content {
	position: relative;
	flex: 1 0 auto;
}

/* The block root: full width, no theme alignment, its columns are ours. */
body.template-checkout .gv-checkout__content .wp-block-woocommerce-checkout {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: none;
}

/* The form column: to the centre line, its content the form's width,
 * right-aligned to that line with the gutter between. */
body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-main {
	box-sizing: border-box;
	width: var(--gv-checkout-left);
	flex: 0 0 var(--gv-checkout-left);
	padding: var(--gv-checkout-gutter) var(--gv-checkout-gutter) 48px 21px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-main > * {
	width: 100%;
	max-width: var(--gv-checkout-form);
}

/* The summary column: the rest, its content the summary's width, left-aligned
 * with the gutter between; transparent — the rail is painted behind it. */
body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-sidebar {
	box-sizing: border-box;
	width: calc(100% - var(--gv-checkout-left));
	flex: 1 1 auto;
	padding: var(--gv-checkout-gutter) 21px 48px var(--gv-checkout-gutter);
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-sidebar > * {
	max-width: var(--gv-checkout-summary);
}

/* ------------------------------------------------------------ footer */

body.template-checkout .gv-checkout__footer {
	position: relative;
	box-sizing: border-box;
	width: var(--gv-checkout-left);
	padding: 0 var(--gv-checkout-gutter) 24px 21px;
	display: flex;
	justify-content: flex-end;
}

body.template-checkout .gv-checkout__footer-inner {
	width: 100%;
	max-width: var(--gv-checkout-form);
	border-top: 1px solid var(--gv-checkout-border);
	padding-top: 14px;
}

body.template-checkout .gv-checkout__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 12px;
}

body.template-checkout .gv-checkout__policies a {
	color: var(--gv-checkout-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.template-checkout .gv-checkout__policies a:hover {
	color: var(--gv-checkout-button);
}

/* -------------------------------------------------------- type & steps */

/* Section headings — the store's heading face at 700, its letter-spacing,
 * never its text-transform: Shopify's checkout set its own case. */
body.template-checkout .wc-block-checkout .wc-block-components-title,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__title,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-text,
body.template-checkout .wc-block-checkout .wc-block-components-express-payment__title {
	font-family: var(--gv-checkout-heading-family);
	font-weight: 700;
	letter-spacing: var(--gv-checkout-heading-spacing);
	text-transform: none;
	font-size: 21px;
	line-height: 1.2;
	margin: 0;
	color: var(--gv-checkout-text);
}

/* A step: Shopify's section — heading, a 14px gap, the fields; 38px to the
 * next. Woo's step numbers, left padding and connector line are gone. */
body.template-checkout .wc-block-checkout .wc-block-components-checkout-step {
	padding: 0;
	margin: 0 0 38px;
	border: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkout-step::before,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__container::after {
	display: none;
	content: none;
	border: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	padding: 0;
}

/* "Already have an account? Log in" — Shopify's "Sign in", right of the
 * heading. */
body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-content {
	font-size: 14px;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-content a {
	color: var(--gv-checkout-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__description {
	font-size: 12px;
	color: var(--gv-checkout-muted);
	margin: 0 0 12px;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__container,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__content {
	padding: 0;
	margin: 0;
}

/* Body copy inside the form. */
body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__content p,
body.template-checkout .wc-block-checkout .wc-block-components-checkbox__label,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control__label,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control__description,
body.template-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__no-results-notice {
	font-size: 14px;
	line-height: 1.5;
}

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

/* Text fields: 5px radius, a 1px hairline, white. The box's height, its
 * padding and the floating label's position and transform are Woo's own —
 * its `is-active` layout is em-based and self-consistent, and any height or
 * transform set here put the label on the border (empty) or over the value
 * (filled). Only colours, the border, the radius and the family change.
 *
 * ⚠️ The `!important`s on border, radius, background, colour and focus are
 * load-bearing: the store's gvws-custom.css (shipped verbatim) declares
 * `input[type=…], select, textarea { background-color:#f7f7f7 !important;
 * border:… !important; border-radius:6px !important; padding:10px 14px
 * !important; … }` and `:focus { border-color: var(--color-button-primary)
 * !important; box-shadow: … !important }`. Without these the fields render
 * grey, 6px and red-focused whatever the tokens say. */
body.template-checkout .wc-block-checkout .wc-block-components-text-input {
	margin-top: 12px;
}

body.template-checkout .wc-block-checkout .wc-block-components-text-input input[type="tel"],
body.template-checkout .wc-block-checkout .wc-block-components-text-input input[type="url"],
body.template-checkout .wc-block-checkout .wc-block-components-text-input input[type="text"],
body.template-checkout .wc-block-checkout .wc-block-components-text-input input[type="email"],
body.template-checkout .wc-block-checkout .wc-block-components-text-input input[type="number"],
body.template-checkout .wc-block-checkout .wc-block-components-text-input input[type="password"],
body.template-checkout .wc-block-checkout .wc-block-components-textarea textarea {
	border: 1px solid var(--gv-checkout-border) !important;
	border-radius: var(--gv-checkout-radius) !important;
	background-color: var(--gv-checkout-bg) !important;
	color: var(--gv-checkout-text) !important;
	font-family: var(--gv-checkout-body-family);
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none !important;
	outline: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-text-input input:focus,
body.template-checkout .wc-block-checkout .wc-block-components-textarea textarea:focus {
	border-color: var(--gv-checkout-focus) !important;
	box-shadow: 0 0 0 1px var(--gv-checkout-focus) !important;
	outline: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-text-input label {
	color: var(--gv-checkout-muted);
	font-family: var(--gv-checkout-body-family);
	letter-spacing: normal;
	text-transform: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-text-input.has-error input,
body.template-checkout .wc-block-checkout .wc-block-components-text-input.has-error input:focus {
	border-color: var(--gv-checkout-error);
	box-shadow: 0 0 0 1px var(--gv-checkout-error);
}

body.template-checkout .wc-block-checkout .wc-block-components-text-input.has-error label,
body.template-checkout .wc-block-checkout .wc-block-components-validation-error p {
	color: var(--gv-checkout-error);
	font-size: 12px;
}

body.template-checkout .wc-block-checkout .wc-block-components-validation-error {
	padding: 4px 0 0;
}

/* Selects — Woo's native select (country, state) and its combobox — in the
 * same box as a text field, the chevron in the store's text colour. As
 * above: Woo's geometry and label transform, this theme's colours.
 *
 * ⚠️ The one geometry rule here is the PADDING, and only because
 * gvws-custom.css's `select { padding: 10px 14px !important }` (see the
 * text-field note) flattened Woo's own — a 1.5em top that keeps the value
 * below the small floating label, .5em bottom, room for the chevron on the
 * right, the text inputs' 14px on the left. Em-based like Woo's, so it
 * scales with the control's font-size as the label does. */
body.template-checkout .wc-block-checkout .wc-block-components-select,
body.template-checkout .wc-block-checkout .wc-block-components-combobox {
	margin-top: 12px;
}

body.template-checkout .wc-block-checkout .wc-block-components-select .wc-block-components-select__select,
body.template-checkout .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
body.template-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-country-input select,
body.template-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-state-input select {
	padding: 1.5em 2.5em 0.5em 0.875em !important;
	border: 1px solid var(--gv-checkout-border) !important;
	border-radius: var(--gv-checkout-radius) !important;
	background-color: var(--gv-checkout-bg) !important;
	background-image: none; /* compiled.css paints Expanse's own chevron on every <select>; Woo's __expand svg is the one drawn */
	color: var(--gv-checkout-text) !important;
	font-family: var(--gv-checkout-body-family);
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none !important;
}

body.template-checkout .wc-block-checkout .wc-block-components-select .wc-block-components-select__select:focus,
body.template-checkout .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus {
	border-color: var(--gv-checkout-focus) !important;
	box-shadow: 0 0 0 1px var(--gv-checkout-focus) !important;
	outline: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-select .wc-block-components-select__label,
body.template-checkout .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control label {
	color: var(--gv-checkout-muted);
	font-family: var(--gv-checkout-body-family);
	letter-spacing: normal;
	text-transform: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-select .wc-block-components-select__expand,
body.template-checkout .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control .components-combobox-control__suggestions-container::after {
	fill: var(--gv-checkout-text);
	color: var(--gv-checkout-text);
}

/* The address grid: Woo lays first/last name side by side and the rest
 * full width; keep that, tighten its gaps to the field spacing. */
body.template-checkout .wc-block-checkout .wc-block-components-address-form {
	gap: 0 12px;
}

body.template-checkout .wc-block-checkout .wc-block-components-address-form__address_2-toggle,
body.template-checkout .wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2 button {
	font-size: 14px;
	color: var(--gv-checkout-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	border: 0;
	padding: 0;
	margin: 12px 0 0;
}

/* Checkboxes — an 18px box, 3px radius, a hairline, white; checked fills
 * with the store's button colour under a white mark, unchecked shows no
 * mark. Covers Woo's own (billing-same, order note, terms) and any
 * additional checkout field gv-commerce registers in the contact step.
 *
 * ⚠️ The `!important`s are load-bearing: the store's gvws-custom.css
 * (shipped verbatim, not editable here) declares `input[type="checkbox"],
 * input[type="radio"] { width: auto !important; height: auto !important;
 * min-height: auto !important; padding: 0 !important }`, which collapsed
 * this box to a line on staging. Dimensions only; nothing else needs it. */
body.template-checkout .wc-block-checkout .wc-block-components-checkbox {
	margin-top: 12px;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	position: relative;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkbox label input.wc-block-components-checkbox__input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	box-sizing: border-box;
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px;
	max-height: 18px;
	margin: 2px 0 0;
	padding: 0 !important;
	border-width: 1px;
	border-style: solid;
	border-color: var(--gv-checkout-border);
	border-radius: 3px;
	background-color: var(--gv-checkout-bg);
	background-image: none;
	box-shadow: none;
	position: relative;
	cursor: pointer;
	vertical-align: top;
	line-height: normal;
	overflow: visible;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkbox label input.wc-block-components-checkbox__input[type="checkbox"]:hover {
	border-color: var(--gv-checkout-muted);
}

body.template-checkout .wc-block-checkout .wc-block-components-checkbox label input.wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: none;
	border-color: var(--gv-checkout-focus);
	box-shadow: 0 0 0 1px var(--gv-checkout-focus);
}

body.template-checkout .wc-block-checkout .wc-block-components-checkbox label input.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--gv-checkout-button);
	border-color: var(--gv-checkout-button);
}

/* The mark: Woo's SVG next to the input, hidden until checked. */
body.template-checkout .wc-block-checkout .wc-block-components-checkbox label .wc-block-components-checkbox__mark {
	display: none;
	position: absolute;
	left: 3px;
	top: 5px;
	width: 12px;
	height: 12px;
	margin: 0;
	fill: var(--gv-checkout-button-text);
	color: var(--gv-checkout-button-text);
	pointer-events: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkbox label input.wc-block-components-checkbox__input[type="checkbox"]:checked + .wc-block-components-checkbox__mark {
	display: block;
}

body.template-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__label {
	flex: 1 1 auto;
	padding: 0;
	margin: 0;
	color: var(--gv-checkout-text);
}

/* Radios — shipping rates and payment methods. Shopify draws the option
 * list as one rounded box with hairlines between the rows; the selected
 * row tints and its radio fills with the button colour. */
body.template-checkout .wc-block-checkout .wc-block-components-radio-control,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion {
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-bg);
	overflow: hidden;
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__option,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control-accordion-option {
	margin: 0;
	padding: 14px 14px 14px 42px;
	border: 0;
	border-top: 1px solid var(--gv-checkout-border);
	font-size: 14px;
	line-height: 1.5;
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option:first-child,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control-accordion-option:first-child,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control-accordion-option:first-child > .wc-block-components-radio-control__option {
	border-top: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option::after,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__option::after {
	display: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__option--checked-option-highlighted {
	background: var(--gv-checkout-rail);
	box-shadow: none;
	border-radius: 0;
}

/* The radio: an 18px ring — grey unselected, the button colour selected
 * with a 10px dot of the same inside (Woo's own `::before` dot, re-sized).
 * Dimensions `!important` for the same reason as the checkbox above. */
body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__input {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	position: absolute;
	left: 14px;
	top: 50%;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px;
	max-height: 18px;
	margin: 0;
	padding: 0 !important;
	transform: translateY(-50%);
	border-width: 1px;
	border-style: solid;
	border-color: var(--gv-checkout-border);
	border-radius: 50%;
	background-color: var(--gv-checkout-bg);
	background-image: none;
	box-shadow: none;
	cursor: pointer;
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__input:checked {
	border-color: var(--gv-checkout-button);
	background-color: var(--gv-checkout-bg);
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input::before,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__input::before {
	display: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__input:checked::before {
	content: "";
	display: block;
	position: absolute;
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	width: auto;
	height: auto;
	margin: 0;
	transform: none;
	border-radius: 50%;
	background: var(--gv-checkout-button);
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control__input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--gv-checkout-focus);
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control__label-group,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control__label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--gv-checkout-text);
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-label {
	font-size: 14px;
	color: var(--gv-checkout-text);
}

body.template-checkout .wc-block-checkout .wc-block-components-radio-control__description,
body.template-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-description {
	font-size: 12px;
	color: var(--gv-checkout-muted);
}

/* The "enter your address to see shipping" placeholder — Shopify's grey
 * rounded panel with centred copy. */
body.template-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__no-results-notice,
body.template-checkout .wc-block-checkout .wc-block-components-notice-banner.is-info.wc-block-components-shipping-rates-control__no-results-notice {
	display: block;
	padding: 18px 20px;
	border: 0;
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-rail);
	color: var(--gv-checkout-muted);
	text-align: center;
	font-size: 14px;
	box-shadow: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__no-results-notice .wc-block-components-notice-banner__content {
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__no-results-notice > svg {
	display: none;
}

/* Payment: the accordion's open panel (card fields) sits on the rail tint
 * inside the box; the "All transactions are secure and encrypted" line
 * under the heading is Shopify's. */
body.template-checkout .wc-block-checkout .wc-block-components-radio-control-accordion .wc-block-components-radio-control-accordion-content {
	padding: 14px;
	background: var(--gv-checkout-rail);
	border-top: 1px solid var(--gv-checkout-border);
	font-size: 14px;
}

body.template-checkout .wc-block-checkout .wc-block-components-payment-method-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

body.template-checkout .wc-block-checkout .wc-block-components-payment-method-icons {
	margin: 0 0 0 auto;
	gap: 4px;
}

body.template-checkout .wc-block-checkout .wc-block-components-payment-method-icon {
	height: 24px;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-payment-methods__save-card-info {
	margin-top: 12px;
}

/* Notices inside the form — Woo's banner, rounded to the field radius. */
body.template-checkout .wc-block-checkout .wc-block-components-notice-banner {
	border-radius: var(--gv-checkout-radius);
	border-width: 1px;
	font-size: 14px;
	margin: 0 0 16px;
}

body.template-checkout .wc-block-checkout .wc-block-components-notice-banner.is-error {
	border-color: var(--gv-checkout-error);
}

/* Order note and terms: small print under the payment box. */
body.template-checkout .wc-block-checkout .wc-block-components-checkout-add-note,
body.template-checkout .wc-block-checkout .wc-block-checkout__add-note {
	margin: 0 0 24px;
}

body.template-checkout .wc-block-checkout .wc-block-checkout__terms,
body.template-checkout .wc-block-checkout .wc-block-checkout__terms p {
	font-size: 12px;
	line-height: 1.5;
	color: var(--gv-checkout-muted);
	margin: 0 0 24px;
}

body.template-checkout .wc-block-checkout .wc-block-checkout__terms a {
	color: var(--gv-checkout-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

/* Shopify's "Pay now": full width, the store's button colour, 16px/700,
 * 5px radius. Woo's "Return to cart" beside it is not drawn — the bag icon
 * in the header is that link. */
body.template-checkout .wc-block-checkout .wc-block-checkout__actions {
	margin: 0;
	padding: 0;
}

body.template-checkout .wc-block-checkout .wc-block-checkout__actions_row {
	display: block;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
	display: none;
}

body.template-checkout .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 56px;
	min-height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 2px solid var(--gv-checkout-button); /* 080: the system's 2 px brand border, so the hover swap keeps the shape */
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-button);
	color: var(--gv-checkout-button-text);
	font-family: var(--gv-checkout-body-family);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

body.template-checkout .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover,
body.template-checkout .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:focus-visible {
	background: var(--gv-checkout-button-hover);
	color: var(--gv-checkout-button-hover-text);
	border-color: var(--gv-checkout-button);
	outline: none;
	box-shadow: 0 0 0 2px var(--gv-checkout-bg), 0 0 0 4px var(--gv-checkout-button);
}

body.template-checkout .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:disabled,
body.template-checkout .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button[aria-disabled="true"] {
	background: var(--gv-checkout-disabled-bg);
	color: var(--gv-checkout-disabled-text);
	border: 2px solid var(--gv-checkout-border); /* the same 2 px as the enabled state — no 1 px shift while Woo toggles disabled */
	cursor: not-allowed;
	box-shadow: none;
}

body.template-checkout .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	font: inherit;
}

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

/* The block's summary furniture — the sidebar's white box, the summary
 * block's border, the title bar, the panels and the totals wrappers —
 * carries borders Shopify does not draw: its totals are bare rows on the
 * rail. All off, then back where Shopify has white: the item row and the
 * coupon field (below), and its two hairlines — under the coupon row and
 * above the total. */
body.template-checkout .wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar,
body.template-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__content,
body.template-checkout .wc-block-checkout .wc-block-components-order-summary,
body.template-checkout .wc-block-checkout .wc-block-components-totals-wrapper,
body.template-checkout .wc-block-checkout .wc-block-components-panel,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

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

body.template-checkout .wc-block-checkout .wc-block-components-totals-wrapper {
	padding: 0;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-wrapper:empty {
	display: none;
}

/* The "Order summary" title: not drawn at all on desktop (Shopify has the
 * items only); on narrow screens it is Woo's collapse toggle — see below. */
body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title {
	display: none;
	padding: 0;
	margin: 0;
}

/* Line items: a 64px thumbnail in a hairline box, the black quantity badge
 * on its corner; name, then the variant in muted 12px; the price right. */
body.template-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	margin: 0 0 20px;
}

body.template-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary__content {
	padding: 16px;
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-bg);
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0 0 18px;
	margin: 0;
	border: 0;
	font-size: 14px;
	line-height: 1.4;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item:last-child {
	padding-bottom: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__image {
	flex: 0 0 64px;
	position: relative;
	width: 64px;
	max-width: 64px;
	height: 64px;
	margin: 0;
	border: 1px solid var(--gv-checkout-border);
	border-radius: 8px;
	background: var(--gv-checkout-bg);
	overflow: visible;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 7px;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__quantity {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 11px;
	background: var(--gv-checkout-text);
	color: var(--gv-checkout-bg);
	font-family: var(--gv-checkout-body-family);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* The name is a heading-styled element in Woo; the store's heading
 * uppercase leaked into it, so the whole font shorthand is set. */
body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name,
body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name a {
	font: 500 14px/1.3 var(--gv-checkout-body-family);
	letter-spacing: normal;
	text-transform: none;
	color: var(--gv-checkout-text);
	text-decoration: none;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details,
body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details__value,
body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details__name {
	font-size: 12px;
	color: var(--gv-checkout-muted);
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details {
	list-style: none;
	padding: 0;
}

/* Woo prints a per-unit price under the name; Shopify shows the line total
 * on the right only. */
body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-prices,
body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-price {
	display: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-order-summary-item__total-price {
	flex: 0 0 auto;
	padding: 4px 0 0;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--gv-checkout-text);
	text-align: right;
}

/* The coupon: Woo's "Add a coupon" panel. Closed, its button is drawn as a
 * field ("Discount code" with a chevron); open, the field and the Apply
 * button sit on one row as Shopify's do. The hairline Shopify draws under
 * the coupon row sits under the items instead when the merchant has
 * removed the coupon block. */
body.template-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__content:not(:has(.wp-block-woocommerce-checkout-order-summary-coupon-form-block)) .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	padding: 0 0 20px;
	border-bottom: 1px solid var(--gv-checkout-border);
	margin: 0 0 20px;
}

body.template-checkout .wc-block-checkout .wc-block-components-panel .wc-block-components-panel__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 0 12px;
	margin: 0;
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-bg);
	color: var(--gv-checkout-muted);
	font-family: var(--gv-checkout-body-family);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

body.template-checkout .wc-block-checkout .wc-block-components-panel .wc-block-components-panel__button:hover,
body.template-checkout .wc-block-checkout .wc-block-components-panel .wc-block-components-panel__button:focus-visible {
	border-color: var(--gv-checkout-muted);
	outline: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-panel .wc-block-components-panel__button svg {
	fill: var(--gv-checkout-text);
}

/* Open: the trigger becomes a plain label above the row. */
body.template-checkout .wc-block-checkout .wc-block-components-panel .wc-block-components-panel__button[aria-expanded="true"] {
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gv-checkout-text);
	margin: 0 0 8px;
}

body.template-checkout .wc-block-checkout .wc-block-components-panel .wc-block-components-panel__content {
	padding: 0;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__form {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1 1 auto;
	margin: 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	height: 52px;
	min-height: 52px;
	padding: 0 18px;
	margin: 0;
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-rail);
	color: var(--gv-checkout-muted);
	font-family: var(--gv-checkout-body-family);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button:hover,
body.template-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button:focus-visible {
	background: var(--gv-checkout-button);
	border-color: var(--gv-checkout-button);
	color: var(--gv-checkout-button-text);
	outline: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button:disabled {
	opacity: 1;
	background: var(--gv-checkout-rail);
	border-color: var(--gv-checkout-border);
	color: var(--gv-checkout-disabled-text);
	cursor: not-allowed;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__content {
	padding: 0;
}

/* Applied coupons — Woo's chip row under the discount line. */
body.template-checkout .wc-block-checkout .wc-block-components-totals-discount .wc-block-components-totals-discount__coupon-list {
	padding: 4px 0 0;
	margin: 0;
	list-style: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-chip {
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-bg);
	border: 1px solid var(--gv-checkout-border);
	color: var(--gv-checkout-text);
	font-size: 12px;
}

/* Totals: Subtotal, Shipping, Taxes in 14px rows; Total 19px/700 above a
 * hairline, the currency code small before the amount. */
body.template-checkout .wc-block-checkout .wc-block-components-totals-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px 10px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--gv-checkout-text);
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-item__label {
	font-weight: 400;
	font-size: 14px;
	flex: 1 1 auto;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-item__value {
	font-weight: 400;
	font-size: 14px;
	text-align: right;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-item__description {
	flex-basis: 100%;
	font-size: 12px;
	color: var(--gv-checkout-muted);
	margin: 2px 0 0;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-item__description a {
	color: var(--gv-checkout-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Shipping before an address: Woo's copy, Shopify's muted pill. */
body.template-checkout .wc-block-checkout .wc-block-components-totals-shipping .wc-block-components-totals-shipping__via,
body.template-checkout .wc-block-checkout .wc-block-components-totals-shipping .wc-block-components-shipping-address {
	font-size: 12px;
	color: var(--gv-checkout-muted);
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-shipping .wc-block-components-totals-shipping__change-address__link,
body.template-checkout .wc-block-checkout .wc-block-components-totals-shipping .wc-block-components-totals-shipping__change-address-button {
	font-size: 12px;
	color: var(--gv-checkout-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 0;
	background: none;
	border: 0;
}

/* The total row. */
body.template-checkout .wc-block-checkout .wc-block-components-totals-footer-item {
	padding: 14px 16px 0;
	margin: 6px 0 0;
	border-top: 1px solid var(--gv-checkout-border);
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--gv-checkout-heading-family);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: var(--gv-checkout-heading-spacing);
	text-transform: none;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
	font-size: 19px;
}

body.template-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	font-size: 12px;
	font-weight: 400;
	color: var(--gv-checkout-muted);
}

body.template-checkout .wc-block-checkout .wc-block-components-formatted-money-amount {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	white-space: nowrap;
}

/* --------------------------------------------------- express payment */

/* Drawn only when a gateway offers express buttons: a hairline box, the
 * "OR" divider Woo draws through a line in the border colour. */
body.template-checkout .wc-block-checkout .wc-block-components-express-payment {
	margin: 0 0 30px;
}

body.template-checkout .wc-block-checkout .wc-block-components-express-payment .wc-block-components-express-payment__title-container {
	margin: 0 0 12px;
}

body.template-checkout .wc-block-checkout .wc-block-components-express-payment .wc-block-components-express-payment__title {
	font-size: 14px;
	font-family: var(--gv-checkout-body-family);
	font-weight: 400;
	color: var(--gv-checkout-muted);
	text-align: center;
}

body.template-checkout .wc-block-checkout .wc-block-components-express-payment .wc-block-components-express-payment__content {
	border: 0;
	padding: 0;
	border-radius: var(--gv-checkout-radius);
}

body.template-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule {
	margin: 24px 0 0;
	font-size: 12px;
	color: var(--gv-checkout-muted);
}

body.template-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule::before,
body.template-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule::after {
	border-color: var(--gv-checkout-border);
}

/* ----------------------------------------------- thank-you / pay page */

/* `order-pay` (and a shortcode checkout) are Woo's classic templates inside
 * the same chrome: one column, the width of the two, no rail; the classic
 * sheet's tables restyled to the summary's typography. `order-received` has
 * its own two-column template — see the thank-you block at the end. */
body.template-checkout .gv-checkout__body--classic::before {
	display: none;
}

body.template-checkout .gv-checkout__body--classic .gv-checkout__content {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--gv-checkout-form) + var(--gv-checkout-summary) + 2 * var(--gv-checkout-gutter));
	margin: 0 auto;
	padding: var(--gv-checkout-gutter) 21px 48px;
}

body.template-checkout .gv-checkout__body--classic .gv-checkout__footer {
	width: 100%;
	max-width: calc(var(--gv-checkout-form) + var(--gv-checkout-summary) + 2 * var(--gv-checkout-gutter));
	margin: 0 auto;
	padding: 0 21px 24px;
	justify-content: flex-start;
}

body.template-checkout .gv-checkout__body--classic .gv-checkout__footer-inner {
	max-width: none;
}

body.template-checkout .gv-checkout__content .woocommerce-order,
body.template-checkout .gv-checkout__content .woocommerce-checkout-review-order,
body.template-checkout .woocommerce-order-pay .gv-checkout__content {
	font-size: 14px;
	line-height: 1.5;
}

body.template-checkout .gv-checkout__content .woocommerce-notice.woocommerce-thankyou-order-received,
body.template-checkout .gv-checkout__content .woocommerce-order h2,
body.template-checkout .gv-checkout__content .woocommerce-order h3,
body.template-checkout .woocommerce-order-pay .gv-checkout__content h2,
body.template-checkout .woocommerce-order-pay .gv-checkout__content h3 {
	font-family: var(--gv-checkout-heading-family);
	font-weight: 700;
	letter-spacing: var(--gv-checkout-heading-spacing);
	text-transform: none;
	font-size: 21px;
	line-height: 1.2;
	margin: 0 0 14px;
	color: var(--gv-checkout-text);
}

body.template-checkout .gv-checkout__content .woocommerce-notice.woocommerce-thankyou-order-received {
	font-size: 28px;
	margin: 0 0 24px;
}

body.template-checkout .gv-checkout__content .woocommerce-notice.woocommerce-thankyou-order-failed {
	color: var(--gv-checkout-error);
}

/* Order overview — Woo's inline list becomes Shopify's row of cards. */
body.template-checkout .gv-checkout__content .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 38px;
	padding: 0;
}

body.template-checkout .gv-checkout__content .woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	font-size: 12px;
	line-height: 1.4;
	text-transform: none;
	color: var(--gv-checkout-muted);
}

body.template-checkout .gv-checkout__content .woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--gv-checkout-text);
	text-transform: none;
}

/* The order details table on the rail tint, in the summary's rows. */
body.template-checkout .gv-checkout__content .woocommerce-order-details,
body.template-checkout .gv-checkout__content .woocommerce-customer-details {
	margin: 0 0 38px;
}

body.template-checkout .gv-checkout__content table.woocommerce-table--order-details,
body.template-checkout .gv-checkout__content table.shop_table {
	width: 100%;
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--gv-checkout-rail);
	font-size: 14px;
	margin: 0;
	overflow: hidden;
}

body.template-checkout .gv-checkout__content table.shop_table th,
body.template-checkout .gv-checkout__content table.shop_table td {
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid var(--gv-checkout-border);
	text-align: left;
	vertical-align: top;
	color: var(--gv-checkout-text);
	font-weight: 400;
}

body.template-checkout .gv-checkout__content table.shop_table thead th {
	border-top: 0;
	font-size: 12px;
	color: var(--gv-checkout-muted);
	font-weight: 500;
}

body.template-checkout .gv-checkout__content table.shop_table th:last-child,
body.template-checkout .gv-checkout__content table.shop_table td:last-child {
	text-align: right;
}

body.template-checkout .gv-checkout__content table.shop_table .product-quantity {
	color: var(--gv-checkout-muted);
}

body.template-checkout .gv-checkout__content table.shop_table .wc-item-meta,
body.template-checkout .gv-checkout__content table.shop_table .wc-item-meta li,
body.template-checkout .gv-checkout__content table.shop_table .wc-item-meta p {
	font-size: 12px;
	color: var(--gv-checkout-muted);
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: block;
}

body.template-checkout .gv-checkout__content table.shop_table tfoot th,
body.template-checkout .gv-checkout__content table.shop_table tfoot td {
	font-weight: 400;
}

body.template-checkout .gv-checkout__content table.shop_table tfoot tr:last-child th,
body.template-checkout .gv-checkout__content table.shop_table tfoot tr:last-child td {
	font-size: 19px;
	font-weight: 700;
	padding-top: 14px;
	padding-bottom: 14px;
}

body.template-checkout .gv-checkout__content table.shop_table tfoot tr:last-child th {
	font-family: var(--gv-checkout-heading-family);
	letter-spacing: var(--gv-checkout-heading-spacing);
}

body.template-checkout .gv-checkout__content table.shop_table a {
	color: var(--gv-checkout-text);
	text-decoration: none;
}

body.template-checkout .gv-checkout__content table.shop_table a:hover {
	text-decoration: underline;
}

/* Addresses (woocommerce/order/order-details-customer.php). */
body.template-checkout .gv-checkout__content .woocommerce-customer-details p {
	margin: 0 0 8px;
	font-size: 14px;
}

body.template-checkout .gv-checkout__content .woocommerce-customer-details .heading-xs {
	font-weight: 500;
}

body.template-checkout .gv-checkout__content .woocommerce-customer-details address {
	font-style: normal;
	border: 0;
	padding: 0;
	margin: 0 0 8px;
}

body.template-checkout .gv-checkout__content .woocommerce-customer-details hr.hr--medium {
	border: 0;
	border-top: 1px solid var(--gv-checkout-border);
	margin: 18px 0;
}

/* Pay-for-order: the classic payment box and its button, as the block's. */
body.template-checkout .gv-checkout__content #payment.woocommerce-checkout-payment,
body.template-checkout .woocommerce-order-pay .gv-checkout__content #payment {
	background: transparent;
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
}

body.template-checkout .gv-checkout__content #payment .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.template-checkout .gv-checkout__content #payment .wc_payment_method {
	padding: 14px;
	border-top: 1px solid var(--gv-checkout-border);
	font-size: 14px;
}

body.template-checkout .gv-checkout__content #payment .wc_payment_method:first-child {
	border-top: 0;
}

body.template-checkout .gv-checkout__content #payment div.payment_box {
	background: var(--gv-checkout-rail);
	border-radius: var(--gv-checkout-radius);
	font-size: 14px;
	color: var(--gv-checkout-text);
}

body.template-checkout .gv-checkout__content #payment div.payment_box::before {
	border-bottom-color: var(--gv-checkout-rail);
}

body.template-checkout .gv-checkout__content #payment .place-order {
	padding: 14px;
	border-top: 1px solid var(--gv-checkout-border);
}

body.template-checkout .gv-checkout__content #payment .place-order button.button,
body.template-checkout .gv-checkout__content #payment .place-order button.alt {
	display: block;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-button);
	color: var(--gv-checkout-button-text);
	font-family: var(--gv-checkout-body-family);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

body.template-checkout .gv-checkout__content #payment .place-order button.button:hover,
body.template-checkout .gv-checkout__content #payment .place-order button.alt:hover {
	background: var(--gv-checkout-button-hover);
	color: var(--gv-checkout-button-hover-text);
	box-shadow: inset 0 0 0 2px var(--gv-checkout-button);
}

/* Woo's classic notices on these two pages — the theme's own markup
 * (woocommerce/notices/*.php) in the checkout's radius and colours. */
body.template-checkout .gv-checkout__content .errors,
body.template-checkout .gv-checkout__content .woocommerce-message,
body.template-checkout .gv-checkout__content .woocommerce-info {
	border-radius: var(--gv-checkout-radius);
	font-size: 14px;
	margin: 0 0 24px;
}

/* -------------------------------------------------------------- mobile */

/* Under 1000px — where Shopify collapses too — one column: the header's two
 * cells hug the edges, the summary comes first as Woo's collapsible band on
 * the rail tint, the form below, the policy row last. The rail pseudo is
 * gone; the band paints its own tint. Woo's own container classes
 * (`is-medium`, `is-small`, `is-mobile`) go column at the same point in the
 * block's width, which here is the viewport's. */
@media only screen and (max-width: 999px) {
	body.template-checkout .gv-checkout__header-inner {
		grid-template-columns: 1fr auto;
		min-height: 64px;
		padding: 0 21px;
	}

	body.template-checkout .gv-checkout__logo {
		justify-content: flex-start;
		padding-right: 0;
	}

	body.template-checkout .gv-checkout__logo .site-header__logo a,
	body.template-checkout .gv-checkout__logo .site-header__logo img {
		max-height: 40px;
	}

	body.template-checkout .gv-checkout__actions {
		padding-left: 0;
	}

	body.template-checkout .gv-checkout__body::before {
		display: none;
	}

	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout,
	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout.is-large,
	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout.is-medium,
	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout.is-small,
	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout.is-mobile {
		flex-direction: column;
	}

	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-main {
		width: 100%;
		flex: 0 0 auto;
		padding: 24px 21px 40px;
		align-items: stretch;
	}

	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-main > * {
		max-width: none;
	}

	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		order: -1;
		width: 100%;
		flex: 0 0 auto;
		padding: 0 21px;
		background: var(--gv-checkout-rail);
		border-bottom: 1px solid var(--gv-checkout-border);
	}

	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-sidebar > * {
		max-width: none;
	}

	/* Woo's toggle: "Order summary" left, the chevron (and, collapsed, the
	 * total) right, in body type — Shopify's "Show order summary" bar. */
	body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 56px;
		padding: 0;
		margin: 0;
		cursor: pointer;
		color: var(--gv-checkout-text);
	}

	body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
		font-family: var(--gv-checkout-body-family);
		font-weight: 400;
		font-size: 14px;
		letter-spacing: normal;
		text-decoration: underline;
		text-underline-offset: 2px;
		margin: 0;
	}

	body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title svg,
	body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-icon {
		fill: var(--gv-checkout-text);
		flex: 0 0 auto;
	}

	body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-formatted-money-amount {
		font-size: 19px;
		font-weight: 700;
		margin-left: auto;
	}

	body.template-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__content {
		padding: 0 0 20px;
	}

	body.template-checkout .gv-checkout__footer,
	body.template-checkout .gv-checkout__body--classic .gv-checkout__footer {
		width: 100%;
		padding: 0 21px 24px;
		justify-content: flex-start;
	}

	body.template-checkout .gv-checkout__footer-inner {
		max-width: none;
	}

	body.template-checkout .gv-checkout__body--classic .gv-checkout__content {
		padding: 24px 21px 40px;
	}
}

@media only screen and (max-width: 520px) {
	body.template-checkout .gv-checkout__header-inner,
	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-main,
	body.template-checkout .gv-checkout__content .wc-block-components-sidebar-layout .wc-block-components-sidebar,
	body.template-checkout .gv-checkout__footer,
	body.template-checkout .gv-checkout__body--classic .gv-checkout__content,
	body.template-checkout .gv-checkout__body--classic .gv-checkout__footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.template-checkout .wc-block-checkout .wc-block-components-title,
	body.template-checkout .wc-block-checkout .wc-block-components-checkout-step__title {
		font-size: 19px;
	}

	body.template-checkout .wc-block-checkout .wc-block-components-checkout-step {
		margin-bottom: 30px;
	}
}

/* Classic templates (order-pay, thank-you): Woo's own `button.button` /
   `a.button` carry its purple default. The brand button, same as the block's
   Place Order. Scoped to the chrome so the storefront's buttons are untouched. */
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce button.button,
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce a.button,
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce input.button,
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce #place_order {
  background-color: var(--gv-checkout-button) !important;
  color: var(--gv-checkout-button-text) !important;
  border: 0;
  border-radius: 5px;
  font: 700 16px/1 var(--gv-checkout-body-family);
  padding: 18px 24px;
}
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce button.button:hover,
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce a.button:hover,
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce input.button:hover,
body.template-checkout .gv-checkout__body--classic .gv-checkout__content .woocommerce #place_order:hover {
  background-color: var(--gv-checkout-button-hover) !important;
  color: var(--gv-checkout-button-hover-text) !important;
  box-shadow: inset 0 0 0 2px var(--gv-checkout-button) !important;
}

/* ----------------------------------------------- thank-you page (woocommerce/checkout/thankyou.php) */

/* Shopify's order-status shape: the block's two columns, laid out by the same
 * numbers as the form (`.gv-received__main` = the form column, `__rail` = the
 * summary column on the painted rail). Rulings 1a–1d, Carlos 2026-09-21. */
body.template-checkout .gv-checkout__body--received .gv-checkout__content .gv-received {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	font-size: 14px;
	line-height: 1.5;
}

body.template-checkout .gv-checkout__body--received .gv-received__main {
	box-sizing: border-box;
	width: var(--gv-checkout-left);
	flex: 0 0 var(--gv-checkout-left);
	padding: var(--gv-checkout-gutter) var(--gv-checkout-gutter) 48px 21px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

body.template-checkout .gv-checkout__body--received .gv-received__main > * {
	width: 100%;
	max-width: var(--gv-checkout-form);
}

body.template-checkout .gv-checkout__body--received .gv-received__rail {
	box-sizing: border-box;
	width: calc(100% - var(--gv-checkout-left));
	flex: 1 1 auto;
	padding: var(--gv-checkout-gutter) 21px 48px var(--gv-checkout-gutter);
}

body.template-checkout .gv-checkout__body--received .gv-received__rail > * {
	max-width: var(--gv-checkout-summary);
}

/* the guest revisit gate (checkout/form-verify-email.php): the same card, the checkout's field + button */
body.template-checkout .gv-received--verify .gv-received__main {
	padding-top: 0;
}

body.template-checkout .gv-received--none .gv-received__main {
	padding-bottom: 16px;
}

body.template-checkout .gv-received__verify label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gv-checkout-muted);
	margin: 0 0 6px;
}

body.template-checkout .gv-checkout__content .gv-received__verify input.input-text[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	background: var(--gv-checkout-bg);
	color: var(--gv-checkout-text);
	font: 14px/1.5 var(--gv-checkout-body-family);
	margin: 0 0 14px;
}

body.template-checkout .gv-received__verify input[type="email"]:focus-visible {
	outline: 2px solid var(--gv-checkout-focus);
	outline-offset: 1px;
}

body.template-checkout .gv-received__verify .woocommerce-error {
	list-style: none;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-left: 3px solid var(--gv-checkout-error);
	color: var(--gv-checkout-text);
	font-size: 13px;
}

body.template-checkout .gv-received__details {
	margin-bottom: 0;
}

/* heading */
body.template-checkout .gv-received__hello {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0 0 22px;
}

body.template-checkout .gv-received__mark {
	color: #1a7f37;
	flex: 0 0 auto;
	display: flex;
}

body.template-checkout .gv-received[data-state="hold"] .gv-received__mark,
body.template-checkout .gv-received[data-state="pending"] .gv-received__mark {
	color: #9a6700;
}

body.template-checkout .gv-received[data-state="failed"] .gv-received__mark,
body.template-checkout .gv-received[data-state="cancelled"] .gv-received__mark,
body.template-checkout .gv-received[data-state="refunded"] .gv-received__mark {
	color: var(--gv-checkout-error);
}

body.template-checkout .gv-received__eyebrow {
	margin: 0 0 2px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gv-checkout-muted);
}

body.template-checkout .gv-checkout__content .gv-received__title.woocommerce-thankyou-order-received {
	font-family: var(--gv-checkout-heading-family);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: var(--gv-checkout-heading-spacing);
	text-transform: none;
	text-wrap: balance;
	margin: 0;
	color: var(--gv-checkout-text);
}

/* cards */
body.template-checkout .gv-received__card {
	border: 1px solid var(--gv-checkout-border);
	border-radius: var(--gv-checkout-radius);
	padding: 18px 20px;
	margin: 0 0 16px;
	background: var(--gv-checkout-bg);
}

body.template-checkout .gv-checkout__content .gv-received__card h2 {
	font-family: var(--gv-checkout-heading-family);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: var(--gv-checkout-heading-spacing);
	text-transform: none;
	margin: 0 0 8px;
	color: var(--gv-checkout-text);
}

body.template-checkout .gv-received__card p {
	margin: 0 0 10px;
}

body.template-checkout .gv-received__card p:last-child {
	margin-bottom: 0;
}

body.template-checkout .gv-received__card--hold {
	border-color: color-mix(in srgb, #9a6700 45%, var(--gv-checkout-bg));
	background: color-mix(in srgb, #9a6700 6%, var(--gv-checkout-bg));
}

body.template-checkout .gv-received__card--failed {
	border-color: color-mix(in srgb, var(--gv-checkout-error) 45%, var(--gv-checkout-bg));
}

body.template-checkout .gv-checkout__content .gv-received__card--failed .woocommerce-notice {
	color: var(--gv-checkout-text);
	font-size: 14px;
	margin: 0 0 10px;
}

body.template-checkout .gv-received__muted {
	color: var(--gv-checkout-muted);
}

body.template-checkout .gv-received__eta {
	margin-top: 12px;
}

body.template-checkout .gv-received__notice {
	font-size: 13px;
	padding: 10px 12px;
	margin: 0 0 16px;
	border-left: 3px solid var(--gv-checkout-button);
	background: color-mix(in srgb, var(--gv-checkout-button) 6%, var(--gv-checkout-bg));
}

/* order details, two columns of label / value */
body.template-checkout .gv-received__info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 0;
}

body.template-checkout .gv-received__info dt {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gv-checkout-muted);
	margin: 0 0 4px;
}

body.template-checkout .gv-received__info dd {
	margin: 0;
}

body.template-checkout .gv-received__note {
	margin: 14px 0 0;
	font-size: 13px;
}

/* actions */
body.template-checkout .gv-received__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 22px 0 0;
}

body.template-checkout .gv-received__button {
	display: inline-block;
	background: var(--gv-checkout-button);
	color: var(--gv-checkout-button-text);
	text-decoration: none;
	font-family: var(--gv-checkout-body-family);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	padding: 17px 24px;
	border-radius: var(--gv-checkout-radius);
	border: 1px solid var(--gv-checkout-button);
}

body.template-checkout .gv-received__button:hover,
body.template-checkout .gv-received__button:focus-visible {
	background: var(--gv-checkout-button-hover);
	color: var(--gv-checkout-button-hover-text);
}

body.template-checkout .gv-received__button:focus-visible {
	outline: 2px solid var(--gv-checkout-focus);
	outline-offset: 2px;
}

body.template-checkout .gv-received__help,
body.template-checkout .gv-received__account {
	font-size: 13px;
	color: var(--gv-checkout-muted);
}

body.template-checkout .gv-received__help a,
body.template-checkout .gv-received__account a,
body.template-checkout .gv-received__link {
	color: var(--gv-checkout-text);
}

body.template-checkout .gv-received__account {
	margin: 18px 0 0;
}

/* the rail: items, totals, paid */
body.template-checkout .gv-received__items {
	list-style: none;
	margin: 0 0 18px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--gv-checkout-border);
}

body.template-checkout .gv-received__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 6px 0;
}

body.template-checkout .gv-received__thumb {
	position: relative;
	width: 64px;
	height: 64px;
	border: 1px solid var(--gv-checkout-border);
	border-radius: 8px;
	background: var(--gv-checkout-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

body.template-checkout .gv-received__thumb img {
	max-width: 56px;
	max-height: 56px;
	width: auto;
	height: auto;
	border-radius: 4px;
}

body.template-checkout .gv-received__qty {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--gv-checkout-muted);
	color: var(--gv-checkout-bg);
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.template-checkout .gv-received__item-name small {
	display: block;
	color: var(--gv-checkout-muted);
	font-size: 12px;
}

body.template-checkout .gv-received__item-price {
	font-weight: 500;
	white-space: nowrap;
}

body.template-checkout .gv-received__totals {
	margin: 0;
}

body.template-checkout .gv-received__totals > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

body.template-checkout .gv-received__totals dt {
	color: var(--gv-checkout-muted);
	font-weight: 400;
}

body.template-checkout .gv-received__totals dd {
	margin: 0;
	text-align: right;
}

body.template-checkout .gv-received__totals > div.gv-received__total {
	border-top: 1px solid var(--gv-checkout-border);
	margin-top: 10px;
	padding-top: 14px;
	font-size: 16px;
}

body.template-checkout .gv-received__totals > div.gv-received__total dt {
	color: var(--gv-checkout-text);
}

body.template-checkout .gv-received__totals > div.gv-received__total dd {
	font-family: var(--gv-checkout-heading-family);
	font-weight: 500;
	font-size: 22px;
	line-height: 1;
}

body.template-checkout .gv-received__paid {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--gv-checkout-muted);
}

@media only screen and (max-width: 999px) {
	body.template-checkout .gv-checkout__body--received .gv-checkout__content .gv-received {
		flex-direction: column;
	}

	body.template-checkout .gv-checkout__body--received .gv-received__main {
		width: 100%;
		flex: 0 0 auto;
		padding: 24px 21px 40px;
		align-items: stretch;
	}

	body.template-checkout .gv-checkout__body--received .gv-received__main > * {
		max-width: none;
	}

	body.template-checkout .gv-checkout__body--received .gv-received__rail {
		order: -1;
		width: 100%;
		flex: 0 0 auto;
		padding: 18px 21px;
		background: var(--gv-checkout-rail);
		border-bottom: 1px solid var(--gv-checkout-border);
	}

	body.template-checkout .gv-checkout__body--received .gv-received__rail > * {
		max-width: none;
	}
}

@media only screen and (max-width: 520px) {
	body.template-checkout .gv-received__info {
		grid-template-columns: 1fr;
	}

	body.template-checkout .gv-checkout__body--received .gv-received__main,
	body.template-checkout .gv-checkout__body--received .gv-received__rail {
		padding-left: 16px;
		padding-right: 16px;
	}
}