/*
 * WooCommerce-specific styles.
 * Enqueued only on shop/product/cart/checkout views (see inc/enqueue.php).
 * Depends on custom properties defined in style.css.
 */

.tpm-shop-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: var(--tpm-space-5);
	padding: var(--tpm-space-6) 0;
	align-items: start;
}
.tpm-shop-sidebar { grid-column: 2; }

/*
 * .tpm-product-grid is a plain block wrapper, NOT the real product grid.
 * WooCommerce's own woocommerce_product_loop_start() (called from
 * woocommerce/archive-product.php) wraps the actual <li class="product">
 * items in WooCommerce's own <ul class="products"> INSIDE this div — so
 * .tpm-card-grid's inherited `display:grid; grid-template-columns:...`
 * (components.css) was being applied to a container that only ever had
 * ONE grid item (that <ul>), and never actually distributed individual
 * products into columns. Confirmed via headless-Chromium measurement
 * (see MILESTONE_P1_13_WOOCOMMERCE_MOBILE_CARD_LAYOUT_REPORT.md): the
 * <ul> was confined to a single ~1/3-width grid track while WooCommerce
 * core's own float-based `li.product { width:X%; float:left; }` defaults
 * (never overridden anywhere in this theme before now) then tried to
 * lay out multiple columns again *within* that already-narrow track —
 * compounding into cards a fraction of their intended width.
 *
 * `display:block` here overrides components.css's `.tpm-card-grid`
 * `display:grid` (same specificity, later source order — the same
 * mechanism the grid-template-columns override below already relied on)
 * without touching `.tpm-card-grid` itself, so blog post grids elsewhere
 * are completely unaffected.
 *
 * `grid-column: 1` was previously declared in a separate rule block
 * immediately above this comment (accidentally split apart, not a
 * property conflict — verified both declarations before merging: this
 * selector was never assigned to two different values for the same
 * property, just organized across two blocks) — merged here (P1.20) since
 * a real CSS linter (stylelint) correctly flags any duplicate selector as
 * worth a human double-check, and consolidating removes the false-alarm
 * surface for future tooling runs without changing any rendered output.
 */
.tpm-product-grid {
	grid-column: 1;
	display: block;
}

/*
 * The real grid: WooCommerce's own <ul class="products">, scoped to
 * .tpm-shop-main so its specificity (0,3,1) safely exceeds WooCommerce
 * core's own `.woocommerce ul.products`-family selectors regardless of
 * stylesheet load order.
 */
.tpm-shop-main .tpm-product-grid ul.products {
	display: grid;
	grid-template-columns: repeat(var(--tpm-shop-columns, 3), 1fr);
	gap: var(--tpm-space-4);
	list-style: none;
	margin: var(--tpm-space-5) 0;
	padding: 0;
}

/* Neutralize WooCommerce core's own float-based column system so it can't fight the grid above. */
.tpm-shop-main .tpm-product-grid ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

@media (max-width: 1024px) {
	.tpm-shop-main .tpm-product-grid ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.tpm-shop-main .tpm-product-grid ul.products { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.tpm-shop-main .tpm-product-grid ul.products { gap: var(--tpm-space-3); margin: var(--tpm-space-4) 0; }
}

/* When the shop/product sidebar is turned off, the grid takes the full width. */
.tpm-shop-layout--no-sidebar {
	grid-template-columns: 1fr;
}
.tpm-shop-layout--no-sidebar .tpm-product-grid { grid-column: 1; }

.tpm-product-card .tpm-card-price {
	display: block;
	margin-top: var(--tpm-space-1);
}

.tpm-product-card .tpm-add-to-cart {
	margin-top: auto;
	text-align: center;
	width: 100%;
	transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tpm-product-card .tpm-add-to-cart.is-loading {
	opacity: 0.75;
	pointer-events: none;
	cursor: default;
	position: relative;
	color: transparent !important;
}

/*
 * Visible spinner (previously this state only dimmed the button via
 * opacity, with no other feedback that a click had registered). A
 * generic .tpm-spinner keyframe is defined once in components.css and
 * reused here via ::after rather than duplicating the animation.
 */
.tpm-product-card .tpm-add-to-cart.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--tpm-color-text-muted);
	animation: tpm-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.tpm-product-card .tpm-add-to-cart.is-loading::after { animation: none; }
}

.tpm-product-card .tpm-add-to-cart.is-added {
	background: var(--tpm-color-success);
	border-color: var(--tpm-color-success);
	color: #0f172a;
}

.tpm-product-card .tpm-add-to-cart.is-added::after {
	content: " \2713";
}
.tpm-card-rating { margin-top: var(--tpm-space-1); }

/*
 * Product Card Style (Appearance > Customize > WooCommerce Store Design >
 * Product Card Style). '.tpm-card-style-minimal' is the default and adds
 * nothing beyond the base .tpm-card rule in components.css — i.e. a fresh
 * install renders identically to the original theme.
 */
.tpm-card-style-bordered {
	border-width: 2px;
	border-color: var(--tpm-color-primary);
	box-shadow: none;
}

.tpm-card-style-shadow {
	border-color: transparent;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
}

.tpm-card-style-elevated {
	border-color: transparent;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Subtle base hover feedback for card styles that show a border at rest
 * (the default "minimal" style, and "bordered") — previously only the
 * opt-in "elevated" style had any :hover treatment at all, so a default
 * marketplace install gave zero visual feedback on hover. Deliberately
 * understated (border tint only, no movement, no shadow change) so it
 * doesn't fight "shadow"/"elevated" below, which are intentionally
 * borderless at rest — a border-color hover there would make a border
 * flash into existence rather than read as a natural enhancement.
 */
.tpm-card-style-minimal,
.tpm-card-style-bordered {
	transition: border-color 0.15s ease;
}

.tpm-card-style-minimal:hover,
.tpm-card-style-bordered:hover {
	border-color: var(--tpm-color-primary);
}

.tpm-card-style-elevated:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(15, 23, 42, 0.1);
}

/*
 * Sale badge — optional admin override color. Falls back to
 * --tpm-color-danger, matching the original hardcoded value in
 * components.css exactly, so this is a no-op unless an admin sets
 * "Sale Badge Color" in the Customizer.
 */
.tpm-badge-sale {
	background: var(--tpm-color-sale-badge, var(--tpm-color-danger));
}

/* Core WooCommerce selectors — retheme rather than replace */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--tpm-color-primary);
	background: var(--tpm-color-bg-alt);
	color: var(--tpm-color-text);
	border-radius: var(--tpm-radius);
	padding: var(--tpm-space-3);
}
.woocommerce-error { border-top-color: var(--tpm-color-danger); }

.price { color: var(--tpm-color-text); font-weight: 700; }
.price ins { color: var(--tpm-color-primary); text-decoration: none; }
.price del { color: var(--tpm-color-text-muted); }

/* Falls back to the primary color when no Secondary/Accent Color is set (original behavior). */
.star-rating { color: var(--tpm-color-secondary, var(--tpm-color-primary)); }

.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--tpm-color-text); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--tpm-color-primary); }

/*
 * WooCommerce native form fields — login, register, lost password,
 * checkout, edit-account, edit-address, and add-payment-method all reuse
 * these same core classes (.form-row / .woocommerce-Input / .select2*),
 * and none of them had any theme styling before this: they fell back
 * entirely to WooCommerce's own bundled plugin stylesheet, which has no
 * concept of this theme's [data-theme="dark"] mode and renders fixed
 * light-mode colors regardless — a real, reproducible dark-mode
 * contrast/readability bug on every one of those pages, not just visual
 * inconsistency. Buttons were already covered above/below via the
 * .woocommerce button.button family; this fills in everything else.
 */
.woocommerce form .form-row { margin: 0 0 var(--tpm-space-3); }

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--tpm-space-1);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--tpm-color-text);
}

.woocommerce form .form-row label .required {
	color: var(--tpm-color-danger);
	text-decoration: none;
}

.woocommerce form .woocommerce-Input,
.woocommerce form input.input-text,
.woocommerce form textarea,
.woocommerce form select {
	width: 100%;
	padding: var(--tpm-space-2) var(--tpm-space-3);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-surface);
	color: var(--tpm-color-text);
	font: inherit;
	font-size: 0.9375rem;
	transition: border-color 0.15s ease;
}

.woocommerce form .woocommerce-Input:focus,
.woocommerce form input.input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
	outline: none;
	border-color: var(--tpm-color-primary);
}

.woocommerce form .woocommerce-form-login__rememberme,
.woocommerce form .woocommerce-form-register__submit + label,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox {
	display: flex;
	align-items: center;
	gap: var(--tpm-space-2);
	font-weight: 400;
	font-size: 0.9375rem;
}

.woocommerce form .woocommerce-form-login__rememberme input,
.woocommerce form label.woocommerce-form__label-for-checkbox input {
	width: auto;
}

.woocommerce-LostPassword {
	margin-top: var(--tpm-space-3);
	font-size: 0.9375rem;
}
.woocommerce-LostPassword a { color: var(--tpm-color-primary); }

/* Login/Register two-column split — normalizes to the theme's own 782px
   breakpoint (WooCommerce's own default plugin CSS switches at 768px;
   this avoids the two disagreeing between 769-782px). */
.woocommerce-account .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tpm-space-6);
}
.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2 {
	flex: 1 1 280px;
	min-width: 0;
}

@media (max-width: 782px) {
	.woocommerce-account .u-columns.col2-set {
		flex-direction: column;
		gap: var(--tpm-space-5);
	}
}

/*
 * WooCommerce Buttons (Appearance > Customize > WooCommerce Store Design >
 * WooCommerce Buttons). body.tpm-wcbtn-filled + body.tpm-wcbtn-rounded is
 * the default combination (see techpromaster_woocommerce_button_body_classes()
 * in inc/woocommerce.php) and reproduces the theme's original button
 * styling exactly — solid background, 8px radius.
 *
 * Extended (WooCommerce Blocks support): `.wc-block-components-button` is
 * the single base class every Cart/Checkout/Mini Cart block button renders
 * with (Proceed to Checkout, Place Order, Apply Coupon, Update, Continue
 * Shopping, Mini Cart's "View cart"/"Go to checkout") — adding it to each
 * existing selector list means block buttons pick up the same admin-
 * controlled style/shape system as classic buttons for free, with no
 * separate rule set to keep in sync.
 */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
	border: 2px solid var(--tpm-color-primary);
	padding: var(--tpm-space-2) var(--tpm-space-4);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* Subtle press feedback — matches .tpm-btn's :active treatment in style.css. */
.woocommerce #respond input#submit:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.wc-block-components-button:active {
	transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce #respond input#submit:active,
	.woocommerce a.button:active,
	.woocommerce button.button:active,
	.woocommerce input.button:active,
	.wc-block-components-button:active {
		transform: none;
	}
}

/* Style: filled (default) */
body.tpm-wcbtn-filled .woocommerce #respond input#submit,
body.tpm-wcbtn-filled .woocommerce a.button,
body.tpm-wcbtn-filled .woocommerce button.button,
body.tpm-wcbtn-filled .woocommerce input.button,
body.tpm-wcbtn-filled .wc-block-components-button {
	background: var(--tpm-gradient-action);
	color: #fff;
}

body.tpm-wcbtn-filled .woocommerce #respond input#submit:hover,
body.tpm-wcbtn-filled .woocommerce a.button:hover,
body.tpm-wcbtn-filled .woocommerce button.button:hover,
body.tpm-wcbtn-filled .woocommerce input.button:hover,
body.tpm-wcbtn-filled .wc-block-components-button:hover {
	box-shadow: var(--tpm-shadow-hover);
	border-color: var(--tpm-color-primary-dark);
}

/* Style: outline */
body.tpm-wcbtn-outline .woocommerce #respond input#submit,
body.tpm-wcbtn-outline .woocommerce a.button,
body.tpm-wcbtn-outline .woocommerce button.button,
body.tpm-wcbtn-outline .woocommerce input.button,
body.tpm-wcbtn-outline .wc-block-components-button {
	background: transparent;
	color: var(--tpm-color-primary);
}

body.tpm-wcbtn-outline .woocommerce #respond input#submit:hover,
body.tpm-wcbtn-outline .woocommerce a.button:hover,
body.tpm-wcbtn-outline .woocommerce button.button:hover,
body.tpm-wcbtn-outline .woocommerce input.button:hover,
body.tpm-wcbtn-outline .wc-block-components-button:hover {
	background: var(--tpm-color-primary);
	color: #fff;
}

/* Style: ghost (no border until hover) */
body.tpm-wcbtn-ghost .woocommerce #respond input#submit,
body.tpm-wcbtn-ghost .woocommerce a.button,
body.tpm-wcbtn-ghost .woocommerce button.button,
body.tpm-wcbtn-ghost .woocommerce input.button,
body.tpm-wcbtn-ghost .wc-block-components-button {
	background: transparent;
	border-color: transparent;
	color: var(--tpm-color-primary);
}

body.tpm-wcbtn-ghost .woocommerce #respond input#submit:hover,
body.tpm-wcbtn-ghost .woocommerce a.button:hover,
body.tpm-wcbtn-ghost .woocommerce button.button:hover,
body.tpm-wcbtn-ghost .woocommerce input.button:hover,
body.tpm-wcbtn-ghost .wc-block-components-button:hover {
	background: var(--tpm-color-bg-alt);
	border-color: var(--tpm-color-primary);
}

/* Shape: rounded (default, 8px — matches --tpm-radius) */
body.tpm-wcbtn-rounded .woocommerce #respond input#submit,
body.tpm-wcbtn-rounded .woocommerce a.button,
body.tpm-wcbtn-rounded .woocommerce button.button,
body.tpm-wcbtn-rounded .woocommerce input.button,
body.tpm-wcbtn-rounded .wc-block-components-button {
	border-radius: var(--tpm-radius);
}

/* Shape: square */
body.tpm-wcbtn-square .woocommerce #respond input#submit,
body.tpm-wcbtn-square .woocommerce a.button,
body.tpm-wcbtn-square .woocommerce button.button,
body.tpm-wcbtn-square .woocommerce input.button,
body.tpm-wcbtn-square .wc-block-components-button {
	border-radius: 0;
}

/* Shape: pill */
body.tpm-wcbtn-pill .woocommerce #respond input#submit,
body.tpm-wcbtn-pill .woocommerce a.button,
body.tpm-wcbtn-pill .woocommerce button.button,
body.tpm-wcbtn-pill .woocommerce input.button,
body.tpm-wcbtn-pill .wc-block-components-button {
	border-radius: 999px;
}

/* Block buttons render a default `border-radius` from WooCommerce's own
   block-library stylesheet; the shape system above is `!important`-free by
   design (matching the rest of this file), so it's neutralized here first
   at equal specificity — the same admin-selected shape then always wins via
   normal cascade order (this rule prints earlier in the file). */
.wc-block-components-button { border-radius: var(--tpm-radius); }

/* Block buttons that are disabled (e.g. Place Order while validating) use
   WooCommerce's own `[aria-disabled="true"]` pattern rather than the native
   `disabled` attribute — themed to match .tpm-btn's disabled treatment. */
.wc-block-components-button[aria-disabled="true"],
.wc-block-components-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

@media (max-width: 782px) {
	.tpm-shop-layout { grid-template-columns: 1fr; }
	.tpm-shop-sidebar { grid-column: 1; }
}

@media (max-width: 480px) {
	.tpm-shop-layout { gap: var(--tpm-space-3); }
}

/* =========================================================
   My Account (inc/woocommerce-account.php, woocommerce/myaccount/*.php)
   Core WooCommerce classes (.woocommerce-MyAccount-navigation etc.) are
   retheme'd rather than replaced, same approach as the .woocommerce-message
   block above — the underlying markup/functionality stays 100% WooCommerce
   core (login, register, lost password, the account nav itself, Orders,
   Downloads, Account Details, Addresses all render through unmodified WC
   templates).
   ========================================================= */
.woocommerce-account .tpm-container { padding: var(--tpm-space-6) 0; }

/*
 * .tpm-single-content (page.php) has a 720px max-width from the
 * single-post/page layout rules (components.css), which would squeeze a
 * 240px-nav + content dashboard far narrower than intended, so that's
 * reset for this page specifically.
 */
.woocommerce-account .tpm-single-content {
	max-width: none;
}

/*
 * Vertical nav sidebar on the left (under the "My account" heading and
 * TechProMaster/Member-since brand block), content beside it to the
 * right — restored per explicit request after a previous change
 * mistakenly switched this to a horizontal-tabs-on-top, single-column
 * stacked layout instead.
 *
 * [woocommerce_my_account]'s own wrapper markup
 * (WC_Shortcode_My_Account::shortcode_wrapper()) nests nav/content one
 * level inside .tpm-single-content as `<div class="woocommerce">` >
 * `nav.woocommerce-MyAccount-navigation` + `div.woocommerce-MyAccount-content`.
 *
 * Scoped to .woocommerce-account-dashboard (logged-in only — see the
 * body_class filter in inc/woocommerce-account.php), not the more general
 * .woocommerce-account class, which is also present for logged-out
 * visitors where WooCommerce swaps in a login/register form (.col2-set)
 * instead of nav+content — nothing here should touch that state.
 */
.woocommerce-account-dashboard .tpm-single-content > .woocommerce {
	display: flex;
	flex-direction: column;
	gap: var(--tpm-space-5);
}
@media (min-width: 1024px) {
	.woocommerce-account-dashboard .tpm-single-content > .woocommerce {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--tpm-space-6);
	}
}

.tpm-account-sidebar-brand { padding: 0 0 var(--tpm-space-3); }
.tpm-account-sidebar-brand-title { margin: 0; font-family: var(--tpm-font-heading); font-size: 1.25rem; color: var(--tpm-color-text); }
.tpm-account-sidebar-brand-subtitle { margin: 2px 0 0; font-size: var(--tpm-text-label-sm-size); color: var(--tpm-color-text-muted); }
@media (max-width: 1023px) {
	.tpm-account-sidebar-brand { display: none; } /* only room for it once the nav is a vertical sidebar */
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--tpm-space-5);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--tpm-color-border);
}
.woocommerce-MyAccount-navigation li { margin: 0; flex: 0 0 auto; }

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0 0 var(--tpm-space-3);
	border-bottom: 2px solid transparent;
	color: var(--tpm-color-text-muted);
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	color: var(--tpm-color-text);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--tpm-color-primary);
	border-bottom-color: var(--tpm-color-primary);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--tpm-color-danger);
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--tpm-color-danger-text);
}

/* Desktop (≥1024px): fixed-width sticky vertical sidebar. `position:
   sticky` instead of `fixed` deliberately — achieves the same "stays in
   view while you scroll the content" effect without needing to
   hand-calculate a content margin-left to match, and without any risk of
   overlapping the theme's own sticky site header (sticky respects normal
   document flow, fixed does not). */
@media (min-width: 1024px) {
	.woocommerce-MyAccount-navigation {
		flex: 0 0 256px;
		position: sticky;
		top: calc(var(--tpm-header-height, 72px) + var(--tpm-space-4));
		align-self: flex-start;
		max-height: calc(100vh - var(--tpm-header-height, 72px) - var(--tpm-space-6));
		overflow-y: auto;
		padding-right: var(--tpm-space-2);
	}
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		overflow-x: visible;
		gap: 2px;
		border-bottom: none;
	}
	.woocommerce-MyAccount-navigation li a {
		padding: var(--tpm-space-2) var(--tpm-space-3);
		border-bottom: none;
		border-radius: var(--tpm-radius);
	}
	.woocommerce-MyAccount-navigation li a:hover { background: var(--tpm-color-bg-alt); }
	.woocommerce-MyAccount-navigation li.is-active a { background: rgba(0, 74, 198, 0.1); border-bottom: none; }
	[data-theme="dark"] .woocommerce-MyAccount-navigation li.is-active a { background: rgba(180, 197, 255, 0.14); }
	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: var(--tpm-space-4);
		padding-top: var(--tpm-space-4);
		border-top: 1px solid var(--tpm-color-border);
	}
	.woocommerce-account-dashboard .woocommerce-MyAccount-content { flex: 1 1 0; min-width: 0; }
}

/* -----------------------------------------------------------------------
   Dashboard hero (techpromaster_account_dashboard_hero())
   ----------------------------------------------------------------------- */
.tpm-account-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tpm-space-4);
	margin-bottom: var(--tpm-space-2);
	/*
	 * .tpm-account-hero, .tpm-account-bento, and .tpm-account-sidebar are
	 * three separate elements (three separate hooked functions in
	 * inc/woocommerce-account.php) that land as direct siblings inside
	 * .tpm-account-dashboard-view .woocommerce-MyAccount-content — a CSS
	 * Grid with grid-template-columns: 2fr 1fr (see that rule above).
	 * Without an explicit placement, the grid auto-places all three
	 * elements into its two columns like any other grid children — which
	 * scatters the hero into one column instead of sitting above both,
	 * producing exactly the "big empty gap, content in the wrong place"
	 * layout this rule fixes. `grid-column: 1 / -1` pins the hero to span
	 * the full width as its own row, so the bento grid and sidebar always
	 * lay out as the two columns below it, regardless of source order.
	 */
	grid-column: 1 / -1;
}
.tpm-account-hero-title {
	font-family: var(--tpm-font-heading);
	font-size: var(--tpm-text-headline-lg-size, 2rem);
	margin: 0 0 var(--tpm-space-1);
	color: var(--tpm-color-text);
}
.tpm-account-hero-subtitle { color: var(--tpm-color-text-muted); margin: 0; }
.tpm-account-hero-badge {
	flex: 0 0 auto;
	padding: var(--tpm-space-1) var(--tpm-space-3);
	border-radius: var(--tpm-radius-full);
	background: rgba(0, 74, 198, 0.1);
	color: var(--tpm-color-primary);
	border: 1px solid rgba(0, 74, 198, 0.2);
	font-weight: 700;
	font-size: 0.875rem;
	white-space: nowrap;
}
[data-theme="dark"] .tpm-account-hero-badge { background: rgba(180, 197, 255, 0.14); color: var(--tpm-color-primary-light); border-color: rgba(180, 197, 255, 0.24); }

/* -----------------------------------------------------------------------
   Dashboard body layout: bento grid (8/12) + sidebar (4/12), Stitch's
   lg:col-span-8 / lg:col-span-4 split. Scoped to .tpm-account-dashboard-view
   specifically (the base /my-account/ URL) — NOT every My Account subpage;
   Orders/Downloads/Account Details/Addresses each render a single child
   in .woocommerce-MyAccount-content (a table or a form), so applying a
   2-column grid there too would squeeze that single child into the first
   column at 66% width for no reason, leaving an empty second column.
   ----------------------------------------------------------------------- */
.tpm-account-dashboard-view .woocommerce-MyAccount-content {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--tpm-space-6);
	align-items: start;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}
@media (max-width: 900px) {
	.tpm-account-dashboard-view .woocommerce-MyAccount-content { grid-template-columns: 1fr; }
}
/* Every other My Account subpage: full-width, same "no default WC card
   chrome" reset, single column. */
.woocommerce-account-dashboard .woocommerce-MyAccount-content {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* -----------------------------------------------------------------------
   6-card bento grid (techpromaster_account_dashboard_bento())
   ----------------------------------------------------------------------- */
.tpm-account-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tpm-space-4);
}
@media (max-width: 900px) {
	.tpm-account-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.tpm-account-bento { grid-template-columns: 1fr; }
}
.tpm-account-bento-card {
	padding: var(--tpm-space-5);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	background: var(--tpm-color-bg);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.tpm-account-bento-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tpm-shadow-hover);
	border-color: rgba(0, 74, 198, 0.2);
}
.tpm-account-bento-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--tpm-space-3);
}
.tpm-account-bento-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--tpm-radius-md);
	background: rgba(0, 74, 198, 0.1);
	color: var(--tpm-color-primary);
}
.tpm-account-bento-card-icon .tpm-icon { width: 20px; height: 20px; }
[data-theme="dark"] .tpm-account-bento-card-icon { background: rgba(180, 197, 255, 0.14); color: var(--tpm-color-primary-light); }
.tpm-account-bento-card-badge {
	font-size: var(--tpm-text-label-sm-size);
	font-weight: 700;
	color: var(--tpm-color-primary);
	background: rgba(0, 74, 198, 0.1);
	padding: 2px var(--tpm-space-2);
	border-radius: var(--tpm-radius-full);
}
[data-theme="dark"] .tpm-account-bento-card-badge { background: rgba(180, 197, 255, 0.14); color: var(--tpm-color-primary-light); }
.tpm-account-bento-card-title { margin: 0 0 var(--tpm-space-1); font-size: 1rem; color: var(--tpm-color-text); }
.tpm-account-bento-card-desc { margin: 0 0 var(--tpm-space-3); color: var(--tpm-color-text-muted); font-size: 0.9375rem; }
.tpm-account-bento-card-link {
	display: inline-flex;
	align-items: center;
	gap: var(--tpm-space-1);
	color: var(--tpm-color-primary);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
}
.tpm-account-bento-card-link-arrow { display: inline-flex; transition: transform 0.15s ease; }
.tpm-account-bento-card-link-arrow .tpm-icon { width: 16px; height: 16px; }
.tpm-account-bento-card:hover .tpm-account-bento-card-link-arrow { transform: translateX(3px); }

/* -----------------------------------------------------------------------
   Sidebar (techpromaster_account_dashboard_sidebar())
   ----------------------------------------------------------------------- */
.tpm-account-sidebar { display: flex; flex-direction: column; gap: var(--tpm-space-4); }

.tpm-account-overview-card {
	position: relative;
	overflow: hidden;
	padding: var(--tpm-space-6);
	border-radius: var(--tpm-radius-xl);
	border: 1px solid var(--tpm-color-border);
	background: var(--tpm-color-bg-alt);
}
.tpm-account-overview-glow {
	position: absolute;
	top: -48px;
	right: -48px;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: rgba(0, 74, 198, 0.12);
	filter: blur(48px);
	pointer-events: none;
}
.tpm-account-overview-inner { position: relative; z-index: 1; }
.tpm-account-overview-head { display: flex; align-items: center; gap: var(--tpm-space-3); margin-bottom: var(--tpm-space-5); }
.tpm-account-overview-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: var(--tpm-radius-md);
	background: var(--tpm-color-primary);
	color: #fff;
}
.tpm-account-overview-icon .tpm-icon { width: 20px; height: 20px; }
.tpm-account-overview-title { margin: 0; font-size: 1.1rem; font-family: var(--tpm-font-heading); color: var(--tpm-color-text); }
.tpm-account-overview-subtitle { margin: 2px 0 0; font-size: 0.8125rem; color: var(--tpm-color-text-muted); word-break: break-word; }
.tpm-account-overview-stats { display: flex; flex-direction: column; gap: var(--tpm-space-3); margin-bottom: var(--tpm-space-5); }
.tpm-account-overview-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.9375rem; color: var(--tpm-color-text-muted); }
.tpm-account-overview-stat-value { font-weight: 700; color: var(--tpm-color-text); }
.tpm-account-overview-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tpm-space-2);
	width: 100%;
	padding: var(--tpm-space-3);
	border-radius: var(--tpm-radius-lg);
	background: var(--tpm-color-text);
	color: var(--tpm-color-bg);
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.tpm-account-overview-cta:hover { opacity: 0.85; }
.tpm-account-overview-cta .tpm-icon { width: 16px; height: 16px; transform: rotate(-90deg); }

.tpm-account-sidebar-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tpm-space-3); }
.tpm-account-sidebar-section-head h2 { margin: 0; font-size: var(--tpm-text-label-sm-size); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tpm-color-text-muted); }
.tpm-account-sidebar-section-head a { font-size: 0.8125rem; font-weight: 700; color: var(--tpm-color-primary); text-decoration: none; }
.tpm-account-sidebar-section-head a:hover { text-decoration: underline; }

.tpm-account-downloads-panel { padding: var(--tpm-space-4); border: 1px solid var(--tpm-color-border); border-radius: var(--tpm-radius-xl); background: var(--tpm-color-bg); }
.tpm-account-downloads-list { display: flex; flex-direction: column; gap: var(--tpm-space-2); }
.tpm-account-downloads-item { display: flex; align-items: center; gap: var(--tpm-space-2); padding: var(--tpm-space-2); border-radius: var(--tpm-radius); text-decoration: none; transition: background-color 0.15s ease; }
.tpm-account-downloads-item:hover { background: var(--tpm-color-bg-alt); }
.tpm-account-downloads-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--tpm-radius-md); background: rgba(0, 74, 198, 0.1); color: var(--tpm-color-primary); }
.tpm-account-downloads-item-icon .tpm-icon { width: 16px; height: 16px; }
[data-theme="dark"] .tpm-account-downloads-item-icon { background: rgba(180, 197, 255, 0.14); color: var(--tpm-color-primary-light); }
.tpm-account-downloads-item-name { font-weight: 700; color: var(--tpm-color-text); font-size: 0.9375rem; }

.tpm-account-settings-panel { padding: var(--tpm-space-5); border: 1px solid var(--tpm-color-border); border-radius: var(--tpm-radius-xl); background: var(--tpm-color-bg); }
.tpm-account-settings-panel h3 { margin: 0 0 var(--tpm-space-3); font-size: var(--tpm-text-label-sm-size); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tpm-color-text-muted); }
.tpm-account-settings-panel nav { display: flex; flex-direction: column; gap: 2px; }
.tpm-account-settings-link { display: flex; align-items: center; justify-content: space-between; padding: var(--tpm-space-2) var(--tpm-space-2); border-radius: var(--tpm-radius); text-decoration: none; color: var(--tpm-color-text); transition: background-color 0.15s ease; }
.tpm-account-settings-link:hover { background: var(--tpm-color-bg-alt); }
.tpm-account-settings-link-left { display: flex; align-items: center; gap: var(--tpm-space-3); font-weight: 600; }
.tpm-account-settings-link-icon { display: inline-flex; color: var(--tpm-color-text-muted); }
.tpm-account-settings-link-icon .tpm-icon { width: 18px; height: 18px; }
.tpm-account-settings-link:hover .tpm-account-settings-link-icon { color: var(--tpm-color-primary); }
.tpm-account-settings-link-chevron { display: inline-flex; color: var(--tpm-color-text-muted); opacity: 0; transition: opacity 0.15s ease; }
.tpm-account-settings-link-chevron .tpm-icon { width: 16px; height: 16px; transform: rotate(-90deg); }
.tpm-account-settings-link:hover .tpm-account-settings-link-chevron { opacity: 1; }

/*
 * Without a min-width override here, .woocommerce-MyAccount-content (the
 * 1fr grid track) keeps CSS Grid's default min-width:auto — a grid item is
 * never allowed to shrink below its content's own min-content size unless
 * min-width is explicitly overridden. A wide table (6 columns in Payment
 * Activity) then forces the whole 1fr track to expand past the space
 * actually available, pushing .tpm-single-content — and the page itself —
 * wider than the viewport, rather than letting
 * .tpm-payment-activity-table-wrap's own `overflow-x: auto` contain that
 * excess width internally as intended. Confirmed with a real-browser test
 * at 900px before this fix existed: the table wrapper itself had zero
 * internal overflow, but its grid-item ancestor did — the min-width:0
 * below is what actually fixes it.
 */
.woocommerce-MyAccount-content {
	background: var(--tpm-color-bg);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	box-shadow: var(--tpm-shadow);
	padding: var(--tpm-space-5);
	min-width: 0;
}

.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

/*
 * WooCommerce core's shop_table (Orders, Downloads) ships with no
 * horizontal-scroll wrapper of its own, unlike the theme's custom
 * Payment Activity table further down this file (which already has one
 * for exactly this reason). display:block on the table + overflow-x:auto
 * turns the table itself into a scroll container without needing a new
 * template override just to add a wrapping <div>.
 */
@media (max-width: 700px) {
	.woocommerce-MyAccount-content table.shop_table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-MyAccount-content table.shop_table tbody,
	.woocommerce-MyAccount-content table.shop_table thead,
	.woocommerce-MyAccount-content table.shop_table tr { display: table; width: 100%; table-layout: fixed; }
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	padding: var(--tpm-space-3);
	border-bottom: 1px solid var(--tpm-color-border);
	text-align: left;
}

/*
 * Still used by the sidebar's Recent Downloads panel (empty state) and by
 * the Payment Activity / Wishlist / Licenses placeholder templates —
 * kept even though the old summary-card/quick-link markup that originally
 * used these two selectors was replaced by the bento grid above.
 */
.tpm-account-summary-empty { color: var(--tpm-color-text-muted); font-size: 0.9375rem; margin: 0 0 var(--tpm-space-3); }
.tpm-account-section .tpm-empty-state { padding: var(--tpm-space-6) var(--tpm-space-4); }

/* Shared section header used by Payment Activity + the placeholder tabs */
.tpm-account-section-title { margin: 0 0 var(--tpm-space-2); }
.tpm-account-section-intro { color: var(--tpm-color-text-muted); margin: 0 0 var(--tpm-space-5); }

/* Card wrapper for every subpage that renders a .tpm-account-section
   (Payment Activity, Wishlist, Support, Licenses) — same border-radius/
   padding/background as the dashboard's bento cards, so every My Account
   subpage reads as one consistent design language rather than some pages
   being "cards" and others plain text on the page background. */
.tpm-account-section {
	padding: var(--tpm-space-5);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	background: var(--tpm-color-bg);
}

/* -----------------------------------------------------------------------
   Orders tab: stat bento bar (techpromaster_account_orders_stats())
   ----------------------------------------------------------------------- */
.tpm-account-orders-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--tpm-space-3);
	margin-bottom: var(--tpm-space-5);
}
@media (max-width: 700px) {
	.tpm-account-orders-stats { grid-template-columns: repeat(2, 1fr); }
}
.tpm-account-orders-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--tpm-space-4);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	background: var(--tpm-color-bg);
}
.tpm-account-orders-stat-label { font-size: var(--tpm-text-label-sm-size); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tpm-color-text-muted); }
.tpm-account-orders-stat-value { font-family: var(--tpm-font-heading); font-size: 1.375rem; font-weight: 700; color: var(--tpm-color-text); }

/* -----------------------------------------------------------------------
   Orders table → card list. Pure re-skin of WooCommerce core's real
   <table class="woocommerce-orders-table">: every <tr> becomes a card,
   every <td>/<th> becomes a flex cell. No template override — pagination,
   order actions (Pay/Cancel/View/Track, with their real nonced URLs from
   wc_get_account_orders_actions()), and pending statuses are all still
   100% core markup and core logic underneath this.
   ----------------------------------------------------------------------- */
.woocommerce-orders-table { border: none; border-collapse: separate; border-spacing: 0; width: 100%; display: flex; flex-direction: column; gap: var(--tpm-space-3); }
.woocommerce-orders-table thead { display: none; } /* column headers redundant once each row is a labeled card */
.woocommerce-orders-table tbody { display: flex; flex-direction: column; gap: var(--tpm-space-3); }
.woocommerce-orders-table__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tpm-space-4);
	padding: var(--tpm-space-5);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	background: var(--tpm-color-bg);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.woocommerce-orders-table__row:hover { transform: translateY(-2px); box-shadow: var(--tpm-shadow-hover); }
.woocommerce-orders-table__cell,
.woocommerce-orders-table__row > th.woocommerce-orders-table__cell {
	display: block;
	border: none;
	padding: 0;
	background: transparent;
}
.woocommerce-orders-table__cell::before { content: none; } /* remove shop_table_responsive's default ":before { content: attr(data-title) }" — cards carry their own labels below */
.woocommerce-orders-table__cell-order-number { font-family: var(--tpm-font-heading); font-size: 1rem; }
.woocommerce-orders-table__cell-order-number a { color: var(--tpm-color-text); text-decoration: none; }
.woocommerce-orders-table__cell-order-number a:hover { color: var(--tpm-color-primary); }
.woocommerce-orders-table__cell-order-date { color: var(--tpm-color-text-muted); font-size: 0.875rem; }
.woocommerce-orders-table__cell-order-date time::before { content: attr(data-title) '\A'; white-space: pre; font-size: var(--tpm-text-label-sm-size); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tpm-color-text-muted); display: none; }
.woocommerce-orders-table__cell-order-total { font-family: var(--tpm-font-heading); font-size: 1.0625rem; font-weight: 700; text-align: right; }
.woocommerce-orders-table__cell-order-status {
	padding: 2px var(--tpm-space-3);
	border-radius: var(--tpm-radius-full);
	font-size: var(--tpm-text-label-sm-size);
	font-weight: 700;
	background: var(--tpm-color-bg-alt);
	color: var(--tpm-color-text-muted);
	white-space: nowrap;
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	background: var(--tpm-color-success-bg); color: var(--tpm-color-success-text);
}
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
	background: var(--tpm-color-warning-bg); color: var(--tpm-color-warning-text);
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	background: var(--tpm-color-danger-bg); color: var(--tpm-color-danger-text);
}
.woocommerce-orders-table__cell-order-actions { display: flex; gap: var(--tpm-space-2); flex-wrap: wrap; }
.woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	padding: var(--tpm-space-2) var(--tpm-space-4);
	border-radius: var(--tpm-radius);
	border: 1px solid var(--tpm-color-border);
	background: var(--tpm-color-bg);
	color: var(--tpm-color-text);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.woocommerce-orders-table__cell-order-actions .button.view { background: var(--tpm-color-primary); border-color: var(--tpm-color-primary); color: #fff; }
.woocommerce-orders-table__cell-order-actions .button.pay { background: var(--tpm-color-primary); border-color: var(--tpm-color-primary); color: #fff; }
.woocommerce-orders-table__cell-order-actions .button:not(.view):not(.pay):hover { border-color: var(--tpm-color-primary); }
@media (max-width: 480px) {
	.woocommerce-orders-table__row { flex-direction: column; align-items: flex-start; }
	.woocommerce-orders-table__cell-order-total { text-align: left; }
}

/* -----------------------------------------------------------------------
   Downloads table (woocommerce/order/order-downloads.php's real markup,
   shared by both the account Downloads tab and a single order's detail
   page) → compact card-row list. Same "re-skin the real table, don't
   override the template" approach as Orders above.
   ----------------------------------------------------------------------- */
.woocommerce-table--order-downloads { border: none; border-collapse: separate; width: 100%; }
.woocommerce-table--order-downloads thead { display: none; }
.woocommerce-table--order-downloads tbody,
.woocommerce-table--order-downloads { display: flex; flex-direction: column; gap: var(--tpm-space-2); }
.woocommerce-table--order-downloads tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tpm-space-3);
	padding: var(--tpm-space-3) var(--tpm-space-4);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-lg);
	background: var(--tpm-color-bg);
}
.woocommerce-table--order-downloads td { display: block; border: none; padding: 0; }
.woocommerce-table--order-downloads .download-product { font-weight: 700; color: var(--tpm-color-text); }
.woocommerce-table--order-downloads .download-product a { color: inherit; text-decoration: none; }
.woocommerce-table--order-downloads .download-remaining,
.woocommerce-table--order-downloads .download-expires { color: var(--tpm-color-text-muted); font-size: 0.8125rem; }
.woocommerce-table--order-downloads .download-file .woocommerce-MyAccount-downloads-file {
	display: inline-flex;
	align-items: center;
	padding: var(--tpm-space-2) var(--tpm-space-4);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.875rem;
}

/* -----------------------------------------------------------------------
   Account Details (woocommerce-EditAccountForm — 100% core markup,
   CSS-only restyle; every name/id/nonce/required attribute untouched)
   ----------------------------------------------------------------------- */
.woocommerce-EditAccountForm { max-width: 640px; }
.woocommerce-EditAccountForm .form-row { margin-bottom: var(--tpm-space-4); }
.woocommerce-EditAccountForm .form-row-first { width: 48%; float: left; }
.woocommerce-EditAccountForm .form-row-last { width: 48%; float: right; }
.woocommerce-EditAccountForm label { display: block; margin-bottom: var(--tpm-space-1); font-weight: 600; color: var(--tpm-color-text); font-size: 0.9375rem; }
.woocommerce-EditAccountForm .woocommerce-Input {
	width: 100%;
	padding: var(--tpm-space-2) var(--tpm-space-3);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-surface);
	color: var(--tpm-color-text);
	font: inherit;
	transition: border-color 0.15s ease;
}
.woocommerce-EditAccountForm .woocommerce-Input:focus { border-color: var(--tpm-color-primary); outline: none; box-shadow: var(--tpm-shadow-focus-ring); }
.woocommerce-EditAccountForm fieldset {
	margin: var(--tpm-space-6) 0 0;
	padding: var(--tpm-space-5);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	background: var(--tpm-color-bg-alt);
}
.woocommerce-EditAccountForm fieldset legend { font-family: var(--tpm-font-heading); font-size: 1.0625rem; padding: 0 var(--tpm-space-2); }
.woocommerce-EditAccountForm button[name="save_account_details"] {
	margin-top: var(--tpm-space-5);
	padding: var(--tpm-space-3) var(--tpm-space-6);
	border-radius: var(--tpm-radius-lg);
	border: none;
	background: var(--tpm-color-primary);
	color: #fff;
	font-weight: 700;
}

/* -----------------------------------------------------------------------
   Addresses (woocommerce-Addresses/.woocommerce-Address — 100% core
   markup, CSS-only restyle; the real Edit links/formatted-address output
   are untouched)
   ----------------------------------------------------------------------- */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tpm-space-4); }
@media (max-width: 700px) { .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-Address {
	padding: var(--tpm-space-5);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	background: var(--tpm-color-bg);
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tpm-space-3); }
.woocommerce-Address-title h2 { margin: 0; font-size: 1.0625rem; font-family: var(--tpm-font-heading); }
.woocommerce-Address-title .edit { color: var(--tpm-color-primary); font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.woocommerce-Address-title .edit:hover { text-decoration: underline; }
.woocommerce-Address address { font-style: normal; color: var(--tpm-color-text-muted); line-height: 1.6; }

/* Status badges (Payment Activity) */
.tpm-status-badge {
	display: inline-block;
	padding: 2px var(--tpm-space-2);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
}
.tpm-status-badge--pending    { background: rgba(217, 119, 6, 0.15); color: #92400e; }
.tpm-status-badge--processing { background: rgba(8, 145, 178, 0.15); color: #155e75; }
.tpm-status-badge--failed     { background: rgba(220, 38, 38, 0.15); color: #b91c1c; }
.tpm-status-badge--cancelled  { background: var(--tpm-color-bg-alt); color: var(--tpm-color-text-muted); }
.tpm-status-badge--completed  { background: rgba(22, 163, 74, 0.15); color: #166534; }
.tpm-status-badge--refunded   { background: rgba(0, 74, 198, 0.12); color: var(--tpm-color-primary-dark); }
.tpm-status-badge--other      { background: var(--tpm-color-bg-alt); color: var(--tpm-color-text); }
[data-theme="dark"] .tpm-status-badge--pending    { color: #fbbf24; }
[data-theme="dark"] .tpm-status-badge--processing { color: #22d3ee; }
[data-theme="dark"] .tpm-status-badge--cancelled  { color: var(--tpm-color-text); }
[data-theme="dark"] .tpm-status-badge--completed  { color: #22c55e; }
/*
 * --failed and --refunded were the only two of six badge variants left
 * without a dark-mode override — both inherited their light-mode color
 * (var(--tpm-color-danger)/var(--tpm-color-primary), neither redefined
 * for dark mode), which measured 2.55:1 and 2.80:1 against the dark
 * surface background — well under the 4.5:1 WCAG AA minimum for text
 * this size. Same Tailwind-400-shade lightening as the four above,
 * verified at 4.9-6.3:1 against every surface color used in dark mode.
 */
[data-theme="dark"] .tpm-status-badge--failed     { color: #f87171; }
[data-theme="dark"] .tpm-status-badge--refunded   { color: var(--tpm-color-primary-light); }

/* Payment Activity table */

/*
 * Both axes are set explicitly (not just overflow-x) — relying on the CSS
 * spec's "an unset visible axis is computed as auto when the other axis is
 * non-visible" coupling rule was NOT actually enough to make this wrapper
 * a fully isolated scroll container in practice: a real-browser test found
 * the table's excess width was still making the whole PAGE horizontally
 * scrollable (confirmed by scrolling window.scrollX itself, not just
 * reading scrollWidth, which is otherwise all too easy to misread — see
 * the milestone report), not just this wrapper as intended. Declaring
 * overflow-y explicitly removes any dependence on that implicit
 * conversion actually taking effect.
 */
.tpm-payment-activity-table-wrap { overflow-x: auto; overflow-y: hidden; contain: layout; }
.tpm-payment-activity-table { width: 100%; border-collapse: collapse; }

.tpm-payment-activity-table th,
.tpm-payment-activity-table td {
	padding: var(--tpm-space-3);
	border-bottom: 1px solid var(--tpm-color-border);
	text-align: left;
	vertical-align: middle;
}
.tpm-payment-activity-table th { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpm-color-text-muted); }
.tpm-payment-activity-order-link { display: block; color: var(--tpm-color-text); font-weight: 600; text-decoration: none; }
.tpm-payment-activity-order-link:hover { color: var(--tpm-color-primary); }
.tpm-payment-activity-view-link { color: var(--tpm-color-primary); font-weight: 600; text-decoration: none; }
.tpm-payment-activity-view-link:hover { text-decoration: underline; }

@media (max-width: 782px) {
	.woocommerce-account .tpm-container { padding: var(--tpm-space-4) 0; }
	.woocommerce-account-dashboard .tpm-single-content > .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-content { padding: var(--tpm-space-4); }

	/* Payment Activity table -> stacked cards, each cell labeled via data-label (set in payment-activity.php) */
	.tpm-payment-activity-table thead { display: none; }

	.tpm-payment-activity-table,
	.tpm-payment-activity-table tbody,
	.tpm-payment-activity-table tr,
	.tpm-payment-activity-table td { display: block; width: 100%; }

	.tpm-payment-activity-table tr {
		margin-bottom: var(--tpm-space-3);
		border: 1px solid var(--tpm-color-border);
		border-radius: var(--tpm-radius-lg);
		overflow: hidden;
	}

	.tpm-payment-activity-table td {
		border-bottom: 1px solid var(--tpm-color-border);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--tpm-space-3);
		text-align: right;
	}
	.tpm-payment-activity-table td:last-child { border-bottom: none; }

	.tpm-payment-activity-table td::before {
		content: attr(data-label);
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--tpm-color-text-muted);
		text-align: left;
	}
	.tpm-payment-activity-order-link { text-align: right; }
}

/* =========================================================================
   PHASE 6 — WooCommerce storefront (Stitch "Neo-Editorial Tech" migration)
   Everything below styles WooCommerce CORE templates (no new PHP template
   overrides were created for these — cart, checkout, single-product
   gallery/summary/tabs/reviews, related/upsell/cross-sell — the theme
   already reliably CSS-themes these via WooCommerce's own well-known
   class names + action/filter hooks, same pattern as everything above
   this line). All WooCommerce business logic, hooks, and calculations
   are untouched; this is a presentation-only pass.
   ========================================================================= */

/* -----------------------------------------------------------------------
   Breadcrumbs (woocommerce_breadcrumb(), shown by default above the shop
   loop and above the single product). Real dynamic trail from WC core —
   not the theme's own template-parts/global/breadcrumbs.php (that part
   is for post/page content only), but styled to match it visually.
   ----------------------------------------------------------------------- */
.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: var(--tpm-text-label-sm-size);
	color: var(--tpm-color-text-muted);
	margin: var(--tpm-space-4) 0;
}
.woocommerce-breadcrumb a { color: var(--tpm-color-text-muted); }
.woocommerce-breadcrumb a:hover, .woocommerce-breadcrumb a:focus-visible { color: var(--tpm-color-primary); }

/* -----------------------------------------------------------------------
   Single product — gallery
   ----------------------------------------------------------------------- */
.woocommerce div.product div.images {
	border-radius: var(--tpm-radius-xl);
	overflow: hidden;
	background: var(--tpm-color-bg-alt);
}
.woocommerce div.product div.images img { border-radius: 0; }
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tpm-space-2);
	margin: var(--tpm-space-3) 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: 72px; }
.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--tpm-radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--tpm-color-primary); }
.woocommerce div.product .woocommerce-product-gallery__trigger {
	background: var(--tpm-color-bg);
	border-radius: var(--tpm-radius-full);
	width: 40px;
	height: 40px;
	box-shadow: var(--tpm-shadow);
}

/* -----------------------------------------------------------------------
   Single product — summary column
   ----------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-family: var(--tpm-font-heading);
	font-size: var(--tpm-text-headline-xl-size);
	font-weight: var(--tpm-text-headline-xl-weight);
	letter-spacing: var(--tpm-text-headline-xl-ls);
	margin: 0 0 var(--tpm-space-2);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--tpm-font-heading);
	font-size: var(--tpm-text-headline-lg-size);
	font-weight: 700;
	margin: 0 0 var(--tpm-space-3);
}
.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--tpm-space-2);
	margin-bottom: var(--tpm-space-3);
}
.woocommerce div.product .woocommerce-review-link { color: var(--tpm-color-text-muted); font-size: var(--tpm-text-label-sm-size); }
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--tpm-color-text-muted);
	font-size: var(--tpm-text-body-lg-size);
	line-height: var(--tpm-text-body-lg-lh);
	margin-bottom: var(--tpm-space-4);
}
.woocommerce div.product .product_meta {
	margin-top: var(--tpm-space-5);
	padding-top: var(--tpm-space-4);
	border-top: 1px solid var(--tpm-color-divider);
	font-size: var(--tpm-text-label-sm-size);
	color: var(--tpm-color-text-muted);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .product_meta a { color: var(--tpm-color-text-muted); }
.woocommerce div.product .stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: var(--tpm-text-label-md-size);
	margin-bottom: var(--tpm-space-3);
}
.woocommerce div.product .stock.in-stock { color: var(--tpm-color-success-text); }
.woocommerce div.product .stock.out-of-stock { color: var(--tpm-color-danger-text); }

/* Variation form (dropdowns already themed via the generic
   .woocommerce form select rules above; this adds the swatch-like
   spacing/reset link Stitch's variable-product mock shows). */
.woocommerce div.product table.variations { margin-bottom: var(--tpm-space-4); }
.woocommerce div.product table.variations td { padding: var(--tpm-space-2) 0; }
.woocommerce div.product table.variations label { font-weight: 600; }
.woocommerce div.product .reset_variations { font-size: var(--tpm-text-label-sm-size); color: var(--tpm-color-primary); margin-left: var(--tpm-space-2); }
.woocommerce div.product .woocommerce-variation-price .price { font-size: var(--tpm-text-headline-md-size); }

/* Quantity stepper */
.woocommerce div.product form.cart .quantity,
.woocommerce table.shop_table .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	overflow: hidden;
}
.woocommerce div.product form.cart .quantity .qty,
.woocommerce table.shop_table .quantity .qty {
	width: 56px;
	border: none;
	text-align: center;
	background: var(--tpm-color-bg);
	color: var(--tpm-color-text);
	font-weight: 600;
	-moz-appearance: textfield;
}
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tpm-space-3);
}
.woocommerce div.product form.cart .button {
	min-height: 48px;
}

/* -----------------------------------------------------------------------
   Product tabs (Description / Additional Information / Reviews)
   ----------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--tpm-space-7);
	border-top: 1px solid var(--tpm-color-divider);
	padding-top: var(--tpm-space-5);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tpm-space-2);
	margin: 0 0 var(--tpm-space-5);
	padding: 0;
	border-bottom: 1px solid var(--tpm-color-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--tpm-space-2) var(--tpm-space-1);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	font-size: var(--tpm-text-label-md-size);
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--tpm-color-primary); }
[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--tpm-color-primary-light); border-bottom-color: var(--tpm-color-primary-light); }
.woocommerce div.product .woocommerce-tabs .panel {
	color: var(--tpm-color-text-muted);
	font-size: var(--tpm-text-body-lg-size);
	line-height: var(--tpm-text-body-lg-lh);
	max-width: 720px;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--tpm-font-heading); color: var(--tpm-color-text); }
.woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; margin-top: var(--tpm-space-3); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { padding: var(--tpm-space-2) var(--tpm-space-3); border-bottom: 1px solid var(--tpm-color-divider); text-align: left; }
.woocommerce table.shop_attributes th { width: 200px; color: var(--tpm-color-text); font-weight: 600; }

/* -----------------------------------------------------------------------
   Reviews
   ----------------------------------------------------------------------- */
#reviews #comments ol.commentlist { list-style: none; margin: 0; padding: 0; }
#reviews #comments .comment { display: flex; gap: var(--tpm-space-3); padding: var(--tpm-space-4) 0; border-bottom: 1px solid var(--tpm-color-divider); }
#reviews #comments .comment img.avatar { border-radius: var(--tpm-radius-full); flex-shrink: 0; }
#reviews #comments .comment_container { flex: 1; }
#reviews #comments .woocommerce-review__author { font-weight: 700; color: var(--tpm-color-text); }
#reviews #comments .woocommerce-review__dash { color: var(--tpm-color-text-muted); margin: 0 4px; }
#reviews #comments .woocommerce-review__published-date { color: var(--tpm-color-text-muted); font-size: var(--tpm-text-label-sm-size); }
#reviews #comments .star-rating { margin: 4px 0; }
#reviews #comment_post_ID,
#reviews .comment-form-rating select { display: none; } /* replaced visually by the star-rating widget WC already injects via JS; avoids a duplicate raw <select>. */
#reviews .comment-form-rating p.stars a { color: var(--tpm-color-text-muted); }
#reviews .comment-form-rating p.stars a:hover, #reviews .comment-form-rating p.stars a.active { color: var(--tpm-color-secondary, var(--tpm-color-primary)); }
#reviews #respond textarea { min-height: 120px; }

/* -----------------------------------------------------------------------
   Related products / upsells / cross-sells — reuse .tpm-card-grid + the
   existing .tpm-section-heading pattern rather than introducing new CSS,
   since content-product.php already renders these loops through the
   theme's own .tpm-card component (WooCommerce calls wc_get_template_part(
   'content', 'product' ) for these sections too, same as the shop loop).
   ----------------------------------------------------------------------- */
.related.products,
.up-sells.upsells.products,
.woocommerce-page.woocommerce-cart .cross-sells {
	margin-top: var(--tpm-space-7);
	padding-top: var(--tpm-space-6);
	border-top: 1px solid var(--tpm-color-divider);
}
.related.products > h2,
.up-sells.upsells.products > h2,
.cross-sells > h2 {
	font-family: var(--tpm-font-heading);
	font-size: var(--tpm-text-headline-lg-size);
	font-weight: var(--tpm-text-headline-lg-weight);
	margin: 0 0 var(--tpm-space-4);
}
.related.products ul.products,
.up-sells.upsells.products ul.products,
.cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tpm-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.cross-sells ul.products { grid-template-columns: repeat(2, 1fr); }

/* -----------------------------------------------------------------------
   Cart page
   ----------------------------------------------------------------------- */
.woocommerce table.shop_table.cart,
.woocommerce-cart-form table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce table.shop_table.cart th {
	text-align: left;
	padding: var(--tpm-space-3);
	font-size: var(--tpm-text-label-sm-size);
	text-transform: uppercase;
	letter-spacing: var(--tpm-text-label-sm-ls);
	color: var(--tpm-color-text-muted);
	border-bottom: 1px solid var(--tpm-color-border);
}
.woocommerce table.shop_table.cart td {
	padding: var(--tpm-space-3);
	border-bottom: 1px solid var(--tpm-color-divider);
	vertical-align: middle;
}
.woocommerce table.shop_table.cart td.product-thumbnail img {
	border-radius: var(--tpm-radius-md);
	width: 72px;
	height: 72px;
	object-fit: cover;
}
.woocommerce table.shop_table.cart td.product-name a { color: var(--tpm-color-text); font-weight: 600; }
.woocommerce table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--tpm-radius-full);
	background: var(--tpm-color-danger-bg);
	color: var(--tpm-color-danger-text) !important;
	text-decoration: none;
	font-weight: 700;
}
.woocommerce table.shop_table.cart td.product-remove a.remove:hover { background: var(--tpm-color-danger); color: #fff !important; }

.woocommerce-cart .coupon { display: flex; gap: var(--tpm-space-2); align-items: center; flex-wrap: wrap; }
.woocommerce-cart .coupon .input-text {
	padding: var(--tpm-space-2) var(--tpm-space-3);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-bg);
	color: var(--tpm-color-text);
	min-height: 44px;
}

.cart_totals,
.woocommerce-checkout-review-order {
	background: var(--tpm-color-bg-alt);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	padding: var(--tpm-space-5);
}
.cart_totals h2,
#order_review_heading {
	font-family: var(--tpm-font-heading);
	font-size: var(--tpm-text-headline-md-size);
	margin: 0 0 var(--tpm-space-4);
}
.cart_totals table.shop_table,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: var(--tpm-space-2) 0;
	border-bottom: 1px solid var(--tpm-color-divider);
	text-align: left;
}
.cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total td {
	font-size: var(--tpm-text-headline-md-size);
	font-weight: 700;
	color: var(--tpm-color-text);
	border-bottom: none;
}
.wc-proceed-to-checkout { margin-top: var(--tpm-space-4); }
.wc-proceed-to-checkout .button { width: 100%; }

@media (min-width: 900px) {
	.woocommerce-cart .tpm-container > .woocommerce {
		display: grid;
		grid-template-columns: 1fr 380px;
		gap: var(--tpm-space-6);
		align-items: start;
	}
}

/* -----------------------------------------------------------------------
   Checkout page
   ----------------------------------------------------------------------- */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1fr 380px;
		gap: var(--tpm-space-6);
		align-items: start;
	}
	#order_review, #order_review_heading { grid-column: 2; }
	.col2-set.woocommerce-checkout { grid-column: 1; }
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #ship-to-different-address {
	font-family: var(--tpm-font-heading);
	font-size: var(--tpm-text-headline-md-size);
	margin: 0 0 var(--tpm-space-4);
}
.woocommerce-checkout .woocommerce-additional-fields { margin-top: var(--tpm-space-5); }
.woocommerce-checkout #payment {
	background: var(--tpm-color-bg-alt);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-lg);
	padding: var(--tpm-space-4);
	margin-top: var(--tpm-space-4);
}
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--tpm-space-3) 0;
	border-bottom: 1px solid var(--tpm-color-divider);
}
.woocommerce-checkout #payment ul.payment_methods li:last-of-type { border-bottom: none; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; margin-left: var(--tpm-space-2); }
.woocommerce-checkout #payment div.payment_box {
	background: var(--tpm-color-bg);
	border-radius: var(--tpm-radius);
	padding: var(--tpm-space-3);
	margin-top: var(--tpm-space-2);
	font-size: var(--tpm-text-label-sm-size);
	color: var(--tpm-color-text-muted);
}
.woocommerce-checkout #place_order { width: 100%; margin-top: var(--tpm-space-4); min-height: 52px; font-size: var(--tpm-text-label-md-size); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: var(--tpm-space-3) 0; font-size: var(--tpm-text-label-sm-size); color: var(--tpm-color-text-muted); }

/* -----------------------------------------------------------------------
   Login / register (core .col2-set on the My Account page when logged
   out, OR the new woocommerce/myaccount/form-login.php override below —
   this styles both, since the override reuses the same core classes).
   ----------------------------------------------------------------------- */
.tpm-auth-panel {
	max-width: 440px;
	margin: var(--tpm-space-6) auto;
	padding: var(--tpm-space-6);
	background: var(--tpm-color-bg);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
	box-shadow: var(--tpm-shadow);
}
.tpm-auth-panel-header { text-align: center; margin-bottom: var(--tpm-space-5); }
.tpm-auth-panel-header h1 { font-family: var(--tpm-font-heading); font-size: var(--tpm-text-headline-lg-size); margin: 0 0 var(--tpm-space-2); }
.tpm-auth-panel-header p { color: var(--tpm-color-text-muted); margin: 0; }
.tpm-auth-divider { display: flex; align-items: center; gap: var(--tpm-space-3); margin: var(--tpm-space-5) 0; color: var(--tpm-color-text-muted); font-size: var(--tpm-text-label-sm-size); }
.tpm-auth-divider::before, .tpm-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--tpm-color-divider); }
.tpm-auth-panel .woocommerce-form-login__submit,
.tpm-auth-panel .woocommerce-form-register__submit { width: 100%; }

@media (max-width: 900px) {
	.woocommerce-cart .tpm-container > .woocommerce,
	.woocommerce-checkout form.checkout { display: block; }
	.cart_totals, .woocommerce-checkout-review-order { margin-top: var(--tpm-space-5); }
}

@media (max-width: 782px) {
	.related.products ul.products,
	.up-sells.upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }
	.cross-sells ul.products { grid-template-columns: 1fr; }
	.woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   WOOCOMMERCE BLOCKS — Cart / Checkout / Mini Cart / Product Collection

   Presentation only — no block attribute defaults, hooks, checkout flow,
   payment gateway integration, or data source is touched anywhere below.
   Every rule below is CSS targeting WooCommerce Blocks' own documented,
   stable output classes (the `.wc-block-*` / `.wp-block-woocommerce-*`
   families WooCommerce itself renders and has never repurposed for theme
   styling hooks). Extends the same --tpm-* design tokens, the button
   style/shape system above, .tpm-empty-state, and .tpm-spinner already
   used by the classic templates — nothing here is a parallel component
   set. Loaded via the same `techpromaster-woocommerce` handle already
   enqueued on is_cart() / is_checkout() (inc/enqueue.php) — classic and
   block markup share one page, so no separate enqueue was needed.
   ========================================================================= */

/* -----------------------------------------------------------------------
   Cart Block & Checkout Block — shared two-column layout
   Mirrors the classic-template grid immediately above (1fr / 380px,
   same 900px breakpoint, same gap) so switching a store between classic
   and block templates never changes the page's overall proportions.
   ----------------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart,
.wp-block-woocommerce-checkout .wc-block-checkout {
	gap: var(--tpm-space-6);
}
@media (min-width: 900px) {
	.wp-block-woocommerce-cart .wc-block-cart__main,
	.wp-block-woocommerce-checkout .wc-block-checkout__main { flex-basis: 0; flex-grow: 1; }
	.wp-block-woocommerce-cart .wc-block-cart__sidebar,
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { flex-basis: 380px; flex-grow: 0; }
}
.wc-block-cart__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper {
	background: var(--tpm-color-bg-alt);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-xl);
}
.wc-block-components-sidebar-layout .wc-block-components-main { padding-right: 0; }

/* Cart items list — reuses the classic cart row's spacing/typography scale. */
.wc-block-cart-items__header,
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--tpm-color-divider);
	padding: var(--tpm-space-3) 0;
}
.wc-block-cart-items__header {
	color: var(--tpm-color-text-muted);
	font-size: var(--tpm-text-label-sm-size);
	text-transform: uppercase;
	letter-spacing: var(--tpm-text-label-sm-ls);
}
.wc-block-cart-item__image img,
.wc-block-components-product-image img {
	border-radius: var(--tpm-radius-md);
}
.wc-block-cart-item__product-name,
.wc-block-components-product-name {
	color: var(--tpm-color-text);
	font-weight: 600;
	text-decoration: none;
}
.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata a.remove {
	color: var(--tpm-color-danger-text);
}

/* -----------------------------------------------------------------------
   Form fields — text inputs, selects, address form (billing/shipping)
   Same visual spec as the classic `.woocommerce-Input` rule earlier in
   this file (border, radius, surface color, focus border) so a shopper
   never sees two different-looking input styles on the same order.
   ----------------------------------------------------------------------- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-address-form input,
.wc-block-components-combobox-control input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-surface);
	color: var(--tpm-color-text);
	font: inherit;
	font-size: 0.9375rem;
	transition: border-color 0.15s ease;
}
.wc-block-components-text-input label,
.wc-block-components-select select ~ label {
	color: var(--tpm-color-text-muted);
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
	border-color: var(--tpm-color-primary);
}
.wc-block-components-text-input input:focus-visible,
.wc-block-components-address-form input:focus-visible,
.wc-block-components-select select:focus-visible,
.wc-block-components-textarea textarea:focus-visible,
.wc-block-components-combobox-control input:focus-visible {
	outline: none;
	box-shadow: var(--tpm-shadow-focus-ring);
}

/* Checkboxes / radio buttons — "save my address", newsletter opt-in,
   shipping/payment method selection. */
.wc-block-components-checkbox svg,
.wc-block-components-radio-control__input {
	accent-color: var(--tpm-color-primary);
}
.wc-block-components-checkbox input[type="checkbox"]:focus-visible ~ svg,
.wc-block-components-radio-control__input:focus-visible {
	outline: none;
	box-shadow: var(--tpm-shadow-focus-ring);
	border-radius: var(--tpm-radius-sm);
}
.wc-block-components-radio-control__option {
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-bg);
	transition: border-color 0.15s ease;
}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked) {
	border-color: var(--tpm-color-primary);
}

/* -----------------------------------------------------------------------
   Order summary / totals — mirrors .cart_totals / #order_review_heading
   typography and the order-total row's emphasis treatment from the
   classic-template section above.
   ----------------------------------------------------------------------- */
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
	padding: var(--tpm-space-5);
}
.wc-block-components-panel__button,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-cart__totals-title {
	font-family: var(--tpm-font-heading);
	font-size: var(--tpm-text-headline-md-size);
	color: var(--tpm-color-text);
}
.wc-block-components-totals-item {
	border-bottom: 1px solid var(--tpm-color-divider);
	padding: var(--tpm-space-2) 0;
}
.wc-block-components-totals-footer-item,
.wc-block-components-totals-item.wc-block-components-totals-footer-item {
	border-bottom: none;
	font-size: var(--tpm-text-headline-md-size);
	font-weight: 700;
	color: var(--tpm-color-text);
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description { color: var(--tpm-color-text-muted); }

/* Coupon section — matches the classic `.woocommerce-cart .coupon` input. */
.wc-block-components-totals-coupon__input input {
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-bg);
	color: var(--tpm-color-text);
	min-height: 44px;
}
.wc-block-components-totals-coupon-link { color: var(--tpm-color-primary); }

/* Payment methods list — same list rhythm as the classic
   `#payment ul.payment_methods` rule above. */
.wc-block-components-payment-methods,
.wc-block-checkout__payment-method {
	background: var(--tpm-color-bg-alt);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-lg);
}
.wc-block-components-radio-control-accordion-option {
	border-bottom: 1px solid var(--tpm-color-divider);
}
.wc-block-components-radio-control-accordion-option:last-of-type { border-bottom: none; }
.wc-block-components-payment-method-label { font-weight: 600; color: var(--tpm-color-text); }
.wc-block-components-payment-method-icons img { border-radius: var(--tpm-radius-sm); }

/* -----------------------------------------------------------------------
   Notices & validation messages — same color language as the classic
   `.woocommerce-message` / `.woocommerce-error` rule near the top of
   this file (success = primary/border-top accent, error = danger).
   ----------------------------------------------------------------------- */
.wc-block-components-notice-banner {
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-bg-alt);
	color: var(--tpm-color-text);
	border-left: 4px solid var(--tpm-color-primary);
}
.wc-block-components-notice-banner.is-error { border-left-color: var(--tpm-color-danger); background: var(--tpm-color-danger-bg); color: var(--tpm-color-danger-text); }
.wc-block-components-notice-banner.is-success { border-left-color: var(--tpm-color-success); background: var(--tpm-color-success-bg); color: var(--tpm-color-success-text); }
.wc-block-components-notice-banner.is-warning { border-left-color: var(--tpm-color-warning); background: var(--tpm-color-warning-bg); color: var(--tpm-color-warning-text); }
.wc-block-components-notice-banner.is-info { border-left-color: var(--tpm-color-info); background: var(--tpm-color-info-bg); color: var(--tpm-color-info-text); }
.wc-block-components-validation-error,
.wc-block-components-validation-error p {
	color: var(--tpm-color-danger-text);
	font-size: var(--tpm-text-label-sm-size);
}
.wc-block-components-form .wc-block-components-text-input.has-error input,
.wc-block-components-address-form input.has-error {
	border-color: var(--tpm-color-danger);
}

/* -----------------------------------------------------------------------
   Empty Cart Block — reuses .tpm-empty-state (components.css) instead of
   a new empty-state pattern.
   ----------------------------------------------------------------------- */
.wp-block-woocommerce-empty-cart-block,
.wc-block-cart__empty-cart {
	text-align: center;
	padding: var(--tpm-space-6) var(--tpm-space-4);
	color: var(--tpm-color-text-muted);
}
.wp-block-woocommerce-empty-cart-block .wc-block-components-button { margin-top: var(--tpm-space-3); }

/* -----------------------------------------------------------------------
   Loading states — reuses .tpm-spinner's tpm-spin keyframe (components.css)
   for the block library's own spinner component instead of its default;
   the shimmering skeleton placeholders keep WooCommerce's own opacity-
   pulse animation (already reduced-motion-safe) and only get the theme's
   surface color swapped in so they read correctly on the account/checkout
   background instead of assuming white.
   ----------------------------------------------------------------------- */
.wc-block-components-spinner {
	border-color: var(--tpm-color-border);
	border-top-color: var(--tpm-color-primary);
}
[data-theme="dark"] .wc-block-components-spinner { border-top-color: var(--tpm-color-primary-light); }
.wc-block-components-skeleton__paragraph,
.wc-block-components-loading-mask .wc-block-components-loading-mask__background {
	background-color: var(--tpm-color-bg-alt);
}

/* -----------------------------------------------------------------------
   Mini Cart Block — header trigger button + off-canvas drawer
   ----------------------------------------------------------------------- */
.wc-block-mini-cart__button {
	color: var(--tpm-color-text);
	background: transparent;
}
.wc-block-mini-cart__badge {
	background: var(--tpm-color-primary);
	color: #fff;
	border-radius: var(--tpm-radius-full);
	font-size: var(--tpm-text-label-sm-size);
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay__background {
	background: rgba(15, 23, 42, 0.5);
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	background: var(--tpm-color-bg);
	color: var(--tpm-color-text);
}
.wc-block-mini-cart__title { font-family: var(--tpm-font-heading); }
.wc-block-mini-cart-items .wc-block-cart-item__product-name { color: var(--tpm-color-text); }
.wc-block-mini-cart__footer { border-top: 1px solid var(--tpm-color-border); }

/* -----------------------------------------------------------------------
   Product Collection Block — reuses the same card visual language as
   .tpm-product-card / the classic shop grid (see the top of this file)
   rather than a separate card component.
   ----------------------------------------------------------------------- */
.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	border-radius: var(--tpm-radius-md);
}
.wp-block-woocommerce-product-collection .wc-block-components-product-title a {
	color: var(--tpm-color-text);
	font-family: var(--tpm-font-heading);
}
.wp-block-woocommerce-product-collection .wc-block-components-product-price { color: var(--tpm-color-text); font-weight: 700; }
.wp-block-woocommerce-product-collection .wc-block-components-product-price ins { color: var(--tpm-color-primary); text-decoration: none; }
.wp-block-woocommerce-product-collection .wc-block-components-product-rating-stars { color: var(--tpm-color-secondary, var(--tpm-color-primary)); }

/* -----------------------------------------------------------------------
   Responsive — matches the classic Cart/Checkout stacking breakpoint
   (900px) and the theme-wide mobile breakpoint (782px) used everywhere
   else in this file.
   ----------------------------------------------------------------------- */
@media (max-width: 900px) {
	.wp-block-woocommerce-cart .wc-block-cart,
	.wp-block-woocommerce-checkout .wc-block-checkout { flex-direction: column; }
}
@media (max-width: 782px) {
	.wc-block-components-sidebar-layout__form { padding: 0 var(--tpm-space-mobile-margin); }
	.wc-block-cart-items__header .wc-block-cart-items__header-image,
	.wc-block-cart-items__header .wc-block-cart-items__header-total { display: none; }
}

/* Dark mode — WooCommerce Blocks ship no dark-mode concept of their own
   (same underlying gap the classic-template forms section above already
   documents); the component rules above already read every color from
   --tpm-* custom properties, which style.css already redefines under
   [data-theme="dark"], so no separate override block is needed here
   beyond the two hardcoded values above (spinner border, drawer overlay). */

/* =========================================================================
   WISHLIST, SUPPORT, LICENSES — real features (inc/woocommerce-account-features.php)
   ========================================================================= */

/* Wishlist heart toggle — shop loop card */
.tpm-wishlist-toggle {
	position: absolute;
	top: var(--tpm-space-2);
	right: var(--tpm-space-2);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tpm-color-bg);
	border: 1px solid var(--tpm-color-border);
	color: var(--tpm-color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.tpm-wishlist-toggle:hover { transform: scale(1.08); color: var(--tpm-color-primary); }
.tpm-wishlist-toggle .tpm-icon { width: 16px; height: 16px; }
.tpm-wishlist-toggle.is-active { color: #f59e0b; border-color: #f59e0b; }
.tpm-wishlist-toggle.is-active .tpm-icon { fill: currentColor; }
li.product { position: relative; } /* anchors the absolutely-positioned toggle above */

/* Wishlist heart toggle — single product page */
.tpm-wishlist-toggle--single {
	position: static;
	width: auto;
	height: auto;
	padding: var(--tpm-space-2) var(--tpm-space-4);
	border-radius: var(--tpm-radius);
	gap: var(--tpm-space-2);
	margin: var(--tpm-space-3) 0 0;
}
.tpm-wishlist-toggle--single .tpm-icon { width: 18px; height: 18px; }

/* Wishlist tab — product grid */
.tpm-wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--tpm-space-4); }
.tpm-wishlist-card { border: 1px solid var(--tpm-color-border); border-radius: var(--tpm-radius-xl); overflow: hidden; background: var(--tpm-color-bg); display: flex; flex-direction: column; }
.tpm-wishlist-card-image img { width: 100%; height: 160px; object-fit: cover; display: block; }
.tpm-wishlist-card-body { padding: var(--tpm-space-3) var(--tpm-space-3) 0; flex: 1; }
.tpm-wishlist-card-title { display: block; color: var(--tpm-color-text); font-weight: 700; text-decoration: none; margin-bottom: 2px; }
.tpm-wishlist-card-price { color: var(--tpm-color-primary); font-weight: 700; }
.tpm-wishlist-card-price ins { text-decoration: none; }
.tpm-wishlist-card-actions { display: flex; align-items: center; gap: var(--tpm-space-2); padding: var(--tpm-space-3); }
.tpm-wishlist-card-actions .tpm-btn-primary { flex: 1; text-align: center; }
.tpm-wishlist-out-of-stock { color: var(--tpm-color-text-muted); font-size: 0.875rem; flex: 1; }

/* Generic account success/error notice (ticket submission feedback) */
.tpm-account-notice { padding: var(--tpm-space-3) var(--tpm-space-4); border-radius: var(--tpm-radius); margin-bottom: var(--tpm-space-4); font-weight: 600; }
.tpm-account-notice--success { background: var(--tpm-color-success-bg); color: var(--tpm-color-success-text); }
.tpm-account-notice--error { background: var(--tpm-color-danger-bg); color: var(--tpm-color-danger-text); }

/* Support Center */
.tpm-support-hero { text-align: center; padding: var(--tpm-space-6) 0; }
.tpm-support-hero h1 { font-family: var(--tpm-font-heading); font-size: var(--tpm-text-headline-lg-size, 2rem); margin: 0; }
.tpm-support-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--tpm-space-5); margin-bottom: var(--tpm-space-5); align-items: start; }
@media (max-width: 900px) { .tpm-support-columns { grid-template-columns: 1fr; } }
.tpm-form-row { margin-bottom: var(--tpm-space-3); }
.tpm-form-row label { display: block; margin-bottom: var(--tpm-space-1); font-weight: 600; font-size: 0.9375rem; }
.tpm-form-row input[type="text"],
.tpm-form-row select,
.tpm-form-row textarea {
	width: 100%;
	padding: var(--tpm-space-2) var(--tpm-space-3);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius);
	background: var(--tpm-color-surface);
	color: var(--tpm-color-text);
	font: inherit;
}
.tpm-form-row input[type="text"]:focus,
.tpm-form-row select:focus,
.tpm-form-row textarea:focus { outline: none; border-color: var(--tpm-color-primary); box-shadow: var(--tpm-shadow-focus-ring); }
.tpm-support-email-fallback { margin: var(--tpm-space-4) 0 0; font-size: 0.875rem; color: var(--tpm-color-text-muted); }
.tpm-ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tpm-space-2); }
.tpm-ticket-list-item { display: flex; align-items: center; justify-content: space-between; gap: var(--tpm-space-3); padding: var(--tpm-space-3); border: 1px solid var(--tpm-color-border); border-radius: var(--tpm-radius-lg); }
.tpm-ticket-list-subject { display: block; font-weight: 700; color: var(--tpm-color-text); }
.tpm-ticket-list-date { display: block; font-size: 0.8125rem; color: var(--tpm-color-text-muted); }
.tpm-support-faq .tpm-faq-item { border-bottom: 1px solid var(--tpm-color-divider); padding: var(--tpm-space-3) 0; }
.tpm-support-faq .tpm-faq-item summary { cursor: pointer; font-weight: 700; color: var(--tpm-color-text); list-style: none; }
.tpm-support-faq .tpm-faq-item summary::-webkit-details-marker { display: none; }
.tpm-support-faq .tpm-faq-item summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--tpm-color-primary); }
.tpm-support-faq .tpm-faq-item[open] summary::before { content: '\2212'; }
.tpm-support-faq .tpm-faq-item p { margin: var(--tpm-space-2) 0 0 1.2em; color: var(--tpm-color-text-muted); }

/* Licenses */
.tpm-license-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tpm-space-3); margin-bottom: var(--tpm-space-5); max-width: 420px; }
.tpm-license-list { display: flex; flex-direction: column; gap: var(--tpm-space-2); }
.tpm-license-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tpm-space-3);
	padding: var(--tpm-space-3) var(--tpm-space-4);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-lg);
}
.tpm-license-row-product { flex: 1 1 200px; min-width: 0; }
.tpm-license-row-name { display: block; font-weight: 700; color: var(--tpm-color-text); }
.tpm-license-row-date { display: block; font-size: 0.8125rem; color: var(--tpm-color-text-muted); }
.tpm-license-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8125rem;
	background: var(--tpm-color-bg-alt);
	padding: var(--tpm-space-1) var(--tpm-space-2);
	border-radius: var(--tpm-radius-sm);
	color: var(--tpm-color-text);
}