/**
 * Cart and checkout.
 *
 * Every selector here is prefixed with body.woocommerce-checkout or
 * body.woocommerce-cart, and that is load-bearing rather than decorative.
 * Declaring this stylesheet dependent on wc-blocks-style was not enough:
 * WooCommerce's block CSS still arrived after it, so a rule written with one
 * body class lost on source order -- border-radius applied while background,
 * border and padding did not, which is a worse state than losing outright,
 * because it looks like the rule ran. The extra element selector wins the
 * cascade on specificity instead, which does not depend on who loads first.
 *
 * The file stays separate from style.css because it is only enqueued on the
 * two pages that need it.
 *
 * The structure here is WooCommerce's own -- contact details, shipping
 * address, shipping method, payment, order summary. None of it is replaced.
 * What changes is that each step becomes a card with a heading you can find at
 * a glance, fields get labels above them rather than floating inside them, and
 * the shipping and payment choices become tiles big enough to hit on a phone.
 *
 * Nothing here adds a fee, a charge, an upsell or a claim. Prices, taxes,
 * shipping rates and discounts are WooCommerce's, untouched.
 *
 * @package edpurity
 */

/* -------------------------------------------------------------------------
 * 1. The page
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout,
body.woocommerce-cart {
	background: #f4f7fa;
}

body.woocommerce-checkout .main,
body.woocommerce-cart .main {
	background: transparent;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 28px) clamp(48px, 6vw, 72px);
}

/* The page title, set like the reference: large, flush left, nothing above it
   but the breadcrumb back to the cart. */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .page-title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: #17344f;
	margin: 0 0 clamp(16px, 2.4vw, 26px);
}

/* -------------------------------------------------------------------------
 * 2. Each step is a card
 *
 * WooCommerce separates its steps with a hairline rule, which on a long form
 * reads as one continuous column of fields. Boxing them gives a shopper
 * somewhere to be: this part is the address, that part is the shipping, this
 * part is how you pay.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-components-checkout-step {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(18px, 2.6vw, 26px);
	margin: 0 0 18px;
	box-shadow: 0 1px 2px rgba(15, 39, 66, .04);
}

body.woocommerce-checkout .wc-block-components-checkout-step::after,
body.woocommerce-checkout .wc-block-components-checkout-step__heading::after {
	content: none;
}

body.woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 4px;
	padding: 0;
	border: 0;
}

body.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-size: clamp(1.18rem, 2.2vw, 1.42rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #17344f;
	margin: 0;
}

body.woocommerce-checkout .wc-block-components-checkout-step__description {
	font-size: .9rem;
	line-height: 1.55;
	color: #51697f;
	margin: 6px 0 0;
}

body.woocommerce-checkout .wc-block-components-checkout-step__content {
	margin-top: 18px;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * 3. Fields
 *
 * The label comes out of the input and sits above it. A floating label is
 * fine until a field is filled, at which point the only thing naming it is
 * 11px of grey tucked into a corner -- on an address form that is where
 * people put the city in the state box.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-components-text-input,
body.woocommerce-checkout .wc-blocks-components-select {
	margin: 0 0 16px;
}

body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select__label {
	position: static !important;
	transform: none !important;
	display: block;
	max-width: none;
	font-size: .84rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .005em;
	color: #17344f;
	margin: 0 0 7px;
	padding: 0;
	background: none;
	transition: none;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-textarea {
	/* 16px keeps iOS from zooming the page when a field is focused. */
	font-size: 16px;
	line-height: 1.4;
	color: #17344f;
	background: #fff;
	border: 1px solid #d4dde6;
	border-radius: 10px;
	padding: 13px 14px;
	height: auto;
	min-height: 0;
	width: 100%;
	box-sizing: border-box;
	box-shadow: none;
}

body.woocommerce-checkout .wc-block-components-text-input.is-active input {
	padding: 13px 14px;
}

body.woocommerce-checkout .wc-block-components-text-input input::placeholder {
	color: #8198ae;
	opacity: 1;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus {
	border-color: #1c6490;
	outline: 2px solid rgba(28, 100, 144, .22);
	outline-offset: 0;
}

/* Autofill paints its own background; force the field back to white so a
   remembered address does not arrive in Chrome's yellow. */
body.woocommerce-checkout .wc-block-components-text-input input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: #17344f;
}

/* A required field says so where the label is, as the reference does. */
body.woocommerce-checkout .wc-block-components-text-input label .required,
body.woocommerce-checkout .wc-blocks-components-select__label .required {
	color: #b4232a;
	text-decoration: none;
	margin-left: 2px;
}

body.woocommerce-checkout .wc-block-components-validation-error {
	font-size: .8rem;
	line-height: 1.45;
	color: #b4232a;
	margin-top: 6px;
}

body.woocommerce-checkout .has-error input,
body.woocommerce-checkout .has-error select {
	border-color: #b4232a;
}

/* Two names side by side above 560px, as on the reference. */
@media (min-width: 560px) {
	body.woocommerce-checkout .wc-block-components-address-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
	}

	body.woocommerce-checkout .wc-block-components-address-form > * {
		grid-column: 1 / -1;
	}

	body.woocommerce-checkout .wc-block-components-address-form__first_name,
	body.woocommerce-checkout .wc-block-components-address-form__last_name {
		grid-column: span 1;
	}

	body.woocommerce-checkout .wc-block-components-address-form__city,
	body.woocommerce-checkout .wc-block-components-address-form__postcode {
		grid-column: span 1;
	}
}

body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
	font-size: .84rem;
	font-weight: 600;
	color: #1c6490;
}

/* -------------------------------------------------------------------------
 * 4. Shipping method and payment method, as tiles
 *
 * One row, one choice, with the price on the right. Big enough to hit with a
 * thumb, and the selected one is obvious without reading it.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid #d4dde6;
	border-radius: 11px;
	margin: 0 0 10px;
	padding: 15px 16px 15px 46px;
	transition: border-color .14s ease, background .14s ease;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	padding: 0;
	overflow: hidden;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0;
	border-radius: 0;
	margin: 0;
	background: transparent;
}

body.woocommerce-checkout .wc-block-components-radio-control__option:last-child,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: #1c6490;
	background: #eff6fc;
}

body.woocommerce-checkout .wc-block-components-radio-control__input {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #1c6490;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input {
	top: 27px;
	transform: none;
}

body.woocommerce-checkout .wc-block-components-radio-control__label {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: #17344f;
}

body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-description {
	font-size: .84rem;
	line-height: 1.5;
	color: #51697f;
	margin-top: 3px;
}

body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
	font-size: 1rem;
	font-weight: 800;
	color: #17344f;
}

body.woocommerce-checkout .wc-block-components-radio-control__label-group {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* The panel a payment method opens below its own row. */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
	padding: 0 16px 16px 46px;
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: #46617a;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-content:empty {
	display: none;
	padding: 0;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-content p {
	margin: 0 0 10px;
	color: #46617a;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-content p:last-child {
	margin-bottom: 0;
}

/* Before an address is entered there are no rates to show. Say so in a box
   rather than as a stray line of grey text. */
body.woocommerce-checkout .wc-block-components-shipping-rates-control__no-shipping-address-message,
body.woocommerce-checkout .wc-block-components-shipping-placeholder__value {
	display: block;
	font-size: .9rem;
	line-height: 1.55;
	color: #51697f;
	background: #f4f7fa;
	border: 1px dashed #cdd9e4;
	border-radius: 10px;
	padding: 14px 16px;
}

/* -------------------------------------------------------------------------
 * 5. Express checkout
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-components-express-payment {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(16px, 2.4vw, 22px);
	margin: 0 0 18px;
}

body.woocommerce-checkout .wc-block-components-express-payment__title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #51697f;
}

body.woocommerce-checkout .wc-block-components-express-payment-continue-rule {
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #51697f;
	margin: 18px 0;
}

/* -------------------------------------------------------------------------
 * 6. The order summary
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(18px, 2.6vw, 24px);
	box-shadow: 0 1px 2px rgba(15, 39, 66, .04);
}

body.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-title {
	font-size: 1.18rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #17344f;
	margin: 0 0 4px;
}

body.woocommerce-checkout .wc-block-components-order-summary-item {
	padding: 16px 0;
	border-bottom: 1px solid #e8eef4;
}

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

body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border-radius: 8px;
	border: 1px solid #e3eaf1;
	background: #02102c;
}

body.woocommerce-checkout .wc-block-components-product-name {
	font-size: .96rem;
	font-weight: 700;
	line-height: 1.3;
	color: #17344f;
}

body.woocommerce-checkout .wc-block-components-product-details,
body.woocommerce-checkout .wc-block-components-product-metadata {
	font-size: .82rem;
	line-height: 1.5;
	color: #51697f;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	font-size: 1rem;
	font-weight: 800;
	color: #17344f;
}

/* Coupons: a labelled row with a filled Apply, rather than a disclosure
   triangle a shopper has to find. */
body.woocommerce-checkout .wc-block-components-totals-coupon {
	border-top: 1px solid #e8eef4;
	padding-top: 16px;
}

body.woocommerce-checkout .wc-block-components-panel__button {
	font-size: .9rem;
	font-weight: 700;
	color: #17344f;
	padding: 6px 0;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 10px;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
	margin: 0;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	background: #1c6490;
	border: 1px solid #1c6490;
	border-radius: 10px;
	color: #fff;
	font-size: .92rem;
	font-weight: 700;
	padding: 13px 20px;
	min-height: 0;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background: #17557a;
}

body.woocommerce-checkout .wc-block-components-totals-wrapper {
	border-top: 1px solid #e8eef4;
	padding: 16px 0;
}

body.woocommerce-checkout .wc-block-components-totals-item {
	font-size: .92rem;
	line-height: 1.5;
	padding: 5px 0;
}

body.woocommerce-checkout .wc-block-components-totals-item__label {
	color: #46617a;
}

body.woocommerce-checkout .wc-block-components-totals-item__value {
	color: #17344f;
	font-weight: 600;
}

body.woocommerce-checkout .wc-block-components-totals-item__description {
	font-size: .8rem;
	color: #51697f;
}

body.woocommerce-checkout .wc-block-components-totals-footer-item {
	border-top: 1px solid #dfe6ee;
	padding-top: 16px;
	margin-top: 4px;
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 1.22rem;
	font-weight: 800;
	color: #17344f;
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.42rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #17344f;
}

/* -------------------------------------------------------------------------
 * 7. Terms and the button
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-checkout__terms {
	font-size: .84rem;
	line-height: 1.6;
	color: #51697f;
	margin: 0 0 16px;
}

body.woocommerce-checkout .wc-block-checkout__terms a {
	color: #1c6490;
	font-weight: 600;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	display: block;
	width: 100%;
	background: #0f2742;
	border: 1px solid #0f2742;
	border-radius: 11px;
	color: #fff;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: .01em;
	padding: 17px 20px;
	min-height: 0;
	transition: background .16s ease;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: #16375c;
	border-color: #16375c;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled {
	background: #b9c6d3;
	border-color: #b9c6d3;
	color: #fff;
}

body.woocommerce-checkout .wc-block-checkout__actions_row {
	display: block;
}

/* The research-use statement is a compliance element and belongs at the last
   point a buyer can still stop. It is stated, not whispered. */
body.woocommerce-checkout .edp-checkout-ruo {
	margin: 16px 0 0;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .06em;
	color: #17344f;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 8. Two columns on a wide screen, one on a phone
 * ---------------------------------------------------------------------- */

@media (min-width: 1000px) {
	body.woocommerce-checkout .wc-block-components-sidebar-layout {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}

	body.woocommerce-checkout .wc-block-checkout__main { margin: 0; }

	body.woocommerce-checkout .wc-block-checkout__sidebar {
		position: sticky;
		top: 24px;
		margin: 0;
	}
}

/* -------------------------------------------------------------------------
 * 9. The cart, to match
 * ---------------------------------------------------------------------- */

body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(14px, 2.4vw, 22px);
}

body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wc-block-components-button:not(.wc-block-components-totals-coupon__button) {
	background: #0f2742;
	border: 1px solid #0f2742;
	border-radius: 11px;
	color: #fff;
	font-weight: 800;
	padding: 16px 20px;
}

body.woocommerce-cart .wc-block-cart-item__product-name,
body.woocommerce-cart .wc-block-components-product-name {
	font-weight: 700;
	color: #17344f;
}

/* -------------------------------------------------------------------------
 * 10. The label belongs above the field, and in the markup it comes after it
 *
 * WooCommerce writes the input first and the label second, because a floating
 * label is positioned over the field rather than placed before it. Taking the
 * label out of the float left it sitting underneath, naming the box above it.
 *
 * column-reverse puts it back on top without touching the markup, which keeps
 * the input/label association -- and the autofill, validation and screen
 * reader behaviour that hangs off it -- exactly as WooCommerce built it.
 *
 * Only the text inputs. The select container already writes its label first,
 * and reversing that one would send its label to the bottom and its dropdown
 * arrow to the top.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-components-text-input {
	display: flex;
	flex-direction: column-reverse;
}

/* =========================================================================
   THE CLASSIC CHECKOUT
   =========================================================================

   Sections 1-10 style the Cart and Checkout blocks. Sections 11-18 style the
   [woocommerce_checkout] and [woocommerce_cart] shortcodes, which render
   entirely different markup for the same five steps.

   Both are kept on purpose. The checkout moved to the shortcode on
   2026-10-26 because the payment gateway is a classic gateway and
   WooCommerce does not render classic gateways inside the Checkout block --
   an incompatible gateway simply does not appear, and if it is the only one,
   checkout reports that no payment methods are available. Deleting the block
   rules would make that decision irreversible for no gain: they are inert on
   a page that renders no blocks, and they are what the page needs again the
   day the gateway ships a blocks build.

   Much of the groundwork is already done elsewhere. The checkout page is
   rendered by page.php's shop branch, so it carries .account-page, and
   style.css section 3 already styles classic .form-row, labels, inputs,
   selects, checkboxes and focus rings for My Account. What follows is only
   what checkout adds on top: the steps as cards, the order table, the
   shipping and payment tiles, the place-order button and the two columns.
   ========================================================================= */

/* -------------------------------------------------------------------------
 * 11. The page
 *
 * .account-page carries a 1060px max-width and a tall top padding, which is
 * right for a login form and too narrow for two columns of checkout.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .account-page,
body.woocommerce-cart .account-page {
	max-width: 1180px;
	padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 28px) clamp(48px, 6vw, 72px);
	background: transparent;
}

body.woocommerce-checkout .account-page > h1,
body.woocommerce-cart .account-page > h1 {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: #17344f;
	margin: 0 0 clamp(16px, 2.4vw, 26px);
}

/* The template closes the page with the research-use statement. On checkout
   it now follows a Place Order button that already carries the same line
   directly above it, so the second one is repetition rather than emphasis. */
body.woocommerce-checkout .account-page > .note {
	margin-top: clamp(28px, 4vw, 44px);
	font-size: .78rem;
	line-height: 1.6;
	color: #51697f;
}

/* -------------------------------------------------------------------------
 * 12. Each step is a card
 *
 * The same four surfaces as the block checkout -- billing, shipping,
 * anything extra, and the order -- so that flipping the markup does not
 * change what the page looks like.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-account-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
/* rounded-3xl and p-6 md:p-8, matching the reference's summary card. */
body.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 24px;
	padding: clamp(24px, 3vw, 32px);
	margin: 0 0 18px;
	box-shadow: 0 1px 2px rgba(15, 39, 66, .04);
}

/*
 * An empty step is a card with nothing in it. WooCommerce prints the wrapper
 * whether or not the store has anything to put inside.
 *
 * :empty is the obvious test and the wrong one: it counts whitespace text
 * nodes, and WooCommerce's templates leave newlines between their tags, so a
 * wrapper holding nothing but a line break still drew a 38px card. :has(*)
 * asks the question actually meant -- are there any child elements.
 */
body.woocommerce-checkout .woocommerce-account-fields:not(:has(*)),
body.woocommerce-checkout .woocommerce-additional-fields:not(:has(*)) {
	display: none;
}

body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout #order_review_heading {
	font-size: clamp(1.18rem, 2.2vw, 1.42rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #17344f;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

/* "Ship to a different address?" is a heading that is also a control. It
   keeps the heading's weight and loses the heading's size, because what it
   actually does is tick a box. */
body.woocommerce-checkout #ship-to-different-address {
	font-size: 1rem;
	margin: 0;
}

body.woocommerce-checkout #ship-to-different-address label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: #17344f;
	margin: 0;
	cursor: pointer;
}

body.woocommerce-checkout #ship-to-different-address-checkbox {
	margin-right: 10px;
	vertical-align: -.1em;
	accent-color: #1c6490;
}

body.woocommerce-checkout .shipping_address {
	margin-top: 18px;
}

/* -------------------------------------------------------------------------
 * 13. Fields
 *
 * style.css already puts the label above the input and styles both. Two
 * things are specific to checkout. The font size goes to 16px, below which
 * iOS zooms the whole page when a field takes focus -- tolerable on a login
 * form with two fields, not on an address form with ten. And the first and
 * last name sit side by side, which WooCommerce does with floats that have
 * to be unset before a grid will hold them.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .account-page .form-row input[type="text"],
body.woocommerce-checkout .account-page .form-row input[type="email"],
body.woocommerce-checkout .account-page .form-row input[type="tel"],
body.woocommerce-checkout .account-page .form-row input[type="password"],
body.woocommerce-checkout .account-page .form-row select,
body.woocommerce-checkout .account-page .form-row textarea,
body.woocommerce-checkout .account-page .select2-selection--single {
	font-size: 16px;
	border-radius: 10px;
	padding: 13px 14px;
}

body.woocommerce-checkout .account-page .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

body.woocommerce-checkout .account-page .form-row > label {
	font-size: .84rem;
	font-weight: 700;
	color: #17344f;
}

body.woocommerce-checkout .account-page .form-row > label .required {
	color: #b4232a;
	font-weight: 700;
	text-decoration: none;
}

body.woocommerce-checkout .account-page .form-row > label .optional {
	color: #8198ae;
	font-weight: 400;
}

body.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* Autofill paints its own background; force the field back to white so a
   remembered address does not arrive in Chrome's yellow. */
body.woocommerce-checkout .account-page .form-row input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: #17344f;
}

body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select {
	border-color: #b4232a;
}

/*
 * Below 560px the two names stack, which is what the block checkout did.
 * WooCommerce floats them at 47% at every width, and 47% of a 375px phone is
 * a 145px box for a name -- so the float and the width are both unset, and
 * the grid above takes over from 560px up.
 */
@media (max-width: 559px) {
	body.woocommerce-checkout .woocommerce form.checkout .form-row-first,
	body.woocommerce-checkout .woocommerce form.checkout .form-row-last {
		float: none;
		width: 100%;
	}
}

@media (min-width: 560px) {
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
	}

	/*
	 * WooCommerce floats form-row-first and form-row-last at 47% and leaves
	 * the rest at full width. A float inside a grid is laid out as a grid
	 * item and the float is ignored, but the width is not -- so every row
	 * would come out at 47% of its column. Both have to go.
	 */
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
	body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
	body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
		float: none;
		width: auto;
		grid-column: 1 / -1;
	}

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

/* -------------------------------------------------------------------------
 * 14. Shipping method and payment method, as tiles
 *
 * One row, one choice. Classic markup has no "selected" class on the row, so
 * the highlight comes from :has(), and a browser without it gets the plain
 * tile and the radio button -- which is still a usable control, just a
 * quieter one.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout ul.wc_payment_methods,
body.woocommerce-checkout ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid #d4dde6;
	border-radius: 11px;
	margin: 0 0 10px;
	padding: 15px 16px 15px 46px;
	transition: border-color .14s ease, background .14s ease;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input.input-radio:checked) {
	border-color: #1c6490;
	background: #eff6fc;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > input.input-radio {
	position: absolute;
	left: 16px;
	top: 19px;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #1c6490;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: #17344f;
	margin: 0;
	cursor: pointer;
}

/* A gateway may put its own logo in the label. Keep it in proportion to the
   text rather than at whatever pixel height the plugin shipped. */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label img {
	max-height: 24px;
	width: auto;
	margin-left: 8px;
	vertical-align: middle;
}

/*
 * The panel a payment method opens below its own row.
 *
 * WooCommerce's default payment_box is a pale lavender block with a triangle
 * pointing at the label, which reads as a warning. It becomes the same
 * indented continuation of the tile that the block checkout uses.
 *
 * #payment and div are in the selector for specificity, not for reach.
 * WooCommerce styles this as .woocommerce-checkout #payment div.payment_box,
 * and an ID beats any number of classes -- a rule written without one lost
 * silently and left the lavender block and its triangle in place. Do not
 * shorten these selectors, and do not reach for !important instead.
 */
body.woocommerce-checkout #payment li.wc_payment_method div.payment_box {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 12px 0 0;
	padding: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: #46617a;
}

body.woocommerce-checkout #payment li.wc_payment_method div.payment_box::before,
body.woocommerce-checkout #payment li.wc_payment_method div.payment_box::after {
	content: none;
	display: none;
	border: 0;
}

body.woocommerce-checkout #payment li.wc_payment_method div.payment_box p {
	margin: 0 0 10px;
	color: #46617a;
}

body.woocommerce-checkout #payment li.wc_payment_method div.payment_box p:last-child {
	margin-bottom: 0;
}

/* Shipping rates sit inside the order table, where the column is narrower
   than a step card -- so these are rows rather than full tiles. */
body.woocommerce-checkout ul#shipping_method li {
	position: relative;
	margin: 0 0 7px;
	padding: 0 0 0 28px;
	font-size: .92rem;
	line-height: 1.45;
	color: #17344f;
	text-align: left;
}

body.woocommerce-checkout ul#shipping_method li:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout ul#shipping_method li input.shipping_method {
	position: absolute;
	left: 0;
	top: 2px;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: #1c6490;
}

body.woocommerce-checkout ul#shipping_method li label {
	display: block;
	font-weight: 600;
	color: #17344f;
	margin: 0;
	cursor: pointer;
}

/* Before an address is entered there are no rates to show. Say so in a box
   rather than as a stray line of grey text. */
body.woocommerce-checkout .woocommerce-shipping-destination,
body.woocommerce-checkout p.woocommerce-shipping-contents {
	font-size: .82rem;
	line-height: 1.5;
	color: #51697f;
	margin: 8px 0 0;
}

/* -------------------------------------------------------------------------
 * 15. The order summary
 *
 * A table in the markup, a list of rows on the page. The block checkout's
 * summary is a stack of items with a total underneath, and this is the same
 * thing built out of table cells.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout #order_review table.shop_table {
	width: 100%;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	margin: 0 0 20px;
}

body.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #51697f;
	background: transparent;
	border: 0;
	padding: 0 0 10px;
	text-align: left;
}

body.woocommerce-checkout #order_review table.shop_table thead th.product-total {
	text-align: right;
}

body.woocommerce-checkout #order_review table.shop_table tbody td,
body.woocommerce-checkout #order_review table.shop_table tfoot th,
body.woocommerce-checkout #order_review table.shop_table tfoot td {
	border: 0;
	background: transparent;
	padding: 14px 0;
	vertical-align: top;
}

/* The row draws the rule, not the cells: two of them, one inset from the
   other, is what read as the subtotal being misaligned. */
body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td {
	border-bottom: 0;
}

body.woocommerce-checkout #order_review table.shop_table td.product-name {
	font-size: .96rem;
	font-weight: 700;
	line-height: 1.35;
	color: #17344f;
}

body.woocommerce-checkout #order_review table.shop_table td.product-name .product-quantity {
	font-weight: 600;
	color: #51697f;
}

/* The money column should take exactly the room its figures need and no
   more. Left to itself the table shared the width evenly, and "SUBTOTAL"
   -- uppercase, tracked out -- claimed enough of a 375px screen to break
   a product name across lines mid-name ("EDP-H2O - 3 / mL x 1"). A table
   cell set to width: 1% collapses to its content, handing the remainder
   to the name beside it. */
body.woocommerce-checkout #order_review table.shop_table thead th.product-total,
body.woocommerce-checkout #order_review table.shop_table td.product-total {
	width: auto;
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	padding-left: 12px;
}

/* The quantity reads as part of the name and should never be what wraps.
   On its own line it stops competing with the name for the same row. */
body.woocommerce-checkout #order_review table.shop_table td.product-name .product-quantity {
	display: block;
	margin-top: 3px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* Tracking that reads as considered at desktop widths is just stolen
	   millimetres here. */
	body.woocommerce-checkout #order_review table.shop_table thead th {
		font-size: .68rem;
		letter-spacing: .08em;
	}
}

/* The variation a researcher chose -- the amount -- is the difference
   between two rows that otherwise read identically. */
body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation {
	margin: 5px 0 0;
	font-size: .82rem;
	line-height: 1.5;
	color: #51697f;
}

body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation dt,
body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation dd {
	display: inline;
	margin: 0;
	font-weight: 600;
}

body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation dd {
	font-weight: 400;
}

body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation dd p {
	display: inline;
	margin: 0;
}

body.woocommerce-checkout #order_review table.shop_table td.product-total,
body.woocommerce-checkout #order_review table.shop_table tfoot td {
	text-align: right;
	font-size: 1rem;
	font-weight: 700;
	color: #17344f;
	white-space: nowrap;
}

body.woocommerce-checkout #order_review table.shop_table tfoot th {
	font-size: .92rem;
	font-weight: 600;
	color: #46617a;
	text-align: left;
}

body.woocommerce-checkout #order_review table.shop_table tfoot tr th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr td {
	padding: 9px 0;
	/* The row draws the rule now; a cell border here was the second,
	   inset line that read as the figures being out of place. */
	border-top: 0;
}

body.woocommerce-checkout #order_review table.shop_table tfoot tr.woocommerce-shipping-totals th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr.woocommerce-shipping-totals td {
	vertical-align: top;
}

body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
	border-top: 0;
	padding-top: 16px;
}

body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th {
	font-size: 1.22rem;
	font-weight: 800;
	color: #17344f;
}

body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td,
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td strong {
	font-size: 1.42rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #17344f;
}

body.woocommerce-checkout #order_review table.shop_table tfoot small.includes_tax {
	display: block;
	font-size: .78rem;
	font-weight: 400;
	color: #51697f;
	margin-top: 3px;
}

/* -------------------------------------------------------------------------
 * 16. The coupon, terms and the button
 *
 * The coupon form is printed above the checkout form, not inside it, so it
 * gets its own card rather than a place in the grid.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin: 0 0 18px;
}

/*
 * A bordered card with a blue rule down its side made the coupon the loudest
 * thing above the fold, which is an expensive place to tell someone a discount
 * exists that they do not have. It says the same thing as one quiet line.
 */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font-size: .85rem;
	line-height: 1.5;
	color: #6b8299;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: #1c6490;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
}

body.woocommerce-checkout form.checkout_coupon {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(16px, 2.4vw, 22px);
	margin: 0 0 18px;
}

@media (min-width: 560px) {
	body.woocommerce-checkout form.checkout_coupon {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	body.woocommerce-checkout form.checkout_coupon > p {
		margin: 0;
		float: none;
		width: auto;
	}

	body.woocommerce-checkout form.checkout_coupon > p.form-row-first {
		flex: 1 1 220px;
	}
}

body.woocommerce-checkout form.checkout_coupon input#coupon_code {
	font-size: 16px;
	border-radius: 10px;
	padding: 13px 14px;
	width: 100%;
	box-sizing: border-box;
}

body.woocommerce-checkout form.checkout_coupon button {
	background: #1c6490;
	border: 1px solid #1c6490;
	border-radius: 10px;
	color: #fff;
	font-size: .92rem;
	font-weight: 700;
	padding: 13px 20px;
}

body.woocommerce-checkout form.checkout_coupon button:hover:not(:disabled) {
	background: #17557a;
	border-color: #17557a;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	border-top: 1px solid #e8eef4;
	margin-top: 18px;
	padding-top: 18px;
	font-size: .84rem;
	line-height: 1.6;
	color: #51697f;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
	font-size: .84rem;
	line-height: 1.6;
	color: #51697f;
	margin: 0 0 12px;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: #1c6490;
	font-weight: 600;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
	font-weight: 400;
	color: #46617a;
}

body.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	float: none;
	background: #0f2742;
	border: 1px solid #0f2742;
	border-radius: 11px;
	color: #fff;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: .01em;
	padding: 17px 20px;
	margin: 16px 0 0;
	min-height: 0;
	transition: background .16s ease;
}

body.woocommerce-checkout #place_order:hover:not(:disabled) {
	background: #16375c;
	border-color: #16375c;
}

body.woocommerce-checkout #place_order:disabled {
	background: #b9c6d3;
	border-color: #b9c6d3;
	color: #fff;
	cursor: not-allowed;
}

/*
 * The research-use statement is printed by
 * woocommerce_review_order_before_submit, which fires above the terms, so it
 * is pulled below them to sit directly on top of the button -- the last
 * thing read before the order is placed. Section 7 styles the paragraph
 * itself and applies to both checkouts.
 */
body.woocommerce-checkout #payment .place-order {
	display: flex;
	flex-direction: column;
	/*
	 * WooCommerce pads this row 16px on each side, which insets the button
	 * from the edge of the card while the order table above it runs the full
	 * width. The button is the widest element on the page and the one the eye
	 * uses to find the edge, so it aligns with everything else.
	 */
	padding-left: 0;
	padding-right: 0;
}

body.woocommerce-checkout #payment .place-order > .edp-checkout-ruo {
	order: 2;
	margin: 18px 0 0;
}

body.woocommerce-checkout #payment .place-order > #place_order {
	order: 3;
}

/* -------------------------------------------------------------------------
 * 17. Two columns on a wide screen, one on a phone
 *
 * Address on the left, order and payment on the right. Row 1 is left empty
 * for WooCommerce's notice group, which is printed inside the form and would
 * otherwise be placed into whichever cell happened to be free.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout #customer_details .col2-set,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/*
 * The grid sits on div.woocommerce, not on the checkout form.
 *
 * It used to sit on the form, which was enough while everything that needed
 * placing was inside it. The sign-in line is not: WooCommerce prints it, and
 * the login form it opens, as siblings of the checkout form. To put those two
 * below the address they have to be items in the same grid as the address,
 * which means the grid has to be on the element that contains all of it.
 *
 * Nothing is moved to achieve this. The login form stays exactly where
 * WooCommerce put it, outside form.checkout, because it is a <form> with its
 * own submit button: nested inside the checkout form there is a real question
 * about which form that button submits, and on this page the wrong answer
 * places an order. Ordering it with CSS cannot raise that question at all.
 *
 * The form's own box is dissolved so its children join the same grid. Every
 * child of either element is placed by name below, including the express
 * payment block and the empty notice wrappers: an unplaced item is
 * auto-placed into whatever cell happens to be free, which is how a hidden
 * 0-height div ends up stealing the address's cell.
 */
@media (min-width: 1000px) {
	body.woocommerce-checkout div.woocommerce {
		display: grid;
		/* 1.5fr/1fr, as the reference checkout has it. At 1.1 the summary
		   was nearly as wide as the form it summarises. */
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
		/* Rows 1-3 run full width; 4-7 are the two columns. The last takes
		   the free space, so the tall right-hand column cannot hand its
		   surplus height to the rows above and prise them apart. */
		grid-template-rows: auto auto auto auto auto auto 1fr;
	}

	body.woocommerce-checkout div.woocommerce > form.checkout {
		display: contents;
	}

	/* Full width, above both columns. */
	body.woocommerce-checkout div.woocommerce > .woocommerce-notices-wrapper,
	body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
	body.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	/*
	 * WooCommerce prints two notice wrappers and fills at most one. Both are
	 * placed in row 1, so the empty one is dropped out of the grid entirely
	 * rather than left sitting in the same cell as the one with the message
	 * in it.
	 */
	body.woocommerce-checkout div.woocommerce > .woocommerce-notices-wrapper:empty {
		display: none;
	}

	body.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	body.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/*
	 * Left column, in the order a buyer works through it. Signing in comes
	 * first, before the address: its whole value is that it fills the address
	 * in for you, which it cannot do once you have typed it.
	 */
	body.woocommerce-checkout div.woocommerce > .woocommerce-form-login-toggle {
		grid-column: 1;
		grid-row: 4;
	}

	body.woocommerce-checkout div.woocommerce > form.woocommerce-form-login {
		grid-column: 1;
		grid-row: 5;
	}

	body.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 6;
	}

	body.woocommerce-checkout form.checkout > .edp-account-fields--moved {
		grid-column: 1;
		grid-row: 7;
	}

	/* Right column, beside all of it. */
	body.woocommerce-checkout form.checkout > .edp-order-col {
		grid-column: 2;
		grid-row: 4 / span 4;
		position: sticky;
		top: 24px;
		align-self: start;
	}

	body.woocommerce-checkout .edp-order-col > #order_review {
		margin-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
 * 18. The cart, to match
 * ---------------------------------------------------------------------- */

body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(14px, 2.4vw, 22px);
	box-shadow: 0 1px 2px rgba(15, 39, 66, .04);
}

body.woocommerce-cart table.shop_table.cart {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
}

body.woocommerce-cart table.shop_table.cart th {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #51697f;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #e8eef4;
	padding: 0 10px 10px 0;
	text-align: left;
}

body.woocommerce-cart table.shop_table.cart td {
	border: 0;
	border-bottom: 1px solid #e8eef4;
	background: transparent;
	padding: 16px 10px 16px 0;
	vertical-align: middle;
}

body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	width: 64px;
	height: auto;
	border-radius: 8px;
	border: 1px solid #e3eaf1;
	background: #02102c;
}

body.woocommerce-cart table.shop_table.cart td.product-name a {
	font-size: .96rem;
	font-weight: 700;
	line-height: 1.3;
	color: #17344f;
	text-decoration: none;
}

body.woocommerce-cart table.shop_table.cart td.product-price,
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
	font-weight: 700;
	color: #17344f;
	white-space: nowrap;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f4f7fa;
	color: #51697f !important;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
	background: #fdecec;
	color: #b4232a !important;
}

body.woocommerce-cart table.shop_table.cart td.actions {
	border-bottom: 0;
	padding-top: 18px;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 12px;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon label {
	font-size: .84rem;
	font-weight: 700;
	color: #17344f;
	margin: 0;
}

body.woocommerce-cart table.shop_table.cart td.actions input#coupon_code {
	flex: 1 1 160px;
	font-size: 16px;
	border-radius: 10px;
	padding: 12px 14px;
	border: 1px solid #d4dde6;
	box-sizing: border-box;
}

body.woocommerce-cart .cart_totals h2 {
	font-size: 1.18rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #17344f;
	margin: 0 0 14px;
}

body.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	border: 0;
	border-top: 1px solid #e8eef4;
	background: transparent;
	padding: 11px 0;
	font-size: .92rem;
}

body.woocommerce-cart .cart_totals table.shop_table th {
	font-weight: 600;
	color: #46617a;
	text-align: left;
}

body.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	font-weight: 700;
	color: #17344f;
}

body.woocommerce-cart .cart_totals tr.order-total th {
	font-size: 1.18rem;
	font-weight: 800;
	color: #17344f;
}

body.woocommerce-cart .cart_totals tr.order-total td,
body.woocommerce-cart .cart_totals tr.order-total td strong {
	font-size: 1.36rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #17344f;
}

body.woocommerce-cart .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #0f2742;
	border: 1px solid #0f2742;
	border-radius: 11px;
	color: #fff;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: .01em;
	padding: 17px 20px;
	text-align: center;
	text-decoration: none;
	transition: background .16s ease;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: #16375c;
	border-color: #16375c;
}

/* The cart's own submit buttons -- Update cart, Apply coupon -- are
   secondary to Proceed to checkout and should not compete with it. */
body.woocommerce-cart table.shop_table.cart td.actions button {
	background: #fff;
	border: 1px solid #c7d6e2;
	border-radius: 10px;
	color: #17344f;
	font-size: .9rem;
	font-weight: 700;
	padding: 12px 18px;
}

body.woocommerce-cart table.shop_table.cart td.actions button:hover:not(:disabled) {
	border-color: #1c6490;
	color: #1c6490;
}

@media (min-width: 1000px) {
	body.woocommerce-cart .account-page .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}

	body.woocommerce-cart .account-page .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	body.woocommerce-cart .cart-collaterals {
		width: auto;
		float: none;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		width: auto;
		float: none;
		position: sticky;
		top: 24px;
	}
}

/* Below that, the two stack and the totals need air above them. */
@media (max-width: 999px) {
	body.woocommerce-cart .cart-collaterals {
		width: auto;
		float: none;
		margin-top: 18px;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		width: auto;
		float: none;
	}
}

/* -------------------------------------------------------------------------
 * 19. On a phone, the order comes before the address
 *
 * In the markup the address block comes first and the order second, which on
 * a desktop is two columns side by side and fine. On a phone it is one
 * column, so a buyer scrolls past nine address fields before seeing what they
 * are buying or what it costs. The numbers should come first: they are what
 * the page is for, and they are what a buyer checks before deciding to fill
 * anything in.
 *
 * The order cannot simply be moved as a block. #order_review holds the order
 * table *and* the payment methods *and* Place Order, so lifting it whole
 * would put the pay button above the address form. `display: contents` drops
 * #order_review's own box and promotes its children to flex items of the
 * form, which is what allows the table to go up and the payment to stay down.
 *
 * That dropped box carried the white card, so the card moves onto the two
 * children instead -- and only at this width, because above 1000px section 17
 * needs #order_review to be a real grid item again.
 *
 * WooCommerce replaces both of these children over AJAX whenever the totals
 * change. These rules match on class and id rather than on the element, so
 * the replacements inherit them.
 * ---------------------------------------------------------------------- */

@media (max-width: 999px) {
	/*
	 * The flex container sits one level above the form, on the div that holds
	 * the coupon and the form both. WooCommerce prints the coupon as a sibling
	 * of the checkout form rather than inside it, so it can only take a place
	 * among the form's own rows if the form's box is dissolved and everything
	 * shares one container.
	 *
	 * Nothing moves in the DOM. The coupon stays its own <form> element, which
	 * is the whole reason it cannot simply be hooked into the checkout form:
	 * a nested form is dropped by the parser and the coupon would stop working.
	 */
	body.woocommerce-checkout div.woocommerce {
		display: flex;
		flex-direction: column;
	}

	/*
	 * The form, the wrapper and #order_review all dissolve here, so the
	 * heading, the table, the address block and the payment block become flex
	 * items of one container and can be ordered against each other.
	 */
	body.woocommerce-checkout div.woocommerce > form.checkout,
	body.woocommerce-checkout form.checkout > .edp-order-col,
	body.woocommerce-checkout .edp-order-col > #order_review {
		display: contents;
	}

	/*
	 * Anything not placed below -- a notice, or something a plugin prints into
	 * this div later -- stays at the top instead of falling to order 0 and
	 * landing above the summary. Notices want to be first anyway.
	 */
	body.woocommerce-checkout div.woocommerce > * { order: 1; }

	/*
	 * Only the first four of these are children of div.woocommerce; the rest
	 * sit under #order_review and form.checkout, which dissolve above. The
	 * default rule cannot reach those -- `>` still reads the DOM, which
	 * display:contents does not touch -- so every one of them is placed by
	 * name here. Anything under a dissolved parent that is NOT named falls to
	 * order 0 and lands at the very top, which is where a notice belongs and
	 * where nothing else should end up.
	 */
	body.woocommerce-checkout .edp-order-col > #order_review_heading            { order: 2; }
	body.woocommerce-checkout #order_review > table.shop_table                  { order: 3; }
	/* 4 and 6 are the two pickup-note states, placed in section 23. */
	body.woocommerce-checkout form.checkout > #customer_details                 { order: 5; }
	body.woocommerce-checkout div.woocommerce > .woocommerce-form-coupon-toggle { order: 7; }
	body.woocommerce-checkout div.woocommerce > form.checkout_coupon            { order: 8; }
	body.woocommerce-checkout #order_review > .edp-payment-heading              { order: 9; }
	body.woocommerce-checkout #order_review > #payment                          { order: 10; }

	/* The card that #order_review used to draw, now drawn twice. */
	body.woocommerce-checkout #order_review > table.shop_table,
	body.woocommerce-checkout #order_review > #payment {
		background: #fff;
		border: 1px solid #dfe6ee;
		border-radius: 14px;
		padding: clamp(18px, 2.6vw, 26px);
		margin: 0 0 18px;
		box-shadow: 0 1px 2px rgba(15, 39, 66, .04);
		box-sizing: border-box;
	}

	/* The table's own rules set the row padding; the card supplies the rest. */
	body.woocommerce-checkout #order_review > table.shop_table {
		border-collapse: collapse;
	}

	/*
	 * "Your order" now heads the summary rather than the whole lower half, so
	 * it sits tight above its own card instead of floating between sections.
	 */
	body.woocommerce-checkout .edp-order-col > #order_review_heading {
		margin-bottom: 14px;
	}
}

/* -------------------------------------------------------------------------
 * 20. The payment choices read as choices
 *
 * Three unlabelled boxes under a total is not a question anyone recognises.
 * They get a heading, a glyph each, and -- where there is something true and
 * useful to say -- a badge, so the trade-off between them is legible without
 * selecting one to find out.
 *
 * The glyphs are generic shapes: a card, a bank, a phone. No payment brand's
 * own mark is drawn here. Those belong to their owners and are shown only as
 * the files their owners published, which is what the footer strip does.
 * ---------------------------------------------------------------------- */

/*
 * WooCommerce prints the terms wrapper whether or not a terms page is set.
 * With none set it holds a single empty div, and section 16's border-top drew
 * that as a stray 19px rule above the research-use statement -- a line with
 * nothing on either side of it.
 */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper:not(:has(label, input, a)) {
	display: none;
}

body.woocommerce-checkout .edp-payment-heading {
	font-size: 1.06rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #17344f;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}

/* The label becomes a row, so a glyph and a badge sit on it without the
   padding arithmetic that an absolutely positioned icon would need. */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px 10px;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label::before {
	content: '';
	flex: none;
	width: 19px;
	height: 19px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: .6;
}

/* A bank, for a transfer. */
body.woocommerce-checkout li.payment_method_edp_zelle > label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317344f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5H3z'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8M2.5 20.5h19'/%3E%3C/svg%3E");
}

/* A phone, for an app. */
body.woocommerce-checkout li.payment_method_edp_venmo > label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317344f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.6'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
}

/* A card, for the card gateway. */
body.woocommerce-checkout li.payment_method_solruo > label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317344f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3C/svg%3E");
}

/*
 * The Zelle badge states the discount the cart actually applies. It is a fact
 * about the order, not a nudge: a buyer choosing between three methods should
 * not have to pick one to discover it is cheaper.
 */
body.woocommerce-checkout li.payment_method_edp_zelle > label::after {
	content: 'Save 5%';
	flex: none;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #11624a;
	background: #e7f4ee;
	border: 1px solid #bfe0d1;
	border-radius: 999px;
	padding: 3px 9px;
	line-height: 1.5;
}

/* The card tile's own title already lists what it covers, so it carries the
   quieter badge: what a buyer gets that the other two do not. */
body.woocommerce-checkout li.payment_method_solruo > label::after {
	content: 'Instant';
	flex: none;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #1c5a86;
	background: #eaf3fa;
	border: 1px solid #c6ddee;
	border-radius: 999px;
	padding: 3px 9px;
	line-height: 1.5;
}

/* The title wraps to two lines on a phone now that it names four methods, so
   the badge needs to sit under it rather than squeeze it. */
@media (max-width: 420px) {
	body.woocommerce-checkout li.payment_method_solruo > label {
		align-items: flex-start;
	}

	body.woocommerce-checkout li.payment_method_solruo > label::before {
		margin-top: 2px;
	}
}

/* -------------------------------------------------------------------------
 * 21. Spacing
 *
 * One rhythm for the whole page rather than each block's own. The cards sit
 * 18px apart, their headings 18px above their contents, and the fields 16px
 * apart -- so a buyer's eye travels at one speed instead of three.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .account-page > h1 {
	margin-bottom: clamp(14px, 2vw, 22px);
}

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout #order_review {
	margin-bottom: 18px;
}

/* The payment card closes the page; nothing follows it that needs the gap. */
body.woocommerce-checkout #payment {
	padding-bottom: 4px;
}

/* A rule above the button and nothing else: the research-use statement and
   the button read as one closing block. */
body.woocommerce-checkout #payment .place-order {
	border-top: 1px solid #e8eef4;
	margin-top: 18px;
	padding-top: 18px;
}

body.woocommerce-checkout #payment .place-order > .edp-checkout-ruo {
	margin: 0 0 14px;
}

body.woocommerce-checkout #payment .place-order > #place_order {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 22. The payment window
 *
 * The gateway builds its modal in JavaScript and injects its own stylesheet
 * into the head when it does, so those rules land after this file. An ID on
 * its own would tie on specificity and lose on source order; `html body`
 * ahead of the ID wins without !important.
 *
 * Two things are wrong with the shipped box. It is a fixed 640px tall with
 * overflow hidden, so on a short screen the bottom of the form -- including
 * the save-my-details line -- is simply cut off. And on a phone it floats as
 * a centred rectangle with the page showing around it, which is not how a
 * payment step should feel on a phone.
 * ---------------------------------------------------------------------- */

/*
 * A fallback only. solruo-modal-fit.js measures the form and sets an inline
 * height, which beats this. These numbers are what a visitor gets if that
 * measurement fails, so they err toward too tall: an empty strip under a
 * short form is recoverable, a cut-off card form is not.
 */
html body #solruo-modal-box {
	max-width: 480px;
	height: min(88vh, 720px);
	border-radius: 16px;
	transition: height .18s ease;
}

html body #solruo-modal-close {
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	line-height: 34px;
	background: rgba(15, 39, 66, .07);
	color: #17344f;
	font-size: 19px;
}

html body #solruo-modal-spinner {
	background: #f4f7fa;
	color: #51697f;
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: .92rem;
}

/* On a phone it becomes a sheet off the bottom edge: full width, square at
   the floor, and tall enough that the form is not cut in half. */
@media (max-width: 520px) {
	html body #solruo-modal-overlay {
		align-items: flex-end;
	}

	html body #solruo-modal-box {
		max-width: none;
		height: min(90vh, 720px);
		border-radius: 18px 18px 0 0;
	}
}

/* -------------------------------------------------------------------------
 * 16. The order summary, settled
 *
 * Section 15 above keeps the summary as a real table and sizes the money
 * column with `width: 1%`. That works until a line needs two stacked
 * controls beside the price, which is what the quantity stepper and the
 * remove button are -- and it is also why six attempts to fix this from
 * style.css all failed. Everything here is prefixed
 * `body.woocommerce-checkout #order_review table.shop_table`, three classes
 * and three elements, and nothing in style.css comes close to it. Those
 * rules were never applying. This file is where the summary lives, so the
 * fix belongs here.
 *
 * Rows become flex: the name side grows, the figure side takes its own
 * width, and the shipping row wraps so its options get the full measure.
 * box-sizing is declared rather than assumed, which is what made rows
 * 28px wider than the card holding them.
 *
 * Measured in a browser with this stylesheet loaded, at 390, 360 and 320px.
 * The earlier harness loaded style.css alone, which is exactly why it kept
 * passing while the real page kept failing.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout #order_review table.shop_table,
body.woocommerce-checkout #order_review table.shop_table thead,
body.woocommerce-checkout #order_review table.shop_table tbody,
body.woocommerce-checkout #order_review table.shop_table tfoot,
body.woocommerce-checkout #order_review table.shop_table tr,
body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
	box-sizing: border-box;
	display: block;
	width: auto;
	max-width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
}

body.woocommerce-checkout #order_review table.shop_table { width: 100%; margin: 0 0 20px; }

body.woocommerce-checkout #order_review table.shop_table tr {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 0;
	border-bottom: 1px solid #e8eef4;
}

body.woocommerce-checkout #order_review table.shop_table tr > :first-child {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

body.woocommerce-checkout #order_review table.shop_table tr > :last-child {
	flex: 0 1 auto;
	min-width: 0;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The heading row: smaller, and allowed to shrink so the long word cannot
   push itself off the edge of the card. */
body.woocommerce-checkout #order_review table.shop_table thead th {
	padding: 0 0 10px;
	font-size: .68rem;
	letter-spacing: .07em;
}

/* A line: vial, then the name with its control beneath, then the figure. */
body.woocommerce-checkout #order_review table.shop_table td.product-name {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 12px;
	row-gap: 9px;
}
body.woocommerce-checkout #order_review table.shop_table td.product-name .edp-review-art { grid-row: 1 / span 2; }
body.woocommerce-checkout #order_review table.shop_table td.product-name .edp-review-name {
	grid-column: 2;
	align-self: center;
	overflow-wrap: anywhere;
}
body.woocommerce-checkout #order_review table.shop_table td.product-name .edp-rq {
	grid-column: 2;
	display: inline-flex;
	width: max-content;
}

/* The figure, with remove beneath it. */
body.woocommerce-checkout #order_review table.shop_table td.product-total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 9px;
	width: auto;
	padding-left: 12px;
}

/* Shipping options take the whole row rather than the money column. */
body.woocommerce-checkout #order_review table.shop_table tr.woocommerce-shipping-totals { flex-wrap: wrap; }
body.woocommerce-checkout #order_review table.shop_table tr.woocommerce-shipping-totals > th,
body.woocommerce-checkout #order_review table.shop_table tr.woocommerce-shipping-totals > td {
	flex: 1 1 100%;
	text-align: left;
	white-space: normal;
}
body.woocommerce-checkout #order_review table.shop_table #shipping_method {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}
body.woocommerce-checkout #order_review table.shop_table #shipping_method li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	line-height: 1.35;
	min-width: 0;
}
body.woocommerce-checkout #order_review table.shop_table #shipping_method input { margin-top: 3px; flex: 0 0 auto; }
body.woocommerce-checkout #order_review table.shop_table #shipping_method label { min-width: 0; overflow-wrap: anywhere; }

body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total {
	border-bottom: 0;
	border-top: 2px solid #17344f;
}
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total > * { font-size: 1.05rem; font-weight: 700; }

/* -------------------------------------------------------------------------
 * 24. Signing in, signing up, and the coupon
 *
 * Three things above the address form, each of them printed by WooCommerce as
 * a "notice": the sign-in line, the coupon line, and the box the coupon line
 * opens. The coupon line was already quietened in section 16; the sign-in one
 * never was, so it kept WooCommerce's notice treatment -- a tinted bar, a
 * left rule, and a pseudo-element glyph positioned over the text rather than
 * beside it. On this theme's line-height that glyph lands on top of
 * "Returning customer?", which is the overlap on the page.
 *
 * Same treatment as the coupon, for the same reason: it is one line of
 * offered help, not an alert.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-form-login-toggle {
	margin: 0 0 14px;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font-size: .85rem;
	line-height: 1.5;
	color: #6b8299;
}

/* The glyph is the overlap. There is no room for it and no need for it. */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::after {
	content: none;
	display: none;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a {
	color: #1c6490;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The sign-in form it opens, so it reads as part of the page and not a notice. */
body.woocommerce-checkout form.woocommerce-form-login {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(16px, 2.4vw, 22px);
	margin: 0 0 18px;
}

body.woocommerce-checkout form.woocommerce-form-login input.input-text {
	font-size: 16px;
	border-radius: 10px;
	padding: 13px 14px;
	width: 100%;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * The coupon box, open
 *
 * It was a link, that opened a box, that held a field: three actions to type
 * eight characters, and the first of them invisible to anyone not looking for
 * it. The box is shown from the start and the link is dropped. The form's own
 * card and field styling is already set in section 16.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}

/*
 * And the form it opened, which has moved. The discount field now sits in
 * the order summary, next to the figures it changes, so WooCommerce's copy at
 * the top of the page is redundant -- hidden here, and put back by the
 * <noscript> block in functions.php for a page that cannot run the script
 * that drives the replacement.
 */
body.woocommerce-checkout form.checkout_coupon {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * The discount field, in the summary
 *
 * Printed into the summary table immediately above the order total. Every
 * row in that table is laid out as a flex pair -- a label that grows and a
 * figure that does not wrap -- which is wrong for a row that is one full
 * width control, so this row opts out and lays itself out.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout #order_review table.shop_table tr.edp-coupon-row {
	display: block;
	padding: 14px 0;
}

body.woocommerce-checkout #order_review table.shop_table tr.edp-coupon-row > td {
	display: block;
	width: 100%;
	text-align: left;
	white-space: normal;
}

body.woocommerce-checkout .edp-coupon {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/*
 * flex-basis 0 with an explicit width, not `min-width: 0` alone: a text input
 * carries an intrinsic width from its `size` attribute that min-width does
 * not defeat, and the button was being pushed out of the card by it.
 */
body.woocommerce-checkout .edp-coupon input#edp_coupon_code {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	box-sizing: border-box;
	color-scheme: light;
	background: #fff;
	color: var(--edp-navy, #0f2742);
	border: 1px solid #d4dde6;
	border-radius: 10px;
	padding: 11px 12px;
	font: inherit;
	font-size: 16px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.woocommerce-checkout .edp-coupon input#edp_coupon_code::placeholder {
	letter-spacing: normal;
	text-transform: none;
	color: #8aa0b5;
}

body.woocommerce-checkout .edp-coupon-apply {
	flex: 0 0 auto;
	appearance: none;
	background: #1c6490;
	border: 1px solid #1c6490;
	border-radius: 10px;
	color: #fff;
	font: inherit;
	font-size: .9rem;
	font-weight: 700;
	padding: 11px 18px;
	cursor: pointer;
}

body.woocommerce-checkout .edp-coupon-apply:hover:not(:disabled) {
	background: #17557a;
	border-color: #17557a;
}

body.woocommerce-checkout .edp-coupon-apply:disabled {
	opacity: .55;
	cursor: default;
}

/* What the server said about the code. Empty until there is something. */
body.woocommerce-checkout .edp-coupon-msg:empty {
	display: none;
}

body.woocommerce-checkout .edp-coupon-msg {
	margin: 0 0 14px;
	font-size: .85rem;
	line-height: 1.5;
}

body.woocommerce-checkout .edp-coupon-msg ul {
	list-style: none;
	margin: 0;
	padding: 11px 13px;
	border-radius: 10px;
	border: 1px solid transparent;
}

body.woocommerce-checkout .edp-coupon-msg ul::before,
body.woocommerce-checkout .edp-coupon-msg ul::after {
	content: none;
}

body.woocommerce-checkout .edp-coupon-msg ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-checkout .edp-coupon-msg .woocommerce-error {
	background: #fdf7f7;
	border-color: #e2c3c3;
	color: #8c2f2f;
}

body.woocommerce-checkout .edp-coupon-msg .woocommerce-message,
body.woocommerce-checkout .edp-coupon-msg .woocommerce-info {
	background: #f1f7f2;
	border-color: #c3dcc9;
	color: #2f6b3f;
}

/*
 * Without the "have a coupon?" line there is nothing to say what the field is
 * for, and a lone box above an address form reads as something required. The
 * form gets its own label.
 */
body.woocommerce-checkout form.checkout_coupon::before {
	content: "Discount code";
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #51697f;
	margin-bottom: 9px;
}

@media (min-width: 560px) {
	/* The label is a block in a flex row; it takes the full width above it. */
	body.woocommerce-checkout form.checkout_coupon::before {
		flex: 0 0 100%;
		margin-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
 * "Create an account?", moved
 *
 * checkout-layout.js lifts this block to the head of the form, under the
 * sign-in line. It arrives with no card of its own because it used to sit
 * inside the billing fields' card, so it is given one.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .edp-account-fields--moved {
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 14px;
	padding: clamp(14px, 2.2vw, 20px);
	margin: 0 0 18px;
}

body.woocommerce-checkout .edp-account-fields--moved p.form-row {
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout .edp-account-fields--moved .create-account {
	margin-top: 14px;
}

body.woocommerce-checkout .edp-account-fields--moved .create-account p.form-row {
	margin-top: 10px;
}

body.woocommerce-checkout .edp-account-fields--moved input.input-text {
	font-size: 16px;
	border-radius: 10px;
	padding: 13px 14px;
	width: 100%;
	box-sizing: border-box;
}

body.woocommerce-checkout .edp-account-fields--moved .edp-account-heading {
	margin: 0 0 14px;
	font-size: 1.05rem;
	line-height: 1.25;
}

/* The email field it now carries, matching the billing fields it came from. */
body.woocommerce-checkout .edp-account-fields--moved #billing_email_field {
	margin: 0 0 14px;
	padding: 0;
	width: auto;
	float: none;
}

/*
 * Below 1000px everything is one ordered column (section 19).
 *
 * Signing in stays near the top, ahead of the order and the address, because
 * it exists to fill the address in and cannot do that after the fact. The
 * contact card goes the other way, down past the address, where it was asked
 * for -- so the two are ordered separately rather than as a pair.
 *
 * Desktop placement is in section 17, with the rest of the grid.
 */
@media (max-width: 999px) {
	body.woocommerce-checkout div.woocommerce > .woocommerce-form-login-toggle,
	body.woocommerce-checkout div.woocommerce > form.woocommerce-form-login {
		order: 2;
	}

	body.woocommerce-checkout form.checkout > .edp-account-fields--moved {
		order: 6;
	}
}

/* -------------------------------------------------------------------------
 * 25. The declaration above Place Order
 *
 * A tick that cannot be missed and cannot be skipped: full measure, generous
 * target, and never collapsed into the small print it sits beside. The box is
 * sized and aligned explicitly rather than left to the browser, which draws a
 * 13px control that lands on the cap-height of the first line.
 * ---------------------------------------------------------------------- */

body.woocommerce-checkout .edp-agree {
	margin: 0 0 16px;
	padding: 14px;
	background: #f7fafc;
	border: 1px solid #dfe6ee;
	border-radius: 12px;
}

body.woocommerce-checkout .edp-agree-label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	cursor: pointer;
}

body.woocommerce-checkout input.edp-agree-box {
	flex: 0 0 auto;
	appearance: auto;
	color-scheme: light;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: #17344f;
	cursor: pointer;
}

body.woocommerce-checkout .edp-agree-text {
	font-size: .82rem;
	line-height: 1.55;
	color: #3d556e;
}

body.woocommerce-checkout .edp-agree-text a {
	color: #1c6490;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.woocommerce-checkout .edp-agree-text abbr.required {
	border: 0;
	color: #b4455a;
	text-decoration: none;
}

/* Once it has been refused, say so against the control rather than only at
   the top of a page the customer may have scrolled past. */
body.woocommerce-checkout .edp-agree.is-missing {
	border-color: #e2c3c3;
	background: #fdf7f7;
}