/* Checkout (boards checkout-v1 / checkout-v1-mobile). Fields, options and summary; WooCommerce's
   checkout.js refreshes the payment list, the summary and the shipping options (form-checkout.php). */

.checkout-wrap { padding-bottom: 48px; }
.co-grid { display: flex; flex-direction: column; }
.co-main { display: grid; gap: 36px; }
.woocommerce-billing-fields { display: grid; gap: 36px; }
#customer_details { display: grid; gap: 16px; } /* "Ship to a different address" sits 16 / 20 under the fields */
.woocommerce-shipping-fields:empty, .woocommerce-additional-fields:empty { display: none; }
wc-order-attribution-inputs { display: contents; } /* hidden inputs only: no grid gap for it */

/* Error list from checkout.js (Place order with missing fields; summary refresh): it prepends the notice group
   to the form, so it is placed at the top of the form column explicitly (the grid would drop it into a free cell). */
.co-grid > .woocommerce-NoticeGroup { margin-bottom: 36px; }
.co-grid > .woocommerce-NoticeGroup .woocommerce-error { display: grid; gap: 4px; margin: 0; }
/* Each missing field is a link to it: in the error colour, like the rest of the list (DESIGN.md section 7). */
.co-grid > .woocommerce-NoticeGroup .woocommerce-error a:not(.button) {
	color: inherit !important; font-weight: 300; text-decoration-color: currentColor !important;
}

/* ---------- Section head: numbered circle, label, rule ---------- */
.co-sec { display: grid; gap: 16px; }
.co-head { display: flex; align-items: center; gap: 12px; }
.co-num {
	flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--sage); font-size: 9px; font-weight: 500; letter-spacing: 0.14px; color: var(--sage-deep);
}
.co-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--quiet); }

/* ---------- Fields (DESIGN.md section 6): label above, 50 px box, 1 px --sage ---------- */
.co-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.co-fields .form-row { grid-column: 1 / -1; display: grid; gap: 8px; margin: 0; }
.co-fields .co-f-postcode, .co-fields .co-f-city { grid-column: auto; }
.co-fields > .form-row.hst-solo { grid-column: 1 / -1; } /* no partner in this country's order (js/fields.js) */
.form-row label:not(.checkbox) {
	font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.14px; text-transform: uppercase; color: var(--sage-deep);
}
.form-row .required { display: none; } /* no asterisks: the optional fields say so (DESIGN.md section 6) */
.form-row > label:not(.checkbox) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.form-row .optional { font-weight: 300; text-transform: lowercase; color: var(--quiet); line-height: inherit; }
.form-row .optional { display: inline-flex; font-size: 0; } /* "(optional)" -> the boards' "optional"; flex keeps the line 16 px */
.form-row .optional::after { content: "optional"; font-size: 12px; }
.woocommerce-input-wrapper { display: block; }
/* WooCommerce hides the apartment label; the boards show it. */
.co-f-address_2 > label.screen-reader-text { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
.form-row .input-text, .form-row select, .form-row textarea {
	width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: 0; background: var(--ground);
	box-shadow: inset 0 0 0 1px var(--sage); color: var(--ink);
	font-family: var(--font-sans); font-size: 16px; font-weight: 300; line-height: 1.4;
}
.form-row select {
	appearance: none; padding-right: 40px; cursor: pointer;
	background: var(--ground) no-repeat right 16px center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M.5.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23496253' stroke-width='1.2'/%3E%3C/svg%3E");
}
.form-row textarea.input-text { min-height: 96px; font-size: 13px; line-height: 1.6; resize: vertical; }
.form-row ::placeholder { color: var(--quiet); opacity: 1; }
.form-row .input-text:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Error state (DESIGN.md section 7): 1.5 px --error, message below in --error. */
.form-row.woocommerce-invalid .input-text, .form-row.woocommerce-invalid select { box-shadow: inset 0 0 0 1.5px var(--error); }
.checkout-inline-error-message, .form-row .woocommerce-error { margin: 0; padding: 0; background: none; box-shadow: none; font-size: 13px; color: var(--error); }
.co-notes .form-row > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* the section head names it */

/* ---------- Checkboxes and radios: real inputs, drawn ---------- */
.co-check, .form-row.create-account { margin: 0; font: inherit; }
label.checkbox { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.input-checkbox, .hst-option > input[type="radio"] {
	flex: none; appearance: none; width: 18px; height: 18px; margin: 1px 0 0; background: var(--ground);
	box-shadow: inset 0 0 0 1px var(--sage); cursor: pointer;
}
.input-checkbox:checked {
	background: var(--sage) no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23FCF5EB' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* WooCommerce hides the radio when there is one method; the boards always show it. */
.hst-option > input[type="radio"] { display: block !important; border-radius: 50%; margin: 0; }
.hst-option > input[type="radio"]:checked { background: radial-gradient(circle, var(--sage) 4px, var(--ground) 4.5px); }
.input-checkbox:focus-visible, .hst-option > input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#ship-to-different-address { padding-top: 4px; }
@media (min-width: 768px) { #ship-to-different-address { padding-top: 8px; } }
.shipping_address { margin-top: 16px; }

/* ---------- Shipping and payment options ---------- */
.hst-options { display: grid; gap: 16px; }
.hst-ship-methods .woocommerce-info, .hst-ship-methods .hs-us-reseller-notice { margin: 0 !important; }
.hst-option {
	display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
	padding: 16px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--sage);
}
.hst-option:has(> input:checked) { background: var(--ground-alt); }
.hst-option > label { display: grid; gap: 4px; cursor: pointer; }
.hst-option-name { font-size: 16px; font-weight: 500; line-height: 1.4; }
.hst-option-note { font-size: 13px; line-height: 1.5; color: var(--quiet); }
.hst-option-price { font-family: var(--font-mono); font-weight: 300; letter-spacing: -0.02em; font-size: 20px; line-height: 1.2; }
/* Mobile board: radio, name and price on one row, the note full width below. */
@media (max-width: 767.98px) {
	.hst-ship-methods .hst-option > label { display: contents; }
	.hst-ship-methods .hst-option-name { grid-column: 2; grid-row: 1; }
	.hst-ship-methods .hst-option-price { grid-column: 3; grid-row: 1; }
	.hst-ship-methods .hst-option-note { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; }
}
.payment_box { grid-column: 1 / -1; display: grid; gap: 14px; padding-top: 14px; }
.payment_box p { font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.7; }
.bank-box { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.bank-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 12px 16px; }
.bank-row + .bank-row { border-top: 1px solid var(--line); }
.bank-row dt { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; color: var(--sage-deep); }
.bank-row dd { font-size: 13px; line-height: 19px; }
.payment_box .bank-note { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: var(--quiet); }

/* ---------- Summary ---------- */
.co-summary { margin-top: 36px; background: var(--ground-alt); box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 var(--line); }
.co-summary .sum-head {
	font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em;
	padding: 16px 18px; box-shadow: inset 0 -1px 0 var(--line); line-height: 16px; text-transform: uppercase; color: var(--sage-deep);
}
.co-line { display: flex; align-items: center; gap: 12px; padding: 14px 18px; box-shadow: inset 0 -1px 0 var(--line); }
.co-thumb { flex: none; width: 48px; height: 48px; }
.co-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.co-name { font-size: 13px; font-weight: 500; line-height: 1.3; }
.co-qty { font-size: 11px; line-height: 1.4; color: var(--quiet); }
/* A refunded order: WooCommerce strikes the old total or quantity and inserts the new one - drawn like a sale price (shop.css). */
del { color: var(--quiet); font-size: 0.8em; }
ins { text-decoration: none; }
.co-line-total { font-family: var(--font-mono); font-weight: 300; letter-spacing: -0.02em; font-size: 16px; line-height: 1.2; white-space: nowrap; }
.co-rows { display: grid; }
.co-rows .sum-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; font-size: 13px; line-height: 19px; }
.co-rows .sum-val { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0.02em; text-align: right; }
.co-review .sum-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-top: 1px solid var(--line); }
.co-review .sum-total > span:first-child { font-size: 16px; font-weight: 500; line-height: 24px; }
.co-review .sum-total-val { font-family: var(--font-mono); font-weight: 300; letter-spacing: -0.02em; font-size: 26px; line-height: 1.2; }
.blockUI.blockOverlay { background: var(--ground-alt) !important; }

/* Place order: on mobile the summary's last part (terms + button), boxed with it. */
.co-place {
	display: grid; gap: 14px; margin: 0; padding: 0 18px 18px; background: var(--ground-alt);
	box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
}
.co-place-btn { width: 100%; min-height: 55px; }
#ppc-button-ppcp-gateway { width: 100%; } /* PayPal's button, in Place order's spot (functions.php) */
.woocommerce-terms-and-conditions-wrapper { display: grid; gap: 12px; }
.woocommerce-privacy-policy-text p { font-size: 12px; line-height: 1.5; color: var(--quiet); }
.woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-checkbox-text a { color: var(--sage-deep); text-decoration-color: var(--sage); text-underline-offset: 3px; }
.woocommerce-terms-and-conditions { max-height: 200px; overflow: auto; padding: 16px; font-size: 13px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- From 768: two-up fields; the summary and Place order in a 416 column at the right ---------- */
@media (min-width: 768px) {
	.checkout-wrap { padding-bottom: 72px; }
	.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 416px; column-gap: var(--col-gap); align-items: start; }
	.co-main { grid-column: 1 / -1; gap: 48px; }
	.co-grid > .woocommerce-NoticeGroup { grid-column: 1 / -1; margin-bottom: 48px; }
	.co-summary { grid-column: 2; margin-top: 48px; }
	.co-place { grid-column: 2; }
	.woocommerce-billing-fields { gap: 48px; }
	#customer_details { gap: 20px; }
	.co-sec { gap: 20px; }
	.co-fields { gap: 20px 40px; }
	.co-fields .co-f-first_name, .co-fields .co-f-last_name, .co-fields .co-f-state, .co-fields .co-f-phone { grid-column: auto; }
	.form-row label:not(.checkbox) { font-size: 11px; line-height: 16px; }
	.form-row .optional::after { font-size: 11px; }
	.form-row .input-text, .form-row select { padding-block: 14px; }
	.form-row textarea.input-text { min-height: 104px; }
	.co-num { font-size: 11px; }

	.hst-option { padding: 18px 20px; column-gap: 14px; }
	.payment_box { gap: 16px; padding-top: 8px; }
	.payment_box .bank-note { font-size: 11px; }
	.hst-options { gap: 20px; }

	.co-summary .sum-head { padding: 20px 24px; }
	.co-line { gap: 14px; padding: 16px 24px; }
	.co-thumb { width: 56px; height: 56px; }
	.co-rows .sum-line { padding: 14px 24px; }
	.co-review .sum-total { padding: 20px 24px; }
	.co-summary { box-shadow: inset 0 0 0 1px var(--line); }
}

/* ---------- Desktop from 1024: form 8 columns, summary 4, sticky; Place order under the form ---------- */
@media (min-width: 1024px) {
	.co-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.co-grid > .woocommerce-NoticeGroup { grid-column: 1 / 9; grid-row: 1; } /* row 1 stays 0 tall without one */
	.co-main { grid-column: 1 / 9; grid-row: 2; }
	.co-summary { grid-column: 9 / -1; grid-row: 1 / 4; margin-top: 0; position: sticky; top: 24px; }
	.co-grid::before { display: block; grid-column: 9; grid-row: 1 / 4; } /* the rule: main | summary (main.css) */
	.co-place { grid-column: 1 / 9; grid-row: 3; margin-top: 48px; padding: 0; gap: 20px; background: none; box-shadow: none; justify-items: start; }
	.co-place-btn, #ppc-button-ppcp-gateway { width: 400px; }
}

/* ---------- Order received (boards order-received-v1 / -mobile; woocommerce/checkout/thankyou.php) ---------- */
.or-wrap { padding-bottom: 48px; }
.or-main { display: grid; gap: 36px; }
.or-overview {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px 0;
	box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.or-overview > div { display: grid; gap: 4px; align-content: start; }
.or-overview dt { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 17px; text-transform: uppercase; color: var(--sage-deep); }
.or-overview dd { font-size: 16px; font-weight: 300; line-height: 22px; overflow-wrap: anywhere; } /* PayPal's method title carries the buyer's email */
.or-bank { display: grid; gap: 16px; }
.or-bank-box { display: grid; gap: 14px; padding: 16px; background: var(--ground-alt); box-shadow: inset 0 0 0 1px var(--line); }
.or-bank-text p { font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.7; }
/* Mobile board: label over value. */
.or-bank .bank-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }
.or-bank .bank-row dt { line-height: 15px; }
.or-bank .bank-row dd { line-height: 18px; }
.or-bank .bank-row-key dd { font-size: 16px; font-weight: 500; line-height: 22px; }
.or-summary { margin-top: 36px; box-shadow: inset 0 0 0 1px var(--line); }
.or-summary .co-qty { margin-left: 0.5em; font-size: inherit; color: inherit; } /* mobile: "French Shields  × 1" */
.or-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Pay for order (form-pay.php): the order summary in the checkout's grid, the quantity on its own line as at checkout. */
.co-pay .co-name > .co-qty { display: block; margin-top: 3px; font-weight: 300; }

/* From 768: four across; bank rows label left, value right; the summary a 416 column at the right. */
@media (min-width: 768px) {
	.or-wrap { padding-bottom: 72px; }
	.or-main { gap: 48px; }
	.or-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 20px 0; }
	.or-overview > div { gap: 6px; }
	.or-overview dt { font-size: 11px; line-height: 15px; }
	.or-bank { gap: 20px; }
	.or-bank-box { gap: 16px; padding: 20px; }
	.or-bank .bank-row { flex-direction: row; align-items: center; gap: 4px 16px; padding: 12px 16px; }
	.or-bank .bank-row dt { line-height: 16px; }
	.or-bank .bank-row dd { line-height: 19px; }
	.or-bank .bank-row-key dd { line-height: 24px; }
	.or-summary { width: 416px; margin: 48px 0 0 auto; }
	.or-summary .co-qty { display: block; margin: 3px 0 0; font-size: 11px; font-weight: 300; line-height: 1.4; color: var(--quiet); }
}
@media (min-width: 1024px) {
	.or-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
	.or-main { grid-column: 1 / 9; }
	.or-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; } /* 8 columns at 1024 are too narrow for four values */
	.or-summary { grid-column: 9 / -1; width: auto; margin: 0; }
}
@media (min-width: 1280px) { .or-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Email check (form-verify-email.php): one column, the summary's width from 768. */
.or-verify { display: grid; gap: 20px; max-width: 416px; }
.or-verify-text { font-size: 13px; line-height: 1.6; }
.or-verify-text a { color: var(--sage-deep); text-decoration-color: var(--sage); text-underline-offset: 3px; }
.or-verify .btn { width: 100%; }