/* =========================================================================
   Nutraponics Checkout Redesign
   Built to 02_Checkout_Developer_Handoff_v1.0 + 02 Checkout.png.

   The mockup is a 0.6 render of a 1440 canvas (864 px native), so every
   measurement below is the mockup value divided by 0.6. The content band comes
   out at exactly 1320 px, which is the same band the site chrome uses.

   Scope: everything is prefixed .npco-* and everything that has to beat a
   WooCommerce core rule is qualified with .npco-page (the body class). The
   three WooCommerce stylesheets are still loaded on this route, so the
   overrides below are deliberate, not decorative.
   ====================================================================== */

.npco-page {
	/* Brand tokens — Branding Design Workbook v1.0 / handoff 03 */
	--npco-forest: #13412E;
	--npco-pine: #2F6B4F;
	--npco-ink: #1E1E1E;
	--npco-muted: #6B6B66;
	--npco-faint: #8C8C85;

	--npco-bg: #FCFAF6;
	--npco-paper: #FFFFFF;
	--npco-well: #F3F1EA;

	--npco-line: #E8E5DF;
	--npco-field: #DFDCD4;

	--npco-err: #B3261E;
	--npco-err-bg: #FDF3F1;
	--npco-err-line: #E3A9A2;
	--npco-ok: #2F6B4F;

	--npco-band: 1320px;
	--npco-gut: 24px;
	--npco-side: 440px;
	--npco-gap: 48px;

	--npco-r: 8px;
	--npco-r-card: 12px;

	/* Button radius, matched to the site header button.
	   np-global-chrome/assets/np-chrome.css: `body.np-chrome-on .np-btn`
	   is 6px, min-height 44, padding 0 26px, font 600 15px. The handoff's
	   token table says "pill", but the shipped chrome is the thing customers
	   actually see on every other page, so the checkout follows it. */
	--npco-btn-r: 6px;
	--npco-tap: 44px;

	--npco-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--npco-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

	--npco-ease: 180ms cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 1440px) {
	.npco-page { --npco-gut: 60px; }
}

/* -------------------------------------------------------------------------
   Base
   The theme ships an inline `html, body { overflow-x: hidden }`, which turns
   <body> into a scroll container and stops position:sticky resolving against
   the viewport. `clip` gives the same overflow protection while leaving <html>
   as the scroller, which the sticky summary needs.
   ---------------------------------------------------------------------- */

html.npco-html { overflow-x: clip; }

body.npco-page {
	margin: 0;
	background: var(--npco-bg);
	color: var(--npco-ink);
	font-family: var(--npco-sans);
	font-size: 15px;
	line-height: 1.55;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

.npco-page * { box-sizing: border-box; }

.npco-page a { color: var(--npco-forest); }

/* Bare buttons.
   The theme stack styles `button` as a filled accent control at (0,1,1), so a
   single-class rule cannot undo it. Every button on this page that is really a
   disclosure gets reset here at (0,2,0) — :is() takes the weight of its
   heaviest argument, so this stays one class deeper than anything global. */
.npco-page :is(.npco-coupon__t, .npco-acc__t, .npco-mini__t) {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	cursor: pointer;
}

.npco-page h1,
.npco-page h2 {
	font-family: var(--npco-serif);
	color: var(--npco-forest);
	font-weight: 600;
	letter-spacing: -.005em;
}

/* The element reset is wrapped in :where() so it weighs nothing. Written as
   `.npco-page p { margin: 0 }` it scores (0,1,1) and silently outranks every
   single-class component rule below — margin-left:auto on the header group,
   margin-top:auto on the item price, and every section rhythm. */
:where(.npco-page h1, .npco-page h2, .npco-page p, .npco-page ul, .npco-page ol, .npco-page dl, .npco-page dd) {
	margin: 0;
	padding: 0;
}

.npco-band {
	width: 100%;
	max-width: calc(var(--npco-band) + var(--npco-gut) * 2);
	margin-inline: auto;
	padding-inline: var(--npco-gut);
}

.npco-page .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.npco-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--npco-forest);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--npco-r) 0;
	text-decoration: none;
}
.npco-skip:focus { left: 0; }

/* Focus: visible everywhere, and never hidden under the sticky column. */
.npco-page :focus-visible {
	outline: 2px solid var(--npco-pine);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   CHK-01 Header
   ---------------------------------------------------------------------- */

.npco-hdr {
	background: var(--npco-paper);
	border-bottom: 1px solid var(--npco-line);
}

.npco-hdr__in {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 80px;
	padding-block: 14px;
}

.npco-hdr__logo { display: block; line-height: 0; }
.npco-hdr__logo img {
	display: block;
	width: auto;
	height: 26px;
}

.npco-hdr__back,
.npco-hdr__secure,
.npco-hdr__help {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--npco-ink);
	white-space: nowrap;
}

.npco-hdr__back {
	text-decoration: none;
	min-height: var(--npco-tap);
}
.npco-hdr__back:hover { color: var(--npco-forest); }
.npco-hdr__back .npco-i { color: var(--npco-forest); }

.npco-page .npco-hdr__secure {
	margin-left: auto;
	color: var(--npco-muted);
}
.npco-hdr__secure .npco-i { color: var(--npco-forest); }

.npco-hdr__help { gap: 6px; color: var(--npco-muted); }
.npco-hdr__help a {
	color: var(--npco-ink);
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   CHK-01 Progress rail
   ---------------------------------------------------------------------- */

.npco-prog {
	background: var(--npco-paper);
	border-bottom: 1px solid var(--npco-line);
	padding: 28px var(--npco-gut) 22px;
}

.npco-prog__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 880px;
	counter-reset: none;
}

.npco-prog__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--npco-faint);
}

/* The rail between the dots. Drawn on the step, not as a separate element, so
   it can never fall out of sync with the number of steps. */
.npco-prog__step + .npco-prog__step::before {
	content: "";
	position: absolute;
	top: 12px;
	right: 50%;
	left: -50%;
	height: 2px;
	margin-inline: 13px;
	background: var(--npco-line);
}
.npco-prog__step.is-current::before,
.npco-prog__step.is-done::before { background: var(--npco-forest); }

.npco-prog__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--npco-line);
	background: var(--npco-paper);
	font-size: 12px;
	font-weight: 600;
	color: var(--npco-faint);
}
.npco-prog__step.is-done .npco-prog__dot,
.npco-prog__step.is-current .npco-prog__dot {
	background: var(--npco-forest);
	border-color: var(--npco-forest);
	color: #fff;
}

.npco-prog__label { color: inherit; text-decoration: none; }
.npco-prog__step.is-current .npco-prog__label {
	color: var(--npco-ink);
	font-weight: 600;
}
.npco-prog__step.is-done .npco-prog__label { color: var(--npco-muted); }

/* -------------------------------------------------------------------------
   Page head
   ---------------------------------------------------------------------- */

.npco-main { padding-block: 0 80px; }

.npco-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	/* 46, not 26: it absorbs the 20px phantom margin removed above, so the
	   approved desktop rhythm below the sub-heading is unchanged. */
	padding-block: 34px 46px;
}

.npco-page .npco-h1 {
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1.05;
}

.npco-head__sub {
	margin-top: 6px;
	font-size: 15px;
	color: var(--npco-muted);
}

.npco-head__login {
	text-align: right;
	font-size: 14px;
	color: var(--npco-muted);
}
.npco-head__login a { color: var(--npco-forest); text-underline-offset: 3px; }
.npco-head__hint { color: var(--npco-faint); }

.npco-pre:empty { display: none; }
.npco-pre > * { margin-bottom: 20px; }

/* WooCommerce always prints <div class="woocommerce-notices-wrapper"></div>,
   notices or not. Empty it has no height, but it still took the 20px above and
   collapsed it out of the zero-height .npco-pre — 20px of phantom air over the
   form that appeared and vanished depending on whether there was a notice.
   .npco-pre itself is never :empty because the template leaves a newline in it. */
.npco-page .npco-pre > .woocommerce-notices-wrapper:empty { margin-bottom: 0; }

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

.npco-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--npco-side);
	gap: var(--npco-gap);
	align-items: start;
}

.npco-col--main { min-width: 0; }

.npco-sticky {
	position: sticky;
	top: 24px;
}

/* Handoff 03: never let the sticky column trap content off-screen. */
@media (max-height: 820px) {
	.npco-sticky { position: static; }
}

@media (max-width: 1439px) {
	.npco-page { --npco-side: 380px; --npco-gap: 32px; }
}

/* -------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------- */

.npco-sec { padding-block: 0 40px; }
.npco-sec:last-child { padding-bottom: 0; }

.npco-page .npco-h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 22px;
	line-height: 1.2;
	margin-bottom: 16px;
}

.npco-page .npco-num {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--npco-forest);
	color: #fff;
	font-family: var(--npco-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.npco-sec__sub {
	margin: -8px 0 16px;
	font-size: 14px;
	color: var(--npco-muted);
}

.npco-hint {
	margin-top: 8px;
	font-size: 13px;
	color: var(--npco-muted);
}

/* The accordion body wrapper is inert above the single-column breakpoint. */
.npco-acc__b { display: contents; }

.npco-express:empty { display: none; }
.npco-express { margin-bottom: 28px; }

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

.npco-fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px 16px;
}

/* WooCommerce's form-row-first/last/wide carry their own widths and floats.
   In a grid container the floats are already inert; the widths are not. */
.npco-page .npco-fields > .form-row,
.npco-page .npco-sec > .form-row,
.npco-page .npco-place .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.npco-page .npco-fields > .npco-row--half { grid-column: span 3; }
.npco-page .npco-fields > .npco-row--third { grid-column: span 2; }

.npco-page .npco-fields > .form-row > label,
.npco-page .npco-sec > .form-row > label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--npco-ink);
}

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

.npco-page .form-row abbr.required {
	border: 0;
	text-decoration: none;
	color: var(--npco-err);
	margin-left: 2px;
}

.npco-page .woocommerce-input-wrapper { display: block; width: 100%; }

.npco-page .npco-in,
.npco-page .form-row input.input-text,
.npco-page .form-row input[type="text"],
.npco-page .form-row input[type="email"],
.npco-page .form-row input[type="tel"],
.npco-page .form-row textarea,
.npco-page .form-row select {
	width: 100%;
	min-height: var(--npco-tap);
	padding: 10px 14px;
	border: 1px solid var(--npco-field);
	border-radius: var(--npco-r);
	background: var(--npco-paper);
	color: var(--npco-ink);
	font-family: var(--npco-sans);
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--npco-ease), box-shadow var(--npco-ease);
	appearance: none;
	-webkit-appearance: none;
}

.npco-page .form-row textarea { min-height: 96px; padding-block: 12px; resize: vertical; }

.npco-page .form-row select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.npco-page .form-row select[readonly] { background-color: var(--npco-well); color: var(--npco-muted); }

.npco-page .form-row ::placeholder { color: #AFACA4; opacity: 1; }

.npco-page .form-row input:focus,
.npco-page .form-row select:focus,
.npco-page .form-row textarea:focus,
.npco-page .npco-in:focus {
	outline: none;
	border-color: var(--npco-pine);
	box-shadow: 0 0 0 3px rgba(47, 107, 79, .16);
}

/* Validation (handoff 05 + board A). Never colour alone: the field also gains
   an icon and a message that is wired up with aria-describedby by Woo.

   Gated on .npco-touched (the customer has left the field) or .is-validated
   (they have tried to submit). WooCommerce's own scripts stamp
   `woocommerce-invalid` on some empty required fields during checkout init —
   the gateway's PO fields came up pre-marked in red before anyone had typed —
   and an error shown before the customer has done anything is just noise. The
   server-rendered markup only ever carries `validate-required`; this makes the
   styling follow intent rather than whatever ran on load. */
.npco-page .npco-form.is-validated .form-row.woocommerce-invalid input.input-text,
.npco-page .npco-form.is-validated .form-row.woocommerce-invalid select,
.npco-page .npco-form.is-validated .form-row.woocommerce-invalid textarea,
.npco-page .form-row.npco-touched.woocommerce-invalid input.input-text,
.npco-page .form-row.npco-touched.woocommerce-invalid select,
.npco-page .form-row.npco-touched.woocommerce-invalid textarea {
	border-color: var(--npco-err-line);
	background-color: var(--npco-err-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 42px;
}
.npco-page .npco-form.is-validated .form-row.woocommerce-invalid > label,
.npco-page .form-row.npco-touched.woocommerce-invalid > label { color: var(--npco-err); }
.npco-page .form-row.woocommerce-invalid .woocommerce-error,
.npco-page .form-row .npco-field-msg {
	margin-top: 6px;
	font-size: 13px;
	color: var(--npco-err);
}
.npco-page .form-row.woocommerce-validated input.input-text { border-color: #C8D8C9; }

/* Plain checkboxes (marketing opt-in, alternate address, terms). Native input,
   accent-coloured: one convention for every checkbox on the page, including
   the ones WooCommerce renders without a wrapper of its own. */
.npco-page .npco-consent .form-row,
.npco-page .npco-check { margin: 0; }

.npco-page .npco-consent label,
.npco-page .npco-check__lb,
.npco-page .form-row label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: var(--npco-tap);
	padding-block: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--npco-ink);
	cursor: pointer;
}

.npco-page input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--npco-forest);
	cursor: pointer;
}

.npco-consent { margin-top: 10px; }

/* Alternate shipping address */
.npco-altship { margin-top: 18px; }
.npco-altship__panel { margin-top: 18px; }
.npco-page .woocommerce-additional-fields:empty { display: none; }
.npco-page .woocommerce-additional-fields > div:empty { display: none; }

/* -------------------------------------------------------------------------
   Option cards — delivery methods (CHK-04) and gateways (CHK-05)
   ---------------------------------------------------------------------- */

.npco-opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Gateways stack: a payment box opens underneath the row it belongs to. */
.npco-page .npco-pay .npco-opts { grid-template-columns: 1fr; gap: 12px; }

.npco-opt {
	position: relative;
	border: 1px solid var(--npco-field);
	border-radius: var(--npco-r-card);
	background: var(--npco-paper);
	transition: border-color var(--npco-ease), box-shadow var(--npco-ease);
}
.npco-opt:hover { border-color: #C6C2B8; }
.npco-opt.is-sel {
	border-color: var(--npco-forest);
	box-shadow: inset 0 0 0 1px var(--npco-forest);
}

.npco-opt__in {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.npco-opt__lb {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 16px 20px;
	margin: 0;
	font-size: 15px;
	cursor: pointer;
}

.npco-opt__mark {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid #BFBBB1;
	background: var(--npco-paper);
	transition: border-color var(--npco-ease), box-shadow var(--npco-ease);
}
.npco-opt.is-sel .npco-opt__mark {
	border-color: var(--npco-forest);
	border-width: 5px;
}
/* The focus ring has to be drawn on the card: the real radio is hidden. */
.npco-opt__in:focus-visible + .npco-opt__lb .npco-opt__mark {
	outline: 2px solid var(--npco-pine);
	outline-offset: 2px;
}

.npco-opt__ico { flex: 0 0 auto; color: var(--npco-forest); line-height: 0; }

.npco-opt__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.npco-opt__name { font-weight: 500; }
.npco-opt__meta { font-size: 13px; color: var(--npco-muted); }

.npco-opt__marks {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 0;
}
.npco-page .npco-opt__marks img {
	display: inline-block;
	width: auto;
	max-width: 44px;
	height: 24px;
	margin: 0;
	padding: 0;
	box-shadow: none;
	border-radius: 3px;
}

.npco-opt__box {
	padding: 0 20px 20px;
	border-top: 1px solid var(--npco-line);
	margin: 0 0 0;
}
.npco-opt__box::before { content: ""; display: block; height: 0; }
.npco-page .npco-opt__box p { font-size: 14px; color: var(--npco-muted); }

.npco-page .npco-opt-empty { list-style: none; }

.npco-ship__pkg {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--npco-muted);
}
.npco-ship__inner + .npco-ship__inner { margin-top: 16px; }

.npco-empty {
	padding: 18px 20px;
	border: 1px dashed var(--npco-field);
	border-radius: var(--npco-r-card);
	background: var(--npco-paper);
	font-size: 14px;
	color: var(--npco-muted);
}

/* -------------------------------------------------------------------------
   CHK-06 Order summary
   ---------------------------------------------------------------------- */

.npco-page .npco-card {
	background: var(--npco-paper);
	border: 1px solid var(--npco-line);
	border-radius: var(--npco-r-card);
	padding: 32px;
}

.npco-page .npco-h2--sum { font-size: 26px; margin-bottom: 24px; }

.npco-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.npco-item {
	display: flex;
	gap: 24px;
	padding-block: 24px;
	border-top: 1px solid var(--npco-line);
}
.npco-item:first-child { border-top: 0; padding-top: 0; }

.npco-item__ph {
	flex: 0 0 auto;
	width: 96px;
	aspect-ratio: 136 / 177;
	border-radius: 6px;
	background: var(--npco-well);
	overflow: hidden;
}
.npco-page .npco-item__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
}

.npco-item__b {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}
.npco-page .npco-item__n { font-size: 16px; font-weight: 600; line-height: 1.35; }
.npco-page .npco-item__v,
.npco-page .npco-item__v dl,
.npco-page .npco-item__v p {
	margin: 0;
	font-size: 14px;
	color: var(--npco-muted);
}
.npco-page .npco-item__v dt { font-weight: 400; float: none; display: inline; }
.npco-page .npco-item__v dd { margin: 0; display: inline; }
.npco-item__q { font-size: 14px; color: var(--npco-muted); }
.npco-item__p {
	margin-top: auto;
	padding-top: 12px;
	text-align: right;
	font-size: 16px;
	font-weight: 700;
}

.npco-tot {
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid var(--npco-line);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.npco-tot__r {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 15px;
}
.npco-tot__r dt { margin: 0; color: var(--npco-ink); }
.npco-page .npco-tot__v { margin: 0; font-weight: 600; text-align: right; }
.npco-tot__v--pend { font-weight: 400; color: var(--npco-muted); }
.npco-tot__v--dis { color: var(--npco-ok); }
.npco-page .npco-tot__r .woocommerce-remove-coupon {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--npco-muted);
}

.npco-tot__r--grand {
	margin-top: 4px;
	padding-top: 22px;
	border-top: 1px solid var(--npco-line);
	align-items: center;
}
.npco-tot__r--grand dt { font-size: 18px; font-weight: 600; }
.npco-page .npco-tot__r--grand .npco-tot__v { font-size: 24px; font-weight: 700; }

/* Coupon */
.npco-coupon {
	margin-top: 22px;
	padding-top: 6px;
	border-top: 1px solid var(--npco-line);
}
.npco-coupon__t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: var(--npco-tap);
	padding: 10px 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--npco-ink);
	cursor: pointer;
	text-align: left;
}
.npco-coupon__t .npco-i { color: var(--npco-muted); transition: transform var(--npco-ease); }
.npco-coupon__t[aria-expanded="true"] .npco-i { transform: rotate(180deg); }

.npco-coupon__row { display: flex; gap: 10px; padding-bottom: 6px; }
.npco-page .npco-coupon__in { flex: 1 1 auto; text-transform: uppercase; }
.npco-page .npco-coupon__go { flex: 0 0 auto; padding-inline: 20px; }
.npco-page .npco-coupon__msg:empty { display: none; }
.npco-page .npco-coupon__msg { margin-top: 10px; font-size: 13px; }
.npco-page .npco-coupon__msg ul { margin: 0; padding: 0; list-style: none; }

/* Acknowledgement + the single action */
.npco-place {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--npco-line);
}
.npco-page .npco-terms { margin-bottom: 16px; }
.npco-page .npco-terms .npco-check__lb { align-items: flex-start; font-size: 14px; }
.npco-page .woocommerce-privacy-policy-text p {
	margin-bottom: 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--npco-muted);
}
.npco-page .woocommerce-terms-and-conditions {
	margin-bottom: 12px;
	padding: 12px;
	border: 1px solid var(--npco-line);
	border-radius: var(--npco-r);
	font-size: 13px;
}
.npco-noscript { margin-bottom: 12px; font-size: 13px; color: var(--npco-err); }

.npco-reassure {
	margin-top: 14px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: var(--npco-muted);
}

.npco-support {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--npco-line);
	font-size: 14px;
	color: var(--npco-muted);
}
.npco-support .npco-i { color: var(--npco-forest); }
.npco-support a { color: var(--npco-forest); text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.npco-page .npco-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--npco-tap);
	padding: 11px 28px;
	border: 1px solid transparent;
	border-radius: var(--npco-btn-r);
	font-family: var(--npco-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--npco-ease), border-color var(--npco-ease), color var(--npco-ease);
}

.npco-page .npco-btn--primary {
	background: var(--npco-forest);
	border-color: var(--npco-forest);
	color: #fff;
}
.npco-page .npco-btn--primary:hover { background: #0E3324; border-color: #0E3324; }

.npco-page .npco-btn--ghost {
	background: var(--npco-paper);
	border-color: var(--npco-field);
	color: var(--npco-ink);
}
.npco-page .npco-btn--ghost:hover { border-color: var(--npco-forest); color: var(--npco-forest); }

.npco-page .npco-btn--lg {
	width: 100%;
	min-height: 56px;
	font-size: 16px;
}

/* The padlock is a pseudo-element, not a child node: checkout.js replaces the
   button's text content with $('#place_order').text(…) every time the payment
   method changes, which would delete any element inside it. */
.npco-page #place_order::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--npco-lock) center / contain no-repeat;
	mask: var(--npco-lock) center / contain no-repeat;
}
.npco-page {
	--npco-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.npco-page .npco-btn[disabled],
.npco-page .npco-btn.is-busy {
	background: #A8BCAF;
	border-color: #A8BCAF;
	color: #fff;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Notices — the error summary (board A) and everything WooCommerce prints
   ---------------------------------------------------------------------- */

.npco-page .woocommerce-NoticeGroup,
.npco-page .npco-pre .woocommerce-error,
.npco-page .npco-pre .woocommerce-message,
.npco-page .npco-pre .woocommerce-info { margin-bottom: 20px; }

.npco-page .woocommerce-error,
.npco-page .woocommerce-message,
.npco-page .woocommerce-info,
.npco-page .woocommerce-notice {
	margin: 0 0 16px;
	padding: 16px 20px;
	list-style: none;
	border: 1px solid var(--npco-line);
	border-radius: var(--npco-r-card);
	background: var(--npco-paper);
	font-size: 14px;
	line-height: 1.5;
	color: var(--npco-ink);
}
.npco-page .woocommerce-error {
	border-color: var(--npco-err-line);
	background: var(--npco-err-bg);
	color: var(--npco-err);
}
.npco-page .woocommerce-error li + li { margin-top: 6px; }
.npco-page .woocommerce-error a { color: var(--npco-err); }
.npco-page .woocommerce-message { border-color: #C8D8C9; background: #F1F6F0; }

.npco-page .woocommerce-NoticeGroup-checkout { padding-top: 4px; }

/* Returning-customer login panel */
.npco-page .woocommerce-form-login {
	padding: 24px;
	border: 1px solid var(--npco-line);
	border-radius: var(--npco-r-card);
	background: var(--npco-paper);
}
.npco-page .woocommerce-form-login .form-row { margin-bottom: 16px; }
.npco-page .woocommerce-form-login .button { }

/* Board B — the stock/price interrupt */
.npco-interrupt {
	max-width: 560px;
	margin: 40px auto 80px;
	padding: 40px;
	border: 1px solid var(--npco-err-line);
	border-radius: var(--npco-r-card);
	background: var(--npco-err-bg);
	text-align: center;
}
.npco-interrupt__ico { color: var(--npco-err); }
.npco-page .npco-interrupt__h { margin: 14px 0 12px; font-size: 28px; }
.npco-interrupt__p { font-size: 14px; color: var(--npco-muted); }
.npco-interrupt__a { margin-top: 24px; }
.npco-page .npco-interrupt .woocommerce-error { text-align: left; }

/* Empty cart */
.npco-blank {
	max-width: 520px;
	margin: 60px auto 100px;
	text-align: center;
}
.npco-page .npco-blank__h { font-size: 34px; }
.npco-blank__p { margin-top: 10px; color: var(--npco-muted); }
.npco-blank__a { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.npco-foot {
	border-top: 1px solid var(--npco-line);
	background: var(--npco-paper);
	padding-block: 24px;
}
.npco-foot__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--npco-muted);
}
.npco-foot__secure { display: inline-flex; align-items: center; gap: 8px; }
.npco-foot__secure .npco-i { color: var(--npco-forest); }
.npco-foot__links { display: flex; gap: 22px; flex-wrap: wrap; }
.npco-foot__links a { color: var(--npco-muted); }

/* -------------------------------------------------------------------------
   CHK-07 / CHK-08  Single column, compact summary, step accordions
   ---------------------------------------------------------------------- */

.npco-mini { display: none; }

@media (max-width: 1023px) {
	/*
	 * One column, and the summary's own parts fold around the form:
	 * compact bar, then the item list behind its disclosure, then the steps,
	 * then the totals, the acknowledgement and the one Place Order.
	 *
	 * display:contents dissolves the aside, the sticky wrapper, the card and
	 * the fragment root, so their children become flex items of .npco-grid and
	 * can be ordered individually. Nothing is duplicated or moved in the DOM,
	 * so the update_order_review fragment still finds .npco-sum.
	 */
	.npco-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
		/*
		 * MUST be reset. The desktop rule sets align-items:start so the sticky
		 * summary does not stretch to the form's height. Carried into a COLUMN
		 * flex container that same value becomes a cross-axis (horizontal)
		 * rule, so every child shrinks to its own content width — the compact
		 * summary bar, the subtotal and shipping rows, the coupon row and their
		 * dividers all came out short of the gutter.
		 */
		align-items: stretch;
	}
	.npco-col--side,
	.npco-sticky,
	.npco-page .npco-card,
	.npco-sum { display: contents; }

	.npco-mini { display: block; order: 4; }
	.npco-page .npco-h2--sum { display: none; }
	.npco-items { order: 5; }
	.npco-col--main { order: 20; }
	.npco-tot { order: 29; }
	.npco-coupon { order: 30; }
	.npco-place { order: 31; }
	.npco-reassure { order: 32; }
	.npco-support { order: 33; }

	.npco-page .npco-mini__t {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 56px;
		padding: 12px 18px;
		margin-bottom: 28px;
		border: 1px solid var(--npco-line);
		border-radius: var(--npco-r-card);
		background: var(--npco-paper);
		font-family: inherit;
		font-size: 15px;
		color: var(--npco-ink);
		cursor: pointer;
		text-align: left;
	}
	.npco-mini__lb { font-weight: 500; }
	.npco-mini__count { color: var(--npco-muted); font-weight: 400; }
	.npco-mini__total { margin-left: auto; font-weight: 700; }
	.npco-mini__t .npco-i { color: var(--npco-muted); transition: transform var(--npco-ease); }
	.npco-mini__t[aria-expanded="true"] .npco-i { transform: rotate(180deg); }

	.npco-items { display: none; margin-bottom: 28px; }
	body.npco-sum-open .npco-items { display: block; }

	.npco-tot {
		margin-top: 8px;
		padding-top: 24px;
	}
	.npco-reassure,
	.npco-support { max-width: 520px; margin-inline: auto; }
	.npco-support { justify-content: center; }
}

@media (max-width: 767px) {
	.npco-page { --npco-gut: 16px; }

	.npco-hdr__in {
		flex-wrap: wrap;
		gap: 10px 20px;
		min-height: 0;
	}
	.npco-hdr__logo img { height: 22px; }
	.npco-hdr__secure { margin-left: auto; }
	.npco-hdr__help { flex-basis: 100%; }

	.npco-prog { padding-block: 18px 14px; }
	.npco-prog__step { font-size: 12px; gap: 8px; }

	/* Client 2026-09-21: 15px of air above the compact summary bar. */
	.npco-head { padding-block: 24px 15px; }
	.npco-head__login { text-align: left; }

	.npco-fields { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
	.npco-page .npco-fields > .npco-row--half,
	.npco-page .npco-fields > .npco-row--third { grid-column: 1 / -1; }
	/* First/last name stay side by side: two short fields, one thumb reach. */
	.npco-page .npco-fields > #billing_first_name_field,
	.npco-page .npco-fields > #billing_last_name_field,
	.npco-page .npco-fields > #shipping_first_name_field,
	.npco-page .npco-fields > #shipping_last_name_field { grid-column: span 1; }

	.npco-page .npco-card { padding: 0; border: 0; background: none; }

	.npco-opt__lb { padding: 14px 16px; }
	.npco-opts { grid-template-columns: 1fr; gap: 12px; }

	.npco-item__ph { width: 72px; }
	.npco-item { gap: 16px; }

	.npco-foot__in { flex-direction: column; align-items: flex-start; }

	/* Step accordions. The body is display:contents above this breakpoint, so
	   it only becomes a real box — and therefore collapsible — here. */
	.npco-acc__b { display: block; }
	.npco-acc:not(.is-open) > .npco-acc__b { display: none; }

	.npco-acc > .npco-h2 { margin-bottom: 0; }
	.npco-acc.is-open > .npco-h2 { margin-bottom: 16px; }

	.npco-page .npco-acc__t {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: var(--npco-tap);
		padding: 8px 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		text-align: left;
	}
	.npco-acc__chev {
		margin-left: auto;
		width: 12px;
		height: 12px;
		border-right: 2px solid var(--npco-muted);
		border-bottom: 2px solid var(--npco-muted);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform var(--npco-ease);
	}
	.npco-acc:not(.is-open) .npco-acc__chev { transform: rotate(-45deg) translate(-2px, 2px); }

	.npco-sec { padding-bottom: 24px; border-bottom: 1px solid var(--npco-line); }
	.npco-sec:last-of-type { border-bottom: 0; }
}

/* 320 px: the handoff's floor. No page-level horizontal scroll, full labels. */
@media (max-width: 359px) {
	.npco-fields { grid-template-columns: 1fr; }
	.npco-page .npco-fields > .form-row { grid-column: 1 / -1; }
	.npco-hdr__secure span { display: none; }
}

/* -------------------------------------------------------------------------
   Motion
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.npco-page *,
	.npco-page *::before,
	.npco-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Blocking overlay WooCommerce puts over the summary while totals refresh. */
.npco-page .blockUI.blockOverlay {
	background: var(--npco-bg) !important;
	opacity: .6 !important;
}

/* -------------------------------------------------------------------------
   Live-platform bits the mockup does not show but the store really runs
   ---------------------------------------------------------------------- */

/* Order notes. The store has woocommerce_enable_order_comments on, so the
   field is part of the live checkout contract even though the mockup omits it.
   It is kept, inside Delivery details, rather than silently dropped. */
.npco-page .woocommerce-additional-fields { margin-top: 18px; }
.npco-page .woocommerce-additional-fields > .npco-fields { gap: 0; }

/* WooCommerce 10.9 address autocomplete adds its own affordance inside the
   street-address wrapper; keep it clear of the text. */
.npco-page .woocommerce-input-wrapper.autocomplete-available { position: relative; }
.npco-page .woocommerce-input-wrapper.autocomplete-available > input.input-text { padding-right: 42px; }
.npco-page .wc-address-autocomplete-suggestions,
.npco-page .woocommerce-input-wrapper [class*="autocomplete"] ul {
	border-radius: var(--npco-r);
	border-color: var(--npco-field);
}

/* Express-wallet buttons (Apple Pay / Google Pay) when they are eligible. */
.npco-page .npco-express #wcpay-express-checkout-element,
.npco-page .npco-express .wcpay-payment-request-wrapper { margin: 0; }
.npco-page .npco-express .wc-block-components-checkout-order-note { display: none; }

/* select2 / selectWoo.
   WooCommerce enhances the State field, so the visible control is not the
   <select> at all — the native element gets .select2-hidden-accessible
   (absolutely positioned, 1 px, clipped) and a <span> tree is drawn in its
   place. The box is the .select2-selection, the text is the __rendered span
   inside it; padding must live on exactly one of them or the text drops below
   the box. Here: box owns the frame, __rendered owns the inset. */
body.npco-page .npco-form .select2-container { display: block; width: 100% !important; }

body.npco-page .npco-form .select2-container--default .select2-selection--single {
	height: var(--npco-tap);
	padding: 0;
	border: 1px solid var(--npco-field);
	border-radius: var(--npco-r);
	background: var(--npco-paper);
}
body.npco-page .npco-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	height: 42px;
	line-height: 42px;
	padding: 0 40px 0 14px;
	font-size: 15px;
	color: var(--npco-ink);
}
body.npco-page .npco-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
	right: 10px;
}
body.npco-page .npco-form .select2-container--focus .select2-selection--single,
body.npco-page .npco-form .select2-container--open .select2-selection--single {
	border-color: var(--npco-pine);
	box-shadow: 0 0 0 3px rgba(47, 107, 79, .16);
}
/* The dropdown is appended to <body>, outside .npco-page's subtree in some
   themes, so it is matched from the body class only. */
.npco-page .select2-dropdown {
	border-color: var(--npco-field);
	border-radius: var(--npco-r);
	font-family: var(--npco-sans);
	font-size: 15px;
}
.npco-page .select2-container--default .select2-results__option--highlighted[aria-selected],
.npco-page .select2-container--default .select2-results__option--highlighted {
	background-color: var(--npco-forest);
	color: #fff;
}
.npco-page .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--npco-field);
	border-radius: 6px;
	padding: 8px 10px;
}

/* Accelerated-wallet separator. WooPayments prints its own "— OR —" between
   the express buttons and the form; it is shown or hidden by the gateway's own
   eligibility logic, which handoff 01 makes the authority, so it is styled
   rather than suppressed. */
.npco-page #wcpay-express-checkout-button-separator {
	position: relative;
	margin: 20px 0 0;
	text-align: center;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--npco-faint);
}
.npco-page .wcpay-express-checkout-wrapper { margin: 0; }

/* -------------------------------------------------------------------------
   One WooCommerce rule that needs a deeper hook

   woocommerce.css ships

     .woocommerce form .form-row .input-text,
     .woocommerce form .form-row select { padding: .5em; height: auto; ... }

   at (0,3,1). The field block above matches inputs at (0,3,1) too and wins on
   source order, but it only reaches `select` at (0,2,1) — so the State select
   kept WooCommerce's .5em padding and its text sat off the vertical centre
   next to a 44 px City field. Re-stated here one class deeper.
   ---------------------------------------------------------------------- */

body.npco-page .npco-form .form-row select,
body.npco-page .npco-form .form-row .input-text,
body.npco-page .npco-form .form-row textarea {
	width: 100%;
	height: auto;
	min-height: var(--npco-tap);
	padding: 10px 14px;
	line-height: 1.4;
	font-size: 15px;
	border: 1px solid var(--npco-field);
	border-radius: var(--npco-r);
	background-color: var(--npco-paper);
	color: var(--npco-ink);
}
body.npco-page .npco-form .form-row select { padding-right: 40px; }
body.npco-page .npco-form .form-row select[readonly] { background-color: var(--npco-well); color: var(--npco-muted); }
body.npco-page .npco-form .form-row textarea { padding-block: 12px; min-height: 96px; }

body.npco-page .npco-form.is-validated .form-row.woocommerce-invalid .input-text,
body.npco-page .npco-form.is-validated .form-row.woocommerce-invalid select,
body.npco-page .npco-form.is-validated .form-row.woocommerce-invalid textarea,
body.npco-page .npco-form .form-row.npco-touched.woocommerce-invalid .input-text,
body.npco-page .npco-form .form-row.npco-touched.woocommerce-invalid select,
body.npco-page .npco-form .form-row.npco-touched.woocommerce-invalid textarea {
	border-color: var(--npco-err-line);
	background-color: var(--npco-err-bg);
}

body.npco-page .npco-form .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
body.npco-page .npco-form .form-row input[type="checkbox"] { width: 18px; min-height: 0; height: 18px; padding: 0; }

/* -------------------------------------------------------------------------
   #payment — the one place ID selectors have to be answered with ID selectors

   Two stylesheets own this block and both reach it through the #payment id,
   so nothing built from classes alone can touch them:

     woocommerce.css
       .woocommerce-checkout #payment            (1,1,0)  lilac background
       .woocommerce-checkout #payment ul.payment_methods    border + padding
       .woocommerce-checkout #payment div.payment_box (1,1,2) grey box + arrow

     WooPayments checkout.css
       #payment .payment_methods li[class*="payment_method_woocommerce_payments"] label
                                                 (1,2,2)  display: inline
       …the same selector + img                  (1,2,3)  float: right

   That `display: inline` is why the card option collapsed: width and height do
   not apply to a non-replaced inline box, so the custom radio rendered as a
   10 px sliver and the title wrapped under the brand marks.

   Every rule below is (1,3,x) — one class deeper than the heaviest of them —
   so the cascade resolves without a single !important.
   ---------------------------------------------------------------------- */

body.npco-page #payment.npco-pay {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

body.npco-page #payment.npco-pay ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	line-height: 1.55;
	text-align: left;
}

body.npco-page #payment.npco-pay ul.payment_methods li.npco-opt {
	margin: 0;
	padding: 0;
	line-height: 1.55;
	background: var(--npco-paper);
	border: 1px solid var(--npco-field);
	border-radius: var(--npco-r-card);
	overflow: hidden;
}
body.npco-page #payment.npco-pay ul.payment_methods li.npco-opt.is-sel {
	border-color: var(--npco-forest);
	box-shadow: inset 0 0 0 1px var(--npco-forest);
}

body.npco-page #payment.npco-pay .npco-opt__lb {
	display: flex;
	align-items: center;
	gap: 14px;
	width: auto;
	min-height: 64px;
	margin: 0;
	padding: 16px 20px;
	float: none;
	font-size: 15px;
	font-weight: 400;
	color: var(--npco-ink);
	cursor: pointer;
}

body.npco-page #payment.npco-pay .npco-opt__mark {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

body.npco-page #payment.npco-pay .npco-opt__marks {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	float: none;
	line-height: 0;
}
body.npco-page #payment.npco-pay .npco-opt__marks img {
	float: none;
	display: inline-block;
	width: auto;
	max-width: 44px;
	height: 24px;
	margin: 0;
	padding: 0;
	box-shadow: none;
	border-radius: 3px;
}

body.npco-page #payment.npco-pay ul.payment_methods li.npco-opt input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

body.npco-page #payment.npco-pay div.payment_box {
	margin: 0;
	padding: 18px 20px 20px;
	background: transparent;
	background-color: transparent;
	border-radius: 0;
	border-top: 1px solid var(--npco-line);
	color: var(--npco-ink);
	font-size: 14px;
	line-height: 1.55;
}
/* WooCommerce draws a little pointer above the open box. */
body.npco-page #payment.npco-pay div.payment_box::before,
body.npco-page #payment.npco-pay div.payment_box::after {
	content: none;
	display: none;
}
body.npco-page #payment.npco-pay div.payment_box p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Column proportions and the compact header — last polish pass
   ---------------------------------------------------------------------- */

/* Street address takes two thirds of its row, the apartment line one third,
   as drawn. Set by field id because the split is specific to these two. */
@media (min-width: 768px) {
	body.npco-page .npco-fields > #billing_address_1_field,
	body.npco-page .npco-fields > #shipping_address_1_field { grid-column: span 4; }
	body.npco-page .npco-fields > #billing_address_2_field,
	body.npco-page .npco-fields > #shipping_address_2_field { grid-column: span 2; }
}

/* Mobile header: one row — logo, back to cart, padlock. The support link is
   dropped here, not lost: the summary card and the page footer both carry it.
   Below 360 px the back label collapses to its arrow; the link keeps its name
   from the aria-label in inc/parts.php, so it is still announced. */
@media (max-width: 767px) {
	.npco-hdr__in {
		flex-wrap: nowrap;
		gap: 14px;
		min-height: 60px;
		padding-block: 10px;
	}
	.npco-hdr__logo img { height: 20px; }
	.npco-hdr__back { margin-left: auto; font-size: 14px; }
	.npco-page .npco-hdr__secure { margin-left: 0; gap: 0; }
	.npco-hdr__secure span { display: none; }
	.npco-hdr__help { display: none; }
}

@media (max-width: 359px) {
	.npco-hdr__back span { display: none; }
}

.npco-blank__rev {
	margin-top: 22px;
	font-size: 13px;
	color: var(--npco-faint);
}
.npco-blank__rev a { color: var(--npco-forest); }
.npco-blank__rev span { display: block; margin-top: 2px; }

/* -------------------------------------------------------------------------
   Purchase order — schools only

   The gateway's own fields render inside .payment_box, which sits under the
   #payment id, so they need the same (1,3,x) weight as the rest of that block
   or WooCommerce's `.woocommerce-checkout #payment div.payment_box` styling
   takes the labels and inputs back.
   ---------------------------------------------------------------------- */

body.npco-page #payment.npco-pay .npco-po {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}
body.npco-page #payment.npco-pay .npco-po > .form-row {
	grid-column: span 1;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}
body.npco-page #payment.npco-pay .npco-po > .form-row > label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--npco-ink);
}
body.npco-page #payment.npco-pay .npco-po .input-text {
	width: 100%;
	height: auto;
	min-height: var(--npco-tap);
	padding: 10px 14px;
	line-height: 1.4;
	font-size: 15px;
	border: 1px solid var(--npco-field);
	border-radius: var(--npco-r);
	background-color: var(--npco-paper);
	color: var(--npco-ink);
}
body.npco-page #payment.npco-pay .npco-po .npco-hint {
	grid-column: 1 / -1;
	margin: 0;
}

@media (max-width: 767px) {
	body.npco-page #payment.npco-pay .npco-po { grid-template-columns: 1fr; }
	body.npco-page #payment.npco-pay .npco-po > .form-row { grid-column: 1 / -1; }
}

/* The order-received page reuses the checkout's list styling for the PO recap. */
.np-po-summary { margin: 0 0 1.5em; }