/*
 * 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.65;
	pointer-events: none;
	cursor: default;
}

.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.
 */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.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 {
	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 {
		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 {
	background: var(--tpm-color-primary);
	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 {
	background: var(--tpm-color-primary-dark);
	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 {
	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 {
	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 {
	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 {
	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 {
	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 {
	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 {
	border-radius: 999px;
}

@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;
}

/*
 * The actual grid parent of the nav and content.
 * [woocommerce_my_account] doesn't output the nav/content as direct
 * children of .tpm-single-content — WooCommerce's own shortcode wrapper
 * (WC_Shortcode_My_Account::shortcode_wrapper()) wraps them one level
 * deeper in `<div class="woocommerce">`, i.e.:
 *   .tpm-single-content > div.woocommerce > nav.woocommerce-MyAccount-navigation
 *                                          > div.woocommerce-MyAccount-content
 * The grid used to be declared on .tpm-single-content itself, which only
 * ever had that single div.woocommerce child to lay out — so it occupied
 * the first (240px) track alone, and the nav/content stacked as plain
 * blocks *inside* that already-narrow column instead of forming two
 * tracks, which is what produced the overlap. `> .woocommerce` targets
 * the real two-item parent instead. The child combinator also keeps this
 * from matching any unrelated nested `.woocommerce` markup (e.g. a
 * shopping-cart widget) that might appear inside the account 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: that class is also present on this same
 * URL for logged-out visitors, where WooCommerce swaps in a completely
 * different login/register form (.col2-set) instead of nav+content.
 * Applying this 240px/1fr grid there too would squeeze that form into the
 * first column — the same class of bug this rule exists to fix, just
 * recurring for the logged-out state instead.
 */
.woocommerce-account-dashboard .tpm-single-content > .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--tpm-space-5);
	align-items: start;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--tpm-space-2) var(--tpm-space-3);
	border-radius: var(--tpm-radius);
	color: var(--tpm-color-text);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--tpm-color-primary);
	color: #fff;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--tpm-color-primary);
	color: #fff;
}

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

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

/*
 * 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-lg);
	padding: var(--tpm-space-5);
	min-width: 0;
}

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

.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;
}

/* Recent Orders / Downloads summary cards (techpromaster_account_dashboard_summary()) */
.tpm-account-dashboard-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--tpm-space-3);
	margin-bottom: var(--tpm-space-5);
}

.tpm-account-summary-card {
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-lg);
	padding: var(--tpm-space-4);
}
.tpm-account-summary-card-title { margin: 0 0 var(--tpm-space-3); font-size: 1.0625rem; }
.tpm-account-summary-list { list-style: none; margin: 0 0 var(--tpm-space-3); padding: 0; display: flex; flex-direction: column; gap: var(--tpm-space-2); }
.tpm-account-summary-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tpm-space-2); }
.tpm-account-summary-list a { color: var(--tpm-color-text); font-weight: 600; text-decoration: none; }
.tpm-account-summary-list a:hover { color: var(--tpm-color-primary); }
.tpm-account-summary-meta { font-size: 0.8125rem; color: var(--tpm-color-text-muted); white-space: nowrap; }
.tpm-account-summary-empty { color: var(--tpm-color-text-muted); font-size: 0.9375rem; margin: 0 0 var(--tpm-space-3); }
.tpm-account-summary-link { font-size: 0.875rem; font-weight: 600; color: var(--tpm-color-primary); text-decoration: none; }
.tpm-account-summary-link:hover { text-decoration: underline; }

/* Dashboard quick-link cards (techpromaster_account_dashboard_quick_links()) */
.tpm-account-quick-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--tpm-space-3);
	margin-top: var(--tpm-space-5);
}

.tpm-account-quick-link {
	display: flex;
	flex-direction: column;
	gap: var(--tpm-space-1);
	padding: var(--tpm-space-4);
	border: 1px solid var(--tpm-color-border);
	border-radius: var(--tpm-radius-lg);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.tpm-account-quick-link:hover {
	border-color: var(--tpm-color-primary);
	transform: translateY(-2px);
}
.tpm-account-quick-link-label { font-weight: 700; color: var(--tpm-color-text); }
.tpm-account-quick-link-desc { font-size: 0.875rem; color: var(--tpm-color-text-muted); }

/* 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); }

.tpm-account-placeholder-card {
	background: var(--tpm-color-bg-alt);
	border: 1px dashed var(--tpm-color-border);
	border-radius: var(--tpm-radius-lg);
	padding: var(--tpm-space-5);
	text-align: center;
}
.tpm-account-placeholder-card p { color: var(--tpm-color-text-muted); margin: 0 0 var(--tpm-space-4); }

/* 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(37, 99, 235, 0.12); color: #1d4ed8; }
.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: #60a5fa; }

/* 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; }
}