/* ==========================================================================
   Cart & Checkout — brand restyle (classic shortcode templates).
   Loaded only on is_cart() / is_checkout() (see functions.php enqueue).
   Restyle only — never restructure Woo markup/fields/hooks (CLAUDE.md rule #3).
   --------------------------------------------------------------------------
   DOM served through page.php:
     main.ps-main.ps-prose > article > h1.ps-page-title + .ps-prose-body
       > div.woocommerce  (shortcode wrapper)
   Aesthetic: flat, square (0 radius), clinical, #0076B8 accents on white.
   All values reference tokens.css. Body-class scoping (.woocommerce-cart /
   .woocommerce-checkout) out-specifies WooCommerce's own frontend stylesheets,
   which are NOT dequeued in this theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Container — centre the page at --ps-col with --ps-gutter, so cart/checkout
   are no longer edge-to-edge. .ps-prose is otherwise full-bleed.
   -------------------------------------------------------------------------- */
.woocommerce-cart .ps-main.ps-prose > article,
.woocommerce-checkout .ps-main.ps-prose > article {
	width: min(var(--ps-col), 100% - 2 * var(--ps-gutter));
	margin-inline: auto;
}

/* The "My Cart" masthead is a full-bleed page-head — sit it flush under the
   announce bar by removing .ps-prose's 2.5rem top padding (only when the masthead
   is present, so the empty-cart / checkout keep their normal top spacing). */
.woocommerce-cart .ps-main.ps-prose:has(.ps-cart-head) {
	padding-top: 0;
}

.woocommerce-cart .ps-page-title,
.woocommerce-checkout .ps-page-title {
	font-size: 1.75rem;
	margin-bottom: 1.5rem;
}

/* Neutralise prose paragraph defaults bleeding into Woo markup. */
.woocommerce-cart .ps-prose-body,
.woocommerce-checkout .ps-prose-body {
	color: var(--ps-ink);
}
.woocommerce-cart .ps-prose-body p,
.woocommerce-checkout .ps-prose-body p {
	line-height: 1.5;
}

/* ===== CART/CHECKOUT (v2 refresh) ===== Figma 1336-6093
   0b · Ambient blue glow — the page sits on a faint blue-white wash with two
   soft radial washes (upper-right near the summary, lower-left near the upsell),
   matching the new artboards. Pure light: the ::before is pinned behind the
   content, and the centred <article> is lifted above it. No markup touched. */
.woocommerce-cart .ps-main,
.woocommerce-checkout .ps-main {
	position: relative;
	background: var(--ps-wash);
}
.woocommerce-cart .ps-main::before,
.woocommerce-checkout .ps-main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(48% 36% at 88% 30%, rgba(0, 118, 184, 0.16), transparent 72%),
		radial-gradient(42% 32% at 3% 74%, rgba(0, 118, 184, 0.12), transparent 70%);
}
.woocommerce-cart .ps-main > article,
.woocommerce-checkout .ps-main > article {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   1 · Woo notices — quiet, square, brand accent.
   -------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper {
	width: 100%;
	margin: 0 0 1.5rem;
}
/* Empty on a clean page load, and an empty block's margins collapse straight
   out through .woocommerce → article → main, pushing the whole page 24px below
   the ticker. Zero it when there is nothing to announce. */
.woocommerce-notices-wrapper:empty { margin: 0; }
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	border: 1px solid var(--ps-line);
	border-left: 3px solid var(--ps-blue);
	border-radius: 0;
	background: var(--ps-wash);
	color: var(--ps-ink);
	font-size: 0.875rem;
	padding: 0.9rem 1.1rem;
	list-style: none;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	border-left-color: var(--ps-err);
}
/* Woo names the offending field inside an <a href="#billing_email">, which fell
   through to the site's default link style — bold blue underline on every error
   line. It read as a broken page rather than a correction. The link stays (it
   still jumps to the field) but is set as emphasis, not as a link, and the list
   loses its bullets and browser padding. */
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	margin: 0 0 1.5rem;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}
.woocommerce-cart .woocommerce-error a,
.woocommerce-checkout .woocommerce-error a,
.woocommerce-cart .woocommerce-message a:not(.button),
.woocommerce-checkout .woocommerce-message a:not(.button),
.woocommerce-cart .woocommerce-info a:not(.button),
.woocommerce-checkout .woocommerce-info a:not(.button) {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.woocommerce-cart .woocommerce-error a:hover,
.woocommerce-checkout .woocommerce-error a:hover {
	color: var(--ps-err);
}
.woocommerce-cart .woocommerce-message a.button,
.woocommerce-checkout .woocommerce-message a.button {
	float: none;
	margin-left: 0.75rem;
}
/* Woo prints a webfont glyph via ::before; unloaded here it renders as tofu. */
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before {
	display: none;
}

/* --------------------------------------------------------------------------
   2 · Empty cart — brand state (woocommerce/cart/cart-empty.php override).
   The default `wc_empty_cart_message` notice fires (hook preserved) but is
   visually suppressed here; .ps-cart-empty is the visible state.
   -------------------------------------------------------------------------- */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart p.cart-empty {
	display: none;
}

.ps-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 3.5rem 1.5rem 4.5rem;
	border: 1px solid var(--ps-line);
	background: var(--ps-wash);
}
.ps-cart-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-bottom: 1.5rem;
	color: var(--ps-blue);
	background: var(--ps-paper);
	border: 1px solid var(--ps-line);
	border-radius: 0;
}
.ps-cart-empty__title {
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--ps-navy);
	margin: 0 0 0.5rem;
}
.ps-cart-empty__text {
	font-size: 0.9375rem;
	color: var(--ps-muted);
	max-width: 34ch;
	margin: 0 0 1.75rem;
	line-height: 1.5;
}
.ps-cart-empty__cta {
	padding: 0.9rem 2rem;
}

/* --------------------------------------------------------------------------
   3 · CART — Figma 12812:5519 (desktop) / 12812:5775 (mobile).
   Markup emitted by woocommerce/cart/cart.php:
     div.woocommerce (plain block)
       .ps-page-head.ps-cart-head          full-bleed masthead
       .ps-cart-progress                   "Order Summary" + step rail
       .ps-cart-layout (grid 1fr | aside)
         .ps-cart-main > form.woocommerce-cart-form > table.cart   items
         .cart-collaterals > .cart_totals  "Cart Summary" card
       .ps-upsell                          "You May Also Like"
       .ps-cart-ruo                        "Research Use Only"
   -------------------------------------------------------------------------- */
.woocommerce-cart {
	--ps-cart-aside: 387px;
	--ps-cart-gap: 1.5rem;
}
/* the shortcode wrapper is a plain block; the 2-col grid lives on .ps-cart-layout */
.woocommerce-cart .ps-prose-body .woocommerce {
	display: block;
}
/* hide page.php's default <h1> only when our masthead renders (the empty-cart
   state has no .ps-cart-head, so it keeps its "Cart" title). */
.woocommerce-cart .ps-main:has(.ps-cart-head) > article > .ps-page-title {
	display: none;
}

/* --- masthead (breadcrumb + "My Cart" + DNA), full-bleed wash band --------- */
.woocommerce-cart .ps-cart-head {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--ps-sp-6);
}
.woocommerce-cart .ps-cart-head .ps-page-head-title {
	font-size: 1.75rem;
}
.woocommerce-cart .ps-cart-head .ps-breadcrumb a,
.woocommerce-cart .ps-cart-head .ps-breadcrumb span {
	font-size: 0.8125rem;
}

/* --- "Order Summary" + step rail (Items · Details · Shipping · Payment) ----- */
.ps-cart-progress {
	margin: 0 0 var(--ps-sp-6);
}

/* Cart & checkout run title-band → stepper → content, so the band's generic 40px
   bottom padding stacked with the head's own margin into ~80px of dead air under
   the title (the gap the client circled). One rhythm now: 24 above the stepper,
   24 below it, identical on both pages and both breakpoints. */
.ps-cart-head .ps-page-head-inner,
.ps-checkout-head .ps-page-head-inner { padding-bottom: var(--ps-sp-6); }

.ps-cart-progress__title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--ps-navy);
	margin: 0 0 1.15rem;
}
.ps-steps {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: calc(100% - var(--ps-cart-aside) - var(--ps-cart-gap));
}
.ps-step {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	flex: 0 0 auto;
}
/* Flat text stepper (Figma 1336-6093): "1 Items" — number + label inline, no
   badge; the active + completed steps are brand blue, the rest muted grey. */
.ps-step__num,
.ps-step__label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
	color: var(--ps-soft);
}
.ps-step.is-active .ps-step__num,
.ps-step.is-active .ps-step__label,
.ps-step.is-done .ps-step__num,
.ps-step.is-done .ps-step__label {
	color: var(--ps-blue);
}
.ps-step__sep {
	flex: 1 1 auto;
	min-width: 24px;
	height: 1px;
	margin: 0 1rem;
	background: var(--ps-line);
	align-self: center;
}
/* the connector leaving a completed step is brand blue (Figma: on the checkout
   steps the Items→Details line is blue up to the current step). */
.ps-step.is-done + .ps-step__sep {
	height: 2px;
	background: var(--ps-blue);
}

/* --- Checkout chrome: reuse the cart masthead + stepper (added via hooks) ---- */
.woocommerce-checkout { --ps-cart-aside: 387px; --ps-cart-gap: 1.5rem; }
.woocommerce-checkout .ps-main.ps-prose:has(.ps-checkout-head) { padding-top: 0; }
.woocommerce-checkout .ps-main:has(.ps-checkout-head) > article > .ps-page-title { display: none; }
.woocommerce-checkout .ps-checkout-head {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--ps-sp-6);
}
.woocommerce-checkout .ps-checkout-head .ps-page-head-title { font-size: 1.75rem; }
.woocommerce-checkout .ps-checkout-head .ps-breadcrumb a,
.woocommerce-checkout .ps-checkout-head .ps-breadcrumb span { font-size: 0.8125rem; }
/* SSL trust block under Place Order — pale-blue fill + blue lock (Figma). */
.ps-checkout-trust {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	border: 0;
	background: var(--ps-pale);
}
.ps-checkout-trust .ps-trust-ico { color: var(--ps-blue); flex: 0 0 auto; margin-top: 1px; }
.ps-checkout-trust .ps-trust-copy { display: flex; flex-direction: column; gap: 0.1875rem; }
.ps-checkout-trust strong { font-size: 0.875rem; font-weight: 700; color: var(--ps-navy); }
.ps-checkout-trust span { font-size: 0.75rem; line-height: 1.4; color: var(--ps-muted); }

/* --- two-column layout ----------------------------------------------------- */
.ps-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ps-cart-aside);
	gap: var(--ps-cart-gap);
	align-items: start;
	margin: 0 0 var(--ps-section);
}
.ps-cart-main {
	grid-column: 1;
	min-width: 0;
}
.ps-cart-items__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ps-navy);
	margin: 0 0 var(--ps-sp-4);
}
.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	width: auto;
	float: none;
	margin: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: auto;
	float: none;
}
.woocommerce-cart .cart-collaterals .cross-sells {
	display: none; /* upsell handled by the branded "You May Also Like" row */
}

/* --- cart items — each row a card cell inside one bordered list ------------- */
.woocommerce-cart .woocommerce-cart-form {
	margin: 0;
}
.woocommerce-cart table.shop_table.cart {
	width: 100%;
	border: 1px solid var(--ps-line);
	border-collapse: collapse;
	border-radius: 0;
	margin: 0;
	background: #fff;
}
.woocommerce-cart table.cart thead {
	display: none; /* Figma line-items have no column header row */
}
.woocommerce-cart table.cart tbody {
	display: block;
}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto minmax(96px, max-content);
	grid-template-areas:
		"thumb name qty subtotal"
		"thumb name qty price";
	column-gap: 1.25rem;
	align-items: center;
	padding: 1.5rem;
	border-top: 1px solid var(--ps-line);
}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item:first-child {
	border-top: 0;
}
.woocommerce-cart table.cart td {
	border: 0;
	padding: 0;
	background: transparent;
	vertical-align: middle;
}

.woocommerce-cart td.product-thumbnail {
	grid-area: thumb;
	align-self: center;
}
.woocommerce-cart td.product-thumbnail a,
.woocommerce-cart td.product-thumbnail img {
	display: block;
	width: 80px;
	height: 80px;
}
.woocommerce-cart td.product-thumbnail img {
	object-fit: contain;
	border: 1px solid var(--ps-line);
	background: #fff;
}

/* selector carries table.cart so it out-specifies Woo's smallscreen
   `table.shop_table_responsive tr td { display:block; text-align:right }` (≤768px). */
.woocommerce-cart table.cart td.product-name {
	grid-area: name;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ps-navy);
	line-height: 1.3;
	text-align: left;
}
.woocommerce-cart td.product-name > a {
	color: var(--ps-navy);
	text-decoration: none;
}
.woocommerce-cart td.product-name > a:hover {
	color: var(--ps-blue);
}
.woocommerce-cart td.product-name dl.variation,
.woocommerce-cart td.product-name .wc-item-meta {
	font-size: 0.8125rem;
	color: var(--ps-muted);
	font-weight: 400;
	margin: 0;
}
.ps-cart-item__cas {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--ps-muted);
}
.ps-cart-item__stock {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ps-blue);
	margin-top: 0.1rem;
}
.ps-cart-item__stock--out {
	color: #c0392b;
}

/* price block — line subtotal (large) stacked over unit price (small), right */
.woocommerce-cart td.product-subtotal {
	grid-area: subtotal;
	align-self: end;
	text-align: right;
	white-space: nowrap;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ps-navy);
}
.woocommerce-cart td.product-price {
	grid-area: price;
	align-self: start;
	text-align: right;
	white-space: nowrap;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--ps-muted);
}
.woocommerce-cart td.product-price::before {
	content: "Unit Price: ";
}

/* quantity stepper — bordered box with injected − / + controls (ps.js-free) */
.woocommerce-cart td.product-quantity {
	grid-area: qty;
	align-self: center;
}
.woocommerce-cart .quantity {
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--ps-line-2);
	border-radius: 0;
	background: #fff;
	overflow: hidden;
}
.woocommerce-cart .quantity input.qty {
	width: 40px;
	height: 42px;
	padding: 0;
	text-align: center;
	font-family: var(--ps-font);
	font-size: 0.9375rem;
	color: var(--ps-ink);
	border: 0;
	border-radius: 0;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce-cart .quantity input.qty:focus {
	outline: none;
}
.ps-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--ps-font);
	font-size: 1.125rem;
	line-height: 1;
	color: var(--ps-ink);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ps-qty-btn:hover {
	background: var(--ps-wash);
	color: var(--ps-blue);
}
.ps-qty-dec { border-right: 1px solid var(--ps-line); }
.ps-qty-inc { border-left: 1px solid var(--ps-line); }

/* remove × — subtle, top-right corner of the row (Figma omits it; kept for WC) */
.woocommerce-cart td.product-remove {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: auto;
	padding: 0;
	z-index: 2;
}
.woocommerce-cart table.cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 18px;
	line-height: 1;
	color: var(--ps-soft) !important; /* beats WooCommerce's #a00 !important */
	background: transparent;
	border: 0;
	border-radius: 0;
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
}
.woocommerce-cart table.cart a.remove:hover {
	color: #fff !important;
	background: #c0392b;
}

/* actions row (nonce + update-cart) is retained for WC_Form_Handler but hidden;
   the quantity stepper submits update_cart programmatically. */
.woocommerce-cart table.cart td.actions {
	display: none;
}

/* --- "Cart Summary" card --------------------------------------------------- */
.woocommerce-cart .cart_totals {
	border: 1px solid var(--ps-line);
	background: #eff8fb;
	padding: 1.5rem;
	position: sticky;
	top: 1.5rem;
}
.woocommerce-cart .cart_totals h2 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ps-navy);
	margin: 0 0 var(--ps-sp-4);
	padding: 0;
	border: 0;
}
.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	border-radius: 0;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	border: 0;
	padding: 0.4rem 0;
	font-size: 0.9375rem;
	background: transparent;
	vertical-align: middle;
}
.woocommerce-cart .cart_totals table.shop_table th {
	font-weight: 400;
	color: var(--ps-muted);
	text-align: left;
}
.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	color: var(--ps-ink);
	font-weight: 500;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	padding-top: 1rem;
	border-top: 1px solid var(--ps-line);
}
.woocommerce-cart .cart_totals tr.order-total th {
	font-weight: 700;
	font-size: 1rem;
	color: var(--ps-navy);
}
.woocommerce-cart .cart_totals tr.order-total td {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ps-blue);
}
.woocommerce-cart .cart_totals .cart-discount td {
	color: var(--ps-blue);
	font-weight: 700;
}
/* applied-coupon "Remove" control — the destructive red the Figma cart uses for
   its "Remove Discount" action (native WC remove link, restyled only). */
.woocommerce-cart .cart_totals .cart-discount .woocommerce-remove-coupon {
	color: #c0392b;
	font-weight: 500;
	text-decoration: none;
}
.woocommerce-cart .cart_totals .cart-discount .woocommerce-remove-coupon:hover {
	text-decoration: underline;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button {
	font-size: 0.8125rem;
	color: var(--ps-muted);
}
.woocommerce-cart .cart_totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}
.woocommerce-cart .cart_totals ul#shipping_method li {
	margin: 0 0 0.25rem;
}

/* promo code (relocated from cart.php actions) */
.woocommerce-cart .cart_totals .ps-promo,
.woocommerce-checkout #order_review .ps-promo {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}
.woocommerce-cart .cart_totals .ps-promo__input,
.woocommerce-checkout #order_review .ps-promo__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 0.9rem;
	font-family: var(--ps-font);
	font-size: 0.875rem;
	color: var(--ps-ink);
	border: 1px solid var(--ps-line);
	border-radius: 0;
	background: #fff;
}
.woocommerce-cart .cart_totals .ps-promo__input::placeholder,
.woocommerce-checkout #order_review .ps-promo__input::placeholder {
	color: var(--ps-soft);
}
.woocommerce-cart .cart_totals .ps-promo__input:focus,
.woocommerce-checkout #order_review .ps-promo__input:focus {
	outline: none;
	border-color: var(--ps-blue);
	box-shadow: 0 0 0 3px rgba(0, 118, 184, 0.15);
}
.woocommerce-cart .cart_totals .ps-promo__btn,
.woocommerce-checkout #order_review .ps-promo__btn {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 1.1rem;
	border: 1px solid var(--ps-blue);
	border-radius: 0;
	background: var(--ps-blue);
	color: #fff;
	font-family: var(--ps-font);
	font-weight: 700;
	font-size: 0.875rem;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.woocommerce-cart .cart_totals .ps-promo__btn:hover,
.woocommerce-checkout #order_review .ps-promo__btn:hover {
	background: var(--ps-blue-deep);
	border-color: var(--ps-blue-deep);
}

/* email + 21+/research-use consent (presentational) */
.ps-cart-consent {
	margin: 0 0 1.25rem;
}
.ps-cart-consent .ps-field-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ps-ink);
	margin: 0 0 0.5rem;
}
.ps-cart-consent .ps-req {
	color: var(--ps-blue);
}
.ps-input-icon {
	position: relative;
	margin: 0 0 0.9rem;
}
.ps-input-icon svg {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ps-muted);
	pointer-events: none;
}
.ps-cart-consent__email {
	width: 100%;
	height: 44px;
	padding: 0 0.9rem 0 2.4rem;
	font-family: var(--ps-font);
	font-size: 0.875rem;
	color: var(--ps-ink);
	border: 1px solid var(--ps-line);
	border-radius: 0;
	background: #fff;
}
.ps-cart-consent__email::placeholder {
	color: var(--ps-soft);
}
.ps-cart-consent__email:focus {
	outline: none;
	border-color: var(--ps-blue);
	box-shadow: 0 0 0 3px rgba(0, 118, 184, 0.15);
}
.ps-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.8125rem;
	color: var(--ps-ink);
	line-height: 1.4;
	cursor: pointer;
}
.ps-consent__box {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ps-blue);
}

/* proceed + continue buttons */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
	padding: 0;
	margin: 0 0 0.75rem;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 1.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
	border: 1px solid var(--ps-blue);
	border-radius: 0;
	background: var(--ps-blue);
	color: #fff;
	text-decoration: none;
	text-shadow: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--ps-blue-deep);
	border-color: var(--ps-blue-deep);
	color: #fff;
}
.woocommerce-cart .cart_totals a.ps-continue-shopping {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 1.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
	border: 1px solid var(--ps-blue);
	border-radius: 0;
	background: #fff;
	color: var(--ps-blue);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-cart .cart_totals a.ps-continue-shopping:hover {
	background: var(--ps-blue);
	color: #fff;
}

/* --- Related strips row ----------------------------------------------------
   Only the outer rhythm lives here. The head and cards are rendered by
   ps_related_grid_html() and styled by .ps-pd-related-* / .ps-pd-card in
   main.css — the same markup the PDP uses, so the two cannot diverge. The old
   bespoke .ps-upsell__tile image squares are gone with it. */
.ps-upsell {
	margin: 0 0 var(--ps-section);
}

/* --- "Research Use Only" band ---------------------------------------------- */
.ps-cart-ruo {
	background: #f3f4fc;
	padding: 1.75rem 2rem;
	margin: 0 0 1rem;
}
.ps-cart-ruo__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ps-navy);
	margin: 0 0 0.5rem;
}
.ps-cart-ruo__text {
	max-width: 82ch;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ps-muted);
}

/* --------------------------------------------------------------------------
   4 · CHECKOUT — single page: details (left) + sticky order summary (right).
   NOTE: the checkout PHP templates are intentionally NOT overridden — the money
   path stays on WooCommerce's stock markup so every field + gateway hook (now
   and after Woo updates) is preserved. Everything here is CSS-only (rule #3).
   -------------------------------------------------------------------------- */

/* before-form: coupon toggle + login toggle */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
	margin: 0 0 1.5rem;
}
.woocommerce-checkout form.login {
	border: 1px solid var(--ps-line);
	border-radius: 0;
	background: var(--ps-wash);
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.75rem;
}

/* Woo's top-of-page "Have a coupon?" bar is retired — the promo field lives in
   Order Summary on both cart and checkout (see functions.php). */
.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none; }

/* two-column layout — the grid moved from form.checkout onto .ps-co, the
   wrapper the checkout hooks emit. The form now has wrapper children (main +
   rail) and a grid can only place its OWN children, so leaving the grid on the
   form would collapse every area into one cell. */
.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: block;
}
.woocommerce-checkout .ps-co {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(320px, 34%, 400px);
	grid-template-areas:
		"main heading"
		"main rail";
	grid-template-rows: auto 1fr;
	column-gap: 2.5rem;
	row-gap: 0;
	align-items: start;
}
.woocommerce-checkout .ps-co-main { grid-area: main; min-width: 0; }
.woocommerce-checkout .ps-co-rail { grid-area: rail; min-width: 0; }
.woocommerce-checkout #customer_details {
	width: auto;
	float: none;
}
.woocommerce-checkout #order_review_heading {
	grid-area: heading;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ps-navy);
	margin: 0;
	background: var(--ps-pale);
	border: 1px solid var(--ps-line);
	border-bottom: 0;
	padding: 1.5rem 1.5rem 0.25rem;
}
.woocommerce-checkout #order_review {
	width: auto;
	float: none;
}
/* The whole rail travels together — summary, promo and CTA — so the total and
   the primary action stay on screen while a long form scrolls past. */
.woocommerce-checkout .ps-co-rail {
	position: sticky;
	top: 1.5rem;
}

/* customer details column: billing + shipping stacked, each a brand card */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	max-width: none;
	margin: 0 0 1.5rem;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	border: 1px solid var(--ps-line);
	background: var(--ps-paper);
	padding: 1.5rem;
}
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: 1.5rem;
}
/* Guest checkout with no separate shipping step renders an EMPTY
   .woocommerce-shipping-fields — an empty bordered card. Hide it (no heading
   inside means nothing to show). */
.woocommerce-checkout .woocommerce-shipping-fields:empty,
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(h3)) {
	display: none;
}
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--ps-navy);
	margin: 0 0 1.25rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--ps-line);
}
.woocommerce-checkout .woocommerce-shipping-fields h3 label {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--ps-navy);
}

/* Billing fields — 2-up grid (first/last share the top row; country, address,
   city, state, ZIP, phone, email each span the row), matching the Figma
   "Details" artboard. Pure layout on the field WRAPPER — no field is reordered,
   renamed, or removed (rule #3). */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1.25rem;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-first {
	grid-column: 1;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-last {
	grid-column: 2;
}

/* form fields */
.woocommerce-checkout .form-row {
	margin: 0 0 1.1rem;
	padding: 0;
}
/* WooCommerce still ships the float-era `.form-row-first { float:left; width:47% }`.
   Inside our grid that 47% resolves against the CELL, so a 345px column held a
   162px input and left a 209px canyon between First and Last name. Let the row
   fill its cell and the grid's own column-gap becomes the only gutter. */
/* Specificity note: Woo's own rule is `.woocommerce form .form-row-first`
   (0,3,0), so a `.woocommerce-checkout .form-row-first` (0,2,0) loses and the
   47% stays. Matching its shape and adding our body class wins cleanly. */
.woocommerce-checkout .woocommerce form .form-row-first,
.woocommerce-checkout .woocommerce form .form-row-last,
.woocommerce-checkout .woocommerce form .form-row-wide,
.woocommerce-checkout .woocommerce form .form-row {
	float: none;
	width: auto;
	max-width: none;
}
.woocommerce-checkout .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce-checkout .form-row label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ps-ink);
	margin: 0 0 0.4rem;
}
.woocommerce-checkout .form-row .required {
	color: var(--ps-blue);
	border: 0;
	text-decoration: none;
}
.woocommerce-checkout .form-row .optional {
	color: var(--ps-soft);
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection,
.woocommerce-checkout form.checkout_coupon input.input-text,
.woocommerce-checkout form.login input.input-text {
	width: 100%;
	height: 46px;
	padding: 0 0.9rem;
	font-family: var(--ps-font);
	font-size: 0.9375rem;
	color: var(--ps-ink);
	background: var(--ps-paper);
	border: 1px solid var(--ps-line);
	border-radius: 0;
	box-shadow: none;
	line-height: 1.4;
}
.woocommerce-checkout .form-row textarea {
	height: auto;
	min-height: 84px;
	padding: 0.7rem 0.9rem;
	resize: vertical;
}
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
	color: var(--ps-soft);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout form.checkout_coupon input.input-text:focus,
.woocommerce-checkout form.login input.input-text:focus {
	outline: none;
	border-color: var(--ps-blue);
	box-shadow: 0 0 0 3px rgba(0, 118, 184, 0.15);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text {
	border-color: #c0392b;
}
.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
	border-color: #2e8b57;
}

/* select2 (country/state) — match text inputs */
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: 46px;
	border: 1px solid var(--ps-line);
	border-radius: 0;
	background: var(--ps-paper);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding: 0 0.9rem;
	color: var(--ps-ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 6px;
}
.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--ps-blue);
	box-shadow: 0 0 0 3px rgba(0, 118, 184, 0.15);
}
/* native select fallback */
.woocommerce-checkout .form-row select {
	width: 100%;
	height: 46px;
	padding: 0 0.9rem;
	font-family: var(--ps-font);
	font-size: 0.9375rem;
	color: var(--ps-ink);
	border: 1px solid var(--ps-line);
	border-radius: 0;
	background: var(--ps-paper);
}

/* --------------------------------------------------------------------------
   4b · Field icons (Figma "Details" artboard) — muted left glyphs on the billing
   inputs + the country/state select2 boxes. CSS background-image only: no field
   is touched, so gateway hooks are unaffected (rule #3). Targeted by field id so
   only the intended inputs get an icon.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #billing_first_name,
.woocommerce-checkout #billing_last_name,
.woocommerce-checkout #billing_email,
.woocommerce-checkout #billing_phone,
.woocommerce-checkout #billing_address_1,
.woocommerce-checkout #billing_city,
.woocommerce-checkout #billing_postcode {
	background-repeat: no-repeat;
	background-position: 0.85rem center;
	background-size: 17px 17px;
	padding-left: 2.55rem;
}
.woocommerce-checkout #billing_first_name,
.woocommerce-checkout #billing_last_name { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2021c0-4%203.6-7%208-7s8%203%208%207%27%2F%3E%3C%2Fsvg%3E"); }
.woocommerce-checkout #billing_email      { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E"); }
.woocommerce-checkout #billing_phone      { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.6%2010.8a15%2015%200%200%200%206.6%206.6l2.2-2.2a1%201%200%200%201%201-.24%2011%2011%200%200%200%203.4.55%201%201%200%200%201%201%201V20a1%201%200%200%201-1%201A17%2017%200%200%201%203%204a1%201%200%200%201%201-1h3.5a1%201%200%200%201%201%201%2011%2011%200%200%200%20.55%203.4%201%201%200%200%201-.24%201Z%27%2F%3E%3C%2Fsvg%3E"); }
.woocommerce-checkout #billing_address_1  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s6-5%206-10a6%206%200%200%200-12%200c0%205%206%2010%206%2010Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2711%27%20r%3D%272.2%27%2F%3E%3C%2Fsvg%3E"); }
.woocommerce-checkout #billing_city       { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%273%27%20width%3D%2714%27%20height%3D%2718%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M9%207h2M13%207h2M9%2011h2M13%2011h2M11%2021v-3h2v3%27%2F%3E%3C%2Fsvg%3E"); }
.woocommerce-checkout #billing_postcode   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%204%207%2020M17%204l-2%2016M4%209h16M3%2015h16%27%2F%3E%3C%2Fsvg%3E"); }

/* country + state select2 boxes — icon + matching left padding on the rendered text */
.woocommerce-checkout #billing_country_field .select2-selection--single,
.woocommerce-checkout #billing_state_field .select2-selection--single {
	background-repeat: no-repeat;
	background-position: 0.85rem center;
	background-size: 17px 17px;
}
.woocommerce-checkout #billing_country_field .select2-selection--single { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18%27%2F%3E%3C%2Fsvg%3E"); }
.woocommerce-checkout #billing_state_field .select2-selection--single { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA0AE%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s6-5%206-10a6%206%200%200%200-12%200c0%205%206%2010%206%2010Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2711%27%20r%3D%272.2%27%2F%3E%3C%2Fsvg%3E"); }
.woocommerce-checkout #billing_country_field .select2-selection__rendered,
.woocommerce-checkout #billing_state_field .select2-selection__rendered {
	padding-left: 2.55rem;
}

/* ship-to-different-address toggle */
.woocommerce-checkout #ship-to-different-address {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.woocommerce-checkout #ship-to-different-address label {
	margin: 0;
	cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--ps-blue);
}

/* --- order summary card (review + payment) ------------------------------ */
.woocommerce-checkout #order_review {
	border: 1px solid var(--ps-line);
	border-top: 0;
	background: var(--ps-pale);
	padding: 1rem 1.5rem 1.5rem;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	border-radius: 0;
}
/* Figma order summary has no "PRODUCT / SUBTOTAL" header row — the product line
   sits straight under the title. Hide the review thead (kept in the DOM). */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
	display: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
	padding: 0.85rem 0;
	border-top: 1px solid var(--ps-line);
	font-size: 0.9375rem;
	color: var(--ps-ink);
	vertical-align: top;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:first-child td {
	border-top: 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
	color: var(--ps-navy);
	font-weight: 500;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
	text-align: right;
	white-space: nowrap;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--ps-muted);
	font-weight: 400;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	padding: 0.6rem 0;
	font-size: 0.9375rem;
	border: 0;
	border-top: 1px solid var(--ps-line);
	background: transparent;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	font-weight: 400;
	color: var(--ps-muted);
	text-align: left;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	color: var(--ps-ink);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-weight: 500;
	color: var(--ps-navy);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ps-blue);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount td {
	color: var(--ps-blue);
}

/* payment box */
.woocommerce-checkout #payment {
	background: transparent;
	border: 0;
	border-radius: 0;
}
/* Separated cards, matching the shipping options one step earlier — the two
   choices a buyer makes should look like the same kind of decision. */
.woocommerce-checkout #payment ul.wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ps-sp-2);
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
	padding: 0.9375rem var(--ps-sp-5);
	border: 1px solid var(--ps-line);
	background: var(--ps-paper);
	transition: border-color var(--ps-dur-1) var(--ps-ease), box-shadow var(--ps-dur-1) var(--ps-ease);
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--ps-blue);
	box-shadow: inset 0 0 0 1px var(--ps-blue);
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--ps-sp-3);
	padding: 0;
	margin: 0;
	font-size: var(--ps-t-base);
	font-weight: 700;
	color: var(--ps-navy);
	cursor: pointer;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method input[type="radio"] {
	accent-color: var(--ps-blue);
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
}
/* The gateway's own blurb belongs to the card, not to a grey slab inside it. */
.woocommerce-checkout #payment div.payment_box {
	background: transparent;
	border-radius: 0;
	margin: var(--ps-sp-3) 0 0;
	padding: 0;
	font-size: var(--ps-t-sm);
	line-height: 1.55;
	color: var(--ps-muted);
}
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/* terms + place order */
.woocommerce-checkout #payment .place-order,
.woocommerce-checkout .form-row.place-order {
	padding: 1.25rem 0 0;
	margin: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 1.1rem;
	font-size: 0.8125rem;
	color: var(--ps-muted);
}
.woocommerce-checkout .woocommerce-terms-and-conditions {
	border: 1px solid var(--ps-line);
	background: var(--ps-wash);
	border-radius: 0;
	box-shadow: none;
}
.woocommerce-checkout p.form-row.validate-required label.checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--ps-ink);
	font-weight: 400;
}
.woocommerce-checkout .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: var(--ps-blue);
}

/* --------------------------------------------------------------------------
   5 · Buttons — map every Woo .button to the brand primary (square, flat).
   -------------------------------------------------------------------------- */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-cart td.actions button[name="apply_coupon"],
.woocommerce-cart td.actions button[name="update_cart"],
.woocommerce-checkout form.checkout_coupon button[type="submit"],
.woocommerce-checkout form.login button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ps-font);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	border: 1px solid var(--ps-blue);
	border-radius: 0;
	background: var(--ps-blue);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	text-shadow: none;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-cart td.actions button[name="apply_coupon"]:hover,
.woocommerce-checkout form.checkout_coupon button[type="submit"]:hover,
.woocommerce-checkout form.login button[type="submit"]:hover {
	background: var(--ps-blue-deep);
	border-color: var(--ps-blue-deep);
	color: #fff;
}

/* primary full-width CTAs */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
}

/* coupon apply / login submit — compact primary */
.woocommerce-cart td.actions button[name="apply_coupon"],
.woocommerce-checkout form.checkout_coupon button[type="submit"],
.woocommerce-checkout form.login button[type="submit"] {
	height: 44px;
	padding: 0 1.25rem;
	font-size: 0.875rem;
}

/* update cart — secondary/ghost, pushed to the row's right edge */
.woocommerce-cart td.actions button[name="update_cart"] {
	background: transparent;
	color: var(--ps-ink);
	border: 1px solid var(--ps-line-2);
	height: 44px;
	padding: 0 1.25rem;
	font-size: 0.875rem;
	float: right;
}
.woocommerce-cart td.actions button[name="update_cart"]:hover {
	background: var(--ps-wash);
	border-color: var(--ps-ink);
	color: var(--ps-ink);
}
.woocommerce-cart td.actions button[name="update_cart"]:disabled,
.woocommerce-cart td.actions button[name="update_cart"][disabled] {
	opacity: 0.5;
	cursor: default;
}

/* --------------------------------------------------------------------------
   6 · Responsive.
   -------------------------------------------------------------------------- */

/* tablet / narrow desktop — collapse to a single column */
@media (max-width: 980px) {
	.ps-cart-layout {
		/* minmax(0,1fr), not 1fr — a bare fr track inflates to the widest
		   item's min-content (totals table) and spills past a 390 viewport */
		grid-template-columns: minmax(0, 1fr);
	}
	.woocommerce-cart .ps-cart-main,
	.woocommerce-cart .cart-collaterals {
		grid-column: 1;
	}
	.woocommerce-cart .cart_totals {
		position: static;
	}
	.ps-steps {
		max-width: 100%;
	}
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"details"
			"heading"
			"review";
	}
	.woocommerce-checkout #order_review {
		position: static;
	}
	.woocommerce-checkout #order_review_heading {
		margin-top: 0.5rem;
	}
}

/* phone — stack cart rows into cards. Woo's woocommerce-smallscreen.css owns
   this breakpoint with !important rules (right-align every td, hide the
   thumbnail, zebra-stripe rows) — each is explicitly overridden below. */
/* phone + tablet — Woo's woocommerce-smallscreen.css activates at ≤768px
   (data-title ::before labels, zebra rows, forced right-align on every td). We
   suppress those and switch the line-items + summary to the mobile layout across
   the whole range Woo touches, so 601–768px is not left half-styled. */
@media (max-width: 768px) {
	/* kill Woo smallscreen forced right-align + zebra on the items table */
	.woocommerce-cart table.cart.shop_table_responsive tr td {
		text-align: left !important;
		background: transparent !important;
	}
	.woocommerce-cart table.cart td::before {
		display: none !important;
	}
	.woocommerce-cart table.cart td.product-thumbnail {
		display: block !important;
	}

	/* masthead + section headings */
	.woocommerce-cart .ps-cart-head .ps-page-head-title {
		font-size: 1.5rem;
	}
	.woocommerce-cart .ps-cart-head .ps-breadcrumb {
		flex-wrap: wrap;
	}
	.ps-cart-progress__title,
	.ps-cart-items__title,
	.ps-cart-ruo__title {
		font-size: 1.0625rem;
	}

	/* line items — thumb + name on top, stepper + price block below */
	.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 64px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name     name"
			"qty   qty      subtotal"
			"qty   qty      price";
		column-gap: 0.9rem;
		row-gap: 0.3rem;
		padding: 1.25rem;
	}
	.woocommerce-cart td.product-thumbnail,
	.woocommerce-cart td.product-thumbnail a,
	.woocommerce-cart td.product-thumbnail img {
		width: 64px;
		height: 64px;
	}
	.woocommerce-cart td.product-thumbnail {
		align-self: start;
	}
	.woocommerce-cart table.cart td.product-name {
		align-self: start;
	}
	.woocommerce-cart td.product-quantity {
		justify-self: start;
		align-self: center;
		margin-top: 0.6rem;
	}
	.woocommerce-cart td.product-subtotal {
		align-self: end;
		margin-top: 0.6rem;
		text-align: right !important;
	}
	.woocommerce-cart td.product-price {
		align-self: start;
		text-align: right !important;
	}
	/* re-show the unit-price label (the generic td::before hide above + Woo's
	   data-title ::before both need overriding at this breakpoint). */
	.woocommerce-cart table.cart td.product-price::before {
		display: inline !important;
		content: "Unit:\00a0" !important;
	}

	/* summary totals — keep as a real 2-col table (Woo blocks + zebra + labels it) */
	.woocommerce-cart .cart_totals table.shop_table tr {
		display: table-row;
	}
	.woocommerce-cart .cart_totals table.shop_table th,
	.woocommerce-cart .cart_totals table.shop_table td {
		display: table-cell;
	}
	.woocommerce-cart .cart_totals table.shop_table td::before {
		display: none !important;
	}
	.woocommerce-cart .cart_totals table.shop_table tr td {
		background: transparent !important;
		text-align: right !important;
	}
	.woocommerce-cart .cart_totals table.shop_table tr th {
		background: transparent !important;
		text-align: left !important;
	}

	/* RUO band */
	.ps-cart-ruo {
		padding: 1.5rem 1.25rem;
	}
}

/* phone — page title + checkout column padding */
@media (max-width: 600px) {
	.woocommerce-cart .ps-page-title,
	.woocommerce-checkout .ps-page-title {
		font-size: 1.5rem;
	}

	/* step rail — numbers only on phones (the labels fit fine on tablet ≥601),
	   EXCEPT the current step: a row of bare numbers tells you where you are but
	   not what you are doing. Figma's mobile checkout keeps exactly one label
	   (12812:6529), and one label still fits at 390. */
	.ps-step__label {
		display: none;
	}
	.ps-step.is-active .ps-step__label {
		display: inline;
	}
	.ps-step__sep {
		margin: 0 0.6rem;
		min-width: 16px;
	}

	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout #order_review {
		padding: 1.25rem;
	}

	/* stack first/last name on phones so the labels don't wrap in a tight column */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-first,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-last {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   ORDER RECEIVED — the thank-you page's summary block
   --------------------------------------------------------------------------
   WooCommerce ships this as ul.order_details with `float: left` on each <li>,
   `margin-right: 2em` + `padding-right: 2em` of fixed dead space, and a
   `border-right: 1px dashed` cleared only on :last-of-type. There is no mobile
   handling anywhere in Woo core — woocommerce.css has no @media blocks at all,
   and woocommerce-smallscreen.css never mentions order_details. So the exact
   same float rules run at 390px as at 1440px.

   Two things break as a result. The floats wrap raggedly once a value like
   "Internal Testing (no payment)" exceeds the track, and every item that ends a
   visual row keeps its dashed right border — which is where the stray vertical
   dotted rules come from.

   Rebuilt as a grid: no floats, no wrap artefacts, separators drawn only
   between real columns. The item count varies (Woo adds an Email row for a
   logged-in owner), so this must not assume four.
   ========================================================================== */
.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1px;                       /* the hairline itself — see the cell bg */
	margin: 0 0 var(--ps-section);
	padding: 0;
	list-style: none;
	background: var(--ps-line);     /* shows through the 1px gaps as dividers */
	border: 1px solid var(--ps-line);
}
/* Kill the float clearfix — as grid items those pseudo-elements become CELLS
   and would occupy two slots of the track. */
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after { content: none; display: none; }

.woocommerce ul.order_details li {
	/* Everything Woo set, unset: float, the 4em of dead space, the dashed rule. */
	float: none;
	margin: 0;
	padding: 0.875rem 1rem;
	border: 0;
	background: var(--ps-paper);
	font-size: var(--ps-t-2xs);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ps-muted);
	list-style: none;
}
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--ps-t-md);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ps-navy);
	/* An order total and a gateway name must never spill their cell. */
	overflow-wrap: anywhere;
}
/* Woo clears the border on :last-of-type; with the gap technique there is no
   border to clear, and that rule would otherwise do nothing anyway. */
.woocommerce ul.order_details li:last-of-type { border: 0; }

@media (max-width: 480px) {
	/* Two up rather than one: these are short label/value pairs and a single
	   column turns four facts into a long ladder. */
	.woocommerce ul.order_details { grid-template-columns: 1fr 1fr; }
	.woocommerce ul.order_details li { padding: 0.75rem 0.875rem; }
	.woocommerce ul.order_details li strong { font-size: var(--ps-t-base); }
}

/* The success line above it, and the order/customer tables below. */
.woocommerce .woocommerce-notice--success { margin: 0 0 var(--ps-flow); font-size: var(--ps-t-base); color: var(--ps-ink); }
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details { margin-bottom: var(--ps-section); }
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title { font-size: var(--ps-t-lg); font-weight: 500; color: var(--ps-navy); margin: 0 0 var(--ps-sp-4); }

/* Product links in the order table were falling through to the UA default —
   blue, underlined, and PURPLE once visited, which every one of these is by
   definition, since you just came from that product page. */
.woocommerce .woocommerce-order-details a,
.woocommerce .woocommerce-customer-details a {
	color: var(--ps-blue);
	text-decoration: none;
	font-weight: 500;
}
.woocommerce .woocommerce-order-details a:visited,
.woocommerce .woocommerce-customer-details a:visited { color: var(--ps-blue); }
.woocommerce .woocommerce-order-details a:hover { color: var(--ps-blue-deep); text-decoration: underline; }

/* Order + address tables: hairline grid on the theme's own line colour. */
.woocommerce .woocommerce-order-details table,
.woocommerce .woocommerce-customer-details table { width: 100%; border-collapse: collapse; }
.woocommerce .woocommerce-order-details th,
.woocommerce .woocommerce-order-details td {
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--ps-line);
	font-size: var(--ps-t-base);
	vertical-align: top;
	text-align: left;
}
.woocommerce .woocommerce-order-details th { font-weight: 500; color: var(--ps-navy); }
.woocommerce address { font-style: normal; line-height: 1.6; color: var(--ps-ink); border: 1px solid var(--ps-line); padding: 0.875rem 1rem; }

/* --------------------------------------------------------------------------
   9 · STEPPED CHECKOUT — Details -> Shipping -> Payment (Figma 12812:4780).
   Visibility states over the stock form: no Woo field, hook or container is
   removed, so the money path is untouched (rule #3). ps.js re-homes the
   shipping radios and #payment into their step on every fragment refresh.
   -------------------------------------------------------------------------- */

.woocommerce-checkout .ps-co-step[hidden] { display: none; }
.woocommerce-checkout .ps-co-step-title {
	font-size: var(--ps-t-lg);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ps-navy);
	margin: 0 0 var(--ps-sp-4);
}

/* The step that just arrived rises the same way every other panel on the site
   does — one --ps-dur-2 beat, and nothing at all under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.woocommerce-checkout .ps-co-step.is-active { animation: ps-co-step-in var(--ps-dur-2) var(--ps-ease-enter) both; }
	@keyframes ps-co-step-in {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: none; }
	}
}

/* --- the live stepper ---------------------------------------------------- */
/* Each step is a real control. Visited steps go back; the rest are inert, so
   the stepper can never strand someone on a step they cannot complete. */
.ps-step__hit {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: opacity var(--ps-dur-1) var(--ps-ease);
}
.ps-step__hit:disabled { cursor: default; }
.ps-step__hit:not(:disabled):hover { opacity: 0.72; }
.ps-step__hit:focus-visible {
	outline: 2px solid var(--ps-blue);
	outline-offset: 3px;
}
/* A step that does not apply to this cart (nothing to ship) reads as skipped
   rather than pending, so the numbering never lies about what is left. */
.ps-step.is-skipped { opacity: 0.45; }
.ps-step.is-skipped .ps-step__hit { pointer-events: none; }

/* --- shipping options (Figma: full-width option cards) ------------------- */
/* The chooser has moved into step 3, so the row it came from must not leave a
   ghost <tr> (an empty header cell) behind in the summary table. */
.woocommerce-checkout tr.ps-co-rowmoved { display: none; }

.woocommerce-checkout .ps-co-ship ul#shipping_method,
.woocommerce-checkout .ps-co-ship ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ps-sp-2);
}
/* WooCommerce renders the radio and the label as SIBLINGS, not nested — so the
   card has to be the <li>, with the input as its first cell. Putting the frame
   on the label instead leaves the radio stranded outside it. */
.woocommerce-checkout .ps-co-ship ul#shipping_method li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--ps-sp-3);
	min-height: 66px;
	margin: 0;
	padding: 0.875rem var(--ps-sp-5);
	border: 1px solid var(--ps-line);
	background: var(--ps-paper);
	transition: border-color var(--ps-dur-1) var(--ps-ease), box-shadow var(--ps-dur-1) var(--ps-ease);
}
.woocommerce-checkout .ps-co-ship ul#shipping_method li:hover { border-color: var(--ps-line-2); }
/* One rate available: Woo emits a HIDDEN input instead of a radio, because
   there is no choice to make. A hidden input is display:none and therefore not
   a grid item, so the reserved radio track would leave the label stranded in
   the `auto` column at content width. Give the row a single full-width track. */
.woocommerce-checkout .ps-co-ship ul#shipping_method li:has(input[type="hidden"]) {
	grid-template-columns: minmax(0, 1fr);
}
/* The label carries the rest of the row, so the entire card width is clickable
   — no dead space between the name and the price. */
.woocommerce-checkout .ps-co-ship ul#shipping_method label {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--ps-sp-3);
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-weight: 400;
}

/* Woo's radio, restyled in place — never replaced, so its name/value/checked
   state stay exactly what Woo wrote. */
.woocommerce-checkout .ps-co-ship ul#shipping_method input.shipping_method {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--ps-line-2);
	border-radius: 50%;
	background: var(--ps-paper);
	display: grid;
	place-content: center;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color var(--ps-dur-1) var(--ps-ease);
}
.woocommerce-checkout .ps-co-ship ul#shipping_method input.shipping_method::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ps-blue);
	transform: scale(0);
	transition: transform var(--ps-dur-1) var(--ps-ease-pop);
}
.woocommerce-checkout .ps-co-ship ul#shipping_method input.shipping_method:checked { border-color: var(--ps-blue); }
.woocommerce-checkout .ps-co-ship ul#shipping_method input.shipping_method:checked::before { transform: scale(1); }
.woocommerce-checkout .ps-co-ship ul#shipping_method input.shipping_method:focus-visible {
	outline: 2px solid var(--ps-blue);
	outline-offset: 2px;
}
/* Selected card: brand border, no layout shift (inset ring, not a 2px border). */
.woocommerce-checkout .ps-co-ship ul#shipping_method li:has(input:checked) {
	border-color: var(--ps-blue);
	box-shadow: inset 0 0 0 1px var(--ps-blue);
}

.woocommerce-checkout .ps-ship-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woocommerce-checkout .ps-ship-name {
	font-size: var(--ps-t-base);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ps-navy);
}
.woocommerce-checkout .ps-ship-eta {
	font-size: var(--ps-t-sm);
	line-height: 1.3;
	color: var(--ps-muted);
}
.woocommerce-checkout .ps-ship-cost {
	font-size: var(--ps-t-base);
	font-weight: 700;
	color: var(--ps-navy);
	white-space: nowrap;
	justify-self: end;
}
.woocommerce-checkout .ps-ship-cost .ps-ship-free { color: var(--ps-blue); }
.woocommerce-checkout .ps-ship-cost .amount { font-weight: 700; color: inherit; }

/* Woo's destination line + "change address" calculator, kept but quietened. */
.woocommerce-checkout .ps-co-ship .woocommerce-shipping-destination,
.woocommerce-checkout .ps-co-ship .shipping-calculator-button {
	display: block;
	font-size: var(--ps-t-sm);
	color: var(--ps-muted);
	margin-top: var(--ps-sp-3);
}
/* No rates for this address — Woo's own message, given room to be read. */
.woocommerce-checkout .ps-co-ship > p {
	margin: 0;
	padding: var(--ps-sp-4) var(--ps-sp-5);
	border: 1px solid var(--ps-line);
	background: var(--ps-wash);
	font-size: var(--ps-t-sm);
	line-height: 1.5;
	color: var(--ps-ink);
}

.ps-checkout-trust--ship { margin-top: var(--ps-sp-4); }

/* --- payment step -------------------------------------------------------- */
/* The payment methods keep ONE style block — the original at section 4. It was
   written when #payment sat in the rail and already carries the list treatment;
   duplicating it here created a second source of truth that lost on specificity
   (equal ids and classes, fewer type selectors) and silently did nothing. The
   card treatment now lives in that block instead. */
.woocommerce-checkout .ps-co-pay .woocommerce-privacy-policy-text {
	font-size: var(--ps-t-xs);
	line-height: 1.55;
	color: var(--ps-muted);
	margin-top: var(--ps-sp-4);
}
.woocommerce-checkout .ps-co-pay .woocommerce-terms-and-conditions-wrapper { margin-top: var(--ps-sp-4); }

/* No gateway is switched on yet. The step is built and styled so turning one on
   is a settings change, not a build — but an empty box would read as broken, so
   it says so plainly. */
.woocommerce-checkout .ps-co-pay .woocommerce-notice--info,
.woocommerce-checkout .ps-co-pay .wc-no-payment-methods-message {
	margin: 0;
	padding: var(--ps-sp-4) var(--ps-sp-5);
	border: 1px solid var(--ps-line);
	background: var(--ps-wash);
	font-size: var(--ps-t-sm);
	line-height: 1.5;
	color: var(--ps-ink);
}

/* Woo's own Place Order stays in the DOM — the rail CTA clicks it, so Woo's
   submit handler and any gateway's run untouched. It is hidden, never removed. */
.woocommerce-checkout .ps-co-pay #place_order {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- rail CTA ------------------------------------------------------------ */
.woocommerce-checkout .ps-co-cta {
	border: 1px solid var(--ps-line);
	border-top: 0;
	background: var(--ps-pale);
	padding: 0 var(--ps-sp-6) var(--ps-sp-6);
}
.woocommerce-checkout .ps-co-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 var(--ps-sp-5);
	border: 0;
	background: var(--ps-blue);
	color: #fff;
	font-size: var(--ps-t-ui);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--ps-dur-1) var(--ps-ease);
}
.woocommerce-checkout .ps-co-next:hover { background: var(--ps-blue-deep); }
.woocommerce-checkout .ps-co-next:focus-visible {
	outline: 2px solid var(--ps-navy);
	outline-offset: 2px;
}
.woocommerce-checkout .ps-co-back { margin: var(--ps-sp-3) 0 0; text-align: center; }
.woocommerce-checkout .ps-co-backlink {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--ps-t-sm);
	color: var(--ps-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.woocommerce-checkout .ps-co-backlink:hover { color: var(--ps-navy); }
.woocommerce-checkout .ps-co-backlink[hidden] { display: none; }

/* --- field-level validation ---------------------------------------------- */
/* The gate marks the offending field rather than stacking another red box at
   the top of the page — the reader is told where the problem is, not just that
   there is one. */
.woocommerce-checkout .form-row.ps-co-invalid input.input-text,
.woocommerce-checkout .form-row.ps-co-invalid select,
.woocommerce-checkout .form-row.ps-co-invalid .select2-selection {
	border-color: var(--ps-err);
	box-shadow: inset 0 0 0 1px var(--ps-err);
}
.woocommerce-checkout .form-row.ps-co-invalid label { color: var(--ps-err); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.woocommerce-checkout .ps-co {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"main"
			"heading"
			"rail";
		column-gap: 0;
	}
	/* Sticky belongs to a column that has something to scroll past; stacked, it
	   would pin the summary over the form. */
	.woocommerce-checkout .ps-co-rail { position: static; }
	.woocommerce-checkout #order_review_heading { margin-top: var(--ps-sp-7); }
}
@media (max-width: 740px) {
	.woocommerce-checkout .ps-co-step-title { font-size: var(--ps-t-md); }
	.woocommerce-checkout .ps-co-ship ul#shipping_method li {
		min-height: 60px;
		padding: 0.75rem var(--ps-sp-4);
		gap: var(--ps-sp-2);
	}
	.woocommerce-checkout .ps-co-cta { padding: 0 var(--ps-sp-4) var(--ps-sp-4); }
}