/* PINAX cart, checkout, account, notices, destination picker. Kafeneio system.
   Loads on cart, checkout and account only. The shipping table and waitlist form live in 65-commerce-embeds.css.
   Owner: commerce agent. Tokens only (00-tokens.css). Flat colour: no gradients, no shadows, no lift.
   WooCommerce core styles are dequeued, so everything WooCommerce prints on these pages is styled here, always under
   .px-commerce (body class on cart and checkout), .px-cart, .px-checkout, .px-receipt or a px- component.

   Contrast pairs used (WCAG 2.x, from 00-tokens.css):
   ink on paper 14.89, ink on pale 11.56, ink on mustard 8.33, green on paper 7.77, paper on green 7.77,
   grey on paper 6.06 (14px min), green on pale 6.03, red on paper 5.00, paper on red 5.00, grey on pale 4.70 (14px min),
   red on pale 3.88 (display 22px 800 only: receipt eyebrow). Never: red text on ink or green, mustard text on paper. */

/* ==========================================================================
   0. Shared atoms
   ========================================================================== */

.px-commerce [hidden] { display: none !important; }

.px-commerce .woocommerce { font-variant-numeric: tabular-nums lining-nums; }
.px-commerce .woocommerce :where(.amount) { font-weight: 600; letter-spacing: 0; white-space: nowrap; }

/* Secondary buttons WooCommerce prints: ink outline, sign lettering */
.px-commerce .woocommerce :where(.button, button.button, a.button, input.button, button[name="update_cart"], button[name="apply_coupon"], button[name="calc_shipping"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.7rem 1.25rem 0.55rem;
	border: 2px solid var(--px-ink);
	border-radius: var(--px-radius);
	background: transparent;
	color: var(--px-ink);
	font-family: var(--px-font-display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--px-dur) var(--px-ease), color var(--px-dur) var(--px-ease), border-color var(--px-dur) var(--px-ease);
}
.px-commerce .woocommerce :where(.button, button.button, a.button, input.button):hover {
	background: var(--px-ink);
	border-color: var(--px-ink);
	color: var(--px-paper);
	text-decoration: none;
}
.px-commerce .woocommerce :where(.button, button.button):disabled,
.px-commerce .woocommerce :where(.button, button.button)[aria-disabled="true"],
.px-commerce .woocommerce :where(.button, button.button).disabled {
	border-color: var(--px-grey);
	background: transparent;
	color: var(--px-grey);
	cursor: not-allowed;
}

/* Primary: mustard enamel, ink letters (Proceed to checkout, Place order, Return to shop) */
.px-commerce .woocommerce :where(a.checkout-button, #place_order, .wc-proceed-to-checkout .button, .return-to-shop .button) {
	min-height: 3.5rem;
	padding: 1rem 1.5rem 0.8rem;
	border-color: var(--px-mustard);
	background: var(--px-mustard);
	color: var(--px-ink);
	font-size: 1.5rem;
}
.px-commerce .woocommerce :where(a.checkout-button, #place_order, .wc-proceed-to-checkout .button) { width: 100%; }
.px-commerce .woocommerce :where(a.checkout-button, #place_order, .wc-proceed-to-checkout .button, .return-to-shop .button):hover {
	border-color: var(--px-ink);
	background: var(--px-ink);
	color: var(--px-mustard);
}

/* Inputs: base.css paper field with a 2px ink bottom edge; Woo invalid state turns the edges red */
.px-commerce .woocommerce :where(.input-text, select, textarea) { width: 100%; }
.px-commerce .woocommerce .woocommerce-invalid :where(.input-text, select, .select2-selection) { border-color: var(--px-red); border-bottom-color: var(--px-red); }

/* Quantity: pale block like the product page stepper */
.px-commerce .woocommerce .quantity { display: inline-flex; }
.px-commerce .woocommerce .quantity .qty {
	width: 4.5rem;
	min-height: 3.25rem;
	padding: 0.4rem 0.35rem;
	border: 0;
	border-bottom: 2px solid var(--px-ink);
	background-color: var(--px-pale);
	color: var(--px-ink);
	font-weight: 700;
	font-size: 1.125rem;
	text-align: center;
}
/* commerce.js adds one less / one more buttons (same stepper as the product page); without JS the plain number field stays */
.px-commerce .woocommerce .quantity.has-stepper .qty {
	width: 3.25rem;
	-moz-appearance: textfield;
	appearance: textfield;
}
.px-commerce .woocommerce .quantity.has-stepper .qty::-webkit-inner-spin-button,
.px-commerce .woocommerce .quantity.has-stepper .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.px-commerce .woocommerce .quantity .px-qty__btn {
	width: 2.75rem;
	min-height: 3.25rem;
	padding: 0;
	border: 0;
	border-bottom: 2px solid var(--px-ink);
	border-radius: 0;
	background: var(--px-pale);
	color: var(--px-ink);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--px-dur) var(--px-ease), color var(--px-dur) var(--px-ease);
}
.px-commerce .woocommerce .quantity .px-qty__btn:hover { background: var(--px-ink); color: var(--px-paper); }
.px-commerce .woocommerce .quantity :is(.qty, .px-qty__btn):focus-visible { outline: 3px solid var(--px-red); outline-offset: 2px; position: relative; }
.px-qty-locked { display: inline-flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; }
.px-qty-locked__n { font-weight: 700; font-size: 1.125rem; }
.px-qty-locked__note { font-size: var(--px-text-sm); color: var(--px-grey); }

/* Remove: a plain grey cross, red on hover, 44px target */
.px-commerce .woocommerce a.remove {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: -0.5rem 0 0 -0.5rem;
	color: var(--px-grey);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: color var(--px-dur) var(--px-ease);
}
.px-commerce .woocommerce a.remove:hover { color: var(--px-red); }

/* Notices on cart and checkout: one flat block each. Error red, message pale, info mustard. */
.px-commerce .woocommerce :where(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	list-style: none;
	margin: 0 0 var(--px-space-3);
	padding: var(--px-space-3) var(--px-space-4);
	border: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}
.px-commerce .woocommerce :where(.woocommerce-error, .woocommerce-message, .woocommerce-info)::after { content: ""; display: block; clear: both; }
.px-commerce .woocommerce :where(.woocommerce-error, .woocommerce-message, .woocommerce-info) li { margin: 0; }
.px-commerce .woocommerce :where(.woocommerce-error, .woocommerce-message, .woocommerce-info) li + li { margin-top: var(--px-space-2); }
.px-commerce .woocommerce .woocommerce-error { background: var(--px-red); color: var(--px-paper); }
.px-commerce .woocommerce .woocommerce-message { background: var(--px-pale); color: var(--px-ink); }
.px-commerce .woocommerce .woocommerce-info { background: var(--px-mustard); color: var(--px-ink); }
.px-commerce .woocommerce .woocommerce-error a { color: var(--px-paper); }
.px-commerce .woocommerce .woocommerce-error a:hover { color: var(--px-paper); text-decoration-thickness: 3px; }
.px-commerce .woocommerce .woocommerce-error :focus-visible { outline-color: var(--px-paper); }
.px-commerce .woocommerce :where(.woocommerce-message, .woocommerce-info) a { color: var(--px-ink); }
.px-commerce .woocommerce :where(.woocommerce-message, .woocommerce-info) :focus-visible { outline-color: var(--px-ink); }
.px-commerce .woocommerce :where(.woocommerce-error, .woocommerce-message, .woocommerce-info) .button {
	float: right;
	min-height: 2.25rem;
	margin: -0.3rem 0 -0.3rem var(--px-space-3);
	padding: 0.45rem 0.8rem 0.3rem;
	border-color: currentColor;
	color: inherit;
	font-size: 1.0625rem;
}
.px-commerce .woocommerce .woocommerce-error .button:hover { background: var(--px-paper); border-color: var(--px-paper); color: var(--px-ink); }

/* Ajax overlay: flat paper veil */
.px-commerce .blockUI.blockOverlay { background: var(--px-paper) !important; opacity: 0.6 !important; }

/* Destination picker outside the header (header variant lives in 20-chrome.css) */
.px-cart .px-country-picker,
.px-restricted .px-country-picker,
.px-checkout .px-country-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--px-space-2);
	margin: 0;
}
.px-cart .px-country-picker__label,
.px-restricted .px-country-picker__label {
	flex: 1 0 100%;
	color: var(--px-grey);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.px-cart .px-country-picker__select,
.px-restricted .px-country-picker__select { flex: 1 1 12rem; width: auto; min-width: 0; }
.px-cart .px-country-picker__submit,
.px-restricted .px-country-picker__submit {
	min-height: 3rem;
	padding: 0.65rem 1.1rem 0.5rem;
	border: 2px solid var(--px-ink);
	border-radius: var(--px-radius);
	background: var(--px-ink);
	color: var(--px-paper);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--px-dur) var(--px-ease), color var(--px-dur) var(--px-ease), border-color var(--px-dur) var(--px-ease);
}
.px-cart .px-country-picker__submit:hover { background: var(--px-green); border-color: var(--px-green); }
.px-cart .px-country-picker.is-dirty .px-country-picker__submit,
.px-restricted .px-country-picker.is-dirty .px-country-picker__submit { background: var(--px-mustard); border-color: var(--px-mustard); color: var(--px-ink); }

/* ==========================================================================
   1. Cart
   ========================================================================== */

.px-cart { display: grid; gap: var(--px-space-5); }

/* Destination line: code chip, plain sentence, picker */
.px-cart__dest {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--px-space-3) var(--px-space-5);
}
.px-cart__dest-line { display: flex; align-items: center; gap: var(--px-space-3); margin: 0; flex: 1 1 18rem; }
.px-cart__dest-code,
.px-checkout__dest-code { flex: none; }
.px-cart__dest-text { font-weight: 600; font-size: var(--px-text-lg); line-height: 1.35; }
.px-cart__dest .px-country-picker { flex: 0 1 24rem; }

.px-cart__grid { display: grid; gap: var(--px-space-6); align-items: start; }
.px-cart__form { min-width: 0; }

@media (min-width: 64rem) {
	.px-cart__grid { grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); gap: var(--px-space-6); }
	.px-cart__aside { position: sticky; top: var(--px-space-4); }
}

/* Cart table: grey heads over a 2px ink rule, pale hairlines between lines */
.px-cart__table { width: 100%; border-collapse: collapse; }
.px-cart__table thead th {
	padding: 0 var(--px-space-2) var(--px-space-2);
	border-bottom: var(--px-rule);
	color: var(--px-grey);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
}
.px-cart__table :where(td, th[scope="rowgroup"]) {
	padding: var(--px-space-4) var(--px-space-2);
	border-bottom: var(--px-hairline);
	vertical-align: top;
	text-align: left;
}
.px-cart__table :where(.product-price, .product-subtotal) { text-align: right; white-space: nowrap; }
.px-cart__table thead :where(.product-price, .product-subtotal) { text-align: right; }
.px-cart__table .product-remove { width: 2.75rem; padding-inline: 0; }
.px-cart__table .product-thumbnail { width: 6.5rem; }
.px-cart__table .product-thumbnail img { display: block; width: 5rem; height: 6.25rem; object-fit: cover; background: var(--px-pale); }
.px-cart__table td.product-name { font-weight: 700; font-size: var(--px-text-lg); line-height: 1.3; }
.px-cart__table .product-name a { color: var(--px-ink); text-decoration: none; }
.px-cart__table .product-name a:hover { color: var(--px-red); }
.px-cart__table td.product-price { font-size: var(--px-text-base); }
.px-cart__table .product-subtotal .amount { font-family: var(--px-font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; }

.px-line-vat {
	display: block;
	color: var(--px-grey);
	font-weight: 600;
	font-size: var(--px-text-sm);
	letter-spacing: 0.02em;
}
.px-line-vat { margin-top: 0.2rem; font-weight: 400; }

.px-commerce .woocommerce dl.variation { margin: var(--px-space-2) 0 0; font-size: var(--px-text-sm); font-weight: 400; }
.px-commerce .woocommerce dl.variation :where(dt, dd) { display: inline; margin: 0; }
.px-commerce .woocommerce dl.variation dd p { display: inline; margin: 0; }

/* Box header row: a sign across the table (red label, code chip, condensed name) */
.px-cart__table .px-box-head :where(td, th) { padding-top: var(--px-space-5); border-top: var(--px-rule); border-bottom: 0; }
.px-cart__table tbody > .px-box-head:first-child :where(td, th) { border-top: 0; padding-top: var(--px-space-4); }
.px-box-head__name { font-weight: 400; }
.px-box-head__eyebrow {
	display: block;
	margin-bottom: var(--px-space-2);
	color: var(--px-red);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.px-box-head__code { margin-right: var(--px-space-2); vertical-align: 0.3rem; }
.px-box-head__title {
	display: inline;
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h3);
	line-height: 0.95;
	text-transform: uppercase;
}
.px-box-head__note { display: block; margin-top: var(--px-space-2); color: var(--px-grey); font-size: var(--px-text-sm); }
.px-box-head .product-subtotal .amount { font-family: var(--px-font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; }

.px-cart__table .px-box-line > td:first-child { border-left: 6px solid var(--px-pale); }
.px-box-tag {
	display: block;
	margin: var(--px-space-1) 0 0;
	color: var(--px-grey);
	font-weight: 600;
	font-size: var(--px-text-sm);
	line-height: 1.4;
}
span.px-box-tag { display: block; }

/* Lines that cannot ship */
.px-commerce .px-line-restricted :where(td, .product-name, .product-name a, .amount) { color: var(--px-grey); }
.px-commerce .px-line-restricted .product-thumbnail img { filter: grayscale(1); opacity: 0.55; }
.px-line-restricted__tag {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: var(--px-space-2) 0 0;
	color: var(--px-red);
	font-weight: 600;
	font-size: var(--px-text-sm);
	line-height: 1.45;
}
.px-commerce .px-line-restricted .px-line-restricted__tag { color: var(--px-red); }
.px-line-restricted__code {
	flex: none;
	padding: 0.2em 0.4em 0.1em;
	background: var(--px-red);
	color: var(--px-paper);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.04em;
}

/* Actions row */
.px-cart__table td.actions { padding-block: var(--px-space-4) 0; border-bottom: 0; }
.px-cart__table td.actions::after { content: ""; display: block; clear: both; }
.px-cart__table td.actions .coupon { display: flex; flex-wrap: wrap; gap: var(--px-space-2); float: left; width: min(100%, 26rem); }
.px-cart__table td.actions .coupon .input-text { flex: 1 1 10rem; width: auto; }
.px-cart__table td.actions > button[name="update_cart"] { float: right; }

/* Restricted panel: one red field, paper type */
.px-restricted {
	margin: 0;
	padding: var(--px-space-4) clamp(1rem, 3vw, 2.5rem);
	background: var(--px-red);
	color: var(--px-paper);
}
.px-restricted :focus-visible { outline-color: var(--px-paper); }
.px-restricted__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--px-space-2);
	margin: 0;
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.px-restricted__code {
	padding: 0.25em 0.4em 0.15em;
	background: var(--px-paper);
	color: var(--px-red);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1;
	letter-spacing: 0.04em;
}
.px-restricted__title {
	margin: var(--px-space-3) 0 var(--px-space-3);
	color: var(--px-paper);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h3);
	line-height: 0.95;
	text-transform: uppercase;
}
.px-restricted__why { margin: 0 0 var(--px-space-3); max-width: 48rem; font-size: var(--px-text-lg); line-height: 1.45; }
.px-restricted__list { margin: 0; padding-left: 1.1rem; max-width: 48rem; }
.px-restricted__list li + li { margin-top: var(--px-space-2); }
.px-restricted__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--px-space-3) var(--px-space-4);
	margin-top: var(--px-space-4);
}
.px-restricted__remove {
	display: inline-flex;
	align-items: center;
	min-height: 3.25rem;
	padding: 0.9rem 1.4rem 0.7rem;
	border-radius: var(--px-radius);
	background: var(--px-paper);
	color: var(--px-ink);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--px-dur) var(--px-ease), color var(--px-dur) var(--px-ease);
}
.px-restricted__remove:hover { background: var(--px-mustard); color: var(--px-ink); text-decoration: none; }
.px-restricted__alt { margin: 0; font-weight: 600; color: var(--px-paper); }
.px-restricted .px-country-picker { flex: 1 1 18rem; }
.px-restricted .px-country-picker__label { color: var(--px-paper); }
.px-restricted .px-country-picker__submit:hover { background: var(--px-paper); border-color: var(--px-paper); color: var(--px-ink); }

.px-proceed-blocked {
	margin: 0;
	padding: var(--px-space-3);
	background: var(--px-red);
	color: var(--px-paper);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

/* ==========================================================================
   2. Receipt: cart totals and checkout order summary
   A grocer's receipt: pale slip, red top edge, dashed rules, totals to the right.
   ========================================================================== */

.px-receipt {
	border-top: 6px solid var(--px-red);
	background: var(--px-pale);
	color: var(--px-ink);
	padding: var(--px-space-4) var(--px-space-4) var(--px-space-4);
}
.px-receipt :focus-visible { outline-color: var(--px-ink); }
.px-receipt__title {
	margin: 0 0 var(--px-space-3);
	padding-bottom: var(--px-space-3);
	border-bottom: 2px dashed var(--px-ink);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h3);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--px-ink);
}
.px-receipt__eyebrow {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--px-red); /* 3.88 on pale: display 22px 800 counts as large text */
	font-size: var(--px-h4);
	letter-spacing: 0.14em;
}

.px-commerce .woocommerce .px-receipt table:where(.shop_table, .woocommerce-checkout-review-order-table) {
	width: 100%;
	border-collapse: collapse;
}
.px-commerce .woocommerce .px-receipt table :where(th, td) {
	padding: 0.625rem 0;
	border: 0;
	background: transparent;
	text-align: left;
	vertical-align: top;
	font-size: 1rem;
	line-height: 1.4;
}
.px-commerce .woocommerce .px-receipt table tr { border-bottom: 1px dashed var(--px-grey); }
.px-commerce .woocommerce .px-receipt table tr:last-child { border-bottom: 0; }
.px-commerce .woocommerce .px-receipt table th { font-weight: 600; padding-right: var(--px-space-3); }
.px-commerce .woocommerce .px-receipt table td:last-child:not([colspan]) { text-align: right; }
.px-commerce .woocommerce .px-receipt table td::before { content: none; }

.px-commerce .woocommerce .px-receipt .tax-rate :where(th, td) {
	padding-block: 0.375rem;
	color: var(--px-grey);
	font-weight: 400;
	font-size: var(--px-text-sm);
}

/* Total: the big number of the slip */
.px-commerce .woocommerce .px-receipt table tr.order-total { border-top: 2px dashed var(--px-ink); border-bottom: 2px dashed var(--px-ink); }
.px-commerce .woocommerce .px-receipt .order-total :where(th, td) {
	padding-block: var(--px-space-3);
	vertical-align: baseline;
}
.px-commerce .woocommerce .px-receipt .order-total th {
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.px-commerce .woocommerce .px-receipt .order-total td > strong > .amount,
.px-commerce .woocommerce .px-receipt .order-total td > .amount,
.px-commerce .woocommerce .px-receipt .order-total td strong .amount {
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 3rem;
	line-height: 0.9;
	letter-spacing: 0.01em;
}
.px-commerce .woocommerce .px-receipt .order-total :where(small, .includes_tax) {
	display: block;
	margin-top: var(--px-space-2);
	color: var(--px-ink);
	font-weight: 400;
	font-size: var(--px-text-sm);
	line-height: 1.4;
}
.px-commerce .woocommerce .px-receipt .order-total .includes_tax .amount { font-family: var(--px-font-text); font-size: var(--px-text-sm); font-weight: 600; }

.px-commerce .woocommerce .px-receipt .wc-proceed-to-checkout { margin-top: var(--px-space-4); display: grid; gap: var(--px-space-3); }

/* Shipping methods */
.px-commerce .woocommerce ul#shipping_method,
.px-commerce .woocommerce ul.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: left; }
.px-commerce .woocommerce #shipping_method li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin: 0 0 var(--px-space-2); }
.px-commerce .woocommerce #shipping_method li:last-child { margin-bottom: 0; }
.px-commerce .woocommerce #shipping_method label { flex: 1 1 0; font-weight: 600; font-size: 1rem; }
.px-ship-days { display: block; color: var(--px-grey); font-weight: 400; font-size: var(--px-text-sm); }
.px-commerce .woocommerce .woocommerce-shipping-totals td { text-align: left !important; }
.px-commerce .woocommerce .woocommerce-shipping-destination { margin: var(--px-space-2) 0 0; color: var(--px-grey); font-size: var(--px-text-sm); }
.px-commerce .woocommerce .woocommerce-shipping-destination strong { color: var(--px-ink); }
.px-commerce .woocommerce .shipping-calculator-button { display: inline-block; margin-top: var(--px-space-2); color: var(--px-green); font-size: var(--px-text-sm); font-weight: 700; }
.px-commerce .woocommerce .shipping-calculator-form { display: grid; gap: var(--px-space-2); margin-top: var(--px-space-3); }
.px-commerce .woocommerce .shipping-calculator-form p { margin: 0; }

/* Free shipping progress */
.px-commerce .woocommerce .px-receipt .px-freeship-row td { padding-block: var(--px-space-3); }
.px-freeship { display: grid; gap: var(--px-space-2); }
.px-freeship__msg { margin: 0; font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.px-freeship__track { position: relative; height: 0.625rem; background: var(--px-paper); overflow: hidden; }
.px-freeship__fill { position: absolute; inset: 0 auto 0 0; background: var(--px-green); transition: width 240ms var(--px-ease); }

/* VAT and duties note: the small print at the foot of the slip */
.px-commerce .woocommerce .px-receipt .px-vat-note td { padding-block: var(--px-space-3) 0; border-bottom: 0; }
.px-vat-note__title { margin: 0 0 var(--px-space-1); font-weight: 700; font-size: var(--px-text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.px-vat-note__lines { margin: 0; padding-left: 1rem; color: var(--px-ink); font-size: var(--px-text-sm); line-height: 1.5; }
.px-vat-note__lines li + li { margin-top: 0.2rem; }

/* Cross-sells under the cart */
.px-commerce .woocommerce .cross-sells { margin-top: var(--px-space-6); }
.px-commerce .woocommerce .cross-sells > h2 { font-size: var(--px-h3); }

/* Empty cart */
.px-commerce .woocommerce .wc-empty-cart-message .cart-empty {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--px-ink);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h3);
	line-height: 0.95;
	text-transform: uppercase;
}
.px-commerce .woocommerce .return-to-shop { margin-top: var(--px-space-4); }

/* Cart table on phones: each line becomes a stacked row */
@media (max-width: 47.99rem) {
	.px-cart__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.px-cart__table,
	.px-cart__table tbody { display: block; }
	.px-cart__table tbody { border-top: var(--px-rule); }
	.px-cart__table tr.cart_item,
	.px-cart__table tr.px-box-head {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr) auto;
		column-gap: var(--px-space-3);
		row-gap: var(--px-space-2);
		padding: var(--px-space-4) 0;
		border-bottom: var(--px-hairline);
	}
	.px-cart__table tr.px-box-head { border-top: var(--px-rule); border-bottom: 0; padding-bottom: 0; }
	.px-cart__table tbody > tr.px-box-head:first-child { border-top: 0; }
	.px-cart__table tr :where(td, th[scope="rowgroup"]) { display: block; padding: 0 !important; border: 0 !important; text-align: left; background: transparent; }
	.px-cart__table tr.cart_item .product-thumbnail { grid-column: 1; grid-row: 1 / span 2; width: auto; }
	.px-cart__table tr.cart_item .product-thumbnail img { width: 4.5rem; height: 5.625rem; }
	.px-cart__table tr.cart_item .product-name { grid-column: 2; grid-row: 1; font-size: var(--px-text-base); }
	.px-cart__table tr.cart_item .product-remove { grid-column: 3; grid-row: 1; width: auto; }
	.px-cart__table tr.cart_item .product-remove a.remove { margin: -0.6rem -0.6rem 0 0; }
	.px-cart__table tr.cart_item .product-price { grid-column: 2 / span 2; grid-row: 2; }
	.px-cart__table tr.cart_item .product-quantity { grid-column: 1 / span 2; grid-row: 3; }
	.px-cart__table tr.cart_item .product-subtotal { grid-column: 3; grid-row: 3; text-align: right; align-self: end; }

	.px-cart__table tr.px-box-head .px-box-head__name { grid-column: 1 / span 2; grid-row: 1; }
	.px-cart__table tr.px-box-head .product-remove { grid-column: 3; grid-row: 1; width: auto; }
	.px-cart__table tr.px-box-head .product-remove a.remove { margin: -0.6rem -0.6rem 0 0; }
	.px-cart__table tr.px-box-head .product-price { grid-column: 1 / span 3; grid-row: 2; }
	.px-cart__table tr.px-box-head .product-quantity { grid-column: 1 / span 2; grid-row: 3; }
	.px-cart__table tr.px-box-head .product-subtotal { grid-column: 3; grid-row: 3; text-align: right; align-self: end; }

	.px-cart__table tr :where(.product-price, .product-quantity, .product-subtotal)::before {
		content: attr(data-title);
		display: block;
		margin-bottom: 0.2rem;
		color: var(--px-grey);
		font-weight: 700;
		font-size: var(--px-text-sm);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.px-cart__table tr.cart_item .product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--px-space-2); }
	.px-cart__table tr.cart_item .product-price::before { flex: 1 0 100%; }

	.px-cart__table tr.px-box-line { padding-left: var(--px-space-3); border-left: 6px solid var(--px-pale); }
	.px-cart__table .px-box-line > td:first-child { border-left: 0 !important; }

	.px-cart__table tr.px-cart__actions-row { display: block; }
	.px-cart__table td.actions { display: grid !important; gap: var(--px-space-3); padding: var(--px-space-4) 0 0 !important; }
	.px-cart__table td.actions::after { content: none; }
	.px-cart__table td.actions .coupon { float: none; width: 100%; }
	.px-cart__table td.actions > button[name="update_cart"] { float: none; width: 100%; }
}

/* ==========================================================================
   3. Checkout
   ========================================================================== */

.px-commerce .woocommerce form.px-checkout { margin-top: var(--px-space-5); }
.px-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "details" "summary" "pay";
	gap: var(--px-space-6);
}
.px-checkout__details { grid-area: details; min-width: 0; }
.px-checkout__summary { grid-area: summary; min-width: 0; }
.px-checkout__pay { grid-area: pay; min-width: 0; }

@media (min-width: 64rem) {
	.px-checkout__grid {
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
		grid-template-rows: auto 1fr;
		grid-template-areas: "details summary" "pay summary";
		column-gap: var(--px-space-6);
		row-gap: var(--px-space-6);
	}
	.px-checkout__summary { align-self: start; position: sticky; top: var(--px-space-4); }
}

.px-checkout__dest {
	display: flex;
	align-items: center;
	gap: var(--px-space-3);
	margin: 0 0 var(--px-space-5);
	font-weight: 600;
	line-height: 1.4;
}

.px-checkout__customer { display: grid; gap: var(--px-space-6); }
.px-step { min-width: 0; }
.px-step__index {
	display: flex;
	align-items: baseline;
	gap: var(--px-space-2);
	margin: 0 0 var(--px-space-2);
	color: var(--px-grey);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.px-step__n {
	color: var(--px-red);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h4);
	line-height: 1;
	letter-spacing: 0.08em;
}

.px-checkout :where(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) > h3,
.px-checkout__pay-title {
	margin: 0 0 var(--px-space-4);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h3);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--px-ink);
}
.px-checkout #ship-to-different-address {
	margin: 0;
	padding-block: var(--px-space-3);
	border-block: var(--px-hairline);
	font-family: var(--px-font-text);
	font-weight: 600;
	font-size: var(--px-text-lg);
	line-height: 1.3;
	text-transform: none;
}
.px-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--px-space-3);
	font: inherit;
	cursor: pointer;
}
.px-checkout #ship-to-different-address input { width: 1.35rem; height: 1.35rem; flex: none; margin: 0; }

/* Field grid */
.px-checkout :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-account-fields .create-account) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--px-space-4) var(--px-space-3);
}
@media (min-width: 40rem) {
	.px-checkout :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.px-checkout :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row { grid-column: 1 / -1; }
	.px-checkout :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row-first { grid-column: 1; }
	.px-checkout :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row-last { grid-column: 2; }
}
.px-commerce .woocommerce .form-row { margin: 0; padding: 0; }
.px-commerce .woocommerce .form-row label:not(.checkbox, .woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.9375rem;
}
.px-commerce .woocommerce .form-row .required { color: var(--px-red); text-decoration: none; border: 0; font-weight: 700; }
.px-commerce .woocommerce .form-row .optional { color: var(--px-grey); font-weight: 400; font-size: var(--px-text-sm); }
.px-commerce .woocommerce .woocommerce-input-wrapper { display: block; }
.px-commerce .woocommerce .form-row .description {
	display: block;
	margin-top: 0.35rem;
	color: var(--px-grey);
	font-size: var(--px-text-sm);
	line-height: 1.4;
}
.px-commerce .woocommerce :where(label.checkbox, .woocommerce-form__label-for-checkbox) {
	display: flex;
	align-items: flex-start;
	gap: var(--px-space-2);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.45;
	cursor: pointer;
}
.px-commerce .woocommerce :where(label.checkbox, .woocommerce-form__label-for-checkbox) input { flex: none; margin-top: 0.15rem; }
.px-checkout .woocommerce-account-fields { margin-top: var(--px-space-4); }
.px-checkout .woocommerce-account-fields .create-account { margin-top: var(--px-space-3); }
.px-checkout .shipping_address { margin-top: var(--px-space-4); }
.px-checkout .woocommerce-additional-fields:empty { display: none; }

/* select2 / selectWoo: same field as base inputs */
.px-commerce .woocommerce .select2-container { width: 100% !important; }
.px-commerce .woocommerce .select2-container .select2-selection--single {
	height: 3rem;
	border: 1px solid var(--px-grey);
	border-bottom: 2px solid var(--px-ink);
	border-radius: 0;
	background: var(--px-paper);
}
.px-commerce .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 2.5rem 0 0.85rem;
	line-height: 2.85rem;
	color: var(--px-ink);
	font-size: var(--px-text-base);
}
.px-commerce .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 0; right: 0.5rem; height: 2.85rem; }
.px-commerce .woocommerce .select2-container .select2-selection--single .select2-selection__arrow b { border-top-color: var(--px-ink); }
.px-commerce .woocommerce .select2-container--focus .select2-selection,
.px-commerce .woocommerce .select2-container--open .select2-selection { outline: 3px solid var(--px-red); outline-offset: 2px; }
body.px-commerce .select2-dropdown {
	border: 1px solid var(--px-ink);
	border-radius: 0;
	background: var(--px-paper);
	color: var(--px-ink);
}
body.px-commerce .select2-search--dropdown .select2-search__field { min-height: 2.75rem; border: 1px solid var(--px-grey); border-bottom: 2px solid var(--px-ink); border-radius: 0; background: var(--px-paper); }
body.px-commerce .select2-results__option { padding: 0.55rem 0.85rem; font-size: 1rem; }
body.px-commerce .select2-container--default .select2-results__option--highlighted[aria-selected],
body.px-commerce .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--px-green); color: var(--px-paper); }
body.px-commerce .select2-container--default .select2-results__option[aria-selected="true"],
body.px-commerce .select2-container--default .select2-results__option[data-selected="true"] { background: var(--px-pale); color: var(--px-ink); }

/* Login and coupon toggles above the form: quiet lines, no blocks */
.px-commerce .woocommerce :where(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) .woocommerce-info {
	margin: 0;
	padding: var(--px-space-3) 0;
	background: transparent;
	border-bottom: var(--px-hairline);
	font-weight: 400;
}
.px-commerce .woocommerce .woocommerce-form-login-toggle + .woocommerce-form-coupon-toggle .woocommerce-info { padding-top: var(--px-space-3); }
.px-commerce .woocommerce :where(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) .woocommerce-info a { color: var(--px-green); font-weight: 700; }
.px-commerce .woocommerce :where(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) .woocommerce-info a:hover { color: var(--px-red); }
.px-commerce .woocommerce :where(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) + :where(form, .woocommerce-form-coupon-toggle, .woocommerce-notices-wrapper) { margin-top: 0; }
.px-commerce .woocommerce :where(form.checkout_coupon, form.woocommerce-form-login) {
	display: grid;
	gap: var(--px-space-3);
	margin: var(--px-space-3) 0 var(--px-space-4);
	padding: var(--px-space-4);
	background: var(--px-pale);
	border: 0;
}
.px-commerce .woocommerce form.checkout_coupon { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.px-commerce .woocommerce form.checkout_coupon > p:not(.form-row) { grid-column: 1 / -1; margin: 0; }
.px-commerce .woocommerce :where(form.checkout_coupon, form.woocommerce-form-login) .clear { display: none; }
.px-commerce .woocommerce :where(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle):last-of-type { margin-bottom: var(--px-space-5); }

/* Review table inside the receipt */
.px-commerce .woocommerce .px-receipt .woocommerce-checkout-review-order-table thead th {
	padding-block: 0 var(--px-space-2);
	color: var(--px-grey);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.px-commerce .woocommerce .px-receipt .woocommerce-checkout-review-order-table thead th:last-child { text-align: right; }
.px-checkout .woocommerce-checkout-review-order-table .cart_item .product-name { font-weight: 600; line-height: 1.35; }
.px-checkout .woocommerce-checkout-review-order-table .product-quantity { color: var(--px-grey); font-weight: 600; font-size: var(--px-text-sm); }
.px-checkout .woocommerce-checkout-review-order-table .cart_item .product-total { width: 1%; white-space: nowrap; }
.px-commerce .woocommerce .px-receipt .woocommerce-shipping-totals th { width: 1%; white-space: nowrap; }
.px-checkout .woocommerce-checkout-review-order-table .product-name .px-box-tag { margin-top: 0.125rem; }
.px-commerce .woocommerce .px-receipt .woocommerce-checkout-review-order-table tr.cart-subtotal { border-top: 2px dashed var(--px-ink); }

.px-commerce .woocommerce .px-receipt .px-review-restricted td { padding: var(--px-space-3); background: var(--px-red); color: var(--px-paper); border-bottom: 0; }
.px-review-restricted__title { margin: 0 0 var(--px-space-2); font-weight: 700; font-size: var(--px-text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.px-review-restricted ul { margin: 0; padding-left: 1rem; font-size: var(--px-text-sm); line-height: 1.45; }
.px-review-restricted li + li { margin-top: 0.3rem; }

/* Payment */
.px-checkout #payment { background: transparent; }
.px-checkout #payment ul.wc_payment_methods { list-style: none; margin: 0 0 var(--px-space-4); padding: 0; border-top: var(--px-rule); }
.px-checkout #payment ul.wc_payment_methods > li { padding: var(--px-space-3) 0; border-bottom: var(--px-hairline); }
.px-checkout #payment ul.wc_payment_methods > li > label { display: inline; margin-left: var(--px-space-2); font-weight: 700; font-size: var(--px-text-lg); cursor: pointer; }
.px-checkout #payment ul.wc_payment_methods > li > input { width: 1.25rem; height: 1.25rem; vertical-align: -0.2em; }
.px-checkout #payment ul.wc_payment_methods > li img { display: inline-block; max-height: 1.5rem; margin-left: var(--px-space-2); vertical-align: middle; }
.px-checkout #payment .payment_box {
	margin: var(--px-space-3) 0 0;
	padding: var(--px-space-3) var(--px-space-4);
	background: var(--px-pale);
	color: var(--px-ink);
	font-size: 1rem;
	line-height: 1.5;
}
.px-checkout #payment .payment_box p { margin: 0; }
.px-checkout #payment .payment_box p + p { margin-top: var(--px-space-2); }
.px-checkout #payment .woocommerce-notice--info,
.px-checkout #payment .woocommerce-info { margin: 0; }
.px-checkout #payment .place-order { display: grid; gap: var(--px-space-4); margin: 0; }
.px-checkout .woocommerce-privacy-policy-text { color: var(--px-grey); font-size: var(--px-text-sm); line-height: 1.5; }
.px-checkout .woocommerce-privacy-policy-text p { margin: 0; }
.px-checkout .woocommerce-privacy-policy-text a { color: var(--px-green); font-weight: 700; }
.px-checkout .woocommerce-terms-and-conditions-wrapper { display: grid; gap: var(--px-space-3); }
.px-checkout .woocommerce-terms-and-conditions {
	max-height: 14rem;
	overflow: auto;
	padding: var(--px-space-3);
	background: var(--px-pale);
	font-size: var(--px-text-sm);
}
.px-checkout .woocommerce-terms-and-conditions-checkbox-text { font-weight: 600; }
.px-checkout .woocommerce-terms-and-conditions-link { color: var(--px-green); font-weight: 700; }
@media (min-width: 64rem) {
	.px-checkout #payment .place-order #place_order { max-width: 24rem; justify-self: start; }
}

/* Order received */
.px-commerce .woocommerce .woocommerce-order { display: grid; gap: var(--px-space-5); }
.px-commerce .woocommerce .woocommerce-thankyou-order-received {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--px-ink);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h3);
	line-height: 0.95;
	text-transform: uppercase;
}
.px-commerce .woocommerce ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0 var(--px-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--px-rule);
}
.px-commerce .woocommerce ul.woocommerce-order-overview li {
	padding: var(--px-space-3) 0;
	border-bottom: var(--px-hairline);
	color: var(--px-grey);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.px-commerce .woocommerce ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.25rem;
	color: var(--px-ink);
	font-weight: 700;
	font-size: var(--px-text-base);
	letter-spacing: 0;
	text-transform: none;
}
.px-commerce .woocommerce :where(.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-bacs-bank-details) > h2 {
	margin: 0 0 var(--px-space-3);
	font-size: var(--px-h3);
}
.px-commerce .woocommerce table.woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.px-commerce .woocommerce table.woocommerce-table--order-details thead th { padding: 0 var(--px-space-2) var(--px-space-2) 0; border-bottom: var(--px-rule); color: var(--px-grey); font-weight: 700; font-size: var(--px-text-sm); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; }
.px-commerce .woocommerce table.woocommerce-table--order-details :where(tbody, tfoot) :where(th, td) { padding: 0.75rem var(--px-space-2) 0.75rem 0; border-bottom: var(--px-hairline); text-align: left; }
.px-commerce .woocommerce table.woocommerce-table--order-details :where(tfoot td, .product-total) { text-align: right; }
.px-commerce .woocommerce table.woocommerce-table--order-details thead th:last-child { text-align: right; }
.px-commerce .woocommerce table.woocommerce-table--order-details tfoot th { font-weight: 600; }
.px-commerce .woocommerce table.woocommerce-table--order-details tfoot tr:last-child :where(th, td) { border-bottom: 0; }
.px-commerce .woocommerce :where(ul.wc-item-meta) { list-style: none; margin: 0.25rem 0 0; padding: 0; color: var(--px-grey); font-size: var(--px-text-sm); }
.px-commerce .woocommerce :where(ul.wc-item-meta) :where(li, strong, p) { display: inline; margin: 0; font-weight: 600; }
.px-commerce .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--px-space-5); }
.px-commerce .woocommerce .woocommerce-customer-details :where(h2, .woocommerce-column__title) { margin: 0 0 var(--px-space-3); font-size: var(--px-h3); line-height: 0.95; }
.px-commerce .woocommerce .woocommerce-customer-details address { padding: var(--px-space-3) 0 0; border-top: var(--px-rule); font-style: normal; line-height: 1.6; }
.px-commerce .woocommerce .woocommerce-customer-details address p { margin: 0; }

/* ==========================================================================
   6. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.px-commerce .woocommerce *,
	.px-freeship__fill { transition: none !important; }
}

/* ==========================================================================
   My account (body.px-account also carries .px-commerce, so buttons, inputs, notices and form rows above apply).
   Login, lost and reset password, edit account, addresses, account navigation. Pairs: ink on paper 14.89,
   ink on mustard 8.33, green on paper 7.77, paper on ink 14.89, grey on paper 6.06 (14px min).
   ========================================================================== */

.px-account .woocommerce > h2 {
	margin: 0 0 var(--px-space-4);
	font-size: var(--px-h3);
	line-height: 1;
}

/* Forms: one calm column on the paper, no panel */
.px-account .woocommerce :where(form.woocommerce-form-login, form.woocommerce-form-register, form.lost_reset_password, form.woocommerce-EditAccountForm, .woocommerce-address-fields) {
	display: grid;
	gap: var(--px-space-4);
	max-width: 32rem;
	margin: 0 0 var(--px-space-5);
	padding: 0;
	background: transparent;
	border: 0;
}
.px-account .woocommerce form.woocommerce-EditAccountForm,
.px-account .woocommerce .woocommerce-address-fields { max-width: 40rem; }
.px-account .woocommerce :where(form.lost_reset_password, form.woocommerce-EditAccountForm) > p:not(.form-row) { margin: 0; line-height: 1.5; }
.px-account .woocommerce :where(form, .woocommerce-address-fields) .clear { display: none; }
.px-account .woocommerce .woocommerce-address-fields__field-wrapper { display: grid; gap: var(--px-space-4); }
.px-account .woocommerce fieldset { display: grid; gap: var(--px-space-4); padding-top: var(--px-space-4); }
.px-account .woocommerce fieldset legend { font-family: var(--px-font-display); font-size: var(--px-h4); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.px-account .woocommerce :where(.form-row-first, .form-row-last) { width: auto; float: none; }
.px-account .woocommerce em { display: block; margin-top: 0.35rem; color: var(--px-grey); font-size: var(--px-text-sm); font-style: normal; }

/* Remember me on its own line, the button full width below it, Lost your password under the button */
.px-account .woocommerce form.woocommerce-form-login > .form-row:has(.woocommerce-form-login__submit) {
	display: grid;
	gap: var(--px-space-4);
	justify-items: stretch;
}
.px-account .woocommerce .woocommerce-form-login__rememberme { justify-self: start; }
.px-account .woocommerce .lost_password { margin: calc(var(--px-space-2) * -1) 0 0; }
.px-account .woocommerce .lost_password a { color: var(--px-green); font-weight: 700; }
.px-account .woocommerce .lost_password a:hover { color: var(--px-red); }

/* Primary actions: mustard enamel, full width */
.px-account .woocommerce :where(.woocommerce-form-login__submit, .woocommerce-form-register__submit, .lost_reset_password button[type="submit"], button[name="save_account_details"], button[name="save_address"]) {
	width: 100%;
	min-height: 3.5rem;
	padding: 1rem 1.5rem 0.8rem;
	border-color: var(--px-mustard);
	background: var(--px-mustard);
	color: var(--px-ink);
	font-size: 1.5rem;
}
.px-account .woocommerce :where(.woocommerce-form-login__submit, .woocommerce-form-register__submit, .lost_reset_password button[type="submit"], button[name="save_account_details"], button[name="save_address"]):hover {
	border-color: var(--px-ink);
	background: var(--px-ink);
	color: var(--px-mustard);
}

/* Show password: eye icon inside the field, 44px target (WooCommerce JS sets aria-label and toggles .display-password) */
.px-account .woocommerce .password-input { position: relative; display: block; }
.px-account .woocommerce .password-input input { padding-right: 3.25rem; }
.px-account .woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.125rem;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--px-radius);
	background: transparent;
	color: var(--px-ink);
	transform: translateY(-50%);
	cursor: pointer;
}
.px-account .woocommerce .show-password-input::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.375rem;
	height: 1.375rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.25'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.25'/%3E%3C/svg%3E") center / contain no-repeat;
}
.px-account .woocommerce .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.25'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.25'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
.px-account .woocommerce .show-password-input:hover { color: var(--px-green); }
.px-account .woocommerce .show-password-input:focus-visible { outline: 3px solid var(--px-red); outline-offset: -3px; }

/* Logged in: navigation as a list of shop signs, content beside it on wide screens */
.px-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; gap: var(--px-space-5); align-items: start; }
@media (min-width: 64rem) {
	.px-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 15rem minmax(0, 1fr); }
	.px-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}
.px-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: var(--px-rule); }
.px-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: var(--px-hairline); }
.px-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.8rem 0 0.6rem;
	color: var(--px-ink);
	font-family: var(--px-font-display);
	font-size: var(--px-h4);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}
.px-account .woocommerce-MyAccount-navigation a:hover { color: var(--px-red); }
.px-account .woocommerce-MyAccount-navigation .is-active a { color: var(--px-green); }
.px-account .woocommerce-MyAccount-navigation .is-active a::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 0.5rem 0.2rem 0; background: var(--px-red); }
.px-account .woocommerce-MyAccount-content { min-width: 0; }
.px-account .woocommerce-MyAccount-content > p { max-width: 44rem; line-height: 1.55; }
.px-account .woocommerce-MyAccount-content a:not(.button) { color: var(--px-green); font-weight: 700; }
.px-account .woocommerce-MyAccount-content a:not(.button):hover { color: var(--px-red); }
.px-account .woocommerce-MyAccount-content :where(table.shop_table) { width: 100%; border-collapse: collapse; }
.px-account .woocommerce-MyAccount-content :where(table.shop_table) :where(th, td) { padding: var(--px-space-3) var(--px-space-2) var(--px-space-3) 0; border-bottom: var(--px-hairline); text-align: left; vertical-align: top; }
.px-account .woocommerce-MyAccount-content :where(table.shop_table) thead th { border-bottom: var(--px-rule); font-size: var(--px-text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.px-account .woocommerce-Addresses { display: grid; gap: var(--px-space-5); }
@media (min-width: 48rem) { .px-account .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.px-account .woocommerce-Address address { font-style: normal; line-height: 1.55; }
@media (max-width: 47.99rem) {
	.px-account .woocommerce-MyAccount-content .shop_table_responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.px-account .woocommerce-MyAccount-content .shop_table_responsive :where(tr, td) { display: block; }
	.px-account .woocommerce-MyAccount-content .shop_table_responsive td { padding: var(--px-space-1) 0; border: 0; }
	.px-account .woocommerce-MyAccount-content .shop_table_responsive td::before { content: attr(data-title) ": "; font-weight: 700; }
	.px-account .woocommerce-MyAccount-content .shop_table_responsive tr { padding: var(--px-space-3) 0; border-bottom: var(--px-hairline); }
}