/* ============================================================
   WooCommerce pages: the checkout, order received and pay pages
   (page.php + inc/checkout.php; stage 4, 2026-10-10). Not designed
   (QB33): the working pattern from the theme's tokens, fields and
   buttons. Loaded on the WooCommerce pages only (inc/enqueue.php);
   WooCommerce's own stylesheets are switched off.

   - Checkout: one column on phones with the booking summary first; from
     1024px your details, participants and payment on the left and the
     summary on the right, sticky under the header. "Before you book" is a
     card of the main column, just before Payment.
   - Sections are White cards on the Cream page; fields share the request
     form's tokens (--color-field-border, --field-height).
   ============================================================ */

.shop-page {
	padding-block: clamp(40px, 30px + 2.5vw, 72px) var(--section-pad-y);
}

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

.shop-page .woocommerce-error,
.shop-page .woocommerce-message,
.shop-page .woocommerce-info,
.shop-page .woocommerce-NoticeGroup-checkout ul {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 4px solid var(--color-heading);
	background-color: var(--color-surface);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.5;
	list-style: none;
}

.shop-page .woocommerce-error,
.shop-page .woocommerce-NoticeGroup-checkout .woocommerce-error {
	border-left-color: var(--color-error);
}

.shop-page .woocommerce-error li + li {
	margin-top: 6px;
}

.shop-page .woocommerce-error a,
.shop-page .woocommerce-message a,
.shop-page .woocommerce-info a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* A failed booking whose date no longer has its places cannot be paid for
   as it is (its first line says so): WooCommerce's "Pay" under it goes
   (inc/checkout.php, ldm_checkout_places_body_class()). */
.checkout-places-short .woocommerce-thankyou-order-failed-actions {
	display: none;
}

/* The pay page while an earlier payment that has gone through is still
   being recorded (woocommerce/checkout/form-pay.php): a link to look
   again under its notice. */
.shop-page .checkout-pay-order__again {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
}

.shop-page .checkout-pay-order__again a {
	color: var(--color-heading);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

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

.shop-page form.checkout {
	display: grid;
	gap: 24px;
}

.shop-page form.checkout > * {
	min-width: 0;
}

.checkout-main {
	display: grid;
	gap: 24px;
}

/* Phones and tablets: the summary first, under any error notice. */
.checkout-summary {
	order: -1;
}

.shop-page .woocommerce-NoticeGroup-checkout {
	order: -2;
}

@media (min-width: 1024px) {
	.shop-page form.checkout {
		grid-template-columns: minmax(0, 1fr) var(--checkout-summary-width);
		align-items: start;
		gap: 24px 48px;
	}

	.shop-page .woocommerce-NoticeGroup-checkout,
	.checkout-main {
		grid-column: 1;
		order: 0;
	}

	.shop-page form.checkout > .checkout-summary {
		position: sticky;
		top: calc(var(--toolbar-fixed-h) + 24px);
		grid-column: 2;
		grid-row: 1 / span 2;
		order: 0;
		transition: top var(--header-slide-duration) var(--ease-out-cubic);
	}

	.site-header.is-floating ~ main .checkout-summary {
		top: calc(var(--toolbar-fixed-h) + var(--header-bar-h) + 24px);
	}
}

/* ---------- Section cards ---------- */

.shop-page #customer_details,
.checkout-participants,
.checkout-equipment,
.checkout-pay,
.checkout-summary,
.checkout-before,
.checkout-next,
.shop-page .woocommerce-order {
	padding: clamp(20px, 14px + 1.5vw, 32px);
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.shop-page h3,
.checkout-section__title,
.shop-page .woocommerce-order h2 {
	margin: 0 0 16px;
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--fs-card-title);
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}

.checkout-section__intro {
	margin: -6px 0 20px;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* The empty second column of the details (no shipping, no notes). */
.shop-page #customer_details .col-2 {
	display: none;
}

/* ---------- Fields ---------- */

.shop-page .woocommerce-billing-fields__field-wrapper {
	display: grid;
	gap: 0 20px;
}

@media (min-width: 560px) {
	.shop-page .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	.shop-page .woocommerce-billing-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}

.shop-page .form-row {
	margin: 0 0 18px;
}

.shop-page .form-row label {
	display: block;
	margin-bottom: 6px;
	color: var(--color-heading);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.4;
}

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

.shop-page .form-row .optional {
	color: var(--color-text-muted);
	font-weight: 400;
}

.shop-page .woocommerce-input-wrapper {
	display: block;
}

.shop-page .form-row .input-text,
.shop-page .form-row select {
	display: block;
	width: 100%;
	height: var(--field-height);
	margin: 0;
	padding: 0 14px;
	border: var(--border-hairline) solid var(--color-field-border);
	border-radius: var(--radius-xs);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--fs-body);
	line-height: 1.4;
	transition: border-color var(--transition);
}

.shop-page .form-row textarea.input-text {
	height: auto;
	min-height: 64px;
	padding: 12px 14px;
	resize: vertical;
}

@media (hover: hover) {
	.shop-page .form-row .input-text:hover,
	.shop-page .form-row select:hover {
		border-color: var(--color-control-hover);
	}
}

.shop-page .form-row .input-text:focus-visible,
.shop-page .form-row select:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.shop-page .form-row.woocommerce-invalid .input-text,
.shop-page .form-row.woocommerce-invalid select {
	border-width: 2px;
	border-color: var(--color-error);
}

.shop-page .form-row .description {
	display: block;
	margin-top: 6px;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.45;
}

/* Checkboxes: the label wraps the box, which hangs in its left padding
   (the label mixes text and links, so no grid). */
.shop-page .form-row label.checkbox {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 32px;
	font-weight: 500;
	cursor: pointer;
}

.shop-page .form-row label.checkbox .optional {
	display: none;
}

.shop-page .form-row .input-checkbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-control-checked);
	cursor: pointer;
}

.shop-page .form-row .input-checkbox:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.shop-page .form-row.woocommerce-invalid .input-checkbox {
	outline: 2px solid var(--color-error);
	outline-offset: 2px;
}

.shop-page .form-row label.checkbox + .description {
	margin-left: 32px;
}

.shop-page .form-row label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------- Participants ---------- */

.checkout-participant {
	min-width: 0;
	margin: 0 0 16px;
	padding: 16px 18px 2px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-warm);
}

.checkout-participant__legend {
	padding: 0 6px;
	margin-left: -6px;
	color: var(--color-heading);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Each place's fields (name, experience, the age tick) in one column: the
   experience box beside the needs box went with the needs question (Sam
   2026-10-30). The card's section stays a container for the equipment
   step's columns (below). */
.checkout-participants,
.checkout-equipment {
	container-type: inline-size;
}

/* The hint under the age tick: the theme's own text (inc/checkout.php),
   which WooCommerce does not hide; checkout.js keeps it linked to its
   control. */
.checkout-participant__hint {
	display: block;
	margin-top: 6px;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.45;
}

.checkout-participant__hint--check {
	margin-left: 32px;
}

/* The examples in the experience box, as on the contact form. */
.shop-page .form-row .input-text::placeholder {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	opacity: 1;
}

/* WooCommerce's message under a field it flags after a failed submit
   (show_inline_errors), here and in the equipment step. */
.shop-page .checkout-inline-error-message {
	margin: 6px 0 0;
	color: var(--color-error);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.45;
}

.checkout-requirements {
	margin-top: 8px;
	padding: 16px 18px 0;
	border-left: 4px solid var(--color-accent);
	background-color: var(--color-surface-warm);
}

.checkout-requirements .form-row {
	margin-bottom: 16px;
}

/* ---------- Equipment (Sam 2026-10-15; not designed: his example
   checkout) ----------
   One card per place, headed "PLACE 1" and the participant's name (one
   line, cut short with an ellipsis). Each question is a .form-row fieldset
   with its label: "Equipment from LDM" (the items, then "I have all my own
   equipment" on a line of its own under a rule) and on winter courses
   "Winter boots" (a line on the boots under its label). Where the section
   is wide enough the boots sit to the right of the items, as in Sam's
   example; on narrow cards every item takes its own line. After a failed
   submit WooCommerce's message sits under the question and the card is
   outlined in red. */

.checkout-equipment__place {
	min-width: 0;
	margin: 0 0 16px;
	padding: 16px 18px 18px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-warm);
}

/* A 2px border, 1px off the padding so nothing moves (an inset shadow
   would run through the legend: a fieldset's border breaks for it, a
   shadow does not). Not off the top: the legend is taller than the border,
   so the thicker top border takes no room there. */
.checkout-equipment__place:has(.checkout-inline-error-message) {
	padding: 16px 17px 17px;
	border-width: 2px;
	border-color: var(--color-error);
}

.checkout-equipment__legend {
	display: flex;
	align-items: baseline;
	gap: 6px;
	max-width: 100%;
	padding: 0 6px;
	margin-left: -6px;
	color: var(--color-heading);
	font-size: var(--fs-small);
	line-height: 1.4;
}

.checkout-equipment__place-label {
	flex: none;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.checkout-equipment__name {
	min-width: 0;
	overflow: hidden;
	color: var(--color-text);
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The questions: no .form-row spacing or label styles of their own. */
.shop-page .checkout-equipment .checkout-equipment__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.shop-page .checkout-equipment .checkout-equipment__group + .checkout-equipment__group {
	margin-top: 18px;
}

.checkout-equipment__group-legend {
	margin-bottom: 10px;
	padding: 0;
	color: var(--color-heading);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.4;
}

.checkout-equipment__items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

/* "I have all my own equipment" on a line of its own, under a rule. */
.checkout-equipment__check--own {
	flex-basis: 100%;
	padding-top: 10px;
	border-top: var(--border-hairline) solid var(--color-border);
}

.shop-page .checkout-equipment .form-row .checkout-equipment__check {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
}

.checkout-equipment__input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-control-checked);
	cursor: pointer;
}

.checkout-equipment__input:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.checkout-equipment__boots {
	display: grid;
	gap: 8px;
}

/* The grid gap already separates it: 6px in all, as under the items. */
.shop-page .checkout-equipment__boots > .checkout-inline-error-message {
	margin-top: -2px;
}

/* The boots in a line (B2 at least; B3 preferred for winter climbing),
   between the label and the answers: 10px under the label as the answers
   sit, 4px more before them. */
.checkout-equipment__hint {
	margin: 0 0 4px;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.45;
}

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

/* Narrow cards: one item per line, like the boots answers. (Range syntax:
   no gap between this and the min-width: 580px query below.) */
@container (width < 580px) {
	.checkout-equipment__items .checkout-equipment__check {
		flex-basis: 100%;
	}
}

@container (min-width: 580px) {
	.checkout-equipment__place:has(.checkout-equipment__items):has(.checkout-equipment__boots) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 0 28px;
	}

	.shop-page .checkout-equipment .checkout-equipment__place .checkout-equipment__group + .checkout-equipment__group {
		margin-top: 0;
	}
}

@media (forced-colors: active) {
	.checkout-equipment__input {
		appearance: auto;
	}
}

/* What LDM can provide, what can be hired and what to bring (Emma
   2026-10-17, in place of the side panel of Sam's example; Sam 2026-10-25,
   the hire): short lists in a box above the places, side by side where the
   section is wide enough (three across from about 660px, else two and the
   third under them). A tick in the site's disc for LDM's kit and hire, a
   solid dot for your own (a ring would read as one of the radio buttons
   below). Not designed. */
.checkout-equipment__kit {
	display: grid;
	gap: 16px 28px;
	margin: 0 0 20px;
	padding: 16px 18px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-sm);
}

@container (min-width: 580px) {
	.checkout-equipment__kit:has(> .checkout-equipment__kit-group + .checkout-equipment__kit-group) {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	}
}

/* Hire is paid separately: said under the hire list. */
.checkout-equipment__kit-note {
	margin: 10px 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.45;
}

.checkout-equipment__kit-title {
	margin: 0 0 10px;
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}

.checkout-equipment__kit-list,
.checkout-before__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: 1.5;
	list-style: none;
}

.checkout-equipment__kit-item,
.checkout-before__item {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

/* 20px, centred on the first line (21px). */
.checkout-equipment__kit-mark,
.checkout-before__mark {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 0.5px;
	border-radius: 50%;
	background-color: var(--color-check-disc);
	color: var(--color-check-tick);
}

/* Drawn as a border, which Windows High Contrast keeps (it drops
   backgrounds). */
.checkout-equipment__kit-mark--own {
	width: 8px;
	height: 8px;
	margin: 6.5px 6px;
	box-sizing: border-box;
	border: 4px solid var(--color-heading);
	background-color: transparent;
}

/* ---------- Before you book (Sam's example checkout; Emma 2026-10-17) ----------
   A card just before Payment (his example has it under the summary, which
   would then outgrow a laptop window): the heading and the points, each
   with a tick in the site's disc. */
.checkout-before__list {
	gap: 12px;
}

.checkout-before__item strong {
	color: var(--color-heading);
	font-weight: 600;
}

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

.shop-page .wc_payment_methods {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.shop-page .wc_payment_method {
	padding: 14px 16px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-sm);
}

.shop-page .wc_payment_method + .wc_payment_method {
	margin-top: 10px;
}

.shop-page .wc_payment_method > label {
	font-weight: 600;
	cursor: pointer;
}

.shop-page .wc_payment_method > .input-radio {
	margin-right: 8px;
	accent-color: var(--color-control-checked);
}

.shop-page .payment_box {
	margin-top: 8px;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.shop-page .payment_box p {
	margin: 0;
}

.shop-page .payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.shop-page .woocommerce-privacy-policy-text {
	margin-bottom: 20px;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.shop-page .woocommerce-privacy-policy-text p {
	margin: 0;
}

.shop-page .woocommerce-privacy-policy-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.shop-page .place-order {
	margin: 0;
}

.checkout-pay__button {
	width: 100%;
}

@media (min-width: 560px) {
	.checkout-pay__button {
		width: auto;
		min-width: 240px;
	}
}

.checkout-pay__button:disabled,
.shop-page form.checkout.processing .checkout-pay__button {
	cursor: progress;
	opacity: 0.7;
}

/* ---------- Deposit or in full (Sam 2026-10-15; not designed) ----------
   Above the payment methods (inc/deposits.php): two option boxes like the
   methods, the chosen one outlined in Navy; title and amount on one line,
   the balance and its date under them. Where the course starts too soon
   for a deposit, a ruled line like the requirements tick's says so. */

.checkout-plan {
	min-width: 0;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.checkout-plan__legend {
	margin: 0 0 10px;
	padding: 0;
	color: var(--color-heading);
	font-size: var(--fs-body);
	font-weight: 600;
}

.checkout-plan__option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 14px 16px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.checkout-plan__option + .checkout-plan__option {
	margin-top: 10px;
}

/* The chosen option: the hairline thickened from inside, so nothing moves. */
.checkout-plan__option:has(:checked) {
	border-color: var(--color-heading);
	box-shadow: inset 0 0 0 1px var(--color-heading);
}

.checkout-plan__radio {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--color-control-checked);
}

/* The light-background ring, as on the form's other controls (the global
   one is for navy). */
.checkout-plan__radio:focus-visible,
.shop-page .wc_payment_method > .input-radio:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.checkout-plan__text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	line-height: 1.5;
}

.checkout-plan__title,
.checkout-plan__amount {
	color: var(--color-heading);
	font-weight: 600;
}

.checkout-plan__amount {
	text-align: right;
	white-space: nowrap;
}

.checkout-plan__note {
	grid-column: 1 / -1;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.checkout-plan__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 4px solid var(--color-accent);
	background-color: var(--color-surface-warm);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* ---------- The booking summary ---------- */

.checkout-summary .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.checkout-summary .shop_table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.checkout-summary .shop_table th,
.checkout-summary .shop_table td {
	padding: 10px 0;
	border-top: var(--border-hairline) solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.checkout-summary .shop_table tbody tr:first-child td {
	padding-top: 0;
	border-top: 0;
}

.checkout-summary .shop_table .product-name {
	padding-right: 16px;
	color: var(--color-heading);
	font-size: var(--fs-body);
	font-weight: 600;
}

.checkout-summary .shop_table td:last-child,
.checkout-summary .shop_table tfoot td {
	text-align: right;
	white-space: nowrap;
}

/* A long word in a course name or a label may break, so the amounts beside
   it stay inside the card on a narrow phone (or with larger text spacing). */
.checkout-summary .shop_table th,
.checkout-summary .shop_table .product-name {
	overflow-wrap: anywhere;
}

.checkout-item__date {
	font-weight: 500;
}

.checkout-item__meta {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-weight: 500;
}

/* "Location:" is plain from the line itself: kept for screen readers. */
.checkout-summary .variation dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.checkout-summary .variation {
	margin: 2px 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-weight: 400;
}

.checkout-summary .variation dd,
.checkout-summary .variation p {
	margin: 0;
}

.checkout-summary .order-total th,
.checkout-summary .order-total td {
	color: var(--color-heading);
	font-size: var(--fs-ui-lg);
	font-weight: 700;
}

/* A deposit (woocommerce/checkout/review-order.php): "Due today" with
   "50% deposit" under it, then the balance with its date. */
.checkout-summary__note {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-weight: 500;
}

.checkout-summary .checkout-balance th,
.checkout-summary .checkout-balance td {
	color: var(--color-heading);
	font-weight: 600;
}

/* "due by 31 December 2026" / "paid on ..." under an amount in the order
   totals (inc/deposits.php), on the thank-you and pay pages. It may wrap on
   a narrow phone (the date's own words are held together), so the table
   never pushes out of its card. */
.shop-page .ldm-balance-when {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-weight: 400;
	white-space: normal;
}

.checkout-summary__change {
	margin: 16px 0 0;
}

/* ---------- Order received ---------- */

.shop-page .woocommerce-order {
	display: grid;
	gap: 24px;
}

.shop-page .woocommerce-notice--success {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--fs-card-title);
	font-weight: 600;
	line-height: 1.35;
}

.shop-page .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.shop-page .woocommerce-order-overview li strong {
	display: block;
	color: var(--color-heading);
	font-size: var(--fs-body);
}

.checkout-next {
	padding: 0;
	border: 0;
}

.checkout-next p {
	margin: 0 0 12px;
	line-height: 1.6;
}

.checkout-next__subtitle {
	margin: 20px 0 8px;
	color: var(--color-heading);
	font-size: var(--fs-body);
	font-weight: 600;
}

.checkout-next__list {
	margin: 0;
	padding-left: 1.2em;
}

.checkout-next__list li + li {
	margin-top: 8px;
}

/* A participant's equipment answers, under their name. */
.checkout-next__equipment {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* Equipment hire, paid separately, under the participants (beats
   .checkout-next p's margin). */
.checkout-next .checkout-next__hire {
	margin: 12px 0 0;
}

.shop-page .woocommerce-order-details .shop_table,
.shop-page .woocommerce-customer-details address {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
	font-style: normal;
	line-height: 1.6;
}

.shop-page .woocommerce-order-details .shop_table th,
.shop-page .woocommerce-order-details .shop_table td {
	padding: 10px 0;
	border-top: var(--border-hairline) solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.shop-page .woocommerce-order-details .shop_table th:last-child,
.shop-page .woocommerce-order-details .shop_table td:last-child,
.shop-page .woocommerce-order-details .shop_table tfoot td {
	text-align: right;
}

.shop-page .woocommerce-order-details .product-name {
	color: var(--color-heading);
	font-weight: 600;
}

.shop-page .woocommerce-order-details .wc-item-meta,
.shop-page .checkout-pay-order__summary .wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	color: var(--color-text-muted);
	list-style: none;
}

.shop-page .woocommerce-order-details .wc-item-meta p,
.shop-page .checkout-pay-order__summary .wc-item-meta p {
	display: inline;
	margin: 0;
}

.shop-page .woocommerce-column__title,
.shop-page .woocommerce-order-details__title {
	margin: 8px 0 8px;
	color: var(--color-heading);
	font-size: var(--fs-body);
	font-weight: 600;
}

/* An order still to be paid: WooCommerce's "Pay" and "Cancel" in its details
   are text links, kept apart. */
.shop-page .woocommerce-order-details .order-actions-button + .order-actions-button {
	margin-left: 1.25em;
}

/* ---------- Pay page (a deposit's balance, or an order paid later) ----------
   woocommerce/checkout/form-pay.php: the payment summary card first on
   phones and tablets, beside the payment card from 1024px, as on the
   checkout. */

.shop-page .checkout-pay-order {
	display: grid;
	gap: 24px;
}

.shop-page .checkout-pay-order > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.shop-page .checkout-pay-order {
		grid-template-columns: minmax(0, 1fr) var(--checkout-summary-width);
		align-items: start;
		gap: 24px 48px;
	}

	.shop-page .checkout-pay-order > * {
		grid-column: 1;
	}

	.shop-page .checkout-pay-order > .checkout-summary {
		grid-column: 2;
		grid-row: 1 / span 2;
		order: 0;
	}
}

/* The pay page's and the receipt's tables never push out of their cards on a
   narrow phone (or with larger text spacing): values may wrap, each amount
   staying whole, and a long word in a label or a course name may break. */
.shop-page .checkout-pay-order__summary .shop_table td:last-child,
.shop-page .checkout-pay-order__summary .shop_table tfoot td {
	white-space: normal;
}

.shop-page .checkout-pay-order__summary .woocommerce-Price-amount,
.shop-page .woocommerce-order-details .woocommerce-Price-amount {
	white-space: nowrap;
}

.shop-page .checkout-pay-order__summary .shop_table th,
.shop-page .checkout-pay-order__summary .product-name,
.shop-page .woocommerce-order-details .shop_table th,
.shop-page .woocommerce-order-details .product-name {
	overflow-wrap: anywhere;
}

/* ---------- Confirm your email (woocommerce/checkout/form-verify-email.php) ---------- */

.shop-page .checkout-verify {
	max-width: 560px;
	padding: clamp(20px, 14px + 1.5vw, 32px);
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.shop-page .checkout-verify .form-row {
	margin: 0;
}

.shop-page .checkout-verify .form-row + .form-row {
	margin-top: 20px;
}

.shop-page .checkout-verify__error p {
	margin: 0;
}

/* WooCommerce's line above it on the order received page. */
.shop-page .woocommerce-notice + .checkout-verify,
.shop-page .woocommerce-notice--success + .checkout-verify {
	margin-top: 24px;
}

/* ---------- Windows High Contrast ---------- */

@media (forced-colors: active) {
	.shop-page .form-row .input-checkbox,
	.shop-page .wc_payment_method > .input-radio,
	.checkout-plan__radio {
		appearance: auto;
	}

	/* Box shadows are dropped here: an outline shows the choice instead. */
	.checkout-plan__option:has(:checked) {
		border-color: var(--color-forced-active);
		outline: 2px solid var(--color-forced-active);
		outline-offset: -3px;
	}

	.shop-page .woocommerce-error {
		border-left-color: var(--color-forced-line);
	}

	/* The discs are backgrounds, which this mode drops: the ticks and the
	   rings take the page's text colour. */
	.checkout-equipment__kit-mark,
	.checkout-before__mark {
		color: var(--color-forced-line);
	}

	.checkout-equipment__kit-mark--own {
		border-color: var(--color-forced-line);
	}
}