/* Checkout, its thank you page and the pay page, redesigned 28 Oct 2026 (Ben: "make the exprince easy as possible").
   Mobile first, the site's tokens (main.css). The form sits on white, its steps parted by space, each step's mark turning to a
   tick once it is filled in (Ben, 28 Oct: "white, without the seprated boxes"); fields are large and white with a thin
   forest line, with labels that float up as you type; the order summary is a forest
   panel (shared with the cart page, cart.css), its Place order button held at the bottom of the screen while the
   panel runs past it; on a phone a bar at the bottom carries the same button. */

/* Slim header and footer -------------------------------------------------------------------------------------------- */
.co-head { background: var(--paper); }
.co-head__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 68px; }
.co-head__logo img { height: 46px; width: auto; }
.co-head__secure { display: flex; align-items: center; gap: 7px; font: 600 14px var(--f-body); color: var(--navy); }
.co-head__secure .ico { width: 20px; height: 20px; }
.co-head__phone { justify-self: end; display: flex; align-items: center; gap: 7px; min-height: 44px; font: 600 15px var(--f-body); color: var(--navy); }
.co-head__phone .ico { width: 20px; height: 20px; }
.co-head__phone span { display: none; }
@media (min-width: 700px) { .co-head__row { min-height: 80px; } .co-head__logo img { height: 56px; } .co-head__phone span { display: inline; } }
.co-foot { padding: 28px 0 36px; background: var(--paper); font-size: 13px; color: var(--muted); }
.co-foot__row { display: grid; justify-items: center; gap: 14px; text-align: center; }
.co-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.co-foot__links a { font-weight: 600; color: var(--navy); }
.co-foot__links a:hover { color: var(--navy-2); }

/* The screen -------------------------------------------------------------------------------------------------------- */
.co-band { padding: 16px 0 56px; background: var(--paper); }
.co-band .woocommerce-notices-wrapper:not(:empty), .co-band .woocommerce-NoticeGroup { max-width: 1200px; margin: 0 auto 16px; }
.co__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; }
.co__main, #customer_details { display: grid; gap: 40px; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
	.co-band { padding: 36px 0 88px; }
	.co__grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; align-items: start; }
}

/* A sheet per step: its mark (the step's icon, a tick once the sheet is complete) and its name, centred */
.co__step { padding: 0; }
.co__h { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.co__h h2 { font: 700 22px/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.co__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 4px; background: var(--navy); color: var(--birch); transition: background-color .3s var(--ease), color .3s var(--ease); }
.co__mark .ico { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.co__mark .co__tick { opacity: 0; transform: scale(.3) rotate(-40deg); stroke-width: 2.8; }
.is-done > .co__h .co__mark { background: var(--blaze); color: var(--glo-cta-ink); }
.is-done > .co__h .co__mark .ico { opacity: 0; transform: scale(.3); }
.is-done > .co__h .co__mark .co__tick { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .co__mark, .co__mark .ico { transition: none; } }

/* Fields: large, labels that float up, a tick once right, a plain line under one that is not */
.co__fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
:is(.co, .acct) .form-row { position: relative; grid-column: 1 / -1; margin: 0; }
#billing_first_name_field, #billing_last_name_field, #billing_state_field, #billing_postcode_field { grid-column: span 3; }
@media (min-width: 600px) {
	#billing_email_field, #billing_phone_field, #billing_first_name_field, #billing_last_name_field { grid-column: span 3; }
	#billing_city_field, #billing_state_field, #billing_postcode_field { grid-column: span 2; }
}
/* Canada or the United States (inc/us-orders.php, 13 Nov 2026): the country is a plain select like the province. */
.co-us { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: var(--r-2); background: var(--paper); font: 400 15px/22px var(--f-body); }
.co-us strong { display: block; margin-bottom: 2px; font-weight: 600; }
.co__fields[hidden] { display: none; }
:is(.co, .acct) .woocommerce-input-wrapper { position: relative; display: block; }
:is(.co, .acct) .form-row > label:not(.cocheck, .checkbox) { position: absolute; z-index: 1; left: 16px; right: 44px; top: 19px; font: 500 16px/20px var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform-origin: 0 0; transition: transform .18s var(--ease), color .18s; }
:is(.co, .acct) .form-row > label .required { display: none; }
:is(.co, .acct) .form-row > label .optional { font-weight: 400; }
:is(.co, .acct) .form-row:is(:focus-within, :has(.input-text:not(:placeholder-shown)), :has(select), :has(:autofill)) > label:not(.cocheck, .checkbox) { transform: translateY(-11px) scale(.76); }
:is(.co, .acct) .form-row:focus-within > label:not(.cocheck, .checkbox) { color: var(--navy); }
:is(.co, .acct) .input-text, :is(.co, .acct) select { width: 100%; height: 58px; padding: 24px 42px 6px 15px; border: 1px solid var(--navy); border-radius: 4px; background: #fff; font: 500 16px/1.25 var(--f-body); color: var(--ink); transition: border-color var(--fast), background-color var(--fast), box-shadow var(--fast); }
:is(.co, .acct) select { -webkit-appearance: none; appearance: none; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
:is(.co, .acct) textarea.input-text { height: auto; min-height: 112px; padding-top: 28px; resize: vertical; }
:is(.co, .acct) .input-text::placeholder { color: transparent; transition: color var(--fast); }
:is(.co, .acct) .input-text:focus::placeholder { color: var(--muted); }
:is(.co, .acct) .input-text:focus, :is(.co, .acct) select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--navy); }
:is(.co, .acct) .input-text:autofill { box-shadow: inset 0 0 0 40px #eef2dc; }
:is(.co, .acct) .form-row.woocommerce-validated:has(.input-text:not(:placeholder-shown))::after { content: ""; position: absolute; right: 14px; top: 19px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7340' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; pointer-events: none; animation: co-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
:is(.co, .acct) .form-row.woocommerce-validated:has(textarea)::after { display: none; }
@keyframes co-pop { from { opacity: 0; transform: scale(.4); } }
:is(.co, .acct) .form-row.woocommerce-invalid .input-text, :is(.co, .acct) .form-row.woocommerce-invalid select { border-color: var(--sale); box-shadow: inset 0 0 0 1px var(--sale); }
:is(.co, .acct) .form-row.woocommerce-invalid > label:not(.cocheck, .checkbox) { color: var(--sale); }
:is(.co, .acct) .checkout-inline-error-message { display: flex; align-items: center; gap: 6px; margin: 7px 0 0 2px; font: 500 13.5px/1.35 var(--f-body); color: var(--sale); }
:is(.co, .acct) .checkout-inline-error-message::before { content: ""; flex: none; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19Z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E") center / 15px no-repeat; }
.co-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0 2px; font-size: 14px; color: var(--ink); }
.co-suggest .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* The address finder under the Address field */

/* Shipping or Store pickup: two tiles, the chosen one in forest */
.glo-ship-switch { min-width: 0; margin: 0; padding: 0; border: 0; }
.switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.switch:has(.switch__or) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } /* Shipping OR Store pickup (Aiden, 10 Nov 2026) */
.switch__or { font: 700 15px/1 var(--f-head); letter-spacing: .04em; color: var(--muted); }
.switch__opt { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 112px; padding: 14px 10px; text-align: center; background: #fff; border: 1px solid var(--navy); border-radius: var(--r-2); color: var(--ink); cursor: pointer; transition: border-color var(--base), background-color var(--base), color var(--base); }
.switch__opt:hover { box-shadow: inset 0 0 0 1px var(--navy); }
.switch__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch__opt .ico { width: 30px; height: 30px; color: var(--navy); transition: color var(--base); }
.switch__opt b { font: 700 19px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); transition: color var(--base); }
.switch__opt span { font-size: 13px; line-height: 1.35; color: var(--muted); transition: color var(--base); }
.switch__opt:has(input:checked) { background: var(--navy); border-color: var(--navy); }
.switch__opt:has(input:checked) b { color: var(--birch); }
.switch__opt:has(input:checked) span { color: var(--muted-light); }
.switch__opt:has(input:checked) .ico { color: var(--blaze-light); }
.switch__opt:has(input:focus-visible) { outline: 3px solid var(--glo-focus); outline-offset: 2px; }
.co__pickup { display: none; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px 14px; margin-top: 16px; animation: rise-in .25s var(--ease); }
.co__pickup-pin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; background: var(--navy); color: var(--birch); }
.co__pickup-pin .ico { width: 22px; height: 22px; }
.co__pickup p b { display: block; font: 600 15px/1.3 var(--f-body); color: var(--ink); }
.co__pickup p span { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
.co__pickup .btn { grid-column: 1 / -1; min-height: 44px; }
@media (min-width: 600px) { .co__pickup { grid-template-columns: 44px minmax(0, 1fr) auto; } .co__pickup .btn { grid-column: auto; } }
.co.is-pickup .co__pickup { display: grid; }
.co.is-pickup .co__step--addr { display: none; }

/* Payment: methods as tiles like the switch; a note for the store behind one button */
.copay .wc_payment_methods { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.copay .wc_payment_method { padding: 16px; background: #fff; border: 1px solid var(--navy); border-radius: var(--r-2); }
.copay .wc_payment_method:has(> input:checked) { box-shadow: inset 0 0 0 1px var(--navy); }
.copay .wc_payment_method > input { width: 18px; height: 18px; margin: 0 10px 0 0; vertical-align: -3px; accent-color: var(--navy); }
.copay .wc_payment_method > label { font: 600 15px/1.3 var(--f-body); cursor: pointer; }
.copay .wc_payment_method > label img { display: inline-block; max-height: 22px; margin-left: 6px; vertical-align: middle; }
.copay .payment_box { margin-top: 6px; padding: 0 0 0 28px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.copay .payment_box p + p { margin-top: 8px; }
/* PayPal's buttons (PPCP renders them under the method list): a gap above so they don't touch the last tile */
.co__step .ppc-button-wrapper,
.co__step [id^="ppc-button-ppcp-card-button-gateway"] { margin-top: 14px; }
/* PPCP hides the card row (its own <style data-hide-gateway>) until PayPal's script loads, ~2s in, so it popped in above
   the PayPal row. It shows from the first paint like the PayPal row, with the black button's 48px held under it. */
.copay .wc_payment_method.payment_method_ppcp-card-button-gateway { display: block; }
.co__step:has(#payment_method_ppcp-card-button-gateway:checked) [id^="ppc-button-ppcp-card-button-gateway"] { min-height: 48px; }
/* Paying with PayPal or a card happens in PayPal's own buttons, so Place order and the phone bar stay hidden from the first
   paint while one of those is ticked (PPCP itself only hides the button after its script loads). They are still there for
   an order with nothing to pay, which has no payment method to tick. */
.co:has(#payment input[name="payment_method"][value^="ppcp-"]:checked) .coplace__go,
body:has(.co #payment input[name="payment_method"][value^="ppcp-"]:checked) .cobar { display: none; }
body:has(.co #payment input[name="payment_method"][value^="ppcp-"]:checked) .co-foot { padding-bottom: 36px; }
/* The account sheet: one ticked box and a line on what happens next. */
.coacct__check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; font: 500 15px/1.4 var(--f-body); color: var(--ink); cursor: pointer; }
.coacct__check input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; border: 1px solid var(--navy); border-radius: 4px; background: #fff center / 16px no-repeat; cursor: pointer; transition: background-color var(--fast); }
.coacct__check input:checked { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f3e4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.coacct__check input:focus-visible { outline: 3px solid var(--glo-focus); outline-offset: 2px; }
.coacct__note { margin: 6px 0 0 32px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.co__step--acct .co__fields { margin-top: 14px; }
.co__note { display: grid; justify-items: center; margin-top: 20px; }
.co__note > .co__fields { justify-self: stretch; grid-template-columns: 1fr; }
.co__note-open[hidden] { display: none; }

/* The order summary on the forest panel (the panel itself, the bar and the add-ons: cart.css) --------- */
.co__side { padding: 22px 16px 22px; }
@media (min-width: 600px) { .co__side { padding: 26px 26px 24px; } }
.corev__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2px 8px; margin-bottom: 18px; }
.corev__head h2 { grid-column: 2; font: 700 26px/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--birch); text-align: center; }
.corev__head p { grid-column: 2; font-size: 13px; color: var(--muted-light); text-align: center; }
.corev__edit { grid-column: 3; grid-row: 1 / span 2; justify-self: end; min-height: 36px; padding: 0 12px; font-size: 13px; }

/* Lines (light by default: the thank you page; on the panel, cream on forest) */
.corev__lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.corev__line { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.corev__media { position: relative; display: block; aspect-ratio: 1; background: var(--field-light); border-radius: 4px; }
.corev__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.corev__qty { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: 4px; background: var(--navy); color: #fff; font: 700 12px/1 var(--f-body); }
.corev__name { font: 600 14px/1.3 var(--f-body); color: var(--navy); }
.corev__name small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.corev__price { font: 600 17px/1 var(--f-head); letter-spacing: .01em; white-space: nowrap; }
.forest .corev__qty { background: var(--blaze); color: var(--glo-cta-ink); }
.forest .corev__name { color: var(--birch); }
.forest .corev__name small { color: var(--muted-light); }

/* The free shipping bar and the add-ons row on the panel */
.co.is-pickup .forest .shipbar { display: none; }

/* Discount code: the same floating field, white on the panel */
.corev__code { margin-top: 24px; }
.corev__code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.corev__code-row .form-row { grid-column: auto; }
.forest .corev__code .input-text { height: 52px; padding-top: 21px; background: var(--paper); }
.forest .corev__code .form-row > label { top: 16px; }
.corev__code-row .btn { min-height: 52px; }
.corev__code-msg:not(:empty) { margin-top: 8px; font-size: 13px; color: var(--blaze-light); }
.corev__code-msg.is-bad { color: #ffb8ae; }

/* Totals */
.corev__totals { display: grid; gap: 9px; margin: 22px 0 18px; }
.corev__totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.corev__totals dt { color: var(--muted); }
.corev__totals dd { margin: 0; font-weight: 600; text-align: right; }
.corev__totals .woocommerce-remove-coupon { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--sale); }
.corev__total { margin-top: 8px; }
.corev__total dt { font: 700 19px/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.corev__total dd { font: 600 30px/1 var(--f-head); letter-spacing: .01em; }
.corev__total dd small { display: block; font: 400 12px var(--f-body); color: var(--muted); }
.forest .corev__totals dt { color: var(--muted-light); }
.forest .corev__totals dd, .forest .corev__total dt { color: var(--birch); }
.forest .corev__totals .woocommerce-remove-coupon { color: #ffb8ae; }
.forest .corev__total dd small { color: var(--muted-light); }

/* The newsletter box, the Place order button held at the bottom of the screen, the line on the terms */
.coplace .cocheck { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 14px; font: 500 14px/1.45 var(--f-body); color: var(--birch); cursor: pointer; }
.coplace input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid rgba(246, 243, 228, .6); border-radius: 4px; background: transparent center / 16px no-repeat; cursor: pointer; transition: background-color var(--fast), border-color var(--fast); }
.coplace input[type=checkbox]:hover { border-color: var(--birch); }
.coplace input[type=checkbox]:checked { border-color: var(--blaze); background-color: var(--blaze); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1e1b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.coplace input[type=checkbox]:focus-visible { outline: 3px solid var(--glo-focus); outline-offset: 2px; }
.coplace__go { position: sticky; bottom: 0; z-index: 3; margin: 0 -16px; padding: 18px 16px 12px; background: linear-gradient(rgba(31, 58, 43, 0), var(--navy) 16px); }
@media (min-width: 600px) { .coplace__go { margin: 0 -26px; padding: 18px 26px 14px; } }
.coplace__go.is-free { position: relative; } /* checkout.js: while the add-on rail, the discount code or the newsletter box passes the bottom of the screen (row 181) */
.coplace__btn { min-height: 60px; font-size: 17px; }
.coplace__agree { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--muted-light); text-align: center; }
.coplace__agree a { font-weight: 600; color: var(--birch); text-decoration: underline; text-underline-offset: 2px; }
.co .blockUI.blockOverlay { background: rgba(31, 58, 43, .35) !important; }
.co__main .blockUI.blockOverlay { background: rgba(255, 255, 255, .5) !important; }

/* Trust lines, three side by side under the button */
.forest .trust--co { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }

/* On a phone: the bar at the bottom with Place order and the total */
.cobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -10px 24px -12px rgba(28, 30, 27, .4); animation: co-bar .3s var(--ease); }
.cobar[hidden] { display: none; }
.cobar .btn { min-height: 54px; }
@keyframes co-bar { from { transform: translateY(100%); } }
body.has-cobar .co-foot { padding-bottom: 104px; }
@media (min-width: 1000px) { .cobar { display: none; } }

/* Notices on the checkout */
.co-band .woocommerce-error, .co-band .woocommerce-message, .co-band .woocommerce-info { display: grid; gap: 4px; margin: 0 0 16px; padding: 14px 18px; border-radius: var(--r-2); background: var(--paper); border: 1.5px solid var(--edge-strong); font-size: 14px; list-style: none; }
.co-band .woocommerce-error { border-color: var(--sale); color: var(--sale); }
.co-band .woocommerce-error a { color: inherit; text-decoration: underline; }
.co-band .woocommerce-message { border-color: var(--glo-success); }

/* Thank you page ----------------------------------------------------------------------------------------------------- */
.ty { max-width: 1080px; margin: 0 auto; }
.ty__head { display: grid; justify-items: center; gap: 12px; margin-bottom: 32px; text-align: center; }
.ty__head .lede { margin-inline: auto; }
.ty__head .lede b { color: var(--ink); }
.ty__mark { width: 64px; height: 64px; stroke-width: 2; color: var(--glo-success); }
.ty__grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .ty__grid { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } }
.ty__card { padding: 24px 20px; border-radius: var(--r-2); }
.ty__next { padding: 8px 0 0; }
.ty h2.co__h { display: block; margin-bottom: 18px; font: 700 22px/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); text-align: center; }
.ty .forest h2.co__h { color: var(--birch); }
.ty__steps { display: grid; gap: 18px; margin-bottom: 20px; }
.ty__step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.ty__step .ico { width: 28px; height: 28px; color: var(--navy); }
.ty__step b { display: block; font: 700 16px/1.25 var(--f-body); color: var(--navy); }
.ty__step span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ty__order .corev__totals { margin-bottom: 0; }
.ty__actions { display: flex; justify-content: center; margin-top: 32px; }

/* Paying: the screen over the page from the moment the payment is sent until the thank you page arrives (checkout.js) */
.co-paying { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--paper) 92%, transparent); }
.co-paying[hidden] { display: none; }
.co-paying__box { display: grid; justify-items: center; gap: 10px; max-width: 360px; text-align: center; }
.co-paying__spin { width: 48px; height: 48px; margin-bottom: 8px; border: 4px solid color-mix(in srgb, var(--navy) 15%, transparent); border-top-color: var(--navy); border-radius: 50%; animation: co-paying-spin .8s linear infinite; }
.co-paying__h { font: 700 22px/1.15 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.co-paying__p { font: 400 16px/1.4 var(--f-body); color: var(--ink); }
html.is-paying, html.is-paying body { overflow: hidden; }
@keyframes co-paying-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .co-paying__spin { animation-duration: 2.4s; } }
form.checkout.is-us #billing_phone_field > label .optional { display: none; } /* required for a US address */