/**
 * Two-pane checkout: the steps on the left, a sticky order summary on the right, and a
 * collapsible summary bar on phones. In the ARMD theme's palette and Gilroy fonts; the layout
 * rules are scoped to .armd-checkout (or the armd-two-pane-checkout body class for the page
 * around it), which only the two-pane template outputs. The theme styles every checkout h2,
 * field, button and table with !important, so some rules here need it too.
 *
 * @package armd-enhancements
 */

.armd-checkout {
	--armd-navy: var(--wp--preset--color--accent-1, #052c53);
	--armd-orange: var(--wp--preset--color--accent-2, #ff6900);
	--armd-sky: var(--wp--preset--color--custom-light-blue, #00b2f4);
	--armd-tint: var(--wp--preset--color--custom-blue-background, #d9edfa);
	--armd-soft: color-mix(in srgb, var(--armd-tint) 45%, #fff);
	--armd-muted: #5f6b7a;
	--armd-line: #e0e5eb;
	--armd-good: #1a7f37;
	--armd-error: #b42318;
	--armd-bold: var(--wp--preset--font-family--gilroy-bold);
	--armd-medium: var(--wp--preset--font-family--gilroy-medium);
	--armd-regular: var(--wp--preset--font-family--gilroy-regular);
	--armd-sticky-top: 16px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 24px;
	align-items: start;
	counter-reset: armd-step;
	color: var(--armd-navy);
	font-size: 15px;
	line-height: 1.45;
}

/* Logged in: whose details these are, one quiet line under "Your details" (the login mockup, 18 Oct 2026) */
.armd-checkout .armd-checkout-who {
	margin: -8px 0 14px;
	color: var(--armd-navy);
	font-family: var(--armd-regular);
	font-size: 14px;
	line-height: 1.4;
}

.armd-checkout .armd-checkout-who strong {
	font-family: var(--armd-medium);
	font-weight: 400;
}

.armd-checkout .armd-checkout-who a {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-color: rgba(5, 44, 83, 0.35);
	text-underline-offset: 3px;
}

.armd-checkout .armd-checkout-who a:hover,
.armd-checkout .armd-checkout-who a:focus-visible {
	color: var(--armd-sky) !important;
}

/* Messages WooCommerce adds to the top of the form span both panes. */
.armd-checkout > .woocommerce-NoticeGroup,
.armd-checkout > .woocommerce-error,
.armd-checkout > .woocommerce-message,
.armd-checkout > .woocommerce-info {
	grid-column: 1 / -1;
	margin: 0 !important;
}

/* The page around the form: white step cards on light grey, under a shorter title banner. */
body.armd-two-pane-checkout main {
	display: flow-root; /* the content's top margin stays inside the grey */
	margin-bottom: 0 !important;
	padding-bottom: 48px;
	background: #f5f7fa;
}

/* The grey starts right under the title banner, with no white strip between them (Anthony, 20 Oct 2026). */
body.armd-two-pane-checkout .wp-site-blocks > .wp-block-group.alignfull.has-background:has(> h1) ~ * {
	margin-block-start: 0;
}

/* Signed out, the header has no Log in here: the form's own "Returning customer or partner? Log in" keeps the shopper
   on the checkout, where the header's would take them to My Account (Anthony, 20 Oct 2026). */
body.armd-two-pane-checkout:not(.logged-in) header .wp-block-woocommerce-customer-account {
	display: none;
}

body.armd-two-pane-checkout .wp-site-blocks > .wp-block-group.alignfull.has-background:has(> h1) {
	min-height: 0 !important;
}

body.armd-two-pane-checkout .wp-site-blocks > .wp-block-group.alignfull.has-background:has(> h1) > h1 {
	padding: 22px 0 !important;
	font-size: 36px !important;
	line-height: 1.1;
}

/* ------------------------------------------------------------------ */
/* Steps                                                               */
/* ------------------------------------------------------------------ */

.armd-checkout__main {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.armd-checkout .armd-checkout__step {
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--armd-line);
	border-radius: 10px;
	background: var(--wp--preset--color--base, #fff);
	counter-increment: armd-step;
}

.armd-checkout .armd-checkout__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px !important; /* the theme sets every checkout h2 to 32px with no margin */
	font-family: var(--armd-bold);
	font-size: 20px !important;
	line-height: 1.2;
}

.armd-checkout .armd-checkout__heading::before {
	content: counter(armd-step);
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--armd-navy);
	color: #fff;
	font-family: var(--armd-medium);
	font-size: 13px;
	line-height: 1;
}

/* Your details: one heading per step, fields on a two-column grid. */
.armd-checkout .woocommerce-billing-fields > h3,
.armd-checkout .woocommerce-additional-fields > h3 {
	display: none;
}

.armd-checkout .woocommerce-billing-fields__field-wrapper,
.armd-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
}

.armd-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.armd-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.armd-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.armd-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first {
	grid-column: 1;
}

.armd-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.armd-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
	grid-column: 2;
}

/* A field whose partner is hidden (no address asked for yet, or a country without provinces) takes the row. */
form.armd-checkout:not(.armd-address-open) .woocommerce-billing-fields__field-wrapper > .armd-optional-address-field.form-row-first + .form-row-last:not(.armd-optional-address-field),
.armd-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first[style*="none"] + .form-row-last,
.armd-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first[style*="none"] + .form-row-last {
	grid-column: 1 / -1;
}

/* Fields other plugins add after the billing fields, such as the website to assess */
.armd-checkout .woocommerce-billing-fields > .form-row {
	margin: 12px 0 0;
	padding: 0;
}

/* "+ Add Address for Tax Invoice" on orders that don't need an address */
.armd-checkout .armd-address-toggle {
	margin: 0;
}

.armd-checkout .armd-address-toggle a {
	font-family: var(--armd-medium);
	font-size: 15px;
}

/* The second address line has no visible label; it sits close under the street. */
.armd-checkout #billing_address_2_field,
.armd-checkout #shipping_address_2_field {
	margin-top: -4px;
}

.armd-checkout .form-row > label:not(.checkbox) {
	display: block;
	margin: 0 0 5px !important;
	font-family: var(--armd-medium);
	font-size: 14px;
	line-height: 1.25 !important;
}

.armd-checkout .form-row .required {
	color: var(--armd-error);
	text-decoration: none;
}

.armd-checkout .form-row .optional {
	color: var(--armd-muted);
	font-family: var(--armd-regular);
}

.woocommerce form.armd-checkout .form-row input.input-text,
.woocommerce form.armd-checkout .form-row textarea,
.woocommerce form.armd-checkout .form-row select,
.woocommerce form.armd-checkout .form-row .select2-container .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 12px !important;
	border: 1px solid var(--armd-line);
	border-radius: 6px !important;
	background-color: #fff;
	color: var(--armd-navy);
	font-family: var(--armd-regular);
	font-size: 15px !important;
	line-height: 38px;
}

.woocommerce form.armd-checkout .form-row textarea {
	height: auto;
	min-height: 80px;
	padding: 9px 12px !important;
	line-height: 1.45;
}

.woocommerce form.armd-checkout .form-row .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.armd-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 18px 0 0 !important;
	color: var(--armd-navy);
	line-height: 38px;
}

.armd-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	top: 1px;
	right: 6px;
	height: 38px;
}

.woocommerce form.armd-checkout .form-row input.input-text:focus,
.woocommerce form.armd-checkout .form-row textarea:focus,
.woocommerce form.armd-checkout .form-row select:focus,
.armd-checkout .select2-container--focus .select2-selection--single,
.armd-checkout .select2-container--open .select2-selection--single {
	border-color: var(--armd-sky);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--armd-sky) 22%, transparent);
}

.woocommerce form.armd-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.armd-checkout .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--armd-error);
}

.armd-checkout .form-row input::placeholder {
	color: #9aa5b1;
}

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

form.armd-checkout #payment {
	padding: 0;
	border-radius: 0;
	background: none !important;
	font-family: inherit;
	font-size: 15px !important;
}

form.armd-checkout #payment ul.payment_methods {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Each choice is a card: the radio, then the name with its marks on the right, and the description under the name. */
form.armd-checkout #payment ul.payment_methods > li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 2px 12px;
	align-items: center;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--armd-line);
	border-radius: 8px;
	background: #fff;
	line-height: 1.4;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* WooCommerce's clearfix would take the first grid cell. */
form.armd-checkout #payment ul.payment_methods > li::before,
form.armd-checkout #payment ul.payment_methods > li::after {
	content: none;
	display: none;
}

form.armd-checkout #payment ul.payment_methods > li:hover {
	border-color: color-mix(in srgb, var(--armd-navy) 35%, var(--armd-line));
}

form.armd-checkout #payment ul.payment_methods > li:has(> input:checked) {
	padding: 10px 13px;
	border: 2px solid var(--armd-navy);
	background: var(--armd-soft);
}

form.armd-checkout #payment ul.payment_methods > li > * {
	grid-column: 1 / -1;
}

/* WooCommerce hides the radio when there is one choice; the design shows it selected. */
form.armd-checkout #payment ul.payment_methods > li > input.input-radio {
	display: block !important;
	grid-column: 1;
	grid-row: 1;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--armd-navy);
}

form.armd-checkout #payment ul.payment_methods > li > label {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	min-height: 28px;
	margin: 0 !important;
	color: var(--armd-navy);
	font-family: var(--armd-bold) !important;
	font-size: 16px;
	line-height: 1.25 !important;
	cursor: pointer;
}

form.armd-checkout #payment ul.payment_methods > li > label img:not(.armd-pay-mark) {
	max-height: 28px;
	margin: 0;
}

/* The description sits under the name on every choice, not just the selected one. */
form.armd-checkout #payment .payment_box.payment_method_paystack,
form.armd-checkout #payment .payment_box.payment_method_paystack-one,
form.armd-checkout #payment .payment_box.payment_method_paystack-two {
	display: block !important;
}

form.armd-checkout #payment ul.payment_methods > li > div.payment_box {
	grid-column: 2;
	grid-row: 2;
}

form.armd-checkout #payment div.payment_box {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none !important;
	color: var(--armd-muted);
	font-family: var(--armd-regular);
	font-size: 14px !important;
	line-height: 1.4;
}

form.armd-checkout #payment div.payment_box::before {
	display: none;
}

form.armd-checkout #payment div.payment_box p {
	margin: 0;
}

form.armd-checkout #payment div.payment_box p + * {
	margin-top: 8px;
}

.armd-pay-marks {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.armd-pay-mark {
	display: block;
	box-sizing: border-box;
	width: 50px;
	height: 32px;
	margin: 0 !important;
	padding: 6px 7px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--armd-line);
	object-fit: contain;
}

/*
 * Visa and Amex are blue cards: each fills its tile, as in the card brands' own marks (Amex's square
 * sits on its own blue). Mastercard keeps the white tile and its outline.
 */
.armd-pay-mark--visa,
.armd-pay-mark--amex {
	padding: 0;
	box-shadow: none;
}

.armd-pay-mark--amex { background: #1578be; }
.armd-pay-mark--ozow { width: 84px; padding: 5px 8px; }
.armd-pay-mark--capitec-pay { width: 72px; padding: 3px 4px; }

.armd-checkout .armd-pay-marks {
	gap: 5px;
}

/* WooCommerce strips the padding and outline from images in the choices. */
.armd-checkout .armd-pay-mark,
form.armd-checkout #payment ul.payment_methods li img.armd-pay-mark {
	width: 44px;
	height: 28px;
	padding: 5px 6px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--armd-line);
}

.armd-checkout .armd-pay-mark--visa,
form.armd-checkout #payment ul.payment_methods li img.armd-pay-mark--visa,
.armd-checkout .armd-pay-mark--amex,
form.armd-checkout #payment ul.payment_methods li img.armd-pay-mark--amex {
	padding: 0;
	box-shadow: none;
}

.armd-checkout .armd-pay-mark--ozow,
form.armd-checkout #payment ul.payment_methods li img.armd-pay-mark--ozow { width: 74px; padding: 4px 7px; }
.armd-checkout .armd-pay-mark--capitec-pay,
form.armd-checkout #payment ul.payment_methods li img.armd-pay-mark--capitec-pay { width: 64px; padding: 3px 4px; }

.armd-pay-note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 10px 0 0;
	padding: 10px 14px;
	border: 1px dashed var(--armd-line);
	border-radius: 8px;
	color: var(--armd-muted);
	font-size: 13px;
	line-height: 1.45;
}

.armd-pay-note .armd-pay-marks {
	flex: none;
	opacity: 0.75;
}

/* Under the choices: the note on the bank options, who processes the payment, then the terms and the button. */
form.armd-checkout #payment .form-row.place-order {
	display: flex;
	flex-direction: column;
	margin: 8px 0 0;
	padding: 0;
}

form.armd-checkout #payment .form-row.place-order::before,
form.armd-checkout #payment .form-row.place-order::after {
	display: none;
}

.armd-checkout .place-order > .armd-pay-note {
	order: -2;
	margin: 0 0 2px;
	padding: 9px 12px;
	font-size: 13px;
}

.armd-checkout .armd-pay-via {
	order: -1;
	margin: 4px 2px 0;
	color: var(--armd-muted);
	font-size: 13px;
}

.armd-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 14px 0 0;
}

.armd-checkout .woocommerce-privacy-policy-text:empty {
	display: none;
}

.armd-checkout .woocommerce-privacy-policy-text,
.armd-checkout .woocommerce-privacy-policy-text p {
	margin: 0 0 8px;
	color: var(--armd-muted);
	font-size: 13px;
}

.armd-checkout .woocommerce-terms-and-conditions {
	max-height: 240px;
	margin: 0 0 10px;
	overflow: auto;
	border: 1px solid var(--armd-line);
	border-radius: 8px;
}

.armd-checkout .place-order .form-row {
	margin: 0 0 8px;
	padding: 0;
}

/* The terms and updates checkboxes, with wrapped text clear of the box. */
.woocommerce form.armd-checkout .place-order label.checkbox {
	position: relative;
	display: block;
	margin: 0 !important;
	padding-left: 26px;
	font-family: var(--armd-regular);
	font-size: 14px;
	line-height: 1.4 !important;
	cursor: pointer;
}

.woocommerce form.armd-checkout .place-order label.checkbox input[type="checkbox"] {
	position: absolute;
	top: 2px;
	left: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--armd-navy);
}

.armd-checkout .place-order label.checkbox a {
	color: var(--armd-sky);
}

.armd-checkout #place_order {
	float: none !important;
	width: 100%;
	margin: 8px 0 0;
	padding: 13px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--armd-navy);
	color: #fff;
	font-family: var(--armd-bold);
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.armd-checkout #place_order:hover,
.armd-checkout #place_order:focus-visible {
	background: color-mix(in srgb, var(--armd-navy) 85%, #fff);
	color: #fff;
}

.armd-checkout .armd-checkout__after-pay {
	margin: 8px 0 0;
	color: var(--armd-muted);
	font-size: 13px;
	text-align: center;
}

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

/* A long order scrolls inside the summary, so its foot can always be reached. */
.armd-checkout__summary {
	position: sticky;
	top: var(--armd-sticky-top);
	min-width: 0;
	max-height: calc(100vh - var(--armd-sticky-top) - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.armd-checkout__summary-bar {
	display: none;
}

/*
 * The card is a column: the header, the lines, the coupon box, the totals, then the quote. The
 * lines and totals stay in WooCommerce's review table, which it replaces on every refresh;
 * display: contents lets them sit either side of the coupon box without moving any markup.
 */
.armd-checkout__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--armd-line);
	border-radius: 10px;
	background: var(--wp--preset--color--base, #fff);
}

.armd-checkout__card > * {
	order: 5;
}

.armd-checkout__card > .armd-checkout__summary-head {
	display: flex;
	order: 0;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 20px;
	background: var(--armd-navy);
	color: #fff;
}

.armd-checkout .armd-checkout__summary-heading {
	margin: 0 !important;
	color: #fff;
	font-family: var(--armd-bold);
	font-size: 17px !important;
	line-height: 1.3;
}

.armd-checkout__summary-plan {
	font-family: var(--armd-medium);
	font-size: 13px;
	opacity: 0.85;
}

.armd-checkout__card > #order_review,
.armd-checkout #order_review > table.woocommerce-checkout-review-order-table {
	display: contents;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table > tbody {
	display: grid;
	order: 1;
	gap: 10px;
	padding: 14px 20px 0;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table > tbody:not(:has(tr)) {
	display: none;
}

/* Products other than DMARC use ARMD's older summary template, which lists the items in the table head. */
.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table > thead:has(th.product-name + th.product-name) {
	display: block;
	order: 1;
	padding: 14px 20px 0;
	background: none;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table > thead:has(th.product-name + th.product-name) tr {
	display: grid;
	gap: 10px;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table > thead:has(th.product-name + th.product-name) th:first-child {
	display: none;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table > thead th.product-name {
	font-family: var(--armd-bold) !important;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table .product-name .variation {
	margin: 2px 0 0;
	color: var(--armd-muted);
	font-family: var(--armd-regular);
	font-size: 13px;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table .product-name .variation :is(dt, dd, p) {
	display: inline;
	margin: 0;
	padding: 0;
}

.armd-checkout__card > .armd-dmarc-coupon {
	order: 2;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table > tfoot {
	display: grid;
	order: 3;
	gap: 4px;
	margin: 12px 20px 0;
	padding: 10px 0 14px;
	border-top: 1px solid var(--armd-line);
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	border: 0;
	background: none;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--armd-navy);
	font-family: var(--armd-regular) !important; /* the theme sets table headings in bold */
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr > :last-child:not(:first-child) {
	flex: none;
	text-align: right;
	white-space: nowrap;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table td.product-total {
	font-family: var(--armd-bold) !important;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr.order-total {
	margin-top: 5px;
	padding-top: 10px;
	border-top: 1px solid var(--armd-line);
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
	font-family: var(--armd-bold) !important;
	font-size: 19px;
	line-height: 1.3;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr.order-total strong {
	font-weight: inherit;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table .cart-discount th,
.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table .cart-discount td {
	color: var(--armd-good);
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table .woocommerce-remove-coupon {
	margin-left: 4px;
	color: var(--armd-muted) !important;
	font-size: 12px;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table .includes_tax {
	display: block;
	color: var(--armd-muted);
	font-family: var(--armd-regular);
	font-size: 12px;
}

.armd-checkout .product-name .product-quantity {
	font-family: var(--armd-regular);
}

/*
 * A DMARC line: the name and price on one row, the domains under both. WooCommerce adds a
 * no-break space after the name, which font-size: 0 keeps from taking a line of its own.
 */
.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr:has(> td > .armd-line__name) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 12px;
	align-items: baseline;
	font-size: 0;
	line-height: 0;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table td.product-name:has(> .armd-line__name) {
	display: contents;
	font-size: 0;
	line-height: 0;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr:has(> td > .armd-line__name) > td.product-total {
	grid-column: 2;
	grid-row: 1;
}

.armd-line__name {
	display: block;
	grid-column: 1;
	grid-row: 1;
	font-family: var(--armd-bold);
	font-size: 15px;
	line-height: 1.4;
}

.armd-line__detail {
	display: block;
	grid-column: 1 / -1;
	grid-row: 2;
	color: var(--armd-muted);
	font-family: var(--armd-regular);
	font-size: 13px;
	line-height: 1.4;
	word-break: break-word;
}

.armd-line__domain {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.armd-line__per {
	color: var(--armd-muted);
	font-family: var(--armd-regular);
	font-size: 13px;
	white-space: nowrap;
}

.armd-line__free {
	color: var(--armd-good);
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr.armd-summary-then {
	display: block;
	margin-top: 8px;
}

.woocommerce .armd-checkout table.woocommerce-checkout-review-order-table tr.armd-summary-then td {
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--armd-soft);
	font-size: 13.5px;
	line-height: 1.45;
	white-space: normal;
}

.armd-checkout tr.armd-summary-then strong {
	font-family: var(--armd-bold);
}

/* Coupon and quote, inside the summary card */
.armd-checkout .armd-dmarc-coupon {
	margin: 0;
	padding: 12px 20px 0;
	border: 0;
	border-radius: 0;
}

/* The box's placeholder names it; the label stays for screen readers. */
.armd-checkout .armd-dmarc-coupon label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.armd-checkout .armd-dmarc-coupon__row {
	display: flex;
	gap: 8px;
}

.woocommerce form.armd-checkout .armd-dmarc-coupon input.input-text {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 0 12px !important;
	border: 1px solid var(--armd-line);
	border-radius: 6px !important;
	color: var(--armd-navy);
	font-family: var(--armd-regular);
	font-size: 15px !important;
	text-transform: uppercase;
}

.woocommerce form.armd-checkout .armd-dmarc-coupon input.input-text::placeholder {
	color: #9aa5b1;
	text-transform: none;
}

.woocommerce form.armd-checkout .armd-dmarc-coupon input.input-text:focus {
	border-color: var(--armd-sky);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--armd-sky) 22%, transparent);
}

/* Navy outline buttons: Apply and Get a quote */
.woocommerce form.armd-checkout .armd-dmarc-coupon .button,
.woocommerce form.armd-checkout .armd-dmarc-quote .button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--armd-navy);
	border-radius: 8px;
	background: #fff;
	color: var(--armd-navy);
	font-family: var(--armd-bold);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce form.armd-checkout .armd-dmarc-quote .button {
	height: 34px;
}

.woocommerce form.armd-checkout .armd-dmarc-coupon .button:hover,
.woocommerce form.armd-checkout .armd-dmarc-quote .button:hover,
.woocommerce form.armd-checkout .armd-dmarc-coupon .button:focus-visible,
.woocommerce form.armd-checkout .armd-dmarc-quote .button:focus-visible {
	border-color: var(--armd-navy) !important; /* the theme's hover is sky blue */
	background-color: var(--armd-soft) !important;
	color: var(--armd-navy);
}

.woocommerce form.armd-checkout .armd-dmarc-coupon .button:disabled,
.woocommerce form.armd-checkout .armd-dmarc-quote .button:disabled {
	opacity: 0.6;
}

.armd-coupon-note {
	margin: 0;
	padding: 7px 10px;
	border-left: 3px solid #1a7f37;
	border-radius: 4px;
	background: #edf7ef;
	color: #14532d;
	font-size: 13px;
	line-height: 1.4;
}

.armd-coupon-note--error {
	border-left-color: #b42318;
	background: #fdeceb;
	color: #8a1c12;
}

.armd-checkout .armd-dmarc-coupon__message:not(:empty) {
	margin-top: 8px;
}

.armd-checkout .armd-dmarc-coupon__message .woocommerce-error,
.armd-checkout .armd-dmarc-coupon__message .woocommerce-message,
.armd-checkout .armd-dmarc-coupon__message .woocommerce-info,
.armd-checkout .armd-dmarc-quote__message .woocommerce-error,
.armd-checkout .armd-dmarc-quote__message .woocommerce-message {
	margin: 0 !important;
	padding: 8px 10px 8px 34px !important;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
}

.armd-checkout .armd-dmarc-coupon__message :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
.armd-checkout .armd-dmarc-quote__message :is(.woocommerce-error, .woocommerce-message)::before {
	top: 8px;
	left: 10px;
	font-size: 14px;
}

.armd-checkout .armd-dmarc-quote {
	margin: 0;
	padding: 12px 20px 14px;
	border: 0;
	border-top: 1px solid var(--armd-line);
	border-radius: 0;
	background: #fafbfc;
}

.armd-checkout .armd-dmarc-quote__text {
	margin: 0 0 8px;
	font-family: var(--armd-regular);
	font-size: 13px;
	line-height: 1.45;
}

.armd-checkout .armd-dmarc-quote__message:not(:empty) {
	margin-top: 10px;
}

.armd-checkout__promises {
	display: grid;
	gap: 2px;
	margin: 10px 4px 0;
	padding: 0;
	list-style: none;
	color: var(--armd-muted);
	font-family: var(--armd-regular);
	font-size: 13px;
	line-height: 1.35;
}

.armd-checkout__promises li {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 4px;
	margin: 0 !important;
}

.armd-checkout__promises li::before {
	content: "\2713";
	color: var(--armd-good);
	font-weight: 700;
}

/* The DMARC plan box is the first step. */
.armd-checkout .armd-dmarc.armd-checkout__step {
	margin: 0;
	padding: 22px 24px;
}

/* ------------------------------------------------------------------ */
/* Tablets and phones: one column, the summary as a bar at the top     */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.armd-checkout {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.armd-checkout__summary {
		position: static;
		order: -1;
		max-height: none;
		overflow: visible;
	}

	.armd-checkout__summary-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 13px 16px;
		border: 1px solid var(--armd-line);
		border-radius: 10px;
		background: var(--armd-soft);
		color: var(--armd-navy);
		font-family: var(--armd-bold);
		font-size: 16px;
		line-height: 1.3;
		letter-spacing: 0;
		text-align: left;
		text-transform: none;
		cursor: pointer;
	}

	.armd-checkout__summary-total strong {
		font-weight: inherit;
	}

	.armd-checkout__chevron {
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-left: 6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform 0.15s ease;
	}

	.armd-checkout__summary.is-open .armd-checkout__chevron {
		transform: translateY(1px) rotate(-135deg);
	}

	.armd-checkout__summary.is-open .armd-checkout__summary-bar {
		border-radius: 10px 10px 0 0;
	}

	.armd-checkout__summary:not(.is-open) .armd-checkout__summary-content {
		display: none;
	}

	.armd-checkout__summary .armd-checkout__card {
		border-top: 0;
		border-radius: 0 0 10px 10px;
	}

	.armd-checkout__card > .armd-checkout__summary-head {
		display: none;
	}

	.armd-checkout__promises {
		margin-bottom: 4px;
	}

	body.armd-two-pane-checkout main {
		padding-bottom: 32px;
	}

	body.armd-two-pane-checkout .wp-site-blocks > .wp-block-group.alignfull.has-background:has(> h1) > h1 {
		padding: 22px 0 !important;
		font-size: 32px !important;
	}
}

@media (max-width: 560px) {
	.armd-checkout .armd-checkout__step,
	.armd-checkout .armd-dmarc.armd-checkout__step {
		padding: 18px 16px;
	}

	.armd-checkout .woocommerce-billing-fields__field-wrapper,
	.armd-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.armd-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
	.armd-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
	.armd-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
	.armd-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
		grid-column: 1;
	}

	.armd-pay-note {
		flex-direction: column;
		align-items: flex-start;
	}

	.armd-checkout .place-order > .armd-pay-note {
		gap: 8px;
	}

	form.armd-checkout #payment ul.payment_methods > li > label {
		gap: 6px;
	}
}

/* The automatic partner discount: no R0.00 row, and no second row when two partner coupons share one cart
   (WooCommerce's own summary prints every applied coupon). Its remove links are hidden by exact code from
   Partner_Coupons::hide_remove_links(). */
tr:has(.armd-partner-zero) { display: none; }

/* A field's hint (WooCommerce's span.description, e.g. the Trust "Website to be assessed" help) sits below its input
   instead of over it (Anthony, 12 Oct 2026): WooCommerce shows it as an inline span whose padding overlapped the input
   by about 12px; a column flexbox makes it a block under the input. */
.woocommerce form .form-row .woocommerce-input-wrapper:has(> .description) {
	display: flex;
	flex-direction: column;
}