/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.3
 Text Domain:  bricks
*/

/* ============================================================
   VMG DARK-SCHEME BRIDGE
   Repoints ACSS's contextual variables to VMG tokens so the
   default surface is obsidian with ink text — ACSS defaults
   light-first. This block loads after automatic-core (where the
   vars are defined) and automatic-bricks only *consumes* them,
   so these overrides win the cascade. Decision #2 (token map).
   ============================================================ */
:root {
	--body-bg-color:      var(--obsidian);
	--body-color:         var(--ink-100);
	--text-color:         var(--ink-100);
	--heading-color:      var(--ink-100);
	--heading-font-weight: 500;            /* brand: H1–H3 are Medium, not 700 */
	--heading-font-family: var(--font-display);
	--text-font-family:    var(--font-display);
	--link-color:         var(--sapphire-light); /* accessible sapphire on dark */
	--link-color-hover:   var(--ink-100);
	--border-color:       var(--ink-15);

	/* Type scale → VMG (portal-compact). ACSS applies these vars to h1–h3 /
	   body, so headings render at brand sizes. */
	--h1:     var(--f-h1);
	--h2:     var(--f-h2);
	--h3:     var(--f-h3);
	--text-m: var(--f-body);
	--text-s: var(--f-small);
	--text-xs: var(--f-micro);
	--heading-line-height: 1.05;  /* brand headings are near-solid, not the loose ACSS default */
}

/* ============================================================
   VMG UTILITIES
   Site-wide utility classes consuming the VMG brand tokens
   (vmg-tokens.css + vmg-portal-tokens.css, enqueued first).
   Bricks Global Class anchors for these are registered by the
   vmg-portal plugin (empty settings) so they appear in the
   picker; the CSS lives here per the styling-layers convention.
   Values sourced from voodoo-media-group-brand-guide.html.
   ============================================================ */

/* Display — hero-tier headline. Dark-first build: always on an
   obsidian / gradient surface. Pair with the gradient <em> accent. */
.display {
	font-family: var(--font-display);
	font-size: var(--f-display-xl);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.04em;
}

/* <em> accent — never italic (Space Grotesk ships none). Violet gradient
   text-clip per the brand guide. #5E8FD9 is a one-off gradient stop with no
   palette token; the other two stops use brand tokens. */
.display em {
	font-style: normal;
	background: linear-gradient(135deg, var(--hex-violet-light) 0%, var(--hex-violet) 50%, #5E8FD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Eyebrow — mono, uppercase, tracked label with a violet lead dash.
   Margin is intentionally omitted; spacing is set per-instance. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-mono);
	font-size: var(--f-micro);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-50);
}

.eyebrow::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1px;
	background: var(--hex-violet);
}

/* Buttons — JetBrains Mono (ACSS has no button font-family setting).
   Color/transform/tracking/weight come from the ACSS button settings;
   this only supplies the mono face the brand uses for buttons. */
.btn,
[class*="btn--"] {
	font-family: var(--font-mono);
}

/* Heading tracking — tight, per the brand guide. Utilities (.display,
   .display-l) carry their own and override this via class specificity. */
h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.02em;
}

/* Display-L — section-title tier. Lighter weight than the hero .display;
   its <em> accent is muted ink, not the violet gradient (brand guide). */
.display-l {
	font-family: var(--font-display);
	font-size: var(--f-display-l);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.035em;
}

.display-l em {
	font-style: normal;
	color: var(--ink-50);
}

/* Section number — mono index label in violet (e.g. "01 / Logo"). */
.section-num {
	font-family: var(--font-mono);
	font-size: var(--f-micro);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hex-violet);
}

/* Small text helpers. */
.muted { color: var(--ink-70); }
.mono  { font-family: var(--font-mono); }


/* ============================================================
   VMG WOOCOMMERCE — SHARED FOUNDATION
   Themes the Woo surface (Cart, Checkout, My Account) against
   the VMG tokens. Site-wide Woo theming = styling-layer 3
   (child theme), per 01. Loads after bricks-frontend, so it
   wins source-order over Woo's own CSS at equal specificity.

   PREP-GATE FINDING (Session 3): ACSS's automatic.css does NOT
   touch form/table markup. Bricks' frontend-light-layer.min.css
   does — the documented "ghost borders" gotcha: a `*{border-color}`
   reset plus `.input,input,select,textarea{border-width:1px;
   line-height:40px}`. These rules win at equal specificity
   because they sit in `@layer bricks`, so the overrides below
   are deliberately higher-specificity (`.woocommerce input…`).
   Native checkbox/radio/select-indicator colors are already
   handled by color-scheme:dark + accent-color in vmg-tokens.css
   — do NOT restyle those. Tables come through clean (Bricks only
   sets `table{width:100%}`), so the table rules below are net-new.
   ============================================================ */

/* ---- Fields: inputs, textareas, selects ----------------- */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-selection {
	background-color: var(--ink-08);
	border: 1px solid var(--ink-15);
	border-radius: var(--radius-sm);
	color: var(--ink-100);
	padding: 0.7rem var(--space-s);
	line-height: 1.4;
	font-size: var(--f-body);
	width: 100%;
	transition: border-color var(--dur-quick) var(--ease-out-luxe);
}

.woocommerce textarea {
	min-height: 7rem;
	padding: var(--space-s);
	line-height: 1.5;
}

.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	border-color: var(--hex-violet-light);
}

.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder {
	color: var(--ink-30);
}

/* Native select arrow — Bricks ships a hardcoded grey caret; recolor to ink. */
.woocommerce select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ink-50) 50%),
		linear-gradient(135deg, var(--ink-50) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--space-xl);
}

/* Autofill — keep dark fill + light text instead of the browser's yellow. */
.woocommerce input:-webkit-autofill,
.woocommerce input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink-100);
	box-shadow: 0 0 0 1000px var(--midnight) inset;
	caret-color: var(--ink-100);
}

/* ---- Field labels --------------------------------------- */
.woocommerce form .woocommerce-form-row > label {
	display: block;
	margin-bottom: var(--space-3xs);
	color: var(--ink-70);
	font-size: var(--f-small);
}

.woocommerce .required {
	color: var(--hex-violet-light);
	border: 0;
}

/* ---- Buttons: map Woo's .button to the ACSS brand button --
   Borrows ACSS's single-valued --btn-* METRIC tokens (padding,
   min-width, tracking, etc.) so sizing tracks the Bricks-page
   buttons. Colors are set with direct brand tokens (--primary /
   --white / --primary-hover) rather than --btn-background /
   --btn-text-color: those carry two declarations (base vs
   .btn--primary variant), so at a non-.btn element they can
   resolve to `transparent` and render a ghost button. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: var(--btn-justify-content);
	min-width: var(--btn-min-width);
	padding: var(--btn-padding-block) var(--btn-padding-inline);
	font-family: var(--font-mono);
	font-weight: var(--btn-font-weight);
	font-size: var(--f-small);
	line-height: var(--btn-line-height);
	letter-spacing: var(--btn-letter-spacing);
	text-transform: var(--btn-text-transform);
	text-decoration: none;
	color: var(--white);
	background-color: var(--primary);
	border: var(--btn-border-width) solid var(--primary);
	border-radius: var(--btn-border-radius);
	cursor: pointer;
	transition: background-color var(--dur-quick) var(--ease-out-luxe),
	            border-color var(--dur-quick) var(--ease-out-luxe),
	            color var(--dur-quick) var(--ease-out-luxe);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button[type="submit"]:hover {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
	color: var(--white);
}

/* ---- Tables: cart / checkout review / account orders ----- */
.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--ink-15);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	font-family: var(--font-mono);
	font-size: var(--f-micro);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-50);
	text-align: left;
	padding: var(--space-s) var(--space-m);
	border-bottom: 1px solid var(--ink-15);
	background-color: var(--ink-08);
}

.woocommerce table.shop_table td {
	padding: var(--space-s) var(--space-m);
	border-top: 1px solid var(--ink-08);
	color: var(--ink-100);
	vertical-align: middle;
}

.woocommerce table.shop_table tr:first-child td {
	border-top: 0;
}

/* ---- Notices: success / info / error -------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	margin: 0 0 var(--space-m);
	padding: var(--space-s) var(--space-m);
	list-style: none;
	border: 1px solid var(--ink-15);
	border-left-width: 3px;
	border-radius: var(--radius-md);
	background-color: var(--ink-08);
	color: var(--ink-100);
	font-size: var(--f-small);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none; /* drop Woo's absolutely-positioned icon glyphs */
}

.woocommerce-message {
	border-left-color: var(--success);
	background-color: var(--success-fill);
}

.woocommerce-error {
	border-left-color: var(--danger);
	background-color: var(--danger-fill);
}

.woocommerce-info {
	border-left-color: var(--sapphire-light);
}


/* ============================================================
   VMG MY ACCOUNT — SIGN-IN (logged out)
   The Sign-in target from the homepage and nav. Page 18 renders
   via Bricks default content, which prints an auto <h1>My account</h1>
   before the shortcode; hide it on the logged-out view so the
   card's own "Sign in" is the single page heading. Markup comes
   from woocommerce/myaccount/form-login.php (overridden).
   ============================================================ */

/* Hide the redundant Bricks auto page-title h1 on the account, cart and checkout
   views — each renders its own headings (.dash__greet / .pagehead / the generic
   pagehead hook on account; "Billing details" / "Your order" / "Cart totals" on
   the commerce pages). */
.woocommerce-account #brx-content > h1,
.woocommerce-cart #brx-content > h1,
.woocommerce-checkout #brx-content > h1 {
	display: none;
}

.vmg-login {
	max-width: 30rem;
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-m);
}

.vmg-login--cols {
	max-width: 62rem;
}

.vmg-login--cols .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-l);
}

.vmg-login__card {
	display: block;   /* opt out of ACSS's section flex/centering (see .card note) */
	padding: var(--space-xl);
	background-color: var(--midnight);
	border: 1px solid var(--ink-15);
	border-radius: var(--radius-lg);
	box-shadow: var(--elev-2);
}

.vmg-login__title {
	margin: var(--space-2xs) 0 0;
}

.vmg-login__intro {
	margin: var(--space-xs) 0 var(--space-l);
	font-size: var(--f-small);
}

/* strip Woo's default `.woocommerce form.login { border; padding; border-radius }`
   (from woocommerce.css) — the card is the container, no inner box needed. */
.vmg-login .woocommerce-form-login.login {
	border: 0;
	padding: 0;
	margin: 0;
}

.vmg-login .woocommerce-form-row {
	margin-bottom: var(--space-m);
}

/* The remember-me + submit share one <p class="form-row"> (no
   .woocommerce-form-row) — stack them and make the submit full-width. */
.vmg-login p.form-row:not(.woocommerce-form-row) {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	margin: var(--space-l) 0 0;
}

.vmg-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--ink-70);
	font-size: var(--f-small);
}

.vmg-login .woocommerce-form-login__submit {
	width: 100%;
}

.vmg-login .lost_password {
	margin: var(--space-m) 0 0;
	font-size: var(--f-small);
	text-align: center;
}

@media (max-width: 599px) {
	.vmg-login__card {
		padding: var(--space-l);
	}
	.vmg-login--cols .u-columns {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   VMG MY ACCOUNT — SHARED SHELL + DASHBOARD (logged in)
   Ported from mockups/vmg-portal-my-account-dashboard.html.
   .acct = the shell (nav + content) shared by EVERY gated page;
   .dash = the dashboard, plugin-rendered by vmg_portal_render_dashboard().
   Mobile readability floor applies at ≤478 (functional text steps up a rung).
   ============================================================ */

/* ---- shell ---------------------------------------------- */
/* The account page has no ACSS .container, so .acct also carries the page
   container (centre + max-width + padding). */
.acct {
	display: grid;
	grid-template-columns: minmax(180px, 14rem) 1fr;
	gap: var(--space-xl);
	align-items: start;
	max-width: var(--section-max);
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-l);
}
/* neutralise any inherited float/width on the nav/content columns */
.acct .acct__nav,
.acct .acct__content { float: none; width: auto; }
.acct__content { min-width: 0; }

/* ---- portal buttons ------------------------------------- */
/* ACSS's .btn--* VISUAL css is generated per-element by Bricks Button elements
   — it is NOT global frontend CSS — so a plain <a class="btn btn--primary"> in
   our PHP-rendered surfaces (dashboard, etc.) would be unstyled. Define it here,
   scoped to .woocommerce (the gated/commerce surface) so it never collides with
   the Bricks-built public pages. Matches the ACSS primary/outline look. */
.woocommerce .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
	font-family: var(--font-mono); font-weight: 500; font-size: var(--f-small);
	letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; line-height: 1;
	padding: 0.75em 1.4em; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer;
	transition: background var(--dur-quick) var(--ease-out-luxe), border-color var(--dur-quick) var(--ease-out-luxe), color var(--dur-quick) var(--ease-out-luxe);
}
.woocommerce .btn--primary { background: var(--primary); border-color: var(--primary); color: var(--white); }
.woocommerce .btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--white); }
.woocommerce .btn--outline { background: transparent; color: var(--ink-100); border-color: var(--ink-15); }
.woocommerce .btn--outline:hover { border-color: var(--hex-violet-light); color: var(--hex-violet-light); }
.woocommerce .btn--small { padding: var(--space-2xs) var(--space-s); font-size: var(--f-micro); }

/* ---- account nav (shared) ------------------------------- */
.acct__nav { position: sticky; top: calc(var(--space-l) + 56px); }
.acct__nav-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.acct__nav-toggle { display: none; }   /* desktop: list is the always-visible sidebar */
.acct__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.acct__nav-link {
	display: flex; align-items: center; gap: var(--space-xs);
	padding: var(--space-xs) var(--space-s);
	font-family: var(--font-mono); font-weight: 500; font-size: var(--f-micro);
	letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
	color: var(--ink-50); border-radius: var(--radius-md); border-left: 2px solid transparent;
	transition: color var(--dur-quick) var(--ease-out-luxe), background var(--dur-quick) var(--ease-out-luxe);
}
.acct__nav-link:hover { color: var(--ink-100); background: var(--ink-08); }
.acct__nav-link--active { color: var(--ink-100); background: var(--ink-08); border-left-color: var(--hex-violet); }
/* separator above Log out (Woo tags that item with --customer-logout) */
.acct__nav-list li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--space-s); padding-top: var(--space-s); border-top: 1px solid var(--border-color);
}

/* ---- dashboard head ------------------------------------- */
.dash__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-m) var(--space-l); margin-bottom: var(--space-l); }
.dash__greet { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h1); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-2xs) 0 0; }
.dash__greet em { font-style: normal; color: var(--hex-violet-light); }
.dash__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.08em; color: var(--ink-50); margin: 0; }
.dash__meta-sep { width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--ink-30); }

/* ---- content grid --------------------------------------- */
.dash__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-l); align-items: start; }
.dash__main, .dash__aside { display: flex; flex-direction: column; gap: var(--space-l); min-width: 0; }

/* ---- card primitive ------------------------------------- */
/* display:block — opt out of ACSS's `section{display:flex;flex-direction:column;
   align-items:center}` (a zero-specificity :where rule for Bricks sections) that
   would otherwise centre the card content. Same reason for the flex-direction:row
   declarations below — ACSS's `section > div` rule forces column on direct children. */
.card { position: relative; display: block; min-width: 0; background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-lg); padding: var(--space-l); box-shadow: var(--elev-1); }
.card__head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-s); margin-bottom: var(--space-m); }
.card__label { font-family: var(--font-mono); font-weight: 500; font-size: var(--f-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); margin: 0; }
.card__action { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sapphire-light); text-decoration: none; white-space: nowrap; }
.card__action:hover { color: var(--ink-100); }
.card__empty { margin: 0 0 var(--space-m); font-size: var(--f-small); }

.card--feature { border-color: color-mix(in oklab, var(--hex-violet) 35%, var(--ink-15)); }
.card--feature::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--grad-violet); }

/* ---- active subscription -------------------------------- */
.sub__plan { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-s); margin-bottom: var(--space-s); }
.sub__name { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); letter-spacing: -0.01em; margin: 0; }
.sub__price { font-family: var(--font-mono); font-size: var(--f-small); color: var(--ink-50); margin: 0 0 var(--space-m); }
.sub__price .woocommerce-Price-amount { font-size: var(--f-h2); font-weight: 600; color: var(--ink-100); letter-spacing: -0.01em; margin-right: var(--space-2xs); }
.sub__rows { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-l); }
.sub__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); margin: 0; }
.sub__row dt { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); margin: 0; }
.sub__row dd { font-family: var(--font-mono); font-size: var(--f-small); color: var(--ink-100); margin: 0; }
.sub__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-s); }

/* ---- recent invoices ------------------------------------ */
.inv { list-style: none; margin: 0; padding: 0; }
.inv__row { display: grid; grid-template-columns: 4.5rem 1fr auto auto; align-items: center; gap: var(--space-s); padding: var(--space-s) var(--space-2xs); border-top: 1px solid var(--ink-08); text-decoration: none; color: inherit; border-radius: var(--radius-sm); transition: background var(--dur-quick) var(--ease-out-luxe); }
.inv li:first-child .inv__row { border-top: 0; }
.inv__row:hover { background: var(--ink-08); }
.inv__row > * { min-width: 0; }
.inv__num { font-family: var(--font-mono); font-size: var(--f-small); color: var(--ink-70); overflow-wrap: anywhere; }
.inv__date { font-family: var(--font-mono); font-size: var(--f-small); color: var(--ink-50); overflow-wrap: anywhere; }
.inv__amt { font-family: var(--font-mono); font-size: var(--f-small); font-weight: 500; color: var(--ink-100); text-align: right; }
.inv__amt .woocommerce-Price-amount { color: var(--ink-100); }
.inv__status { display: flex; justify-content: flex-end; }
.inv__row--req { grid-template-columns: 1fr auto; }
.inv__title { white-space: normal; }

/* ---- common actions ------------------------------------- */
.act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.act__link { display: flex; align-items: center; gap: var(--space-s); padding: var(--space-s) var(--space-2xs); border-top: 1px solid var(--ink-08); text-decoration: none; color: var(--ink-100); font-size: var(--f-small); transition: color var(--dur-quick) var(--ease-out-luxe), padding-left var(--dur-quick) var(--ease-out-luxe); }
.act li:first-child .act__link { border-top: 0; }
.act__link:hover { color: var(--hex-violet-light); padding-left: var(--space-s); }
.act__arrow { font-family: var(--font-mono); color: var(--hex-violet); transition: transform var(--dur-quick) var(--ease-out-luxe); }
.act__link:hover .act__arrow { transform: translateX(3px); }

/* ---- open requests (empty state) ------------------------ */
.req__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.req__empty p { margin: 0; font-size: var(--f-small); color: var(--ink-50); }

/* ---- status badge --------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2em 0.6em; border-radius: var(--radius-full); border: 1px solid var(--status-neutral-border); background: var(--status-neutral-fill); color: var(--status-neutral); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.badge--success { color: var(--success); background: var(--success-fill); border-color: var(--success-border); }
.badge--warning { color: var(--warning); background: var(--warning-fill); border-color: var(--warning-border); }
.badge--danger { color: var(--danger); background: var(--danger-fill); border-color: var(--danger-border); }

/* ---- gated sub-page header (shared by Orders, Account details, etc.) ---- */
.pagehead { margin-bottom: var(--space-l); }
.pagehead__title { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h1); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-2xs) 0 0; }
.pagehead__meta { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.08em; color: var(--ink-50); margin: var(--space-2xs) 0 0; }

/* ---- orders table (.otable — self-contained, not .shop_table) ---- */
.otable { width: 100%; border: 1px solid var(--ink-15); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.otable thead th { font-family: var(--font-mono); font-size: var(--f-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); text-align: left; padding: var(--space-s) var(--space-m); background: var(--ink-08); border-bottom: 1px solid var(--ink-15); }
.otable tbody td { padding: var(--space-s) var(--space-m); border-top: 1px solid var(--ink-08); color: var(--ink-100); vertical-align: middle; font-size: var(--f-small); }
.otable tbody tr:first-child td { border-top: 0; }
.otable tbody tr:hover td { background: var(--ink-08); }
.otable__num { font-family: var(--font-mono); color: var(--ink-70); }
.otable__num a { color: inherit; text-decoration: none; }
.otable__num a:hover { color: var(--hex-violet-light); }
.otable__date { font-family: var(--font-mono); color: var(--ink-50); }
.otable__total { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.otable__total .woocommerce-Price-amount { color: var(--ink-100); }
.otable th.otable__c-actions, .otable td.otable__actions { text-align: right; }
.otable__actions { display: flex; flex-direction: row; gap: var(--space-2xs); justify-content: flex-end; flex-wrap: wrap; }

.opager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-m); }
.opager__info { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.08em; color: var(--ink-50); }
.opager__btns { display: flex; gap: var(--space-2xs); }

.oempty { padding: var(--space-2xl) var(--space-l); text-align: center; border: 1px dashed var(--ink-15); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; gap: var(--space-m); }
.oempty p { margin: 0; color: var(--ink-50); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 767px) {
	.otable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.otable, .otable tbody, .otable tr, .otable td { display: block; width: 100%; }
	.otable { border: 0; overflow: visible; }
	.otable tbody tr { border: 1px solid var(--ink-15); border-radius: var(--radius-md); margin-bottom: var(--space-s); background: var(--midnight); }
	.otable tbody td { border-top: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); padding: var(--space-xs) var(--space-m); font-size: var(--f-body); }
	.otable tbody td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); }
	.otable tbody tr:hover td { background: transparent; }
	.otable td.otable__actions { justify-content: stretch; }
	.otable td.otable__actions::before { display: none; }
	.otable__actions .btn { flex: 1; }
}

@media (max-width: 478px) {
	.pagehead__meta, .opager__info { font-size: var(--f-small); }
}

/* ---- Account details (form-edit-account) ---------------- */
.woocommerce-EditAccountForm.edit-account {
	max-width: 42rem;
	background: var(--midnight);
	border: 1px solid var(--ink-15);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
}
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last { float: none; width: 100%; }
.woocommerce-EditAccountForm .woocommerce-form-row { margin-bottom: var(--space-m); }
.woocommerce-EditAccountForm fieldset { border: 1px solid var(--ink-15); border-radius: var(--radius-md); padding: var(--space-m) var(--space-m) var(--space-2xs); margin: var(--space-l) 0 0; }
.woocommerce-EditAccountForm legend { font-family: var(--font-mono); font-size: var(--f-micro); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-50); padding: 0 var(--space-2xs); }
.woocommerce-EditAccountForm span em { color: var(--ink-50); font-style: normal; font-size: var(--f-small); display: block; margin-top: var(--space-3xs); }
.woocommerce-EditAccountForm > p:last-of-type { margin-top: var(--space-l); }

/* ---- Addresses (my-address, billing only) --------------- */
.woocommerce-Addresses, .addresses { display: grid; grid-template-columns: 1fr; gap: var(--space-l); max-width: 42rem; }
.woocommerce-Address { background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-lg); padding: var(--space-l); }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); margin-bottom: var(--space-s); }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: var(--f-h3); margin: 0; }
.woocommerce-Address-title .edit { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sapphire-light); text-decoration: none; white-space: nowrap; }
.woocommerce-Address-title .edit:hover { color: var(--ink-100); }
.woocommerce-Address address { font-style: normal; color: var(--ink-70); line-height: 1.7; }

/* ---- responsive stacking for Woo responsive tables (Subscriptions, etc.) --
   foundation themes .shop_table; this stacks .shop_table_responsive on mobile
   like .otable. `.acct table.shop_table_responsive` (0,2,2) + later source beats
   the foundation `.woocommerce table.shop_table` rules. Cells expose data-title. */
@media (max-width: 767px) {
	.acct table.shop_table_responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.acct table.shop_table_responsive,
	.acct table.shop_table_responsive tbody,
	.acct table.shop_table_responsive tr,
	.acct table.shop_table_responsive td { display: block; width: 100%; }
	.acct table.shop_table_responsive { border: 0; }
	.acct table.shop_table_responsive tbody tr { border: 1px solid var(--ink-15); border-radius: var(--radius-md); margin-bottom: var(--space-s); background: var(--midnight); }
	.acct table.shop_table_responsive tbody td { border-top: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); padding: var(--space-xs) var(--space-m); font-size: var(--f-body); }
	.acct table.shop_table_responsive tbody td::before { content: attr(data-title); font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); }
}

/* ---- load-in (reduced-motion aware) --------------------- */
.dash .card.anim { opacity: 0; transform: translateY(8px); animation: dash-in var(--dur-base) var(--ease-out-luxe) forwards; }
.dash__main .card.anim:nth-child(1), .dash__aside .card.anim:nth-child(1) { animation-delay: 40ms; }
.dash__main .card.anim:nth-child(2), .dash__aside .card.anim:nth-child(2) { animation-delay: 120ms; }
@keyframes dash-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dash .card.anim { opacity: 1; transform: none; animation: none; } }

/* ---- responsive ----------------------------------------- */
@media (max-width: 991px) {
	.acct { grid-template-columns: 1fr; gap: var(--space-l); padding-block: var(--space-xl); }
	.acct__nav { position: static; min-width: 0; }
	.acct__nav-toggle {
		display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
		padding: var(--space-s) var(--space-m);
		font-family: var(--font-mono); font-weight: 500; font-size: var(--f-small);
		letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-100);
		background: var(--midnight); border: 1px solid var(--ink-15);
		border-radius: var(--radius-md); cursor: pointer;
	}
	.acct__nav-checkbox:focus-visible ~ .acct__nav-toggle { box-shadow: var(--focus-ring); }
	.acct__burger { position: relative; flex: none; width: 20px; height: 14px; }
	.acct__burger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-quick) var(--ease-out-luxe), opacity var(--dur-quick) var(--ease-out-luxe); }
	.acct__burger span:nth-child(1) { top: 0; }
	.acct__burger span:nth-child(2) { top: 6px; }
	.acct__burger span:nth-child(3) { top: 12px; }
	.acct__nav-checkbox:checked ~ .acct__nav-toggle .acct__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.acct__nav-checkbox:checked ~ .acct__nav-toggle .acct__burger span:nth-child(2) { opacity: 0; }
	.acct__nav-checkbox:checked ~ .acct__nav-toggle .acct__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
	.acct__nav-list { display: none; }
	.acct__nav-checkbox:checked ~ .acct__nav-list { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2xs); padding: var(--space-2xs); background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-md); }
	.dash__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.card { padding: var(--space-m); }
	.inv__row { grid-template-columns: 1fr auto; gap: var(--space-3xs) var(--space-s); padding-block: var(--space-s); }
	.inv__num { grid-column: 1; grid-row: 1; }
	.inv__date { grid-column: 1; grid-row: 2; }
	.inv__amt { grid-column: 2; grid-row: 1; }
	.inv__status { grid-column: 2; grid-row: 2; }
}
@media (max-width: 478px) {
	.dash__head { flex-direction: column; align-items: flex-start; }
	/* mobile readability floor — functional text steps up a rung */
	.acct__nav-link, .dash__meta, .card__action, .sub__row dt { font-size: var(--f-small); }
	.inv__num, .inv__date, .inv__amt, .sub__row dd, .act__link, .req__empty p, .card__empty { font-size: var(--f-body); }
	.badge { font-size: var(--f-micro); }
}


/* ============================================================
   VMG WOOCOMMERCE — CART + CHECKOUT
   Cart = the bypassed fallback (single-plan flow → checkout);
   foundation already themes its .shop_table + buttons. Checkout
   = the live purchase surface: two-column (billing main + sticky
   order-review aside), with select2 + payment box themed here.
   These pages have no .acct shell, so they carry their own container.
   ============================================================ */

/* page container (cart/checkout have no .acct shell) */
.woocommerce-cart #brx-content > .woocommerce,
.woocommerce-checkout #brx-content > .woocommerce {
	max-width: var(--section-max);
	margin-inline: auto;
	padding: var(--space-xl) var(--space-l) var(--space-2xl);
}

/* ---- Cart (fallback) ------------------------------------ */
.cart-collaterals { display: flex; justify-content: flex-end; margin-top: var(--space-l); }
.cart-collaterals .cart_totals { width: 100%; max-width: 28rem; background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-lg); padding: var(--space-l); }
.cart_totals h2 { font-size: var(--f-h3); margin: 0 0 var(--space-m); }
.cart_totals table { width: 100%; border: 0; }
.cart_totals th, .cart_totals td { padding: var(--space-2xs) 0; border: 0; font-size: var(--f-small); vertical-align: top; }
.cart_totals th { text-align: left; color: var(--ink-50); font-weight: 500; }
.cart_totals td { text-align: right; font-family: var(--font-mono); color: var(--ink-100); }
.cart_totals .order-total th, .cart_totals .order-total td { padding-top: var(--space-s); border-top: 1px solid var(--ink-15); font-size: var(--f-body); }
.wc-proceed-to-checkout { margin-top: var(--space-m); }
.wc-proceed-to-checkout .checkout-button { width: 100%; }
/* cart table cells — force transparent fills + token borders (kills the stray
   --ink-08 bg + #dddedf ghost border that land on .product-name) and size the
   narrow remove/thumbnail columns so the row aligns under its headers. */
.woocommerce-cart-form table.cart { table-layout: fixed; width: 100%; }
.woocommerce-cart-form table.cart td,
.woocommerce-cart-form table.cart th { background: transparent; border-color: var(--ink-08); vertical-align: middle; overflow-wrap: anywhere; padding-inline: var(--space-s); }
.woocommerce-cart-form table.cart thead th { background: var(--ink-08); border-color: var(--ink-15); }
.woocommerce-cart-form table.cart td.product-name { background: transparent; }
.woocommerce-cart-form table.cart .product-remove { width: 3rem; text-align: center; padding-inline: var(--space-2xs); }
.woocommerce-cart-form table.cart .product-thumbnail { width: 5rem; }
.woocommerce-cart-form table.cart .product-price { width: 10rem; }
.woocommerce-cart-form table.cart .product-quantity { width: 7rem; }
.woocommerce-cart-form table.cart .product-subtotal { width: 10rem; }
.woocommerce-cart-form table.cart .product-thumbnail img { width: 56px; height: auto; border-radius: var(--radius-sm); }
.woocommerce-cart-form table.cart .product-name a { color: var(--ink-100); text-decoration: none; }
.woocommerce-cart-form table.cart .product-name a:hover { color: var(--hex-violet-light); }
.woocommerce-cart-form table.cart .product-price,
.woocommerce-cart-form table.cart .product-subtotal { font-family: var(--font-mono); font-size: var(--f-small); }

/* cart actions: coupon (grows) left, Update cart right — never collapse the
   coupon input behind the button, and keep them on one line where there's room. */
.woocommerce-cart-form .cart .actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: space-between; }
.woocommerce-cart-form .cart .actions .coupon { display: flex; gap: var(--space-2xs); flex: 0 1 auto; }
.woocommerce-cart-form .cart .actions .coupon .input-text { width: 14rem; max-width: 100%; flex: 0 1 14rem; min-width: 0; }
.woocommerce-cart-form .cart .actions .coupon .button { flex: 0 0 auto; white-space: nowrap; }
.woocommerce-cart-form .cart .actions > .button,
.woocommerce-cart-form .cart .actions > button { flex: 0 0 auto; }
@media (max-width: 767px) { .cart-collaterals { justify-content: stretch; } .cart-collaterals .cart_totals { max-width: none; } }

/* ---- Checkout layout ------------------------------------ */
.vmg-checkout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-xl); align-items: start; }
.vmg-checkout__main { min-width: 0; }
.vmg-checkout__aside { position: sticky; top: calc(var(--space-l) + 56px); background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-lg); padding: var(--space-l); min-width: 0; }
.vmg-checkout__heading { font-family: var(--font-mono); font-size: var(--f-micro); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); margin: 0 0 var(--space-m); }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3 { font-size: var(--f-h3); margin: 0 0 var(--space-m); }
.woocommerce-billing-fields .form-row, .woocommerce-additional-fields .form-row { margin-bottom: var(--space-m); }
@media (max-width: 991px) { .vmg-checkout { grid-template-columns: 1fr; gap: var(--space-l); } .vmg-checkout__aside { position: static; } }

/* ---- select2 (country / state) -------------------------- */
.woocommerce .select2-container--default .select2-selection--single { background: var(--ink-08); border: 1px solid var(--ink-15); border-radius: var(--radius-sm); height: auto; min-height: 2.85rem; display: flex; align-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink-100); line-height: 1.4; padding-left: var(--space-s); padding-right: var(--space-xl); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: var(--space-2xs); }
.select2-dropdown { background: var(--midnight); border: 1px solid var(--ink-15); color: var(--ink-100); }
.select2-container--default .select2-results__option { color: var(--ink-70); }
.select2-container--default .select2-results__option--highlighted { background: var(--hex-violet); color: var(--ink-100); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--ink-08); color: var(--ink-100); }
.select2-search--dropdown .select2-search__field { background: var(--ink-08); border: 1px solid var(--ink-15); color: var(--ink-100); border-radius: var(--radius-sm); }

/* ---- order review table + totals (inside the aside) ----- */
.vmg-checkout__aside table.shop_table { border: 0; border-radius: 0; overflow: visible; width: 100%; }
.vmg-checkout__aside table.shop_table th, .vmg-checkout__aside table.shop_table td { padding: var(--space-xs) 0; border-top: 1px solid var(--ink-08); background: transparent; font-size: var(--f-small); }
.vmg-checkout__aside table.shop_table thead th { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); border-top: 0; }
.vmg-checkout__aside table.shop_table td { text-align: right; font-family: var(--font-mono); color: var(--ink-100); }
.vmg-checkout__aside table.shop_table .product-name { text-align: left; font-family: var(--font-display); color: var(--ink-100); }
.vmg-checkout__aside table.shop_table tfoot th { text-align: left; font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; }
.vmg-checkout__aside table.shop_table .order-total th, .vmg-checkout__aside table.shop_table .order-total td { padding-top: var(--space-s); border-top: 1px solid var(--ink-15); font-size: var(--f-body); }

/* ---- payment box ---------------------------------------- */
#payment { background: transparent; margin-top: var(--space-m); }
#payment ul.wc_payment_methods { list-style: none; margin: 0 0 var(--space-m); padding: 0; border: 0; }
#payment ul.wc_payment_methods li { padding: var(--space-xs) 0; border-top: 1px solid var(--ink-08); }
#payment ul.wc_payment_methods li:first-child { border-top: 0; }
#payment label { color: var(--ink-100); font-size: var(--f-small); display: inline; }
#payment .payment_box { background: var(--ink-08); border-radius: var(--radius-md); padding: var(--space-s) var(--space-m); font-size: var(--f-small); color: var(--ink-70); margin-top: var(--space-2xs); }
#payment .payment_box::before { display: none; }
#payment #place_order { width: 100%; margin-top: var(--space-s); }
.woocommerce-terms-and-conditions-wrapper { font-size: var(--f-small); color: var(--ink-70); margin-bottom: var(--space-s); }


/* ============================================================
   VMG WOOCOMMERCE — FLOW PAGES
   Pay-for-Order (invoice), Thank-you, View Order / Subscription,
   Lost / Reset password. Reuse the foundation + shell + auth card.
   ============================================================ */

/* ---- Pay for order (invoice) ---------------------------- */
.vmg-pay { max-width: 40rem; margin-inline: auto; }
.vmg-pay__card { background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-lg); padding: var(--space-l); box-shadow: var(--elev-1); }
.vmg-pay__card table.shop_table { width: 100%; border: 0; border-radius: 0; margin: 0 0 var(--space-m); }
.vmg-pay__card table.shop_table th,
.vmg-pay__card table.shop_table td { padding: var(--space-xs) 0; border-top: 1px solid var(--ink-08); background: transparent; font-size: var(--f-small); text-align: left; }
.vmg-pay__card table.shop_table thead th { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); border-top: 0; }
.vmg-pay__card table.shop_table .product-name { font-family: var(--font-display); color: var(--ink-100); }
.vmg-pay__card table.shop_table .product-quantity,
.vmg-pay__card table.shop_table .product-subtotal,
.vmg-pay__card table.shop_table .product-total { text-align: right; font-family: var(--font-mono); }
.vmg-pay__card table.shop_table tfoot th { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; }
.vmg-pay__card table.shop_table tfoot tr:last-child th,
.vmg-pay__card table.shop_table tfoot tr:last-child td { border-top: 1px solid var(--ink-15); padding-top: var(--space-s); font-size: var(--f-body); }

/* ---- Thank-you / order received ------------------------- */
.vmg-thankyou { max-width: 44rem; margin-inline: auto; }
.vmg-thankyou__head { text-align: center; margin-bottom: var(--space-l); display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.vmg-thankyou__check { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-full); background: var(--success-fill); border: 1px solid var(--success-border); color: var(--success); font-size: 1.25rem; margin-bottom: var(--space-2xs); }
.vmg-thankyou__msg { margin: 0; font-size: var(--f-small); max-width: 44ch; }
.vmg-thankyou__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-s); justify-content: center; margin-top: var(--space-m); }
.woocommerce-order-overview { list-style: none; margin: 0 0 var(--space-xl); padding: var(--space-l); display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-m); background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-lg); }
.woocommerce-order-overview li { display: flex; flex-direction: column; gap: var(--space-3xs); }
.woocommerce-order-overview li span { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); }
.woocommerce-order-overview li strong { font-weight: 500; color: var(--ink-100); }

/* ---- order details + customer details (thank-you, view-order) ---- */
.woocommerce-order-details, .woocommerce-customer-details { margin-top: var(--space-xl); }
.woocommerce-order-details__title, .woocommerce-column__title { font-size: var(--f-h3); margin: 0 0 var(--space-m); }
/* order-details table: wc-blocks.css (loaded early) gives .woocommerce-table a
   light fill; re-theme to transparent cells + token borders. */
.woocommerce-table--order-details { width: 100%; border: 1px solid var(--ink-15); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; background: transparent; }
.woocommerce-table--order-details th,
.woocommerce-table--order-details td { background: transparent; border-color: var(--ink-08); color: var(--ink-100); padding: var(--space-s) var(--space-m); text-align: left; font-size: var(--f-small); }
.woocommerce-table--order-details td { text-align: right; font-family: var(--font-mono); }
.woocommerce-table--order-details .product-name { text-align: left; font-family: var(--font-display); }
.woocommerce-table--order-details .product-name a { color: var(--ink-100); text-decoration: none; }
.woocommerce-table--order-details .product-quantity { background: transparent; color: var(--ink-50); }
.woocommerce-table--order-details thead th,
.woocommerce-table--order-details tfoot th { font-family: var(--font-mono); font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; }
.woocommerce-table--order-details .woocommerce-Price-amount { color: var(--ink-100); }
/* Bricks woo-layer sets `.woocommerce-order-details table tfoot` to bricks-bg-light
   (#f5f6f7) and loads after style.css — doubled class (2 classes) outranks its
   1-class selector without !important. */
.woocommerce-table--order-details.woocommerce-table--order-details tfoot { background: transparent; }
.woocommerce-customer-details address { font-style: normal; color: var(--ink-70); line-height: 1.7; border: 1px solid var(--ink-15); border-radius: var(--radius-md); padding: var(--space-m); }
/* view-order status line — neutralise the default <mark> highlight */
.acct__content mark.order-number,
.acct__content mark.order-date,
.acct__content mark.order-status { background: transparent; color: var(--ink-100); font-weight: 500; }

/* ---- auth cards: lost / reset password ------------------ */
.vmg-login form button[type="submit"] { width: 100%; margin-top: var(--space-s); }
.vmg-login__alt { margin: var(--space-m) 0 0; text-align: center; font-size: var(--f-small); }


/* ============================================================
   VMG HEADER — nav polish (Phase 1 close-out)
   Brand-uppercase nav, current-page state, auth-aware CTA/Log out
   (relabel + Log-out injected by vmg-portal's wp_get_nav_menu_items
   filter), and the accessible skip-link Bricks emits but doesn't style.
   Scoped under .header so it beats Bricks' :where()-based nav rules.
   ============================================================ */

/* #4 — mono UPPERCASE + tracking (brand nav convention) */
.header .bricks-nav-menu > li > a,
.header .bricks-mobile-menu > li > a {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* #2 — current-page state (violet accent) */
.header .bricks-nav-menu > li.current-menu-item > a,
.header .bricks-nav-menu > li.current_page_item > a,
.header .bricks-nav-menu > li.current-menu-parent > a,
.header .bricks-mobile-menu > li.current-menu-item > a,
.header .bricks-mobile-menu > li.current_page_item > a,
.header [aria-current="page"] {
	color: var(--hex-violet-light);
}

/* #1 — account CTA (Sign In / My Account): brand outline button */
.header .bricks-nav-menu li.vmg-nav-cta > a,
.header .bricks-mobile-menu li.vmg-nav-cta > a {
	border: 2px solid var(--ink-15) !important;   /* override the Bricks last-item box for a consistent CTA in both auth states */
	border-radius: var(--radius-md);
	padding: 0.5em 1.1em;
	color: var(--ink-100);
	transition: border-color var(--dur-quick) var(--ease-out-luxe), color var(--dur-quick) var(--ease-out-luxe);
}
.header .bricks-nav-menu li.vmg-nav-cta > a:hover,
.header .bricks-mobile-menu li.vmg-nav-cta > a:hover {
	border-color: var(--hex-violet-light) !important;
	color: var(--hex-violet-light);
}

/* #1 — Log out: quiet text link. The header's last nav item carries a Bricks-
   generated 1px box (set via the Nav Menu element, not in any stylesheet — only
   beatable with !important); reset it so Log out reads as a plain link. */
.header .bricks-nav-menu li.vmg-nav-logout > a,
.header .bricks-mobile-menu li.vmg-nav-logout > a {
	border: 0 !important;
	background: none;
	padding: 0;
	color: var(--ink-50);
}
.header .bricks-nav-menu li.vmg-nav-logout > a:hover,
.header .bricks-mobile-menu li.vmg-nav-logout > a:hover {
	color: var(--ink-100);
}

/* #7 — skip-link: Bricks emits it; provide the visually-hidden-until-focus rule */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100000;
}
.skip-link:focus {
	left: var(--space-s);
	top: var(--space-s);
	width: auto;
	height: auto;
	padding: var(--space-2xs) var(--space-s);
	background: var(--hex-violet);
	color: var(--ink-100);
	border-radius: var(--radius-md);
	font-family: var(--font-mono);
	font-size: var(--f-small);
	text-decoration: none;
}


/* ============================================================
   VMG LEGAL — document CPT (vmg_legal): single + archive
   Document-based prose, no featured image. Single = Bricks
   default content (blocks) + eyebrow/title/back-link injected by
   vmg-portal's the_content filter. Archive = Bricks default
   post loop, branded as a doc list.
   ============================================================ */

/* ---- single legal document (/legal/{slug}/) ------------- */
.single-vmg_legal #brx-content.brxe-container { max-width: 48rem; padding-block: var(--space-2xl); }
.legal-doc__head { margin-bottom: var(--space-l); }
.legal-doc__head .eyebrow { margin: 0; }
.legal-doc__title { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h1); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-2xs) 0 0; }
.single-vmg_legal #brx-content h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); letter-spacing: -0.01em; margin: var(--space-xl) 0 var(--space-s); color: var(--ink-100); }
.single-vmg_legal #brx-content p { margin: 0 0 var(--space-m); line-height: 1.7; color: var(--ink-70); }
.single-vmg_legal #brx-content p strong { color: var(--ink-100); font-weight: 600; }
.single-vmg_legal #brx-content ul,
.single-vmg_legal #brx-content ol { margin: 0 0 var(--space-m); padding-left: var(--space-m); }
.single-vmg_legal #brx-content li { margin-bottom: var(--space-2xs); line-height: 1.6; color: var(--ink-70); }
.single-vmg_legal #brx-content a { color: var(--sapphire-light); }
.single-vmg_legal #brx-content a:hover { color: var(--ink-100); }
.legal-doc__back { margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--ink-15); font-family: var(--font-mono); font-size: var(--f-small); letter-spacing: 0.05em; }
.legal-doc__back a { color: var(--sapphire-light); text-decoration: none; }
.legal-doc__back a:hover { color: var(--ink-100); }

/* ---- legal archive (/legal/) ---------------------------- */
.post-type-archive-vmg_legal .bricks-archive-title-wrapper { max-width: var(--section-max); margin-inline: auto; padding: var(--space-2xl) var(--space-l) var(--space-m); }
.post-type-archive-vmg_legal .bricks-archive-title-wrapper .title { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h1); letter-spacing: -0.02em; }
.post-type-archive-vmg_legal .brxe-posts { max-width: var(--section-max); margin-inline: auto; padding: 0 var(--space-l) var(--space-2xl); }
.post-type-archive-vmg_legal .brxe-posts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.post-type-archive-vmg_legal .brxe-posts > ul > li { background: var(--midnight); border: 1px solid var(--ink-15); border-radius: var(--radius-lg); transition: border-color var(--dur-quick) var(--ease-out-luxe); }
.post-type-archive-vmg_legal .brxe-posts > ul > li:hover { border-color: color-mix(in oklab, var(--hex-violet) 35%, var(--ink-15)); }
.post-type-archive-vmg_legal .brxe-posts .content-wrapper { padding: var(--space-m) var(--space-l); }
.post-type-archive-vmg_legal .brxe-posts h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); }
.post-type-archive-vmg_legal .brxe-posts h3 a { color: var(--ink-100); text-decoration: none; display: block; }
.post-type-archive-vmg_legal .brxe-posts > ul > li:hover h3 a { color: var(--hex-violet-light); }