/* =========================================================================
   MyPCB House — cart, checkout and account
   Loaded only on those three, because they are the heaviest CSS in the
   theme and nobody browsing the shop needs them.

   Guiding rule: this is where the money is. Nothing clever, nothing that
   moves, no surprises. One column on a phone, big targets, and the total
   always visible.
   ========================================================================= */

/* ---------- Shared form controls ---------------------------------------- */

.woocommerce form .form-row { display: grid; gap: 5px; margin: 0 0 var(--sp-4); }
.woocommerce form .form-row label {
	color: var(--c-text-dim);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .01em;
}
.woocommerce form .form-row label .required { color: var(--c-danger); text-decoration: none; }

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection--single {
	width: 100%;
	min-height: 50px;
	padding: var(--sp-3);
	background: var(--c-surface-2);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font: inherit;
	/* 16px keeps iOS from zooming the page when a field is focused. */
	font-size: 16px;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.woocommerce textarea { min-height: 110px; resize: vertical; }

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: var(--glow);
}
.woocommerce input::placeholder,
.woocommerce textarea::placeholder { color: var(--c-text-faint); }

/* WooCommerce's select2 dropdowns, dragged into the theme. */
.select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	border: 1px solid var(--c-line) !important;
	background: var(--c-surface-2) !important;
	border-radius: var(--r-md) !important;
	height: auto !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--c-text) !important;
	line-height: 1.4 !important;
	padding: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; }
.select2-dropdown {
	background: var(--c-surface) !important;
	border-color: var(--c-line) !important;
	color: var(--c-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--c-accent) !important;
	color: var(--c-accent-ink) !important;
}
.select2-search--dropdown .select2-search__field {
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	color: var(--c-text);
	border-radius: var(--r-sm);
}

/* Buttons WooCommerce prints for itself */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface-2);
	color: var(--c-text);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.woocommerce .button:hover { border-color: var(--c-accent); color: var(--c-accent); }

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
	font-weight: 700;
}
.woocommerce .button.alt:hover,
.woocommerce #place_order:hover { background: var(--c-accent-dim); color: var(--c-accent-ink); }
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Cart --------------------------------------------------------- */

/* The default cart is a wide table. On a phone that means a horizontal
   scrollbar over the one screen a customer must not lose confidence on, so
   below 780px every row becomes a card. */
.woocommerce-cart-form { margin-bottom: var(--sp-5); }

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.woocommerce table.shop_table th {
	padding: var(--sp-3);
	background: var(--c-surface-2);
	color: var(--c-text-faint);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: start;
	border-bottom: 1px solid var(--c-line);
}
.woocommerce table.shop_table td {
	padding: var(--sp-3);
	border-bottom: 1px dashed var(--c-line-soft);
	vertical-align: middle;
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce table.cart .product-thumbnail img {
	width: 68px; height: 68px;
	object-fit: contain;
	padding: 5px;
	background: var(--c-plate);
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-sm);
}
.woocommerce table.cart td.product-name a { color: var(--c-text); font-weight: 600; text-decoration: none; }
.woocommerce table.cart td.product-name a:hover { color: var(--c-accent); }

.woocommerce td.product-price,
.woocommerce td.product-subtotal,
.woocommerce .amount {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
}
.woocommerce td.product-subtotal { color: var(--c-copper); font-weight: 700; }

.woocommerce td.product-quantity .qty {
	width: 76px;
	min-height: 44px;
	text-align: center;
	font-family: var(--f-mono);
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: var(--r-full);
	background: var(--c-surface-3);
	color: var(--c-text-faint) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}
.woocommerce a.remove:hover { background: var(--c-danger); color: #fff !important; }

.woocommerce .actions { padding: var(--sp-3) !important; }
.woocommerce .coupon { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.woocommerce .coupon #coupon_code { flex: 1 1 160px; min-width: 0; }

/* The phone layout for cart rows now lives in the second pass below,
   where every width uses the same grid of areas. */

/* Cart totals */
.cart-collaterals { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
	.cart-collaterals { grid-template-columns: 1fr minmax(320px, 380px); align-items: start; }
	.cart-collaterals > .cross-sells { grid-column: 1; }
	.cart-collaterals > .cart_totals { grid-column: 2; }
}

.cart_totals {
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.cart_totals h2 { font-size: 1.05rem; margin-bottom: var(--sp-3); }
.cart_totals table.shop_table { border: 0; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td { background: none; padding: var(--sp-2) 0; border-bottom: 1px dashed var(--c-line-soft); }
.cart_totals table.shop_table th { text-transform: none; font-size: .8rem; letter-spacing: 0; }
.cart_totals tr.order-total th,
.cart_totals tr.order-total td { border-bottom: 0; padding-top: var(--sp-3); }
.cart_totals tr.order-total .amount { color: var(--c-copper); font-size: 1.35rem; font-weight: 700; }
.cart_totals .checkout-button { width: 100%; margin-top: var(--sp-4); }

/* ---------- Checkout ----------------------------------------------------- */

/* One column on a phone. Two on a wide screen, with the order summary
   sticky so the total never leaves the screen while the form is filled. */
.woocommerce-checkout .woocommerce { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
		/* Two explicit rows. WooCommerce prints the summary heading and the
		   summary itself as separate siblings, so without this the heading
		   takes row 1 and the summary is pushed into row 2 — which starts
		   below the whole billing form. */
		grid-template-rows: auto 1fr;
		gap: 0 var(--sp-6);
		align-items: start;
	}
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-bottom: var(--sp-4); }
	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: calc(var(--header-h) + var(--sp-4));
	}
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
	margin: 0 0 var(--sp-4);
	font-size: 1.1rem;
	letter-spacing: -.02em;
}

/* Two-up name fields on anything wider than a small phone. */
@media (min-width: 640px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { display: inline-grid; width: calc(50% - var(--sp-2)); }
	.woocommerce form .form-row-first { margin-inline-end: var(--sp-3); }
}

#order_review {
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
#order_review table.shop_table { border: 0; }
#order_review th, #order_review td {
	background: none;
	padding: var(--sp-2) 0;
	border-bottom: 1px dashed var(--c-line-soft);
}
#order_review tfoot tr.order-total th,
#order_review tfoot tr.order-total td { border-bottom: 0; padding-top: var(--sp-3); }
#order_review tfoot .order-total .amount { color: var(--c-copper); font-size: 1.35rem; font-weight: 700; }
#order_review .product-name { color: var(--c-text); font-weight: 600; font-size: .875rem; }
#order_review .product-quantity { color: var(--c-text-faint); font-family: var(--f-mono); }

/* Payment methods — PhonePe, UPI, cash on delivery */
#payment { margin-top: var(--sp-4); }
#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}
#payment ul.payment_methods > li {
	padding: var(--sp-3);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}
#payment ul.payment_methods > li:has(input:checked) { border-color: var(--c-accent); }
#payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 600;
	font-size: .925rem;
	cursor: pointer;
}
#payment ul.payment_methods img { max-height: 26px; width: auto; display: inline-block; }
#payment .payment_box {
	margin-top: var(--sp-3);
	padding: var(--sp-3);
	background: var(--c-bg);
	border-radius: var(--r-sm);
	color: var(--c-text-dim);
	font-size: .85rem;
}
#payment .payment_box p:last-child { margin-bottom: 0; }

.woocommerce-terms-and-conditions-wrapper { margin: var(--sp-4) 0; font-size: .85rem; }
#payment #place_order { width: 100%; min-height: 56px; font-size: 1.05rem; }

/* Radio and checkbox inputs get a real size — these are tap targets. */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"] {
	width: 20px; height: 20px;
	accent-color: var(--c-accent);
	flex: none;
}

/* ---------- Order received ---------------------------------------------- */

.woocommerce-order {
	max-width: 720px;
}
.woocommerce-thankyou-order-received {
	padding: var(--sp-4);
	background: color-mix(in oklab, var(--c-ok) 12%, transparent);
	border: 1px solid color-mix(in oklab, var(--c-ok) 40%, transparent);
	border-radius: var(--r-md);
	color: var(--c-ok);
	font-size: 1.05rem;
	font-weight: 600;
}
ul.woocommerce-order-overview {
	display: grid;
	gap: var(--sp-3);
	margin: var(--sp-5) 0;
	padding: 0;
	list-style: none;
}
ul.woocommerce-order-overview { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
ul.woocommerce-order-overview li {
	padding: var(--sp-3);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	color: var(--c-text-faint);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	color: var(--c-text);
	font-family: var(--f-mono);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- My account --------------------------------------------------- */

/* The sidebar-plus-content layout only exists once somebody is signed in.
   Applied unconditionally it also catches the logged-out login page, and
   squeezes the Login and Register forms into a 240px column. */
.woocommerce-account.logged-in .woocommerce { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
		gap: var(--sp-6);
		align-items: start;
	}
}

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--sp-3);
	border-radius: var(--r-sm);
	color: var(--c-text-dim);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--c-surface-2); color: var(--c-text); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--c-surface-3); color: var(--c-accent); }

.woocommerce-MyAccount-content { min-width: 0; }

/* Login and register, side by side on a wide screen. */
.woocommerce-account .u-columns {
	display: grid;
	gap: var(--sp-5);
	max-width: 900px;
	margin-inline: auto;
}
@media (min-width: 900px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
	min-width: 0;
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.woocommerce-account .u-columns h2 { font-size: 1.2rem; margin-bottom: var(--sp-4); }
.woocommerce-account .u-columns .button { width: 100%; margin-top: var(--sp-2); }
.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-3) 0;
	font-size: .875rem;
}
.woocommerce-account .lost_password { margin-top: var(--sp-3); font-size: .85rem; }

/* ---------- Cross-sells -------------------------------------------------- */

.cross-sells > h2 { font-size: 1.1rem; margin-bottom: var(--sp-3); }

/* ---------- Empty cart --------------------------------------------------- */

.cart-empty { font-size: 1.05rem; }
.woocommerce .return-to-shop { margin-top: var(--sp-4); }

/* =========================================================================
   Money pages, second pass — "the bench, by hand"
   ========================================================================= */

/* The cart and the order summary are real tables, but they live inside
   .entry-content, whose prose rule turns every table into a scrolling block
   (right for a spec sheet pasted into an article, wrong here). That is why
   the cart only filled half the width. Give these tables their own layout. */
.entry-content table.shop_table { display: table; overflow: visible; font-size: inherit; }
.entry-content table.shop_table th,
.entry-content table.shop_table td { border-inline: 0; }

/* The prose bullets also reached the shipping-method list, leaving stray
   copper dots in the totals. */
.woocommerce ul#shipping_method,
.woocommerce ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce ul#shipping_method > li::before,
.woocommerce ul.wc_payment_methods > li::before { content: none !important; }
.entry-content .woocommerce ul#shipping_method > li + li { margin-top: var(--sp-1); }

/* ---------- Header and route -------------------------------------------- */

.money-head { margin-bottom: var(--sp-6); }
.money-head__title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.money-head__title { margin: 0; font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: -.035em; font-weight: 800; }
.money-head__count {
	color: var(--c-copper);
	font-family: var(--f-mono);
	font-size: .85rem;
	font-weight: 600;
}

/* Three joints on one trace. The trace is copper up to where the buyer is,
   and a dashed, unlit line after it — the route still to travel. */
.route {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 620px;
}
.route__stop {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
	color: var(--c-text-faint);
	font-size: .8rem;
	font-weight: 600;
}
.route__stop:not(:last-child)::after {
	content: "";
	flex: 1;
	min-width: 12px;
	height: 0;
	margin-inline: var(--sp-2);
	border-top: 2px dashed var(--c-line);
}
.route__stop.is-done:not(:last-child)::after { border-top: 2px solid var(--c-copper); }
.route__joint {
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	flex: none;
	border-radius: var(--r-full);
	border: 2px solid var(--c-line);
	background: var(--c-bg);
	font-family: var(--f-mono);
	font-size: .72rem;
	font-weight: 700;
}
.route__stop.is-done .route__joint { border-color: var(--c-copper); background: var(--c-copper); color: #180c02; }
.route__stop.is-here { color: var(--c-text); }
.route__stop.is-here .route__joint {
	border-color: var(--c-accent);
	color: var(--c-accent);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-accent) 16%, transparent);
}
.route__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.route__label:hover { color: var(--c-accent); }
@media (max-width: 479px) {
	/* On a narrow phone only the current stop keeps its words. */
	.route__stop:not(.is-here) .route__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Cart layout -------------------------------------------------- */

.woocommerce-cart .woocommerce { display: grid; gap: var(--sp-5); }
.woocommerce-cart .cart-collaterals { display: contents; }
@media (min-width: 1000px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
		gap: var(--sp-5) var(--sp-6);
		align-items: start;
	}
	.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 2; margin: 0; }
	.woocommerce-cart .cart_totals {
		grid-column: 2;
		grid-row: 2 / span 2;
		position: sticky;
		top: calc(var(--header-h) + 64px);
	}
	.woocommerce-cart .cross-sells { grid-column: 1; grid-row: 3; }
}

/* The list of parts. Every row is a small card on one shared board, each
   with a reference designator printed on it — U1, U2 — counted by CSS. */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart tbody { display: block; width: 100%; }
.woocommerce-cart table.shop_table.cart {
	counter-reset: part;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--grain), var(--c-surface);
	overflow: hidden;
}
.woocommerce-cart table.shop_table.cart thead { display: none; }

.woocommerce-cart tr.woocommerce-cart-form__cart-item {
	counter-increment: part;
	position: relative;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name   remove"
		"thumb price  price"
		"thumb qty    sub";
	gap: var(--sp-1) var(--sp-4);
	align-items: center;
	padding: var(--sp-4);
	border-bottom: 1px dashed var(--c-line);
}
@media (min-width: 700px) {
	.woocommerce-cart tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 88px minmax(0, 1fr) 118px 110px 36px;
		grid-template-areas:
			"thumb name  qty sub remove"
			"thumb price qty sub remove";
	}
}
.woocommerce-cart tr.woocommerce-cart-form__cart-item td {
	display: block;
	padding: 0 !important;
	border: 0 !important;
	background: none;
}
.woocommerce-cart td.product-thumbnail { grid-area: thumb; position: relative; align-self: start; }
.woocommerce-cart td.product-name      { grid-area: name; align-self: end; }
.woocommerce-cart td.product-price     { grid-area: price; align-self: start; color: var(--c-text-faint); font-size: .8rem; }
.woocommerce-cart td.product-quantity  { grid-area: qty; }
.woocommerce-cart td.product-subtotal  { grid-area: sub; text-align: end; font-size: 1.05rem; }
.woocommerce-cart td.product-remove    { grid-area: remove; justify-self: end; align-self: start; }
@media (min-width: 700px) {
	.woocommerce-cart td.product-remove { align-self: center; }
}

/* The cart table's own data-title labels, kept only where they help. */
.woocommerce-cart td.product-price::before { content: attr(data-title) " "; font-family: var(--f-sans); }
.woocommerce-cart td.product-subtotal::before { content: none; }

.woocommerce-cart td.product-thumbnail img {
	width: 100%; height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 6px;
	background: var(--c-plate);
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-md);
}
.woocommerce-cart td.product-thumbnail::before {
	content: "U" counter(part);
	position: absolute;
	top: -7px; inset-inline-start: -7px;
	z-index: 1;
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	color: var(--c-copper);
	font-family: var(--f-mono);
	font-size: .6rem;
	font-weight: 700;
	line-height: 1.2;
}
.woocommerce-cart td.product-name a,
.woocommerce-cart td.product-name { font-family: var(--f-display); font-size: 1rem; font-weight: 650; line-height: 1.3; color: var(--c-text); }

.woocommerce-cart td.product-quantity .quantity { display: inline-flex; }
.woocommerce-cart td.product-quantity .qty { width: 92px; min-height: 44px; text-align: center; }

/* Coupon and Update — the last table row, set as one quiet toolbar. */
.woocommerce-cart table.shop_table.cart tr:not(.woocommerce-cart-form__cart-item) { display: block; }
.woocommerce-cart table.shop_table.cart td.actions {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) !important;
	border: 0;
	background: color-mix(in oklab, var(--c-bg) 55%, transparent);
}
.woocommerce-cart td.actions .coupon { flex: 1 1 320px; display: flex; gap: var(--sp-2); }
.woocommerce-cart td.actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.woocommerce-cart td.actions .coupon #coupon_code { flex: 1 1 auto; min-height: 46px; }
.woocommerce-cart td.actions > .button { margin-inline-start: auto; }
.woocommerce-cart td.actions > .button:disabled { opacity: .45; }

/* ---------- Totals ------------------------------------------------------- */

.cart_totals {
	padding: var(--sp-5);
	background: var(--pads), var(--grain), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
}
.cart_totals h2 {
	margin: 0 0 var(--sp-3);
	font-size: .7rem;
	font-family: var(--f-mono);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-text-faint);
}
.cart_totals table.shop_table,
.cart_totals table.shop_table tbody { display: block; border: 0; }
.cart_totals table.shop_table tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-1) var(--sp-3);
	padding-block: var(--sp-3);
	border-bottom: 1px dashed var(--c-line);
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td { display: block; padding: 0 !important; border: 0 !important; background: none; }
.cart_totals table.shop_table th { color: var(--c-text-dim); font-size: .85rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.cart_totals table.shop_table td { text-align: end; }
.cart_totals tr.woocommerce-shipping-totals td { flex-basis: 100%; text-align: start; font-size: .85rem; color: var(--c-text-dim); }
.cart_totals .woocommerce-shipping-destination { margin: var(--sp-2) 0 0; font-size: .8rem; }
.cart_totals .shipping-calculator-button { font-size: .8rem; }
.cart_totals tr.order-total { border-bottom: 0; padding-top: var(--sp-4); }
.cart_totals tr.order-total th { color: var(--c-text); font-family: var(--f-display); font-size: 1.05rem; }
.cart_totals tr.order-total .amount { color: var(--c-copper); font-size: 1.6rem; font-weight: 700; }

.wc-proceed-to-checkout { margin-top: var(--sp-3); }
.woocommerce .wc-proceed-to-checkout .checkout-button {
	width: 100%;
	min-height: 56px;
	font-size: 1.05rem;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--c-accent-dim), var(--sh-2);
}
.woocommerce .wc-proceed-to-checkout .checkout-button:active { transform: translateY(2px); box-shadow: none; }

.paynote { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--c-line); }
.paynote__line { display: flex; gap: var(--sp-2); margin: 0; color: var(--c-text-dim); font-size: .8rem; line-height: 1.45; }
.paynote__line .icon { width: 16px; height: 16px; color: var(--c-copper); margin-top: 2px; }
.woocommerce-cart td.actions .coupon { flex-wrap: nowrap; align-items: stretch; }
.woocommerce-cart td.actions .coupon .button { flex: none; }
@media (max-width: 479px) {
	.woocommerce-cart td.actions .coupon { flex-wrap: wrap; }
	.woocommerce-cart td.actions .coupon .button,
	.woocommerce-cart td.actions > .button { width: 100%; margin: 0; }
}

/* ---------- Checkout, second pass ---------------------------------------- */

/* The form sits on one board, the summary on another. */
.woocommerce-checkout #customer_details {
	padding: var(--sp-5);
	background: var(--grain), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: auto; float: none; }
.woocommerce-checkout #customer_details .col-2:not(:empty) { margin-top: var(--sp-4); }

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--f-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-text-faint);
}
.woocommerce-billing-fields h3::before,
#order_review_heading::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--c-copper);
}
#ship-to-different-address label { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--f-sans); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--c-text); cursor: pointer; }

#order_review {
	padding: var(--sp-5);
	background: var(--pads), var(--grain), var(--c-surface);
	box-shadow: var(--sh-2);
}

/* Summary lines: thumbnail, name, quantity, price. */
.review-item { display: inline-flex; align-items: center; gap: var(--sp-3); vertical-align: middle; }
.review-thumb {
	width: 44px !important; height: 44px !important;
	flex: none;
	object-fit: contain;
	padding: 3px;
	background: var(--c-plate);
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-sm);
}
.review-item__name { font-weight: 600; line-height: 1.3; }

#order_review table.shop_table thead th {
	font-family: var(--f-mono);
	font-size: .62rem;
	letter-spacing: .16em;
	color: var(--c-text-faint);
	background: none;
}
#order_review table.shop_table td.product-total,
#order_review table.shop_table tfoot td { text-align: end; }
#order_review tfoot th { color: var(--c-text-dim); font-size: .82rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
#order_review tfoot tr.fee th { color: var(--c-copper); }
#order_review tfoot tr.fee td { color: var(--c-copper); }
#order_review tfoot tr.order-total th { color: var(--c-text); font-family: var(--f-display); font-size: 1.05rem; }
#order_review tfoot .order-total .amount { font-size: 1.6rem; }

/* The advance-COD option, as a card the whole of which can be tapped
   (see mypcb_cod_card_script). Ticked, it lights up like the chosen
   payment method below it, so both choices read the same way. */
#order_review table.sb_cod_table_bar {
	display: block;
	width: 100%;
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-surface-2);
	border: 1px dashed var(--c-copper);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
#order_review table.sb_cod_table_bar:has(#sb_select_cod_payment:checked) {
	border-style: solid;
	background: color-mix(in oklab, var(--c-copper) 12%, var(--c-surface-2));
}
#order_review table.sb_cod_table_bar thead,
#order_review table.sb_cod_table_bar tbody,
#order_review table.sb_cod_table_bar tr { display: block; }
#order_review table.sb_cod_table_bar th,
#order_review table.sb_cod_table_bar td {
	display: block;
	padding: 0 !important;
	border: 0 !important;
	background: none;
	text-align: start;
}
#order_review table.sb_cod_table_bar th {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--c-text);
	font-family: var(--f-sans);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
#order_review table.sb_cod_table_bar td {
	padding-inline-start: calc(20px + var(--sp-3)) !important;
	color: var(--c-text-dim);
	font-size: .8rem;
	font-weight: 500;
}
#sb_select_cod_payment { margin: 0 !important; font: inherit !important; accent-color: var(--c-copper); }

/* Payment methods, second pass */
#payment ul.payment_methods > li {
	padding: var(--sp-3) var(--sp-4);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
#payment ul.payment_methods > li:has(input:checked) {
	background: color-mix(in oklab, var(--c-accent) 7%, var(--c-surface-2));
	box-shadow: inset 3px 0 0 var(--c-accent);
}
#payment ul.payment_methods label img { max-height: 20px; margin-inline-start: var(--sp-1); }
#payment .payment_box { margin-top: var(--sp-3); border: 1px solid var(--c-line-soft); }
#payment .payment_box::before { content: none; }

.woocommerce #payment #place_order {
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--c-accent-dim), var(--sh-2);
	font-family: var(--f-display);
	font-size: 1.1rem;
	letter-spacing: -.01em;
}
.woocommerce #payment #place_order:active { transform: translateY(2px); box-shadow: none; }

/* The UPI plugin's handle picker is a third-party "selectize" widget that
   ships light-theme colours. On the dark board it was a white box. */
.upiwc-checkout-payment-form .selectize-input,
.upiwc-checkout-payment-form .selectize-dropdown,
.upiwc-checkout-payment-form input[type="text"] {
	background: var(--c-surface-2) !important;
	color: var(--c-text) !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--r-sm) !important;
	box-shadow: none !important;
	min-height: 46px;
	font-size: 16px !important;
}
.upiwc-checkout-payment-form .selectize-input { display: flex !important; align-items: center; }
.upiwc-checkout-payment-form .selectize-input input { color: var(--c-text) !important; }
.upiwc-checkout-payment-form .selectize-dropdown .option { color: var(--c-text-dim); }
.upiwc-checkout-payment-form .selectize-dropdown .active { background: var(--c-accent) !important; color: var(--c-accent-ink) !important; }

/* The UPI plugin's own sheet sets this with !important and a longer
   selector, so the override has to out-rank it rather than just follow it. */
#payment .upiwc-checkout-payment-form .selectize-control.single .selectize-input,
#payment .upiwc-checkout-payment-form .selectize-control .selectize-input {
	background-color: var(--c-surface-2) !important;
	color: var(--c-text) !important;
	border-color: var(--c-line) !important;
	min-height: 46px;
}
#payment .upiwc-checkout-payment-form .selectize-control .selectize-input .item { color: var(--c-text); }
#payment .upiwc-checkout-payment-form .upiwc-address { min-height: 46px; }

/* ---------- Order received / view order, second pass --------------------- */

.woocommerce-order { max-width: 860px; }

/* The prose bullets from .entry-content reached these lists too. */
.entry-content ul.woocommerce-order-overview,
.entry-content ul.order_details { padding-inline-start: 0; }
.entry-content ul.woocommerce-order-overview > li::before,
.entry-content ul.order_details > li::before { content: none; }
.entry-content ul.woocommerce-order-overview > li + li { margin-top: 0; }

ul.woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 700px) { ul.woocommerce-order-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
ul.woocommerce-order-overview li {
	padding: var(--sp-3);
	background: var(--grain), var(--c-surface);
	font-family: var(--f-mono);
	font-size: .6rem;
	letter-spacing: .16em;
}
ul.woocommerce-order-overview li strong { font-size: .95rem; overflow-wrap: anywhere; }
ul.woocommerce-order-overview li.woocommerce-order-overview__total strong { color: var(--c-copper); }

/* The thank-you line, with an inspection stamp in the corner — the round,
   slightly rotated mark a workshop puts on a docket once it is checked. */
.woocommerce-thankyou-order-received,
.woocommerce-order > p:first-child {
	position: relative;
	padding: var(--sp-4) var(--sp-5);
	padding-inline-end: 112px;
	background: color-mix(in oklab, var(--c-ok) 9%, var(--c-surface));
	border: 1px solid color-mix(in oklab, var(--c-ok) 40%, transparent);
	border-radius: var(--r-lg);
	color: var(--c-text);
	font-family: var(--f-display);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.45;
}
.woocommerce-thankyou-order-received::after {
	content: "BENCH\A CHECKED";
	white-space: pre;
	position: absolute;
	top: 50%;
	inset-inline-end: var(--sp-4);
	display: grid;
	place-items: center;
	width: 82px; height: 82px;
	transform: translateY(-50%) rotate(-12deg);
	border: 2px solid color-mix(in oklab, var(--c-ok) 70%, transparent);
	border-radius: var(--r-full);
	box-shadow: inset 0 0 0 4px var(--c-surface), inset 0 0 0 5px color-mix(in oklab, var(--c-ok) 55%, transparent);
	color: var(--c-ok);
	font-family: var(--f-mono);
	font-size: .58rem;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.35;
	text-align: center;
	opacity: .85;
}
@media (max-width: 479px) {
	.woocommerce-thankyou-order-received { padding-inline-end: var(--sp-5); padding-top: 96px; }
	.woocommerce-thankyou-order-received::after { top: var(--sp-3); transform: rotate(-12deg); }
}

.woocommerce-order-details,
.woocommerce-customer-details { margin-top: var(--sp-6); }
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
	font-family: var(--f-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-text-faint);
}

/* Order details table: name and value, the value always right-aligned and
   never squeezed under its label. */
table.woocommerce-table--order-details {
	background: var(--c-surface);
}
table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td { background: none !important; vertical-align: top; }
table.woocommerce-table--order-details tfoot th {
	color: var(--c-text-dim);
	font-family: var(--f-sans);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	width: 55%;
}
table.woocommerce-table--order-details td { text-align: end; }
table.woocommerce-table--order-details td.product-name { text-align: start; }
table.woocommerce-table--order-details td.product-name a { color: var(--c-text); font-weight: 600; text-decoration: none; }
table.woocommerce-table--order-details .shipped_via { display: block; color: var(--c-text-faint); font-size: .75rem; }
table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td .amount,
table.woocommerce-table--order-details tfoot tr.order-total td .amount { color: var(--c-copper); font-weight: 700; }

.woocommerce-customer-details address {
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-style: normal;
	line-height: 1.7;
	color: var(--c-text-dim);
}
.woocommerce-customer-details address p { margin: var(--sp-2) 0 0; color: var(--c-text-dim); }

/* WooCommerce's show/hide password eye. Its icon font is one of the sheets
   the theme drops, so the button had collapsed to 16x6px with nothing in it.
   Now a labelled 40px switch inside the field. WooCommerce toggles
   .display-password on it, which flips the word. */
.woocommerce .password-input { position: relative; display: block; }
.woocommerce .password-input input { padding-inline-end: 68px; }
.woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	inset-inline-end: 6px;
	transform: translateY(-50%);
	min-width: 56px;
	height: 40px;
	padding: 0 var(--sp-2);
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	cursor: pointer;
}
.woocommerce .show-password-input::after { content: "SHOW"; }
.woocommerce .show-password-input.display-password::after { content: "HIDE"; }
.woocommerce .show-password-input:hover { color: var(--c-accent); background: var(--c-surface-3); }
table.woocommerce-table--order-details td.product-name a { display: inline-flex; align-items: center; min-height: 36px; }

/* The sign-in forms were centred under a left-aligned page title, so the
   two never lined up. Both now start on the page's left edge. */
.woocommerce-account .u-columns { margin-inline: 0; max-width: 960px; }
.woocommerce-account .u-columns h2 {
	font-family: var(--f-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-text-faint);
}
.woocommerce-account .col-1 { background: var(--pads), var(--grain), var(--c-surface); }
.woocommerce-account .col-1 .button[name="login"] {
	background: var(--c-accent);
	border-color: transparent;
	color: var(--c-accent-ink);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--c-accent-dim);
}
/* WooCommerce's own empty-cart line and button are replaced by the scene
   in mypcb_empty_cart_scene. */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .return-to-shop { display: none; }

/* ---------- UPI QR payment window ---------------------------------------- */

/* The UPI plugin opens a white "jquery-confirm" window over the order-pay
   page. Its body text inherited the theme's pale ink, so on white the
   instructions — "enter the 12-digit transaction ID after paying" — were
   all but invisible. Everything inside is given dark ink, and the bright
   blue header and button are brought into the shop's own colours. */
.jconfirm .jconfirm-box { color: #17251f; font-family: var(--f-sans); border-radius: var(--r-lg) !important; overflow: hidden; }
.jconfirm .jconfirm-box p,
.jconfirm .jconfirm-box label,
.jconfirm .jconfirm-box span,
.jconfirm .jconfirm-box div { color: inherit; }
.jconfirm .upiwc-payment-info-text,
.jconfirm .upiwc-payment-hint,
.jconfirm .upiwc-payment-confirm-form label { color: #2c3d36 !important; }
.jconfirm .upiwc-payment-upi-id { color: #0b3d2f !important; font-family: var(--f-mono); letter-spacing: .04em; }

.jconfirm .jconfirm-box .jconfirm-title-c {
	background: #0a1f18 !important;
	color: #e4f2ec !important;
}
.jconfirm .jconfirm-box .jconfirm-title-c .upiwc-payment-header,
.jconfirm .jconfirm-box .jconfirm-title-c .upiwc-payment-merchant-name { color: #e4f2ec !important; font-family: var(--f-display); }
.jconfirm .jconfirm-box .jconfirm-title-c .upiwc-payment-order-info { background: rgb(46 242 200 / .14) !important; color: #2ef2c8 !important; font-family: var(--f-mono); }

.jconfirm .jconfirm-box .jconfirm-buttons .btn:not(.upiwc-amount):not(.upiwc-back) {
	background: #07705a !important;
	border-color: #07705a !important;
	color: #fff !important;
	border-radius: var(--r-md) !important;
	font-weight: 700;
	text-transform: none;
}
.jconfirm .jconfirm-box .jconfirm-buttons .btn.upiwc-amount { font-family: var(--f-mono); }
.jconfirm .jconfirm-box .jconfirm-closeIcon { color: #e4f2ec !important; opacity: .8; }

/* The order-pay page behind the window: its "please wait" box was a grey
   slab. It now matches the panels around it. */
.woocommerce-order-pay .upiwc-section .upiwc-info,
.woocommerce-order-pay .upiwc-info {
	background: var(--c-surface) !important;
	border-color: var(--c-line) !important;
	border-radius: var(--r-lg);
	color: var(--c-text-dim);
}
/* The blue is painted on the title span itself, not on its container. */
.jconfirm .jconfirm-box .jconfirm-title-c .jconfirm-title { background: #0a1f18 !important; }

/* WooCommerce moves focus to a notice so screen readers announce it. That
   focus is programmatic, not a keyboard user's, so it needs no ring — the
   ring drew a second glowing border around every "added to cart" box. */
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-NoticeGroup:focus { outline: none; }

/* Keep "× 1" beside the product name in the order summary. */
#order_review td.product-name { display: flex; align-items: center; gap: var(--sp-2); }
#order_review td.product-name .review-item { flex: 1 1 auto; min-width: 0; }
#order_review td.product-name .product-quantity { flex: none; white-space: nowrap; }

/* The order summary follows the reader down the form — but with the
   cash-on-delivery card and three payment boxes it is now about 950px tall,
   taller than most laptop screens. A sticky box taller than the window keeps
   its own bottom, the Place order button, out of sight until the very end
   of the form. So it only sticks where the whole of it fits. */
@media (min-width: 900px) {
	.woocommerce-checkout #order_review { position: static; }
}
@media (min-width: 900px) and (min-height: 1080px) {
	.woocommerce-checkout #order_review { position: sticky; }
}
.woocommerce-cart .woocommerce > .empty--cart { grid-column: 1 / -1; }

/* =========================================================================
   Signed-in account — an app, not a page of links
   ========================================================================= */

.woocommerce-account.logged-in .woocommerce { align-items: start; }

/* ---- Menu: a rail of icons and labels on a wide screen, a sticky strip of
   tabs that scrolls sideways on a phone. */
.acct-nav__list { list-style: none; margin: 0; padding: 0; }
.entry-content .acct-nav__list > li::before { content: none; }
.entry-content .acct-nav__list > li + li { margin-top: 0; }
.acct-nav__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 46px;
	padding: 0 var(--sp-3);
	border-radius: var(--r-md);
	color: var(--c-text-dim);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acct-nav__icon { width: 19px; height: 19px; flex: none; }
.acct-nav__link:hover { background: var(--c-surface-2); color: var(--c-text); }
.acct-nav__link[aria-current="page"],
.woocommerce-MyAccount-navigation li.is-active .acct-nav__link {
	background: var(--c-surface-3);
	color: var(--c-accent);
	box-shadow: inset 0 0 0 1px var(--c-line);
}
.woocommerce-MyAccount-navigation-link--customer-logout .acct-nav__link { color: var(--c-text-faint); }

@media (min-width: 900px) {
	.acct-nav {
		position: sticky;
		top: calc(var(--header-h) + 64px);
		padding: var(--sp-2);
		background: var(--grain), var(--c-surface);
		border: 1px solid var(--c-line);
		border-radius: var(--r-lg);
	}
	.acct-nav__list { display: grid; gap: 2px; }
	.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--c-line); }
}
@media (max-width: 899px) {
	.acct-nav {
		position: sticky;
		top: var(--header-h);
		z-index: 5;
		margin-inline: calc(var(--gutter) * -1);
		padding: var(--sp-2) var(--gutter);
		background: color-mix(in oklab, var(--c-bg) 92%, transparent);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--c-line-soft);
	}
	.acct-nav__list {
		display: flex;
		gap: var(--sp-2);
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}
	.acct-nav__list::-webkit-scrollbar { display: none; }
	.acct-nav__list > li { flex: none; scroll-snap-align: start; }
	.acct-nav__link {
		min-height: 40px;
		padding: 0 var(--sp-4);
		border: 1px solid var(--c-line);
		border-radius: var(--r-full);
		background: var(--c-surface);
		font-size: .82rem;
		white-space: nowrap;
	}
	.acct-nav__icon { width: 16px; height: 16px; }
	.acct-nav__link[aria-current="page"] { background: var(--c-accent); color: var(--c-accent-ink); box-shadow: none; border-color: transparent; }
}

/* ---- Dashboard ---------------------------------------------------------- */

.acct-dash { display: grid; gap: var(--sp-4); }

.acct-hello {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: var(--pads), var(--grain), linear-gradient(135deg, color-mix(in oklab, var(--c-accent) 10%, var(--c-surface)), var(--c-surface) 60%);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.acct-hello__avatar {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	flex: none;
	border-radius: var(--r-full);
	background: var(--c-bg);
	border: 2px solid var(--c-copper);
	box-shadow: 0 0 0 4px var(--c-surface);
	color: var(--c-copper);
	font-family: var(--f-mono);
	font-size: 1.1rem;
	font-weight: 700;
}
.acct-hello__text { flex: 1; min-width: 0; }
.acct-hello__title { margin: 0; font-size: clamp(1.3rem, 4vw, 1.7rem); letter-spacing: -.03em; }
.acct-hello__sub { margin: 2px 0 0; color: var(--c-text-dim); font-size: .85rem; }
.acct-hello__out {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	min-height: 40px; padding: 0 var(--sp-3);
	border-radius: var(--r-md);
	color: var(--c-text-faint); font-size: .8rem; font-weight: 600;
	text-decoration: none !important;
}
.acct-hello__out .icon { width: 17px; height: 17px; }
.acct-hello__out:hover { background: var(--c-surface-2); color: var(--c-text); }
@media (max-width: 479px) { .acct-hello__out span { display: none; } }

.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.entry-content .acct-stats > li::before,
.entry-content .acct-tiles > li::before { content: none; }
.entry-content .acct-stats > li + li,
.entry-content .acct-tiles > li + li { margin-top: 0; }
.acct-stat a {
	display: grid;
	gap: 2px;
	height: 100%;
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	text-decoration: none !important;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acct-stat a:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.acct-stat__n {
	color: var(--c-text);
	font-family: var(--f-mono);
	font-size: clamp(1.4rem, 5vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.acct-stat__n--text { font-family: var(--f-display); font-size: clamp(1rem, 3.4vw, 1.35rem); }
.acct-stat.is-live .acct-stat__n { color: var(--c-copper); }
.acct-stat__label { color: var(--c-text-faint); font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.acct-latest {
	padding: var(--sp-4) var(--sp-5);
	background: var(--grain), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.acct-latest__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.acct-latest__head .silk { opacity: 1; }
.acct-latest__body { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .acct-latest__body { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.acct-latest__thumbs { display: flex; gap: var(--sp-2); }
.acct-latest__thumb {
	display: grid; place-items: center;
	width: 56px; height: 56px;
	padding: 4px;
	background: var(--c-plate);
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-md);
	overflow: hidden;
}
.acct-latest__thumb img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.acct-latest__thumb--more { background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-text-dim); font-family: var(--f-mono); font-weight: 700; }
.acct-latest__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.acct-latest__facts dt { color: var(--c-text-faint); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.acct-latest__facts dd { margin: 2px 0 0; color: var(--c-text); font-weight: 600; font-size: .9rem; }
.acct-latest__facts dd.is-money { color: var(--c-copper); font-family: var(--f-mono); }
.acct-latest__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--c-line); }
.acct-latest--empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.acct-latest__empty { margin: 0; color: var(--c-text-dim); }

.acct-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.acct-tile {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	height: 100%;
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	text-decoration: none !important;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acct-tile:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.acct-tile__icon {
	display: grid; place-items: center;
	width: 44px; height: 44px; flex: none;
	border-radius: var(--r-md);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	color: var(--c-copper);
}
.acct-tile__icon .icon { width: 21px; height: 21px; }
.acct-tile__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.acct-tile__title { color: var(--c-text); font-family: var(--f-display); font-weight: 650; font-size: .98rem; }
.acct-tile__desc { color: var(--c-text-faint); font-size: .78rem; }
.acct-tile__go { width: 16px; height: 16px; color: var(--c-text-faint); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.acct-tile:hover .acct-tile__go { transform: translateX(3px); color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
	.acct-stat a:hover, .acct-tile:hover { transform: none; }
}

/* ---- Order status pill, used on the dashboard and the orders list ------- */
.order-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r-full);
	background: var(--c-surface-3);
	color: var(--c-text-dim);
	font-family: var(--f-mono);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.order-pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.order-pill--processing,
.order-pill--completed { background: color-mix(in oklab, var(--c-ok) 16%, transparent); color: var(--c-ok); }
.order-pill--on-hold,
.order-pill--pending { background: color-mix(in oklab, var(--c-warn) 16%, transparent); color: var(--c-warn); }
.order-pill--failed,
.order-pill--cancelled,
.order-pill--refunded { background: color-mix(in oklab, var(--c-danger) 14%, transparent); color: var(--c-danger); }

/* ---- Orders list: a table on a wide screen, cards on a phone ------------ */
.woocommerce-orders-table { background: var(--grain), var(--c-surface); }
.woocommerce-orders-table th { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; }
.woocommerce-orders-table td { font-size: .9rem; }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { color: var(--c-text); font-family: var(--f-mono); font-weight: 700; text-decoration: none; }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { min-height: 38px; padding: 0 var(--sp-4); font-size: .82rem; margin: 2px; }
@media (max-width: 699px) {
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table,
	.woocommerce-orders-table tbody { display: block; border: 0 !important; background: none; }
	.woocommerce-orders-table tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: var(--sp-1) var(--sp-3);
		margin-bottom: var(--sp-3);
		padding: var(--sp-4);
		background: var(--c-surface);
		border: 1px solid var(--c-line);
		border-radius: var(--r-lg);
	}
	.woocommerce-orders-table td,
	.woocommerce-orders-table th { display: block; padding: 0 !important; border: 0 !important; background: none; text-align: start; }
	.woocommerce-orders-table td::before { content: attr(data-title) " "; color: var(--c-text-faint); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; display: block; }
	.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; margin-top: var(--sp-2); }
	.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before { content: none; }
}

/* ---- Addresses and account details -------------------------------------- */
.woocommerce-Addresses { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address {
	padding: var(--sp-5);
	background: var(--pads), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.woocommerce-Address-title h2 { margin: 0; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-faint); }
.woocommerce-Address-title .edit { font-size: .85rem; font-weight: 700; color: var(--c-accent); text-decoration: none; }
.woocommerce-Address address { font-style: normal; line-height: 1.7; color: var(--c-text-dim); }
.woocommerce-MyAccount-content > form,
.woocommerce-EditAccountForm {
	padding: var(--sp-5);
	background: var(--grain), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.woocommerce-EditAccountForm fieldset { margin: var(--sp-5) 0 0; padding: var(--sp-4); border: 1px dashed var(--c-line); border-radius: var(--r-md); }
.woocommerce-EditAccountForm legend { padding: 0 var(--sp-2); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-faint); }
.woocommerce-MyAccount-content .woocommerce-info { margin-bottom: var(--sp-4); }
/* The prose bullet rule (.entry-content ul:not(.products) > li::before)
   out-ranks a plain class, so the account lists switch it off firmly. */
.entry-content :is(.acct-nav__list, .acct-stats, .acct-tiles) > li::before { content: none !important; }
.entry-content :is(.acct-nav__list, .acct-stats, .acct-tiles) { padding-inline-start: 0; }
.woocommerce-MyAccount-navigation .acct-nav__link { display: flex; }
/* WooCommerce wraps the order number, date and status in <mark>; with no
   style of its own that is the browser's yellow highlighter pen. */
.woocommerce-MyAccount-content mark,
.woocommerce-order mark {
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--c-surface-3);
	color: var(--c-text);
	font-weight: 700;
}
.entry-content .woocommerce-order-details__title,
.entry-content .woocommerce-column__title,
.entry-content .woocommerce-customer-details h2 {
	margin-top: var(--sp-5);
	font-family: var(--f-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-text-faint);
}
.woocommerce-orders-table__cell-order-status { font-family: var(--f-mono); font-size: .78rem !important; color: var(--c-copper); }
@media (max-width: 899px) {
	.woocommerce-MyAccount-navigation ul.acct-nav__list {
		display: flex;
		gap: var(--sp-2);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.woocommerce-MyAccount-navigation .acct-nav__link { padding: 0 var(--sp-4); }
	/* The orders list cards: the order number cell is a <th>, which kept the
	   table header's dark fill. */
	.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number { background: none !important; }
}
/* A grid column sized "auto" grows to fit its widest child — here the full
   row of tabs — which made the whole account page wider than a phone. The
   column is pinned to the screen, and the tab row scrolls inside it. */
@media (max-width: 899px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.acct-nav, .woocommerce-MyAccount-content { min-width: 0; }
}
.login-gate {
	max-width: 560px;
	padding: var(--sp-5);
	background: var(--pads), var(--grain), var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.login-gate__text { color: var(--c-text-dim); margin-bottom: var(--sp-4); }
.login-gate__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }