/* Tighter card copy at the two-up mobile size. */
@media (max-width: 639px) {
	ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h2,
	ul.products li.product h3 {
		font-size: 0.9rem !important;
	}

	ul.products li.product .price {
		font-size: var(--step-0) !important;
	}

	ul.products li.product .button,
	ul.products li.product .added_to_cart {
		padding: 10px 12px;
		font-size: 0.8rem;
	}
}

/* Shop content sits directly under the page-head band, so it needs far less
   top padding than a standalone section. */
.section--shop {
	padding-block-start: var(--space-xl);
}

/* ==========================================================================
   WooCommerce — product cards, shop, single product, cart, checkout, account
   Woo ships its own CSS; this overrides it to the navy/gold system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Explicit counts rather than auto-fill: the catalogue should not reflow to
   six narrow columns on a wide screen. */
@media (min-width: 640px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-m);
	}
}

@media (min-width: 1000px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

ul.products::before,
ul.products::after {
	display: none !important;
}

ul.products li.product,
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}

ul.products li.product:hover {
	border-color: var(--border-gold);
	transform: translateY(-3px);
	box-shadow: var(--shadow-m);
}

/* Light tile behind vial photography so white-background product shots read as intentional */
ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a:first-of-type {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Cards render outside Woo's own wrapper on the homepage, so kill inherited
   link styling explicitly rather than relying on .woocommerce scoping. */
ul.products li.product a {
	text-decoration: none;
}

ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--panel);
	padding: 0;
	margin: 0 0 var(--space-s);
	border-bottom: 1px solid var(--border);
	transition: transform 0.4s var(--ease-out);
}

ul.products li.product:hover img {
	transform: scale(1.035);
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	font-family: var(--font-body);
	font-size: var(--step-0) !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--text);
	padding: 0 var(--space-s) !important;
	margin: 0 0 6px;
}

ul.products li.product .price {
	display: block;
	padding: 0 var(--space-s);
	margin: 0 0 var(--space-s);
	color: var(--gold-600) !important;
	font-family: var(--font-body);
	font-size: var(--step-1) !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

ul.products li.product .price del {
	color: var(--text-subtle) !important;
	font-size: 0.7em;
	font-weight: 400;
	margin-inline-end: 6px;
}

ul.products li.product .price ins {
	text-decoration: none;
	background: transparent;
}

ul.products li.product .product__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 var(--space-s);
	margin-block-end: var(--space-s);
}

ul.products li.product .product__meta .badge {
	border-radius: var(--radius-s);
}

ul.products li.product .button,
ul.products li.product .added_to_cart {
	margin: auto var(--space-s) var(--space-s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 20px;
	border-radius: var(--radius-s);
	background: transparent;
	border: 1px solid var(--border-strong);
	color: var(--text);
	font-size: var(--step--1);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

ul.products li.product .button:hover {
	background: var(--gold-500);
	border-color: var(--gold-500);
	color: var(--on-accent);
}

ul.products li.product .button.loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-inline-start: 8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: vp-spin 0.7s linear infinite;
}

@keyframes vp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Sale / out-of-stock flash */
.woocommerce span.onsale,
ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	padding: 6px 12px;
	margin: 0;
	border-radius: var(--radius-s);
	background: var(--gold-500);
	color: var(--on-accent);
	font-size: var(--step--2);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.vp-stock-flag {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	border-radius: var(--radius-s);
}

/* --------------------------------------------------------------------------
   Shop toolbar
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0 0 var(--space-m);
	float: none;
}

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block-end: var(--space-s);
	margin-block-end: var(--space-l);
	border-bottom: 1px solid var(--border);
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.shop-toolbar select {
	min-height: 44px;
	width: auto;
	min-width: 200px;
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells,
	.woocommerce div.product .woocommerce-product-gallery + .summary ~ * {
		grid-column: 1 / -1;
	}
}

.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	padding: var(--space-m);
	overflow: hidden;
}

.woocommerce div.product div.images img {
	border-radius: var(--radius-m);
	mix-blend-mode: normal;
}

.woocommerce div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
	margin: var(--space-s) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product .flex-control-thumbs img {
	border: 1px solid rgb(0 0 0 / 0.08);
	border-radius: var(--radius-s);
	opacity: 0.75;
	cursor: pointer;
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--gold-500);
}

.woocommerce div.product div.summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	display: grid;
	gap: var(--space-s);
	align-content: start;
}

.woocommerce div.product .product_title {
	font-size: var(--step-3);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-body);
	font-size: var(--step-2);
	font-weight: 700;
	color: var(--gold-600);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--text-muted);
	max-width: 58ch;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: stretch;
	margin: var(--space-2xs) 0 0;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-block-end: var(--space-s);
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 6px 0;
	border: 0;
	display: block;
	width: 100%;
	text-align: left;
}

.woocommerce div.product form.cart .variations label {
	font-weight: 600;
	font-size: var(--step--1);
}

.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--surface);
}

.quantity input.qty {
	width: 74px;
	min-height: 48px;
	border: 0;
	background: transparent;
	text-align: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce div.product form.cart .button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt {
	background: var(--gold-500);
	color: var(--on-accent);
	border: 1px solid transparent;
	border-radius: var(--radius-s);
	min-height: 48px;
	padding: 13px 30px;
	font-weight: 600;
	font-size: var(--step-0);
	line-height: 1;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--gold-400);
	color: var(--on-accent);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-s);
	min-height: 48px;
	padding: 13px 26px;
	font-weight: 600;
	font-size: var(--step-0);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: rgb(12 20 38 / 0.06);
	border-color: var(--gold-500);
	color: var(--text);
}

.woocommerce div.product .product_meta {
	padding-block-start: var(--space-s);
	border-top: 1px solid var(--border);
	font-size: var(--step--1);
	color: var(--text-subtle);
	display: grid;
	gap: 6px;
}

.woocommerce div.product .product_meta a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	color: var(--text-muted);
	text-decoration: none;
}

.woocommerce div.product .stock {
	font-weight: 600;
	color: var(--success);
	margin: 0;
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--danger);
}

/* Research-use notice on product page */
.product-assurance {
	display: grid;
	gap: 10px;
	padding: var(--space-s) var(--space-m);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	background: var(--surface);
	margin-block-start: var(--space-2xs);
}

.product-assurance li {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: var(--step--1);
	color: var(--text-muted);
	list-style: none;
}

.product-assurance ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.product-assurance svg {
	width: 18px;
	height: 18px;
	color: var(--gold-600);
	flex: none;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 var(--space-m);
	padding: 0 0 var(--space-2xs);
	border-bottom: 1px solid var(--border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	border-radius: var(--radius-s);
	color: var(--text-muted) !important;
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	background: rgb(12 20 38 / 0.05);
	color: var(--text) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: var(--measure);
	color: var(--text-muted);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: var(--step-2);
	margin-block-end: var(--space-s);
}

/* Related products heading */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	font-size: var(--step-2);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin-block-end: var(--space-m);
}

/* --------------------------------------------------------------------------
   Tables — cart, order, account
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--surface-2);
	color: var(--text);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-s);
	border-color: var(--border) !important;
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	background: var(--surface-3);
}

.woocommerce table.shop_table td.product-name a {
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
}

.woocommerce table.shop_table img {
	width: 64px;
	border-radius: var(--radius-s);
	background: var(--panel);
}

.woocommerce table.shop_table .amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--text-subtle) !important;
	font-size: 20px;
	border-radius: 50%;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: var(--danger-soft);
	color: var(--danger) !important;
}

.cart-collaterals,
.woocommerce .cart-collaterals .cart_totals {
	width: 100% !important;
	float: none !important;
}

.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
	background: var(--surface-3);
}

.woocommerce .cart_totals h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
	font-size: var(--step-2);
	margin-block-end: var(--space-s);
}

@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: 1.6fr 0.9fr;
		gap: var(--space-xl);
		align-items: start;
	}

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

	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1.2fr 0.9fr;
		gap: var(--space-xl);
		align-items: start;
	}

	/* Pin the rows: without this the heading and review auto-place into later
	   rows and the summary drops below the form instead of sitting beside it. */
	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-block-start: 0;
	}

	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		position: sticky;
		top: calc(var(--header-h) + var(--space-m));
	}
}

.woocommerce .checkout .col2-set,
.woocommerce .col2-set {
	display: grid;
	gap: var(--space-m);
	width: 100%;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
}

.woocommerce form .form-row {
	display: grid;
	gap: 7px;
	margin: 0 0 var(--space-s);
	padding: 0;
	float: none !important;
	width: 100% !important;
}

.woocommerce form .form-row label {
	font-size: var(--step--1);
	font-weight: 600;
}

.woocommerce form .form-row .required {
	color: var(--gold-600);
	text-decoration: none;
}

.woocommerce-checkout #payment {
	background: var(--surface-3) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	padding: var(--space-m);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--border);
	padding: 0 0 var(--space-s);
	margin: 0 0 var(--space-s);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--surface-3) !important;
	color: var(--text-muted);
	border-radius: var(--radius-s);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: rgb(255 255 255 / 0.04) !important;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-s) var(--space-m) !important;
	margin: 0 0 var(--space-m) !important;
	background: var(--surface-2) !important;
	border: 1px solid var(--border);
	border-top: 0;
	border-left: 3px solid var(--gold-500) !important;
	border-radius: var(--radius-m);
	color: var(--text) !important;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none !important;
}

.woocommerce-message {
	border-left-color: var(--success) !important;
}

.woocommerce-error {
	border-left-color: var(--danger) !important;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
}

/* Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0;
	display: grid;
	gap: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 11px 16px;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	text-decoration: none;
	border: 1px solid transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: rgb(255 255 255 / 0.05);
	border-color: var(--border);
	color: var(--text);
}

@media (min-width: 900px) {
	.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: 100%;
	}

	.logged-in.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 260px 1fr;
		gap: var(--space-xl);
		align-items: start;
	}

	.logged-in.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}
}

/* Price filter / widgets */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background: var(--gold-500);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: var(--surface-3);
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--gold-600);
}

/* Breadcrumb from Woo — we render our own */
.woocommerce .woocommerce-breadcrumb {
	display: none;
}

/* ==========================================================================
   My Account
   Logged out: Login and Register side by side, each in its own card.
   Logged in:  navigation column beside the dashboard content.
   ========================================================================== */

/* WooCommerce adds clearfix ::before/::after to these wrappers. Harmless in a
   float layout, but in a grid they become real grid items and take the first
   cells — which pushed the Login column into column 2. */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce .woocommerce::before,
.woocommerce .woocommerce::after {
	display: none !important;
	content: none !important;
}

/* The generic .col2-set rule stacks columns; the account page wants two. */
.woocommerce-account #customer_login.col2-set {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 860px) {
	.woocommerce-account #customer_login.col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
	display: grid;
	gap: var(--space-s);
	align-content: start;
}

.woocommerce-account #customer_login h2 {
	font-size: var(--step-2);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Each form becomes a card. */
.woocommerce-account form.login,
.woocommerce-account form.register {
	display: grid;
	gap: var(--space-s);
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-s);
}

.woocommerce-account form.login .form-row,
.woocommerce-account form.register .form-row {
	margin: 0;
}

/* Submit sits inline with the remember-me checkbox, as on the reference. */
.woocommerce-account form.login .form-row-wide:has( button[name="login"] ),
.woocommerce-account form.login p.form-row:last-of-type {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
}

.woocommerce-account form.login button[name="login"],
.woocommerce-account form.register button[name="register"] {
	background: var(--gold-500);
	color: var(--on-accent);
	border: 1px solid transparent;
	border-radius: var(--radius-s);
	min-height: 48px;
	padding: 13px 30px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.woocommerce-account form.login button[name="login"]:hover,
.woocommerce-account form.register button[name="register"]:hover {
	background: var(--gold-600);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--step--1);
	color: var(--text-muted);
	cursor: pointer;
}

.woocommerce-account .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	accent-color: var(--gold-500);
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 0;
	font-size: var(--step--1);
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--gold-600);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-LostPassword a:hover {
	text-decoration: underline;
}

/* Register column explanatory copy */
.woocommerce-account form.register .woocommerce-privacy-policy-text p,
.woocommerce-account form.register > p:not(.form-row) {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: 1.55;
}

.woocommerce-account form.register .woocommerce-password-hint {
	color: var(--text-muted);
	font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Logged-in dashboard
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-left: 3px solid var(--gold-500);
	color: var(--text);
}

.woocommerce-account .woocommerce-MyAccount-content {
	color: var(--text-muted);
	line-height: 1.65;
}

.woocommerce-account .woocommerce-MyAccount-content > p {
	max-width: 62ch;
	margin-block-end: var(--space-s);
}

.woocommerce-account .woocommerce-MyAccount-content strong {
	color: var(--text);
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--gold-600);
	font-weight: 600;
}

/* ==========================================================================
   Compact checkout

   Goal: get billing, order summary and payment into one view so the customer
   is not scrolling to find the pay button. Denser fields, paired name/city
   rows, tighter rhythm — without dropping below 44px touch targets or
   shrinking input text under 16px (which makes iOS zoom on focus).
   ========================================================================== */

.woocommerce-checkout .page-head {
	padding-block: var(--space-m);
}

.woocommerce-checkout .page-head h1 {
	font-size: var(--step-2);
}

.woocommerce-checkout .page-head p {
	display: none;
}

.woocommerce-checkout .section--shop {
	padding-block: var(--space-m) var(--space-2xl);
}

.woocommerce-checkout form.checkout {
	gap: var(--space-m) var(--space-xl);
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-size: var(--step-1);
	margin-block-end: var(--space-s);
}

/* Denser fields */
.woocommerce-checkout form .form-row {
	margin-block-end: var(--space-2xs);
	gap: 4px;
}

.woocommerce-checkout form .form-row label {
	font-size: 0.8rem;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
	min-height: 44px;
	padding-block: 9px;
	/* 16px keeps iOS from zooming the viewport on focus */
	font-size: max(16px, 0.95rem);
}

.woocommerce-checkout textarea.input-text {
	min-height: 84px;
}

/* Pair the short fields so the column is not one long stack. */
@media (min-width: 560px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--space-s);
	}

	/* Full-width fields that should never be halved. */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-wide,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
	}

	/* …except these, which read fine as pairs. */
	.woocommerce-checkout #billing_country_field,
	.woocommerce-checkout #billing_state_field,
	.woocommerce-checkout #billing_city_field,
	.woocommerce-checkout #billing_postcode_field,
	.woocommerce-checkout #billing_phone_field,
	.woocommerce-checkout #billing_email_field,
	.woocommerce-checkout #shipping_country_field,
	.woocommerce-checkout #shipping_state_field,
	.woocommerce-checkout #shipping_city_field,
	.woocommerce-checkout #shipping_postcode_field {
		grid-column: span 1;
	}
}

/* Order summary: compact rows, no oversized table padding. */
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 10px var(--space-s);
	font-size: 0.95rem;
}

.woocommerce-checkout #order_review table.shop_table {
	margin-block-end: var(--space-s);
}

.woocommerce-checkout #payment {
	padding: var(--space-s);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding-block-end: var(--space-2xs);
	margin-block-end: var(--space-2xs);
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-block-end: 4px;
}

.woocommerce-checkout #payment div.payment_box {
	margin-block: 6px;
	padding: var(--space-s);
	font-size: var(--step--1);
}

.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 52px;
	margin-block-start: var(--space-2xs);
}

/* The coupon prompt is a single quiet line rather than a full-width panel. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 10px var(--space-s) !important;
	margin-block-end: var(--space-s) !important;
	font-size: var(--step--1);
}

.woocommerce-checkout .woocommerce-form-coupon {
	margin-block-end: var(--space-s);
}

/* Terms / privacy text should not dominate the summary column. */
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p {
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Checkout — payment methods
   ---------------------------------------------------------------------------
   🛑 The staging build has no payment gateways configured, so this list was never
   exercised there and never got styled: WooCommerce's `ul.payment_methods` kept the
   browser's default list bullets and the radio/label pair sat on separate lines.
   Live runs three gateways (Link Money ACH, the MPS card processor and Venmo), so the
   list is the most prominent block on the page. Client reported it 2026-08-10.

   Each method is a selectable card: the whole row is a label target, the checked row is
   marked with the gold border, and the gateway's own description panel sits inside it. */

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	padding-inline-start: 0;
	border-bottom: 0;
	display: grid;
	gap: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	margin-block-end: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	padding: 14px var(--space-s);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
	border-color: var(--border-strong);
}

/* Selected method. :has() is well supported now; the plain rule above is the fallback. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input.input-radio:checked) {
	border-color: var(--gold-500);
	box-shadow: 0 0 0 1px var(--gold-500);
}

/* Radio + label on one line, whole label clickable. WooCommerce emits the input and the
   label as siblings, so the row is laid out on the <li> rather than a wrapper. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio {
	float: none;
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	vertical-align: middle;
	accent-color: var(--gold-500);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	width: auto;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	line-height: 1.3;
}

/* Gateway logos vary wildly in size — cap them so one processor's artwork cannot
   dictate the row height. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
	max-height: 26px;
	width: auto;
	margin: 0;
	vertical-align: middle;
}

/* The description panel WooCommerce reveals under the selected method. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box {
	margin: 12px 0 0;
	padding: var(--space-s);
	background: var(--surface-2);
	border-radius: var(--radius-s);
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: 1.55;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box::before {
	display: none; /* kill WooCommerce's little callout arrow — we use a flat panel */
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box p:last-child {
	margin-block-end: 0;
}